fix: hide delete button for manual linked configs

Closes #1447 fix: only show delete on manual configs
flanksource · Dec 7, 2023 · e7b223b · e7b223b
1 parent 11fb419
commit e7b223b
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 51 deletions.
diff --git a/src/api/query-hooks/useComponentConfigRelationshipQuery.ts b/src/api/query-hooks/useComponentConfigRelationshipQuery.ts
@@ -1,18 +1,17 @@
 import { useQuery } from "@tanstack/react-query";
 import { getConfigsBy } from "../services/configs";
-import { ConfigItem } from "../types/configs";
 
 export const componentConfigRelationshipQueryKey = ({
   topologyId,
   configId
 }: {
   topologyId?: string;
   configId?: string;
-}) => {
+}): string[] => {
   if (topologyId) {
-    return ["component", "config", "relationships", topologyId];
+    return ["component", "config", "relationships", topologyId!];
   }
-  return ["config", "relationships", configId];
+  return ["config", "relationships", configId!];
 };
 
 export function useComponentConfigRelationshipQuery({
@@ -24,33 +23,7 @@ export function useComponentConfigRelationshipQuery({
 }) {
   return useQuery(
     componentConfigRelationshipQueryKey({ topologyId, configId }),
-    () => {
-      if (topologyId) {
-        return getConfigsBy({ topologyId })?.then((res) => {
-          return res?.data?.map((item) => {
-            return item.configs as ConfigItem;
-          });
-        });
-      }
-      if (configId) {
-        return getConfigsBy({ configId })?.then((res) => {
-          let items: ConfigItem[] = [];
-          res?.data?.forEach((item) => {
-            const configs = item.configs as ConfigItem;
-            const related = item.related as ConfigItem;
-            if (configs && configs.id !== configId) {
-              items.push(configs);
-            }
-            if (related && related.id !== configId) {
-              items.push(related);
-            }
-          });
-          items = items.sort((ent) => (ent.deleted_at ? 1 : -1));
-          return items;
-        });
-      }
-      return Promise.resolve([]);
-    },
+    () => getConfigsBy({ topologyId, configId }),
     {
       enabled: !!topologyId || !!configId
     }

diff --git a/src/api/services/configs.ts b/src/api/services/configs.ts
@@ -137,29 +137,20 @@ type ConfigParams = {
 export const getConfigsBy = ({ topologyId, configId }: ConfigParams) => {
   const configFields = `id, type, name, config_class, deleted_at`;
   if (topologyId) {
-    return resolve<
-      {
-        configs?: ConfigItem[];
-        related?: ConfigItem[];
-      }[]
-    >(
+    return resolve<ConfigTypeRelationships[]>(
       ConfigDB.get(
-        `/config_component_relationships?component_id=eq.${topologyId}&configs.order=name&select=configs!config_component_relationships_config_id_fkey(${configFields})`
+        `/config_component_relationships?component_id=eq.${topologyId}&configs.order=name&select=*,configs!config_component_relationships_config_id_fkey(${configFields})`
       )
     );
   }
   if (configId) {
     return resolve(
-      ConfigDB.get<Pick<ConfigTypeRelationships, "configs" | "related">[]>(
-        `/config_relationships?or=(related_id.eq.${configId},config_id.eq.${configId})&configs.order=name&select=configs:configs!config_relationships_config_id_fkey(${configFields}),related:configs!config_relationships_related_id_fkey(${configFields})`
+      ConfigDB.get<ConfigTypeRelationships[]>(
+        `/config_relationships?or=(related_id.eq.${configId},config_id.eq.${configId})&configs.order=name&select=*,configs:configs!config_relationships_config_id_fkey(${configFields}),related:configs!config_relationships_related_id_fkey(${configFields})`
       )
     );
   }
-  return Promise.resolve({
-    totalEntries: 0,
-    data: [],
-    error: null
-  });
+  return Promise.reject(new Error("Invalid params"));
 };
 
 export const addManualComponentConfigRelationship = (

diff --git a/src/components/Sidebars/configs.tsx b/src/components/Sidebars/configs.tsx
@@ -37,12 +37,14 @@ export function ConfigsList({
   >();
 
   const {
-    data: configs = [],
+    data: res,
     isLoading,
     isRefetching,
     refetch
   } = useComponentConfigRelationshipQuery({ topologyId, configId });
 
+  const configs = res?.data ?? [];
+
   const deleteLink = async (configId: string) => {
     if (!topologyId) {
       return;
@@ -79,13 +81,13 @@ export function ConfigsList({
         <ol className="flex flex-col w-full overflow-x-hidden">
           {configs.map((config) => (
             <li
-              key={config.id}
+              key={config.config_id}
               className={clsx("p-1 relative flex flex-row flex-1", {
                 hidden: hideDeletedConfigs && config.deleted_at
               })}
             >
               <ConfigLink
-                config={config}
+                config={config.configs}
                 className="overflow-hidden text-ellipsis flex-1 whitespace-nowrap"
               />
               {config.deleted_at && (
@@ -95,9 +97,10 @@ export function ConfigsList({
                   className="ml-2"
                 />
               )}
-              {topologyId && (
+              {/* only show delete button on manually linked configs */}
+              {topologyId && config.selector_id === "manual" && (
                 <TopologyConfigsActionsDropdown
-                  onUnlinkUser={() => setDeletedConfigLinkId(config.id)}
+                  onUnlinkUser={() => setDeletedConfigLinkId(config.config_id)}
                 />
               )}
             </li>
@@ -125,13 +128,15 @@ export default function Configs({
   onCollapsedStateChange,
   ...props
 }: Props) {
-  const { data: configs = [] } = useComponentConfigRelationshipQuery({
+  const { data: res } = useComponentConfigRelationshipQuery({
     ...props
   });
   const [hideDeletedConfigs, setHideDeletedConfigs] = useState(() => {
     return props.hideDeletedConfigs;
   });
 
+  const configs = res?.data;
+
   const TrashIconType = hideDeletedConfigs ? TbTrashOff : TbTrash;
   const handleTrashIconClick = (e: { stopPropagation: () => void }) => {
     e.stopPropagation();