Skip to content

Commit 6fa90ab

Browse files
f0sself0ssel
committed
fmt
1 parent d4c2e22 commit 6fa90ab

File tree

2 files changed

+96
-73
lines changed

2 files changed

+96
-73
lines changed

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

+80-67
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,11 @@ import { type ClassName, useClassName } from "hooks/useClassName";
4848
import { useDashboard } from "modules/dashboard/useDashboard";
4949
import { docs } from "utils/docs";
5050
import { getFormHelpers } from "utils/formUtils";
51-
import { getWorkspaceListeningPortsProtocol, portForwardURL, saveWorkspaceListeningPortsProtocol } from "utils/portForward";
51+
import {
52+
getWorkspaceListeningPortsProtocol,
53+
portForwardURL,
54+
saveWorkspaceListeningPortsProtocol,
55+
} from "utils/portForward";
5256

5357
export interface PortForwardButtonProps {
5458
host: string;
@@ -135,7 +139,9 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
135139
portSharingControlsEnabled,
136140
}) => {
137141
const theme = useTheme();
138-
const [listeningPortProtocol, setListeningPortProtocol] = useState(getWorkspaceListeningPortsProtocol(workspaceID));
142+
const [listeningPortProtocol, setListeningPortProtocol] = useState(
143+
getWorkspaceListeningPortsProtocol(workspaceID),
144+
);
139145

140146
const sharedPortsQuery = useQuery({
141147
...workspacePortShares(workspaceID),
@@ -190,15 +196,17 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
190196
(port) => port.agent_name === agent.name,
191197
);
192198
// we don't want to show listening ports if it's a shared port
193-
const filteredListeningPorts = (listeningPorts ? listeningPorts : []).filter((port) => {
194-
for (let i = 0; i < filteredSharedPorts.length; i++) {
195-
if (filteredSharedPorts[i].port === port.port) {
196-
return false;
199+
const filteredListeningPorts = (listeningPorts ? listeningPorts : []).filter(
200+
(port) => {
201+
for (let i = 0; i < filteredSharedPorts.length; i++) {
202+
if (filteredSharedPorts[i].port === port.port) {
203+
return false;
204+
}
197205
}
198-
}
199206

200-
return true;
201-
});
207+
return true;
208+
},
209+
);
202210
// only disable the form if shared port controls are entitled and the template doesn't allow sharing ports
203211
const canSharePorts =
204212
portSharingExperimentEnabled &&
@@ -225,7 +233,8 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
225233
overflowY: "auto",
226234
}}
227235
>
228-
<Stack direction="column"
236+
<Stack
237+
direction="column"
229238
css={{
230239
padding: 20,
231240
}}
@@ -258,9 +267,14 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
258267
css={styles.listeningPortProtocol}
259268
value={listeningPortProtocol}
260269
onChange={async (event) => {
261-
const selectedProtocol = event.target.value as "http" | "https";
270+
const selectedProtocol = event.target.value as
271+
| "http"
272+
| "https";
262273
setListeningPortProtocol(selectedProtocol);
263-
saveWorkspaceListeningPortsProtocol(workspaceID, selectedProtocol);
274+
saveWorkspaceListeningPortsProtocol(
275+
workspaceID,
276+
selectedProtocol,
277+
);
264278
}}
265279
>
266280
<MenuItem value="http">HTTP</MenuItem>
@@ -318,28 +332,28 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
318332
</Stack>
319333
{filteredListeningPorts.length === 0 && (
320334
<HelpTooltipText css={styles.noPortText}>
321-
{"No open ports were detected."}
335+
{"No open ports were detected."}
322336
</HelpTooltipText>
323337
)}
324-
{filteredListeningPorts.map((port) => {
325-
const url = portForwardURL(
326-
host,
327-
port.port,
328-
agent.name,
329-
workspaceName,
330-
username,
331-
listeningPortProtocol,
332-
);
333-
const label =
334-
port.process_name !== "" ? port.process_name : port.port;
335-
return (
336-
<Stack
337-
key={port.port}
338-
direction="row"
339-
alignItems="center"
340-
justifyContent="space-between"
341-
>
342-
<Stack direction="row" gap={3}>
338+
{filteredListeningPorts.map((port) => {
339+
const url = portForwardURL(
340+
host,
341+
port.port,
342+
agent.name,
343+
workspaceName,
344+
username,
345+
listeningPortProtocol,
346+
);
347+
const label =
348+
port.process_name !== "" ? port.process_name : port.port;
349+
return (
350+
<Stack
351+
key={port.port}
352+
direction="row"
353+
alignItems="center"
354+
justifyContent="space-between"
355+
>
356+
<Stack direction="row" gap={3}>
343357
<Link
344358
underline="none"
345359
css={styles.portLink}
@@ -351,43 +365,42 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
351365
{port.port}
352366
</Link>
353367
<Link
354-
underline="none"
355-
css={styles.portLink}
356-
href={url}
357-
target="_blank"
358-
rel="noreferrer"
359-
>
360-
{label}
361-
</Link>
362-
</Stack>
363-
<Stack
364-
direction="row"
365-
gap={2}
366-
justifyContent="flex-end"
367-
alignItems="center"
368+
underline="none"
369+
css={styles.portLink}
370+
href={url}
371+
target="_blank"
372+
rel="noreferrer"
368373
>
369-
370-
{canSharePorts && (
371-
<Button
372-
size="small"
373-
variant="text"
374-
onClick={async () => {
375-
await upsertSharedPortMutation.mutateAsync({
376-
agent_name: agent.name,
377-
port: port.port,
378-
protocol: listeningPortProtocol,
379-
share_level: "authenticated",
380-
});
381-
await sharedPortsQuery.refetch();
382-
}}
383-
>
384-
Share
385-
</Button>
386-
)}
387-
</Stack>
374+
{label}
375+
</Link>
376+
</Stack>
377+
<Stack
378+
direction="row"
379+
gap={2}
380+
justifyContent="flex-end"
381+
alignItems="center"
382+
>
383+
{canSharePorts && (
384+
<Button
385+
size="small"
386+
variant="text"
387+
onClick={async () => {
388+
await upsertSharedPortMutation.mutateAsync({
389+
agent_name: agent.name,
390+
port: port.port,
391+
protocol: listeningPortProtocol,
392+
share_level: "authenticated",
393+
});
394+
await sharedPortsQuery.refetch();
395+
}}
396+
>
397+
Share
398+
</Button>
399+
)}
388400
</Stack>
389-
);
390-
})}
401+
</Stack>
402+
);
403+
})}
391404
</Stack>
392405
</div>
393406
{portSharingExperimentEnabled && (

‎site/src/utils/portForward.ts

+16-6
Original file line numberDiff line numberDiff line change
@@ -66,10 +66,20 @@ export const openMaybePortForwardedURL = (
6666
}
6767
};
6868

69-
export const saveWorkspaceListeningPortsProtocol = (workspaceID: string, protocol: WorkspaceAgentPortShareProtocol) => {
70-
localStorage.setItem(`listening-ports-protocol-workspace-${workspaceID}`, protocol);
71-
}
69+
export const saveWorkspaceListeningPortsProtocol = (
70+
workspaceID: string,
71+
protocol: WorkspaceAgentPortShareProtocol,
72+
) => {
73+
localStorage.setItem(
74+
`listening-ports-protocol-workspace-${workspaceID}`,
75+
protocol,
76+
);
77+
};
7278

73-
export const getWorkspaceListeningPortsProtocol = (workspaceID: string): WorkspaceAgentPortShareProtocol => {
74-
return (localStorage.getItem(`listening-ports-protocol-workspace-${workspaceID}`) || "http") as WorkspaceAgentPortShareProtocol;
75-
}
79+
export const getWorkspaceListeningPortsProtocol = (
80+
workspaceID: string,
81+
): WorkspaceAgentPortShareProtocol => {
82+
return (localStorage.getItem(
83+
`listening-ports-protocol-workspace-${workspaceID}`,
84+
) || "http") as WorkspaceAgentPortShareProtocol;
85+
};

0 commit comments

Comments
 (0)