chore: avoid declaring group form twice (#958)

Signed-off-by: Carlos Feria <2582866+carlosthe19916@users.noreply.github.com>

Author: carlosthe19916

client/src/app/pages/sbom-groups/sbom-groups-context.tsx

@@ -1,10 +1,13 @@
 import React from "react";
+
 import type { AxiosError } from "axios";
+
 import {
   FILTER_NULL_VALUE,
   FILTER_TEXT_CATEGORY_KEY,
   TablePersistenceKeyPrefixes,
 } from "@app/Constants";
+import type { Group, PaginatedResultsGroupDetails } from "@app/client";
 import { FilterType } from "@app/components/FilterToolbar";
 import {
   getHubRequestParams,
@@ -13,12 +16,11 @@ import {
   useTableControlState,
 } from "@app/hooks/table-controls";
 import { useSelectionState } from "@app/hooks/useSelectionState";
-
-import type { PaginatedResultsGroupDetails } from "@app/client";
 import {
   useFetchSbomGroupChildren,
   useFetchSBOMGroups,
 } from "@app/queries/sbom-groups";
+
 import { buildSbomGroupTree } from "./utils";
 
 export type SbomGroupItem = PaginatedResultsGroupDetails["items"][number];
@@ -66,6 +68,10 @@ interface ISbomGroupsContext {
   treeExpansion: ITreeExpansionState;
   treeSelection: ITreeSelectionState;
   treeData: SbomGroupTreeNode[];
+
+  // Group Form Modal
+  groupCreateUpdateModalState: "create" | Group | null;
+  setGroupCreateUpdateModalState: (value: "create" | Group | null) => void;
 }
 
 const contextDefaultValue = {} as ISbomGroupsContext;
@@ -161,6 +167,10 @@ export const SbomGroupsProvider: React.FunctionComponent<
     hasActionsColumn: true,
   });
 
+  // Create/Edit states
+  const [groupCreateUpdateModalState, setGroupCreateUpdateModalState] =
+    React.useState<"create" | Group | null>(null);
+
   return (
     <SbomGroupsContext.Provider
       value={{
@@ -182,6 +192,8 @@ export const SbomGroupsProvider: React.FunctionComponent<
           selectAllNodes,
         },
         treeData: roots,
+        groupCreateUpdateModalState,
+        setGroupCreateUpdateModalState,
       }}
     >
       {children}

client/src/app/pages/sbom-groups/sbom-groups-table.tsx

@@ -1,47 +1,45 @@
 import React from "react";
-import { ButtonVariant, Skeleton } from "@patternfly/react-core";
 
+import type { AxiosError } from "axios";
+
+import { ButtonVariant, Skeleton } from "@patternfly/react-core";
 import {
   ActionsColumn,
   Table,
   Tbody,
   Td,
-  type TdProps,
   TreeRowWrapper,
   type IAction,
+  type TdProps,
 } from "@patternfly/react-table";
+
+import type { Group } from "@app/client";
 import { ConfirmDialog } from "@app/components/ConfirmDialog.tsx";
 import { LoadingWrapper } from "@app/components/LoadingWrapper";
 import { NotificationsContext } from "@app/components/NotificationsContext.tsx";
 import { SimplePagination } from "@app/components/SimplePagination";
 import { TableCellError } from "@app/components/TableCellError";
 import { ConditionalTableBody } from "@app/components/TableControls";
-import type { Group } from "@app/client";
+import { childGroupDeleteDialogProps } from "@app/Constants";
+import { useDeleteSbomGroupMutation } from "@app/queries/sbom-groups";
+
+import { SbomGroupTableData } from "./sbom-group-table-data";
 import {
   SbomGroupsContext,
   type SbomGroupTreeNode,
 } from "./sbom-groups-context";
