Hide toolbar, checkboxes, Fix small issues

src/components/TableHead/TableHead.tsx

@@ -23,10 +23,10 @@ export interface TableHeadProps extends MuiTableHeadProps {
   colSpan: number;
   disabled: boolean;
   dragRows?: boolean;
-  selected: number;
+  selected?: number;
   items: Node[];
   toolbar?: React.ReactNode | React.ReactNodeArray;
-  toggleAll: (items: Node[], selected: number) => void;
+  toggleAll?: (items: Node[], selected: number) => void;
 }
 
 const styles = (theme: Theme) =>
@@ -101,25 +101,26 @@ const TableHead = withStyles(styles, {
               })}
             />
           )}
-          {(items === undefined || items.length > 0) && (
+          {(items === undefined || items.length > 0) &&
-            <TableCell
+            (selected && (
-              padding="checkbox"
+              <TableCell
-              className={classNames({
+                padding="checkbox"
-                [classes.checkboxSelected]: selected,
-                [classes.dragRows]: dragRows
-              })}
-            >
-              <Checkbox
                 className={classNames({
-                  [classes.checkboxPartialSelect]:
+                  [classes.checkboxSelected]: selected,
-                    items && items.length > selected && selected > 0
+                  [classes.dragRows]: dragRows
                 })}
-                checked={selected === 0 ? false : true}
+              >
-                disabled={disabled}
+                <Checkbox
-                onChange={() => toggleAll(items, selected)}
+                  className={classNames({
-              />
+                    [classes.checkboxPartialSelect]:
-            </TableCell>
+                      items && items.length > selected && selected > 0
-          )}
+                  })}
+                  checked={selected === 0 ? false : true}
+                  disabled={disabled}
+                  onChange={() => toggleAll(items, selected)}
+                />
+              </TableCell>
+            ))}
           {selected ? (
             <>
               <TableCell

src/plugins/components/PluginInfo/PluginInfo.tsx

@@ -18,13 +18,9 @@ interface PluginInfoProps {
 
 const styles = createStyles({
   status: {
-    color: "#3D3D3D",
-    fontSize: 16,
-    fontWeight: 400,
     paddingTop: 20
   },
   title: {
-    color: "#616161",
     fontSize: 14,
     paddingTop: 10
   }
@@ -58,9 +54,7 @@ const PluginInfo = withStyles(styles, { name: "PluginInfo" })(
           )}
           <FormSpacer />
           <Hr />
-          <Typography className={classes.status} variant="h6">
+          <Typography className={classes.status}>{i18n.t("Status")}</Typography>
-            {i18n.t("Status")}
-          </Typography>
           <ControlledSwitch
             checked={data.active}
             label={"Set plugin as Active"}

src/plugins/components/PluginSettings/PluginSettings.tsx

@@ -4,6 +4,7 @@ import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import CardTitle from "@saleor/components/CardTitle";
 import ControlledSwitch from "@saleor/components/ControlledSwitch";
+import { FormErrors } from "@saleor/types";
 import { ConfigurationTypeFieldEnum } from "@saleor/types/globalTypes";
 import React from "react";
 import i18n from "../../../i18n";
@@ -11,11 +12,7 @@ import { FormData } from "../PluginsDetailsPage";
 
 interface PluginSettingsProps {
   data: FormData;
-  errors: Partial<{
+  errors: FormErrors<"name" | "configuration">;
-    description: string;
-    domain: string;
-    name: string;
-  }>;
   disabled: boolean;
   onChange: (event: React.ChangeEvent<any>) => void;
 }
@@ -64,6 +61,7 @@ const PluginSettings = withStyles(styles, { name: "PluginSettings" })(
                       ? configuration.value === "true"
                       : configuration.value
                   }
+                  disabled={disabled}
                   label={configuration.label}
                   name={configuration.name}
                   onChange={onChange}

src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx

@@ -11,6 +11,7 @@ import { UserError } from "@saleor/types";
 import React from "react";
 
 import i18n from "../../../i18n";
+import { Plugin_plugin } from "../../types/Plugin";
 import PluginInfo from "../PluginInfo";
 import PluginSettings from "../PluginSettings";
 
@@ -30,7 +31,7 @@ export interface FormData {
 export interface PluginsDetailsPageProps {
   disabled: boolean;
   errors: UserError[];
-  plugin: FormData;
+  plugin: Plugin_plugin;
   saveButtonBarState: ConfirmButtonTransitionState;
   onBack: () => void;
   onSubmit: (data: FormData) => void;
@@ -54,23 +55,22 @@ const PluginsDetailsPage: React.StatelessComponent<PluginsDetailsPageProps> = ({
   return (
     <Form errors={errors} initial={initialForm} onSubmit={onSubmit}>
       {({ data, errors, hasChanged, submit, set, triggerChange }) => {
-        const newData = {
-          active: data.active,
-          configuration: data.configuration
-        };
-
         const onChange = event => {
+          const newData = {
+            active: data.active,
+            configuration: data.configuration
+          };
           const { name, value } = event.target;
           name === "active"
             ? (newData.active = value)
             : (newData.active = data.active);
-          newData.configuration &&
+          if (newData.configuration) {
             newData.configuration.map(item => {
               if (item.name === name) {
                 item.value = value;
               }
             });
-
+          }
           triggerChange();
           set(newData);
         };

src/plugins/components/PluginsList/PluginsList.tsx

@@ -13,17 +13,17 @@ import TableRow from "@material-ui/core/TableRow";
 import EditIcon from "@material-ui/icons/Edit";
 import React from "react";
 
-import Checkbox from "@saleor/components/Checkbox";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
 import i18n from "@saleor/i18n";
 import { maybe, renderCollection } from "@saleor/misc";
-import { ListActionsWithoutToolbar, ListProps } from "@saleor/types";
+import { ListProps } from "@saleor/types";
+import { translateBoolean } from "@saleor/utils/i18n";
 import { Plugins_plugins_edges_node } from "../../types/Plugins";
 
-export interface PluginListProps extends ListProps, ListActionsWithoutToolbar {
+export interface PluginListProps extends ListProps {
   plugins: Plugins_plugins_edges_node[];
 }
 
@@ -59,21 +59,15 @@ const PluginList = withStyles(styles, { name: "PluginList" })(
     pageInfo,
     onRowClick,
     onUpdateListSettings,
-    onPreviousPage,
+    onPreviousPage
-    isChecked,
-    selected,
-    toggle,
-    toggleAll
   }: PluginListProps & WithStyles<typeof styles>) => {
     return (
       <Card>
         <Table>
           <TableHead
             colSpan={numberOfColumns}
-            selected={selected}
             disabled={disabled}
             items={plugins}
-            toggleAll={toggleAll}
           >
             <TableCell className={classes.colName} padding="dense">
               {i18n.t("Name", { context: "table header" })}
@@ -106,24 +100,13 @@ const PluginList = withStyles(styles, { name: "PluginList" })(
             {renderCollection(
               plugins,
               plugin => {
-                const isSelected = plugin ? isChecked(plugin.id) : false;
-
                 return (
                   <TableRow
                     hover={!!plugin}
                     className={!!plugin ? classes.link : undefined}
                     onClick={plugin ? onRowClick(plugin.id) : undefined}
                     key={plugin ? plugin.id : "skeleton"}
-                    selected={isSelected}
                   >
-                    <TableCell padding="checkbox">
-                      <Checkbox
-                        checked={isSelected}
-                        disabled={disabled}
-                        disableClickPropagation
-                        onChange={() => toggle(plugin.id)}
-                      />
-                    </TableCell>
                     <TableCell className={classes.colName}>
                       {maybe<React.ReactNode>(() => plugin.name, <Skeleton />)}
                     </TableCell>
@@ -131,7 +114,7 @@ const PluginList = withStyles(styles, { name: "PluginList" })(
                       {maybe<React.ReactNode>(
                         () => (
                           <StatusLabel
-                            label={plugin.active ? i18n.t("Yes") : i18n.t("No")}
+                            label={translateBoolean(plugin.active)}
                             status={plugin.active ? "success" : "error"}
                           />
                         ),

src/plugins/components/PluginsListPage/PluginsListPage.tsx

@@ -4,13 +4,11 @@ import AppHeader from "@saleor/components/AppHeader";
 import Container from "@saleor/components/Container";
 import PageHeader from "@saleor/components/PageHeader";
 import i18n from "@saleor/i18n";
-import { ListActionsWithoutToolbar, PageListProps } from "@saleor/types";
+import { PageListProps } from "@saleor/types";
 import { Plugins_plugins_edges_node } from "../../types/Plugins";
 import PluginsList from "../PluginsList/PluginsList";
 
-export interface PluginsListPageProps
+export interface PluginsListPageProps extends PageListProps {
-  extends PageListProps,
-    ListActionsWithoutToolbar {
   plugins: Plugins_plugins_edges_node[];
   onBack: () => void;
 }
@@ -24,11 +22,7 @@ const PluginsListPage: React.StatelessComponent<PluginsListPageProps> = ({
   onRowClick,
   onUpdateListSettings,
   pageInfo,
-  plugins,
+  plugins
-  isChecked,
-  selected,
-  toggle,
-  toggleAll
 }) => (
   <Container>
     <AppHeader onBack={onBack}>{i18n.t("Configuration")}</AppHeader>
@@ -42,10 +36,6 @@ const PluginsListPage: React.StatelessComponent<PluginsListPageProps> = ({
       onUpdateListSettings={onUpdateListSettings}
       onRowClick={onRowClick}
       pageInfo={pageInfo}
-      isChecked={isChecked}
-      selected={selected}
-      toggle={toggle}
-      toggleAll={toggleAll}
     />
   </Container>
 );

src/plugins/urls.ts

@@ -1,21 +1,16 @@
 import { stringify as stringifyQs } from "qs";
 import urlJoin from "url-join";
 
-import { BulkAction, Dialog, Pagination, SingleAction } from "../types";
+import { Pagination, SingleAction } from "../types";
 
 export const pluginsSection = "/plugins/";
 
 export const pluginsListPath = pluginsSection;
-export type PluginsListUrlDialog = "remove" | "remove-many";
+export type PluginsListUrlQueryParams = Pagination & SingleAction;
-export type PluginsListUrlQueryParams = BulkAction &
-  Dialog<PluginsListUrlDialog> &
-  Pagination &
-  SingleAction;
 export const pluginsListUrl = (params?: PluginsListUrlQueryParams) =>
   pluginsListPath + "?" + stringifyQs(params);
 
 export const pluginsPath = (id: string) => urlJoin(pluginsSection, id);
-export type PluginsUrlDialog = "edit-item" | "remove";
+export type PluginsUrlQueryParams = SingleAction;
-export type PluginsUrlQueryParams = Dialog<PluginsUrlDialog> & SingleAction;
 export const pluginsUrl = (id: string, params?: PluginsUrlQueryParams) =>
   pluginsPath(encodeURIComponent(id)) + "?" + stringifyQs(params);

src/plugins/views/PluginsDetails.tsx

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

src/plugins/views/PluginsList.tsx

@@ -1,5 +1,4 @@
 import { configurationMenuUrl } from "@saleor/configuration";
-import useBulkActions from "@saleor/hooks/useBulkActions";
 import useListSettings from "@saleor/hooks/useListSettings";
 import useNavigator from "@saleor/hooks/useNavigator";
 import usePaginator, {
@@ -21,9 +20,6 @@ export const PluginsList: React.StatelessComponent<PluginsListProps> = ({
 }) => {
   const navigate = useNavigator();
   const paginate = usePaginator();
-  const { isSelected, listElements, toggle, toggleAll } = useBulkActions(
-    params.ids
-  );
   const { updateListSettings, settings } = useListSettings(
     ListViews.PLUGINS_LIST
   );
@@ -50,10 +46,6 @@ export const PluginsList: React.StatelessComponent<PluginsListProps> = ({
               onPreviousPage={loadPreviousPage}
               onUpdateListSettings={updateListSettings}
               onRowClick={id => () => navigate(pluginsUrl(id))}
-              isChecked={isSelected}
-              selected={listElements.length}
-              toggle={toggle}
-              toggleAll={toggleAll}
             />
           </>
         );

src/storybook/stories/plugins/PluginsListPage.tsx

@@ -10,12 +10,8 @@ import Decorator from "../../Decorator";
 
 const props: PluginsListPageProps = {
   ...pageListProps.default,
-  isChecked: () => undefined,
   onBack: () => undefined,
-  plugins: pluginList,
+  plugins: pluginList
-  selected: undefined,
-  toggle: () => undefined,
-  toggleAll: () => undefined
 };
 
 storiesOf("Views / Plugins / Plugin list", module)