feat(FR-2905): deployment list polish — projectV2 display, revision drawer link, drop createdUserId, strictSelection on enum filters

Author: yomybaby

react/src/components/DeploymentConfigurationSection.tsx

@@ -22,7 +22,6 @@ import {
   MoreOutlined,
   PlusOutlined,
 } from '@ant-design/icons';
-import { useToggle } from 'ahooks';
 import {
   Alert,
   App,
@@ -250,10 +249,7 @@ const DeploymentConfigurationSection: React.FC<
       scroll: false,
     },
   );
-  const [
-    settingModalOpen,
-    { setLeft: closeSettingModal, setRight: openSettingModal },
-  ] = useToggle(false);
+  const [settingModalOpen, setSettingModalOpen] = useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
 
   const [commitDeleteMutation, isInFlightDeleteMutation] =
@@ -327,13 +323,15 @@ const DeploymentConfigurationSection: React.FC<
               onChange={onRefetch}
             />
             <Space.Compact>
-              <Button
+              <BAIButton
                 icon={<EditOutlined />}
                 disabled={isDeploymentDestroying}
-                onClick={openSettingModal}
+                action={async () => {
+                  setSettingModalOpen(true);
+                }}
               >
                 {t('button.Edit')}
-              </Button>
+              </BAIButton>
               <Dropdown
                 trigger={['click']}
                 menu={{
@@ -455,7 +453,7 @@ const DeploymentConfigurationSection: React.FC<
         open={settingModalOpen}
         deploymentFrgmt={deployment}
         onRequestClose={(success) => {
-          closeSettingModal();
+          setSettingModalOpen(false);
           if (success) onRefetch();
         }}
       />

react/src/components/DeploymentList.tsx

@@ -7,10 +7,12 @@ import {
   DeploymentList_modelDeploymentConnection$data,
   DeploymentList_modelDeploymentConnection$key,
 } from '../__generated__/DeploymentList_modelDeploymentConnection.graphql';
+import type { DeploymentRevisionDetail_revision$key } from '../__generated__/DeploymentRevisionDetail_revision.graphql';
 import { DeploymentSettingModal_deployment$key } from '../__generated__/DeploymentSettingModal_deployment.graphql';
 import { useSuspendedBackendaiClient } from '../hooks';
 import BAIRadioGroup from './BAIRadioGroup';
 import DeploymentOwnerInfo from './DeploymentOwnerInfo';
+import DeploymentRevisionDetailDrawer from './DeploymentRevisionDetailDrawer';
 import DeploymentStatusTag, { DeploymentStatus } from './DeploymentStatusTag';
 import DeploymentTagChips from './DeploymentTagChips';
 import QuestionIconWithTooltip from './QuestionIconWithTooltip';
@@ -23,6 +25,7 @@ import {
   BAIId,
   BAINameActionCell,
   BAITable,
+  BAIUnmountAfterClose,
   filterOutEmpty,
   filterOutNullAndUndefined,
   isValidUUID,
@@ -151,6 +154,8 @@ const DeploymentList: React.FC<DeploymentListProps> = ({
     id: string;
     name: string;
   } | null>(null);
+  const [drawerRevisionFrgmt, setDrawerRevisionFrgmt] =
+    useState<DeploymentRevisionDetail_revision$key | null>(null);
 
   const [commitDeleteMutation, isInFlightDeleteMutation] =
     useMutation<DeploymentListDeleteMutation>(graphql`
@@ -168,14 +173,19 @@ const DeploymentList: React.FC<DeploymentListProps> = ({
         edges {
           node {
             id
-            createdUserId
             metadata {
               name
               status
               createdAt
               updatedAt
               domainName
               projectId
+              projectV2 @since(version: "26.4.3") {
+                basicInfo {
+                  name
+                }
+                id
+              }
               resourceGroupName
               ...DeploymentTagChips_metadata
             }
@@ -202,6 +212,7 @@ const DeploymentList: React.FC<DeploymentListProps> = ({
                   name
                 }
               }
+              ...DeploymentRevisionDetail_revision
             }
             ...DeploymentOwnerInfo_deployment
           }
@@ -268,13 +279,6 @@ const DeploymentList: React.FC<DeploymentListProps> = ({
             fixedOperator: 'equals' as const,
             rule: uuidRule,
           },
-          {
-            key: 'createdUserId',
-            propertyLabel: t('deployment.filter.CreatedUserId'),
-            type: 'uuid' as const,
-            fixedOperator: 'equals' as const,
-            rule: uuidRule,
-          },
           {
             key: 'createdAt',
             propertyLabel: t('deployment.filter.CreatedAt'),
@@ -349,10 +353,14 @@ const DeploymentList: React.FC<DeploymentListProps> = ({
         </BAIFlex>
       ),
       render: (_text, row) => {
-        const revisionNumber = row.currentRevision?.revisionNumber;
-        if (revisionNumber == null)
+        const revision = row.currentRevision;
+        if (revision?.revisionNumber == null)
           return <Typography.Text type="secondary">-</Typography.Text>;
-        return <Typography.Text>{`#${revisionNumber}`}</Typography.Text>;
+        return (
+          <Typography.Link
+            onClick={() => setDrawerRevisionFrgmt(revision)}
+          >{`#${revision.revisionNumber}`}</Typography.Link>
+        );
       },
     },
     {
@@ -505,28 +513,30 @@ const DeploymentList: React.FC<DeploymentListProps> = ({
     },
     isAdminMode && {
       key: 'projectId',
-      title: t('deployment.ProjectId'),
+      title: t('deployment.Project'),
       defaultHidden: true,
       sorter: true,
       render: (_text, row) => {
         const projectId = row.metadata?.projectId;
-        return projectId ? (
-          <BAIId globalId={projectId} copyable />
-        ) : (
-          <Typography.Text type="secondary">-</Typography.Text>
-        );
-      },
-    },
-    isAdminMode && {
-      key: 'createdUserId',
-      title: t('deployment.CreatedBy'),
-      defaultHidden: true,
-      render: (_text, row) => {
-        const userId = row.createdUserId;
-        return userId ? (
-          <BAIId globalId={userId} copyable />
-        ) : (
-          <Typography.Text type="secondary">-</Typography.Text>
+        if (!projectId) {
+          return <Typography.Text type="secondary">-</Typography.Text>;
+        }
+        const projectName = row.metadata?.projectV2?.basicInfo?.name;
+        if (!projectName) {
+          return <BAIId globalId={projectId} copyable />;
+        }
+        return (
+          <BAIFlex gap="xs" align="center" wrap="nowrap">
+            <Typography.Text
+              ellipsis={{ tooltip: projectName }}
+              style={{ maxWidth: 160 }}
+            >
+              {projectName}
+            </Typography.Text>
+            <Typography.Text type="secondary">
+              (<BAIId globalId={projectId} copyable type="secondary" />)
+            </Typography.Text>
+          </BAIFlex>
         );
       },
     },
@@ -628,6 +638,13 @@ const DeploymentList: React.FC<DeploymentListProps> = ({
         }}
         onCancel={() => setDeletingDeployment(null)}
       />
+      <BAIUnmountAfterClose>
+        <DeploymentRevisionDetailDrawer
+          open={!!drawerRevisionFrgmt}
+          revisionFrgmt={drawerRevisionFrgmt}
+          onClose={() => setDrawerRevisionFrgmt(null)}
+        />
+      </BAIUnmountAfterClose>
     </>
   );
 };

react/src/components/DeploymentReplicasTab.tsx

@@ -239,6 +239,7 @@ const DeploymentReplicasTab: React.FC<DeploymentReplicasTabProps> = ({
       propertyLabel: t('deployment.TrafficStatus'),
       type: 'enum' as const,
       options: trafficStatusOptions,
+      strictSelection: true,
     },
   ];
 
@@ -337,11 +338,9 @@ const DeploymentReplicasTab: React.FC<DeploymentReplicasTabProps> = ({
                 {name}
               </Typography.Link>
             ) : null}
-            <BAIFlex gap={0} align="center">
-              {'('}
-              <BAIId globalId={session.id} />
-              {')'}
-            </BAIFlex>
+            <Typography.Text type="secondary">
+              (<BAIId globalId={session.id} type="secondary" />)
+            </Typography.Text>
           </BAIFlex>
         );
       },
@@ -374,11 +373,9 @@ const DeploymentReplicasTab: React.FC<DeploymentReplicasTabProps> = ({
                 ? `#${revision.revisionNumber}`
                 : '-'}
             </Typography.Link>
-            <BAIFlex gap={0} align="center">
-              {'('}
-              <BAIId globalId={revision.id} />
-              {')'}
-            </BAIFlex>
+            <Typography.Text type="secondary">
+              (<BAIId globalId={revision.id} type="secondary" />)
+            </Typography.Text>
           </BAIFlex>
         );
       },