feat: Neo session launcher - alpha (#1953)

* add session launcher neo prototype

* add EnvVarFormList and ResourceAllocatonFormItems

* set react routes for session launcher neo

* add .cspell.json

* update ResourceAllocationFormItem, add Pre-opened port FromItem

* fix eslint

* fix: responsive layout

* fix typo

* port number select Form.Item

* add preview cards

* remove unused import

* add VFolderTable and VFolderTableFormItem

* Bump ant.d 5.9.0

* update jest snapshow for ant.d 5.9.0

* fix: PortSelectFormItem validation and sorting

* form handling in VFolderTable for alias

* feat: control vfolder alias

* Update VFolderTable columns

* resource preset with checkbox

* update resource allocator

* set preset values that exist in the resource slots

* fix eslint

* set vfolder alias name rule

* fix vfolder alias rule

* handle form values in URL query params

* restore form state from URL

* add FolderExplorer(not used yet)

* fix: initialValue of ImageEnvironmentsSelectFormItem

* fix lint

* refactor: sync form values to URL

* support search by image name

* add accelerator type and breadcrumb for redirect

* remove console.log

* set allowClear to VFolder alias Input

* fix eslint

* i18n for VFolderTableFormItem

* filename typo

* lazy load Neo session launcher

* add i18n for the folder alias validation message

* wrap a list of PortTag in the preview

* change i18n react option to keep basic html nodes

* match the style of vFolder tables

* DynamicInputNumber without units (V0)

* feat: dynamic unit Input number coponent

* initialize storybook on /react

* remove storybook example files

* add stories

* useControllableValue

* set min/max even if units are different

* set style properties for the unit Select when it has only one option

* dynamic unit number input with slider

* fix form initilaValues

* display min value without unit on slide when min is 0

* fix eslint

* handle mem&shem values as string with unit

* remove trailing zeros

* parseUnit returns lowercase unit

* refactoring and rules for ResourceAllocationFormItems

* add component key

* fix infinit rendering by `Form.useWatch`

* set mix max validator using remainings

* fix preview bug and use `useTransition` for "skip to preview"

* add reset form button

* cosmetic touch for reset button

* set minimum with of Input with Slider

* generate session config for new session

* add `hpcOptimization` items

* fix: `image` isn't changed

* improve layout of `hpcOptimization` items

* fix: style of ResourceNumber

* change session type select, add schedule time rule

* remove unused code

* cosmetic touch for hpcOptimization

* use onChange instead of onSlect

* fix vfolder mount value name

* feat: change the unit when user types `m` or `g`

* feat: start session

* update test code for `iSizeToSize` and `compareNumberWithUnits`

* add divider to separate number of session and other resources

* add: translations for new msg

---------

Co-authored-by: Jihyun Kang <[email protected]>

.cspell.json

@@ -1,15 +1,17 @@
 {
   "words": [
     "Antd",
-    "cssinjs",
     "backend.ai-webserver",
     "Backendai",
     "backendaiclient",
     "backendaioptions",
+    "cssinjs",
     "cuda",
     "Frgmt",
     "Lablup",
+    "OPENBLAS",
     "Popconfirm",
+    "preopen",
     "shmem",
     "vfolders",
     "webcomponent",

react/.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  staticDirs: ['../public'],
+};
+export default config;

react/.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;