Additional refactoring for DataView

packages/odyssey-react-mui/src/labs/DataComponents/TableSettings.tsx

@@ -12,6 +12,7 @@
 
 import { Dispatch, SetStateAction, memo, useCallback, useMemo } from "react";
 import { Checkbox as MuiCheckbox } from "@mui/material";
+import { MRT_DensityState } from "material-react-table";
 import { useTranslation } from "react-i18next";
 
 import { densityValues } from "./constants";
@@ -36,25 +37,18 @@ const TableSettings = ({
   const { hasChangeableDensity, hasColumnVisibility, columns } = tableOptions;
   const { rowDensity, columnVisibility } = tableState;
 
-  const changeRowDensity = useCallback(
-    (value: (typeof densityValues)[number]) =>
-      (_event: React.MouseEvent<HTMLLIElement>) => {
-        // This is necessary to avoid linter errors, while the _event is necessary to satisfy the onClick type
-        if (process.env.NODE_ENV === "development") console.debug(_event);
-
-        setTableState((prevState) => ({
-          ...prevState,
-          rowDensity: value,
-        }));
-      },
+  const changeRowDensity = useCallback<(value: MRT_DensityState) => void>(
+    (value) => {
+      setTableState((prevState) => ({
+        ...prevState,
+        rowDensity: value,
+      }));
+    },
     [setTableState],
   );
 
-  const changeColumnVisibility = useCallback(
-    (columnId: string) => (_event: React.MouseEvent<HTMLLIElement>) => {
-      // This is necessary to avoid linter errors, while the _event is necessary to satisfy the onClick type
-      if (process.env.NODE_ENV === "development") console.debug(_event);
-
+  const changeColumnVisibility = useCallback<(columnId: string) => void>(
+    (columnId) => {
       setTableState((prevState) => ({
         ...prevState,
         columnVisibility: {
@@ -68,66 +62,72 @@ const TableSettings = ({
     [setTableState],
   );
 
-  const isColumnVisibilityChecked = useMemo(() => {
-    return columns.reduce(
-      (acc, column) => {
-        const isChecked = columnVisibility
-          ? columnVisibility[column.accessorKey!] !== false
-          : true;
-        acc[column.accessorKey!] = isChecked;
-        return acc;
-      },
-      {} as Record<string, boolean>,
-    );
-  }, [columns, columnVisibility]);
+  const visibleColumns = useMemo(
+    () =>
+      new Set(
+        columns
+          .filter((column) =>
+            columnVisibility
+              ? columnVisibility[column.accessorKey!] !== false
+              : true,
+          )
+          .map((column) => column.accessorKey!),
+      ),
+    [columns, columnVisibility],
+  );
 
-  return (
-    <>
-      {hasChangeableDensity && (
+  const memoizedDensityMenu = useMemo(
+    () =>
+      hasChangeableDensity && (
         <MenuButton
           ariaLabel={t("table.density.arialabel")}
           endIcon={<ListIcon />}
           menuAlignment="right"
           shouldCloseOnSelect={false}
         >
-          <>
-            {densityValues.map((value: (typeof densityValues)[number]) => (
-              <MenuItem
-                key={value}
-                isSelected={rowDensity === value}
-                onClick={changeRowDensity(value)}
-              >
-                {`${value.charAt(0).toUpperCase()}${value.slice(1)}`}
-              </MenuItem>
-            ))}
-          </>
+          {densityValues.map((value) => (
+            <MenuItem
+              key={value}
+              isSelected={rowDensity === value}
+              onClick={() => changeRowDensity(value)}
+            >
+              {`${value.charAt(0).toUpperCase()}${value.slice(1)}`}
+            </MenuItem>
+          ))}
         </MenuButton>
-      )}
+      ),
+    [hasChangeableDensity, t, rowDensity, changeRowDensity],
+  );
 
-      {hasColumnVisibility && (
+  const memoizedColumnVisibilityMenu = useMemo(
+    () =>
+      hasColumnVisibility && (
         <MenuButton
           ariaLabel={t("table.columnvisibility.arialabel")}
           endIcon={<ShowIcon />}
           menuAlignment="right"
           shouldCloseOnSelect={false}
         >
-          <>
-            {columns
-              .filter((column) => column.enableHiding !== false)
-              .map((column) => (
-                <MenuItem
-                  key={column.accessorKey}
-                  onClick={changeColumnVisibility(column.id as string)}
-                >
-                  <MuiCheckbox
-                    checked={isColumnVisibilityChecked[column.accessorKey!]}
-                  />
-                  {column.header}
-                </MenuItem>
-              ))}
-          </>
+          {columns
+            .filter((column) => Boolean(column.enableHiding !== false))
+            .map((column) => (
+              <MenuItem
+                key={column.accessorKey}
+                onClick={() => changeColumnVisibility(column.id!)}
+              >
+                <MuiCheckbox checked={visibleColumns.has(column.id!)} />
+                {column.header}
+              </MenuItem>
+            ))}
         </MenuButton>
-      )}
+      ),
+    [hasColumnVisibility, t, columns, changeColumnVisibility, visibleColumns],
+  );
+
+  return (
+    <>
+      {memoizedDensityMenu}
+      {memoizedColumnVisibilityMenu}
     </>
   );
 };

packages/odyssey-react-mui/src/labs/DataComponents/componentTypes.ts

@@ -19,11 +19,7 @@ import {
   MRT_VisibilityState,
 } from "material-react-table";
 
-import {
-  availableLayouts,
-  availableStackLayouts,
-  densityValues,
-} from "./constants";
+import { availableLayouts, availableStackLayouts } from "./constants";
 import { DataFilter } from "../DataFilters";
 import {
   DataGetDataType,
@@ -87,7 +83,7 @@ export type TableProps = {
   hasColumnResizing?: boolean;
   hasColumnVisibility?: boolean;
   hasSorting?: boolean;
-  initialDensity?: (typeof densityValues)[number];
+  initialDensity?: MRT_DensityState;
   renderDetailPanel?: MRT_TableOptions<MRT_RowData>["renderDetailPanel"];
   rowActionButtons?: DataTableRowActionsProps["rowActionButtons"];
   rowActionMenuItems?: DataTableRowActionsProps["rowActionMenuItems"];

packages/odyssey-react-mui/src/labs/DataComponents/constants.tsx

@@ -10,11 +10,19 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-export const availableStackLayouts = ["list", "grid"];
-export const availableTableLayouts = ["table"];
-export const availableLayouts = [
+import { MRT_DensityState } from "material-react-table";
+
+export type DataViewLayout = "list" | "grid" | "table";
+
+export const availableStackLayouts: DataViewLayout[] = ["list", "grid"];
+export const availableTableLayouts: DataViewLayout[] = ["table"];
+export const availableLayouts: DataViewLayout[] = [
   ...availableTableLayouts,
   ...availableStackLayouts,
 ];
 
-export const densityValues = ["comfortable", "spacious", "compact"] as const;
+export const densityValues: MRT_DensityState[] = [
+  "comfortable",
+  "spacious",
+  "compact",
+];

packages/odyssey-react-mui/src/labs/DataComponents/useFilterConversion.ts

@@ -58,32 +58,28 @@ export const useFilterConversion = ({
   );
 
   const dataTableFilters = useMemo(() => {
-    const providedFilters = filters || columns;
-    if (!providedFilters) {
-      return [];
-    }
+    // Filters may be manually set via the `filters` variable;
+    // If not, they may be inferred from `columns`
+    const providedFilters = filters || columns || [];
+
     return providedFilters.reduce<DataFilter[]>((accumulator, item) => {
       if (typeof item === "string") {
         const foundColumn = columns?.find(
           (column) => column.accessorKey === item,
         );
-        if (foundColumn) {
-          const filter = convertColumnToFilter(foundColumn);
-          if (filter) {
-            return accumulator.concat(filter);
-          }
-        }
-      } else if ("accessorKey" in item) {
-        // Checks if it's a column
+        const filter = foundColumn && convertColumnToFilter(foundColumn);
+        return filter ? accumulator.concat(filter) : accumulator;
+      }
+
+      if ("accessorKey" in item) {
         const filter = convertColumnToFilter(item);
-        if (filter) {
-          return accumulator.concat(filter);
-        }
-      } else if ("label" in item) {
-        // Checks if it's a DataFilter
+        return filter ? accumulator.concat(filter) : accumulator;
+      }
+
+      if ("label" in item) {
         return accumulator.concat(item);
       }
-      // If none of the conditions match, item is ignored (not mapping to undefined)
+
       return accumulator;
     }, []);
   }, [columns, filters]);

packages/odyssey-storybook/applitools.config.js

@@ -39,6 +39,7 @@ const applitoolsConfig = {
   runInDocker: true,
   serverUrl: "https://oktaeyes.applitools.com",
   testConcurrency: 20,
+  waitBeforeCapture: 1000,
 };
 
 module.exports = applitoolsConfig;