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

Author: olgenn

frontend/package-lock.json

@@ -103,14 +103,15 @@
     "@cloudscape-design/global-styles": "^1.0.33",
     "@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

@@ -56,6 +56,7 @@ export { default as PropertyFilter } from '@cloudscape-design/components/propert
 export type { PropertyFilterProps } from '@cloudscape-design/components/property-filter';
 export type { LineChartProps } from '@cloudscape-design/components/line-chart/interfaces';
 export type { ModalProps } from '@cloudscape-design/components/modal';
+export { default as Wizard } from '@cloudscape-design/components/wizard';
 
 // custom components
 export { NavigateLink } from './NavigateLink';

frontend/src/components/index.ts

@@ -10,6 +10,8 @@
     "delete": "Delete",
     "remove": "Remove",
     "apply": "Apply",
+    "next": "Next",
+    "previous": "Previous",
     "settings": "Settings",
     "match_count_with_value_one": "{{count}} match",
     "match_count_with_value_other": "{{count}} matches",
@@ -187,11 +189,26 @@
       "backend": "Backend",
       "settings": "Settings"
     },
+    "wizard": {
+      "submit": "Create project"
+    },
     "edit": {
       "general": "General",
       "project_name": "Project name",
       "owner": "Owner",
       "project_name_description": "Only latin characters, dashes, underscores, and digits",
+      "project_type": "Project type",
+      "project_type_description": "You can choose one of project types",
+      "backends": "Backends",
+      "backends_description": "You can choose one or more of backend types",
+      "default_fleet": "Create default fleet",
+      "default_fleet_description": "You can create default fleet for project",
+      "fleet_name": "Fleet name",
+      "fleet_name_description": "Only latin characters, dashes, underscores, and digits",
+      "fleet_min_instances": "Min number of instances",
+      "fleet_min_instances_description": "Only digits",
+      "fleet_max_instances": "Max number of instances",
+      "fleet_max_instances_description": "Only digits",
       "is_public": "Make project public",
       "is_public_description": "Public projects can be accessed by any user without being a member",
       "backend": "Backend",

frontend/src/locale/en.json

@@ -0,0 +1,22 @@
+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' },
+];