Run wizzard (#3191)

* [UI] Create prototype for creating runs

* [UI] Create prototype for creating runs

* [UI] Create prototype for creating runs

* [UI] Run wizard parsing yaml

* [UI] Run wizard parsing yaml

* [UI] Run wizard parsing yaml

* [UI] Minor edits

---------

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

Author: olgenn

frontend/package-lock.json

@@ -40,6 +40,7 @@
     "@types/date-fns": "^2.6.0",
     "@types/enzyme": "^3.10.18",
     "@types/jest": "^29.5.14",
+    "@types/js-yaml": "^4.0.9",
     "@types/lodash": "^4.17.13",
     "@types/node": "^22.10.1",
     "@types/react": "^18.3.12",
@@ -110,6 +111,7 @@
     "css-minimizer-webpack-plugin": "^4.2.2",
     "date-fns": "^2.29.3",
     "i18next": "^24.0.2",
+    "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
     "openai": "^4.33.1",
     "prismjs": "^1.30.0",

frontend/package.json

@@ -79,6 +79,7 @@ export const API = {
         RUNS_DELETE: (projectName: IProject['project_name']) => `${API.PROJECTS.RUNS(projectName)}/delete`,
         RUNS_STOP: (projectName: IProject['project_name']) => `${API.PROJECTS.RUNS(projectName)}/stop`,
         RUNS_SUBMIT: (projectName: IProject['project_name']) => `${API.PROJECTS.RUNS(projectName)}/submit`,
+        RUNS_APPLY: (projectName: IProject['project_name']) => `${API.PROJECTS.RUNS(projectName)}/apply`,
 
         // Logs
         LOGS: (projectName: IProject['project_name']) => `${API.BASE()}/project/${projectName}/logs/poll`,

frontend/src/api.ts

@@ -1,6 +1,7 @@
 export { default as Alert } from '@cloudscape-design/components/alert';
 export type { AlertProps } from '@cloudscape-design/components/alert';
 export { default as Icon } from '@cloudscape-design/components/icon';
+export { default as ButtonDropdown } from '@cloudscape-design/components/button-dropdown';
 export type { ButtonDropdownProps } from '@cloudscape-design/components/button-dropdown';
 export { default as AppLayout } from '@cloudscape-design/components/app-layout';
 export type { AppLayoutProps } from '@cloudscape-design/components/app-layout';

frontend/src/components/index.ts

@@ -51,7 +51,8 @@
     "control_plane": "Control plane",
     "refresh": "Refresh",
     "quickstart": "Quickstart",
-    "ask_ai": "Ask AI"
+    "ask_ai": "Ask AI",
+    "new": "New"
   },
 
   "auth": {
@@ -465,6 +466,24 @@
       "size": "Size"
     }
   },
+  "runs": {
+    "dev_env": {
+      "wizard": {
+        "title": "New dev environment",
+        "submit": "Apply",
+        "offer": "Offer",
+        "offer_description": "Select an offer for the dev environment.",
+        "name": "Name",
+        "name_description": "The name of the run. If not specified, the name will be generated automatically.",
+        "name_placeholder": "Optional",
+        "ide": "IDE",
+        "ide_description": "Select which IDE would you like to use with the dev environment.",
+        "config": "Configuration file",
+        "config_description": "Review the configuration file and adjust it if needed. Click Info for examples.",
+        "success_notification": "The run is submitted!"
+      }
+    }
+  },
   "offer": {
     "title": "Offers",
     "filter_property_placeholder": "Filter by properties",

frontend/src/locale/en.json

@@ -16,6 +16,7 @@ import { getPropertyFilterOptions } from '../helpers';
 
 type Args = {
     gpus: IGpu[];
+    withSearchParams?: boolean;
 };
 
 type RequestParamsKeys = 'project_name' | 'gpu_name' | 'gpu_count' | 'gpu_memory' | 'backend' | 'spot_policy' | 'group_by';
@@ -52,7 +53,7 @@ const defaultGroupByOptions = [{ ...gpuFilterOption }, { label: 'Backend', value
 
 const groupByRequestParamName: RequestParamsKeys = 'group_by';
 
-export const useFilters = ({ gpus }: Args) => {
+export const useFilters = ({ gpus, withSearchParams = true }: Args) => {
     const [searchParams, setSearchParams] = useSearchParams();
     const { projectOptions } = useProjectFilter({ localStorePrefix: 'offers-list-projects' });
     const projectNameIsChecked = useRef(false);
@@ -75,7 +76,9 @@ export const useFilters = ({ gpus }: Args) => {
     });
 
     const clearFilter = () => {
-        setSearchParams({});
+        if (withSearchParams) {
+            setSearchParams({});
+        }
         setPropertyFilterQuery(EMPTY_QUERY);
         setGroupBy([]);
     };
@@ -137,6 +140,10 @@ export const useFilters = ({ gpus }: Args) => {
         tokens: PropertyFilterProps.Query['tokens'];
         groupBy: MultiselectProps.Options;
     }) => {
+        if (!withSearchParams) {
+            return;
+        }
+
         const searchParams = tokensToSearchParams<RequestParamsKeys>(tokens);
 
         groupBy.forEach(({ value }) => searchParams.append(groupByRequestParamName, value as string));