🌱 [backport release-0.6] Drop use of @migtools/lib-ui (konveyor#2193)

Backport of: konveyor#2193
Resolves: konveyor#2044

To have direct control over storage and selection
hooks used in the project, pull in the used code
from `@migtools/lib-ui` and drop it as a dependency.

Changes:
  - Drop `@migtools/lib-ui` from dependencies
  - Pull in hooks useSelectionState() and useStorage()
  - Adjust components to use the project's versions of the hooks

Source: https://github.com/migtools/lib-ui
Tag: [v10.0.1](https://github.com/migtools/lib-ui/tree/v10.0.1)
Commit SHA: 0cb74ce6d4de236abe1b7d20bbe747ceca392f28

Signed-off-by: Scott J Dickerson <[email protected]>

Author: sjd78

client/package.json

@@ -24,7 +24,6 @@
     "@dnd-kit/sortable": "^7.0.2",
     "@hookform/resolvers": "^2.9.11",
     "@hot-loader/react-dom": "^17.0.2",
-    "@migtools/lib-ui": "^10.0.1",
     "@patternfly/patternfly": "5.2.1",
     "@patternfly/react-charts": "7.2.2",
     "@patternfly/react-code-editor": "5.2.3",

client/src/app/hooks/table-controls/column/useColumnState.ts

@@ -1,4 +1,4 @@
-import { useLocalStorage } from "@migtools/lib-ui";
+import { useLocalStorage } from "@app/hooks/useStorage";
 import { ColumnSetting } from "../types";
 import { useEffect } from "react";
 

client/src/app/hooks/table-controls/types.ts

@@ -1,5 +1,8 @@
 import { TableProps, TdProps, ThProps, TrProps } from "@patternfly/react-table";
-import { ISelectionStateArgs, useSelectionState } from "@migtools/lib-ui";
+import {
+  ISelectionStateArgs,
+  useSelectionState,
+} from "@app/hooks/useSelectionState";
 import {
   DisallowCharacters,
   DiscriminatedArgs,

client/src/app/hooks/table-controls/useLocalTableControls.ts

@@ -2,7 +2,7 @@ import { useTableControlProps } from "./useTableControlProps";
 import { ITableControls, IUseLocalTableControlsArgs } from "./types";
 import { getLocalTableControlDerivedState } from "./getLocalTableControlDerivedState";
 import { useTableControlState } from "./useTableControlState";
-import { useSelectionState } from "@migtools/lib-ui";
+import { useSelectionState } from "@app/hooks/useSelectionState";
 
 /**
  * Provides all state, derived state, side-effects and prop helpers needed to manage a local/client-computed table.

client/src/app/hooks/usePersistentState.ts

@@ -4,7 +4,7 @@ import {
   UseStorageTypeOptions,
   useLocalStorage,
   useSessionStorage,
-} from "@migtools/lib-ui";
+} from "@app/hooks/useStorage";
 import { DisallowCharacters } from "@app/utils/type-utils";
 
 type PersistToStateOptions = { persistTo?: "state" };
@@ -122,7 +122,7 @@ const usePersistenceProvider = <TValue>({
   deserialize,
   defaultValue,
 }: PersistToProvider<TValue>): [TValue, (val: TValue) => void] => {
-  // use default value if nulish value was deserialized
+  // use default value if nullish value was deserialized
   return [deserialize() ?? defaultValue, serialize];
 };
 

client/src/app/hooks/useSelectionState/index.ts

@@ -0,0 +1 @@
+export * from "./useSelectionState";

client/src/app/hooks/useSelectionState/useSelectionState.test.ts

@@ -0,0 +1,95 @@
+import { act } from "@testing-library/react";
+import { renderHook } from "@testing-library/react-hooks";
+
+import { useSelectionState } from "./useSelectionState";
+
+interface IFruit {
+  name: string;
+}
+const fruits: IFruit[] = [
+  { name: "Apple" },
+  { name: "Orange" },
+  { name: "Banana" },
+];
+
+describe("useSelectionState", () => {
+  it("Initializes selection state and hook loads with no errors", () => {
+    const { result } = renderHook(() =>
+      useSelectionState<IFruit>({ items: fruits })
+    );
+    expect(result.current.selectedItems).toEqual([]);
+  });
+
+  it("Updates state correctly when toggling an item", () => {
+    const { result } = renderHook(() =>
+      useSelectionState<string>({
+        items: ["A", "B", "C"],
+      })
+    );
+
+    act(() => result.current.toggleItemSelected("A", true));
+    expect(result.current.isItemSelected("A")).toBe(true);
+  });
+
+  it("Updates state correctly when setting selected state", () => {
+    const { result } = renderHook(() =>
+      useSelectionState<string>({
+        items: ["A", "B", "C"],
+      })
+    );
+
+    act(() => result.current.setSelectedItems(["A"]));
+    expect(result.current.selectedItems).toEqual(["A"]);
+  });
+
+  it("Updates state correctly when selecting/deselecting all", () => {
+    const { result } = renderHook(() =>
+      useSelectionState<string>({
+        items: ["A", "B", "C"],
+      })
+    );
+    act(() => result.current.selectAll(true));
+    expect(result.current.areAllSelected).toEqual(true);
+    expect(result.current.selectedItems).toEqual(["A", "B", "C"]);
+
+    act(() => result.current.selectAll(false));
+    expect(result.current.areAllSelected).toEqual(false);
+    expect(result.current.selectedItems).toEqual([]);
+  });
+
+  it("Preserves the original order of items when selecting out of order", () => {
+    const { result } = renderHook(() =>
+      useSelectionState<IFruit>({ items: fruits })
+    );
+    act(() =>
+      result.current.setSelectedItems([
+        { name: "Orange" },
+        { name: "Apple" },
+        { name: "Banana" },
+      ])
+    );
+    expect(result.current.selectedItems).toEqual(fruits);
+  });
+
+  it("Handles initialSelected properly", () => {
+    const { result, rerender } = renderHook(() =>
+      useSelectionState<string>({
+        items: ["A", "B", "C"],
+        initialSelected: ["A"],
+      })
+    );
+    rerender();
+    expect(result.current.selectedItems).toEqual(["A"]);
+  });
+
+  it("Handles a custom isEqual arg properly", () => {
+    const { result } = renderHook(() =>
+      useSelectionState<IFruit>({
+        items: fruits,
+        isEqual: (a, b) => a.name === b.name,
+      })
+    );
+    act(() => result.current.setSelectedItems([{ name: "Apple" }]));
+    expect(result.current.selectedItems).toEqual([{ name: "Apple" }]);
+  });
+});

client/src/app/hooks/useSelectionState/useSelectionState.ts

@@ -0,0 +1,102 @@
+import * as React from "react";
+
+export interface ISelectionStateArgs<T> {
+  items: T[];
+  initialSelected?: T[];
+  isEqual?: (a: T, b: T) => boolean;
+  isItemSelectable?: (item: T) => boolean;
+  externalState?: [T[], React.Dispatch<React.SetStateAction<T[]>>];
+}
+
+export interface ISelectionState<T> {
+  selectedItems: T[];
+  isItemSelected: (item: T) => boolean;
+  isItemSelectable: (item: T) => boolean;
+  toggleItemSelected: (item: T, isSelecting?: boolean) => void;
+  selectMultiple: (items: T[], isSelecting: boolean) => void;
+  areAllSelected: boolean;
+  selectAll: (isSelecting?: boolean) => void;
+  setSelectedItems: (items: T[]) => void;
+}
+
+export const useSelectionState = <T>({
+  items,
+  initialSelected = [],
+  isEqual = (a, b) => a === b,
+  isItemSelectable = () => true,
+  externalState,
+}: ISelectionStateArgs<T>): ISelectionState<T> => {
+  const internalState = React.useState<T[]>(initialSelected);
+  const [selectedItems, setSelectedItems] = externalState || internalState;
+
+  const selectableItems = React.useMemo(
+    () => items.filter(isItemSelectable),
+    [items, isItemSelectable]
+  );
+
+  const isItemSelected = React.useCallback(
+    (item: T) => selectedItems.some((i) => isEqual(item, i)),
+    [isEqual, selectedItems]
+  );
+
+  // If isItemSelectable changes and a selected item is no longer selectable, deselect it
+  React.useEffect(() => {
+    if (!selectedItems.every(isItemSelectable)) {
+      setSelectedItems(selectedItems.filter(isItemSelectable));
+    }
+  }, [isItemSelectable, selectedItems, setSelectedItems]);
+
+  const toggleItemSelected = React.useCallback(
+    (item: T, isSelecting = !isItemSelected(item)) => {
+      if (isSelecting && isItemSelectable(item)) {
+        setSelectedItems([...selectedItems, item]);
+      } else {
+        setSelectedItems(selectedItems.filter((i) => !isEqual(i, item)));
+      }
+    },
+    [isEqual, isItemSelectable, isItemSelected, selectedItems, setSelectedItems]
+  );
+
+  const selectMultiple = React.useCallback(
+    (itemsSubset: T[], isSelecting: boolean) => {
+      const otherSelectedItems = selectedItems.filter(
+        (selected) => !itemsSubset.some((item) => isEqual(selected, item))
+      );
+      const itemsToSelect = itemsSubset.filter(isItemSelectable);
+      if (isSelecting) {
+        setSelectedItems([...otherSelectedItems, ...itemsToSelect]);
+      } else {
+        setSelectedItems(otherSelectedItems);
+      }
+    },
+    [isEqual, isItemSelectable, selectedItems, setSelectedItems]
+  );
+
+  const selectAll = React.useCallback(
+    (isSelecting = true) =>
+      setSelectedItems(isSelecting ? selectableItems : []),
+    [selectableItems, setSelectedItems]
+  );
+  const areAllSelected = selectedItems.length === selectableItems.length;
+
+  // Preserve original order of items
+  const selectedItemsInOrder = React.useMemo(() => {
+    if (areAllSelected) {
+      return selectableItems;
+    } else if (selectedItems.length > 0) {
+      return selectableItems.filter(isItemSelected);
+    }
+    return [];
+  }, [areAllSelected, isItemSelected, selectableItems, selectedItems.length]);
+
+  return {
+    selectedItems: selectedItemsInOrder,
+    isItemSelected,
+    isItemSelectable,
+    toggleItemSelected,
+    selectMultiple,
+    areAllSelected,
+    selectAll,
+    setSelectedItems,
+  };
+};

client/src/app/hooks/useStorage.ts

@@ -0,0 +1,113 @@
+import * as React from "react";
+
+type StorageType = "localStorage" | "sessionStorage";
+
+const getValueFromStorage = <T>(
+  storageType: StorageType,
+  key: string,
+  defaultValue: T
+): T => {
+  if (typeof window === "undefined") return defaultValue;
+  try {
+    const itemJSON = window[storageType].getItem(key);
+    return itemJSON ? (JSON.parse(itemJSON) as T) : defaultValue;
+  } catch (error) {
+    console.error(error);
+    return defaultValue;
+  }
+};
+
+const setValueInStorage = <T>(
+  storageType: StorageType,
+  key: string,
+  newValue: T | undefined
+) => {
+  if (typeof window === "undefined") return;
+  try {
+    if (newValue !== undefined) {
+      const newValueJSON = JSON.stringify(newValue);
+      window[storageType].setItem(key, newValueJSON);
+      if (storageType === "localStorage") {
+        // setItem only causes the StorageEvent to be dispatched in other windows. We dispatch it here
+        // manually so that all instances of useLocalStorage on this window also react to this change.
+        window.dispatchEvent(
+          new StorageEvent("storage", { key, newValue: newValueJSON })
+        );
+      }
+    } else {
+      window[storageType].removeItem(key);
+      if (storageType === "localStorage") {
+        window.dispatchEvent(
+          new StorageEvent("storage", { key, newValue: null })
+        );
+      }
+    }
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+interface IUseStorageOptions<T> {
+  isEnabled?: boolean;
+  type: StorageType;
+  key: string;
+  defaultValue: T;
+}
+
+const useStorage = <T>({
+  isEnabled = true,
+  type,
+  key,
+  defaultValue,
+}: IUseStorageOptions<T>): [T, React.Dispatch<React.SetStateAction<T>>] => {
+  const [cachedValue, setCachedValue] = React.useState<T>(
+    getValueFromStorage(type, key, defaultValue)
+  );
+
+  const usingStorageEvents =
+    type === "localStorage" && typeof window !== "undefined" && isEnabled;
+
+  const setValue: React.Dispatch<React.SetStateAction<T>> = React.useCallback(
+    (newValueOrFn: T | ((prevState: T) => T)) => {
+      const newValue =
+        newValueOrFn instanceof Function
+          ? newValueOrFn(getValueFromStorage(type, key, defaultValue))
+          : newValueOrFn;
+      setValueInStorage(type, key, newValue);
+      if (!usingStorageEvents) {
+        // The cache won't update automatically if there is no StorageEvent dispatched.
+        setCachedValue(newValue);
+      }
+    },
+    [type, key, defaultValue, usingStorageEvents]
+  );
+
+  React.useEffect(() => {
+    if (!usingStorageEvents) return;
+    const onStorageUpdated = (event: StorageEvent) => {
+      if (event.key === key) {
+        setCachedValue(
+          event.newValue ? JSON.parse(event.newValue) : defaultValue
+        );
+      }
+    };
+    window.addEventListener("storage", onStorageUpdated);
+    return () => {
+      window.removeEventListener("storage", onStorageUpdated);
+    };
+  }, [key, defaultValue, usingStorageEvents]);
+
+  return [cachedValue, setValue];
+};
+
+export type UseStorageTypeOptions<T> = Omit<IUseStorageOptions<T>, "type">;
+
+export const useLocalStorage = <T>(
+  options: UseStorageTypeOptions<T>
+): [T, React.Dispatch<React.SetStateAction<T>>] =>
+  useStorage({ ...options, type: "localStorage" });
+
+export const useSessionStorage = <T>(
+  options: UseStorageTypeOptions<T>
+): [T, React.Dispatch<React.SetStateAction<T>>] =>
+  useStorage({ ...options, type: "sessionStorage" });

client/src/app/pages/dependencies/dependencies.tsx

@@ -27,7 +27,7 @@ import {
   TableRowContentWithControls,
 } from "@app/components/TableControls";
 import { useFetchDependencies } from "@app/queries/dependencies";
-import { useSelectionState } from "@migtools/lib-ui";
+import { useSelectionState } from "@app/hooks/useSelectionState";
 import { DependencyAppsDetailDrawer } from "./dependency-apps-detail-drawer";
 import { useSharedAffectedApplicationFilterCategories } from "../issues/helpers";
 import { getParsedLabel } from "@app/utils/rules-utils";