feat: Show agent in config details

Author: adityathebe

src/api/services/configs.ts

@@ -143,8 +143,12 @@ export const getAllChanges = (
   );
 };
 
+type ConfigDetail = ConfigItem & {
+  agent_name: string;
+};
+
 export const getConfig = (id: string) =>
-  resolvePostGrestRequestWithPagination<ConfigItem[]>(
+  resolvePostGrestRequestWithPagination<ConfigDetail[]>(
     ConfigDB.get(`/config_detail?id=eq.${id}&select=*,config_scrapers(id,name)`)
   );
 

src/components/Configs/Sidebar/ConfigDetails.tsx

@@ -14,6 +14,7 @@ import { DisplayGroupedProperties } from "../../Utils/DisplayGroupedProperties";
 import ConfigCostValue from "../ConfigCosts/ConfigCostValue";
 import ConfigsTypeIcon from "../ConfigsTypeIcon";
 import { formatConfigLabels } from "./Utils/formatConfigLabels";
+import { MdOutlineSupportAgent } from "react-icons/md";
 
 type Props = {
   configId: string;
@@ -151,7 +152,6 @@ export function ConfigDetails({ configId }: Props) {
               ]}
             />
           )}
-
           <DisplayDetailsRow
             items={[
               {
@@ -178,7 +178,6 @@ export function ConfigDetails({ configId }: Props) {
               }
             ]}
           />
-
           <DisplayDetailsRow
             items={[
               {
@@ -204,6 +203,27 @@ export function ConfigDetails({ configId }: Props) {
             ]}
           />
 
+          <DisplayDetailsRow
+            items={[
+              {
+                label: "Agent",
+                value: (
+                  <div className="flex items-center">
+                    <Link
+                      to={`/settings/agents?id=${configDetails.agent_id}`}
+                      className="flex items-center text-blue-500 hover:underline"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <MdOutlineSupportAgent className="mr-1 text-gray-600" />
+                      {configDetails.agent_name}
+                    </Link>
+                  </div>
+                )
+              }
+            ]}
+          />
+
           <DisplayDetailsRow items={types} />
 
           <DisplayGroupedProperties items={properties} />