Fix types

src/components/TableHead/TableHead.tsx

@@ -25,7 +25,7 @@ export interface TableHeadProps extends MuiTableHeadProps {
   dragRows?: boolean;
   selected: number;
   items: Node[];
-  toolbar: React.ReactNode | React.ReactNodeArray;
+  toolbar?: React.ReactNode | React.ReactNodeArray;
   toggleAll: (items: Node[], selected: number) => void;
 }
 
@@ -138,7 +138,7 @@ const TableHead = withStyles(styles, {
                     </Typography>
                   )}
                   <div className={classes.spacer} />
-                  <div className={classes.toolbar}>{toolbar}</div>
+                  {toolbar && <div className={classes.toolbar}>{toolbar}</div>}
                 </div>
               </TableCell>
             </>

src/config.ts

@@ -21,6 +21,7 @@ export interface AppListViewSettings {
   [ListViews.NAVIGATION_LIST]: ListSettings;
   [ListViews.ORDER_LIST]: ListSettings;
   [ListViews.PAGES_LIST]: ListSettings;
+  [ListViews.PLUGINS_LIST]: ListSettings;
   [ListViews.PRODUCT_LIST]: ListSettings<ProductListColumns>;
   [ListViews.SALES_LIST]: ListSettings;
   [ListViews.SHIPPING_METHODS_LIST]: ListSettings;
@@ -49,6 +50,9 @@ export const defaultListSettings: AppListViewSettings = {
   [ListViews.PAGES_LIST]: {
     rowNumber: PAGINATE_BY
   },
+  [ListViews.PLUGINS_LIST]: {
+    rowNumber: PAGINATE_BY
+  },
   [ListViews.PRODUCT_LIST]: {
     columns: ["isPublished", "price", "productType"],
     rowNumber: PAGINATE_BY

src/plugins/components/PluginInfo/PluginInfo.tsx

@@ -1,12 +1,6 @@
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
-import {
+import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
-import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
 import React from "react";
 
@@ -19,36 +13,27 @@ import { FormData } from "../PluginsDetailsPage";
 
 interface PluginInfoProps {
   data: FormData;
-  errors: Partial<{
-    description: string;
-    domain: string;
-    name: string;
-  }>;
-  disabled: boolean;
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
-const styles = (theme: Theme) =>
+const styles = createStyles({
-  createStyles({
+  status: {
-    title: {
+    color: "#3D3D3D",
-      fontSize: 14,
+    fontSize: 16,
-      color: "#616161",
+    fontWeight: 400,
-      paddingTop: 10
+    paddingTop: 20
-    },
+  },
-    status: {
+  title: {
-      fontSize: 16,
+    color: "#616161",
-      color: "#3D3D3D",
+    fontSize: 14,
-      paddingTop: 20,
+    paddingTop: 10
-      fontWeight: "400"
+  }
-    }
+});
-  });
 
 const PluginInfo = withStyles(styles, { name: "PluginInfo" })(
   ({
     data,
-    disabled,
     classes,
-    errors,
     onChange
   }: PluginInfoProps & WithStyles<typeof styles>) => {
     return (

src/plugins/components/PluginSettings/PluginSettings.tsx

@@ -1,18 +1,10 @@
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
-import ControlledSwitch from "@saleor/components/ControlledSwitch";
+import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
-import {
-  createStyles,
-  Theme,
-  withStyles,
-  WithStyles
-} from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
-import Typography from "@material-ui/core/Typography";
-import React from "react";
-
 import CardTitle from "@saleor/components/CardTitle";
-import FormSpacer from "@saleor/components/FormSpacer";
+import ControlledSwitch from "@saleor/components/ControlledSwitch";
+import React from "react";
 import i18n from "../../../i18n";
 import { FormData } from "../PluginsDetailsPage";
 
@@ -27,13 +19,12 @@ interface PluginSettingsProps {
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
-const styles = (theme: Theme) =>
+const styles = createStyles({
-  createStyles({
+  item: {
-    item: {
+    paddingBottom: 5,
-      marginBottom: 5,
+    paddingTop: 5
-      marginTop: 10
+  }
-    }
+});
-  });
 
 const PluginSettings = withStyles(styles, { name: "PluginSettings" })(
   ({
@@ -42,7 +33,8 @@ const PluginSettings = withStyles(styles, { name: "PluginSettings" })(
     classes,
     errors,
     onChange
-  }: PluginSettingsProps & WithStyles<typeof styles>) => (
+  }: PluginSettingsProps & WithStyles<typeof styles>) => {
+    return (
       <Card>
         <CardTitle
           title={i18n.t("Plugin Settings", {
@@ -51,10 +43,9 @@ const PluginSettings = withStyles(styles, { name: "PluginSettings" })(
         />
         <CardContent>
           {data.configuration.map((configuration, index) => (
-            <div className={classes.item} key={`item-${index}`}>
+            <div className={classes.item} key={index}>
               {configuration.type === "STRING" && (
                 <TextField
-                  className={classes.item}
                   disabled={disabled}
                   error={!!errors.name}
                   label={configuration.label}
@@ -66,8 +57,7 @@ const PluginSettings = withStyles(styles, { name: "PluginSettings" })(
               )}
               {configuration.type === "BOOLEAN" && (
                 <ControlledSwitch
-                  className={classes.item}
+                  checked={configuration.value === "true"}
-                  checked={configuration.value}
                   label={configuration.label}
                   name={configuration.name}
                   onChange={onChange}
@@ -78,6 +68,7 @@ const PluginSettings = withStyles(styles, { name: "PluginSettings" })(
         </CardContent>
       </Card>
     );
+  }
 );
 PluginSettings.displayName = "PluginSettings";
 export default PluginSettings;

src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx

@@ -1,42 +1,36 @@
-import React from "react";
 import Typography from "@material-ui/core/Typography";
 import AppHeader from "@saleor/components/AppHeader";
-import CardSpacer from "@saleor/components/CardSpacer";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import Container from "@saleor/components/Container";
 import Form from "@saleor/components/Form";
 import Grid from "@saleor/components/Grid";
 import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
-import SeoForm from "@saleor/components/SeoForm";
+import { maybe } from "@saleor/misc";
-import VisibilityCard from "@saleor/components/VisibilityCard";
+import { UserError } from "@saleor/types";
+import React from "react";
+
 import i18n from "../../../i18n";
-import { maybe } from "../../../misc";
-import { UserError } from "../../../types";
-import { PageDetails_page } from "../../types/PluginDetails";
 import PluginInfo from "../PluginInfo";
 import PluginSettings from "../PluginSettings";
 
 export interface FormData {
-  name: string;
+  name?: string;
-  description: string;
+  description?: string;
   active: boolean;
-  id: string;
+  configuration: Array<{
-  configuration: [
+    name: string;
-    {
+    value: string;
-      name: string;
+    type: string;
-      value: string;
+    helpText: string;
-      type: string;
+    label: string;
-      helpText: string;
+  }>;
-      label: string;
-    }
-  ];
 }
 
 export interface PageDetailsPageProps {
   disabled: boolean;
   errors: UserError[];
-  plugin: PageDetails_page;
+  plugin: FormData;
   saveButtonBarState: ConfirmButtonTransitionState;
   onBack: () => void;
   onSubmit: (data: FormData) => void;
@@ -51,22 +45,14 @@ const PageDetailsPage: React.StatelessComponent<PageDetailsPageProps> = ({
   onSubmit
 }) => {
   const initialForm: FormData = {
-    name: maybe(() => plugin.name, ""),
-    description: maybe(() => plugin.description, ""),
     active: maybe(() => plugin.active, false),
-    configuration: maybe(() => plugin.configuration, [])
+    configuration: maybe(() => plugin.configuration, []),
+    description: maybe(() => plugin.description, ""),
+    name: maybe(() => plugin.name, "")
   };
   return (
     <Form errors={errors} initial={initialForm} onSubmit={onSubmit}>
-      {({
+      {({ data, errors, hasChanged, submit, set, triggerChange }) => {
-        change,
-        data,
-        errors: formErrors,
-        hasChanged,
-        submit,
-        set,
-        triggerChange
-      }) => {
         const newData = {
           active: data.active,
           configuration: data.configuration
@@ -104,12 +90,7 @@ const PageDetailsPage: React.StatelessComponent<PageDetailsPageProps> = ({
                   )}
                 </Typography>
               </div>
-              <PluginInfo
+              <PluginInfo data={data} onChange={onChange} />
-                data={data}
-                errors={errors}
-                disabled={disabled}
-                onChange={onChange}
-              />
               {data.configuration && (
                 <>
                   <div>

src/plugins/components/PluginsList/PluginsList.tsx

@@ -20,28 +20,28 @@ import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
 import i18n from "@saleor/i18n";
 import { maybe, renderCollection } from "@saleor/misc";
-import { ListActions, ListProps } from "@saleor/types";
+import { ListActionsWithoutToolbar, ListProps } from "@saleor/types";
-import { PageList_pages_edges_node } from "../../types/PageList";
+import { PluginConfigurations_pluginConfigurations_edges_node } from "../../types/pluginConfigurations";
 
-export interface PluginListProps extends ListProps, ListActions {
+export interface PluginListProps extends ListProps, ListActionsWithoutToolbar {
-  plugins: PageList_pages_edges_node[];
+  plugins: PluginConfigurations_pluginConfigurations_edges_node[];
 }
 
 const styles = (theme: Theme) =>
   createStyles({
     [theme.breakpoints.up("lg")]: {
-      colActive: {},
-      colName: {},
       colAction: {
-        textAlign: "right",
         "& svg": {
           color: theme.palette.primary.main
-        }
+        },
-      }
+        textAlign: "right"
+      },
+      colActive: {},
+      colName: {}
     },
-    colName: {},
-    colActive: {},
     colAction: {},
+    colActive: {},
+    colName: {},
     link: {
       cursor: "pointer"
     }
@@ -63,8 +63,7 @@ const PluginList = withStyles(styles, { name: "PluginList" })(
     isChecked,
     selected,
     toggle,
-    toggleAll,
+    toggleAll
-    toolbar
   }: PluginListProps & WithStyles<typeof styles>) => {
     return (
       <Card>
@@ -75,7 +74,6 @@ const PluginList = withStyles(styles, { name: "PluginList" })(
             disabled={disabled}
             items={plugins}
             toggleAll={toggleAll}
-            toolbar={toolbar}
           >
             <TableCell className={classes.colName} padding="dense">
               {i18n.t("Name", { context: "table header" })}

src/plugins/components/PluginsListPage/PluginsListPage.tsx

@@ -1,17 +1,17 @@
-import Button from "@material-ui/core/Button";
-import AddIcon from "@material-ui/icons/Add";
 import React from "react";
 
 import AppHeader from "@saleor/components/AppHeader";
 import Container from "@saleor/components/Container";
 import PageHeader from "@saleor/components/PageHeader";
 import i18n from "@saleor/i18n";
-import { ListActions, PageListProps } from "@saleor/types";
+import { ListActionsWithoutToolbar, PageListProps } from "@saleor/types";
-import { PageList_pages_edges_node } from "../../types/PageList";
+import { PluginConfigurations_pluginConfigurations_edges_node } from "../../types/PluginConfigurations";
 import PluginsList from "../PluginsList/PluginsList";
 
-export interface PluginsListPageProps extends PageListProps, ListActions {
+export interface PluginsListPageProps
-  pages: PageList_pages_edges_node[];
+  extends PageListProps,
+    ListActionsWithoutToolbar {
+  plugins: PluginConfigurations_pluginConfigurations_edges_node[];
   onBack: () => void;
 }
 
@@ -28,8 +28,7 @@ const PluginsListPage: React.StatelessComponent<PluginsListPageProps> = ({
   isChecked,
   selected,
   toggle,
-  toggleAll,
+  toggleAll
-  toolbar
 }) => (
   <Container>
     <AppHeader onBack={onBack}>{i18n.t("Configuration")}</AppHeader>
@@ -47,7 +46,6 @@ const PluginsListPage: React.StatelessComponent<PluginsListPageProps> = ({
       selected={selected}
       toggle={toggle}
       toggleAll={toggleAll}
-      toolbar={toolbar}
     />
   </Container>
 );

src/plugins/index.tsx

@@ -5,9 +5,9 @@ import { Route, RouteComponentProps, Switch } from "react-router-dom";
 import { WindowTitle } from "../components/WindowTitle";
 import i18n from "../i18n";
 import {
-  pluginsPath,
   pluginsListPath,
-  PluginsListUrlQueryParams
+  PluginsListUrlQueryParams,
+  pluginsPath
 } from "./urls";
 import PluginsDetailsComponent from "./views/PluginsDetails";
 import PluginsListComponent from "./views/PluginsList";

src/plugins/mutations.ts

@@ -3,13 +3,13 @@ import gql from "graphql-tag";
 import { TypedMutation } from "../mutations";
 import { pluginsDetailsFragment } from "./queries";
 import {
-  pluginConfigurationUpdate,
+  PluginConfigurationUpdate,
-  pluginConfigurationUpdateVariables
+  PluginConfigurationUpdateVariables
 } from "./types/pluginConfigurationUpdate";
 
 const pluginConfigurationUpdate = gql`
   ${pluginsDetailsFragment}
-  mutation pluginConfigurationUpdate(
+  mutation PluginConfigurationUpdate(
     $id: ID!
     $input: PluginConfigurationUpdateInput!
   ) {
@@ -25,6 +25,6 @@ const pluginConfigurationUpdate = gql`
   }
 `;
 export const TypedPluginConfigurationUpdate = TypedMutation<
-  pluginConfigurationUpdate,
+  PluginConfigurationUpdate,
-  pluginConfigurationUpdateVariables
+  PluginConfigurationUpdateVariables
 >(pluginConfigurationUpdate);

src/plugins/queries.ts

@@ -1,8 +1,14 @@
 import gql from "graphql-tag";
 
 import { TypedQuery } from "../queries";
-import { PluginDetails, PluginDetailsVariables } from "./types/PluginDetails";
+import {
-import { PluginsList, PluginsListVariables } from "./types/PluginsList";
+  PluginConfiguration,
+  PluginConfigurationVariables
+} from "./types/pluginConfiguration";
+import {
+  PluginConfigurations,
+  PluginConfigurationsVariables
+} from "./types/pluginConfigurations";
 
 export const pluginsFragment = gql`
   fragment pluginFragment on PluginConfiguration {
@@ -29,7 +35,7 @@ export const pluginsDetailsFragment = gql`
 
 const pluginsList = gql`
   ${pluginsFragment}
-  query pluginConfigurations(
+  query PluginConfigurations(
     $first: Int
     $after: String
     $last: Int
@@ -46,23 +52,29 @@ const pluginsList = gql`
           ...pluginFragment
         }
       }
+      pageInfo {
+        hasPreviousPage
+        hasNextPage
+        startCursor
+        endCursor
+      }
     }
   }
 `;
 export const TypedPluginsListQuery = TypedQuery<
-  PluginsList,
+  PluginConfigurations,
-  PluginsListVariables
+  PluginConfigurationsVariables
 >(pluginsList);
 
 const pluginsDetails = gql`
   ${pluginsDetailsFragment}
-  query pluginConfiguration($id: ID!) {
+  query PluginConfiguration($id: ID!) {
     pluginConfiguration(id: $id) {
       ...pluginsDetailsFragment
     }
   }
 `;
 export const TypedPluginsDetailsQuery = TypedQuery<
-  PluginDetails,
+  PluginConfiguration,
-  PluginDetailsVariables
+  PluginConfigurationVariables
 >(pluginsDetails);

src/plugins/types/pluginConfiguration.ts

@@ -5,10 +5,10 @@
 import { ConfigurationTypeFieldEnum } from "./../../types/globalTypes";
 
 // ====================================================
-// GraphQL query operation: pluginConfiguration
+// GraphQL query operation: PluginConfiguration
 // ====================================================
 
-export interface pluginConfiguration_pluginConfiguration_configuration {
+export interface PluginConfiguration_pluginConfiguration_configuration {
   __typename: "ConfigurationItem";
   name: string;
   type: ConfigurationTypeFieldEnum | null;
@@ -17,19 +17,19 @@ export interface pluginConfiguration_pluginConfiguration_configuration {
   label: string | null;
 }
 
-export interface pluginConfiguration_pluginConfiguration {
+export interface PluginConfiguration_pluginConfiguration {
   __typename: "PluginConfiguration";
   id: string;
   name: string;
   description: string;
   active: boolean;
-  configuration: (pluginConfiguration_pluginConfiguration_configuration | null)[] | null;
+  configuration: (PluginConfiguration_pluginConfiguration_configuration | null)[] | null;
 }
 
-export interface pluginConfiguration {
+export interface PluginConfiguration {
-  pluginConfiguration: pluginConfiguration_pluginConfiguration | null;
+  pluginConfiguration: PluginConfiguration_pluginConfiguration | null;
 }
 
-export interface pluginConfigurationVariables {
+export interface PluginConfigurationVariables {
   id: string;
 }

src/plugins/types/pluginConfigurationUpdate.ts

@@ -5,16 +5,16 @@
 import { PluginConfigurationUpdateInput, ConfigurationTypeFieldEnum } from "./../../types/globalTypes";
 
 // ====================================================
-// GraphQL mutation operation: pluginConfigurationUpdate
+// GraphQL mutation operation: PluginConfigurationUpdate
 // ====================================================
 
-export interface pluginConfigurationUpdate_pluginConfigurationUpdate_errors {
+export interface PluginConfigurationUpdate_pluginConfigurationUpdate_errors {
   __typename: "Error";
   field: string | null;
   message: string | null;
 }
 
-export interface pluginConfigurationUpdate_pluginConfigurationUpdate_pluginConfiguration_configuration {
+export interface PluginConfigurationUpdate_pluginConfigurationUpdate_pluginConfiguration_configuration {
   __typename: "ConfigurationItem";
   name: string;
   type: ConfigurationTypeFieldEnum | null;
@@ -23,26 +23,26 @@ export interface pluginConfigurationUpdate_pluginConfigurationUpdate_pluginConfi
   label: string | null;
 }
 
-export interface pluginConfigurationUpdate_pluginConfigurationUpdate_pluginConfiguration {
+export interface PluginConfigurationUpdate_pluginConfigurationUpdate_pluginConfiguration {
   __typename: "PluginConfiguration";
   id: string;
   name: string;
   description: string;
   active: boolean;
-  configuration: (pluginConfigurationUpdate_pluginConfigurationUpdate_pluginConfiguration_configuration | null)[] | null;
+  configuration: (PluginConfigurationUpdate_pluginConfigurationUpdate_pluginConfiguration_configuration | null)[] | null;
 }
 
-export interface pluginConfigurationUpdate_pluginConfigurationUpdate {
+export interface PluginConfigurationUpdate_pluginConfigurationUpdate {
   __typename: "PluginConfigurationUpdate";
-  errors: pluginConfigurationUpdate_pluginConfigurationUpdate_errors[] | null;
+  errors: PluginConfigurationUpdate_pluginConfigurationUpdate_errors[] | null;
-  pluginConfiguration: pluginConfigurationUpdate_pluginConfigurationUpdate_pluginConfiguration | null;
+  pluginConfiguration: PluginConfigurationUpdate_pluginConfigurationUpdate_pluginConfiguration | null;
 }
 
-export interface pluginConfigurationUpdate {
+export interface PluginConfigurationUpdate {
-  pluginConfigurationUpdate: pluginConfigurationUpdate_pluginConfigurationUpdate | null;
+  pluginConfigurationUpdate: PluginConfigurationUpdate_pluginConfigurationUpdate | null;
 }
 
-export interface pluginConfigurationUpdateVariables {
+export interface PluginConfigurationUpdateVariables {
   id: string;
   input: PluginConfigurationUpdateInput;
 }

src/plugins/types/pluginConfigurations.ts

@@ -3,10 +3,10 @@
 // This file was automatically generated and should not be edited.
 
 // ====================================================
-// GraphQL query operation: pluginConfigurations
+// GraphQL query operation: PluginConfigurations
 // ====================================================
 
-export interface pluginConfigurations_pluginConfigurations_edges_node {
+export interface PluginConfigurations_pluginConfigurations_edges_node {
   __typename: "PluginConfiguration";
   id: string;
   name: string;
@@ -14,21 +14,30 @@ export interface pluginConfigurations_pluginConfigurations_edges_node {
   active: boolean;
 }
 
-export interface pluginConfigurations_pluginConfigurations_edges {
+export interface PluginConfigurations_pluginConfigurations_edges {
   __typename: "PluginConfigurationCountableEdge";
-  node: pluginConfigurations_pluginConfigurations_edges_node;
+  node: PluginConfigurations_pluginConfigurations_edges_node;
 }
 
-export interface pluginConfigurations_pluginConfigurations {
+export interface PluginConfigurations_pluginConfigurations_pageInfo {
+  __typename: "PageInfo";
+  hasPreviousPage: boolean;
+  hasNextPage: boolean;
+  startCursor: string | null;
+  endCursor: string | null;
+}
+
+export interface PluginConfigurations_pluginConfigurations {
   __typename: "PluginConfigurationCountableConnection";
-  edges: pluginConfigurations_pluginConfigurations_edges[];
+  edges: PluginConfigurations_pluginConfigurations_edges[];
+  pageInfo: PluginConfigurations_pluginConfigurations_pageInfo;
 }
 
-export interface pluginConfigurations {
+export interface PluginConfigurations {
-  pluginConfigurations: pluginConfigurations_pluginConfigurations | null;
+  pluginConfigurations: PluginConfigurations_pluginConfigurations | null;
 }
 
-export interface pluginConfigurationsVariables {
+export interface PluginConfigurationsVariables {
   first?: number | null;
   after?: string | null;
   last?: number | null;

src/plugins/views/PluginsDetails.tsx

@@ -1,29 +1,22 @@
-import DialogContentText from "@material-ui/core/DialogContentText";
 import React from "react";
 
-import ActionDialog from "@saleor/components/ActionDialog";
 import { WindowTitle } from "@saleor/components/WindowTitle";
 import useNavigator from "@saleor/hooks/useNavigator";
-import useNotifier from "@saleor/hooks/useNotifier";
-import i18n from "../../i18n";
 import { getMutationState, maybe } from "../../misc";
-import { PluginConfigurationUpdateInput } from "../../types/globalTypes";
+import PluginsDetailsPage from "../components/PluginsDetailsPage";
-import PluginsDetailsPage, { FormData } from "../components/PluginsDetailsPage";
 import { TypedPluginConfigurationUpdate } from "../mutations";
 import { TypedPluginsDetailsQuery } from "../queries";
-import { pluginsListUrl, pluginsUrl, PluginsUrlQueryParams } from "../urls";
+import { pluginsListUrl, PluginsListUrlQueryParams } from "../urls";
 
 export interface PluginsDetailsProps {
   id: string;
-  params: PluginsUrlQueryParams;
+  params: PluginsListUrlQueryParams;
 }
 
 export const PluginsDetails: React.StatelessComponent<PluginsDetailsProps> = ({
-  id,
+  id
-  params
 }) => {
   const navigate = useNavigator();
-  const notify = useNotifier();
 
   return (
     <TypedPluginConfigurationUpdate>
@@ -35,7 +28,8 @@ export const PluginsDetails: React.StatelessComponent<PluginsDetailsProps> = ({
               pluginConfigurationUpdateOpts.loading,
               maybe(
                 () =>
-                  pluginConfigurationUpdateOpts.data.pluginConfiguration.errors
+                  pluginConfigurationUpdateOpts.data.pluginConfigurationUpdate
+                    .errors
               )
             );
 
@@ -50,8 +44,8 @@ export const PluginsDetails: React.StatelessComponent<PluginsDetailsProps> = ({
                   disabled={PluginDetails.loading}
                   errors={maybe(
                     () =>
-                      pluginConfigurationUpdateOpts.data.pluginConfiguration
+                      pluginConfigurationUpdateOpts.data
-                        .errors,
+                        .pluginConfigurationUpdate.errors,
                     []
                   )}
                   saveButtonBarState={formTransitionState}
@@ -62,7 +56,7 @@ export const PluginsDetails: React.StatelessComponent<PluginsDetailsProps> = ({
                     formData.configuration.map(item => {
                       configurationInput.push({
                         name: item.name,
-                        value: item.value
+                        value: item.value.toString()
                       });
                     });
                     pluginConfigurationUpdate({

src/plugins/views/PluginsList.tsx

@@ -1,29 +1,16 @@
-import Button from "@material-ui/core/Button";
-import DialogContentText from "@material-ui/core/DialogContentText";
-import IconButton from "@material-ui/core/IconButton";
-import DeleteIcon from "@material-ui/icons/Delete";
-import React from "react";
-
-import ActionDialog from "@saleor/components/ActionDialog";
 import { configurationMenuUrl } from "@saleor/configuration";
 import useBulkActions from "@saleor/hooks/useBulkActions";
 import useListSettings from "@saleor/hooks/useListSettings";
 import useNavigator from "@saleor/hooks/useNavigator";
-import useNotifier from "@saleor/hooks/useNotifier";
 import usePaginator, {
   createPaginationState
 } from "@saleor/hooks/usePaginator";
-import i18n from "@saleor/i18n";
+import { maybe } from "@saleor/misc";
-import { getMutationState, maybe } from "@saleor/misc";
 import { ListViews } from "@saleor/types";
+import React from "react";
 import PluginsListPage from "../components/PluginsListPage/PluginsListPage";
 import { TypedPluginsListQuery } from "../queries";
-import {
+import { PluginsListUrlQueryParams, pluginsUrl } from "../urls";
-  pluginsListUrl,
-  PluginsListUrlDialog,
-  PluginsListUrlQueryParams,
-  pluginsUrl
-} from "../urls";
 
 interface PluginsListProps {
   params: PluginsListUrlQueryParams;
@@ -33,25 +20,23 @@ export const PluginsList: React.StatelessComponent<PluginsListProps> = ({
   params
 }) => {
   const navigate = useNavigator();
-  const notify = useNotifier();
   const paginate = usePaginator();
-  const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
+  const { isSelected, listElements, toggle, toggleAll } = useBulkActions(
     params.ids
   );
   const { updateListSettings, settings } = useListSettings(
-    ListViews.PAGES_LIST
+    ListViews.PLUGINS_LIST
   );
   const paginationState = createPaginationState(settings.rowNumber, params);
 
   return (
     <TypedPluginsListQuery displayLoader variables={paginationState}>
-      {({ data, loading, refetch }) => {
+      {({ data, loading }) => {
         const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
-          maybe(() => data.pages.pageInfo),
+          maybe(() => data.pluginConfigurations.pageInfo),
           paginationState,
           params
         );
-
         return (
           <>
             <PluginsListPage
@@ -61,6 +46,7 @@ export const PluginsList: React.StatelessComponent<PluginsListProps> = ({
                 data.pluginConfigurations.edges.map(edge => edge.node)
               )}
               pageInfo={pageInfo}
+              onAdd={() => navigate(configurationMenuUrl)}
               onBack={() => navigate(configurationMenuUrl)}
               onNextPage={loadNextPage}
               onPreviousPage={loadPreviousPage}

src/types.ts

@@ -23,6 +23,7 @@ export enum ListViews {
   NAVIGATION_LIST = "NAVIGATION_LIST",
   ORDER_LIST = "ORDER_LIST",
   PAGES_LIST = "PAGES_LIST",
+  PLUGINS_LIST = "PLUGIN_LIST",
   PRODUCT_LIST = "PRODUCT_LIST",
   SALES_LIST = "SALES_LIST",
   SHIPPING_METHODS_LIST = "SHIPPING_METHODS_LIST",