From 5a35a0d1baf6338bfab17fe7750ef1dfc47b901c Mon Sep 17 00:00:00 2001
From: Maina Wycliffe <wmmaina7@gmail.com>
Date: Wed, 1 Nov 2023 20:05:48 +0300
Subject: [PATCH] fix: hide delete button for manual linked configs

Closes #1447

fix: only show delete on manual configs

fix: refactor after rebase
---
 .../useComponentConfigRelationshipQuery.ts    | 29 +------------------
 src/api/services/configs.ts                   | 13 +++------
 src/components/Sidebars/configs.tsx           | 17 +++++++----
 3 files changed, 16 insertions(+), 43 deletions(-)

diff --git a/src/api/query-hooks/useComponentConfigRelationshipQuery.ts b/src/api/query-hooks/useComponentConfigRelationshipQuery.ts
index a9f598369..c01028feb 100644
--- a/src/api/query-hooks/useComponentConfigRelationshipQuery.ts
+++ b/src/api/query-hooks/useComponentConfigRelationshipQuery.ts
@@ -1,6 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
 import { getConfigsBy } from "../services/configs";
-import { ConfigItem } from "../types/configs";
 
 export const componentConfigRelationshipQueryKey = ({
   topologyId,
@@ -28,33 +27,7 @@ export function useComponentConfigRelationshipQuery({
 }) {
   return useQuery(
     componentConfigRelationshipQueryKey({ topologyId, configId, hideDeleted }),
-    () => {
-      if (topologyId) {
-        return getConfigsBy({ topologyId, hideDeleted })?.then((res) => {
-          return res?.data?.map((item) => {
-            return item.configs as ConfigItem;
-          });
-        });
-      }
-      if (configId) {
-        return getConfigsBy({ configId, hideDeleted })?.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, hideDeleted }),
     {
       enabled: !!topologyId || !!configId
     }
diff --git a/src/api/services/configs.ts b/src/api/services/configs.ts
index 991168136..336fdff9b 100644
--- a/src/api/services/configs.ts
+++ b/src/api/services/configs.ts
@@ -144,21 +144,16 @@ export const getConfigsBy = ({
   const configFields = `id, type, name, config_class, deleted_at`;
   const deletedAt = hideDeleted ? `&deleted_at=is.null` : "";
   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})${deletedAt}`
+        `/config_component_relationships?component_id=eq.${topologyId}&configs.order=name&select=*,configs!config_component_relationships_config_id_fkey(${configFields})${deletedAt}`
       )
     );
   }
   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})${deletedAt}`
+      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})${deletedAt}`
       )
     );
   }
diff --git a/src/components/Sidebars/configs.tsx b/src/components/Sidebars/configs.tsx
index 4e92ad2f2..0ea36347e 100644
--- 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>
@@ -129,11 +132,13 @@ export default function Configs({
     () => props.hideDeletedConfigs ?? true
   );
 
-  const { data: configs = [] } = useComponentConfigRelationshipQuery({
+  const { data: res } = useComponentConfigRelationshipQuery({
     ...props,
     hideDeleted: hideDeletedConfigs
   });
 
+  const configs = res?.data ?? [];
+
   const TrashIconType = hideDeletedConfigs ? TbTrashOff : TbTrash;
   const handleTrashIconClick = (e: { stopPropagation: () => void }) => {
     e.stopPropagation();