fix: use SemanticColor type for status color maps in DeploymentStatusTag and ReplicaStatusTag

Author: agatha197

react/src/components/DeploymentOwnerInfo.tsx

@@ -0,0 +1,85 @@
+/**
+ @license
+ Copyright (c) 2015-2026 Lablup Inc. All rights reserved.
+ */
+import { DeploymentOwnerInfo_deployment$key } from '../__generated__/DeploymentOwnerInfo_deployment.graphql';
+import { UserOutlined } from '@ant-design/icons';
+import { Avatar, Tooltip, Typography, theme } from 'antd';
+import { BAIFlex } from 'backend.ai-ui';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { graphql, useFragment } from 'react-relay';
+
+interface DeploymentOwnerInfoProps {
+  deploymentFrgmt: DeploymentOwnerInfo_deployment$key | null | undefined;
+}
+
+const DeploymentOwnerInfo: React.FC<DeploymentOwnerInfoProps> = ({
+  deploymentFrgmt,
+}) => {
+  'use memo';
+  const { t } = useTranslation();
+  const { token } = theme.useToken();
+
+  const deployment = useFragment(
+    graphql`
+      fragment DeploymentOwnerInfo_deployment on ModelDeployment {
+        id
+        creator @since(version: "26.4.3") {
+          id
+          basicInfo {
+            email
+            username
+            fullName
+          }
+        }
+      }
+    `,
+    deploymentFrgmt,
+  );
+
+  const email = deployment?.creator?.basicInfo?.email ?? '';
+  const fullName = deployment?.creator?.basicInfo?.fullName ?? '';
+  const username = deployment?.creator?.basicInfo?.username ?? '';
+
+  if (!email) {
+    return <Typography.Text type="secondary">-</Typography.Text>;
+  }
+
+  const initial = (fullName || username || email)
+    .trim()
+    .charAt(0)
+    .toUpperCase();
+  const tooltipLines = [
+    t('deployment.CreatedBy'),
+    fullName || username || email,
+    email,
+  ]
+    .filter(Boolean)
+    .join('\n');
+
+  return (
+    <BAIFlex gap="xs" align="center">
+      <Tooltip
+        title={<span style={{ whiteSpace: 'pre-line' }}>{tooltipLines}</span>}
+      >
+        <Avatar
+          size="small"
+          style={{
+            backgroundColor: token.colorFillSecondary,
+            color: token.colorText,
+            flexShrink: 0,
+          }}
+          icon={!initial ? <UserOutlined /> : undefined}
+        >
+          {initial || null}
+        </Avatar>
+      </Tooltip>
+      <Typography.Text ellipsis={{ tooltip: email }} style={{ maxWidth: 200 }}>
+        {email}
+      </Typography.Text>
+    </BAIFlex>
+  );
+};
+
+export default DeploymentOwnerInfo;

react/src/components/DeploymentStatusTag.tsx

@@ -2,8 +2,8 @@
  @license
  Copyright (c) 2015-2026 Lablup Inc. All rights reserved.
  */
-import { BadgeProps } from 'antd';
-import { BAIBadge, SemanticColor } from 'backend.ai-ui';
+import type { TagProps } from 'antd';
+import { BAITag, type SemanticColor } from 'backend.ai-ui';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -21,14 +21,14 @@ export type DeploymentStatus =
   | 'READY';
 
 /**
- * Maps each deployment status to a semantic color.
+ * Maps each deployment status to a Tag color.
  *
- * - success: HEALTHY, READY — the deployment is fully operational.
- * - info: DEPLOYING, SCALING, PENDING — transient, in-flight states.
- * - warning: DEGRADED, UNHEALTHY, STOPPING — user attention needed or transitioning away.
- * - default: NOT_CHECKED, STOPPED, TERMINATED — neutral / inactive / pre-check states.
+ * - success:    HEALTHY, READY — fully operational.
+ * - processing: DEPLOYING, SCALING, PENDING — transient, in-flight states.
+ * - warning:    DEGRADED, UNHEALTHY, STOPPING — attention needed or transitioning away.
+ * - default:    NOT_CHECKED, STOPPED, TERMINATED — neutral / inactive.
  */
