Fix plugin auth section crash (#1951)

* Fix plugin auth section crash

* Simplify code
This commit is contained in:
Dominik Żegleń 2022-03-25 15:24:28 +01:00 committed by GitHub
parent d273706ef8
commit 40d9575cad
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 44 deletions

View file

@ -3,7 +3,6 @@ import CardTitle from "@saleor/components/CardTitle";
import Hr from "@saleor/components/Hr"; import Hr from "@saleor/components/Hr";
import { import {
ConfigurationItemFragment, ConfigurationItemFragment,
ConfigurationItemInput,
ConfigurationTypeFieldEnum ConfigurationTypeFieldEnum
} from "@saleor/graphql"; } from "@saleor/graphql";
import { buttonMessages } from "@saleor/intl"; import { buttonMessages } from "@saleor/intl";
@ -13,7 +12,6 @@ import React from "react";
import { FormattedMessage, useIntl } from "react-intl"; import { FormattedMessage, useIntl } from "react-intl";
interface PluginAuthorizationProps { interface PluginAuthorizationProps {
data: ConfigurationItemInput[];
fields: ConfigurationItemFragment[]; fields: ConfigurationItemFragment[];
onClear: (field: string) => void; onClear: (field: string) => void;
onEdit: (field: string) => void; onEdit: (field: string) => void;
@ -39,7 +37,7 @@ const useStyles = makeStyles(
); );
const PluginAuthorization: React.FC<PluginAuthorizationProps> = props => { const PluginAuthorization: React.FC<PluginAuthorizationProps> = props => {
const { data, fields, onClear, onEdit } = props; const { fields, onClear, onEdit } = props;
const classes = useStyles(props); const classes = useStyles(props);
const intl = useIntl(); const intl = useIntl();
@ -57,53 +55,47 @@ const PluginAuthorization: React.FC<PluginAuthorizationProps> = props => {
})} })}
/> />
<CardContent> <CardContent>
{secretFields.map((field, fieldIndex) => { {secretFields.map((field, fieldIndex) => (
const inputData = data.find( <React.Fragment key={field.name}>
dataField => dataField.name === field.name <div className={classes.item} key={field.name}>
); {field.type === ConfigurationTypeFieldEnum.SECRET ||
field.type === ConfigurationTypeFieldEnum.SECRETMULTILINE ? (
return ( <div>
<React.Fragment key={field.name}>
<div className={classes.item} key={field.name}>
{field.type === ConfigurationTypeFieldEnum.SECRET ||
field.type === ConfigurationTypeFieldEnum.SECRETMULTILINE ? (
<div>
<Typography variant="body1">{field.label}</Typography>
{field.value !== null && (
<Typography>**** {inputData.value}</Typography>
)}
</div>
) : (
<Typography variant="body1">{field.label}</Typography> <Typography variant="body1">{field.label}</Typography>
)} {field.value !== null && (
<div className={classes.spacer} /> <Typography>**** {field.value}</Typography>
{field.value === null ? ( )}
</div>
) : (
<Typography variant="body1">{field.label}</Typography>
)}
<div className={classes.spacer} />
{field.value === null ? (
<Button
className={classes.button}
onClick={() => onEdit(field.name)}
>
<FormattedMessage {...buttonMessages.create} />
</Button>
) : (
<>
<Button onClick={() => onClear(field.name)}>
<FormattedMessage {...buttonMessages.clear} />
</Button>
<Button <Button
className={classes.button} className={classes.button}
onClick={() => onEdit(field.name)} onClick={() => onEdit(field.name)}
> >
<FormattedMessage {...buttonMessages.create} /> <FormattedMessage {...buttonMessages.edit} />
</Button> </Button>
) : ( </>
<>
<Button onClick={() => onClear(field.name)}>
<FormattedMessage {...buttonMessages.clear} />
</Button>
<Button
className={classes.button}
onClick={() => onEdit(field.name)}
>
<FormattedMessage {...buttonMessages.edit} />
</Button>
</>
)}
</div>
{fieldIndex !== secretFields.length - 1 && (
<Hr className={classes.hr} />
)} )}
</React.Fragment> </div>
); {fieldIndex !== secretFields.length - 1 && (
})} <Hr className={classes.hr} />
)}
</React.Fragment>
))}
</CardContent> </CardContent>
</Card> </Card>
); );

View file

@ -142,7 +142,6 @@ const PluginsDetailsPage: React.FC<PluginsDetailsPageProps> = ({
<> <>
<CardSpacer /> <CardSpacer />
<PluginAuthorization <PluginAuthorization
data={data.configuration}
fields={selectedConfig.configuration} fields={selectedConfig.configuration}
onClear={onClear} onClear={onClear}
onEdit={onEdit} onEdit={onEdit}