Skip to content

Commit 299dd1f

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Fix stories
1 parent bfe665b commit 299dd1f

File tree

2 files changed

+68
-59
lines changed

2 files changed

+68
-59
lines changed

‎site/src/modules/resources/PortForwardButton.tsx

+49-43
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import MenuItem from "@mui/material/MenuItem";
88
import Select from "@mui/material/Select";
99
import Stack from "@mui/material/Stack";
1010
import TextField from "@mui/material/TextField";
11-
import Tooltip from "@mui/material/Tooltip";
11+
import MUITooltip from "@mui/material/Tooltip";
1212
import { API } from "api/api";
1313
import {
1414
deleteWorkspacePortShare,
@@ -31,14 +31,25 @@ import {
3131
HelpTooltipTitle,
3232
} from "components/HelpTooltip/HelpTooltip";
3333
import { Spinner } from "components/Spinner/Spinner";
34+
import {
35+
Tooltip,
36+
TooltipContent,
37+
TooltipProvider,
38+
TooltipTrigger,
39+
} from "components/Tooltip/Tooltip";
3440
import {
3541
Popover,
3642
PopoverContent,
3743
PopoverTrigger,
3844
} from "components/deprecated/Popover/Popover";
3945
import { type FormikContextType, useFormik } from "formik";
4046
import { type ClassName, useClassName } from "hooks/useClassName";
41-
import { ChevronDownIcon, ExternalLinkIcon, X as XIcon } from "lucide-react";
47+
import {
48+
ChevronDownIcon,
49+
ExternalLinkIcon,
50+
ShareIcon,
51+
X as XIcon,
52+
} from "lucide-react";
4253
import { useDashboard } from "modules/dashboard/useDashboard";
4354
import { type FC, useState } from "react";
4455
import { useMutation, useQuery } from "react-query";
@@ -188,14 +199,14 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
188199
canSharePorts && template.max_port_share_level === "public";
189200

190201
const disabledPublicMenuItem = (
191-
<Tooltip title="This workspace template does not allow sharing ports with unauthenticated users.">
202+
<MUITooltip title="This workspace template does not allow sharing ports with unauthenticated users.">
192203
{/* Tooltips don't work directly on disabled MenuItem components so you must wrap in div. */}
193204
<div>
194205
<MenuItem value="public" disabled>
195206
Public
196207
</MenuItem>
197208
</div>
198-
</Tooltip>
209+
</MUITooltip>
199210
);
200211

201212
return (
@@ -282,24 +293,17 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
282293
required
283294
css={styles.newPortInput}
284295
/>
285-
<Button
286-
type="submit"
287-
size="sm"
288-
variant="subtle"
289-
css={{
290-
paddingLeft: 12,
291-
paddingRight: 12,
292-
minWidth: 0,
293-
}}
294-
>
295-
<ExternalLinkIcon
296-
className="size-icon-xs"
297-
css={{
298-
flexShrink: 0,
299-
color: theme.palette.text.primary,
300-
}}
301-
/>
302-
</Button>
296+
<TooltipProvider>
297+
<Tooltip>
298+
<TooltipTrigger asChild>
299+
<Button type="submit" size="icon" variant="subtle">
300+
<ExternalLinkIcon />
301+
<span className="sr-only">Connect to port</span>
302+
</Button>
303+
</TooltipTrigger>
304+
<TooltipContent>Connect to port</TooltipContent>
305+
</Tooltip>
306+
</TooltipProvider>
303307
</form>
304308
</Stack>
305309
</Stack>
@@ -354,21 +358,29 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
354358
alignItems="center"
355359
>
356360
{canSharePorts && (
357-
<Button
358-
size="sm"
359-
variant="subtle"
360-
onClick={async () => {
361-
await upsertSharedPortMutation.mutateAsync({
362-
agent_name: agent.name,
363-
port: port.port,
364-
protocol: listeningPortProtocol,
365-
share_level: "authenticated",
366-
});
367-
await sharedPortsQuery.refetch();
368-
}}
369-
>
370-
Share
371-
</Button>
361+
<TooltipProvider>
362+
<Tooltip>
363+
<TooltipTrigger asChild>
364+
<Button
365+
size="icon"
366+
variant="subtle"
367+
onClick={async () => {
368+
await upsertSharedPortMutation.mutateAsync({
369+
agent_name: agent.name,
370+
port: port.port,
371+
protocol: listeningPortProtocol,
372+
share_level: "authenticated",
373+
});
374+
await sharedPortsQuery.refetch();
375+
}}
376+
>
377+
<ShareIcon />
378+
<span className="sr-only">Share</span>
379+
</Button>
380+
</TooltipTrigger>
381+
<TooltipContent>Share this port</TooltipContent>
382+
</Tooltip>
383+
</TooltipProvider>
372384
)}
373385
</Stack>
374386
</Stack>
@@ -471,7 +483,6 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
471483
<Button
472484
size="sm"
473485
variant="subtle"
474-
css={styles.deleteButton}
475486
onClick={async () => {
476487
await deleteSharedPortMutation.mutateAsync({
477488
agent_name: agent.name,
@@ -602,11 +613,6 @@ const styles = {
602613
},
603614
}),
604615

605-
deleteButton: () => ({
606-
minWidth: 30,
607-
padding: 0,
608-
}),
609-
610616
newPortForm: (theme) => ({
611617
border: `1px solid ${theme.palette.divider}`,
612618
borderRadius: "4px",

‎site/src/pages/TemplatesPage/TemplatesPageView.tsx

+19-16
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ import { PlusIcon } from "lucide-react";
4343
import { linkToTemplate, useLinks } from "modules/navigation";
4444
import type { WorkspacePermissions } from "modules/permissions/workspaces";
4545
import type { FC } from "react";
46-
import { Link, useNavigate } from "react-router-dom";
46+
import { Link as RouterLink, useNavigate } from "react-router-dom";
4747
import { createDayString } from "utils/createDayString";
4848
import { docs } from "utils/docs";
4949
import {
@@ -163,17 +163,18 @@ const TemplateRow: FC<TemplateRowProps> = ({
163163
) : workspacePermissions?.[template.organization_id]
164164
?.createWorkspaceForUserID ? (
165165
<Button
166+
asChild
167+
variant="outline"
166168
size="sm"
167-
css={styles.actionButton}
168-
className="actionButton"
169169
title={`Create a workspace using the ${template.display_name} template`}
170170
onClick={(e) => {
171171
e.stopPropagation();
172-
navigate(`${templatePageLink}/workspace`);
173172
}}
174173
>
175-
<ArrowForwardOutlined className="size-icon-sm" />
176-
Create Workspace
174+
<RouterLink to={`${templatePageLink}/workspace`}>
175+
<ArrowForwardOutlined />
176+
Create Workspace
177+
</RouterLink>
177178
</Button>
178179
) : null}
179180
</TableCell>
@@ -203,18 +204,20 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
203204
const isLoading = !templates;
204205
const isEmpty = templates && templates.length === 0;
205206

206-
const createTemplateAction = (
207-
<Button asChild size="lg">
208-
<Link to="/starter-templates">
209-
<PlusIcon />
210-
New template
211-
</Link>
212-
</Button>
213-
);
214-
215207
return (
216208
<Margins>
217-
<PageHeader actions={canCreateTemplates && createTemplateAction}>
209+
<PageHeader
210+
actions={
211+
canCreateTemplates && (
212+
<Button asChild size="lg">
213+
<RouterLink to="/starter-templates">
214+
<PlusIcon />
215+
New template
216+
</RouterLink>
217+
</Button>
218+
)
219+
}
220+
>
218221
<PageHeaderTitle>
219222
<Stack spacing={1} direction="row" alignItems="center">
220223
Templates

0 commit comments

Comments
 (0)