Was added create project wizard for oss

Author: olgenn

frontend/src/locale/en.json

@@ -209,17 +209,6 @@
       "backends_description": "The following backends can be configured with your own cloud credentials in the project settings after the project is created.",
       "default_fleet": "Create a default fleet",
       "default_fleet_description": "At least one fleet is required to create dev environments, submit tasks, or run services",
-      "fleet_name": "Name",
-      "fleet_name_description": "The name of the fleet, e.g. 'my-fleet'",
-      "fleet_name_placeholder": "Optional",
-      "fleet_name_constraint": "If not specified, generated automatically",
-      "fleet_min_instances": "Min number of instances",
-      "fleet_min_instances_description": "Specify \"0\" if you want instances to be created on demand",
-      "fleet_max_instances": "Max number of instances",
-      "fleet_max_instances_description": "Specify it only if you want to limit the maximum number of instances",
-      "fleet_max_instances_placeholder": "Optional",
-      "fleet_idle_duration": "Idle duration",
-      "fleet_idle_duration_description": "For how long instances should be kept idle before termination, e.g. \"0s\", \"1m\", \"1h\"",
       "is_public": "Make project public",
       "is_public_description": "Public projects can be accessed by any user without being a member",
       "backend": "Backend",
@@ -625,6 +614,19 @@
       "spot": "Spot",
       "started": "Started",
       "price": "Price"
+    },
+    "edit": {
+      "name": "Name",
+      "name_description": "The name of the fleet, e.g. 'my-fleet'",
+      "name_placeholder": "Optional",
+      "name_constraint": "If not specified, generated automatically",
+      "min_instances": "Min number of instances",
+      "min_instances_description": "Specify \"0\" if you want instances to be created on demand",
+      "max_instances": "Max number of instances",
+      "max_instances_description": "Specify it only if you want to limit the maximum number of instances",
+      "max_instances_placeholder": "Optional",
+      "idle_duration": "Idle duration",
+      "idle_duration_description": "For how long instances should be kept idle before termination, e.g. \"0s\", \"1m\", \"1h\""
     }
   },
   "volume": {

frontend/src/pages/Fleets/Details/components/FleetFormFields/constants.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { get } from 'lodash';
+import * as yup from 'yup';
+
+export const FLEET_MIN_INSTANCES_INFO = {
+    header: <h2>Min number of instances</h2>,
+    body: (
+        <>
+            <p>Some text</p>
+        </>
+    ),
+};
+
+export const FLEET_MAX_INSTANCES_INFO = {
+    header: <h2>Max number of instances</h2>,
+    body: (
+        <>
+            <p>Some text</p>
+        </>
+    ),
+};
+
+export const FLEET_IDLE_DURATION_INFO = {
+    header: <h2>Idle duration</h2>,
+    body: (
+        <>
+            <p>Some text</p>
+        </>
+    ),
+};
+
+const requiredFieldError = 'This is required field';
+const numberFieldError = 'This is number field';
+
+export const getMinInstancesValidator = (maxInstancesFieldPath: string) =>
+    yup
+        .number()
+        .required(requiredFieldError)
+        .typeError(numberFieldError)
+        .min(0)
+        .test('is-smaller-than-max', 'The minimum value must be less than the maximum value.', (value, context) => {
+            const maxInstances = get(context.parent, maxInstancesFieldPath);
+
+            if (typeof maxInstances !== 'number' || typeof value !== 'number') {
+                return true;
+            }
+
+            return value <= maxInstances;
+        });
+
+export const getMaxInstancesValidator = (minInstancesFieldPath: string) =>
+    yup
+        .number()
+        .typeError(numberFieldError)
+        .min(1)
+        .test('is-greater-than-min', 'The maximum value must be greater than the minimum value', (value, context) => {
+            const minInstances = get(context.parent, minInstancesFieldPath);
+
+            if (typeof minInstances !== 'number' || typeof value !== 'number') {
+                return true;
+            }
+
+            return value >= minInstances;
+        });
+
+export const idleDurationValidator = yup.string().matches(/^[1-9]\d*[smhdw]$/, 'Invalid duration');

frontend/src/pages/Fleets/Details/components/FleetFormFields/index.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { FormInput, InfoLink, SpaceBetween } from 'components';
+
+import { useHelpPanel } from 'hooks';
+
+import { FLEET_IDLE_DURATION_INFO, FLEET_MAX_INSTANCES_INFO, FLEET_MIN_INSTANCES_INFO } from './constants';
+import { FleetFormFieldsProps } from './type';
+
+import type { FieldValues } from 'react-hook-form/dist/types/fields';
+
+export function FleetFormFields<T extends FieldValues = FieldValues>({
+    control,
+    disabledAllFields,
+    fieldNamePrefix,
+}: FleetFormFieldsProps<T>) {
+    const { t } = useTranslation();
+    const [openHelpPanel] = useHelpPanel();
+
+    return (
+        <SpaceBetween direction="vertical" size="l">
+            <FormInput
+                label={t('fleets.edit.name')}
+                description={t('fleets.edit.name_description')}
+                placeholder={t('fleets.edit.name_placeholder')}
+                constraintText={t('fleets.edit.name_constraint')}
+                control={control}
+                //eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-expect-error
+                name={`${fieldNamePrefix}.name`}
+                disabled={disabledAllFields}
+            />
+
+            <FormInput
+                info={<InfoLink onFollow={() => openHelpPanel(FLEET_MIN_INSTANCES_INFO)} />}
+                label={t('fleets.edit.min_instances')}
+                description={t('fleets.edit.min_instances_description')}
+                control={control}
+                //eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-expect-error
+                name={`${fieldNamePrefix}.min_instances`}
+                disabled={disabledAllFields}
+                type="number"
+            />
+
+            <FormInput
+                info={<InfoLink onFollow={() => openHelpPanel(FLEET_MAX_INSTANCES_INFO)} />}
+                label={t('fleets.edit.max_instances')}
+                description={t('fleets.edit.max_instances_description')}
+                placeholder={t('fleets.edit.max_instances_placeholder')}
+                control={control}
+                //eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-expect-error
+                name={`${fieldNamePrefix}.max_instances`}
+                disabled={disabledAllFields}
+                type="number"
+            />
+
+            <FormInput
+                info={<InfoLink onFollow={() => openHelpPanel(FLEET_IDLE_DURATION_INFO)} />}
+                label={t('fleets.edit.idle_duration')}
+                description={t('fleets.edit.idle_duration_description')}
+                control={control}
+                //eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-expect-error
+                name={`${fieldNamePrefix}.idle_duration`}
+                disabled={disabledAllFields}
+            />
+        </SpaceBetween>
+    );
+}

frontend/src/pages/Fleets/Details/components/FleetFormFields/type.ts

@@ -0,0 +1,15 @@
+import type { FieldValues } from 'react-hook-form/dist/types/fields';
+import type { UseFormReturn } from 'react-hook-form/dist/types/form';
+
+export interface FleetFormFieldsProps<TFieldValues extends FieldValues = FieldValues>
+    extends Pick<UseFormReturn<TFieldValues>, 'control'> {
+    fieldNamePrefix?: string;
+    disabledAllFields?: boolean;
+}
+
+export type FleetFormFields = {
+    name?: string;
+    min_instances: number;
+    max_instances?: number;
+    idle_duration?: string;
+};