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 (