[UI] Project wizard #323

Author: olgenn

frontend/src/api.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/components/form/Cards/index.tsx

@@ -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/types.ts

@@ -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/index.ts

@@ -61,6 +61,7 @@ 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';
 
@@ -81,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/pages/Project/CreateWizard/constants.ts

@@ -1,22 +1,13 @@
-import { FormMultiselectOptions } from 'components';
-
-export const backendOptions: FormMultiselectOptions = [
-    { label: 'aws', value: 'aws' },
-    { label: 'azure', value: 'azure' },
-    { label: 'cudo', value: 'cudo' },
-    { label: 'datacrunch', value: 'datacrunch' },
-    { label: 'dstack', value: 'dstack' },
-    { label: 'gcp', value: 'gcp' },
-    { label: 'kubernetes', value: 'kubernetes' },
-    { label: 'lambda', value: 'lambda' },
-    { label: 'local', value: 'local' },
-    { label: 'nebius', value: 'nebius' },
-    { label: 'remote', value: 'remote' },
-    { label: 'oci', value: 'oci' },
-    { label: 'runpod', value: 'runpod' },
-    { label: 'tensordock', value: 'tensordock' },
-    { label: 'vastai', value: 'vastai' },
-    { label: 'cloudrift', value: 'cloudrift' },
-    { label: 'hotaisle', value: 'hotaisle' },
-    { label: 'vultr', value: 'vultr' },
+export const projectTypeOptions = [
+    {
+        label: 'GPU marketplace',
+        description:
+            'Find the cheapest GPUs available in our marketplace. Enjoy $5 in free credits, and easily top up your balance with a credit card.',
+        value: 'gpu_marketplace',
+    },
+    {
+        label: 'Your cloud accounts',
+        description: 'Connect and manage your cloud accounts. dstack supports all major GPU cloud providers.',
+        value: 'own_cloud',
+    },
 ];