Refactoring after review

Author: olgenn

frontend/src/pages/Fleets/Add/index.tsx

@@ -1,18 +1,18 @@
 import React, { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { isNil } from 'lodash';
 import * as yup from 'yup';
 import { WizardProps } from '@cloudscape-design/components';
 
-import { Container, FormSelect, KeyValuePairs, SpaceBetween, Wizard } from 'components';
+import { Container, FormInput, InfoLink, KeyValuePairs, SpaceBetween, Wizard } from 'components';
 
-import { useBreadcrumbs, useConfirmationDialog, useNotifications } from 'hooks';
-import { useProjectFilter } from 'hooks/useProjectFilter';
+import { useBreadcrumbs, useConfirmationDialog, useHelpPanel, useNotifications } from 'hooks';
 import { ROUTES } from 'routes';
 import { useApplyFleetMutation } from 'services/fleet';
 
+import { DEFAULT_FLEET_INFO } from 'pages/Project/constants';
 import { useYupValidationResolver } from 'pages/Project/hooks/useYupValidationResolver';
 
 import { getMaxInstancesValidator, getMinInstancesValidator, idleDurationValidator } from './FleetFormFields/constants';
@@ -38,18 +38,21 @@ const fleetValidationSchema = yup.object({
 export const FleetAdd: React.FC = () => {
     const { t } = useTranslation();
     const navigate = useNavigate();
+    const params = useParams();
+    const paramProjectName = params.projectName ?? '';
+    const [openHelpPanel] = useHelpPanel();
     const [pushNotification] = useNotifications();
     const [openConfirmationDialog] = useConfirmationDialog();
     const [applyFleet, { isLoading: isApplyingFleet }] = useApplyFleetMutation();
     const [activeStepIndex, setActiveStepIndex] = useState(0);
     const resolver = useYupValidationResolver(fleetValidationSchema);
-    const { projectOptions } = useProjectFilter({ localStorePrefix: 'add-fleet-page' });
 
     const loading = isApplyingFleet;
 
     const formMethods = useForm<IFleetWizardForm>({
         resolver,
         defaultValues: {
+            project_name: paramProjectName,
             min_instances: 0,
             idle_duration: '5m',
         },
@@ -80,14 +83,21 @@ export const FleetAdd: React.FC = () => {
     };
 
     useBreadcrumbs([
+        {
+            text: t('navigation.project_other'),
+            href: ROUTES.PROJECT.LIST,
+        },
+        {
+            text: paramProjectName,
+            href: ROUTES.PROJECT.DETAILS.FORMAT(paramProjectName),
+        },
         {
             text: t('navigation.fleets'),
             href: ROUTES.FLEETS.LIST,
         },
-
         {
             text: t('common.create_wit_text', { text: t('navigation.fleet') }),
-            href: ROUTES.FLEETS.ADD,
+            href: ROUTES.FLEETS.ADD.FORMAT(paramProjectName),
         },
     ]);
 
@@ -214,19 +224,20 @@ export const FleetAdd: React.FC = () => {
                         content: (
                             <Container>
                                 <SpaceBetween direction="vertical" size="l">
-                                    <FormSelect
+                                    <FormInput
                                         label={t('projects.edit.project_name')}
                                         control={control}
                                         name="project_name"
-                                        options={projectOptions}
+                                        readOnly
                                         disabled={loading}
                                     />
                                 </SpaceBetween>
                             </Container>
                         ),
                     },
                     {
-                        title: 'Fleets',
+                        title: 'Settings',
+                        info: <InfoLink onFollow={() => openHelpPanel(DEFAULT_FLEET_INFO)} />,
                         content: (
                             <Container>
                                 <SpaceBetween direction="vertical" size="l">

frontend/src/pages/Fleets/List/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
 
 import { Button, Header, Loader, PropertyFilter, SpaceBetween, Table, Toggle } from 'components';
 
@@ -19,7 +18,6 @@ import styles from './styles.module.scss';
 
 export const FleetList: React.FC = () => {
     const { t } = useTranslation();
-    const navigate = useNavigate();
 
     useBreadcrumbs([
         {
@@ -68,10 +66,6 @@ export const FleetList: React.FC = () => {
 
     const isDisabledDeleteButton = !selectedItems?.length || isDeleting;
 
-    const addFleetHandler = () => {
-        navigate(ROUTES.FLEETS.ADD);
-    };
-
     const deleteClickHandle = () => {
         if (!selectedItems?.length) return;
 
@@ -107,8 +101,6 @@ export const FleetList: React.FC = () => {
                                     {t('common.delete')}
                                 </Button>
 
-                                <Button onClick={addFleetHandler}>{t('common.create')}</Button>
-
                                 <Button
                                     iconName="refresh"
                                     disabled={isLoading}

frontend/src/pages/Project/components/NoFleetProjectAlert/index.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 import cn from 'classnames';
 
 import type { ButtonProps } from 'components';
 import { Alert, AlertProps, Button } from 'components';
 
 import { useLocalStorageState } from 'hooks/useLocalStorageState';
-import { goToUrl } from 'libs';
+import { ROUTES } from 'routes';
 
 import styles from './styles.module.scss';
 
@@ -19,11 +20,12 @@ type NoFleetProjectAlertProps = {
 
 export const NoFleetProjectAlert: React.FC<NoFleetProjectAlertProps> = ({ projectName, show, className, dismissible }) => {
     const { t } = useTranslation();
+    const navigate = useNavigate();
     const [dontShowAgain, setDontShowAgain] = useLocalStorageState(`noFleetProjectAlert-${projectName}`, false);
 
     const onCreateAFleet: ButtonProps['onClick'] = (event) => {
         event.preventDefault();
-        goToUrl('https://dstack.ai/docs/quickstart/#create-a-fleet', true);
+        navigate(ROUTES.FLEETS.ADD.FORMAT(projectName));
     };
 
     const onDismiss: AlertProps['onDismiss'] = () => setDontShowAgain(true);

frontend/src/router.tsx

@@ -203,7 +203,7 @@ export const router = createBrowserRouter([
                 element: <FleetList />,
             },
             {
-                path: ROUTES.FLEETS.ADD,
+                path: ROUTES.FLEETS.ADD.TEMPLATE,
                 element: <FleetAdd />,
             },
             {

frontend/src/routes.ts

@@ -137,7 +137,10 @@ export const ROUTES = {
 
     FLEETS: {
         LIST: '/fleets',
-        ADD: '/fleets/add',
+        ADD: {
+            TEMPLATE: `/projects/:projectName/fleets/add`,
+            FORMAT: (projectName: string) => buildRoute(ROUTES.FLEETS.ADD.TEMPLATE, { projectName }),
+        },
         DETAILS: {
             TEMPLATE: `/projects/:projectName/fleets/:fleetId`,
             FORMAT: (projectName: string, fleetId: string) =>