feat(groups): Add Groups list page (#888)

Signed-off-by: Bryan Ramos <bramos@redhat.com>

Author: CryptoRodeo

client/src/app/Constants.ts

@@ -16,6 +16,7 @@ export const TablePersistenceKeyPrefixes = {
   advisories: "ad",
   vulnerabilities: "vn",
   sboms: "sb",
+  sbomGroups: "sbg",
   sboms_by_package: "sbk",
   packages: "pk",
   licenses: "li",
@@ -63,6 +64,13 @@ export const advisoryDeleteDialogProps = (
   message: `This action permanently deletes the ${advisory?.document_id} Advisory.`,
 });
 
+export const childGroupDeleteDialogProps = (
+  childGroup?: { name?: string } | null,
+) => ({
+  title: "Permanently delete Group?",
+  message: `This action permanently deletes the ${childGroup?.name} group.`,
+});
+
 export const sbomDeletedSuccessMessage = (sbom: SbomSummary) =>
   `The SBOM ${sbom.name} was deleted`;
 

client/src/app/Routes.tsx

@@ -34,6 +34,7 @@ const SBOMList = lazy(() => import("./pages/sbom-list"));
 const SBOMUpload = lazy(() => import("./pages/sbom-upload"));
 const SBOMScan = lazy(() => import("./pages/sbom-scan"));
 const SBOMDetails = lazy(() => import("./pages/sbom-details"));
+const SbomGroups = lazy(() => import("./pages/sbom-groups"));
 
 // Others
 const Search = lazy(() => import("./pages/search"));
@@ -56,6 +57,7 @@ export const Paths = {
   vulnerabilities: "/vulnerabilities",
   vulnerabilityDetails: `/vulnerabilities/:${PathParam.VULNERABILITY_ID}`,
   sboms: "/sboms",
+  sbomGroups: "/sboms/groups",
   sbomUpload: "/sboms/upload",
   sbomScan: "/sboms/scan",
   sbomDetails: `/sboms/:${PathParam.SBOM_ID}`,
@@ -177,6 +179,15 @@ export const AppRoutes = createBrowserRouter([
           <LazyRouteElement identifier="sbom-list" component={<SBOMList />} />
         ),
       },
+      {
+        path: Paths.sbomGroups,
+        element: (
+          <LazyRouteElement
+            identifier="sbom-groups"
+            component={<SbomGroups />}
+          />
+        ),
+      },
       {
         path: Paths.sbomDetails,
         element: (

client/src/app/layout/sidebar.tsx

@@ -54,6 +54,16 @@ export const SidebarApp: React.FC = () => {
                 All SBOMs
               </NavLink>
             </li>
+            <li className={nav.navItem}>
+              <NavLink
+                to={Paths.sbomGroups}
+                className={({ isActive }) => {
+                  return css(LINK_CLASS, isActive ? ACTIVE_LINK_CLASS : "");
+                }}
+              >
+                Groups
+              </NavLink>
+            </li>
           </NavExpandable>
           <li className={nav.navItem}>
             <NavLink

client/src/app/pages/sbom-groups/index.ts

@@ -0,0 +1 @@
+export { SbomGroups as default } from "./sbom-groups";

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

@@ -0,0 +1,36 @@
+import { Label, LabelGroup } from "@patternfly/react-core";
+type Props = {
+  labels?: Record<string, string | null>;
+};
+
+type FormattedLabel = {
+  text: string;
+  color: "purple" | "blue";
+};
+
+function formatLabel(key: string, value: string | null): FormattedLabel {
+  const text = value ? `${key}=${value}` : `${key}`;
+  const color = key === "Product" ? "purple" : "blue";
+  return { color, text };
+}
+
+export const SbomGroupLabels = ({ labels }: Props) => {
+  if (!labels || Object.keys(labels).length === 0) {
+    return null;
+  }
+
+  return (
+    <LabelGroup>
+      {Object.entries(labels)
+        .sort(([a], [b]) => (a === "Product" ? -1 : b === "Product" ? 1 : 0))
+        .map(([key, value]) => {
+          const { color, text } = formatLabel(key, value);
+          return (
+            <Label key={key} color={color}>
+              {text}
+            </Label>
+          );
+        })}
+    </LabelGroup>
+  );
+};

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

@@ -0,0 +1,45 @@
+import {
+  Stack,
+  StackItem,
+  Flex,
+  FlexItem,
+  Content,
+} from "@patternfly/react-core";
+import { NavLink } from "react-router-dom";
+import { SbomGroupLabels } from "./sbom-group-labels";
+import type { SbomGroupTreeNode } from "./sbom-groups-context";
+export const SbomGroupTableData = ({ item }: { item: SbomGroupTreeNode }) => {
+  return (
+    <Stack hasGutter>
+      <StackItem isFilled>
+        <Flex
+          alignItems={{ default: "alignItemsCenter" }}
+          gap={{ default: "gapSm" }}
+          flexWrap={{ default: "wrap" }}
+        >
+          <FlexItem>
+            <NavLink
+              className="pf-v6-c-button pf-m-link pf-m-inline"
+              to={"https://example.com"}
+            >
+              {item.name}
+            </NavLink>
+          </FlexItem>
+          <FlexItem>
+            <SbomGroupLabels labels={item.labels} />
+          </FlexItem>
+        </Flex>
+      </StackItem>
+      {item.description && (
+        <StackItem>
+          <Content component="p">{item.description}</Content>
+        </StackItem>
+      )}
+      {item.number_of_sboms != null && item.number_of_sboms > 0 && (
+        <StackItem>
+          <Content component="small">{item.number_of_sboms} SBOMs</Content>
+        </StackItem>
+      )}
+    </Stack>
+  );
+};

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

@@ -0,0 +1,187 @@
+import React from "react";
+import type { AxiosError } from "axios";
+import {
+  FILTER_TEXT_CATEGORY_KEY,
+  TablePersistenceKeyPrefixes,
+} from "@app/Constants";
+import { FilterType } from "@app/components/FilterToolbar";
+import {
+  getHubRequestParams,
+  type ITableControls,
+  useTableControlProps,
+  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];
+
+export type SbomGroupTreeNode = SbomGroupItem & {
+  children: SbomGroupTreeNode[];
+};
+
+interface ITreeExpansionState {
+  expandedNodeIds: string[];
+  setExpandedNodeIds: React.Dispatch<React.SetStateAction<string[]>>;
+  childrenNodeStatus: Map<
+    string,
+    { isFetching: boolean; fetchError: AxiosError | null }
+  >;
+}
+
+interface ITreeSelectionState {
+  selectedNodes: SbomGroupItem[];
+  isNodeSelected(node: SbomGroupTreeNode): boolean;
+  areAllSelected: boolean;
+  selectNodes: (nodes: SbomGroupTreeNode[], isSelected: boolean) => void;
+  selectOnlyNodes: (nodes: SbomGroupTreeNode[]) => void;
+  selectAllNodes: (isSelected: boolean) => void;
+}
+
+interface ISbomGroupsContext {
+  tableControls: ITableControls<
+    SbomGroupTreeNode,
+    // Column keys
+    "name",
+    // Sortable column keys
+    "name",
+    // Filter categories
+    "",
+    // Persistence key prefix
+    string
+  >;
+
+  totalItemCount: number;
+  isFetching: boolean;
+  fetchError: AxiosError | null;
+
+  // Tree fields
+  treeExpansion: ITreeExpansionState;
+  treeSelection: ITreeSelectionState;
+  treeData: SbomGroupTreeNode[];
+}
+
+const contextDefaultValue = {} as ISbomGroupsContext;
+
+export const SbomGroupsContext =
+  React.createContext<ISbomGroupsContext>(contextDefaultValue);
+
+interface ISbomGroupsProvider {
+  children: React.ReactNode;
+}
+
+export const SbomGroupsProvider: React.FunctionComponent<
+  ISbomGroupsProvider
+> = ({ children }) => {
+  const tableControlState = useTableControlState({
+    tableName: "sbom-groups",
+    persistenceKeyPrefix: TablePersistenceKeyPrefixes.sbomGroups,
+    persistTo: "urlParams",
+    columnNames: {
+      name: "name",
+    },
+    isPaginationEnabled: true,
+    isSortEnabled: true,
+    sortableColumns: ["name"],
+    isFilterEnabled: true,
+    filterCategories: [
+      {
+        categoryKey: FILTER_TEXT_CATEGORY_KEY,
+        title: "Filter",
+        placeholderText: "Search",
+        type: FilterType.search,
+      },
+    ],
+    isExpansionEnabled: true,
+    expandableVariant: "single",
+  });
+
+  // Expansion state stored in React state (transient UI state, not URL-worthy)
+  const [expandedNodeIds, setExpandedNodeIds] = React.useState<string[]>([]);
+
+  // Fetch paginated root groups (parent IS NULL)
+  const {
+    result: { data: rootGroups, total: totalItemCount },
+    isFetching: isRootsFetching,
+    fetchError,
+  } = useFetchSbomGroups(
+    undefined,
+    getHubRequestParams({
+      ...tableControlState,
+      hubSortFieldKeys: {
+        name: "name",
+      },
+    }),
+  );
+
+  // Fetch children for all expanded groups
+  const { data: childGroups, nodeStatus: childrenNodeStatus } =
+    useFetchSbomGroupChildren(expandedNodeIds);
+
+  // Merge root groups + children into a flat list, then build tree
+  const allGroups = React.useMemo(
+    () => [...rootGroups, ...childGroups],
+    [rootGroups, childGroups],
+  );
+
+  const roots = React.useMemo(() => {
+    return buildSbomGroupTree(allGroups);
+  }, [allGroups]);
+
+  // Only use root-fetching for the table loading state.
+  const isFetching = isRootsFetching;
+
+  const {
+    selectedItems: selectedNodes,
+    isItemSelected: isNodeSelected,
+    areAllSelected,
+    selectItems: selectNodes,
+    selectOnly: selectOnlyNodes,
+    selectAll: selectAllNodes,
+  } = useSelectionState({
+    items: allGroups,
+    isEqual: (a, b) => a.id === b.id,
+  });
+
+  const tableControls = useTableControlProps({
+    ...tableControlState,
+    idProperty: "id",
+    currentPageItems: roots,
+    totalItemCount,
+    isLoading: isFetching,
+    hasActionsColumn: true,
+  });
+
+  return (
+    <SbomGroupsContext.Provider
+      value={{
+        tableControls,
+        isFetching,
+        fetchError,
+        totalItemCount,
+        treeExpansion: {
+          expandedNodeIds,
+          setExpandedNodeIds,
+          childrenNodeStatus,
+        },
+        treeSelection: {
+          selectedNodes,
+          isNodeSelected,
+          areAllSelected,
+          selectNodes,
+          selectOnlyNodes,
+          selectAllNodes,
+        },
+        treeData: roots,
+      }}
+    >
+      {children}
+    </SbomGroupsContext.Provider>
+  );
+};