fix: fix missing breadcrumbs for catalog changes tab

Fixes #2350

Author: mainawycliffe

src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesFilters.tsx

@@ -77,7 +77,7 @@ export function ConfigChangeFilters({
 
   const arbitraryFilters = useConfigChangesArbitraryFilters();
 
-  const configType = params.get("configTypes") ?? undefined;
+  const configType = params.get("configType") ?? undefined;
 
   const defaultConfigType = useMemo(() => {
     return configType ? `${configType?.replaceAll("::", "__")}:1` : undefined;
@@ -86,7 +86,7 @@ export function ConfigChangeFilters({
   return (
     <div className="flex w-full flex-col gap-2">
       <FormikFilterForm
-        paramsToReset={paramsToReset}
+        paramsToReset={[...paramsToReset, "configType"]}
         filterFields={["configTypes", "changeType", "severity", "tags"]}
         defaultFieldValues={{
           ...(configType && { configTypes: defaultConfigType })

src/components/Configs/ConfigPageTabs.tsx

@@ -1,20 +1,20 @@
+import TabbedLinks from "@flanksource-ui/ui/Tabs/TabbedLinks";
 import { useMemo } from "react";
 import { useSearchParams } from "react-router-dom";
-import TabbedLinks from "../../ui/Tabs/TabbedLinks";
 
 type ConfigPageTabsProps = {
   activeTab: string;
   children: React.ReactNode;
+  configType?: string;
 };
 
 export default function ConfigPageTabs({
   activeTab,
-  children
+  children,
+  configType
 }: ConfigPageTabsProps) {
   const [searchParams] = useSearchParams();
-
-  const type = searchParams.get("configType") ?? undefined;
-
+  const type = searchParams.get("configType") ?? configType;
   const configTabsLists = useMemo(() => {
     const query = type ? `?configType=${type}` : "";
     return [

src/pages/config/ConfigChangesPage.tsx

@@ -2,6 +2,7 @@ import { useGetAllConfigsChangesQuery } from "@flanksource-ui/api/query-hooks/us
 import { ConfigChangeTable } from "@flanksource-ui/components/Configs/Changes/ConfigChangeTable";
 import { ConfigChangeFilters } from "@flanksource-ui/components/Configs/Changes/ConfigChangesFilters/ConfigChangesFilters";
 import ConfigPageTabs from "@flanksource-ui/components/Configs/ConfigPageTabs";
+import ConfigsTypeIcon from "@flanksource-ui/components/Configs/ConfigsTypeIcon";
 import { InfoMessage } from "@flanksource-ui/components/InfoMessage";
 import {
   BreadcrumbChild,
@@ -20,6 +21,14 @@ export function ConfigChangesPage() {
   );
   const [params] = useSearchParams({});
 
+  const configTypes = params.get("configTypes") ?? undefined;
+  const configType =
+    // we want to show breadcrumb only if there is only one config type selected
+    // in the filter dropdown and not multiple
+    configTypes?.split(",").length === 1
+      ? configTypes.split(",")[0]?.split(":")?.[0].split("__").join("::")
+      : undefined;
+
   const pageSize = params.get("pageSize") ?? "200";
 
   const { data, isLoading, error, isRefetching, refetch } =
@@ -59,7 +68,21 @@ export function ConfigChangesPage() {
                 key="config-catalog-changes"
               >
                 Changes
-              </BreadcrumbChild>
+              </BreadcrumbChild>,
+              ...(configType
+                ? [
+                    <BreadcrumbChild
+                      link={`/catalog?configType=${configType}`}
+                      key={configType}
+                    >
+                      <ConfigsTypeIcon
+                        config={{ type: configType }}
+                        showSecondaryIcon
+                        showLabel
+                      />
+                    </BreadcrumbChild>
+                  ]
+                : [])
             ]}
           />
         }
@@ -70,7 +93,7 @@ export function ConfigChangesPage() {
         loading={isLoading || isRefetching}
         contentClass="p-0 h-full flex flex-col flex-1"
       >
-        <ConfigPageTabs activeTab="Changes">
+        <ConfigPageTabs activeTab="Changes" configType={configType}>
           {error ? (
             <InfoMessage message={errorMessage} />
           ) : (