May 16, 2025 · May 15, 2025 · May 15, 2025 · May 15, 2025 · May 15, 2025 · May 16, 2025
diff --git a/site/src/components/PaginationWidget/PageButtons.tsx b/site/src/components/PaginationWidget/PageButtons.tsx
 import { useTheme } from "@emotion/react";
 import Button from "@mui/material/Button";
 import { Button } from "components/Button/Button";
 import type { FC, ReactNode } from "react";

 type NumberedPageButtonProps = {
 pageNumber: number;
 totalPages: number;

 onClick?: () => void;
 highlighted?: boolean;
 disabled?: boolean;
 highlighted = false,
 disabled = false,
 }) => {
 const theme = useTheme();

 return (
 <Button
 css={
 highlighted && {
 borderColor: theme.roles.active.outline,
 backgroundColor: theme.roles.active.background,

 // Override the hover state with active colors, but not hover
 // colors because clicking won't do anything.
 "&:hover": {
 borderColor: theme.roles.active.outline,
 backgroundColor: theme.roles.active.background,
 },
 }
 }
 variant={highlighted ? "default" : "outline"}
 size="icon"
 aria-label={ariaLabel}
 name={name}
 disabled={disabled}
diff --git a/site/src/components/PaginationWidget/PaginationNavButton.tsx b/site/src/components/PaginationWidget/PaginationNavButton.tsx
 import { useTheme } from "@emotion/react";
 import Button from "@mui/material/Button";
 import Tooltip from "@mui/material/Tooltip";
 import { Button } from "components/Button/Button";
 import {
 type ButtonHTMLAttributes,
 type ReactNode,
 disabledMessageTimeout = 3000,
 ...delegatedProps
 }: PaginationNavButtonProps) {
 const theme = useTheme();
 const [showDisabledMessage, setShowDisabledMessage] = useState(false);

 // Inline state sync - this is safe/recommended by the React team in this case
 *   (mostly for giving direct UI feedback to those actions)
 */}
 <Button
 aria-disabled={disabled}
 css={
 disabled && {
 borderColor: theme.palette.divider,
 color: theme.palette.text.disabled,
 cursor: "default",
 "&:hover": {
 backgroundColor: theme.palette.background.default,
 borderColor: theme.palette.divider,
 },
 }
 }
 onClick={() => {
 if (disabled) {
 setShowDisabledMessage(true);
 } else {
 onClick();
 }
 }}
 variant="outline"
 size="icon"
 disabled={disabled}
 onClick={onClick}
 {...delegatedProps}
 />
 </Tooltip>
diff --git a/site/src/components/PaginationWidget/PaginationWidgetBase.test.tsx b/site/src/components/PaginationWidget/PaginationWidgetBase.test.tsx
 type SampleProps = Omit<PaginationWidgetBaseProps, "onPageChange">;

 describe(PaginationWidgetBase.name, () => {
 it("Should have its previous button bearia-disabled while on page 1", async () => {
 it("Should have its previous button be disabled while on page 1", async () => {
 const sampleProps: SampleProps[] = [
 { currentPage: 1, pageSize: 5, totalRecords: 6 },
 { currentPage: 1, pageSize: 50, totalRecords: 200 },
 );

 const prevButton = await screen.findByLabelText("Previous page");
 expect(prevButton).not.toBeDisabled();
 expect(prevButton).toHaveAttribute("aria-disabled", "true");
 expect(prevButton).toBeDisabled();

 await userEvent.click(prevButton);
 expect(onPageChange).not.toHaveBeenCalled();
 unmount();
 }
 });

 it("Should have its next button bearia-disabled while on last page", async () => {
 it("Should have its next button be disabled while on last page", async () => {
 const sampleProps: SampleProps[] = [
 { currentPage: 2, pageSize: 5, totalRecords: 6 },
 { currentPage: 4, pageSize: 50, totalRecords: 200 },
 );

 const button = await screen.findByLabelText("Next page");
 expect(button).not.toBeDisabled();
 expect(button).toHaveAttribute("aria-disabled", "true");
 expect(button).toBeDisabled();

 await userEvent.click(button);
 expect(onPageChange).not.toHaveBeenCalled();
 const nextButton = await screen.findByLabelText("Next page");

 expect(prevButton).not.toBeDisabled();
 expect(prevButton).toHaveAttribute("aria-disabled", "false");

 await userEvent.click(prevButton);
 expect(onPageChange).toHaveBeenCalledTimes(1);

 expect(nextButton).not.toBeDisabled();
 expect(nextButton).toHaveAttribute("aria-disabled", "false");

 await userEvent.click(nextButton);
 expect(onPageChange).toHaveBeenCalledTimes(2);
diff --git a/site/src/components/PaginationWidget/PaginationWidgetBase.tsx b/site/src/components/PaginationWidget/PaginationWidgetBase.tsx
 }
 }}
 >
 <ChevronLeftIconclassName="size-icon-sm"/>
 <ChevronLeftIcon />
 </PaginationNavButton>

 {isMobile ? (
 }
 }}
 >
 <ChevronRightIconclassName="size-icon-sm"/>
 <ChevronRightIcon />
 </PaginationNavButton>
 </div>
 );
diff --git a/site/src/modules/resources/DownloadAgentLogsButton.tsx b/site/src/modules/resources/DownloadAgentLogsButton.tsx
 import DownloadOutlined from "@mui/icons-material/DownloadOutlined";
 import Button from "@mui/material/Button";
 import { agentLogs } from "api/queries/workspaces";
 import type { WorkspaceAgent, WorkspaceAgentLog } from "api/typesGenerated";
 import { Button } from "components/Button/Button";
 import { displayError } from "components/GlobalSnackbar/utils";
 import { saveAs } from "file-saver";
 import { type FC, useState } from "react";

 return (
 <Button
 startIcon={<DownloadOutlined />}
 disabled={!isConnected || isDownloading}
 variant="text"
 size="small"
 variant="subtle"
 size="sm"
 onClick={async () => {
 try {
 setIsDownloading(true);
 }
 }}
 >
 <DownloadOutlined />
 {isDownloading ? "Downloading..." : "Download logs"}
 </Button>
 );
diff --git a/site/src/modules/resources/PortForwardButton.tsx b/site/src/modules/resources/PortForwardButton.tsx
 import LockIcon from "@mui/icons-material/Lock";
 import LockOpenIcon from "@mui/icons-material/LockOpen";
 import SensorsIcon from "@mui/icons-material/Sensors";
 import MUIButton from "@mui/material/Button";
 import CircularProgress from "@mui/material/CircularProgress";
 import FormControl from "@mui/material/FormControl";
 import Link from "@mui/material/Link";
 import MenuItem from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
 import Stack from "@mui/material/Stack";
 import TextField from "@mui/material/TextField";
 importTooltip from "@mui/material/Tooltip";
 importMUITooltip from "@mui/material/Tooltip";
 import { API } from "api/api";
 import {
 deleteWorkspacePortShare,
 HelpTooltipTitle,
 } from "components/HelpTooltip/HelpTooltip";
 import { Spinner } from "components/Spinner/Spinner";
 import {
 Tooltip,
 TooltipContent,
 TooltipProvider,
 TooltipTrigger,
 } from "components/Tooltip/Tooltip";
 import {
 Popover,
 PopoverContent,
 PopoverTrigger,
 } from "components/deprecated/Popover/Popover";
 import { type FormikContextType, useFormik } from "formik";
 import { type ClassName, useClassName } from "hooks/useClassName";
 import { ChevronDownIcon, ExternalLinkIcon, X as XIcon } from "lucide-react";
 import {
 ChevronDownIcon,
 ExternalLinkIcon,
 ShareIcon,
 X as XIcon,
 } from "lucide-react";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { type FC, useState } from "react";
 import { useMutation, useQuery } from "react-query";
 return (
 <Popover>
 <PopoverTrigger>
 <MUIButton
 disabled={!portsQuery.data}
 size="small"
 variant="text"
 endIcon={<ChevronDownIcon className="size-4" />}
 css={{ fontSize: 13, padding: "8px 12px" }}
 startIcon={
 portsQuery.data ? (
 <div>
 <span css={styles.portCount}>
 {portsQuery.data.ports.length}
 </span>
 </div>
 ) : (
 <CircularProgress size={10} />
 )
 }
 >
 <Button disabled={!portsQuery.data} size="sm" variant="subtle">
 <Spinner loading={!portsQuery.data}>
 <span css={styles.portCount}>{portsQuery.data?.ports.length}</span>
 </Spinner>
 Open ports
 </MUIButton>
 <ChevronDownIcon className="size-4" />
 </Button>
 </PopoverTrigger>
 <PopoverContent horizontal="right" classes={{ paper }}>
 <PortForwardPopoverView
 canSharePorts && template.max_port_share_level === "public";

 const disabledPublicMenuItem = (
 <Tooltip title="This workspace template does not allow sharing ports with unauthenticated users.">
 <MUITooltip title="This workspace template does not allow sharing ports with unauthenticated users.">
 {/* Tooltips don't work directly on disabled MenuItem components so you must wrap in div. */}
 <div>
 <MenuItem value="public" disabled>
 Public
 </MenuItem>
 </div>
 </Tooltip>
 </MUITooltip>
 );

 return (
 required
 css={styles.newPortInput}
 />
 <MUIButton
 type="submit"
 size="small"
 variant="text"
 css={{
 paddingLeft: 12,
 paddingRight: 12,
 minWidth: 0,
 }}
 >
 <ExternalLinkIcon
 className="size-icon-xs"
 css={{
 flexShrink: 0,
 color: theme.palette.text.primary,
 }}
 />
 </MUIButton>
 <TooltipProvider>
 <Tooltip>
 <TooltipTrigger asChild>
 <Button type="submit" size="icon" variant="subtle">
 <ExternalLinkIcon />
 <span className="sr-only">Connect to port</span>
 </Button>
 </TooltipTrigger>
 <TooltipContent>Connect to port</TooltipContent>
 </Tooltip>
 </TooltipProvider>
 </form>
 </Stack>
 </Stack>
 alignItems="center"
 >
 {canSharePorts && (
 <MUIButton
 size="small"
 variant="text"
 onClick={async () => {
 await upsertSharedPortMutation.mutateAsync({
 agent_name: agent.name,
 port: port.port,
 protocol: listeningPortProtocol,
 share_level: "authenticated",
 });
 await sharedPortsQuery.refetch();
 }}
 >
 Share
 </MUIButton>
 <TooltipProvider>
 <Tooltip>
 <TooltipTrigger asChild>
 <Button
 size="icon"
 variant="subtle"
 onClick={async () => {
 await upsertSharedPortMutation.mutateAsync({
 agent_name: agent.name,
 port: port.port,
 protocol: listeningPortProtocol,
 share_level: "authenticated",
 });
 await sharedPortsQuery.refetch();
 }}
 >
 <ShareIcon />
 <span className="sr-only">Share</span>
 </Button>
 </TooltipTrigger>
 <TooltipContent>Share this port</TooltipContent>
 </Tooltip>
 </TooltipProvider>
 )}
 </Stack>
 </Stack>
 )}
 </Select>
 </FormControl>
 <MUIButton
 size="small"
 variant="text"
 css={styles.deleteButton}
 <Button
 size="sm"
 variant="subtle"
 onClick={async () => {
 await deleteSharedPortMutation.mutateAsync({
 agent_name: agent.name,
 color: theme.palette.text.primary,
 }}
 />
 </MUIButton>
 </Button>
 </Stack>
 </Stack>
 );
 },
 }),

 deleteButton: () => ({
 minWidth: 30,
 padding: 0,
 }),

 newPortForm: (theme) => ({
 border: `1px solid ${theme.palette.divider}`,
 borderRadius: "4px",
Original file line number	Diff line number	Diff line change
		@@ -1,11 +1,9 @@
		import { useTheme } from "@emotion/react";
		import Button from "@mui/material/Button";
		import { Button } from "components/Button/Button";
		import type { FC, ReactNode } from "react";

		type NumberedPageButtonProps = {
		pageNumber: number;
		totalPages: number;

		onClick?: () => void;
		highlighted?: boolean;
		disabled?: boolean;
Expand DownExpand Up		@@ -68,23 +66,10 @@ const BasePageButton: FC<BasePageButtonProps> = ({
		highlighted = false,
		disabled = false,
		}) => {
		const theme = useTheme();

		return (
		<Button
		css={
		highlighted && {
		borderColor: theme.roles.active.outline,
		backgroundColor: theme.roles.active.background,

		// Override the hover state with active colors, but not hover
		// colors because clicking won't do anything.
		"&:hover": {
		borderColor: theme.roles.active.outline,
		backgroundColor: theme.roles.active.background,
		},
		}
		}
		variant={highlighted ? "default" : "outline"}
		size="icon"
		aria-label={ariaLabel}
		name={name}
		disabled={disabled}
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,5 @@
		import { useTheme } from "@emotion/react";
		import Button from "@mui/material/Button";
		import Tooltip from "@mui/material/Tooltip";
		import { Button } from "components/Button/Button";
		import {
		type ButtonHTMLAttributes,
		type ReactNode,
Expand DownExpand Up		@@ -32,7 +31,6 @@ function PaginationNavButtonCore({
		disabledMessageTimeout = 3000,
		...delegatedProps
		}: PaginationNavButtonProps) {
		const theme = useTheme();
		const [showDisabledMessage, setShowDisabledMessage] = useState(false);

		// Inline state sync - this is safe/recommended by the React team in this case
Expand DownExpand Up		@@ -63,25 +61,10 @@ function PaginationNavButtonCore({
		* (mostly for giving direct UI feedback to those actions)
		*/}
		<Button
		aria-disabled={disabled}
		css={
		disabled && {
		borderColor: theme.palette.divider,
		color: theme.palette.text.disabled,
		cursor: "default",
		"&:hover": {
		backgroundColor: theme.palette.background.default,
		borderColor: theme.palette.divider,
		},
		}
		}
		onClick={() => {
		if (disabled) {
		setShowDisabledMessage(true);
		} else {
		onClick();
		}
		}}
		variant="outline"
		size="icon"
		disabled={disabled}
		onClick={onClick}
		{...delegatedProps}
		/>
		</Tooltip>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,7 +9,7 @@ import {
		type SampleProps = Omit<PaginationWidgetBaseProps, "onPageChange">;

		describe(PaginationWidgetBase.name, () => {
		it("Should have its previous button bearia-disabled while on page 1", async () => {
		it("Should have its previous button be disabled while on page 1", async () => {
		const sampleProps: SampleProps[] = [
		{ currentPage: 1, pageSize: 5, totalRecords: 6 },
		{ currentPage: 1, pageSize: 50, totalRecords: 200 },
Expand All		@@ -23,16 +23,15 @@ describe(PaginationWidgetBase.name, () => {
		);

		const prevButton = await screen.findByLabelText("Previous page");
		expect(prevButton).not.toBeDisabled();
		expect(prevButton).toHaveAttribute("aria-disabled", "true");
		expect(prevButton).toBeDisabled();

		await userEvent.click(prevButton);
		expect(onPageChange).not.toHaveBeenCalled();
		unmount();
		}
		});

		it("Should have its next button bearia-disabled while on last page", async () => {
		it("Should have its next button be disabled while on last page", async () => {
		const sampleProps: SampleProps[] = [
		{ currentPage: 2, pageSize: 5, totalRecords: 6 },
		{ currentPage: 4, pageSize: 50, totalRecords: 200 },
Expand All		@@ -46,8 +45,7 @@ describe(PaginationWidgetBase.name, () => {
		);

		const button = await screen.findByLabelText("Next page");
		expect(button).not.toBeDisabled();
		expect(button).toHaveAttribute("aria-disabled", "true");
		expect(button).toBeDisabled();

		await userEvent.click(button);
		expect(onPageChange).not.toHaveBeenCalled();
Expand All		@@ -72,13 +70,11 @@ describe(PaginationWidgetBase.name, () => {
		const nextButton = await screen.findByLabelText("Next page");

		expect(prevButton).not.toBeDisabled();
		expect(prevButton).toHaveAttribute("aria-disabled", "false");

		await userEvent.click(prevButton);
		expect(onPageChange).toHaveBeenCalledTimes(1);

		expect(nextButton).not.toBeDisabled();
		expect(nextButton).toHaveAttribute("aria-disabled", "false");

		await userEvent.click(nextButton);
		expect(onPageChange).toHaveBeenCalledTimes(2);
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -59,7 +59,7 @@ export const PaginationWidgetBase: FC<PaginationWidgetBaseProps> = ({
		}
		}}
		>
		<ChevronLeftIconclassName="size-icon-sm"/>
		<ChevronLeftIcon />
		</PaginationNavButton>

		{isMobile ? (
Expand All		@@ -86,7 +86,7 @@ export const PaginationWidgetBase: FC<PaginationWidgetBaseProps> = ({
		}
		}}
		>
		<ChevronRightIconclassName="size-icon-sm"/>
		<ChevronRightIcon />
		</PaginationNavButton>
		</div>
		);
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,7 +1,7 @@
		import DownloadOutlined from "@mui/icons-material/DownloadOutlined";
		import Button from "@mui/material/Button";
		import { agentLogs } from "api/queries/workspaces";
		import type { WorkspaceAgent, WorkspaceAgentLog } from "api/typesGenerated";
		import { Button } from "components/Button/Button";
		import { displayError } from "components/GlobalSnackbar/utils";
		import { saveAs } from "file-saver";
		import { type FC, useState } from "react";
Expand DownExpand Up		@@ -35,10 +35,9 @@ export const DownloadAgentLogsButton: FC<DownloadAgentLogsButtonProps> = ({

		return (
		<Button
		startIcon={<DownloadOutlined />}
		disabled={!isConnected \|\| isDownloading}
		variant="text"
		size="small"
		variant="subtle"
		size="sm"
		onClick={async () => {
		try {
		setIsDownloading(true);
Expand All		@@ -57,6 +56,7 @@ export const DownloadAgentLogsButton: FC<DownloadAgentLogsButtonProps> = ({
		}
		}}
		>
		<DownloadOutlined />
		{isDownloading ? "Downloading..." : "Download logs"}
		</Button>
		);
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,15 +2,13 @@ import { type Interpolation, type Theme, useTheme } from "@emotion/react";
		import LockIcon from "@mui/icons-material/Lock";
		import LockOpenIcon from "@mui/icons-material/LockOpen";
		import SensorsIcon from "@mui/icons-material/Sensors";
		import MUIButton from "@mui/material/Button";
		import CircularProgress from "@mui/material/CircularProgress";
		import FormControl from "@mui/material/FormControl";
		import Link from "@mui/material/Link";
		import MenuItem from "@mui/material/MenuItem";
		import Select from "@mui/material/Select";
		import Stack from "@mui/material/Stack";
		import TextField from "@mui/material/TextField";
		importTooltip from "@mui/material/Tooltip";
		importMUITooltip from "@mui/material/Tooltip";
		import { API } from "api/api";
		import {
		deleteWorkspacePortShare,
Expand All		@@ -33,14 +31,25 @@ import {
		HelpTooltipTitle,
		} from "components/HelpTooltip/HelpTooltip";
		import { Spinner } from "components/Spinner/Spinner";
		import {
		Tooltip,
		TooltipContent,
		TooltipProvider,
		TooltipTrigger,
		} from "components/Tooltip/Tooltip";
		import {
		Popover,
		PopoverContent,
		PopoverTrigger,
		} from "components/deprecated/Popover/Popover";
		import { type FormikContextType, useFormik } from "formik";
		import { type ClassName, useClassName } from "hooks/useClassName";
		import { ChevronDownIcon, ExternalLinkIcon, X as XIcon } from "lucide-react";
		import {
		ChevronDownIcon,
		ExternalLinkIcon,
		ShareIcon,
		X as XIcon,
		} from "lucide-react";
		import { useDashboard } from "modules/dashboard/useDashboard";
		import { type FC, useState } from "react";
		import { useMutation, useQuery } from "react-query";
Expand DownExpand Up		@@ -77,26 +86,13 @@ export const PortForwardButton: FC<PortForwardButtonProps> = (props) => {
		return (
		<Popover>
		<PopoverTrigger>
		<MUIButton
		disabled={!portsQuery.data}
		size="small"
		variant="text"
		endIcon={<ChevronDownIcon className="size-4" />}
		css={{ fontSize: 13, padding: "8px 12px" }}
		startIcon={
		portsQuery.data ? (
		<div>
		<span css={styles.portCount}>
		{portsQuery.data.ports.length}
		</span>
		</div>
		) : (
		<CircularProgress size={10} />
		)
		}
		>
		<Button disabled={!portsQuery.data} size="sm" variant="subtle">
		<Spinner loading={!portsQuery.data}>
		<span css={styles.portCount}>{portsQuery.data?.ports.length}</span>
		</Spinner>
		Open ports
		</MUIButton>
		<ChevronDownIcon className="size-4" />
		</Button>
		</PopoverTrigger>
		<PopoverContent horizontal="right" classes={{ paper }}>
		<PortForwardPopoverView
Expand DownExpand Up		@@ -203,14 +199,14 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
		canSharePorts && template.max_port_share_level === "public";

		const disabledPublicMenuItem = (
		<Tooltip title="This workspace template does not allow sharing ports with unauthenticated users.">
		<MUITooltip title="This workspace template does not allow sharing ports with unauthenticated users.">
		{/* Tooltips don't work directly on disabled MenuItem components so you must wrap in div. */}
		<div>
		<MenuItem value="public" disabled>
		Public
		</MenuItem>
		</div>
		</Tooltip>
		</MUITooltip>
		);

		return (
Expand DownExpand Up		@@ -297,24 +293,17 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
		required
		css={styles.newPortInput}
		/>
		<MUIButton
		type="submit"
		size="small"
		variant="text"
		css={{
		paddingLeft: 12,
		paddingRight: 12,
		minWidth: 0,
		}}
		>
		<ExternalLinkIcon
		className="size-icon-xs"
		css={{
		flexShrink: 0,
		color: theme.palette.text.primary,
		}}
		/>
		</MUIButton>
		<TooltipProvider>
		<Tooltip>
		<TooltipTrigger asChild>
		<Button type="submit" size="icon" variant="subtle">
		<ExternalLinkIcon />
		<span className="sr-only">Connect to port</span>
		</Button>
		</TooltipTrigger>
		<TooltipContent>Connect to port</TooltipContent>
		</Tooltip>
		</TooltipProvider>
		</form>
		</Stack>
		</Stack>
Expand DownExpand Up		@@ -369,21 +358,29 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
		alignItems="center"
		>
		{canSharePorts && (
		<MUIButton
		size="small"
		variant="text"
		onClick={async () => {
		await upsertSharedPortMutation.mutateAsync({
		agent_name: agent.name,
		port: port.port,
		protocol: listeningPortProtocol,
		share_level: "authenticated",
		});
		await sharedPortsQuery.refetch();
		}}
		>
		Share
		</MUIButton>
		<TooltipProvider>
		<Tooltip>
		<TooltipTrigger asChild>
		<Button
		size="icon"
		variant="subtle"
		onClick={async () => {
		await upsertSharedPortMutation.mutateAsync({
		agent_name: agent.name,
		port: port.port,
		protocol: listeningPortProtocol,
		share_level: "authenticated",
		});
		await sharedPortsQuery.refetch();
		}}
		>
		<ShareIcon />
		<span className="sr-only">Share</span>
		</Button>
		</TooltipTrigger>
		<TooltipContent>Share this port</TooltipContent>
		</Tooltip>
		</TooltipProvider>
		)}
		</Stack>
		</Stack>
Expand DownExpand Up		@@ -483,10 +480,9 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
		)}
		</Select>
		</FormControl>
		<MUIButton
		size="small"
		variant="text"
		css={styles.deleteButton}
		<Button
		size="sm"
		variant="subtle"
		onClick={async () => {
		await deleteSharedPortMutation.mutateAsync({
		agent_name: agent.name,
Expand All		@@ -502,7 +498,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
		color: theme.palette.text.primary,
		}}
		/>
		</MUIButton>
		</Button>
		</Stack>
		</Stack>
		);
Expand DownExpand Up		@@ -617,11 +613,6 @@ const styles = {
		},
		}),

		deleteButton: () => ({
		minWidth: 30,
		padding: 0,
		}),

		newPortForm: (theme) => ({
		border: `1px solid ${theme.palette.divider}`,
		borderRadius: "4px",
Expand Down