fix: display warehouses even if no stages are subscribed to it

Signed-off-by: Remington Breeze <remington@breeze.software>
akuity · Mar 27, 2024 · 675dd05 · 675dd05
1 parent 11a956e
commit 675dd05
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 13 deletions.
diff --git a/ui/src/features/project/list/create-project-modal.tsx b/ui/src/features/project/list/create-project-modal.tsx
@@ -1,5 +1,5 @@
-import { zodResolver } from '@hookform/resolvers/zod';
 import { createConnectQueryKey, useMutation } from '@connectrpc/connect-query';
+import { zodResolver } from '@hookform/resolvers/zod';
 import { useQueryClient } from '@tanstack/react-query';
 import { Form, Input, Modal, Tabs } from 'antd';
 import type { JSONSchema4 } from 'json-schema';
@@ -44,7 +44,8 @@ export const CreateProjectModal = ({ visible, hide }: ModalComponentProps) => {
         manifest: textEncoder.encode(data.value)
       },
       {
-        onSuccess: () => queryClient.invalidateQueries({ queryKey: createConnectQueryKey(listProjects) })
+        onSuccess: () =>
+          queryClient.invalidateQueries({ queryKey: createConnectQueryKey(listProjects) })
       }
     );
   });

diff --git a/ui/src/features/project/project-details/project-details.tsx b/ui/src/features/project/project-details/project-details.tsx
@@ -57,7 +57,7 @@ import { Images } from './images';
 import { RepoNode } from './nodes/repo-node';
 import { Nodule, StageNode } from './nodes/stage-node';
 import styles from './project-details.module.less';
-import { NodeType, NodesItemType, NodesRepoType } from './types';
+import { NewWarehouseNode, NodeType, NodesItemType, NodesRepoType } from './types';
 import { UpdateFreightAliasModal } from './update-freight-alias-modal';
 
 const lineThickness = 2;
@@ -224,6 +224,10 @@ export const ProjectDetails = () => {
 
     const warehouseNodeMap = {} as { [key: string]: NodesRepoType };
 
+    (warehouseData?.warehouses || []).map((warehouse) => {
+      warehouseNodeMap[warehouse.metadata?.name || ''] = NewWarehouseNode(warehouse);
+    });
+
     const myNodes = data.stages
       .slice()
       .sort((a, b) => a.metadata?.name?.localeCompare(b.metadata?.name || '') || 0)
@@ -240,13 +244,7 @@ export const ProjectDetails = () => {
         if (warehouseName) {
           const cur = warehouseMap[warehouseName];
           if (!warehouseNodeMap[warehouseName] && cur) {
-            warehouseNodeMap[warehouseName] = {
-              data: cur?.metadata?.name || '',
-              stageNames: [stage.metadata?.name || ''],
-              warehouseName: cur?.metadata?.name || '',
-              refreshing: !!cur?.metadata?.annotations['kargo.akuity.io/refresh'],
-              type: NodeType.WAREHOUSE
-            };
+            warehouseNodeMap[warehouseName] = NewWarehouseNode(cur, [stage.metadata?.name || '']);
           } else {
             const stageNames = [
               ...(warehouseNodeMap[warehouseName]?.stageNames || []),
@@ -528,8 +526,14 @@ export const ProjectDetails = () => {
 
   if (isLoading || isLoadingFreight) return <LoadingState />;
 
-  if (!data || data.stages.length === 0) return <Empty />;
-  const stage = stageName && data.stages.find((item) => item.metadata?.name === stageName);
+  if (
+    (!data || data.stages.length === 0) &&
+    (!warehouseData || warehouseData.warehouses.length === 0)
+  ) {
+    return <Empty />;
+  }
+
+  const stage = stageName && (data?.stages || []).find((item) => item.metadata?.name === stageName);
 
   const isFaded = (stage: Stage): boolean => {
     if (!promotingStage || !confirmingPromotion) {

diff --git a/ui/src/features/project/project-details/types.ts b/ui/src/features/project/project-details/types.ts
@@ -2,7 +2,8 @@ import {
   ChartSubscription,
   GitSubscription,
   ImageSubscription,
-  Stage
+  Stage,
+  Warehouse
 } from '@ui/gen/v1alpha1/generated_pb';
 
 export enum NodeType {
@@ -46,3 +47,14 @@ export type NodesItemType =
       color: string;
     }
   | NodesRepoType;
+
+export const NewWarehouseNode = (warehouse: Warehouse, stageNames?: string[]): NodesRepoType => {
+  const name = warehouse?.metadata?.name || '';
+  return {
+    data: name,
+    stageNames: stageNames || [],
+    warehouseName: name,
+    refreshing: !!warehouse?.metadata?.annotations['kargo.akuity.io/refresh'],
+    type: NodeType.WAREHOUSE
+  };
+};