Mar 20, 2024 · Mar 19, 2024
diff --git a/site/src/modules/resources/PortForwardButton.tsx b/site/src/modules/resources/PortForwardButton.tsx
    <>
      <div
        css={{
          padding: 20,
          maxHeight: 320,
          overflowY: "auto",
        }}
      >
        <Stack
          direction="row"
          justifyContent="space-between"
          alignItems="start"
        >
          <HelpTooltipTitle>Listening ports</HelpTooltipTitle>
          <HelpTooltipLink href={docs("/networking/port-forwarding#dashboard")}>
            Learn more
          </HelpTooltipLink>
        </Stack>
        <HelpTooltipText css={{ color: theme.palette.text.secondary }}>
          {filteredListeningPorts?.length === 0
            ? "No open ports were detected."
            : "The listening ports are exclusively accessible to you."}
        </HelpTooltipText>
        <form
          css={styles.newPortForm}
          onSubmit={(e) => {
            e.preventDefault();
            const formData = new FormData(e.currentTarget);
            const port = Number(formData.get("portNumber"));
            const url = portForwardURL(
              host,
              port,
              agent.name,
              workspaceName,
              username,
            );
            window.open(url, "_blank");
          }}
        <header
          css={(theme) => ({
            padding: 20,
            paddingBottom: 10,
            position: "sticky",
            top: 0,
            background: theme.palette.background.paper,
            // For some reason the Share button label has a higher z-index than
            // the header. Probably some tricky stuff from MUI.
            zIndex: 1,
          })}
        >
          <input
            aria-label="Port number"
            name="portNumber"
            type="number"
            placeholder="Connect to port..."
            min={9}
            max={65535}
            required
            css={styles.newPortInput}
          />
          <Button
            type="submit"
            size="small"
            variant="text"
            css={{
              paddingLeft: 12,
              paddingRight: 12,
              minWidth: 0,
          <Stack
            direction="row"
            justifyContent="space-between"
            alignItems="start"
          >
            <HelpTooltipTitle>Listening ports</HelpTooltipTitle>
            <HelpTooltipLink
              href={docs("/networking/port-forwarding#dashboard")}
            >
              Learn more
            </HelpTooltipLink>
          </Stack>
          <HelpTooltipText css={{ color: theme.palette.text.secondary }}>
            {filteredListeningPorts?.length === 0
              ? "No open ports were detected."
              : "The listening ports are exclusively accessible to you."}
          </HelpTooltipText>
          <form
            css={styles.newPortForm}
            onSubmit={(e) => {
              e.preventDefault();
              const formData = new FormData(e.currentTarget);
              const port = Number(formData.get("portNumber"));
              const url = portForwardURL(
                host,
                port,
                agent.name,
                workspaceName,
                username,
              );
              window.open(url, "_blank");
            }}
          >
            <OpenInNewOutlined
            <input
              aria-label="Port number"
              name="portNumber"
              type="number"
              placeholder="Connect to port..."
              min={9}
              max={65535}
              required
              css={styles.newPortInput}
            />
            <Button
              type="submit"
              size="small"
              variant="text"
              css={{
                flexShrink: 0,
                width: 14,
                height: 14,
                color: theme.palette.text.primary,
                paddingLeft: 12,
                paddingRight: 12,
                minWidth: 0,
              }}
            />
          </Button>
        </form>
            >
              <OpenInNewOutlined
                css={{
                  flexShrink: 0,
                  width: 14,
                  height: 14,
                  color: theme.palette.text.primary,
                }}
              />
            </Button>
          </form>
        </header>
        <div
          css={{
            paddingTop: 10,
            padding: 20,
            paddingTop: 0,
          }}
        >
          {filteredListeningPorts?.map((port) => {
diff --git a/site/src/modules/resources/PortForwardPopoverView.stories.tsx b/site/src/modules/resources/PortForwardPopoverView.stories.tsx
  },
 };

 export const WithManyPorts: Story = {
  args: {
    listeningPorts: Array.from({ length: 20 }).map((_, i) => ({
      process_name: `port-${i}`,
      network: "",
      port: 3000 + i,
    })),
  },
  parameters: {
    queries: [
      {
        key: ["sharedPorts", MockWorkspace.id],
        data: MockSharedPortsResponse,
      },
    ],
  },
 };

 export const Empty: Story = {
  args: {
    listeningPorts: [],
Original file line number	Diff line number	Diff line change
Expand Up		@@ -220,73 +220,90 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
		<>
		<div
		css={{
		padding: 20,
		maxHeight: 320,
		overflowY: "auto",
		}}
		>
		<Stack
		direction="row"
		justifyContent="space-between"
		alignItems="start"
		>
		<HelpTooltipTitle>Listening ports</HelpTooltipTitle>
		<HelpTooltipLink href={docs("/networking/port-forwarding#dashboard")}>
		Learn more
		</HelpTooltipLink>
		</Stack>
		<HelpTooltipText css={{ color: theme.palette.text.secondary }}>
		{filteredListeningPorts?.length === 0
		? "No open ports were detected."
		: "The listening ports are exclusively accessible to you."}
		</HelpTooltipText>
		<form
		css={styles.newPortForm}
		onSubmit={(e) => {
		e.preventDefault();
		const formData = new FormData(e.currentTarget);
		const port = Number(formData.get("portNumber"));
		const url = portForwardURL(
		host,
		port,
		agent.name,
		workspaceName,
		username,
		);
		window.open(url, "_blank");
		}}
		<header
		css={(theme) => ({
		padding: 20,
		paddingBottom: 10,
		position: "sticky",
		top: 0,
		background: theme.palette.background.paper,
		// For some reason the Share button label has a higher z-index than
		// the header. Probably some tricky stuff from MUI.
		zIndex: 1,
		})}
		>
		<input
		aria-label="Port number"
		name="portNumber"
		type="number"
		placeholder="Connect to port..."
		min={9}
		max={65535}
		required
		css={styles.newPortInput}
		/>
		<Button
		type="submit"
		size="small"
		variant="text"
		css={{
		paddingLeft: 12,
		paddingRight: 12,
		minWidth: 0,
		<Stack
		direction="row"
		justifyContent="space-between"
		alignItems="start"
		>
		<HelpTooltipTitle>Listening ports</HelpTooltipTitle>
		<HelpTooltipLink
		href={docs("/networking/port-forwarding#dashboard")}
		>
		Learn more
		</HelpTooltipLink>
		</Stack>
		<HelpTooltipText css={{ color: theme.palette.text.secondary }}>
		{filteredListeningPorts?.length === 0
		? "No open ports were detected."
		: "The listening ports are exclusively accessible to you."}
		</HelpTooltipText>
		<form
		css={styles.newPortForm}
		onSubmit={(e) => {
		e.preventDefault();
		const formData = new FormData(e.currentTarget);
		const port = Number(formData.get("portNumber"));
		const url = portForwardURL(
		host,
		port,
		agent.name,
		workspaceName,
		username,
		);
		window.open(url, "_blank");
		}}
		>
		<OpenInNewOutlined
		<input
		aria-label="Port number"
		name="portNumber"
		type="number"
		placeholder="Connect to port..."
		min={9}
		max={65535}
		required
		css={styles.newPortInput}
		/>
		<Button
		type="submit"
		size="small"
		variant="text"
		css={{
		flexShrink: 0,
		width: 14,
		height: 14,
		color: theme.palette.text.primary,
		paddingLeft: 12,
		paddingRight: 12,
		minWidth: 0,
		}}
		/>
		</Button>
		</form>
		>
		<OpenInNewOutlined
		css={{
		flexShrink: 0,
		width: 14,
		height: 14,
		color: theme.palette.text.primary,
		}}
		/>
		</Button>
		</form>
		</header>
		<div
		css={{
		paddingTop: 10,
		padding: 20,
		paddingTop: 0,
		}}
		>
		{filteredListeningPorts?.map((port) => {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -51,6 +51,24 @@ export const WithPorts: Story = {
		},
		};

		export const WithManyPorts: Story = {
		args: {
		listeningPorts: Array.from({ length: 20 }).map((_, i) => ({
		process_name: `port-${i}`,
		network: "",
		port: 3000 + i,
		})),
		},
		parameters: {
		queries: [
		{
		key: ["sharedPorts", MockWorkspace.id],
		data: MockSharedPortsResponse,
		},
		],
		},
		};

		export const Empty: Story = {
		args: {
		listeningPorts: [],
Expand Down