diff --git a/site/src/components/PaginationWidget/PageButtons.tsx b/site/src/components/PaginationWidget/PageButtons.tsx index 1e5f9ff7df18c..666720b62b913 100644 --- a/site/src/components/PaginationWidget/PageButtons.tsx +++ b/site/src/components/PaginationWidget/PageButtons.tsx @@ -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; @@ -68,23 +66,10 @@ const BasePageButton: FC = ({ highlighted = false, disabled = false, }) => { - const theme = useTheme(); - return ( ); diff --git a/site/src/modules/resources/PortForwardButton.tsx b/site/src/modules/resources/PortForwardButton.tsx index a4b8ee8277ebc..026db8601c800 100644 --- a/site/src/modules/resources/PortForwardButton.tsx +++ b/site/src/modules/resources/PortForwardButton.tsx @@ -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"; -import Tooltip from "@mui/material/Tooltip"; +import MUITooltip from "@mui/material/Tooltip"; import { API } from "api/api"; import { deleteWorkspacePortShare, @@ -33,6 +31,12 @@ import { HelpTooltipTitle, } from "components/HelpTooltip/HelpTooltip"; import { Spinner } from "components/Spinner/Spinner"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "components/Tooltip/Tooltip"; import { Popover, PopoverContent, @@ -40,7 +44,12 @@ import { } 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"; @@ -77,26 +86,13 @@ export const PortForwardButton: FC = (props) => { return ( - } - css={{ fontSize: 13, padding: "8px 12px" }} - startIcon={ - portsQuery.data ? ( -
- - {portsQuery.data.ports.length} - -
- ) : ( - - ) - } - > + = ({ canSharePorts && template.max_port_share_level === "public"; const disabledPublicMenuItem = ( - + {/* Tooltips don't work directly on disabled MenuItem components so you must wrap in div. */}
Public
- + ); return ( @@ -297,24 +293,17 @@ export const PortForwardPopoverView: FC = ({ required css={styles.newPortInput} /> - - - + + + + + + Connect to port + + @@ -369,21 +358,29 @@ export const PortForwardPopoverView: FC = ({ alignItems="center" > {canSharePorts && ( - { - await upsertSharedPortMutation.mutateAsync({ - agent_name: agent.name, - port: port.port, - protocol: listeningPortProtocol, - share_level: "authenticated", - }); - await sharedPortsQuery.refetch(); - }} - > - Share - + + + + + + Share this port + + )} @@ -483,10 +480,9 @@ export const PortForwardPopoverView: FC = ({ )} - { await deleteSharedPortMutation.mutateAsync({ agent_name: agent.name, @@ -502,7 +498,7 @@ export const PortForwardPopoverView: FC = ({ color: theme.palette.text.primary, }} /> - + ); @@ -617,11 +613,6 @@ const styles = { }, }), - deleteButton: () => ({ - minWidth: 30, - padding: 0, - }), - newPortForm: (theme) => ({ border: `1px solid ${theme.palette.divider}`, borderRadius: "4px", diff --git a/site/src/modules/resources/SSHButton/SSHButton.tsx b/site/src/modules/resources/SSHButton/SSHButton.tsx index 2673d8a8e2241..42e2b3828f3ae 100644 --- a/site/src/modules/resources/SSHButton/SSHButton.tsx +++ b/site/src/modules/resources/SSHButton/SSHButton.tsx @@ -1,5 +1,5 @@ import type { Interpolation, Theme } from "@emotion/react"; -import Button from "@mui/material/Button"; +import { Button } from "components/Button/Button"; import { CodeExample } from "components/CodeExample/CodeExample"; import { HelpTooltipLink, @@ -34,12 +34,12 @@ export const AgentSSHButton: FC = ({ @@ -96,12 +96,12 @@ export const AgentDevcontainerSSHButton: FC< diff --git a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx index f003a886552e1..bf5c03f96bd2d 100644 --- a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx +++ b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx @@ -1,7 +1,7 @@ import type { Interpolation, Theme } from "@emotion/react"; -import Button from "@mui/material/Button"; import Link from "@mui/material/Link"; import type { TemplateExample } from "api/typesGenerated"; +import { Button } from "components/Button/Button"; import { ExternalImage } from "components/ExternalImage/ExternalImage"; import { Pill } from "components/Pill/Pill"; import type { FC, HTMLAttributes } from "react"; @@ -55,12 +55,10 @@ export const TemplateExampleCard: FC = ({
-
diff --git a/site/src/pages/ChatPage/ChatLanding.tsx b/site/src/pages/ChatPage/ChatLanding.tsx index 9ce232f6b3105..fb49c609e6639 100644 --- a/site/src/pages/ChatPage/ChatLanding.tsx +++ b/site/src/pages/ChatPage/ChatLanding.tsx @@ -1,11 +1,11 @@ import { useTheme } from "@emotion/react"; -import Button from "@mui/material/Button"; import IconButton from "@mui/material/IconButton"; import Paper from "@mui/material/Paper"; import Stack from "@mui/material/Stack"; import TextField from "@mui/material/TextField"; import { createChat } from "api/queries/chats"; import type { Chat } from "api/typesGenerated"; +import { Button } from "components/Button/Button"; import { Margins } from "components/Margins/Margins"; import { useAuthenticated } from "hooks"; import { SendIcon } from "lucide-react"; @@ -89,19 +89,19 @@ const ChatLanding: FC = () => { sx={{ mb: 2 }} > - - Cancel - + @@ -151,9 +144,9 @@ const RequestOTPSuccess: FC<{ email: string }> = ({ email }) => { Contact your deployment administrator if you encounter issues.

- - Back to login - + ); diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx index 6f14cb0e38e75..c7da8332a29ab 100644 --- a/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx +++ b/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx @@ -1,7 +1,7 @@ import ExpandMoreOutlined from "@mui/icons-material/ExpandMoreOutlined"; -import Button from "@mui/material/Button"; import Menu from "@mui/material/Menu"; import MenuItem from "@mui/material/MenuItem"; +import { Button } from "components/Button/Button"; import { CheckIcon } from "lucide-react"; import { type FC, useRef, useState } from "react"; @@ -38,9 +38,10 @@ export const IntervalMenu: FC = ({ value, onChange }) => { aria-haspopup="true" aria-expanded={open ? "true" : undefined} onClick={() => setOpen(true)} - endIcon={} + variant="outline" > {insightsIntervals[value].label} + = ({ ))} - } diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index a2b32fed58e7e..d81dc4e654994 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx @@ -1,6 +1,5 @@ import type { Interpolation, Theme } from "@emotion/react"; import ArrowForwardOutlined from "@mui/icons-material/ArrowForwardOutlined"; -import MuiButton from "@mui/material/Button"; import Skeleton from "@mui/material/Skeleton"; import { hasError, isApiValidationError } from "api/errors"; import type { Template, TemplateExample } from "api/typesGenerated"; @@ -44,7 +43,7 @@ import { PlusIcon } from "lucide-react"; import { linkToTemplate, useLinks } from "modules/navigation"; import type { WorkspacePermissions } from "modules/permissions/workspaces"; import type { FC } from "react"; -import { Link, useNavigate } from "react-router-dom"; +import { Link as RouterLink, useNavigate } from "react-router-dom"; import { createDayString } from "utils/createDayString"; import { docs } from "utils/docs"; import { @@ -163,19 +162,20 @@ const TemplateRow: FC = ({ ) : workspacePermissions?.[template.organization_id] ?.createWorkspaceForUserID ? ( - } + ) : null} @@ -204,18 +204,20 @@ export const TemplatesPageView: FC = ({ const isLoading = !templates; const isEmpty = templates && templates.length === 0; - const createTemplateAction = ( - - ); - return ( - + + + + New template + + + ) + } + > Templates