Drop dynamic column toggles

saleor · Jul 6, 2023 · 3f53e14 · 3f53e14
1 parent 4433a94
commit 3f53e14
Show file tree

Hide file tree

Showing 14 changed files with 145 additions and 299 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -77,7 +77,7 @@
     "@typescript-eslint/ban-ts-comment": "warn",
     "@typescript-eslint/ban-types": "warn",
     "@typescript-eslint/consistent-type-assertions": "warn",
-    "@typescript-eslint/explicit-function-return-type": "warn",
+    "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/naming-convention": "warn",
     "@typescript-eslint/no-base-to-string": "warn",
     "@typescript-eslint/no-dynamic-delete": "warn",

diff --git a/src/components/Datagrid/ColumnPicker/ColumnPicker.tsx b/src/components/Datagrid/ColumnPicker/ColumnPicker.tsx
@@ -22,33 +22,19 @@ export interface ColumnPickerProps {
   dynamicColumns?: AvailableColumn[];
   selectedColumns: string[];
   columnCategories?: ColumnCategory[];
-  columnPickerSettings?: string[];
-  onSave: (columns: string[]) => void;
-  onDynamicColumnSelect?: (columns: string[]) => void;
+  onToggle: (columnId: string) => void;
 }
 
 export const ColumnPicker = ({
   staticColumns,
   selectedColumns,
   columnCategories,
   dynamicColumns,
-  columnPickerSettings,
-  onDynamicColumnSelect,
-  onSave,
+  onToggle,
 }: ColumnPickerProps) => {
   const [pickerOpen, setPickerOpen] = useState(false);
   const [expanded, setExpanded] = useState(false);
 
-  const renderCategories =
-    columnCategories &&
-    typeof onDynamicColumnSelect === "function" &&
-    columnPickerSettings;
-
-  const handleToggle = (id: string) =>
-    selectedColumns.includes(id)
-      ? onSave(selectedColumns.filter(currentId => currentId !== id))
-      : onSave([...selectedColumns, id]);
-
   return (
     <Popover
       modal
@@ -79,11 +65,11 @@ export const ColumnPicker = ({
           gridTemplateColumns={expanded ? 2 : 1}
           overflow="hidden"
         >
-          {expanded && renderCategories && (
+          {expanded && columnCategories && (
             <ColumnPickerCategories
               columnCategories={columnCategories}
-              columnPickerSettings={columnPickerSettings}
-              onDynamicColumnSelect={onDynamicColumnSelect}
+              selectedColumns={selectedColumns}
+              onToggle={onToggle}
               onClose={() => setExpanded(false)}
             />
           )}
@@ -102,15 +88,14 @@ export const ColumnPicker = ({
             </Box>
             <ColumnPickerStaticColumns
               staticColumns={staticColumns}
-              handleToggle={handleToggle}
+              handleToggle={onToggle}
               selectedColumns={selectedColumns}
             />
             {columnCategories && (
               <ColumnPickerDynamicColumns
                 dynamicColumns={dynamicColumns}
-                selectedColumns={selectedColumns}
                 setExpanded={setExpanded}
-                handleToggle={handleToggle}
+                onToggle={onToggle}
               />
             )}
           </Box>

diff --git a/src/components/Datagrid/ColumnPicker/ColumnPickerAvailableNodes.tsx b/src/components/Datagrid/ColumnPicker/ColumnPickerAvailableNodes.tsx
@@ -9,18 +9,18 @@ import { ColumnCategory } from "./useColumns";
 
 export interface ColumnPickerAvailableNodesProps {
   currentCategory: ColumnCategory;
-  columnPickerSettings: string[];
+  selectedColumns: string[];
   query: string;
   setQuery: React.Dispatch<React.SetStateAction<string>>;
-  changeHandler: (column: string) => void;
+  onToggle: (column: string) => void;
 }
 
 export const ColumnPickerAvailableNodes = ({
   currentCategory,
-  columnPickerSettings,
+  selectedColumns,
   query,
   setQuery,
-  changeHandler,
+  onToggle,
 }: ColumnPickerAvailableNodesProps) => {
   const areNodesLoading = currentCategory.availableNodes === undefined;
   const areNodesEmpty = currentCategory.availableNodes?.length === 0;
@@ -51,8 +51,8 @@ export const ColumnPickerAvailableNodes = ({
     return currentCategory.availableNodes!.map(node => (
       <Box padding={2} key={node.id}>
         <Checkbox
-          onCheckedChange={() => changeHandler(node.id)}
-          checked={columnPickerSettings.includes(node.id)}
+          onCheckedChange={() => onToggle(node.id)}
+          checked={selectedColumns.includes(node.id)}
           data-test-id={`search-dynamic-${node.id}`}
         >
           <Text size="small" color="textNeutralSubdued" ellipsis>

diff --git a/src/components/Datagrid/ColumnPicker/ColumnPickerCategories.tsx b/src/components/Datagrid/ColumnPicker/ColumnPickerCategories.tsx
@@ -13,28 +13,21 @@ import { getExitIcon, getExitOnClick } from "./utils";
 
 export interface ColumnPickerCategoriesProps {
   columnCategories: ColumnCategory[];
-  columnPickerSettings: string[];
+  selectedColumns: string[];
   onClose: () => void;
-  onDynamicColumnSelect: (columns: string[]) => void;
+  onToggle: (columnId: string) => void;
 }
 
 export const ColumnPickerCategories = ({
   columnCategories,
   onClose,
-  onDynamicColumnSelect,
-  columnPickerSettings,
+  onToggle,
+  selectedColumns,
 }: ColumnPickerCategoriesProps) => {
   const { currentCategory, setCurrentCategory } =
     useCategorySelection(columnCategories);
   const { query, setQuery } = useAvailableColumnsQuery(currentCategory);
 
-  const changeHandler = (column: string) =>
-    columnPickerSettings.includes(column)
-      ? onDynamicColumnSelect(
-          columnPickerSettings.filter(currentCol => currentCol !== column),
-        )
-      : onDynamicColumnSelect([...columnPickerSettings, column]);
-
   return (
     <Box
       backgroundColor="subdued"
@@ -73,10 +66,10 @@ export const ColumnPickerCategories = ({
         {currentCategory ? (
           <ColumnPickerAvailableNodes
             currentCategory={currentCategory}
-            columnPickerSettings={columnPickerSettings}
+            selectedColumns={selectedColumns}
             query={query}
             setQuery={setQuery}
-            changeHandler={changeHandler}
+            onToggle={onToggle}
           />
         ) : (
           <ColumnPickerCategoryList

diff --git a/src/components/Datagrid/ColumnPicker/ColumnPickerDynamicColumns.tsx b/src/components/Datagrid/ColumnPicker/ColumnPickerDynamicColumns.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, PlusIcon, Text, Toggle } from "@saleor/macaw-ui/next";
+import { Box, Button, PlusIcon, Text } from "@saleor/macaw-ui/next";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -8,15 +8,13 @@ import messages from "./messages";
 export interface ColumnPickerDynamicColumnsProps {
   dynamicColumns: AvailableColumn[] | undefined;
   setExpanded: (value: React.SetStateAction<boolean>) => void;
-  handleToggle: (id: string) => void;
-  selectedColumns: string[];
+  onToggle: (id: string) => void;
 }
 
 export const ColumnPickerDynamicColumns = ({
   dynamicColumns,
   setExpanded,
-  handleToggle,
-  selectedColumns,
+  onToggle,
 }: ColumnPickerDynamicColumnsProps) => (
   <Box data-test-id="dynamic-col-container">
     <Box
@@ -37,24 +35,52 @@ export const ColumnPickerDynamicColumns = ({
       />
     </Box>
     {dynamicColumns?.map(column => (
-      <Box padding={1} key={column.id}>
-        <Toggle
-          onPressedChange={() => handleToggle(column.id)}
-          pressed={selectedColumns.includes(column.id)}
+      <Box
+        display="flex"
+        alignItems="center"
+        gap={2}
+        padding={1}
+        key={column.id}
+      >
+        <Button
+          onClick={() => onToggle(column.id)}
           data-test-id={`dynamic-col-${column.id}`}
+          variant="secondary"
+          size="small"
+          // hacky for now, this icon should probably come from macaw
+          // although it's 8x8
+          icon={
+            <svg
+              viewBox="0 0 8 2"
+              width="8"
+              height="2"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M0 1C0 0.447715 0.447715 0 1 0H7C7.55228 0 8 0.447715 8 1C8 1.55228 7.55228 2 7 2H1C0.447715 2 0 1.55228 0 1Z"
+                fill="currentColor"
+              />
+            </svg>
+          }
+          // hacky again, because macaw button classes have high specificity
+          // and it's diffcult to override sizes
+          __height="16px"
+          __width="16px"
+        />
+        <Text
+          variant="body"
+          size="small"
+          color="textNeutralSubdued"
+          whiteSpace="nowrap"
         >
-          <Text
-            variant="body"
-            size="small"
-            color="textNeutralSubdued"
-            whiteSpace="nowrap"
-          >
-            {`${column.metaGroup} /`}
-          </Text>
-          <Text variant="body" size="small" color="textNeutralDefault" ellipsis>
-            {column.title}
-          </Text>
-        </Toggle>
+          {`${column.metaGroup} /`}
+        </Text>
+        <Text variant="body" size="small" color="textNeutralDefault" ellipsis>
+          {column.title}
+        </Text>
       </Box>
     ))}
   </Box>

diff --git a/src/components/Datagrid/ColumnPicker/useColumnPickerSettings.ts b/src/components/Datagrid/ColumnPicker/useColumnPickerSettings.ts