diff --git a/src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.stories.tsx b/src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.stories.tsx
new file mode 100644
index 000000000..16028559b
--- /dev/null
+++ b/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", () => )
+ .add("password", () => (
+
+ ));
diff --git a/src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.tsx b/src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.tsx
index 06edabbf4..b79e8d46d 100644
--- a/src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.tsx
+++ b/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 = ({
fullWidth
label={field && field.label}
name="value"
+ type={
+ field.type === ConfigurationTypeFieldEnum.PASSWORD &&
+ "password"
+ }
value={data.value || ""}
onChange={change}
/>
diff --git a/src/plugins/index.tsx b/src/plugins/index.tsx
index 388c408da..53080b861 100644
--- a/src/plugins/index.tsx
+++ b/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> = ({ location }) => {
const PageDetails: React.FC> = ({ match }) => {
const qs = parseQs(location.search.substr(1));
- const params: PluginsListUrlQueryParams = qs;
+ const params: PluginsUrlQueryParams = qs;
return (