Merge branch 'main' into 25.13

Author: yomybaby

packages/backend.ai-ui/package.json

@@ -75,12 +75,12 @@
   "devDependencies": {
     "@jest/expect": "30.0.0-beta.3",
     "@jest/globals": "30.0.0-beta.3",
-    "@storybook/addon-docs": "^9.0.0",
-    "@storybook/addon-essentials": "^8.4.5",
-    "@storybook/addon-interactions": "^8.4.5",
-    "@storybook/addon-links": "^8.4.5",
-    "@storybook/addon-onboarding": "^9.0.0",
-    "@storybook/react-vite": "^9.0.0",
+    "@storybook/addon-docs": "^9.1.1",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/addon-links": "^9.1.1",
+    "@storybook/addon-onboarding": "^9.1.1",
+    "@storybook/react-vite": "^9.1.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@types/big.js": "^6.2.2",
@@ -89,26 +89,28 @@
     "@types/react-dom": "^19.0.3",
     "@types/react-relay": "^18.2.1",
     "@types/react-resizable": "^3.0.8",
+    "@types/relay-test-utils": "^19.0.0",
     "@vitejs/plugin-react": "^4.5.0",
     "ahooks": "^3.8.4",
     "dayjs": "^1.11.13",
     "eslint": "^8.57.1",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-storybook": "^9.0.0",
+    "eslint-plugin-storybook": "^9.1.1",
     "fast-glob": "^3.3.3",
     "graphql": "^16.10.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "storybook": "^9.0.0",
+    "storybook": "^9.1.1",
     "ts-jest": "^29.2.5",
     "tus-js-client": "^4.1.0",
     "typescript": "^5.7.2",
     "vite": "^6.3.5",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-relay-lite": "^0.11.0",
-    "vite-plugin-svgr": "^4.3.0"
+    "vite-plugin-svgr": "^4.3.0",
+    "relay-test-utils": "^20.1.1"
   },
   "type": "module",
   "jest": {

packages/backend.ai-ui/src/components/fragments/BAISessionTypeTag.stories.tsx

@@ -0,0 +1,81 @@
+import { BAISessionTypeTagStoriesQuery } from '../../__generated__/BAISessionTypeTagStoriesQuery.graphql';
+import RelayResolver from '../../tests/RelayResolver';
+import BAISessionTypeTag from './BAISessionTypeTag';
+import { Meta, StoryObj } from '@storybook/react-vite/*';
+import { graphql, useLazyLoadQuery } from 'react-relay';
+
+type Story = StoryObj<typeof BAISessionTypeTag>;
+
+const meta: Meta<typeof BAISessionTypeTag> = {
+  title: 'Fragments/BAISessionTypeTag',
+  component: BAISessionTypeTag,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+const QueryResolver = () => {
+  const { compute_session_node } =
+    useLazyLoadQuery<BAISessionTypeTagStoriesQuery>(
+      graphql`
+        query BAISessionTypeTagStoriesQuery {
+          compute_session_node(id: "test-id") {
+            ...BAISessionTypeTagFragment
+          }
+        }
+      `,
+      {},
+    );
+  return (
+    compute_session_node && (
+      <BAISessionTypeTag sessionFrgmt={compute_session_node} />
+    )
+  );
+};
+
+export const Default: Story = {
+  name: 'INTERACTIVE',
+  render: () => {
+    return (
+      <RelayResolver
+        mockResolvers={{
+          ComputeSessionNode: () => ({ type: 'INTERACTIVE' }),
+        }}
+      >
+        <QueryResolver />
+      </RelayResolver>
+    );
+  },
+};
+
+export const Batch: Story = {
+  name: 'BATCH',
+  render: () => {
+    return (
+      <RelayResolver
+        mockResolvers={{
+          ComputeSessionNode: () => ({ type: 'BATCH' }),
+        }}
+      >
+        <QueryResolver />
+      </RelayResolver>
+    );
+  },
+};
+
+export const Inference: Story = {
+  name: 'INFERENCE',
+  render: () => {
+    return (
+      <RelayResolver
+        mockResolvers={{
+          ComputeSessionNode: () => ({ type: 'INFERENCE' }),
+        }}
+      >
+        <QueryResolver />
+      </RelayResolver>
+    );
+  },
+};
+
+export default meta;

packages/backend.ai-ui/src/components/index.ts

@@ -5,8 +5,6 @@ export type { BAICardProps } from './BAICard';
 export { default as BAIResourceWithSteppedProgress } from './BAIResourceWithSteppedProgress';
 export type { BAIResourceWithSteppedProgressProps } from './BAIResourceWithSteppedProgress';
 export * from './Table';
-
 export * from './fragments';
-export * from './tests';
 export * from './provider';
 export * from './unsafe';

packages/backend.ai-ui/src/components/provider/BAIClientProvider/hooks/useConnectedBAIClient.ts

@@ -3,17 +3,12 @@ import { BAIClient } from '../types';
 import { use, useContext } from 'react';
 
 const useConnectedBAIClient = (): BAIClient => {
-  try {
-    const baiClientPromise = useContext(BAIClientContext);
-    if (!baiClientPromise) {
-      throw new Error('useBAIClient must be used within a BAIClientProvider');
-    }
-    const baiClient = use(baiClientPromise);
-    return baiClient;
-  } catch (error) {
-    console.error('Error using BAI Client:', error);
-    throw error;
+  const baiClientPromise = useContext(BAIClientContext);
+  if (!baiClientPromise) {
+    throw new Error('useBAIClient must be used within a BAIClientProvider');
   }
+  const baiClient = use(baiClientPromise);
+  return baiClient;
 };
 
 export default useConnectedBAIClient;

packages/backend.ai-ui/src/index.ts

@@ -4,3 +4,4 @@ export * from './components';
 export * from './helper';
 export * from './hooks';
 export * from './icons';
+export * from './tests';

…i/src/components/tests/BAITestButton.tsx …ackend.ai-ui/src/tests/BAITestButton.tsxpackages/backend.ai-ui/src/components/tests/BAITestButton.tsx renamed to packages/backend.ai-ui/src/tests/BAITestButton.tsx packages/backend.ai-ui/src/components/tests/BAITestButton.tsx renamed to packages/backend.ai-ui/src/tests/BAITestButton.tsx

@@ -0,0 +1,30 @@
+import { Suspense } from 'react';
+import { RelayEnvironmentProvider } from 'react-relay';
+import {
+  createMockEnvironment,
+  MockPayloadGenerator,
+  MockResolvers,
+} from 'relay-test-utils';
+
+export interface RelayResolverProps {
+  children?: React.ReactNode;
+  mockResolvers?: MockResolvers;
+}
+
+const RelayResolver = ({
+  children,
+  mockResolvers = {},
+}: RelayResolverProps) => {
+  const environment = createMockEnvironment();
+  environment.mock.queueOperationResolver((operation) =>
+    MockPayloadGenerator.generate(operation, mockResolvers),
+  );
+
+  return (
+    <RelayEnvironmentProvider environment={environment}>
+      <Suspense fallback="Loading...">{children}</Suspense>
+    </RelayEnvironmentProvider>
+  );
+};
+
+export default RelayResolver;