feat(FR-26): show error state on ProjectSelect when no accessible projects

When the current user has no accessible projects in the current domain, the project selector now indicates this with an error-colored border and an InfoCircleOutlined suffix icon. Hovering the icon shows a tooltip explaining the state.

The guard suppresses the error look while the underlying select is `disabled` or `loading`, so the existing 'please select a domain first' warning in UpdateUsersModal and the project-switching spinner in the header keep their original UX.

Author: ironAiken2

packages/backend.ai-ui/src/components/BAISelect.tsx

@@ -43,6 +43,24 @@ const useStyles = createStyles(({ css, token }) => ({
         color: ${token.colorBgBase};
       }
     }
+
+    /* In ghost mode the border-color is hard-overridden with !important,
+       which would otherwise swallow antd's status="error" red border.
+       Restore the error treatment with a higher-specificity rule so a
+       ghost select (e.g. the header ProjectSelect) can still surface an
+       error state. */
+    &.ant-select.ant-select-status-error {
+      border-color: ${token.colorError} !important;
+
+      .ant-select-suffix {
+        color: ${token.colorError};
+      }
+
+      &:hover .ant-select-suffix,
+      &:active .ant-select-suffix {
+        color: ${token.colorError};
+      }
+    }
   `,
   customStyle: css`
     /* Hide selected value content (except search input) when the user is typing a search query.

react/src/components/ProjectSelect.tsx

@@ -7,6 +7,7 @@ import { useSuspendedBackendaiClient } from '../hooks';
 import { useCurrentUserInfo, useCurrentUserRole } from '../hooks/backendai';
 import useControllableState_deprecated from '../hooks/useControllableState';
 import { useCurrentUserProjectRoles } from '../hooks/useCurrentUserProjectRoles';
+import { InfoCircleOutlined } from '@ant-design/icons';
 import { theme, Tooltip } from 'antd';
 import { BAIFlex, BAISelect, BAISelectProps } from 'backend.ai-ui';
 import * as _ from 'lodash-es';
@@ -153,6 +154,13 @@ const ProjectSelect: React.FC<ProjectSelectProps> = ({
     },
   );
 
+  const showNoProjectError =
+    !accessibleProjects?.length &&
+    !selectProps.disabled &&
+    !selectProps.loading;
+
+  const noAccessibleProjectsMessage = t('projectSelect.NoAccessibleProjects');
+
   return (
     <BAISelect
       onChange={(value, option) => {
@@ -169,6 +177,24 @@ const ProjectSelect: React.FC<ProjectSelectProps> = ({
       options={
         _.size(groupOptions) > 1 ? groupOptions : groupOptions[0]?.options
       }
+      status={showNoProjectError ? 'error' : selectProps.status}
+      // Surface the empty-state reason on the focusable control itself,
+      // not only on the non-focusable suffix icon. `tooltip` wraps the
+      // whole BAISelect in an antd Tooltip (hover over the entire control,
+      // not just the tiny icon), and `aria-label` gives keyboard /
+      // screen-reader users a persistent accessible description that does
+      // not depend on the tooltip being open.
+      tooltip={
+        showNoProjectError ? noAccessibleProjectsMessage : selectProps.tooltip
+      }
+      aria-label={
+        showNoProjectError
+          ? noAccessibleProjectsMessage
+          : selectProps['aria-label']
+      }
+      suffixIcon={
+        showNoProjectError ? <InfoCircleOutlined /> : selectProps.suffixIcon
+      }
     />
   );
 };

resources/i18n/de.json

@@ -2113,6 +2113,7 @@
     "RoleMember": "Mitglied"
   },
   "projectSelect": {
+    "NoAccessibleProjects": "Keine zugänglichen Projekte.",
     "ProjectAdminBadge": "Projektadministrator"
   },
   "prometheusQueryPreset": {

resources/i18n/el.json

@@ -2111,6 +2111,7 @@
     "RoleMember": "Μέλος"
   },
   "projectSelect": {
+    "NoAccessibleProjects": "Δεν υπάρχουν προσβάσιμα έργα.",
     "ProjectAdminBadge": "Διαχειριστής έργου"
   },
   "prometheusQueryPreset": {

resources/i18n/en.json

@@ -2130,6 +2130,7 @@
     "RoleMember": "Member"
   },
   "projectSelect": {
+    "NoAccessibleProjects": "No accessible projects.",
     "ProjectAdminBadge": "Project Admin"
   },
   "prometheusQueryPreset": {

resources/i18n/es.json

@@ -2111,6 +2111,7 @@
     "RoleMember": "Miembro"
   },
   "projectSelect": {
+    "NoAccessibleProjects": "No hay proyectos accesibles.",
     "ProjectAdminBadge": "Administrador del proyecto"
   },
   "prometheusQueryPreset": {

resources/i18n/fi.json

@@ -2111,6 +2111,7 @@
     "RoleMember": "Jäsen"
   },
   "projectSelect": {
+    "NoAccessibleProjects": "Ei saatavilla olevia projekteja.",
     "ProjectAdminBadge": "Projektin ylläpitäjä"
   },
   "prometheusQueryPreset": {

resources/i18n/fr.json

@@ -2113,6 +2113,7 @@
     "RoleMember": "Membre"
   },
   "projectSelect": {
+    "NoAccessibleProjects": "Aucun projet accessible.",
     "ProjectAdminBadge": "Administrateur de projet"
   },
   "prometheusQueryPreset": {

resources/i18n/id.json

@@ -2114,6 +2114,7 @@
     "RoleMember": "Anggota"
   },
   "projectSelect": {
+    "NoAccessibleProjects": "Tidak ada proyek yang dapat diakses.",
     "ProjectAdminBadge": "Admin Proyek"
   },
   "prometheusQueryPreset": {

resources/i18n/it.json

@@ -2111,6 +2111,7 @@
     "RoleMember": "Membro"
   },
   "projectSelect": {
+    "NoAccessibleProjects": "Nessun progetto accessibile.",
     "ProjectAdminBadge": "Amministratore del progetto"
   },
   "prometheusQueryPreset": {