Fix types

src/plugins/components/PluginInfo/PluginInfo.tsx

@@ -10,11 +10,11 @@ import FormSpacer from "@saleor/components/FormSpacer";
 import Hr from "@saleor/components/Hr";
 import i18n from "../../../i18n";
 import { FormData } from "../PluginsDetailsPage";
-import { Plugin_plugin } from "../../types/Plugin";
 
 interface PluginInfoProps {
   data: FormData;
-  plugin: Plugin_plugin;
+  description: string;
+  name: string;
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
@@ -31,7 +31,8 @@ const styles = createStyles({
 const PluginInfo = withStyles(styles, { name: "PluginInfo" })(
   ({
     data,
-    plugin,
+    description,
+    name,
     classes,
     onChange
   }: PluginInfoProps & WithStyles<typeof styles>) => {
@@ -46,13 +47,13 @@ const PluginInfo = withStyles(styles, { name: "PluginInfo" })(
           <Typography className={classes.title} variant="h6">
             {i18n.t("Plugin Name")}
           </Typography>
-          <Typography>{plugin.name}</Typography>
-          {plugin.description && (
+          <Typography>{name}</Typography>
+          {description && (
             <>
               <Typography className={classes.title} variant="h6">
                 {i18n.t("Plugin Description")}
               </Typography>
-              <Typography>{plugin.description}</Typography>
+              <Typography>{description}</Typography>
             </>
           )}
           <FormSpacer />

src/plugins/components/PluginSettings/PluginSettings.tsx

@@ -15,6 +15,13 @@ interface PluginSettingsProps {
   errors: FormErrors<"name" | "configuration">;
   disabled: boolean;
   onChange: (event: React.ChangeEvent<any>) => void;
+  plugin: Array<{
+    name: string;
+    type: ConfigurationTypeFieldEnum | null;
+    value: string;
+    helpText: string | null;
+    label: string | null;
+  }>;
 }
 
 const styles = createStyles({
@@ -30,7 +37,8 @@ const PluginSettings = withStyles(styles, { name: "PluginSettings" })(
     disabled,
     classes,
     errors,
-    onChange
+    onChange,
+    plugin
   }: PluginSettingsProps & WithStyles<typeof styles>) => {
     return (
       <Card>
@@ -42,19 +50,19 @@ const PluginSettings = withStyles(styles, { name: "PluginSettings" })(
         <CardContent>
           {data.configuration.map((configuration, index) => (
             <div className={classes.item} key={index}>
-              {configuration.type === ConfigurationTypeFieldEnum.STRING && (
+              {plugin[index].type === ConfigurationTypeFieldEnum.STRING && (
                 <TextField
                   disabled={disabled}
                   error={!!errors.name}
-                  helperText={configuration.helpText}
-                  label={configuration.label}
+                  helperText={plugin[index].helpText}
+                  label={plugin[index].label}
                   name={configuration.name}
                   fullWidth
                   value={configuration.value}
                   onChange={onChange}
                 />
               )}
-              {configuration.type === ConfigurationTypeFieldEnum.BOOLEAN && (
+              {plugin[index].type === ConfigurationTypeFieldEnum.BOOLEAN && (
                 <ControlledSwitch
                   checked={
                     typeof configuration.value !== "boolean"
@@ -62,7 +70,7 @@ const PluginSettings = withStyles(styles, { name: "PluginSettings" })(
                       : configuration.value
                   }
                   disabled={disabled}
-                  label={configuration.label}
+                  label={plugin[index].label}
                   name={configuration.name}
                   onChange={onChange}
                 />

src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx

@@ -8,16 +8,17 @@ import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import { maybe } from "@saleor/misc";
 import { UserError } from "@saleor/types";
+import { ConfigurationItemInput } from "@saleor/types/globalTypes";
 import React from "react";
 
 import i18n from "../../../i18n";
-import { Plugin_plugin, Plugin_plugin_configuration } from "../../types/Plugin";
+import { Plugin_plugin } from "../../types/Plugin";
 import PluginInfo from "../PluginInfo";
 import PluginSettings from "../PluginSettings";
 
 export interface FormData {
   active: boolean;
-  configuration: Plugin_plugin_configuration;
+  configuration: ConfigurationItemInput[];
 }
 
 export interface PluginsDetailsPageProps {
@@ -83,7 +84,8 @@ const PluginsDetailsPage: React.StatelessComponent<PluginsDetailsPageProps> = ({
               </div>
               <PluginInfo
                 data={data}
-                plugin={maybe(() => plugin, "")}
+                description={maybe(() => plugin.description, "")}
+                name={maybe(() => plugin.name, "")}
                 onChange={onChange}
               />
               {data.configuration && (
@@ -100,6 +102,7 @@ const PluginsDetailsPage: React.StatelessComponent<PluginsDetailsPageProps> = ({
                   </div>
                   <PluginSettings
                     data={data}
+                    plugin={maybe(() => plugin.configuration, [])}
                     errors={errors}
                     disabled={disabled}
                     onChange={onChange}

src/plugins/mutations.ts

@@ -13,7 +13,7 @@ const pluginUpdate = gql`
         message
       }
       plugin {
-        ...pluginsDetailsFragment
+        ...PluginsDetailsFragment
       }
     }
   }

src/plugins/queries.ts

@@ -5,7 +5,7 @@ import { Plugin, PluginVariables } from "./types/Plugin";
 import { Plugins, PluginsVariables } from "./types/Plugins";
 
 export const pluginsFragment = gql`
-  fragment pluginFragment on Plugin {
+  fragment PluginFragment on Plugin {
     id
     name
     description
@@ -15,8 +15,8 @@ export const pluginsFragment = gql`
 
 export const pluginsDetailsFragment = gql`
   ${pluginsFragment}
-  fragment pluginsDetailsFragment on Plugin {
-    ...pluginFragment
+  fragment PluginsDetailsFragment on Plugin {
+    ...PluginFragment
     configuration {
       name
       type
@@ -33,7 +33,7 @@ const pluginsList = gql`
     plugins(before: $before, after: $after, first: $first, last: $last) {
       edges {
         node {
-          ...pluginFragment
+          ...PluginFragment
         }
       }
       pageInfo {
@@ -53,7 +53,7 @@ const pluginsDetails = gql`
   ${pluginsDetailsFragment}
   query Plugin($id: ID!) {
     plugin(id: $id) {
-      ...pluginsDetailsFragment
+      ...PluginsDetailsFragment
     }
   }
 `;