feat(FR-1731): implement mutation functionality for the project table (#4764)

resolves #4716 (FR-1731)

I implemented mutation features for project table. To implement these features, I moved a lot of files to backend.ai-ui project.

Please check whether all the features that were in the control panel are working properly in the WebUI

All tests pass locally, but for some unknown reason they fail in CI. I’ll look into it. For now, please ignore the tests.

**Checklist:** (if applicable)

- [ ] Documentation
- [ ] Minium required manager version
- [ ] Specific setting for review (eg., KB link, endpoint or how to setup)
- [ ] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after

Author: nowgnuesLee

packages/backend.ai-ui/package.json

@@ -161,6 +161,7 @@
     "@types/relay-test-utils": "^19.0.0",
     "@vitejs/plugin-react": "^4.7.0",
     "babel-plugin-react-compiler": "^1.0.0",
+    "babel-jest": "^30.2.0",
     "eslint": "^8.57.1",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-react": "^7.37.4",
@@ -195,7 +196,8 @@
             "jsx": "react-jsx"
           }
         }
-      ]
+      ],
+      "^.+\\.(js|jsx|ts|tsx)$": "babel-jest"
     },
     "setupFilesAfterEnv": [
       "./setupTests.ts"

packages/backend.ai-ui/setupTests.ts

@@ -2,4 +2,5 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
+import './src/__test__/matchMedia.mock';
 import '@testing-library/jest-dom';

react/src/components/BAIAlert.tsx …ackend.ai-ui/src/components/BAIAlert.tsxreact/src/components/BAIAlert.tsx renamed to packages/backend.ai-ui/src/components/BAIAlert.tsx react/src/components/BAIAlert.tsx renamed to packages/backend.ai-ui/src/components/BAIAlert.tsx

@@ -1,4 +1,4 @@
-import { useAllowedHostNames } from '../hooks/backendai';
+import { useAllowedHostNames } from '../hooks';
 import { Select, SelectProps } from 'antd';
 import _ from 'lodash';
 import React from 'react';

…rc/components/AllowedHostNamesSelect.tsx …components/BAIAllowedHostNamesSelect.tsxreact/src/components/AllowedHostNamesSelect.tsx renamed to packages/backend.ai-ui/src/components/BAIAllowedHostNamesSelect.tsx react/src/components/AllowedHostNamesSelect.tsx renamed to packages/backend.ai-ui/src/components/BAIAllowedHostNamesSelect.tsx

@@ -1,12 +1,12 @@
 // Button.stories.ts|tsx
 import DynamicUnitInputNumber, {
-  DynamicUnitInputNumberProps,
-} from './DynamicUnitInputNumber';
-import type { Meta, StoryObj } from '@storybook/react';
+  BAIDynamicUnitInputNumberProps,
+} from './BAIDynamicUnitInputNumber';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Form } from 'antd';
 
 const meta: Meta<typeof DynamicUnitInputNumber> = {
-  title: 'Input/DynamicUnitInputNumber',
+  title: 'Components/Input/DynamicUnitInputNumber',
   component: DynamicUnitInputNumber,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
@@ -21,7 +21,7 @@ type Story = StoryObj<typeof DynamicUnitInputNumber>;
 const renderWithFormItem = ({
   value,
   ...args
-}: DynamicUnitInputNumberProps) => {
+}: BAIDynamicUnitInputNumberProps) => {
   return (
     <Form
       initialValues={{

…nents/DynamicUnitInputNumber.stories.tsx …ts/BAIDynamicUnitInputNumber.stories.tsxreact/src/components/DynamicUnitInputNumber.stories.tsx renamed to packages/backend.ai-ui/src/components/BAIDynamicUnitInputNumber.stories.tsx react/src/components/DynamicUnitInputNumber.stories.tsx renamed to packages/backend.ai-ui/src/components/BAIDynamicUnitInputNumber.stories.tsx

@@ -1,11 +1,10 @@
 import { convertToBinaryUnit, parseValueWithUnit, SizeUnit } from '../helper';
-import useControllableState_deprecated from '../hooks/useControllableState';
-import { usePrevious } from 'ahooks';
+import { useControllableValue, usePrevious } from 'ahooks';
 import { InputNumber, InputNumberProps, Select, Typography } from 'antd';
 import _ from 'lodash';
 import React, { RefObject, useEffect, useRef } from 'react';
 
-export interface DynamicUnitInputNumberProps
+export interface BAIDynamicUnitInputNumberProps
   extends Omit<
     InputNumberProps,
     'step' | 'max' | 'min' | 'value' | 'onChange'
@@ -21,7 +20,7 @@ export interface DynamicUnitInputNumberProps
   ref?: RefObject<HTMLInputElement | null>;
 }
 
-const DynamicUnitInputNumber: React.FC<DynamicUnitInputNumberProps> = ({
+const BAIDynamicUnitInputNumber: React.FC<BAIDynamicUnitInputNumberProps> = ({
   dynamicSteps = [1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
   units = ['m', 'g', 't', 'p'],
   disableAutoUnit = false,
@@ -30,11 +29,12 @@ const DynamicUnitInputNumber: React.FC<DynamicUnitInputNumberProps> = ({
   roundStep,
   ...inputNumberProps
 }) => {
-  const [value, setValue] = useControllableState_deprecated<
-    string | null | undefined
-  >(inputNumberProps, {
-    defaultValue: '0g',
-  });
+  const [value, setValue] = useControllableValue<string | null | undefined>(
+    inputNumberProps,
+    {
+      defaultValue: '0g',
+    },
+  );
   const [numValue, _unitFromValue] =
     value === null || value === undefined
       ? [null, null]
@@ -221,4 +221,4 @@ const DynamicUnitInputNumber: React.FC<DynamicUnitInputNumberProps> = ({
   );
 };
 
-export default DynamicUnitInputNumber;
+export default BAIDynamicUnitInputNumber;

…rc/components/DynamicUnitInputNumber.tsx …components/BAIDynamicUnitInputNumber.tsxreact/src/components/DynamicUnitInputNumber.tsx renamed to packages/backend.ai-ui/src/components/BAIDynamicUnitInputNumber.tsx react/src/components/DynamicUnitInputNumber.tsx renamed to packages/backend.ai-ui/src/components/BAIDynamicUnitInputNumber.tsx

@@ -1,13 +1,13 @@
-// Button.stories.ts|tsx
-import DynamicUnitInputNumberWithSlider, {
-  DynamicUnitInputNumberWithSliderProps,
-} from './DynamicUnitInputNumberWithSlider';
-import type { Meta, StoryObj } from '@storybook/react';
+import {
+  BAIDynamicUnitInputNumberWithSlider,
+  BAIDynamicUnitInputNumberWithSliderProps,
+} from '.';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Form } from 'antd';
 
-const meta: Meta<typeof DynamicUnitInputNumberWithSlider> = {
-  title: 'Input/DynamicUnitInputNumberWithSlider',
-  component: DynamicUnitInputNumberWithSlider,
+const meta: Meta<typeof BAIDynamicUnitInputNumberWithSlider> = {
+  title: 'Components/Input/DynamicUnitInputNumberWithSlider',
+  component: BAIDynamicUnitInputNumberWithSlider,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
     layout: 'centered',
@@ -16,20 +16,20 @@ const meta: Meta<typeof DynamicUnitInputNumberWithSlider> = {
 
 export default meta;
 
-type Story = StoryObj<typeof DynamicUnitInputNumberWithSlider>;
+type Story = StoryObj<typeof BAIDynamicUnitInputNumberWithSlider>;
 
 const renderWithFormItem = ({
   value,
   ...args
-}: DynamicUnitInputNumberWithSliderProps) => {
+}: BAIDynamicUnitInputNumberWithSliderProps) => {
   return (
     <Form
       initialValues={{
         mem: value,
       }}
     >
       <Form.Item name="mem">
-        <DynamicUnitInputNumberWithSlider {...args} />
+        <BAIDynamicUnitInputNumberWithSlider {...args} />
       </Form.Item>
     </Form>
   );

…micUnitInputNumberWithSlider.stories.tsx …micUnitInputNumberWithSlider.stories.tsxreact/src/components/DynamicUnitInputNumberWithSlider.stories.tsx renamed to packages/backend.ai-ui/src/components/BAIDynamicUnitInputNumberWithSlider.stories.tsx react/src/components/DynamicUnitInputNumberWithSlider.stories.tsx renamed to packages/backend.ai-ui/src/components/BAIDynamicUnitInputNumberWithSlider.stories.tsx

@@ -4,26 +4,24 @@ import {
   toFixedFloorWithoutTrailingZeros,
 } from '../helper';
 import { useUpdatableState } from '../hooks';
-import useControllableState_deprecated from '../hooks/useControllableState';
-import DynamicUnitInputNumber, {
-  DynamicUnitInputNumberProps,
-} from './DynamicUnitInputNumber';
+import { BAIDynamicUnitInputNumberProps } from './BAIDynamicUnitInputNumber';
+import BAIFlex from './BAIFlex';
+import { useControllableValue } from 'ahooks';
 import { Slider, theme } from 'antd';
 import { SliderMarks } from 'antd/es/slider';
-import { BAIFlex } from 'backend.ai-ui';
 import _ from 'lodash';
 import React, { useEffect, useMemo } from 'react';
 
-export interface DynamicUnitInputNumberWithSliderProps
-  extends DynamicUnitInputNumberProps {
+export interface BAIDynamicUnitInputNumberWithSliderProps
+  extends BAIDynamicUnitInputNumberProps {
   extraMarks?: SliderMarks;
   hideSlider?: boolean;
   warn?: string;
   step?: number;
   inputMinWidth?: number;
 }
 const DynamicUnitInputNumberWithSlider: React.FC<
-  DynamicUnitInputNumberWithSliderProps
+  BAIDynamicUnitInputNumberWithSliderProps
 > = ({
   min = '0m',
   max = '32g',
@@ -34,11 +32,12 @@ const DynamicUnitInputNumberWithSlider: React.FC<
   step = 0.05,
   ...otherProps
 }) => {
-  const [value, setValue] = useControllableState_deprecated<
-    string | undefined | null
-  >(otherProps, {
-    defaultValue: '0g',
-  });
+  const [value, setValue] = useControllableValue<string | undefined | null>(
+    otherProps,
+    {
+      defaultValue: '0g',
+    },
+  );
   const { token } = theme.useToken();
   const minGiB = useMemo(() => convertToBinaryUnit(min, 'g', 2), [min]);
   const maxGiB = useMemo(() => convertToBinaryUnit(max, 'g', 2), [max]);
@@ -79,7 +78,7 @@ const DynamicUnitInputNumberWithSlider: React.FC<
         direction="column"
         align="stretch"
       >
-        <DynamicUnitInputNumber
+        <DynamicUnitInputNumberWithSlider
           {...otherProps}
           key={key}
           min={min}

…nts/DynamicUnitInputNumberWithSlider.tsx …/BAIDynamicUnitInputNumberWithSlider.tsxreact/src/components/DynamicUnitInputNumberWithSlider.tsx renamed to packages/backend.ai-ui/src/components/BAIDynamicUnitInputNumberWithSlider.tsx react/src/components/DynamicUnitInputNumberWithSlider.tsx renamed to packages/backend.ai-ui/src/components/BAIDynamicUnitInputNumberWithSlider.tsx

@@ -1,10 +1,9 @@
-import { useBaiSignedRequestWithPromise } from '../helper';
-import { useUpdatableState } from '../hooks';
-import { useSuspenseTanQuery } from '../hooks/reactQueryAlias';
-import useControllableState_deprecated from '../hooks/useControllableState';
-import TextHighlighter from './TextHighlighter';
+import { useSuspenseTanQuery } from '../helper/reactQueryAlias';
+import { useBAISignedRequestWithPromise, useUpdatableState } from '../hooks';
+import BAISelect, { BAISelectProps } from './BAISelect';
+import BAITextHighlighter from './BAITextHighlighter';
+import { useControllableValue } from 'ahooks';
 import { SelectProps } from 'antd';
-import { BAISelect, BAISelectProps } from 'backend.ai-ui';
 import _ from 'lodash';
 import React, { useEffect, useState, useTransition } from 'react';
 
@@ -21,13 +20,15 @@ interface VolumeInfo {
   sftp_scaling_groups?: string[];
 }
 
-interface ResourceGroupSelectProps extends BAISelectProps {
+interface BAIProjectResourceGroupSelectProps extends BAISelectProps {
   projectName: string;
   autoSelectDefault?: boolean;
   filter?: (projectName: string) => boolean;
 }
 
-const ResourceGroupSelect: React.FC<ResourceGroupSelectProps> = ({
+const BAIProjectResourceGroupSelect: React.FC<
+  BAIProjectResourceGroupSelectProps
+> = ({
   projectName,
   autoSelectDefault,
   filter,
@@ -36,16 +37,16 @@ const ResourceGroupSelect: React.FC<ResourceGroupSelectProps> = ({
   loading,
   ...selectProps
 }) => {
-  const baiRequestWithPromise = useBaiSignedRequestWithPromise();
+  const baiRequestWithPromise = useBAISignedRequestWithPromise();
   const [fetchKey] = useUpdatableState('first');
   const [controllableSearchValue, setControllableSearchValue] =
-    useControllableState_deprecated<string>({
+    useControllableValue<string>({
       value: searchValue,
       onChange: onSearch,
     });
 
   const [controllableValue, setControllableValueDoNotUseWithoutTransition] =
-    useControllableState_deprecated(selectProps);
+    useControllableValue(selectProps);
   const [isPendingChangeTransition, startChangeTransition] = useTransition();
 
   const [optimisticValue, setOptimisticValue] = useState();
@@ -169,9 +170,9 @@ const ResourceGroupSelect: React.FC<ResourceGroupSelectProps> = ({
       })}
       optionRender={(option) => {
         return (
-          <TextHighlighter keyword={controllableSearchValue}>
+          <BAITextHighlighter keyword={controllableSearchValue}>
             {option.data.value?.toString()}
-          </TextHighlighter>
+          </BAITextHighlighter>
         );
       }}
       {...selectProps}
@@ -181,4 +182,4 @@ const ResourceGroupSelect: React.FC<ResourceGroupSelectProps> = ({
   );
 };
 
-export default ResourceGroupSelect;
+export default BAIProjectResourceGroupSelect;

…t/src/components/ResourceGroupSelect.tsx …onents/BAIProjectResourceGroupSelect.tsxreact/src/components/ResourceGroupSelect.tsx renamed to packages/backend.ai-ui/src/components/BAIProjectResourceGroupSelect.tsx react/src/components/ResourceGroupSelect.tsx renamed to packages/backend.ai-ui/src/components/BAIProjectResourceGroupSelect.tsx

@@ -0,0 +1,45 @@
+import { theme } from 'antd';
+import _ from 'lodash';
+import React from 'react';
+
+interface BAITextHighlighterProps {
+  children?: string | null;
+  keyword?: string;
+  style?: React.CSSProperties;
+}
+
+const BAITextHighlighter: React.FC<BAITextHighlighterProps> = ({
+  children,
+  keyword,
+  style,
+}) => {
+  if (!children) return null;
+
+  if (_.isEmpty(keyword)) {
+    return <span>{children}</span>;
+  } else {
+    const { token } = theme.useToken() || '#F1A239';
+    const parts = children.split(
+      new RegExp(`(${_.escapeRegExp(keyword)})`, 'gi'),
+    );
+
+    return (
+      <span>
+        {parts.map((part, i) =>
+          part.toLowerCase() === keyword?.toLowerCase() ? (
+            <span
+              key={i}
+              style={{ backgroundColor: token.colorWarningHover, ...style }}
+            >
+              {part}
+            </span>
+          ) : (
+            part
+          ),
+        )}
+      </span>
+    );
+  }
+};
+
+export default React.memo(BAITextHighlighter);