Add password handling

src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.stories.tsx

@@ -0,0 +1,36 @@
+import { storiesOf } from "@storybook/react";
+import React from "react";
+
+import { ConfigurationTypeFieldEnum } from "@saleor/types/globalTypes";
+import Decorator from "../../../storybook/Decorator";
+import PluginSecretFieldDialog, {
+  PluginSecretFieldDialogProps
+} from "./PluginSecretFieldDialog";
+
+const props: PluginSecretFieldDialogProps = {
+  confirmButtonState: "default",
+  field: {
+    __typename: "ConfigurationItem",
+    helpText: "",
+    label: "Generic Secret Field",
+    name: "secret",
+    type: ConfigurationTypeFieldEnum.SECRET,
+    value: "value"
+  },
+  onClose: () => undefined,
+  onConfirm: () => undefined,
+  open: true
+};
+
+storiesOf("Views / Plugins / Edit secret field", module)
+  .addDecorator(Decorator)
+  .add("secret key", () => <PluginSecretFieldDialog {...props} />)
+  .add("password", () => (
+    <PluginSecretFieldDialog
+      {...props}
+      field={{
+        ...props.field,
+        type: ConfigurationTypeFieldEnum.PASSWORD
+      }}
+    />
+  ));

src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.tsx

@@ -15,11 +15,12 @@ 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";
+import { ConfigurationTypeFieldEnum } from "@saleor/types/globalTypes";
 
-interface PluginSecretFieldDialogFormData {
+export interface PluginSecretFieldDialogFormData {
   value: string;
 }
-interface PluginSecretFieldDialogProps extends DialogProps {
+export interface PluginSecretFieldDialogProps extends DialogProps {
   confirmButtonState: ConfirmButtonTransitionState;
   field: Plugin_plugin_configuration;
   onConfirm: (data: PluginSecretFieldDialogFormData) => void;
@@ -65,6 +66,10 @@ const PluginSecretFieldDialog: React.FC<PluginSecretFieldDialogProps> = ({
                 fullWidth
                 label={field && field.label}
                 name="value"
+                type={
+                  field.type === ConfigurationTypeFieldEnum.PASSWORD &&
+                  "password"
+                }
                 value={data.value || ""}
                 onChange={change}
               />

src/plugins/index.tsx

@@ -8,7 +8,8 @@ import { WindowTitle } from "../components/WindowTitle";
 import {
   pluginsListPath,
   PluginsListUrlQueryParams,
-  pluginsPath
+  pluginsPath,
+  PluginsUrlQueryParams
 } from "./urls";
 import PluginsDetailsComponent from "./views/PluginsDetails";
 import PluginsListComponent from "./views/PluginsList";
@@ -21,7 +22,7 @@ const PluginList: React.FC<RouteComponentProps<any>> = ({ location }) => {
 
 const PageDetails: React.FC<RouteComponentProps<any>> = ({ match }) => {
   const qs = parseQs(location.search.substr(1));
-  const params: PluginsListUrlQueryParams = qs;
+  const params: PluginsUrlQueryParams = qs;
 
   return (
     <PluginsDetailsComponent