Merge pull request #145 from mirumee/fix/table-minor-bugs

Fix minor table bugs

src/categories/components/CategoryList/CategoryList.tsx

@@ -36,7 +36,7 @@ const styles = (theme: Theme) =>
       }
     },
     colName: {
-      paddingLeft: "0 !important"
+      paddingLeft: 0
     },
     colProducts: {
       textAlign: "center"

src/components/ColumnPicker/ColumnPicker.tsx

@@ -62,10 +62,10 @@ const ColumnPicker: React.FC<ColumnPickerProps> = props => {
     setTimeout(() => setExpansionState(initialOpen), 100);
   }, []);
 
-  const handleCancel = React.useCallback(() => {
+  const handleCancel = () => {
     setExpansionState(false);
-    setSelectedColumns(columns.map(column => column.value));
+    setSelectedColumns(initialColumns);
-  }, [columns]);
+  };
 
   const handleColumnToggle = (column: string) =>
     setSelectedColumns(toggle(column, selectedColumns, (a, b) => a === b));

src/components/ColumnPicker/ColumnPickerContent.tsx

@@ -40,6 +40,9 @@ const useStyles = makeStyles((theme: Theme) => ({
     boxShadow: `0px 0px 0px 0px ${theme.palette.background.paper}`,
     transition: theme.transitions.duration.short + "ms"
   },
+  cancelButton: {
+    marginRight: theme.spacing.unit * 2
+  },
   content: {
     display: "grid",
     gridColumnGap: theme.spacing.unit * 3,
@@ -164,7 +167,11 @@ const ColumnPickerContent: React.FC<ColumnPickerContentProps> = props => {
             <FormattedMessage defaultMessage="Reset" description="button" />
           </Button>
           <div>
-            <Button color="default" onClick={onCancel}>
+            <Button
+              className={classes.cancelButton}
+              color="default"
+              onClick={onCancel}
+            >
               <FormattedMessage {...buttonMessages.cancel} />
             </Button>
             <Button color="primary" variant="contained" onClick={onSave}>

src/plugins/components/PluginsList/PluginsList.tsx

@@ -9,6 +9,7 @@ import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
+import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
 import EditIcon from "@material-ui/icons/Edit";
 import React from "react";
@@ -16,7 +17,6 @@ import { useIntl } from "react-intl";
 
 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 { translateBoolean } from "@saleor/intl";
 import { maybe, renderCollection } from "@saleor/misc";
@@ -65,11 +65,7 @@ const PluginList = withStyles(styles, { name: "PluginList" })(
     return (
       <Card>
         <Table>
-          <TableHead
+          <TableHead>
-            colSpan={numberOfColumns}
-            disabled={disabled}
-            items={plugins}
-          >
             <TableCell className={classes.colName} padding="dense">
               {intl.formatMessage({
                 defaultMessage: "Name",

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -75088,25 +75088,7 @@ exports[`Storyshots Views / Plugins / Plugin list default 1`] = `
         <thead
           class="MuiTableHead-root-id"
         >
-          <tr
+          <tr>
-            class="MuiTableRow-root-id MuiTableRow-head-id"
-          >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-              scope="col"
-            >
-              <button
-                class="MuiButtonBase-root-id Checkbox-root-id"
-                tabindex="0"
-                type="button"
-              >
-                <input
-                  class="Checkbox-box-id Checkbox-checked-id"
-                  type="checkbox"
-                  value="true"
-                />
-              </button>
-            </th>
             <th
               class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id PluginList-colName-id"
               scope="col"
@@ -75364,27 +75346,7 @@ exports[`Storyshots Views / Plugins / Plugin list loading 1`] = `
         <thead
           class="MuiTableHead-root-id"
         >
-          <tr
+          <tr>
-            class="MuiTableRow-root-id MuiTableRow-head-id"
-          >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
-              scope="col"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
-                disabled=""
-                tabindex="-1"
-                type="button"
-              >
-                <input
-                  class="Checkbox-box-id Checkbox-checked-id Checkbox-disabled-id"
-                  disabled=""
-                  type="checkbox"
-                  value="true"
-                />
-              </button>
-            </th>
             <th
               class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id PluginList-colName-id"
               scope="col"
@@ -75608,9 +75570,7 @@ exports[`Storyshots Views / Plugins / Plugin list no data 1`] = `
         <thead
           class="MuiTableHead-root-id"
         >
-          <tr
+          <tr>
-            class="MuiTableRow-root-id MuiTableRow-head-id"
-          >
             <th
               class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id PluginList-colName-id"
               scope="col"