-import { SbomGroupTableData } from "./sbom-group-table-data";
-import type { AxiosError } from "axios";
-import { useDeleteSbomGroupMutation } from "@app/queries/sbom-groups";
-import { childGroupDeleteDialogProps } from "@app/Constants";
-import { GroupFormModal } from "../sbom-list/components/group-form";
 
 export const SbomGroupsTable: React.FC = () => {
   const { pushNotification } = React.useContext(NotificationsContext);
-  const [saveGroupModalState, setSaveGroupModalState] = React.useState<
-    "create" | Group | null
-  >(null);
-  const isCreateUpdateGroupModalOpen = saveGroupModalState !== null;
-  const createUpdateGroup =
-    saveGroupModalState !== "create" ? saveGroupModalState : null;
+
   const {
     isFetching,
     fetchError,
     totalItemCount,
     tableControls,
     treeExpansion: { expandedNodeIds, setExpandedNodeIds, childrenNodeStatus },
     treeData,
+    setGroupCreateUpdateModalState,
   } = React.useContext(SbomGroupsContext);
 
   const {
@@ -161,7 +159,7 @@ export const SbomGroupsTable: React.FC = () => {
     const lastRowActions = (node: SbomGroupTreeNode): IAction[] => [
       {
         title: "Edit",
-        onClick: () => setSaveGroupModalState(node),
+        onClick: () => setGroupCreateUpdateModalState(node),
       },
       {
         title: "Delete",
@@ -218,11 +216,7 @@ export const SbomGroupsTable: React.FC = () => {
         isTop={false}
         paginationProps={paginationProps}
       />
-      <GroupFormModal
-        isOpen={isCreateUpdateGroupModalOpen}
-        group={createUpdateGroup}
-        onClose={() => setSaveGroupModalState(null)}
-      />
+
       <ConfirmDialog
         {...childGroupDeleteDialogProps(childGroupToDelete)}
         inProgress={isDeletingChildGroup}

client/src/app/pages/sbom-groups/sbom-groups-toolbar.tsx

@@ -11,17 +11,10 @@ import { FilterToolbar } from "@app/components/FilterToolbar";
 import { SimplePagination } from "@app/components/SimplePagination";
 
 import { SbomGroupsContext } from "./sbom-groups-context";
-import type { Group } from "@app/client";
-import { GroupFormModal } from "../sbom-list/components/group-form";
 
 export const SbomGroupsToolbar: React.FC = () => {
-  const { tableControls } = React.useContext(SbomGroupsContext);
-  const [saveGroupModalState, setSaveGroupModalState] = React.useState<
-    "create" | Group | null
-  >(null);
-  const isCreateUpdateGroupModalOpen = saveGroupModalState !== null;
-  const createUpdateGroup =
-    saveGroupModalState !== "create" ? saveGroupModalState : null;
+  const { tableControls, setGroupCreateUpdateModalState } =
+    React.useContext(SbomGroupsContext);
 
   const {
     propHelpers: {
@@ -33,32 +26,25 @@ export const SbomGroupsToolbar: React.FC = () => {
   } = tableControls;
 
   return (
-    <>
-      <Toolbar {...toolbarProps} aria-label="sbom-groups-toolbar">
-        <ToolbarContent>
-          <FilterToolbar {...filterToolbarProps} />
-          <ToolbarItem>
-            <Button
-              variant="primary"
-              onClick={() => setSaveGroupModalState("create")}
-            >
-              Create group
-            </Button>
-          </ToolbarItem>
-          <ToolbarItem {...paginationToolbarItemProps}>
-            <SimplePagination
-              idPrefix="sbom-groups-table"
-              isTop
-              paginationProps={paginationProps}
-            />
-          </ToolbarItem>
-        </ToolbarContent>
-      </Toolbar>
-      <GroupFormModal
-        isOpen={isCreateUpdateGroupModalOpen}
-        group={createUpdateGroup}
-        onClose={() => setSaveGroupModalState(null)}
-      />
-    </>
+    <Toolbar {...toolbarProps} aria-label="sbom-groups-toolbar">
+      <ToolbarContent>
+        <FilterToolbar {...filterToolbarProps} />
+        <ToolbarItem>
+          <Button
+            variant="primary"
+            onClick={() => setGroupCreateUpdateModalState("create")}
+          >
+            Create group
+          </Button>
+        </ToolbarItem>
+        <ToolbarItem {...paginationToolbarItemProps}>
+          <SimplePagination
+            idPrefix="sbom-groups-table"
+            isTop
+            paginationProps={paginationProps}
+          />
+        </ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
   );
 };

client/src/app/pages/sbom-groups/sbom-groups.tsx

@@ -1,12 +1,13 @@
-import type React from "react";
+import React from "react";
 
 import { Content, PageSection } from "@patternfly/react-core";
 
 import { DocumentMetadata } from "@app/components/DocumentMetadata";
 
-import { SbomGroupsProvider } from "./sbom-groups-context";
-import { SbomGroupsToolbar } from "./sbom-groups-toolbar";
+import { GroupFormModal } from "../sbom-list/components/group-form";
+import { SbomGroupsContext, SbomGroupsProvider } from "./sbom-groups-context";
 import { SbomGroupsTable } from "./sbom-groups-table";
+import { SbomGroupsToolbar } from "./sbom-groups-toolbar";
 
 export const SbomGroups: React.FC = () => {
   return (
@@ -22,9 +23,29 @@ export const SbomGroups: React.FC = () => {
           <SbomGroupsProvider>
             <SbomGroupsToolbar />
             <SbomGroupsTable />
+            <SbomGroupsActions />
           </SbomGroupsProvider>
         </div>
       </PageSection>
     </>
   );
 };
+
+const SbomGroupsActions: React.FC = () => {
+  const { groupCreateUpdateModalState, setGroupCreateUpdateModalState } =
+    React.useContext(SbomGroupsContext);
+
+  const isCreateUpdateGroupModalOpen = groupCreateUpdateModalState !== null;
+  const createUpdateGroup =
+    groupCreateUpdateModalState !== "create"
+      ? groupCreateUpdateModalState
+      : null;
+
+  return (
+    <GroupFormModal
+      isOpen={isCreateUpdateGroupModalOpen}
+      group={createUpdateGroup}
+      onClose={() => setGroupCreateUpdateModalState(null)}
+    />
+  );
+};