Add secret fields edit dialogs

src/components/ActionDialog/ActionDialog.tsx

@@ -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();
 }
 

src/plugins/components/PluginAuthorization/PluginAuthorization.tsx

@@ -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>

src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.tsx

@@ -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;

src/plugins/components/PluginSecretFieldDialog/index.ts

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

src/plugins/views/PluginsDetails.tsx

@@ -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 { commonMessages } from "@saleor/intl";
-import { useIntl } from "react-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>
+    <TypedPluginsDetailsQuery variables={{ id }}>
-      {(pluginUpdate, pluginUpdateOpts) => (
+      {pluginDetails => (
-        <TypedPluginsDetailsQuery variables={{ id }}>
+        <TypedPluginUpdate onCompleted={handleUpdate}>
-          {pluginDetails => {
+          {(pluginUpdate, pluginUpdateOpts) => {
             const formTransitionState = getMutationState(
               pluginUpdateOpts.called,
               pluginUpdateOpts.loading,
@@ -82,22 +96,20 @@ export const PluginsDetails: React.FC<PluginsDetailsProps> = ({
               []
             );
 
-            if (formErrors.length) {
+            const handleFieldUpdate = (value: string) =>
-              formErrors.map(error => {
+              pluginUpdate({
-                notify({
+                variables: {
-                  text: error.message
+                  id,
-                });
+                  input: {
+                    configuration: [
+                      {
+                        name: params.field,
+                        value
+                      }
+                    ]
+                  }
+                }
               });
-            } else {
-              if (pluginUpdateOpts.data) {
-                notify({
-                  text: intl.formatMessage({
-                    defaultMessage: "Succesfully updated plugin settings",
-                    description: "plugin success message"
-                  })
-                });
-              }
-            }
 
             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>
       )}
-    </TypedPluginUpdate>
+    </TypedPluginsDetailsQuery>
   );
 };
 PluginsDetails.displayName = "PluginsDetails";

src/types.ts

@@ -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;