[UI] Project wizard (#3103)

* [UI] Project wizard dstackai/dstack-cloud#323

* [UI] Project wizard #323

* [UI] Project wizard #323

Cosmetics

* [UI] Project wizard #323

* [UI] Project wizard #323

* [UI] Project wizard #323

* [UI] Project wizard #323

* [UI] Project wizard #323

Captions

---------

Co-authored-by: peterschmidt85 <andrey.cheptsov@gmail.com>

Author: olgenn

frontend/package-lock.json

@@ -104,14 +104,15 @@
     "@cloudscape-design/global-styles": "^1.0.45",
     "@hookform/resolvers": "^2.9.10",
     "@reduxjs/toolkit": "^1.9.1",
+    "@types/yup": "^0.29.14",
     "ace-builds": "^1.36.3",
     "classnames": "^2.5.1",
     "css-minimizer-webpack-plugin": "^4.2.2",
     "date-fns": "^2.29.3",
     "i18next": "^24.0.2",
     "lodash": "^4.17.21",
     "openai": "^4.33.1",
-    "prismjs": "^1.29.0",
+    "prismjs": "^1.30.0",
     "rc-tooltip": "^5.2.2",
     "react": "^18.3.1",
     "react-avatar": "^5.0.3",

frontend/package.json

@@ -8,6 +8,7 @@ import { UnauthorizedLayout } from 'layouts/UnauthorizedLayout';
 import { useAppDispatch } from 'hooks';
 import { ROUTES } from 'routes';
 import { useGithubCallbackMutation } from 'services/auth';
+import { useLazyGetProjectsQuery } from 'services/project';
 
 import { AuthErrorMessage } from 'App/AuthErrorMessage';
 import { Loading } from 'App/Loading';
@@ -22,13 +23,24 @@ export const LoginByGithubCallback: React.FC = () => {
     const dispatch = useAppDispatch();
 
     const [githubCallback] = useGithubCallbackMutation();
+    const [getProjects] = useLazyGetProjectsQuery();
 
     const checkCode = () => {
         if (code) {
             githubCallback({ code })
                 .unwrap()
-                .then(({ creds: { token } }) => {
+                .then(async ({ creds: { token } }) => {
                     dispatch(setAuthData({ token }));
+
+                    if (process.env.UI_VERSION === 'sky') {
+                        const result = await getProjects().unwrap();
+
+                        if (result?.length === 0) {
+                            navigate(ROUTES.PROJECT.ADD);
+                            return;
+                        }
+                    }
+
                     navigate('/');
                 })
                 .catch(() => {

frontend/src/App/Login/LoginByGithubCallback/index.tsx

@@ -61,6 +61,7 @@ const getInitialState = (): IAppState => {
         },
 
         tutorialPanel: {
+            createProjectCompleted: false,
             billingCompleted: false,
             configureCLICompleted: false,
             discordCompleted: false,

frontend/src/App/slice.ts

@@ -32,6 +32,7 @@ export interface IAppState {
     };
 
     tutorialPanel: {
+        createProjectCompleted: boolean;
         billingCompleted: boolean;
         configureCLICompleted: boolean;
         discordCompleted: boolean;

frontend/src/App/types.ts

@@ -58,6 +58,7 @@ export const API = {
         BASE: () => `${API.BASE()}/projects`,
         LIST: () => `${API.PROJECTS.BASE()}/list`,
         CREATE: () => `${API.PROJECTS.BASE()}/create`,
+        CREATE_WIZARD: () => `${API.PROJECTS.BASE()}/create_wizard`,
         DELETE: () => `${API.PROJECTS.BASE()}/delete`,
         DETAILS: (name: IProject['project_name']) => `${API.PROJECTS.BASE()}/${name}`,
         DETAILS_INFO: (name: IProject['project_name']) => `${API.PROJECTS.DETAILS(name)}/get`,
@@ -112,6 +113,7 @@ export const API = {
     BACKENDS: {
         BASE: () => `${API.BASE()}/backends`,
         LIST_TYPES: () => `${API.BACKENDS.BASE()}/list_types`,
+        LIST_BASE_TYPES: () => `${API.BACKENDS.BASE()}/list_base_types`,
         CONFIG_VALUES: () => `${API.BACKENDS.BASE()}/config_values`,
     },
 

frontend/src/api.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Controller, FieldValues } from 'react-hook-form';
+import Cards from '@cloudscape-design/components/cards';
+import { CardsProps } from '@cloudscape-design/components/cards';
+
+import { FormCardsProps } from './types';
+
+export const FormCards = <T extends FieldValues>({
+    name,
+    control,
+    onSelectionChange: onSelectionChangeProp,
+    ...props
+}: FormCardsProps<T>) => {
+    return (
+        <Controller
+            name={name}
+            control={control}
+            render={({ field: { onChange, ...fieldRest } }) => {
+                const onSelectionChange: CardsProps['onSelectionChange'] = (event) => {
+                    onChange(event.detail.selectedItems.map(({ value }) => value));
+                    onSelectionChangeProp?.(event);
+                };
+
+                const selectedItems = props.items.filter((item) => fieldRest.value?.includes(item.value));
+
+                return (
+                    <Cards
+                        onSelectionChange={onSelectionChange}
+                        trackBy="value"
+                        {...fieldRest}
+                        {...props}
+                        selectedItems={selectedItems}
+                    />
+                );
+            }}
+        />
+    );
+};

frontend/src/components/form/Cards/index.tsx

@@ -0,0 +1,7 @@
+import { Control, FieldValues, Path } from 'react-hook-form';
+import { CardsProps } from '@cloudscape-design/components/cards';
+
+export type FormCardsProps<T extends FieldValues> = CardsProps & {
+    control: Control<T, object>;
+    name: Path<T>;
+};

frontend/src/components/form/Cards/types.ts

@@ -61,7 +61,9 @@ export type { LineChartProps } from '@cloudscape-design/components/line-chart/in
 export type { ModalProps } from '@cloudscape-design/components/modal';
 export { default as AnchorNavigation } from '@cloudscape-design/components/anchor-navigation';
 export { default as ExpandableSection } from '@cloudscape-design/components/expandable-section';
+export { default as KeyValuePairs } from '@cloudscape-design/components/key-value-pairs';
 export { I18nProvider } from '@cloudscape-design/components/i18n';
+export { default as Wizard } from '@cloudscape-design/components/wizard';
 
 // custom components
 export { NavigateLink } from './NavigateLink';
@@ -80,6 +82,8 @@ export type { FormMultiselectOptions, FormMultiselectProps } from './form/Multis
 export { FormS3BucketSelector } from './form/S3BucketSelector';
 export type { FormTilesProps } from './form/Tiles/types';
 export { FormTiles } from './form/Tiles';
+export type { FormCardsProps } from './form/Cards/types';
+export { FormCards } from './form/Cards';
 export { Notifications } from './Notifications';
 export { ConfirmationDialog } from './ConfirmationDialog';
 export { FileUploader } from './FileUploader';

frontend/src/components/index.ts

@@ -19,7 +19,8 @@ const container = document.getElementById('root');
 
 const theme: Theme = {
     tokens: {
-        fontFamilyBase: 'metro-web, Metro, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif',
+        fontFamilyBase:
+            'metro-web, Metro, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif',
         fontSizeHeadingS: '15px',
         fontSizeHeadingL: '19px',
         fontSizeHeadingXl: '22px',