improvement: support search by integration destination

frontend/src/views/IntegrationsPage/components/IntegrationsSection/components/IntegrationDetails.tsx

@@ -8,6 +8,14 @@ type Props = {
 const FIELD_CLASSNAME =
   "truncate rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200";
 
+export const getIntegrationDestination = (integration: TIntegration) =>
+  (integration.integration === "hashicorp-vault" &&
+    `${integration.app} - path: ${integration.path}`) ||
+  (integration.scope === "github-org" && `${integration.owner}`) ||
+  (["aws-parameter-store", "rundeck"].includes(integration.integration) && `${integration.path}`) ||
+  (integration.scope?.startsWith("github-") && `${integration.owner}/${integration.app}`) ||
+  integration.app;
+
 export const IntegrationDetails = ({ integration }: Props) => {
   return (
     <div className="flex flex-col gap-2 p-2">
@@ -55,16 +63,7 @@ export const IntegrationDetails = ({ integration }: Props) => {
               "App"
             }
           />
-          <div className={FIELD_CLASSNAME}>
+          <div className={FIELD_CLASSNAME}>{getIntegrationDestination(integration)}</div>
-            {(integration.integration === "hashicorp-vault" &&
-              `${integration.app} - path: ${integration.path}`) ||
-              (integration.scope === "github-org" && `${integration.owner}`) ||
-              (["aws-parameter-store", "rundeck"].includes(integration.integration) &&
-                `${integration.path}`) ||
-              (integration.scope?.startsWith("github-") &&
-                `${integration.owner}/${integration.app}`) ||
-              integration.app}
-          </div>
         </div>
       )}
       {(integration.integration === "vercel" ||

frontend/src/views/IntegrationsPage/components/IntegrationsSection/components/IntegrationRow.tsx

@@ -18,7 +18,7 @@ import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { TCloudIntegration } from "@app/hooks/api/integrations/types";
 import { TIntegration } from "@app/hooks/api/types";
 
-import { IntegrationDetails } from "./IntegrationDetails";
+import { getIntegrationDestination, IntegrationDetails } from "./IntegrationDetails";
 
 type IProps = {
   integration: TIntegration;
@@ -77,16 +77,7 @@ export const IntegrationRow = ({
       <Td>{environment?.name ?? "-"}</Td>
       <Td className="!min-w-[5rem] max-w-0">
         <div className="flex items-center gap-2">
-          <p className="truncate">
+          <p className="truncate">{getIntegrationDestination(integration)}</p>
-            {(integration.integration === "hashicorp-vault" &&
-              `${integration.app} - path: ${integration.path}`) ||
-              (integration.scope === "github-org" && `${integration.owner}`) ||
-              (["aws-parameter-store", "rundeck"].includes(integration.integration) &&
-                `${integration.path}`) ||
-              (integration.scope?.startsWith("github-") &&
-                `${integration.owner}/${integration.app}`) ||
-              integration.app}
-          </p>
           <Tooltip
             position="left"
             className="min-w-[20rem] max-w-lg"

frontend/src/views/IntegrationsPage/components/IntegrationsSection/components/IntegrationsTable.tsx

@@ -36,6 +36,7 @@ import { usePagination, useResetPageHelper } from "@app/hooks";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { useSyncIntegration } from "@app/hooks/api/integrations/queries";
 import { TCloudIntegration, TIntegration } from "@app/hooks/api/integrations/types";
+import { getIntegrationDestination } from "@app/views/IntegrationsPage/components/IntegrationsSection/components/IntegrationDetails";
 
 import { IntegrationRow } from "./IntegrationRow";
 
@@ -120,7 +121,9 @@ export const IntegrationsTable = ({
   const filteredIntegrations = useMemo(
     () =>
       integrations
-        .filter(({ integration, secretPath, envId, isSynced }) => {
+        .filter((integration) => {
+          const { secretPath, envId, isSynced } = integration;
+
           if (!filters.status.includes(IntegrationStatus.Synced) && isSynced) return false;
           if (!filters.status.includes(IntegrationStatus.NotSynced) && isSynced === false)
             return false;
@@ -130,13 +133,19 @@ export const IntegrationsTable = ({
           )
             return false;
 
-          if (!filters.integrations.includes(integration)) return false;
+          if (!filters.integrations.includes(integration.integration)) return false;
 
           if (!filters.environmentIds.includes(envId)) return false;
 
           return (
-            integration.replace("-", " ").toLowerCase().includes(search.trim().toLowerCase()) ||
+            integration.integration
+              .replace("-", " ")
+              .toLowerCase()
+              .includes(search.trim().toLowerCase()) ||
             secretPath.replace("-", " ").toLowerCase().includes(search.trim().toLowerCase()) ||
+            getIntegrationDestination(integration)
+              ?.toLowerCase()
+              .includes(search.trim().toLowerCase()) ||
             environmentMap
               .get(envId)
               ?.name.replace("-", " ")