Skip to content

Commit 3f47827

Browse files
author
Andrey Cheptsov
committed
Simplify CLI section in project settings
1 parent 5ce087c commit 3f47827

1 file changed

Lines changed: 106 additions & 144 deletions

File tree

  • frontend/src/pages/Project/Details/Settings

‎frontend/src/pages/Project/Details/Settings/index.tsx‎

Lines changed: 106 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { useDispatch } from 'react-redux';
44
import { useLocation, useNavigate, useParams } from 'react-router-dom';
55
import { debounce } from 'lodash';
66
import { ExpandableSection, Tabs } from '@cloudscape-design/components';
7-
import Wizard from '@cloudscape-design/components/wizard';
87
import { FetchBaseQueryError } from '@reduxjs/toolkit/query';
98

109
import {
@@ -316,8 +315,6 @@ export const ProjectSettings: React.FC = () => {
316315
});
317316
};
318317

319-
const [activeStepIndex, setActiveStepIndex] = React.useState(0);
320-
321318
const projectDontHasFleet = !projectHavingFleetMap?.[paramProjectName];
322319

323320
if (isLoadingPage)
@@ -348,148 +345,113 @@ export const ProjectSettings: React.FC = () => {
348345
}
349346
// headerInfo={<InfoLink onFollow={() => openHelpPanel(CLI_INFO)} />}
350347
>
351-
<Wizard
352-
i18nStrings={{
353-
stepNumberLabel: (stepNumber) => `Step ${stepNumber}`,
354-
collapsedStepsLabel: (stepNumber, stepsCount) => `Step ${stepNumber} of ${stepsCount}`,
355-
skipToButtonLabel: (step) => `Skip to ${step.title}`,
356-
navigationAriaLabel: 'Steps',
357-
// cancelButton: "Cancel",
358-
previousButton: 'Previous',
359-
nextButton: 'Next',
360-
optional: 'required',
361-
}}
362-
onNavigate={({ detail }) => setActiveStepIndex(detail.requestedStepIndex)}
363-
activeStepIndex={activeStepIndex}
364-
onSubmit={() => setIsExpandedCliSection(false)}
365-
submitButtonText="Done"
366-
allowSkipTo={true}
367-
steps={[
368-
{
369-
title: 'Install',
370-
// info: <InfoLink onFollow={() => openHelpPanel(CLI_INFO)} />,
371-
description: 'To use dstack, install the CLI on your local machine.',
372-
content: (
373-
<Hotspot hotspotId={HotspotIds.INSTALL_CLI_COMMAND}>
374-
<Tabs
375-
variant="stacked"
376-
tabs={[
377-
{
378-
label: 'uv',
379-
id: 'uv',
380-
content: (
381-
<>
382-
<div className={styles.codeWrapper}>
383-
<Code className={styles.code}>
384-
uv tool install dstack -U
385-
</Code>
386-
387-
<div className={styles.copy}>
388-
<Popover
389-
dismissButton={false}
390-
position="top"
391-
size="small"
392-
triggerType="custom"
393-
content={
394-
<StatusIndicator type="success">
395-
{t('common.copied')}
396-
</StatusIndicator>
397-
}
398-
>
399-
<Button
400-
formAction="none"
401-
iconName="copy"
402-
variant="normal"
403-
onClick={() =>
404-
copyToClipboard(
405-
'uv tool install dstack -U',
406-
)
407-
}
408-
/>
409-
</Popover>
410-
</div>
411-
</div>
412-
</>
413-
),
414-
},
415-
{
416-
label: 'pip',
417-
id: 'pip',
418-
content: (
419-
<>
420-
<div className={styles.codeWrapper}>
421-
<Code className={styles.code}>
422-
pip install dstack -U
423-
</Code>
424-
425-
<div className={styles.copy}>
426-
<Popover
427-
dismissButton={false}
428-
position="top"
429-
size="small"
430-
triggerType="custom"
431-
content={
432-
<StatusIndicator type="success">
433-
{t('common.copied')}
434-
</StatusIndicator>
435-
}
436-
>
437-
<Button
438-
formAction="none"
439-
iconName="copy"
440-
variant="normal"
441-
onClick={() =>
442-
copyToClipboard('pip install dstack -U')
443-
}
444-
/>
445-
</Popover>
446-
</div>
447-
</div>
448-
</>
449-
),
450-
},
451-
]}
348+
<SpaceBetween size="s">
349+
<Box>To use dstack with this project, run the following command.</Box>
350+
351+
<div className={styles.codeWrapper}>
352+
<Hotspot hotspotId={HotspotIds.CONFIGURE_CLI_COMMAND}>
353+
<Code className={styles.code}>{configCliCommand}</Code>
354+
355+
<div className={styles.copy}>
356+
<Popover
357+
dismissButton={false}
358+
position="top"
359+
size="small"
360+
triggerType="custom"
361+
content={<StatusIndicator type="success">{t('common.copied')}</StatusIndicator>}
362+
>
363+
<Button
364+
formAction="none"
365+
iconName="copy"
366+
variant="normal"
367+
onClick={copyCliCommand}
452368
/>
453-
</Hotspot>
454-
),
455-
isOptional: true,
456-
},
457-
{
458-
title: 'Add project',
459-
// info: <InfoLink onFollow={() => openHelpPanel(CLI_INFO)} />,
460-
description: 'To use dstack with this project, run the following command.',
461-
content: (
462-
<div className={styles.codeWrapper}>
463-
<Hotspot hotspotId={HotspotIds.CONFIGURE_CLI_COMMAND}>
464-
<Code className={styles.code}>{configCliCommand}</Code>
465-
466-
<div className={styles.copy}>
467-
<Popover
468-
dismissButton={false}
469-
position="top"
470-
size="small"
471-
triggerType="custom"
472-
content={
473-
<StatusIndicator type="success">
474-
{t('common.copied')}
475-
</StatusIndicator>
476-
}
477-
>
478-
<Button
479-
formAction="none"
480-
iconName="copy"
481-
variant="normal"
482-
onClick={copyCliCommand}
483-
/>
484-
</Popover>
485-
</div>
486-
</Hotspot>
487-
</div>
488-
),
489-
isOptional: true,
490-
},
491-
]}
492-
/>
369+
</Popover>
370+
</div>
371+
</Hotspot>
372+
</div>
373+
374+
<ExpandableSection headerText="No CLI installed?">
375+
<SpaceBetween size="s">
376+
<Box />
377+
<Box>To use dstack, install the CLI on your local machine.</Box>
378+
379+
<Tabs
380+
variant="container"
381+
tabs={[
382+
{
383+
label: 'uv',
384+
id: 'uv',
385+
content: (
386+
<>
387+
<div className={styles.codeWrapper}>
388+
<Code className={styles.code}>uv tool install dstack -U</Code>
389+
390+
<div className={styles.copy}>
391+
<Popover
392+
dismissButton={false}
393+
position="top"
394+
size="small"
395+
triggerType="custom"
396+
content={
397+
<StatusIndicator type="success">
398+
{t('common.copied')}
399+
</StatusIndicator>
400+
}
401+
>
402+
<Button
403+
formAction="none"
404+
iconName="copy"
405+
variant="normal"
406+
onClick={() =>
407+
copyToClipboard('uv tool install dstack -U')
408+
}
409+
/>
410+
</Popover>
411+
</div>
412+
</div>
413+
</>
414+
),
415+
},
416+
{
417+
label: 'pip',
418+
id: 'pip',
419+
content: (
420+
<>
421+
<div className={styles.codeWrapper}>
422+
<Code className={styles.code}>pip install dstack -U</Code>
423+
424+
<div className={styles.copy}>
425+
<Popover
426+
dismissButton={false}
427+
position="top"
428+
size="small"
429+
triggerType="custom"
430+
content={
431+
<StatusIndicator type="success">
432+
{t('common.copied')}
433+
</StatusIndicator>
434+
}
435+
>
436+
<Button
437+
formAction="none"
438+
iconName="copy"
439+
variant="normal"
440+
onClick={() =>
441+
copyToClipboard('pip install dstack -U')
442+
}
443+
/>
444+
</Popover>
445+
</div>
446+
</div>
447+
</>
448+
),
449+
},
450+
]}
451+
/>
452+
</SpaceBetween>
453+
</ExpandableSection>
454+
</SpaceBetween>
493455
</ExpandableSection>
494456
)}
495457

0 commit comments

Comments
 (0)