fix: hide delete button for manual linked configs

Closes #1447

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: ConfigItem) => (ent.deleted_at ? 1 : -1));
-          return items;
-        });
-      }
-      return Promise.resolve([]);
-    },
+    () => getConfigsBy({ topologyId, configId }),
     {
       enabled: !!topologyId || !!configId
     }

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 = (

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,7 +97,9 @@ export function ConfigsList({
                   className="ml-2"
                 />
               ) : (
-                topologyId && (
+                topologyId &&
+                // Only show delete button for manual config links
+                config.selector_id === "manual" && (
                   <div className="flex flex-row justify-end items-center">
                     <IconButton
                       className="bg-transparent flex items-center"
@@ -107,7 +111,7 @@ export function ConfigsList({
                       }}
                       icon={<BsTrash />}
                       onClick={() => {
-                        setDeletedConfigLinkId(config.id);
+                        setDeletedConfigLinkId(config.config_id);
                       }}
                     />
                   </div>
@@ -138,13 +142,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();