Skip to content

Commit 67bbe25

Browse files
peterschmidt85peterschmidt85
committed
[UI] Linter
1 parent 3f71f97 commit 67bbe25

3 files changed

Lines changed: 103 additions & 86 deletions

File tree

‎.pre-commit-config.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,6 @@ repos:
2121
hooks:
2222
- id: frontend-pre-commit
2323
name: frontend-pre-commit
24-
entry: bash -c "cd frontend && npm install && npm run precommit"
24+
entry: bash -c "cd frontend && npm install && npm run pre-commit"
2525
language: system
2626
pass_filenames: false

‎frontend/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"test": "jest",
1717
"test:update-snapshots": "jest -u",
1818
"generate-api": "npx @rtk-query/codegen-openapi openapi-config.ts",
19-
"precommit": "lint-staged"
19+
"pre-commit": "lint-staged"
2020
},
2121
"devDependencies": {
2222
"@babel/cli": "^7.25.9",

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

Lines changed: 101 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
22
import { useTranslation } from 'react-i18next';
33
import { useNavigate, useParams } from 'react-router-dom';
44
import { debounce } from 'lodash';
5-
import Wizard from "@cloudscape-design/components/wizard";
5+
import { ExpandableSection, Tabs } from '@cloudscape-design/components';
6+
import Wizard from '@cloudscape-design/components/wizard';
67

78
import {
89
Box,
@@ -12,7 +13,6 @@ import {
1213
Container,
1314
Header,
1415
Hotspot,
15-
InfoLink,
1616
Loader,
1717
Popover,
1818
SelectCSD,
@@ -21,10 +21,12 @@ import {
2121
} from 'components';
2222
import { HotspotIds } from 'layouts/AppLayout/TutorialPanel/constants';
2323

24-
import { useBreadcrumbs, useHelpPanel, useNotifications } from 'hooks';
24+
import { useBreadcrumbs, useNotifications } from 'hooks';
2525
import { riseRouterException } from 'libs';
26+
import { copyToClipboard } from 'libs';
2627
import { ROUTES } from 'routes';
2728
import { useGetProjectQuery, useUpdateProjectMembersMutation, useUpdateProjectMutation } from 'services/project';
29+
import { useGetRunsQuery } from 'services/run';
2830
import { useGetUserDataQuery } from 'services/user';
2931

3032
import { useCheckAvailableProjectPermission } from 'pages/Project/hooks/useCheckAvailableProjectPermission';
@@ -38,19 +40,14 @@ import { BackendsTable } from '../../Backends/Table';
3840
import { GatewaysTable } from '../../Gateways';
3941
import { useGatewaysTable } from '../../Gateways/hooks';
4042
import { ProjectSecrets } from '../../Secrets';
41-
import { CLI_INFO } from './constants';
4243

4344
import styles from './styles.module.scss';
44-
import { ExpandableSection, Tabs } from '@cloudscape-design/components';
45-
import { useGetRunsQuery } from 'services/run';
46-
import { copyToClipboard } from 'libs';
4745

4846
export const ProjectSettings: React.FC = () => {
4947
const { t } = useTranslation();
5048
const params = useParams();
5149
const navigate = useNavigate();
5250
const paramProjectName = params.projectName ?? '';
53-
const [openHelpPanel] = useHelpPanel();
5451
const [configCliCommand, copyCliCommand] = useConfigProjectCliCommand({ projectName: paramProjectName });
5552

5653
const { isAvailableDeletingPermission, isProjectManager, isProjectAdmin, isAvailableProjectManaging } =
@@ -171,11 +168,7 @@ export const ProjectSettings: React.FC = () => {
171168
});
172169
};
173170

174-
const [
175-
activeStepIndex,
176-
setActiveStepIndex
177-
] = React.useState(0);
178-
171+
const [activeStepIndex, setActiveStepIndex] = React.useState(0);
179172

180173
const { data: runsData } = useGetRunsQuery({
181174
limit: 1,
@@ -203,99 +196,119 @@ export const ProjectSettings: React.FC = () => {
203196
headerText="CLI"
204197
expanded={expanded}
205198
onChange={({ detail }) => setExpanded(detail.expanded)}
206-
headerActions={<Button iconName='script' variant={expanded ? "normal" : "primary"} onClick={() => setExpanded((prev) => !prev)}></Button>}
199+
headerActions={
200+
<Button
201+
iconName="script"
202+
variant={expanded ? 'normal' : 'primary'}
203+
onClick={() => setExpanded((prev) => !prev)}
204+
></Button>
205+
}
207206
// headerInfo={<InfoLink onFollow={() => openHelpPanel(CLI_INFO)} />}
208207
>
209208
<Wizard
210209
i18nStrings={{
211-
stepNumberLabel: stepNumber =>
212-
`Step ${stepNumber}`,
213-
collapsedStepsLabel: (stepNumber, stepsCount) =>
214-
`Step ${stepNumber} of ${stepsCount}`,
215-
skipToButtonLabel: (step, stepNumber) =>
216-
`Skip to ${step.title}`,
217-
navigationAriaLabel: "Steps",
210+
stepNumberLabel: (stepNumber) => `Step ${stepNumber}`,
211+
collapsedStepsLabel: (stepNumber, stepsCount) => `Step ${stepNumber} of ${stepsCount}`,
212+
skipToButtonLabel: (step) => `Skip to ${step.title}`,
213+
navigationAriaLabel: 'Steps',
218214
// cancelButton: "Cancel",
219-
previousButton: "Previous",
220-
nextButton: "Next",
221-
optional: "required"
215+
previousButton: 'Previous',
216+
nextButton: 'Next',
217+
optional: 'required',
222218
}}
223-
onNavigate={({ detail }) =>
224-
setActiveStepIndex(detail.requestedStepIndex)
225-
}
219+
onNavigate={({ detail }) => setActiveStepIndex(detail.requestedStepIndex)}
226220
activeStepIndex={activeStepIndex}
227221
onSubmit={() => setExpanded(false)}
228222
submitButtonText="Dismiss"
229223
allowSkipTo={true}
230224
steps={[
231225
{
232-
title: "Install CLI",
226+
title: 'Install CLI',
233227
// info: <InfoLink onFollow={() => openHelpPanel(CLI_INFO)} />,
234-
description: "To use dstack, install the CLI on your local machine.",
228+
description: 'To use dstack, install the CLI on your local machine.',
235229
content: (
236230
<Tabs
237231
variant="stacked"
238232
tabs={[
239233
{
240-
label: "uv",
241-
id: "uv",
242-
content: <>
243-
<div className={styles.codeWrapper}>
244-
<Code className={styles.code}>uv tool install dstack -U</Code>
245-
246-
<div className={styles.copy}>
247-
<Popover
248-
dismissButton={false}
249-
position="top"
250-
size="small"
251-
triggerType="custom"
252-
content={<StatusIndicator type="success">{t('common.copied')}</StatusIndicator>}
253-
>
254-
<Button
255-
formAction="none"
256-
iconName="copy"
257-
variant="normal"
258-
onClick={() => copyToClipboard('uv tool install dstack -U')}
259-
/>
260-
</Popover>
234+
label: 'uv',
235+
id: 'uv',
236+
content: (
237+
<>
238+
<div className={styles.codeWrapper}>
239+
<Code className={styles.code}>
240+
uv tool install dstack -U
241+
</Code>
242+
243+
<div className={styles.copy}>
244+
<Popover
245+
dismissButton={false}
246+
position="top"
247+
size="small"
248+
triggerType="custom"
249+
content={
250+
<StatusIndicator type="success">
251+
{t('common.copied')}
252+
</StatusIndicator>
253+
}
254+
>
255+
<Button
256+
formAction="none"
257+
iconName="copy"
258+
variant="normal"
259+
onClick={() =>
260+
copyToClipboard('uv tool install dstack -U')
261+
}
262+
/>
263+
</Popover>
264+
</div>
261265
</div>
262-
</div>
263-
</>
266+
</>
267+
),
264268
},
265269
{
266-
label: "pip",
267-
id: "pip",
268-
content: <>
269-
<div className={styles.codeWrapper}>
270-
<Code className={styles.code}>pip install dstack -U</Code>
271-
272-
<div className={styles.copy}>
273-
<Popover
274-
dismissButton={false}
275-
position="top"
276-
size="small"
277-
triggerType="custom"
278-
content={<StatusIndicator type="success">{t('common.copied')}</StatusIndicator>}
279-
>
280-
<Button
281-
formAction="none"
282-
iconName="copy"
283-
variant="normal"
284-
onClick={() => copyToClipboard('pip install dstack -U')}
285-
/>
286-
</Popover>
270+
label: 'pip',
271+
id: 'pip',
272+
content: (
273+
<>
274+
<div className={styles.codeWrapper}>
275+
<Code className={styles.code}>pip install dstack -U</Code>
276+
277+
<div className={styles.copy}>
278+
<Popover
279+
dismissButton={false}
280+
position="top"
281+
size="small"
282+
triggerType="custom"
283+
content={
284+
<StatusIndicator type="success">
285+
{t('common.copied')}
286+
</StatusIndicator>
287+
}
288+
>
289+
<Button
290+
formAction="none"
291+
iconName="copy"
292+
variant="normal"
293+
onClick={() =>
294+
copyToClipboard('pip install dstack -U')
295+
}
296+
/>
297+
</Popover>
298+
</div>
287299
</div>
288-
</div>
289-
</>
290-
}]}
300+
</>
301+
),
302+
},
303+
]}
291304
/>
292305
),
293306
isOptional: true,
294307
},
295308
{
296-
title: "Add project",
309+
title: 'Add project',
297310
// info: <InfoLink onFollow={() => openHelpPanel(CLI_INFO)} />,
298-
description: "To use dstack with this project, run the following command.",
311+
description: 'To use dstack with this project, run the following command.',
299312
content: (
300313
<div className={styles.codeWrapper}>
301314
<Hotspot hotspotId={HotspotIds.CONFIGURE_CLI_COMMAND}>
@@ -307,7 +320,11 @@ export const ProjectSettings: React.FC = () => {
307320
position="top"
308321
size="small"
309322
triggerType="custom"
310-
content={<StatusIndicator type="success">{t('common.copied')}</StatusIndicator>}
323+
content={
324+
<StatusIndicator type="success">
325+
{t('common.copied')}
326+
</StatusIndicator>
327+
}
311328
>
312329
<Button
313330
formAction="none"
@@ -331,11 +348,11 @@ export const ProjectSettings: React.FC = () => {
331348
backends={backendsData}
332349
{...(isProjectManager(data)
333350
? {
334-
onClickAddBackend: addBackend,
335-
editBackend: editBackend,
336-
deleteBackends: deleteBackend,
337-
isDisabledDelete: isDeletingBackend,
338-
}
351+
onClickAddBackend: addBackend,
352+
editBackend: editBackend,
353+
deleteBackends: deleteBackend,
354+
isDisabledDelete: isDeletingBackend,
355+
}
339356
: {})}
340357
/>
341358

0 commit comments

Comments
 (0)