feat: add mechanism to favorite Config Types in config summary

Fixes #2068

chore: reduce pin icon size

Update src/components/Configs/ConfigSummary/ConfigSummaryTypeFavorite.tsx

src/api/query-hooks/useConfigSummaryQuery.ts

@@ -1,7 +1,9 @@
 import { useHideDeletedConfigs } from "@flanksource-ui/components/Configs/ConfigListToggledDeletedItems/ConfigListToggledDeletedItems";
+import { configTypesFavorites } from "@flanksource-ui/components/Configs/ConfigSummary/ConfigSummaryTypeFavorite";
 import useGroupBySearchParam from "@flanksource-ui/components/Configs/ConfigSummary/utils/useGroupBySearchParam";
 import { tristateOutputToQueryParamValue } from "@flanksource-ui/ui/Dropdowns/TristateReactSelect";
 import { UseQueryOptions, useQuery } from "@tanstack/react-query";
+import { useAtom } from "jotai";
 import { useMemo } from "react";
 import { useSearchParams } from "react-router-dom";
 import { ConfigSummaryRequest, getConfigsSummary } from "../services/configs";
@@ -20,6 +22,8 @@ export function useConfigSummaryQuery({
   const status = searchParams.get("status") ?? undefined;
   const health = searchParams.get("health") ?? undefined;
 
+  const [favorites] = useAtom(configTypesFavorites);
+
   const groupBy = useGroupBySearchParam();
 
   const filterSummaryByLabel = useMemo(() => {
@@ -55,7 +59,10 @@ export function useConfigSummaryQuery({
     select: (data) =>
       data.map((summary) => ({
         ...summary,
-        config_class: summary.type.split("::")[0]
+        config_class: summary.type.split("::")[0],
+        // we need to add the isFavorite property to the summary, so we can sort
+        // by it in the UI
+        isFavorite: favorites[summary.type]
       }))
   });
 }

src/components/Configs/ConfigSummary/ConfigSummaryList.tsx

@@ -15,6 +15,7 @@ import {
 } from "./Cells/ConfigSummaryHealthCells";
 import { ConfigSummaryTableVirtualAggregateColumn } from "./Cells/ConfigSummaryTableVirtualAggregateColumn";
 import { ConfigSummaryVirtualColumnCell } from "./Cells/ConfigSummaryVirtualColumnCell";
+import ConfigSummaryFavoriteButton from "./ConfigSummaryTypeFavorite";
 
 export function getConfigStatusColor(health?: ConfigSummary["health"]) {
   if (!health) {
@@ -57,12 +58,14 @@ function ConfigSummaryTypeCell({
         marginLeft: row.depth * 20
       }}
     >
-      <ConfigsTypeIcon config={{ type: configType }}>
-        <div className="flex flex-row items-center gap-1">
-          <span className="pl-1">{value}</span>
-          <Badge text={configCount} />
-        </div>
-      </ConfigsTypeIcon>
+      <ConfigSummaryFavoriteButton configSummary={row.original}>
+        <ConfigsTypeIcon config={{ type: configType }}>
+          <div className="flex flex-row items-center gap-1">
+            <span className="pl-1">{value}</span>
+            <Badge text={configCount} />
+          </div>
+        </ConfigsTypeIcon>
+      </ConfigSummaryFavoriteButton>
     </span>
   );
 }
@@ -191,6 +194,11 @@ const configSummaryColumns: ColumnDef<ConfigSummary, any>[] = [
     cell: ConfigListDateCell<ConfigSummary>,
     aggregatedCell: "",
     maxSize: 40
+  },
+  {
+    header: "Is Favorite",
+    accessorKey: "isFavorite",
+    enableHiding: true
   }
 ];
 
@@ -272,6 +280,13 @@ export default function ConfigSummaryList({
     return [...newColumns, ...configSummaryColumns];
   }, [groupBy, groupByTags]);
 
+  // when grouping, remove the last column from the groupBy and always hide the
+  // isFavorite column
+  const hiddenColumns = useMemo(() => {
+    const list = groupBy.length > 1 ? groupBy.slice(0, groupBy.length - 1) : [];
+    return [...list, "isFavorite"];
+  }, [groupBy]);
+
   return (
     <DataTable
       stickyHead
@@ -281,9 +296,13 @@ export default function ConfigSummaryList({
       groupBy={
         groupBy.length > 1 ? groupBy.slice(0, groupBy.length - 1) : undefined
       }
-      hiddenColumns={
-        groupBy.length > 1 ? groupBy.slice(0, groupBy.length - 1) : undefined
-      }
+      tableSortByState={[
+        {
+          desc: false,
+          id: "isFavorite"
+        }
+      ]}
+      hiddenColumns={hiddenColumns}
       handleRowClick={handleRowClick}
       tableStyle={{ borderSpacing: "0" }}
       isLoading={isLoading}

src/components/Configs/ConfigSummary/ConfigSummaryTypeFavorite.tsx

@@ -0,0 +1,71 @@
+import { ConfigSummary } from "@flanksource-ui/api/types/configs";
+import clsx from "clsx";
+import { useAtom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+import { useCallback } from "react";
+import { PiPushPinFill, PiPushPinThin } from "react-icons/pi";
+
+export const configTypesFavorites = atomWithStorage<Record<string, boolean>>(
+  "configTypesFavorites",
+  {},
+  undefined,
+  {
+    getOnInit: true
+  }
+);
+
+type ConfigSummaryFavoriteButtonProps = {
+  configSummary: ConfigSummary;
+  children?: React.ReactNode;
+};
+
+export default function ConfigSummaryFavoriteButton({
+  configSummary,
+  children
+}: ConfigSummaryFavoriteButtonProps) {
+  const [favorites, setFavorites] = useAtom(configTypesFavorites);
+
+  const isFavorite = favorites[configSummary.type];
+
+  const toggleFavorite = useCallback(
+    (e: React.MouseEvent<HTMLElement>) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setFavorites((prev) => {
+        // We want to remove the favorite
+        if (prev[configSummary.type]) {
+          // Avoid mutating the state, use object destructuring to remove the
+          // key from the object
+          const { [configSummary.type]: _, ...rest } = prev;
+          return rest;
+        }
+        return {
+          ...prev,
+          [configSummary.type]: true
+        };
+      });
+    },
+    [configSummary.type, setFavorites]
+  );
+
+  return (
+    <div className="flex flex-row w-full gap-1 group">
+      <div className="flex-1 overflow-x-hidden text-ellipsis">{children}</div>
+      <div
+        role="button"
+        onClick={toggleFavorite}
+        title={isFavorite ? "Unpin" : "Pin"}
+        className={clsx(
+          "flex-row gap-1 px-1",
+          isFavorite ? "flex" : "hidden group-hover:flex"
+        )}
+      >
+        {isFavorite ? (
+          <PiPushPinFill className="h-5 w-5 text-amber-300" />
+        ) : (
+          <PiPushPinThin className="h-5 w-5" />
+        )}
+      </div>
+    </div>
+  );
+}