Skip to content

Commit 267405b

Browse files
f0sself0ssel
committed
work on form submission
1 parent 9deb05c commit 267405b

File tree

4 files changed

+93
-90
lines changed

4 files changed

+93
-90
lines changed

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

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
33
import {
44
MockListeningPortsResponse,
55
MockSharedPortsResponse,
6+
MockWorkspace,
67
MockWorkspaceAgent,
78
} from "testHelpers/entities";
89

@@ -18,16 +19,18 @@ export default meta;
1819
type Story = StoryObj<typeof PortForwardButton>;
1920

2021
export const Example: Story = {
21-
args: {
22-
storybook: {
23-
listeningPortsQueryData: MockListeningPortsResponse,
24-
sharedPortsQueryData: MockSharedPortsResponse,
25-
},
22+
parameters: {
23+
queries: [
24+
{
25+
key: ["portForward", MockWorkspaceAgent.id],
26+
data: MockListeningPortsResponse,
27+
},
28+
{
29+
key: ["sharedPorts", MockWorkspace.id],
30+
data: MockSharedPortsResponse,
31+
},
32+
],
2633
},
2734
};
2835

29-
export const Loading: Story = {
30-
args: {
31-
storybook: {},
32-
},
33-
};
36+
export const Loading: Story = {};

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

Lines changed: 30 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,7 @@ import {
1212
type Template,
1313
type WorkspaceAgent,
1414
type WorkspaceAgentListeningPort,
15-
type WorkspaceAgentListeningPortsResponse,
1615
type WorkspaceAgentPortShareLevel,
17-
type WorkspaceAgentPortShares,
1816
UpsertWorkspaceAgentPortShareRequest,
1917
} from "api/typesGenerated";
2018
import { portForwardURL } from "utils/portForward";
@@ -56,46 +54,34 @@ export interface PortForwardButtonProps {
5654
workspaceID: string;
5755
agent: WorkspaceAgent;
5856
template: Template;
59-
60-
/**
61-
* Only for use in Storybook
62-
*/
63-
storybook?: {
64-
listeningPortsQueryData?: WorkspaceAgentListeningPortsResponse;
65-
sharedPortsQueryData?: WorkspaceAgentPortShares;
66-
};
6757
}
6858

6959
export const PortForwardButton: FC<PortForwardButtonProps> = (props) => {
70-
const { agent, storybook } = props;
60+
const { agent } = props;
7161
const { entitlements, experiments } = useDashboard();
7262
const paper = useClassName(classNames.paper, []);
7363

7464
const portsQuery = useQuery({
7565
queryKey: ["portForward", agent.id],
7666
queryFn: () => getAgentListeningPorts(agent.id),
77-
enabled: !storybook && agent.status === "connected",
67+
enabled: agent.status === "connected",
7868
refetchInterval: 5_000,
7969
});
8070

81-
const listeningPorts = storybook
82-
? storybook.listeningPortsQueryData
83-
: portsQuery.data;
84-
8571
return (
8672
<Popover>
8773
<PopoverTrigger>
8874
<Button
89-
disabled={!listeningPorts}
75+
disabled={!portsQuery.data}
9076
size="small"
9177
variant="text"
9278
endIcon={<KeyboardArrowDown />}
9379
css={{ fontSize: 13, padding: "8px 12px" }}
9480
startIcon={
95-
listeningPorts ? (
81+
portsQuery.data ? (
9682
<div>
9783
<span css={styles.portCount}>
98-
{listeningPorts.ports.length}
84+
{portsQuery.data.ports.length}
9985
</span>
10086
</div>
10187
) : (
@@ -109,7 +95,7 @@ export const PortForwardButton: FC<PortForwardButtonProps> = (props) => {
10995
<PopoverContent horizontal="right" classes={{ paper }}>
11096
<PortForwardPopoverView
11197
{...props}
112-
listeningPorts={listeningPorts?.ports}
98+
listeningPorts={portsQuery.data?.ports}
11399
portSharingExperimentEnabled={experiments.includes("shared-ports")}
114100
portSharingControlsEnabled={
115101
entitlements.features.control_shared_ports.enabled
@@ -142,17 +128,14 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
142128
listeningPorts,
143129
portSharingExperimentEnabled,
144130
portSharingControlsEnabled,
145-
storybook,
146131
}) => {
147132
const theme = useTheme();
148133

149134
const sharedPortsQuery = useQuery({
150135
...workspacePortShares(workspaceID),
151-
enabled: !storybook && agent.status === "connected",
136+
enabled: agent.status === "connected",
152137
});
153-
const sharedPorts = storybook
154-
? storybook.sharedPortsQueryData?.shares || []
155-
: sharedPortsQuery.data?.shares || [];
138+
const sharedPorts = sharedPortsQuery.data?.shares || [];
156139

157140
const upsertSharedPortMutation = useMutation(
158141
upsertWorkspacePortShare(workspaceID),
@@ -169,6 +152,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
169152
error: submitError,
170153
} = useMutation(upsertWorkspacePortShare(workspaceID));
171154
const validationSchema = getValidationSchema();
155+
// TODO: do partial here
172156
const form: FormikContextType<UpsertWorkspaceAgentPortShareRequest> =
173157
useFormik<UpsertWorkspaceAgentPortShareRequest>({
174158
initialValues: {
@@ -191,9 +175,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
191175
// we don't want to show listening ports if it's a shared port
192176
const filteredListeningPorts = listeningPorts?.filter((port) => {
193177
for (let i = 0; i < filteredSharedPorts.length; i++) {
194-
if (
195-
filteredSharedPorts[i].port === port.port
196-
) {
178+
if (filteredSharedPorts[i].port === port.port) {
197179
return false;
198180
}
199181
}
@@ -439,10 +421,10 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
439421
</Stack>
440422
);
441423
})}
442-
<form onSubmit={form.submitForm}>
424+
<form onSubmit={form.handleSubmit}>
443425
<Stack
444426
direction="column"
445-
gap={1}
427+
gap={2}
446428
justifyContent="flex-end"
447429
sx={{
448430
marginTop: 2,
@@ -456,19 +438,24 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
456438
variant="outlined"
457439
type="number"
458440
/>
459-
<FormControl size="small">
460-
<Select
461-
{...getFieldHelpers("share_level")}
462-
value={form.values.share_level}
463-
onChange={form.handleChange}
464-
>
465-
<MenuItem value="authenticated">Authenticated</MenuItem>
466-
<MenuItem value="public" disabled={!canSharePortsPublic}>
467-
Public
468-
</MenuItem>
469-
</Select>
470-
</FormControl>
471-
<Button variant="contained" onClick={form.submitForm}>
441+
<TextField
442+
{...getFieldHelpers("share_level")}
443+
disabled={isSubmitting}
444+
fullWidth
445+
select
446+
value={form.values.share_level}
447+
label="Sharing Level"
448+
>
449+
<MenuItem value="authenticated">Authenticated</MenuItem>
450+
<MenuItem value="public" disabled={!canSharePortsPublic}>
451+
Public
452+
</MenuItem>
453+
</TextField>
454+
<Button
455+
variant="contained"
456+
type="submit"
457+
disabled={isSubmitting}
458+
>
472459
Share Port
473460
</Button>
474461
</Stack>

‎site/src/modules/resources/PortForwardPopoverView.stories.tsx

Lines changed: 38 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
MockListeningPortsResponse,
55
MockSharedPortsResponse,
66
MockTemplate,
7+
MockWorkspace,
78
MockWorkspaceAgent,
89
} from "testHelpers/entities";
910

@@ -27,6 +28,7 @@ const meta: Meta<typeof PortForwardPopoverView> = {
2728
args: {
2829
agent: MockWorkspaceAgent,
2930
template: MockTemplate,
31+
workspaceID: MockWorkspace.id,
3032
portSharingExperimentEnabled: true,
3133
portSharingControlsEnabled: true,
3234
},
@@ -38,18 +40,28 @@ type Story = StoryObj<typeof PortForwardPopoverView>;
3840
export const WithPorts: Story = {
3941
args: {
4042
listeningPorts: MockListeningPortsResponse.ports,
41-
storybook: {
42-
sharedPortsQueryData: MockSharedPortsResponse,
43-
},
43+
},
44+
parameters: {
45+
queries: [
46+
{
47+
key: ["sharedPorts", MockWorkspace.id],
48+
data: MockSharedPortsResponse,
49+
},
50+
],
4451
},
4552
};
4653

4754
export const Empty: Story = {
4855
args: {
4956
listeningPorts: [],
50-
storybook: {
51-
sharedPortsQueryData: { shares: [] },
52-
},
57+
},
58+
parameters: {
59+
queries: [
60+
{
61+
key: ["sharedPorts", MockWorkspace.id],
62+
data: { shares: [] },
63+
},
64+
],
5365
},
5466
};
5567

@@ -63,11 +75,16 @@ export const NoPortSharingExperiment: Story = {
6375
export const AGPLPortSharing: Story = {
6476
args: {
6577
listeningPorts: MockListeningPortsResponse.ports,
66-
storybook: {
67-
sharedPortsQueryData: MockSharedPortsResponse,
68-
},
6978
portSharingControlsEnabled: false,
7079
},
80+
parameters: {
81+
queries: [
82+
{
83+
key: ["sharedPorts", MockWorkspace.id],
84+
data: MockSharedPortsResponse,
85+
},
86+
],
87+
},
7188
};
7289

7390
export const EnterprisePortSharingControlsOwner: Story = {
@@ -83,16 +100,21 @@ export const EnterprisePortSharingControlsOwner: Story = {
83100
export const EnterprisePortSharingControlsAuthenticated: Story = {
84101
args: {
85102
listeningPorts: MockListeningPortsResponse.ports,
86-
storybook: {
87-
sharedPortsQueryData: {
88-
shares: MockSharedPortsResponse.shares.filter((share) => {
89-
return share.share_level === "authenticated";
90-
}),
91-
},
92-
},
93103
template: {
94104
...MockTemplate,
95105
max_port_share_level: "authenticated",
96106
},
97107
},
108+
parameters: {
109+
queries: [
110+
{
111+
key: ["sharedPorts", MockWorkspace.id],
112+
data: {
113+
shares: MockSharedPortsResponse.shares.filter((share) => {
114+
return share.share_level === "authenticated";
115+
}),
116+
},
117+
},
118+
],
119+
},
98120
};

‎site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ import {
3131
HelpTooltipTrigger,
3232
} from "components/HelpTooltip/HelpTooltip";
3333
import { EnterpriseBadge } from "components/Badges/Badges";
34-
import Select from "@mui/material/Select";
3534
import MenuItem from "@mui/material/MenuItem";
3635

3736
const MAX_DESCRIPTION_CHAR_LIMIT = 128;
@@ -279,33 +278,25 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
279278
only be accessed by the workspace owner."
280279
>
281280
<FormFields>
282-
<Stack direction="column" spacing={0.5}>
283-
<Stack
284-
direction="row"
285-
alignItems="center"
286-
spacing={0.5}
287-
css={styles.optionText}
288-
>
289-
Maximum Port Sharing Level
290-
</Stack>
291-
<span css={styles.optionHelperText}>
292-
The maximum level of port sharing allowed for workspaces.
293-
</span>
294-
</Stack>
295-
<Select
296-
id="max_port_share_level"
297-
name="max_port_share_level"
281+
<TextField
282+
{...getFieldHelpers("max_port_share_level", {
283+
helperText:
284+
"The maximum level of port sharing allowed for workspaces.",
285+
})}
298286
disabled={isSubmitting || !portSharingControlsEnabled}
299287
fullWidth
300-
// TODO: Fix label being black on dark mode
288+
select
289+
value={
290+
portSharingControlsEnabled
291+
? form.values.max_port_share_level
292+
: "public"
293+
}
301294
label="Maximum Port Sharing Level"
302-
onChange={form.handleChange}
303-
value={form.values.max_port_share_level}
304295
>
305296
<MenuItem value="owner">Owner</MenuItem>
306297
<MenuItem value="authenticated">Authenticated</MenuItem>
307298
<MenuItem value="public">Public</MenuItem>
308-
</Select>
299+
</TextField>
309300
{!portSharingControlsEnabled && (
310301
<Stack direction="row">
311302
<EnterpriseBadge />

0 commit comments

Comments
 (0)