Skip to content

Commit 3273e75

Browse files
aslilacaslilac
committed
🧪
1 parent 763f967 commit 3273e75

File tree

10 files changed

+360
-92
lines changed

10 files changed

+360
-92
lines changed

‎site/src/components/Dialogs/Dialog.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -80,8 +80,8 @@ const styles = {
8080
},
8181

8282
"&:hover:not(:disabled)": {
83-
backgroundColor: theme.experimental.roles.danger.disabled.fill,
84-
borderColor: theme.experimental.roles.danger.disabled.outline,
83+
backgroundColor: theme.experimental.roles.danger.hover.fill,
84+
borderColor: theme.experimental.roles.danger.hover.outline,
8585
},
8686

8787
"&.Mui-disabled": {

‎site/src/components/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,13 @@ export const WorkspaceOutdatedTooltip: FC<TooltipProps> = (props) => {
4747
);
4848
};
4949

50-
export const WorkspaceOutdatedTooltipContent = (props: TooltipProps) => {
50+
export const WorkspaceOutdatedTooltipContent: FC<TooltipProps> = ({
51+
onUpdateVersion,
52+
ariaLabel,
53+
latestVersionId,
54+
templateName,
55+
}) => {
5156
const popover = usePopover();
52-
const { onUpdateVersion, ariaLabel, latestVersionId, templateName } = props;
5357
const { data: activeVersion } = useQuery({
5458
...templateVersion(latestVersionId),
5559
enabled: popover.isOpen,

‎site/src/pages/UserSettingsPage/TokensPage/ConfirmDeleteDialog.stories.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,6 @@ export const DeleteDialog: Story = {
3232
args: {
3333
queryKey: ["tokens"],
3434
token: MockToken,
35-
setToken: () => {
36-
return null;
37-
},
35+
setToken: () => null,
3836
},
3937
};

‎site/src/pages/WorkspacesPage/BatchDelete.stories.tsx renamed to ‎site/src/pages/WorkspacesPage/BatchDeleteConfirmation.stories.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import { action } from "@storybook/addon-actions";
22
import type { Meta, StoryObj } from "@storybook/react";
3+
import { chromatic } from "testHelpers/chromatic";
34
import { MockWorkspace, MockUser2 } from "testHelpers/entities";
4-
import { BatchDeleteConfirmation } from "./BatchActions";
5+
import { BatchDeleteConfirmation } from "./BatchDeleteConfirmation";
56

67
const meta: Meta<typeof BatchDeleteConfirmation> = {
7-
title: "pages/WorkspacesPage/BatchDelete",
8+
title: "pages/WorkspacesPage/BatchDeleteConfirmation",
9+
parameters: { chromatic },
810
component: BatchDeleteConfirmation,
911
args: {
1012
onClose: action("onClose"),
@@ -35,4 +37,4 @@ type Story = StoryObj<typeof BatchDeleteConfirmation>;
3537

3638
const Example: Story = {};
3739

38-
export { Example as BatchDelete };
40+
export { Example as BatchDeleteConfirmation };

‎site/src/pages/WorkspacesPage/BatchActions.tsx renamed to ‎site/src/pages/WorkspacesPage/BatchDeleteConfirmation.tsx

+15-75
Original file line numberDiff line numberDiff line change
@@ -2,84 +2,15 @@ import PersonOutlinedIcon from "@mui/icons-material/PersonOutlined";
22
import ScheduleIcon from "@mui/icons-material/Schedule";
33
import { visuallyHidden } from "@mui/utils";
44
import dayjs from "dayjs";
5-
import "dayjs/plugin/relativeTime";
6-
import { type Interpolation, type Theme } from "@emotion/react";
5+
import relativeTime from "dayjs/plugin/relativeTime";
6+
import { useTheme, type Interpolation, type Theme } from "@emotion/react";
77
import { type FC, type ReactNode, useState } from "react";
8-
import { useMutation } from "react-query";
9-
import {
10-
deleteWorkspace,
11-
startWorkspace,
12-
stopWorkspace,
13-
updateWorkspace,
14-
} from "api/api";
158
import type { Workspace } from "api/typesGenerated";
169
import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
17-
import { displayError } from "components/GlobalSnackbar/utils";
18-
import { getResourceIconPath } from "utils/workspace";
1910
import { Stack } from "components/Stack/Stack";
11+
import { getResourceIconPath } from "utils/workspace";
2012

21-
interface UseBatchActionsProps {
22-
onSuccess: () => Promise<void>;
23-
}
24-
25-
export function useBatchActions(options: UseBatchActionsProps) {
26-
const { onSuccess } = options;
27-
28-
const startAllMutation = useMutation({
29-
mutationFn: async (workspaces: Workspace[]) => {
30-
return Promise.all(
31-
workspaces.map((w) =>
32-
startWorkspace(w.id, w.latest_build.template_version_id),
33-
),
34-
);
35-
},
36-
onSuccess,
37-
onError: () => {
38-
displayError("Failed to start workspaces");
39-
},
40-
});
41-
42-
const stopAllMutation = useMutation({
43-
mutationFn: async (workspaces: Workspace[]) => {
44-
return Promise.all(workspaces.map((w) => stopWorkspace(w.id)));
45-
},
46-
onSuccess,
47-
onError: () => {
48-
displayError("Failed to stop workspaces");
49-
},
50-
});
51-
52-
const deleteAllMutation = useMutation({
53-
mutationFn: async (workspaces: Workspace[]) => {
54-
return Promise.all(workspaces.map((w) => deleteWorkspace(w.id)));
55-
},
56-
onSuccess,
57-
onError: () => {
58-
displayError("Failed to delete some workspaces");
59-
},
60-
});
61-
62-
const updateAllMutation = useMutation({
63-
mutationFn: async (workspaces: Workspace[]) => {
64-
return Promise.all(workspaces.map((w) => updateWorkspace(w)));
65-
},
66-
onSuccess,
67-
onError: () => {
68-
displayError("Failed to update some workspaces");
69-
},
70-
});
71-
72-
return {
73-
startAll: startAllMutation.mutateAsync,
74-
stopAll: stopAllMutation.mutateAsync,
75-
deleteAll: deleteAllMutation.mutateAsync,
76-
updateAll: updateAllMutation.mutateAsync,
77-
isLoading:
78-
startAllMutation.isLoading ||
79-
stopAllMutation.isLoading ||
80-
deleteAllMutation.isLoading,
81-
};
82-
}
13+
dayjs.extend(relativeTime);
8314

8415
type BatchDeleteConfirmationProps = {
8516
checkedWorkspaces: Workspace[];
@@ -198,6 +129,8 @@ const Consequences: FC = () => {
198129
};
199130

200131
const Workspaces: FC<StageProps> = ({ workspaces }) => {
132+
const theme = useTheme();
133+
201134
const mostRecent = workspaces.reduce(
202135
(latestSoFar, against) => {
203136
if (!latestSoFar) {
@@ -225,7 +158,9 @@ const Workspaces: FC<StageProps> = ({ workspaces }) => {
225158
alignItems="center"
226159
justifyContent="space-between"
227160
>
228-
<span css={{ fontWeight: 500, color: "#fff" }}>
161+
<span
162+
css={{ fontWeight: 500, color: theme.experimental.l1.text }}
163+
>
229164
{workspace.name}
230165
</span>
231166
<Stack css={{ gap: 0, fontSize: 14, width: 128 }}>
@@ -250,7 +185,12 @@ const Workspaces: FC<StageProps> = ({ workspaces }) => {
250185
</li>
251186
))}
252187
</ul>
253-
<Stack justifyContent="center" direction="row" css={{ fontSize: 14 }}>
188+
<Stack
189+
justifyContent="center"
190+
direction="row"
191+
wrap="wrap"
192+
css={{ gap: "6px 20px", fontSize: 14 }}
193+
>
254194
<Stack direction="row" alignItems="center" spacing={1}>
255195
<PersonIcon />
256196
<span>{ownersCount}</span>

‎site/src/pages/WorkspacesPage/BatchUpdateConfirmation.stories.tsx

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { action } from "@storybook/addon-actions";
2+
import type { Meta, StoryObj } from "@storybook/react";
3+
import { chromatic } from "testHelpers/chromatic";
4+
import { MockWorkspace, MockUser2 } from "testHelpers/entities";
5+
import { BatchUpdateConfirmation } from "./BatchUpdateConfirmation";
6+
7+
const meta: Meta<typeof BatchUpdateConfirmation> = {
8+
title: "pages/WorkspacesPage/BatchUpdateConfirmation",
9+
parameters: { chromatic },
10+
component: BatchUpdateConfirmation,
11+
args: {
12+
onClose: action("onClose"),
13+
onConfirm: action("onConfirm"),
14+
open: true,
15+
checkedWorkspaces: [
16+
MockWorkspace,
17+
{
18+
...MockWorkspace,
19+
name: "Test-Workspace-2",
20+
last_used_at: "2023-08-16T15:29:10.302441433Z",
21+
owner_id: MockUser2.id,
22+
owner_name: MockUser2.username,
23+
},
24+
{
25+
...MockWorkspace,
26+
name: "Test-Workspace-3",
27+
last_used_at: "2023-11-16T15:29:10.302441433Z",
28+
owner_id: MockUser2.id,
29+
owner_name: MockUser2.username,
30+
},
31+
],
32+
},
33+
};
34+
35+
export default meta;
36+
type Story = StoryObj<typeof BatchUpdateConfirmation>;
37+
38+
const Example: Story = {};
39+
40+
export { Example as BatchUpdateConfirmation };

0 commit comments

Comments
 (0)