djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add secret fields edit dialogs

Browse source
This commit is contained in:
dominik-zeglen 2019-11-08 11:25:17 +01:00
parent 974dec9db4
commit 6c78be33fc
6 changed files with 181 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/ActionDialog/ActionDialog.tsx
View file

@ -9,6 +9,7 @@ import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import { buttonMessages } from "@saleor/intl";
import { DialogProps } from "@saleor/types";
import ConfirmButton, {
ConfirmButtonTransitionState
} from "../ConfirmButton/ConfirmButton";
@ -26,15 +27,13 @@ const useStyles = makeStyles(
{ name: "ActionDialog" }
);
interface ActionDialogProps {
interface ActionDialogProps extends DialogProps {
children?: React.ReactNode;
confirmButtonLabel?: string;
confirmButtonState: ConfirmButtonTransitionState;
maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | false;
open: boolean;
title: string;
variant?: "default" | "delete";
onClose?();
onConfirm();
}

14
src/plugins/components/PluginAuthorization/PluginAuthorization.tsx
View file

@ -21,7 +21,7 @@ interface PluginAuthorizationProps {
const useStyles = makeStyles(theme => ({
button: {
marginRight: theme.spacing()
marginLeft: theme.spacing()
},
hr: {
margin: theme.spacing(2, 0)
@ -55,7 +55,7 @@ const PluginAuthorization: React.FC<PluginAuthorizationProps> = props => {
/>
<CardContent>
{secretFields.map((field, fieldIndex) => (
<>
<React.Fragment key={field.name}>
<div className={classes.item} key={field.name}>
{field.type === ConfigurationTypeFieldEnum.SECRET ? (
<div>
@ -78,14 +78,14 @@ const PluginAuthorization: React.FC<PluginAuthorizationProps> = props => {
</Button>
) : (
<>
<Button color="primary" onClick={() => onClear(field.name)}>
<FormattedMessage {...buttonMessages.clear} />
</Button>
<Button
className={classes.button}
color="primary"
onClick={() => onClear(field.name)}
onClick={() => onEdit(field.name)}
>
<FormattedMessage {...buttonMessages.clear} />
</Button>
<Button color="primary" onClick={() => onEdit(field.name)}>
<FormattedMessage {...buttonMessages.edit} />
</Button>
</>
@ -94,7 +94,7 @@ const PluginAuthorization: React.FC<PluginAuthorizationProps> = props => {
{fieldIndex !== secretFields.length - 1 && (
<Hr className={classes.hr} />
)}
</>
</React.Fragment>
))}
</CardContent>
</Card>

93
src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.tsx Normal file
View file

@ -0,0 +1,93 @@
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle";
import TextField from "@material-ui/core/TextField";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import ConfirmButton, {
ConfirmButtonTransitionState
} from "@saleor/components/ConfirmButton";
import Form from "@saleor/components/Form";
import Skeleton from "@saleor/components/Skeleton";
import { buttonMessages } from "@saleor/intl";
import { Plugin_plugin_configuration } from "@saleor/plugins/types/Plugin";
import { DialogProps } from "@saleor/types";
interface PluginSecretFieldDialogFormData {
value: string;
}
interface PluginSecretFieldDialogProps extends DialogProps {
confirmButtonState: ConfirmButtonTransitionState;
field: Plugin_plugin_configuration;
onConfirm: (data: PluginSecretFieldDialogFormData) => void;
}
const PluginSecretFieldDialog: React.FC<PluginSecretFieldDialogProps> = ({
confirmButtonState,
field,
onClose,
onConfirm,
open
}) => {
const intl = useIntl();
const initialForm: PluginSecretFieldDialogFormData = {
value: ""
};
return (
<Dialog fullWidth onClose={onClose} open={open} maxWidth="sm">
<DialogTitle>
{field ? (
field.value === null ? (
intl.formatMessage({
defaultMessage: "Add Value to Authorization Field",
description: "header"
})
) : (
intl.formatMessage({
defaultMessage: "Edit Authorization Field",
description: "header"
})
)
) : (
<Skeleton />
)}
</DialogTitle>
<Form initial={initialForm} onSubmit={onConfirm}>
{({ change, data, submit }) => (
<>
<DialogContent>
<TextField
fullWidth
label={field && field.label}
name="value"
value={data.value || ""}
onChange={change}
/>
</DialogContent>
<DialogActions>
<Button onClick={onClose}>
<FormattedMessage {...buttonMessages.back} />
</Button>
<ConfirmButton
transitionState={confirmButtonState}
color="primary"
variant="contained"
onClick={submit}
>
<FormattedMessage {...buttonMessages.confirm} />
</ConfirmButton>
</DialogActions>
</>
)}
</Form>
</Dialog>
);
};
PluginSecretFieldDialog.displayName = "PluginSecretFieldDialog";
export default PluginSecretFieldDialog;

2
src/plugins/components/PluginSecretFieldDialog/index.ts Normal file
View file

@ -0,0 +1,2 @@
export { default } from "./PluginSecretFieldDialog";
export * from "./PluginSecretFieldDialog";

93
src/plugins/views/PluginsDetails.tsx
View file

@ -1,15 +1,20 @@
import DialogContentText from "@material-ui/core/DialogContentText";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import ActionDialog from "@saleor/components/ActionDialog";
import { WindowTitle } from "@saleor/components/WindowTitle";
import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import React from "react";
import { useIntl } from "react-intl";
import { commonMessages } from "@saleor/intl";
import { ConfigurationItemInput } from "@saleor/types/globalTypes";
import { getMutationState, maybe } from "../../misc";
import PluginsDetailsPage from "../components/PluginsDetailsPage";
import PluginSecretFieldDialog from "../components/PluginSecretFieldDialog";
import { TypedPluginUpdate } from "../mutations";
import { TypedPluginsDetailsQuery } from "../queries";
import { Plugin_plugin_configuration } from "../types/Plugin";
import { PluginUpdate } from "../types/PluginUpdate";
import {
pluginsListUrl,
pluginsUrl,
@ -66,11 +71,20 @@ export const PluginsDetails: React.FC<PluginsDetailsProps> = ({
})
);
const handleUpdate = (data: PluginUpdate) => {
if (data.pluginUpdate.errors.length === 0) {
notify({
text: intl.formatMessage(commonMessages.savedChanges)
});
closeModal();
}
};
return (
<TypedPluginUpdate>
{(pluginUpdate, pluginUpdateOpts) => (
<TypedPluginsDetailsQuery variables={{ id }}>
{pluginDetails => {
{pluginDetails => (
<TypedPluginUpdate onCompleted={handleUpdate}>
{(pluginUpdate, pluginUpdateOpts) => {
const formTransitionState = getMutationState(
pluginUpdateOpts.called,
pluginUpdateOpts.loading,
@ -82,22 +96,20 @@ export const PluginsDetails: React.FC<PluginsDetailsProps> = ({
[]
);
if (formErrors.length) {
formErrors.map(error => {
notify({
text: error.message
});
});
} else {
if (pluginUpdateOpts.data) {
notify({
text: intl.formatMessage({
defaultMessage: "Succesfully updated plugin settings",
description: "plugin success message"
})
});
const handleFieldUpdate = (value: string) =>
pluginUpdate({
variables: {
id,
input: {
configuration: [
{
name: params.field,
value
}
]
}
}
});
return (
<>
@ -107,7 +119,9 @@ export const PluginsDetails: React.FC<PluginsDetailsProps> = ({
<PluginsDetailsPage
disabled={pluginDetails.loading}
errors={formErrors}
saveButtonBarState={formTransitionState}
saveButtonBarState={
!params.action ? formTransitionState : "default"
}
plugin={maybe(() => pluginDetails.data.plugin)}
onBack={() => navigate(pluginsListUrl())}
onClear={field => openModal("clear", field)}
@ -127,12 +141,45 @@ export const PluginsDetails: React.FC<PluginsDetailsProps> = ({
})
}
/>
{maybe(() => pluginDetails.data.plugin.configuration) && (
<>
<ActionDialog
confirmButtonState={
!!params.action ? formTransitionState : "default"
}
onClose={closeModal}
open={params.action === "clear" && !!params.field}
title={intl.formatMessage({
defaultMessage: "Authorization Field Delete",
description: "header"
})}
onConfirm={() => handleFieldUpdate(null)}
>
<DialogContentText>
<FormattedMessage defaultMessage="The plugin may stop working after this field is cleared. Are you sure you want to proceed?" />
</DialogContentText>
</ActionDialog>
<PluginSecretFieldDialog
confirmButtonState={
!!params.action ? formTransitionState : "default"
}
field={maybe(() =>
pluginDetails.data.plugin.configuration.find(
field => field.name === params.field
)
)}
onClose={closeModal}
onConfirm={formData => handleFieldUpdate(formData.value)}
open={params.action === "edit" && !!params.field}
/>
</>
)}
</>
);
}}
</TypedPluginsDetailsQuery>
)}
</TypedPluginUpdate>
)}
</TypedPluginsDetailsQuery>
);
};
PluginsDetails.displayName = "PluginsDetails";

5
src/types.ts
View file

@ -9,6 +9,11 @@ export interface UserError {
message: string;
}
export interface DialogProps {
open: boolean;
onClose: () => void;
}
export interface ListSettings<TColumn extends string = string> {
columns?: TColumn[];
rowNumber: number;