Add filter by topic component

Signed-off-by: hemahg <hhg@redhat.com>

Author: hemahg

ui/components/ClusterOverview/components/FilterByTime.tsx

@@ -64,7 +64,6 @@ export function FilterByTime({
     setIsTimeSelectOpen(false);
   };
 
-  // Menu toggle (new PF6 API)
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
       ref={toggleRef}

ui/components/ClusterOverview/components/FilterByTopic.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { FilterByTopic } from "./FilterByTopic";
+
+const meta: Meta<typeof FilterByTopic> = {
+  component: FilterByTopic,
+  args: {
+    selectedTopic: undefined,
+    topicList: ["lorem", "dolor", "ipsum"],
+    disableToolbar: false,
+  },
+} as Meta<typeof FilterByTopic>;
+
+export default meta;
+type Story = StoryObj<typeof FilterByTopic>;
+
+export const Default: Story = {};
+Default.args = {};
+
+export const Disabled: Story = {};
+Disabled.args = {
+  disableToolbar: true,
+  selectedTopic: "lorem",
+};
+
+export const NoTopics: Story = {};
+NoTopics.args = {
+  topicList: undefined,
+};
+
+export const MultipleTopicsWithCommonWords: Story = {};
+MultipleTopicsWithCommonWords.args = {
+  topicList: ["lorem dolor", "lorem ipsum", "lorem foo", "dolor", "ipsum"],
+};
+
+export const DoesNotBreakWithLongWords: Story = {};
+DoesNotBreakWithLongWords.args = {
+  topicList: [
+    "lorem dolor lorem dolor lorem dolor lorem dolor lorem dolor lorem dolor",
+    "lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum ",
+    "lorem foo",
+    "dolor",
+    "ipsum",
+  ],
+};

ui/components/ClusterOverview/components/FilterByTopic.tsx

@@ -0,0 +1,132 @@
+import {
+  Menu,
+  MenuList,
+  MenuContent,
+  MenuSearch,
+  MenuSearchInput,
+  SearchInput,
+  SelectOption,
+  MenuToggle,
+  MenuContainer,
+  ToolbarItem,
+  SelectGroup,
+} from "@/libs/patternfly/react-core";
+import { FilterIcon } from "@/libs/patternfly/react-icons";
+import { useTranslations } from "next-intl";
+import { useRef, useState } from "react";
+
+export function FilterByTopic({
+  selectedTopic,
+  topicList = [],
+  disableToolbar,
+  onSetSelectedTopic,
+}: {
+  selectedTopic: string | undefined;
+  topicList: string[];
+  disableToolbar: boolean;
+  onSetSelectedTopic: (value: string | undefined) => void;
+}) {
+  const t = useTranslations("metrics");
+  const allTopicsLabel = t("all_topics");
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [filter, setFilter] = useState("");
+
+  const toggleRef = useRef<any>();
+  const menuRef = useRef<any>();
+
+  const filteredTopics = topicList.filter((topic) =>
+    topic.toLowerCase().includes(filter.toLowerCase()),
+  );
+
+  const onSelect = (_event: any, itemId: string | number | undefined) => {
+    if (itemId === "all-topics") {
+      onSetSelectedTopic(undefined);
+    } else {
+      onSetSelectedTopic(itemId as string);
+    }
+    setIsOpen(false);
+  };
+
+  const menuItems = [
+    <SelectOption
+      key="all-topics"
+      itemId="all-topics"
+      isSelected={selectedTopic === undefined}
+    >
+      {allTopicsLabel}
+    </SelectOption>,
+    <SelectGroup label="Filter by topic" key="topic-filter-group">
+      {filteredTopics.map((topic, index) => (
+        <SelectOption
+          key={`topic-filter-${index + 1}`}
+          itemId={topic}
+          title={topic}
+          isSelected={selectedTopic === topic}
+        >
+          {topic}
+        </SelectOption>
+      ))}
+    </SelectGroup>,
+  ];
+
+  if (filter && menuItems.length === 1) {
+    menuItems.push(
+      <SelectOption isDisabled key="no-results">
+        {t("common:no_results_found")}
+      </SelectOption>,
+    );
+  }
+
+  const toggle = (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={() => setIsOpen(!isOpen)}
+      isExpanded={isOpen}
+      isDisabled={disableToolbar || topicList.length === 0}
+      className="appserv-metrics-filterbytopic"
+    >
+      {selectedTopic || allTopicsLabel}
+    </MenuToggle>
+  );
+
+  const menu = (
+    <Menu
+      ref={menuRef}
+      onSelect={onSelect}
+      activeItemId={selectedTopic ?? "all-topics"}
+      isScrollable
+    >
+      <MenuSearch>
+        <MenuSearchInput>
+          <SearchInput
+            value={filter}
+            onChange={(_, val) => setFilter(val)}
+            onClear={(evt) => {
+              evt.stopPropagation();
+              setFilter("");
+            }}
+          />
+        </MenuSearchInput>
+      </MenuSearch>
+
+      <MenuContent maxMenuHeight="200px">
+        <MenuList>{menuItems}</MenuList>
+      </MenuContent>
+    </Menu>
+  );
+
+  return (
+    <ToolbarItem>
+      <MenuContainer
+        toggle={toggle}
+        toggleRef={toggleRef}
+        menu={menu}
+        menuRef={menuRef}
+        isOpen={isOpen}
+        onOpenChange={setIsOpen}
+        onOpenChangeKeys={["Escape"]}
+      />
+    </ToolbarItem>
+  );
+}

ui/messages/en.json

@@ -415,7 +415,8 @@
     "not_available": "n/a"
   },
   "metrics": {
-     "all_brokers": "All Brokers"
+     "all_brokers": "All Brokers",
+     "all_topics": "All topics"
   },
   "ColumnsModal": {
     "title": "Manage columns",