feat: search app deployment version by operation name (#7060)

Author: jdolle

.changeset/thirty-laws-hang.md

@@ -0,0 +1,5 @@
+---
+'hive': minor
+---
+
+add search to app deployment version by operation name

packages/services/api/src/modules/app-deployments/module.graphql.ts

@@ -5,7 +5,11 @@ export default gql`
     id: ID!
     name: String!
     version: String!
-    documents(first: Int, after: String): GraphQLDocumentConnection
+    documents(
+      first: Int
+      after: String
+      filter: AppDeploymentDocumentsFilterInput
+    ): GraphQLDocumentConnection
     totalDocumentCount: Int!
     status: AppDeploymentStatus!
     """
@@ -54,6 +58,10 @@ export default gql`
     node: AppDeployment!
   }
 
+  input AppDeploymentDocumentsFilterInput {
+    operationName: String
+  }
+
   extend type Target {
     """
     The app deployments for this target.

packages/services/api/src/modules/app-deployments/providers/app-deployments-manager.ts

@@ -192,12 +192,14 @@ export class AppDeploymentsManager {
     args: {
       cursor: string | null;
       first: number | null;
+      operationName: string;
     },
   ) {
     return await this.appDeployments.getPaginatedGraphQLDocuments({
       appDeploymentId: appDeployment.id,
       cursor: args.cursor,
       first: args.first,
+      operationName: args.operationName,
     });
   }
 

packages/services/api/src/modules/app-deployments/providers/app-deployments.ts

@@ -690,9 +690,11 @@ export class AppDeployments {
     appDeploymentId: string;
     cursor: string | null;
     first: number | null;
+    operationName: string;
   }) {
     const limit = args.first ? (args.first > 0 ? Math.min(args.first, 20) : 20) : 20;
     const cursor = args.cursor ? decodeHashBasedCursor(args.cursor) : null;
+    const operationName = args.operationName.trim();
     const result = await this.clickhouse.query({
       query: cSql`
         SELECT
@@ -705,7 +707,8 @@ export class AppDeployments {
         WHERE
           "app_deployment_id" = ${args.appDeploymentId}
           ${cursor?.id ? cSql`AND "document_hash" > ${cursor.id}` : cSql``}
-        ORDER BY "app_deployment_id", "document_hash"
+          ${operationName.length ? cSql`AND "operation_name" ILIKE CONCAT('%', ${operationName}, '%')` : cSql``}
+        ORDER BY "app_deployment_id", ${operationName.length ? cSql`positionCaseInsensitive("operation_name", ${operationName}) ASC, "operation_name" ASC` : cSql`"document_hash"`}
         LIMIT 1 BY "app_deployment_id", "document_hash"
         LIMIT ${cSql.raw(String(limit + 1))}
       `,

packages/services/api/src/modules/app-deployments/resolvers/AppDeployment.ts

@@ -21,6 +21,7 @@ export const AppDeployment: AppDeploymentResolvers = {
       .getPaginatedDocumentsForAppDeployment(appDeployment, {
         cursor: args.after ?? null,
         first: args.first ?? null,
+        operationName: args.filter?.operationName ?? '',
       });
   },
   totalDocumentCount: async (appDeployment, _, { injector }) => {

packages/web/app/src/components/apps/AppFilter.tsx

@@ -0,0 +1,30 @@
+import { useCallback } from 'react';
+import { Input } from '@/components/ui/input';
+import { useRouter } from '@tanstack/react-router';
+
+export function AppFilter() {
+  const router = useRouter();
+  const cb = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    void router.navigate({
+      search: {
+        ...router.latestLocation.search,
+        search: e.target.value === '' ? undefined : e.target.value,
+      },
+      replace: true,
+    });
+  }, []);
+  const initialValue =
+    'search' in router.latestLocation.search &&
+    typeof router.latestLocation.search.search === 'string'
+      ? router.latestLocation.search.search
+      : '';
+
+  return (
+    <Input
+      className="min-w-[200px] grow cursor-text"
+      placeholder="Search by operation name..."
+      onChange={cb}
+      defaultValue={initialValue}
+    />
+  );
+}

packages/web/app/src/pages/target-app-version.tsx

@@ -1,7 +1,8 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import ghost from '../../public/images/figures/ghost.svg?url';
 import { LoaderCircleIcon } from 'lucide-react';
 import { useClient, useQuery } from 'urql';
+import { AppFilter } from '@/components/apps/AppFilter';
 import { Page, TargetLayout } from '@/components/layouts/target';
 import { Button } from '@/components/ui/button';
 import { CardDescription } from '@/components/ui/card';
@@ -40,6 +41,7 @@ const TargetAppsVersionQuery = graphql(`
     $appVersion: String!
     $first: Int
     $after: String
+    $documentsFilter: AppDeploymentDocumentsFilterInput
   ) {
     target(
       reference: {
@@ -56,7 +58,7 @@ const TargetAppsVersionQuery = graphql(`
         id
         name
         version
-        documents(first: $first, after: $after) {
+        documents(first: $first, after: $after, filter: $documentsFilter) {
           pageInfo {
             hasNextPage
             endCursor
@@ -82,6 +84,21 @@ function TargetAppVersionContent(props: {
   appName: string;
   appVersion: string;
 }) {
+  const router = useRouter();
+  const search =
+    typeof router.latestLocation.search.search === 'string'
+      ? router.latestLocation.search.search
+      : '';
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearch(search);
+    }, 500); // 500ms debounce delay
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [search]);
   const [data] = useQuery({
     query: TargetAppsVersionQuery,
     variables: {
@@ -92,9 +109,11 @@ function TargetAppVersionContent(props: {
       appVersion: props.appVersion,
       first: 20,
       after: null,
+      documentsFilter: {
+        operationName: debouncedSearch,
+      },
     },
   });
-  const router = useRouter();
   const client = useClient();
   const [isLoadingMore, setIsLoadingMore] = useState(false);
 
@@ -197,7 +216,9 @@ function TargetAppVersionContent(props: {
                 </CardDescription> */}
             </>
           }
-        />
+        >
+          <AppFilter />
+        </SubPageLayoutHeader>
         <div className="mt-4" />
         {data.fetching || data.stale ? (
           <div className="flex h-fit flex-1 items-center justify-center">
@@ -208,7 +229,11 @@ function TargetAppVersionContent(props: {
           </div>
         ) : !data.data?.target?.appDeployment?.documents?.edges.length ? (
           <EmptyList
-            title="No documents have been uploaded for this app deployment"
+            title={
+              debouncedSearch
+                ? 'No documents found matching that operation name'
+                : 'No documents have been uploaded for this app deployment'
+            }
             description="You can upload documents via the Hive CLI"
             docsUrl="/features/schema-registry#app-deplyments"
           />