-const deploymentStatusSemanticMap: Record<DeploymentStatus, SemanticColor> = {
+const deploymentStatusColorMap: Record<DeploymentStatus, SemanticColor> = {
   HEALTHY: 'success',
   READY: 'success',
   DEPLOYING: 'info',
@@ -42,15 +42,6 @@ const deploymentStatusSemanticMap: Record<DeploymentStatus, SemanticColor> = {
   TERMINATED: 'default',
 };
 
-/**
- * In-flight statuses that should render with the processing ripple animation.
- */
-const processingStatuses: ReadonlySet<DeploymentStatus> =
-  new Set<DeploymentStatus>(['DEPLOYING', 'SCALING', 'STOPPING']);
-
-/**
- * Maps each deployment status to its i18n translation key under `deployment.status.*`.
- */
 const deploymentStatusI18nMap: Record<DeploymentStatus, string> = {
   HEALTHY: 'deployment.status.Healthy',
   UNHEALTHY: 'deployment.status.Unhealthy',
@@ -65,10 +56,7 @@ const deploymentStatusI18nMap: Record<DeploymentStatus, string> = {
   READY: 'deployment.status.Ready',
 };
 
-export interface DeploymentStatusTagProps extends Omit<
-  BadgeProps,
-  'color' | 'status' | 'styles' | 'text'
-> {
+export interface DeploymentStatusTagProps extends Omit<TagProps, 'color'> {
   /**
    * The deployment-level status to display. Consolidates lifecycle (e.g.
    * `DEPLOYING`, `STOPPED`, `TERMINATED`) and health (e.g. `HEALTHY`,
@@ -78,26 +66,20 @@ export interface DeploymentStatusTagProps extends Omit<
 }
 
 /**
- * DeploymentStatusTag — consolidated lifecycle + health status badge for a
+ * DeploymentStatusTag — consolidated lifecycle + health status tag for a
  * deployment. Used in list rows and detail page headers.
- *
- * In-flight states (`DEPLOYING`, `SCALING`, `STOPPING`) automatically render
- * with a processing ripple animation.
  */
 const DeploymentStatusTag: React.FC<DeploymentStatusTagProps> = ({
   status,
-  ...badgeProps
+  ...tagProps
 }) => {
   'use memo';
   const { t } = useTranslation();
 
   return (
-    <BAIBadge
-      {...badgeProps}
-      color={deploymentStatusSemanticMap[status]}
-      processing={processingStatuses.has(status)}
-      text={t(deploymentStatusI18nMap[status])}
-    />
+    <BAITag {...tagProps} color={deploymentStatusColorMap[status]}>
+      {t(deploymentStatusI18nMap[status])}
+    </BAITag>
   );
 };
 

react/src/components/ReplicaStatusTag.tsx

@@ -2,8 +2,9 @@
  @license
  Copyright (c) 2015-2026 Lablup Inc. All rights reserved.
  */
-import { BadgeProps, Tooltip } from 'antd';
-import { BAIBadge, SemanticColor } from 'backend.ai-ui';
+import { Tooltip } from 'antd';
+import type { TagProps } from 'antd';
+import { BAITag, type SemanticColor } from 'backend.ai-ui';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -16,55 +17,30 @@ export type ReplicaStatus =
   | 'TERMINATING'
   | 'TERMINATED';
 
-export interface ReplicaStatusTagProps extends Omit<
-  BadgeProps,
-  'color' | 'status'
-> {
+export interface ReplicaStatusTagProps extends Omit<TagProps, 'color'> {
   /**
    * Replica health/lifecycle state.
    * Health states: `HEALTHY`, `UNHEALTHY`, `DEGRADED`, `NOT_CHECKED`.
    * Lifecycle states: `PROVISIONING`, `TERMINATING`, `TERMINATED`.
    */
   status: ReplicaStatus;
   /**
-   * When true, wraps the badge in a tooltip explaining the state.
+   * When true, wraps the tag in a tooltip explaining the state.
    * @default true
    */
   showTooltip?: boolean;
 }
 
-/**
- * Maps each replica status to a semantic color from the BAI design system.
- * `NOT_CHECKED` intentionally maps to `undefined` so `BAIBadge` renders an
- * outline-only (border) dot, matching the "unknown/indeterminate" convention.
- */
-const replicaStatusSemanticMap: Record<
-  ReplicaStatus,
-  SemanticColor | undefined
-> = {
+const replicaStatusColorMap: Record<ReplicaStatus, SemanticColor> = {
   HEALTHY: 'success',
   UNHEALTHY: 'error',
   DEGRADED: 'warning',
-  NOT_CHECKED: undefined,
+  NOT_CHECKED: 'default',
   PROVISIONING: 'info',
   TERMINATING: 'warning',
   TERMINATED: 'default',
 };
 
-/**
- * Statuses that should render with a ripple/processing animation on the dot
- * to convey an in-progress lifecycle transition.
- */
-const processingStatuses: ReadonlySet<ReplicaStatus> = new Set([
-  'PROVISIONING',
-  'TERMINATING',
-]);
-
-/**
- * i18n key suffix (PascalCase) for each replica status. Matches the keys
- * registered under `replicaStatus.*` and `replicaStatus.tooltip.*` in
- * `resources/i18n/en.json` (see FR-2666).
- */
 const replicaStatusI18nKey: Record<ReplicaStatus, string> = {
   HEALTHY: 'Healthy',
   UNHEALTHY: 'Unhealthy',
@@ -75,46 +51,34 @@ const replicaStatusI18nKey: Record<ReplicaStatus, string> = {
   TERMINATED: 'Terminated',
 };
 
-/**
- * ReplicaStatusTag - Displays the health/lifecycle state of a deployment replica.
- *
- * Renders a `BAIBadge` whose dot color and processing animation map to the
- * new replica health state machine used by the Endpoint Deployment UI
- * (FR-1368 / FR-2658). When `showTooltip` is true (default), the badge is
- * wrapped in a `Tooltip` that explains the state to the user.
- */
 const ReplicaStatusTag: React.FC<ReplicaStatusTagProps> = ({
   status,
   showTooltip = true,
-  ...badgeProps
+  ...tagProps
 }) => {
   'use memo';
   const { t } = useTranslation();
 
-  const color = replicaStatusSemanticMap[status];
-  const processing = processingStatuses.has(status);
+  const color = replicaStatusColorMap[status];
   const i18nKey = replicaStatusI18nKey[status];
   const label = t(`replicaStatus.${i18nKey}`);
   const tooltipTitle = showTooltip
     ? t(`replicaStatus.tooltip.${i18nKey}`, { defaultValue: '' })
     : undefined;
 
-  const badge = (
-    <BAIBadge
-      {...badgeProps}
-      color={color}
-      processing={processing}
-      text={label}
-    />
+  const tag = (
+    <BAITag {...tagProps} color={color}>
+      {label}
+    </BAITag>
   );
 
   if (!showTooltip || !tooltipTitle) {
-    return badge;
+    return tag;
   }
 
   return (
     <Tooltip title={tooltipTitle}>
-      <span>{badge}</span>
+      <span>{tag}</span>
     </Tooltip>
   );
 };