48 add entirecataloguepartial (#57)

- revamped OptionLayoutTemplate to be more reusable
- updated loading / disable logic on OptionConceptsPartial in Storybook and Tests
- added EntireCataloguePartial with Storybook and Tests

Author: bubulux

apps/frontend/ui/src/navigation/partials/OptionConcepts/func.tsx

@@ -1,4 +1,4 @@
-import type { JSX } from "react";
+import type { JSX, Dispatch, SetStateAction } from "react";
 
 import { MenuList } from "@lib-components";
 
@@ -9,23 +9,34 @@ import { useSelectionState } from "@app-ui/navigation/partials/OptionConcepts/ho
 
 type TProps = {
   concepts: string[];
-  onSearch: (value: string) => void;
+  /** must be initialized with { concept: [] }, only then inner functions apply state correctly */
+  checkedValuesState: Record<string, string[]>;
+  setCheckedValuesState: Dispatch<SetStateAction<Record<string, string[]>>>;
+  onSearch: () => void;
+  isReqestingConcepts: boolean;
+  disableButton: boolean;
 };
 
 export default function OptionConcepts({
   concepts,
   onSearch,
+  isReqestingConcepts,
+  checkedValuesState,
+  setCheckedValuesState,
+  disableButton,
 }: TProps): JSX.Element {
   const classes = useOptionConceptsClasses();
-  const { checkedValues, onChange } = useSelectionState();
+  const { checkedValues, onChange } = useSelectionState(
+    checkedValuesState,
+    setCheckedValuesState,
+  );
   return (
     <OptionLayoutTemplate
       header="Search through recongizable concepts"
-      subtitle="Choose from the given list below"
-      onSearch={() => {
-        onSearch(checkedValues.concept[0]);
-      }}
-      disabledSearch={checkedValues.concept.length === 0}
+      subtitle="Choose one from the given list below"
+      onClick={onSearch}
+      disableClick={disableButton}
+      isLoading={isReqestingConcepts}
     >
       <MenuList
         className={classes.list}

apps/frontend/ui/src/navigation/partials/OptionConcepts/hooks.ts

@@ -1,10 +1,10 @@
-import { useState } from "react";
+import type { SetStateAction, Dispatch } from "react";
 import type { MenuProps as TMenuProps } from "@fluentui/react-components";
 
-function useSelectionState() {
-  const [checkedValues, setCheckedValues] = useState<Record<string, string[]>>({
-    concept: [],
-  });
+function useSelectionState(
+  checkedValues: Record<string, string[]>,
+  setCheckedValues: Dispatch<SetStateAction<Record<string, string[]>>>,
+) {
   const onChange: TMenuProps["onCheckedValueChange"] = (
     _,
     { name, checkedItems },

apps/frontend/ui/src/navigation/partials/OptionConcepts/stories.ts

@@ -0,0 +1,114 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import OptionConcepts from "@app-ui/navigation/partials/OptionConcepts";
+
+const meta: Meta = {
+  title: "App/UI/Navigation/Partials/OptionConcepts",
+  component: OptionConcepts,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof OptionConcepts>;
+
+export const Index: Story = {
+  argTypes: {
+    concepts: { control: false },
+    onSearch: { control: false },
+    checkedValuesState: { control: false },
+    setCheckedValuesState: { control: false },
+  },
+  render: (props) => {
+    const [checkedValues, setCheckedValues] = useState<
+      Record<string, string[]>
+    >({
+      concept: [],
+    });
+
+    return (
+      <OptionConcepts
+        concepts={[
+          "Partiality",
+          "Signaling",
+          "Connectivity",
+          "Transformativity",
+        ]}
+        onSearch={() => {}}
+        isReqestingConcepts={props.isReqestingConcepts}
+        disableButton={props.disableButton}
+        checkedValuesState={checkedValues}
+        setCheckedValuesState={setCheckedValues}
+      />
+    );
+  },
+};
+
+export const FlowWithoutOverflow: Story = {
+  render: () => {
+    const [checkedValues, setCheckedValues] = useState<
+      Record<string, string[]>
+    >({
+      concept: [],
+    });
+    const [isFetching, setIsFetching] = useState(false);
+
+    return (
+      <OptionConcepts
+        concepts={[
+          "Partiality",
+          "Signaling",
+          "Connectivity",
+          "Transformativity",
+        ]}
+        onSearch={() => {
+          setIsFetching(true);
+          setTimeout(() => {
+            setIsFetching(false);
+          }, 2000);
+        }}
+        isReqestingConcepts={isFetching}
+        disableButton={checkedValues.concept.length === 0 || isFetching}
+        checkedValuesState={checkedValues}
+        setCheckedValuesState={setCheckedValues}
+      />
+    );
+  },
+};
+
+export const FlowWithOverflow: Story = {
+  render: () => {
+    const [checkedValues, setCheckedValues] = useState<
+      Record<string, string[]>
+    >({
+      concept: [],
+    });
+    const [isFetching, setIsFetching] = useState(false);
+
+    return (
+      <OptionConcepts
+        concepts={[
+          "Partiality",
+          "Signaling",
+          "Connectivity",
+          "Transformativity",
+          "Adaptability",
+          "Inclusivity",
+          "Interactivity",
+          "Reactivity",
+          "Sustainability",
+        ]}
+        onSearch={() => {
+          setIsFetching(true);
+          setTimeout(() => {
+            setIsFetching(false);
+          }, 2000);
+        }}
+        isReqestingConcepts={isFetching}
+        disableButton={checkedValues.concept.length === 0 || isFetching}
+        checkedValuesState={checkedValues}
+        setCheckedValuesState={setCheckedValues}
+      />
+    );
+  },
+};

apps/frontend/ui/src/navigation/partials/OptionConcepts/stories.tsx

@@ -1,18 +1,36 @@
+import { useState } from "react";
+
 import { render, screen, fireEvent } from "@tests-unit-browser";
 import "@testing-library/jest-dom";
 
 import OptionConcepts from "@app-ui/navigation/partials/OptionConcepts";
 
+function Wrapper() {
+  const [checkedValues, setCheckedValues] = useState<Record<string, string[]>>({
+    concept: [],
+  });
+  const [isFetching, setIsFetching] = useState(false);
+
+  return (
+    <OptionConcepts
+      concepts={["concept1", "concept2", "concept3"]}
+      onSearch={() => {
+        setIsFetching(true);
+        setTimeout(() => {
+          setIsFetching(false);
+        }, 3000);
+      }}
+      isReqestingConcepts={isFetching}
+      disableButton={checkedValues.concept.length === 0 || isFetching}
+      checkedValuesState={checkedValues}
+      setCheckedValuesState={setCheckedValues}
+    />
+  );
+}
+
 describe("OptionConcepts", () => {
   it("should render with given concepts", () => {
-    const onSearch = jest.fn((value: string) => value);
-
-    render(
-      <OptionConcepts
-        concepts={["concept1", "concept2", "concept3"]}
-        onSearch={onSearch}
-      />,
-    );
+    render(<Wrapper />);
 
     const menuList = screen.getByRole("menu");
     expect(menuList).toBeInTheDocument();
@@ -26,40 +44,45 @@ describe("OptionConcepts", () => {
   });
 
   it("should be able to select different concepts", () => {
-    const onSearch = jest.fn((value: string) => value);
-
-    render(
-      <OptionConcepts
-        concepts={["concept1", "concept2", "concept3"]}
-        onSearch={onSearch}
-      />,
-    );
+    render(<Wrapper />);
 
     const concept1 = screen.getByText("concept1");
-    expect(concept1).toBeInTheDocument();
     const concept2 = screen.getByText("concept2");
-    expect(concept2).toBeInTheDocument();
     const concept3 = screen.getByText("concept3");
-    expect(concept3).toBeInTheDocument();
 
     const searchButton = screen.getByRole("button", { name: "Search" });
     expect(searchButton).toBeInTheDocument();
     expect(searchButton).toBeDisabled();
 
     fireEvent.click(concept1);
+    // has aria-checked attribute, when checked
+    expect(concept1.parentElement).toHaveAttribute("aria-checked", "true");
     expect(searchButton).toBeEnabled();
 
-    fireEvent.click(searchButton);
-    expect(onSearch).toHaveBeenCalledWith("concept1");
-
     fireEvent.click(concept2);
-    fireEvent.click(searchButton);
-    expect(onSearch).toHaveBeenCalledWith("concept2");
+    expect(concept2.parentElement).toHaveAttribute("aria-checked", "true");
+    // concept1 should be unchecked -> exclusitivity
+    expect(concept1.parentElement).toHaveAttribute("aria-checked", "false");
 
     fireEvent.click(concept3);
+    expect(concept3.parentElement).toHaveAttribute("aria-checked", "true");
+    expect(concept2.parentElement).toHaveAttribute("aria-checked", "false");
+  });
+
+  it("should show loading state and disable search button", () => {
+    render(<Wrapper />);
+
+    const concept1 = screen.getByText("concept1");
+    const searchButton = screen.getByRole("button", { name: "Search" });
+
+    fireEvent.click(concept1);
+    expect(searchButton).toBeEnabled();
+
     fireEvent.click(searchButton);
-    expect(onSearch).toHaveBeenCalledWith("concept3");
+    expect(searchButton).toBeDisabled();
 
-    expect(onSearch).toHaveBeenCalledTimes(3);
+    // role progressbar is used for loading state
+    const loading = screen.getByRole("progressbar");
+    expect(loading).toBeInTheDocument();
   });
 });

apps/frontend/ui/src/navigation/partials/OptionConcepts/tests.tsx

@@ -0,0 +1,24 @@
+import type { JSX } from "react";
+
+import { OptionLayoutTemplate } from "@app-ui/navigation/templates";
+
+type TProps = {
+  onRequestCatalogue: () => void;
+  isRequestingCatalogue: boolean;
+  disableButton: boolean;
+};
+
+export default function OptionEntireCatalogue({
+  onRequestCatalogue,
+  isRequestingCatalogue,
+  disableButton,
+}: TProps): JSX.Element {
+  return (
+    <OptionLayoutTemplate
+      header="Fetch the entire catalogue"
+      onClick={onRequestCatalogue}
+      disableClick={disableButton}
+      isLoading={isRequestingCatalogue}
+    />
+  );
+}

apps/frontend/ui/src/navigation/partials/OptionEntireCatalogue/func.tsx

@@ -0,0 +1,3 @@
+import OptionEntireCatalogue from "./func";
+
+export default OptionEntireCatalogue;

apps/frontend/ui/src/navigation/partials/OptionEntireCatalogue/index.ts

@@ -0,0 +1,40 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import OptionEntireCatalogue from "./func";
+
+const meta: Meta = {
+  title: "app/ui/navigation/partials/OptionEntireCatalogue",
+  component: OptionEntireCatalogue,
+  args: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof OptionEntireCatalogue>;
+
+export const Index: Story = {
+  args: {
+    isRequestingCatalogue: false,
+    disableButton: false,
+  },
+};
+
+export const Flow: Story = {
+  render: () => {
+    const [isRequestingCatalogue, setIsRequestingCatalogue] = useState(false);
+
+    return (
+      <OptionEntireCatalogue
+        onRequestCatalogue={() => {
+          setIsRequestingCatalogue(true);
+          setTimeout(() => {
+            setIsRequestingCatalogue(false);
+          }, 3000);
+        }}
+        isRequestingCatalogue={isRequestingCatalogue}
+        disableButton={isRequestingCatalogue}
+      />
+    );
+  },
+};