Separate form data

src/plugins/components/PluginInfo/PluginInfo.tsx

@@ -10,9 +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;
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
@@ -29,6 +31,7 @@ const styles = createStyles({
 const PluginInfo = withStyles(styles, { name: "PluginInfo" })(
   ({
     data,
+    plugin,
     classes,
     onChange
   }: PluginInfoProps & WithStyles<typeof styles>) => {
@@ -43,13 +46,13 @@ const PluginInfo = withStyles(styles, { name: "PluginInfo" })(
           <Typography className={classes.title} variant="h6">
             {i18n.t("Plugin Name")}
           </Typography>
-          <Typography>{data.name}</Typography>
+          <Typography>{plugin.name}</Typography>
-          {data.description && (
+          {plugin.description && (
             <>
               <Typography className={classes.title} variant="h6">
                 {i18n.t("Plugin Description")}
               </Typography>
-              <Typography>{data.description}</Typography>
+              <Typography>{plugin.description}</Typography>
             </>
           )}
           <FormSpacer />

src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx

@@ -11,21 +11,13 @@ import { UserError } from "@saleor/types";
 import React from "react";
 
 import i18n from "../../../i18n";
-import { Plugin_plugin } from "../../types/Plugin";
+import { Plugin_plugin, Plugin_plugin_configuration } from "../../types/Plugin";
 import PluginInfo from "../PluginInfo";
 import PluginSettings from "../PluginSettings";
 
 export interface FormData {
-  name?: string;
-  description?: string;
   active: boolean;
-  configuration: Array<{
+  configuration: Plugin_plugin_configuration;
-    name: string;
-    value: string;
-    type: string;
-    helpText: string;
-    label: string;
-  }>;
 }
 
 export interface PluginsDetailsPageProps {
@@ -47,9 +39,7 @@ const PluginsDetailsPage: React.StatelessComponent<PluginsDetailsPageProps> = ({
 }) => {
   const initialForm: FormData = {
     active: maybe(() => plugin.active, false),
-    configuration: maybe(() => plugin.configuration, []),
+    configuration: maybe(() => plugin.configuration, [])
-    description: maybe(() => plugin.description, ""),
-    name: maybe(() => plugin.name, "")
   };
 
   return (
@@ -91,7 +81,11 @@ const PluginsDetailsPage: React.StatelessComponent<PluginsDetailsPageProps> = ({
                   )}
                 </Typography>
               </div>
-              <PluginInfo data={data} onChange={onChange} />
+              <PluginInfo
+                data={data}
+                plugin={maybe(() => plugin, "")}
+                onChange={onChange}
+              />
               {data.configuration && (
                 <>
                   <div>

src/plugins/views/PluginsDetails.tsx

@@ -62,15 +62,14 @@ export const PluginsDetails: React.StatelessComponent<PluginsDetailsProps> = ({
                   plugin={maybe(() => PluginDetails.data.plugin)}
                   onBack={() => navigate(pluginsListUrl())}
                   onSubmit={formData => {
-                    let configurationInput = [];
+                    const configurationInput = formData.configuration.map(
-                    if (formData.configuration) {
+                      item => {
-                      configurationInput = formData.configuration.map(item => {
+                        return {
-                        configurationInput.push({
                           name: item.name,
                           value: item.value.toString()
-                        });
+                        };
-                      });
                       }
+                    );
                     pluginUpdate({
                       variables: {
                         id,