feat: Add Certificates Tab to the Trust Root Page (#8)

Signed-off-by: Carlos Feria <[email protected]>

Author: carlosthe19916

client/src/app/components/StateError.tsx renamed to client/src/app/components/ErrorEmptyState.tsx

@@ -3,7 +3,7 @@ import type React from "react";
 import { EmptyState, EmptyStateBody, EmptyStateVariant } from "@patternfly/react-core";
 import ExclamationCircleIcon from "@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon";
 
-export const StateError: React.FC = () => {
+export const ErrorEmptyState: React.FC = () => {
   return (
     <EmptyState
       status="danger"

client/src/app/components/FilterToolbar/FilterControl.tsx

@@ -0,0 +1,10 @@
+import type { FilterValue } from "@app/hooks/TableControls/filtering/types";
+
+export interface IFilterControlProps<TFilterCategoryKey extends string> {
+  categoryKey: TFilterCategoryKey;
+  categoryName: string;
+  filterValue: FilterValue;
+  setFilterValue: (newValue: FilterValue) => void;
+  showToolbarItem?: boolean;
+  isDisabled?: boolean;
+}

client/src/app/components/FilterToolbar/FilterToolbar.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+
+import { Dropdown, DropdownItem, MenuToggle, ToolbarItem, ToolbarToggleGroup } from "@patternfly/react-core";
+import { FilterIcon } from "@patternfly/react-icons";
+
+import type { IFilterCategory } from "@app/hooks/TableControls/filtering/types";
+
+export interface IFilterToolbarProps<TItem, TFilterCategoryKey extends string> {
+  currentFilterCategoryKey?: TFilterCategoryKey;
+  setCurrentFilterCategoryKey: (value: TFilterCategoryKey) => void;
+  categoryTitles: Record<TFilterCategoryKey, string>;
+  filterCategories: IFilterCategory<TItem, TFilterCategoryKey>[];
+  showFilterDropdown?: boolean;
+  isDisabled?: boolean;
+  children?: React.ReactNode;
+}
+
+export const FilterToolbar = <TItem, TFilterCategoryKey extends string>({
+  currentFilterCategoryKey,
+  setCurrentFilterCategoryKey,
+  filterCategories,
+  categoryTitles,
+  showFilterDropdown,
+  isDisabled,
+  children,
+}: IFilterToolbarProps<TItem, TFilterCategoryKey>) => {
+  const [isCategoryDropdownOpen, setIsCategoryDropdownOpen] = React.useState(false);
+
+  const onCategorySelect = (category: IFilterCategory<TItem, TFilterCategoryKey>) => {
+    setCurrentFilterCategoryKey(category.categoryKey);
+    setIsCategoryDropdownOpen(false);
+  };
+
+  const currentFilterCategory = filterCategories.find((category) => category.categoryKey === currentFilterCategoryKey);
+
+  const renderDropdownItems = () => {
+    return filterCategories.map((category) => (
+      <DropdownItem
+        id={`filter-category-${category.categoryKey}`}
+        key={category.categoryKey}
+        onClick={() => onCategorySelect(category)}
+      >
+        {categoryTitles[category.categoryKey]}
+      </DropdownItem>
+    ));
+  };
+
+  return (
+    <ToolbarToggleGroup
+      variant="filter-group"
+      toggleIcon={<FilterIcon />}
+      breakpoint="2xl"
+      gap={showFilterDropdown ? { default: "gapMd" } : undefined}
+    >
+      {showFilterDropdown && (
+        <ToolbarItem>
+          <Dropdown
+            toggle={(toggleRef) => (
+              <MenuToggle
+                id="filtered-by"
+                ref={toggleRef}
+                onClick={() => setIsCategoryDropdownOpen(!isCategoryDropdownOpen)}
+                isDisabled={isDisabled}
+              >
+                <FilterIcon /> {currentFilterCategory ? categoryTitles[currentFilterCategory.categoryKey] : null}
+              </MenuToggle>
+            )}
+            isOpen={isCategoryDropdownOpen}
+          >
+            {renderDropdownItems()}
+          </Dropdown>
+        </ToolbarItem>
+      )}
+      {children}
+    </ToolbarToggleGroup>
+  );
+};