feat: implement project details live refresh

Signed-off-by: Alexander Matyushentsev <[email protected]>

api/service/v1alpha1/service.proto

@@ -123,6 +123,7 @@ message WatchStageRequest {
 
 message WatchStageResponse {
   github.com.akuity.kargo.pkg.api.v1alpha1.Stage stage = 1;
+  string type = 2;
 }
 
 message UpdateStageRequest {

internal/api/handler/watch_stage_v1alpha1.go

@@ -38,26 +38,27 @@ func WatchStageV1Alpha1(
 		if req.Msg.GetProject() == "" {
 			return connect.NewError(connect.CodeInvalidArgument, errors.New("project should not be empty"))
 		}
-		if req.Msg.GetName() == "" {
-			return connect.NewError(connect.CodeInvalidArgument, errors.New("name should not be empty"))
-		}
 		if err := validateProject(ctx, req.Msg.GetProject()); err != nil {
 			return err
 		}
 
-		if err := kubeCli.Get(ctx, client.ObjectKey{
-			Namespace: req.Msg.GetProject(),
-			Name:      req.Msg.GetName(),
-		}, &kargov1alpha1.Stage{}); err != nil {
-			if kubeerr.IsNotFound(err) {
-				return connect.NewError(connect.CodeNotFound, err)
+		if req.Msg.GetName() != "" {
+			if err := kubeCli.Get(ctx, client.ObjectKey{
+				Namespace: req.Msg.GetProject(),
+				Name:      req.Msg.GetName(),
+			}, &kargov1alpha1.Stage{}); err != nil {
+				if kubeerr.IsNotFound(err) {
+					return connect.NewError(connect.CodeNotFound, err)
+				}
+				return connect.NewError(connect.CodeInternal, err)
 			}
-			return connect.NewError(connect.CodeInternal, err)
 		}
 
-		w, err := stageCli.Namespace(req.Msg.GetProject()).Watch(ctx, metav1.ListOptions{
-			FieldSelector: fields.OneTermEqualSelector(metav1.ObjectNameField, req.Msg.GetName()).String(),
-		})
+		opts := metav1.ListOptions{}
+		if req.Msg.GetName() != "" {
+			opts.FieldSelector = fields.OneTermEqualSelector(metav1.ObjectNameField, req.Msg.GetName()).String()
+		}
+		w, err := stageCli.Namespace(req.Msg.GetProject()).Watch(ctx, opts)
 		if err != nil {
 			return errors.Wrap(err, "watch stage")
 		}
@@ -80,6 +81,7 @@ func WatchStageV1Alpha1(
 				}
 				if err := stream.Send(&svcv1alpha1.WatchStageResponse{
 					Stage: typesv1alpha1.ToStageProto(*stage),
+					Type:  string(e.Type),
 				}); err != nil {
 					return errors.Wrap(err, "send response")
 				}

internal/api/server.go

@@ -8,7 +8,7 @@ import (
 	"time"
 
 	"connectrpc.com/connect"
-	grpchealth "connectrpc.com/grpchealth"
+	"connectrpc.com/grpchealth"
 	"github.com/pkg/errors"
 	"golang.org/x/net/http2"
 	"golang.org/x/net/http2/h2c"

ui/src/features/project/project-details/project-details.tsx

@@ -1,18 +1,73 @@
 import { FlowAnalysisGraph, FlowGraphEdgeData, IGraph, LabelStyle } from '@ant-design/graphs';
-import { useQuery } from '@tanstack/react-query';
+import { createPromiseClient } from '@bufbuild/connect';
+import { createConnectTransport } from '@bufbuild/connect-web';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { Empty } from 'antd';
 import React from 'react';
 import { generatePath, useNavigate, useParams } from 'react-router-dom';
 
 import { paths } from '@ui/config/paths';
 import { LoadingState } from '@ui/features/common';
 import { listStages } from '@ui/gen/service/v1alpha1/service-KargoService_connectquery';
+import { KargoService } from '@ui/gen/service/v1alpha1/service_connect';
+import { Stage } from '@ui/gen/v1alpha1/types_pb';
+import { useDocumentEvent } from '@ui/utils/document';
 
 export const ProjectDetails = () => {
   const { name } = useParams();
   const navigate = useNavigate();
   const { data, isLoading } = useQuery(listStages.useQuery({ project: name }));
   const graphRef = React.useRef<IGraph | undefined>();
+  const client = useQueryClient();
+
+  const isVisible = useDocumentEvent(
+    'visibilitychange',
+    () => document.visibilityState === 'visible'
+  );
+
+  React.useEffect(() => {
+    if (!data || !isVisible) {
+      return;
+    }
+
+    const cancel = new AbortController();
+
+    const transport = createConnectTransport({ baseUrl: '' });
+    const promiseClient = createPromiseClient(KargoService, transport);
+    const watchStages = async () => {
+      const stream = promiseClient.watchStage(
+        { project: 'kargo-demo', name: 'test' },
+        { signal: cancel.signal }
+      );
+
+      for await (const e of stream) {
+        const key = listStages.getQueryKey({ project: name });
+        const index = data.stages.findIndex(
+          (item) => item.metadata?.name === e.stage?.metadata?.name
+        );
+        let stages = data.stages;
+        if (e.type === 'DELETED') {
+          if (index !== -1) {
+            stages = [...stages.slice(0, index), ...data.stages.slice(index + 1)];
+          }
+        } else {
+          if (index === -1) {
+            stages = [...stages, e.stage as Stage];
+          } else {
+            stages = [
+              ...data.stages.slice(0, index),
+              e.stage as Stage,
+              ...data.stages.slice(index + 1)
+            ];
+          }
+        }
+        client.setQueryData(key, { stages });
+      }
+    };
+    watchStages();
+
+    return cancel.abort;
+  }, [isLoading, isVisible]);
 
   const nodes = React.useMemo(
     () =>

ui/src/gen/service/v1alpha1/service_pb.ts

@@ -730,6 +730,11 @@ export class WatchStageResponse extends Message<WatchStageResponse> {
    */
   stage?: Stage;
 
+  /**
+   * @generated from field: string type = 2;
+   */
+  type = "";
+
   constructor(data?: PartialMessage<WatchStageResponse>) {
     super();
     proto3.util.initPartial(data, this);
@@ -739,6 +744,7 @@ export class WatchStageResponse extends Message<WatchStageResponse> {
   static readonly typeName = "akuity.io.kargo.service.v1alpha1.WatchStageResponse";
   static readonly fields: FieldList = proto3.util.newFieldList(() => [
     { no: 1, name: "stage", kind: "message", T: Stage },
+    { no: 2, name: "type", kind: "scalar", T: 9 /* ScalarType.STRING */ },
   ]);
 
   static fromBinary(bytes: Uint8Array, options?: Partial<BinaryReadOptions>): WatchStageResponse {

ui/src/utils/document.ts

@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react';
+
+export function useDocumentEvent<T>(event: string, callback: () => T) {
+  const [value, setValue] = useState<T>(callback());
+
+  useEffect(() => {
+    const handler = () => setValue(callback());
+    document.addEventListener(event, handler);
+    return () => document.removeEventListener(event, handler);
+  }, [event]);
+
+  return value;
+}