From 73c3c17406ca9d7de8ec3d3208209578b4948167 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 5 May 2023 16:12:31 +0000 Subject: [PATCH 01/32] Initial changes --- site/.eslintrc.yaml | 8 +- site/.storybook/preview.jsx | 4 +- site/package.json | 9 +- site/src/app.tsx | 4 +- .../AlertBanner/AlertBanner.stories.tsx | 4 +- .../components/AlertBanner/AlertBanner.tsx | 4 +- .../AlertBanner/AlertBannerCtas.tsx | 4 +- .../AlertBanner/severityConstants.tsx | 6 +- site/src/components/AppLink/AppLink.tsx | 10 +- .../components/AppLink/AppLinkSkeleton.tsx | 2 +- .../src/components/AppLink/AppPreviewLink.tsx | 2 +- site/src/components/AppLink/BaseIcon.tsx | 2 +- site/src/components/AppLink/ShareIcon.tsx | 8 +- .../AuditLogDescription.tsx | 2 +- .../BuildAuditDescription.tsx | 2 +- .../AuditLogRow/AuditLogDiff/AuditLogDiff.tsx | 2 +- .../AuditLogRow/AuditLogRow.stories.tsx | 12 +- .../components/AuditLogRow/AuditLogRow.tsx | 6 +- site/src/components/Avatar/Avatar.stories.tsx | 2 +- site/src/components/Avatar/Avatar.tsx | 6 +- site/src/components/AvatarData/AvatarData.tsx | 2 +- .../components/BorderedMenu/BorderedMenu.tsx | 4 +- .../BorderedMenuRow/BorderedMenuRow.tsx | 8 +- .../components/BuildsTable/BuildAvatar.tsx | 10 +- site/src/components/BuildsTable/BuildRow.tsx | 4 +- .../components/BuildsTable/BuildsTable.tsx | 12 +- site/src/components/CodeBlock/CodeBlock.tsx | 2 +- .../components/CodeExample/CodeExample.tsx | 2 +- site/src/components/CopyButton/CopyButton.tsx | 8 +- .../CopyableValue/CopyableValue.tsx | 4 +- .../CreateUserForm/CreateUserForm.tsx | 2 +- site/src/components/DAUChart/DAUChart.tsx | 4 +- .../components/Dashboard/DashboardLayout.tsx | 2 +- .../DeploySettingsLayout/Badges.tsx | 2 +- .../DeploySettingsLayout.tsx | 2 +- .../DeploySettingsLayout/Fieldset.tsx | 4 +- .../DeploySettingsLayout/Header.tsx | 6 +- .../DeploySettingsLayout/Option.tsx | 2 +- .../DeploySettingsLayout/OptionsTable.tsx | 14 +- .../DeploySettingsLayout/Sidebar.tsx | 14 +- .../DeploymentBanner/DeploymentBannerView.tsx | 22 +- .../Dialogs/ConfirmDialog/ConfirmDialog.tsx | 4 +- .../Dialogs/DeleteDialog/DeleteDialog.tsx | 4 +- site/src/components/Dialogs/Dialog.tsx | 6 +- .../ResetPasswordDialog.tsx | 2 +- .../DropdownArrows/DropdownArrows.tsx | 6 +- .../EditRolesButton/EditRolesButton.tsx | 10 +- site/src/components/EmptyState/EmptyState.tsx | 6 +- .../EnterpriseSnackbar/EnterpriseSnackbar.tsx | 8 +- site/src/components/Expander/Expander.tsx | 6 +- site/src/components/FileUpload/FileUpload.tsx | 12 +- site/src/components/Form/Form.tsx | 2 +- .../FormCloseButton/FormCloseButton.tsx | 6 +- site/src/components/FormFooter/FormFooter.tsx | 6 +- .../FullPageForm/FullPageForm.stories.tsx | 2 +- .../components/FullPageForm/FullPageForm.tsx | 2 +- .../FullPageForm/FullPageHorizontalForm.tsx | 2 +- site/src/components/GitAuth/GitAuth.tsx | 12 +- .../GlobalSnackbar/GlobalSnackbar.tsx | 2 +- .../components/GroupAvatar/GroupAvatar.tsx | 6 +- site/src/components/IconField/IconField.tsx | 10 +- site/src/components/IconField/types.ts | 2 +- site/src/components/Icons/AzureDevOpsIcon.tsx | 2 +- site/src/components/Icons/BitbucketIcon.tsx | 2 +- site/src/components/Icons/BuildingIcon.tsx | 2 +- site/src/components/Icons/CloseIcon.tsx | 2 +- site/src/components/Icons/CoderIcon.tsx | 2 +- site/src/components/Icons/DockerIcon.tsx | 2 +- site/src/components/Icons/EditSquare.tsx | 2 +- site/src/components/Icons/ErrorIcon.tsx | 2 +- site/src/components/Icons/FileCopyIcon.tsx | 2 +- site/src/components/Icons/GitIcon.tsx | 2 +- site/src/components/Icons/GitlabIcon.tsx | 2 +- site/src/components/Icons/MarkdownIcon.tsx | 2 +- site/src/components/Icons/RocketIcon.tsx | 2 +- site/src/components/Icons/TerminalIcon.tsx | 2 +- site/src/components/Icons/TerraformIcon.tsx | 2 +- .../components/Icons/UsersOutlinedIcon.tsx | 2 +- site/src/components/Icons/VSCodeIcon.tsx | 2 +- site/src/components/LastUsed/LastUsed.tsx | 2 +- .../LicenseBanner/LicenseBannerView.tsx | 2 +- .../components/LicenseCard/LicenseCard.tsx | 8 +- .../components/Loader/FullScreenLoader.tsx | 4 +- site/src/components/Loader/Loader.tsx | 4 +- .../LoadingButton/LoadingButton.tsx | 8 +- site/src/components/Logs/Logs.tsx | 2 +- site/src/components/Margins/Margins.tsx | 2 +- site/src/components/Markdown/Markdown.tsx | 16 +- .../MultiTextField/MultiTextField.tsx | 6 +- site/src/components/NavbarView/NavbarView.tsx | 12 +- .../PageHeader/FullWidthPageHeader.tsx | 2 +- site/src/components/PageHeader/PageHeader.tsx | 2 +- .../PaginationWidget/PageButton.tsx | 4 +- .../PaginationWidget/PaginationWidget.tsx | 10 +- .../PaginationWidget/PaginationWidgetBase.tsx | 10 +- .../ParameterInput/ParameterInput.tsx | 12 +- .../PasswordField/PasswordField.tsx | 12 +- site/src/components/Paywall/Paywall.tsx | 8 +- site/src/components/Pill/Pill.tsx | 2 +- .../PortForwardButton/PortForwardButton.tsx | 10 +- site/src/components/Resources/AgentButton.tsx | 4 +- .../src/components/Resources/AgentLatency.tsx | 2 +- .../components/Resources/AgentMetadata.tsx | 2 +- site/src/components/Resources/AgentRow.tsx | 8 +- .../components/Resources/AgentRowPreview.tsx | 2 +- site/src/components/Resources/AgentStatus.tsx | 8 +- .../src/components/Resources/AgentVersion.tsx | 2 +- .../src/components/Resources/ResourceCard.tsx | 6 +- site/src/components/Resources/Resources.tsx | 4 +- .../components/Resources/SensitiveValue.tsx | 10 +- .../RichParameterInput/RichParameterInput.tsx | 10 +- .../RuntimeErrorState/RuntimeErrorReport.tsx | 2 +- .../RuntimeErrorState/RuntimeErrorState.tsx | 8 +- .../RuntimeErrorState/createCtas.tsx | 6 +- site/src/components/SSHButton/SSHButton.tsx | 4 +- .../SearchBarWithFilter.tsx | 18 +- .../components/Section/Section.stories.tsx | 4 +- site/src/components/Section/Section.tsx | 4 +- .../SectionAction/SectionAction.tsx | 2 +- .../ServiceBanner/ServiceBannerView.tsx | 2 +- .../SettingsAccountForm.tsx | 2 +- .../src/components/SettingsLayout/Section.tsx | 4 +- .../SettingsLayout/SettingsLayout.tsx | 2 +- .../src/components/SettingsLayout/Sidebar.tsx | 12 +- .../SettingsSecurityForm.tsx | 2 +- .../components/SignInForm/OAuthSignInForm.tsx | 12 +- .../SignInForm/PasswordSignInForm.tsx | 2 +- site/src/components/SignInForm/SignInForm.tsx | 6 +- .../components/SignInLayout/SignInLayout.tsx | 2 +- site/src/components/Stack/Stack.stories.tsx | 2 +- site/src/components/Stack/Stack.tsx | 4 +- site/src/components/Stats/Stats.tsx | 2 +- .../SyntaxHighlighter/SyntaxHighlighter.tsx | 2 +- .../SyntaxHighlighter/coderTheme.ts | 2 +- site/src/components/TabPanel/TabPanel.tsx | 4 +- site/src/components/TabSidebar/TabSidebar.tsx | 6 +- .../TableCellLink/TableCellLink.tsx | 6 +- site/src/components/TableEmpty/TableEmpty.tsx | 6 +- .../components/TableLoader/TableLoader.tsx | 6 +- .../components/TableRowMenu/TableRowMenu.tsx | 8 +- .../TemplateExampleCard.tsx | 2 +- .../TemplateFiles/TemplateFiles.tsx | 2 +- .../TemplateLayout/TemplateLayout.tsx | 2 +- .../TemplateLayout/TemplatePageHeader.tsx | 18 +- .../TemplateVariableField.tsx | 8 +- .../TemplateVersionEditor/FileDialog.tsx | 4 +- .../TemplateVersionEditor/FileTreeView.tsx | 10 +- .../MissingTemplateVariablesDialog.tsx | 14 +- .../TemplateVersionEditor/MonacoEditor.tsx | 2 +- .../PublishTemplateVersionDialog.tsx | 6 +- .../TemplateVersionEditor.tsx | 14 +- .../TemplateVersionStatusBadge.tsx | 6 +- .../components/TerminalLink/TerminalLink.tsx | 2 +- .../components/Timeline/TimelineDateRow.tsx | 6 +- .../src/components/Timeline/TimelineEntry.tsx | 4 +- .../Tooltips/AgentOutdatedTooltip.tsx | 4 +- .../Tooltips/HelpTooltip/HelpTooltip.tsx | 10 +- .../Tooltips/OutdatedHelpTooltip.tsx | 6 +- site/src/components/Typography/Typography.tsx | 4 +- .../UpdateCheckBanner/UpdateCheckBanner.tsx | 2 +- .../UserAutocomplete/UserAutocomplete.tsx | 6 +- site/src/components/UserCell/UserCell.tsx | 8 +- .../UserDropdown/UserDropdown.stories.tsx | 2 +- .../components/UserDropdown/UsersDropdown.tsx | 6 +- .../UserDropdownContent.tsx | 18 +- .../UserOrGroupAutocomplete.tsx | 6 +- .../components/UsersLayout/UsersLayout.tsx | 10 +- site/src/components/UsersTable/UsersTable.tsx | 12 +- .../components/UsersTable/UsersTableBody.tsx | 8 +- .../components/VersionsTable/VersionRow.tsx | 6 +- .../VersionsTable/VersionsTable.tsx | 12 +- .../WarningAlert/WarningAlert.stories.tsx | 2 +- .../components/WarningAlert/WarningAlert.tsx | 8 +- site/src/components/Welcome/Welcome.tsx | 4 +- site/src/components/Workspace/Workspace.tsx | 6 +- .../components/WorkspaceActions/Buttons.tsx | 12 +- .../WorkspaceActions/WorkspaceActions.tsx | 16 +- .../WorkspaceBuildLogs/WorkspaceBuildLogs.tsx | 2 +- .../WorkspaceBuildProgress.tsx | 4 +- .../WorkspaceDeletedBanner.tsx | 2 +- .../WorkspaceSchedule/WorkspaceSchedule.tsx | 4 +- .../WorkspaceScheduleForm.tsx | 20 +- .../WorkspaceSection.stories.tsx | 4 +- .../WorkspaceSection/WorkspaceSection.tsx | 6 +- .../WorkspaceStats/WorkspaceStats.tsx | 16 +- .../WorkspaceStatusBadge.tsx | 12 +- .../WorkspacesTable/WorkspacesRow.tsx | 8 +- .../WorkspacesTable/WorkspacesTable.tsx | 12 +- .../WorkspacesTable/WorkspacesTableBody.tsx | 8 +- site/src/hooks/useClickableTableRow.ts | 2 +- site/src/pages/404Page/404Page.tsx | 4 +- site/src/pages/AuditPage/AuditPageView.tsx | 10 +- site/src/pages/AuditPage/AuditPaywall.tsx | 6 +- .../src/pages/CliAuthPage/CliAuthPageView.tsx | 4 +- .../CreateTemplatePage/CreateTemplateForm.tsx | 8 +- .../CreateTemplatePage/TemplateUpload.tsx | 2 +- .../CreateTemplatePage/VariableInput.tsx | 10 +- .../pages/CreateTokenPage/CreateTokenForm.tsx | 6 +- .../pages/CreateTokenPage/CreateTokenPage.tsx | 2 +- .../CreateWorkspacePageView.tsx | 4 +- .../CreateWorkspacePage/SelectedTemplate.tsx | 2 +- .../AppearanceSettingsPageView.tsx | 16 +- .../GitAuthSettingsPageView.tsx | 14 +- .../AddNewLicensePageView.tsx | 6 +- .../LicensesSettingsPage/DividerWithText.tsx | 2 +- .../LicensesSettingsPageView.tsx | 4 +- site/src/pages/GitAuthPage/GitAuthPage.tsx | 4 +- .../pages/GroupsPage/CreateGroupPageView.tsx | 2 +- site/src/pages/GroupsPage/GroupPage.tsx | 24 +- site/src/pages/GroupsPage/GroupsPageView.tsx | 24 +- .../GroupsPage/SettingsGroupPageView.tsx | 2 +- site/src/pages/LoginPage/LoginPageView.tsx | 2 +- site/src/pages/SetupPage/SetupPageView.tsx | 10 +- .../StarterTemplatePageView.tsx | 8 +- .../StarterTemplatesPageView.tsx | 2 +- .../TemplateDocsPage/TemplateDocsPage.tsx | 2 +- .../TemplateSummaryPageView.tsx | 2 +- .../pages/TemplateSettingsPage/Sidebar.tsx | 10 +- .../TemplateSettingsForm.tsx | 6 +- .../TemplateSettingsPageView.tsx | 2 +- .../TemplatePermissionsPage.tsx | 6 +- .../TemplatePermissionsPageView.tsx | 20 +- .../TemplateScheduleForm.tsx | 12 +- .../TemplateSchedulePageView.tsx | 2 +- .../TemplateSettingsLayout.tsx | 2 +- .../TemplateVariablesPageView.tsx | 2 +- .../TemplateVersionPageView.tsx | 6 +- .../pages/TemplatesPage/EmptyTemplates.tsx | 6 +- .../pages/TemplatesPage/TemplatesPageView.tsx | 22 +- site/src/pages/TerminalPage/TerminalPage.tsx | 8 +- .../SSHKeysPage/SSHKeysPageView.tsx | 8 +- .../TokensPage/TokensPage.tsx | 6 +- .../TokensPage/TokensPageView.tsx | 18 +- .../WorkspaceProxyPage/WorkspaceProxyPage.tsx | 2 +- .../WorkspaceProxyPage/WorkspaceProxyRow.tsx | 6 +- .../WorkspaceProxyPage/WorkspaceProxyView.tsx | 12 +- .../WorkspaceBuildStateError.tsx | 2 +- .../WorkspacePage/ChangeVersionDialog.tsx | 4 +- .../UpdateBuildParametersDialog.tsx | 14 +- .../src/pages/WorkspacePage/WorkspacePage.tsx | 2 +- .../pages/WorkspaceSettingsPage/Sidebar.tsx | 8 +- .../WorkspaceParametersPage.tsx | 2 +- .../WorkspaceSchedulePage.tsx | 2 +- .../WorkspaceSettingsForm.tsx | 2 +- .../WorkspaceSettingsLayout.tsx | 2 +- .../WorkspaceSettingsPageView.tsx | 2 +- .../WorkspacesPage/WorkspacesPageView.tsx | 2 +- site/src/theme/overrides.ts | 8 +- site/src/theme/palettes.ts | 4 +- site/src/theme/props.ts | 2 +- site/src/theme/theme.ts | 8 +- site/src/theme/typography.ts | 2 +- site/src/utils/schedule.ts | 4 +- site/src/utils/workspace.ts | 2 +- site/yarn.lock | 430 +++++++++++++----- 255 files changed, 1059 insertions(+), 866 deletions(-) diff --git a/site/.eslintrc.yaml b/site/.eslintrc.yaml index e2d09dc4b192f..66b02ebc6bda2 100644 --- a/site/.eslintrc.yaml +++ b/site/.eslintrc.yaml @@ -113,19 +113,19 @@ rules: no-restricted-imports: - error - paths: - - name: "@material-ui/core" + - name: "@mui/material" message: "Use path imports to avoid pulling in unused modules. See: https://material-ui.com/guides/minimizing-bundle-size/" - - name: "@material-ui/icons" + - name: "@mui/icons-material" message: "Use path imports to avoid pulling in unused modules. See: https://material-ui.com/guides/minimizing-bundle-size/" - - name: "@material-ui/styles" + - name: "@mui/styles" message: "Use path imports to avoid pulling in unused modules. See: https://material-ui.com/guides/minimizing-bundle-size/" - - name: "@material-ui/core/Avatar" + - name: "@mui/material/Avatar" message: "You should use the Avatar component provided on components/Avatar/Avatar" diff --git a/site/.storybook/preview.jsx b/site/.storybook/preview.jsx index 648d69e3acabd..4b35e4007d00b 100644 --- a/site/.storybook/preview.jsx +++ b/site/.storybook/preview.jsx @@ -1,5 +1,5 @@ -import CssBaseline from "@material-ui/core/CssBaseline" -import ThemeProvider from "@material-ui/styles/ThemeProvider" +import CssBaseline from "@mui/material/CssBaseline" +import ThemeProvider from "@mui/styles/ThemeProvider" import { createMemoryHistory } from "history" import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom" import { dark } from "../src/theme" diff --git a/site/package.json b/site/package.json index 73a4a8d7b0323..12154bfd802c2 100644 --- a/site/package.json +++ b/site/package.json @@ -30,12 +30,15 @@ "dependencies": { "@emoji-mart/data": "1.0.5", "@emoji-mart/react": "1.0.1", + "@emotion/react": "^11.10.8", + "@emotion/styled": "^11.10.8", "@fontsource/ibm-plex-mono": "4.5.10", "@fontsource/inter": "4.5.11", - "@material-ui/core": "4.12.1", - "@material-ui/icons": "4.5.1", - "@material-ui/lab": "4.0.0-alpha.42", "@monaco-editor/react": "4.5.0", + "@mui/icons-material": "^5.11.16", + "@mui/lab": "^5.0.0-alpha.129", + "@mui/material": "^5.12.3", + "@mui/styles": "^5.12.3", "@tanstack/react-query": "4.22.4", "@testing-library/react-hooks": "8.0.1", "@types/color-convert": "2.0.0", diff --git a/site/src/app.tsx b/site/src/app.tsx index 21f2690644376..4e0f15ab6d986 100644 --- a/site/src/app.tsx +++ b/site/src/app.tsx @@ -1,5 +1,5 @@ -import CssBaseline from "@material-ui/core/CssBaseline" -import ThemeProvider from "@material-ui/styles/ThemeProvider" +import CssBaseline from "@mui/material/CssBaseline" +import ThemeProvider from "@mui/styles/ThemeProvider" import { QueryClient, QueryClientProvider } from "@tanstack/react-query" import { AuthProvider } from "components/AuthProvider/AuthProvider" import { FC, PropsWithChildren } from "react" diff --git a/site/src/components/AlertBanner/AlertBanner.stories.tsx b/site/src/components/AlertBanner/AlertBanner.stories.tsx index 967e331b31167..ccfa093e93826 100644 --- a/site/src/components/AlertBanner/AlertBanner.stories.tsx +++ b/site/src/components/AlertBanner/AlertBanner.stories.tsx @@ -1,9 +1,9 @@ import { Story } from "@storybook/react" import { AlertBanner } from "./AlertBanner" -import Button from "@material-ui/core/Button" +import Button from "@mui/material/Button" import { mockApiError } from "testHelpers/entities" import { AlertBannerProps } from "./alertTypes" -import Link from "@material-ui/core/Link" +import Link from "@mui/material/Link" export default { title: "components/AlertBanner", diff --git a/site/src/components/AlertBanner/AlertBanner.tsx b/site/src/components/AlertBanner/AlertBanner.tsx index 937d0d5b6a5d1..a952fee7b795c 100644 --- a/site/src/components/AlertBanner/AlertBanner.tsx +++ b/site/src/components/AlertBanner/AlertBanner.tsx @@ -1,7 +1,7 @@ import { useState, FC, Children } from "react" -import Collapse from "@material-ui/core/Collapse" +import Collapse from "@mui/material/Collapse" import { Stack } from "components/Stack/Stack" -import { makeStyles, Theme } from "@material-ui/core/styles" +import { makeStyles, Theme } from "@mui/material/styles" import { colors } from "theme/colors" import { useTranslation } from "react-i18next" import { getErrorDetail, getErrorMessage } from "api/errors" diff --git a/site/src/components/AlertBanner/AlertBannerCtas.tsx b/site/src/components/AlertBanner/AlertBannerCtas.tsx index e430f5ae4fcd4..f629d1e319c0b 100644 --- a/site/src/components/AlertBanner/AlertBannerCtas.tsx +++ b/site/src/components/AlertBanner/AlertBannerCtas.tsx @@ -1,8 +1,8 @@ import { FC } from "react" import { AlertBannerProps } from "./alertTypes" import { Stack } from "components/Stack/Stack" -import Button from "@material-ui/core/Button" -import RefreshIcon from "@material-ui/icons/Refresh" +import Button from "@mui/material/Button" +import RefreshIcon from "@mui/icons-material/Refresh" import { useTranslation } from "react-i18next" type AlertBannerCtasProps = Pick< diff --git a/site/src/components/AlertBanner/severityConstants.tsx b/site/src/components/AlertBanner/severityConstants.tsx index bb8dfc21e04aa..7924c1a491b82 100644 --- a/site/src/components/AlertBanner/severityConstants.tsx +++ b/site/src/components/AlertBanner/severityConstants.tsx @@ -1,6 +1,6 @@ -import ReportProblemOutlinedIcon from "@material-ui/icons/ReportProblemOutlined" -import ErrorOutlineOutlinedIcon from "@material-ui/icons/ErrorOutlineOutlined" -import InfoOutlinedIcon from "@material-ui/icons/InfoOutlined" +import ReportProblemOutlinedIcon from "@mui/icons-material/ReportProblemOutlined" +import ErrorOutlineOutlinedIcon from "@mui/icons-material/ErrorOutlineOutlined" +import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined" import { colors } from "theme/colors" import { Severity } from "./alertTypes" import { ReactElement } from "react" diff --git a/site/src/components/AppLink/AppLink.tsx b/site/src/components/AppLink/AppLink.tsx index 5b2b582634dfd..23288120efb2b 100644 --- a/site/src/components/AppLink/AppLink.tsx +++ b/site/src/components/AppLink/AppLink.tsx @@ -1,8 +1,8 @@ -import CircularProgress from "@material-ui/core/CircularProgress" -import Link from "@material-ui/core/Link" -import { makeStyles } from "@material-ui/core/styles" -import Tooltip from "@material-ui/core/Tooltip" -import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline" +import CircularProgress from "@mui/material/CircularProgress" +import Link from "@mui/material/Link" +import { makeStyles } from "@mui/material/styles" +import Tooltip from "@mui/material/Tooltip" +import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline" import { PrimaryAgentButton } from "components/Resources/AgentButton" import { FC } from "react" import { combineClasses } from "utils/combineClasses" diff --git a/site/src/components/AppLink/AppLinkSkeleton.tsx b/site/src/components/AppLink/AppLinkSkeleton.tsx index 4da189b44e0b3..f2a8fdc5614e3 100644 --- a/site/src/components/AppLink/AppLinkSkeleton.tsx +++ b/site/src/components/AppLink/AppLinkSkeleton.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { Skeleton } from "@material-ui/lab" import { FC } from "react" import { borderRadiusSm } from "theme/constants" diff --git a/site/src/components/AppLink/AppPreviewLink.tsx b/site/src/components/AppLink/AppPreviewLink.tsx index c218e8892d2a3..910b678bccf53 100644 --- a/site/src/components/AppLink/AppPreviewLink.tsx +++ b/site/src/components/AppLink/AppPreviewLink.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { Stack } from "components/Stack/Stack" import { FC } from "react" import * as TypesGen from "api/typesGenerated" diff --git a/site/src/components/AppLink/BaseIcon.tsx b/site/src/components/AppLink/BaseIcon.tsx index f0ab07658574f..775b0ec920844 100644 --- a/site/src/components/AppLink/BaseIcon.tsx +++ b/site/src/components/AppLink/BaseIcon.tsx @@ -1,6 +1,6 @@ import { WorkspaceApp } from "api/typesGenerated" import { FC } from "react" -import ComputerIcon from "@material-ui/icons/Computer" +import ComputerIcon from "@mui/icons-material/Computer" export const BaseIcon: FC<{ app: WorkspaceApp }> = ({ app }) => { return app.icon ? ( diff --git a/site/src/components/AppLink/ShareIcon.tsx b/site/src/components/AppLink/ShareIcon.tsx index 635d03bc8d7de..9e3f86aa44b86 100644 --- a/site/src/components/AppLink/ShareIcon.tsx +++ b/site/src/components/AppLink/ShareIcon.tsx @@ -1,8 +1,8 @@ -import PublicOutlinedIcon from "@material-ui/icons/PublicOutlined" -import GroupOutlinedIcon from "@material-ui/icons/GroupOutlined" -import LaunchOutlinedIcon from "@material-ui/icons/LaunchOutlined" +import PublicOutlinedIcon from "@mui/icons-material/PublicOutlined" +import GroupOutlinedIcon from "@mui/icons-material/GroupOutlined" +import LaunchOutlinedIcon from "@mui/icons-material/LaunchOutlined" import * as TypesGen from "../../api/typesGenerated" -import Tooltip from "@material-ui/core/Tooltip" +import Tooltip from "@mui/material/Tooltip" import { useTranslation } from "react-i18next" export interface ShareIconProps { diff --git a/site/src/components/AuditLogRow/AuditLogDescription/AuditLogDescription.tsx b/site/src/components/AuditLogRow/AuditLogDescription/AuditLogDescription.tsx index 4e20ee9541be5..7680a98d60163 100644 --- a/site/src/components/AuditLogRow/AuditLogDescription/AuditLogDescription.tsx +++ b/site/src/components/AuditLogRow/AuditLogDescription/AuditLogDescription.tsx @@ -1,7 +1,7 @@ import { FC } from "react" import { AuditLog } from "api/typesGenerated" import { Link as RouterLink } from "react-router-dom" -import Link from "@material-ui/core/Link" +import Link from "@mui/material/Link" import { Trans, useTranslation } from "react-i18next" import { BuildAuditDescription } from "./BuildAuditDescription" diff --git a/site/src/components/AuditLogRow/AuditLogDescription/BuildAuditDescription.tsx b/site/src/components/AuditLogRow/AuditLogDescription/BuildAuditDescription.tsx index 0bce7f981ca71..41c0cfc7ef7bb 100644 --- a/site/src/components/AuditLogRow/AuditLogDescription/BuildAuditDescription.tsx +++ b/site/src/components/AuditLogRow/AuditLogDescription/BuildAuditDescription.tsx @@ -2,7 +2,7 @@ import { Trans, useTranslation } from "react-i18next" import { AuditLog } from "api/typesGenerated" import { FC } from "react" import { Link as RouterLink } from "react-router-dom" -import Link from "@material-ui/core/Link" +import Link from "@mui/material/Link" export const BuildAuditDescription: FC<{ auditLog: AuditLog }> = ({ auditLog, diff --git a/site/src/components/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx b/site/src/components/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx index bcb6dd7920793..885340d00cfd0 100644 --- a/site/src/components/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx +++ b/site/src/components/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { AuditLog } from "api/typesGenerated" import { colors } from "theme/colors" import { MONOSPACE_FONT_FAMILY } from "theme/constants" diff --git a/site/src/components/AuditLogRow/AuditLogRow.stories.tsx b/site/src/components/AuditLogRow/AuditLogRow.stories.tsx index 4e75cb7a747ef..136c280b85bb7 100644 --- a/site/src/components/AuditLogRow/AuditLogRow.stories.tsx +++ b/site/src/components/AuditLogRow/AuditLogRow.stories.tsx @@ -1,9 +1,9 @@ -import Table from "@material-ui/core/Table" -import TableBody from "@material-ui/core/TableBody" -import TableCell from "@material-ui/core/TableCell" -import TableContainer from "@material-ui/core/TableContainer" -import TableHead from "@material-ui/core/TableHead" -import TableRow from "@material-ui/core/TableRow" +import Table from "@mui/material/Table" +import TableBody from "@mui/material/TableBody" +import TableCell from "@mui/material/TableCell" +import TableContainer from "@mui/material/TableContainer" +import TableHead from "@mui/material/TableHead" +import TableRow from "@mui/material/TableRow" import { ComponentMeta, Story } from "@storybook/react" import { MockAuditLog, diff --git a/site/src/components/AuditLogRow/AuditLogRow.tsx b/site/src/components/AuditLogRow/AuditLogRow.tsx index c052d5de43fc6..89ed3dd86d866 100644 --- a/site/src/components/AuditLogRow/AuditLogRow.tsx +++ b/site/src/components/AuditLogRow/AuditLogRow.tsx @@ -1,6 +1,6 @@ -import Collapse from "@material-ui/core/Collapse" -import { makeStyles } from "@material-ui/core/styles" -import TableCell from "@material-ui/core/TableCell" +import Collapse from "@mui/material/Collapse" +import { makeStyles } from "@mui/material/styles" +import TableCell from "@mui/material/TableCell" import { AuditLog } from "api/typesGenerated" import { CloseDropdown, diff --git a/site/src/components/Avatar/Avatar.stories.tsx b/site/src/components/Avatar/Avatar.stories.tsx index aedeb8d1a27ff..c7b2fc1513230 100644 --- a/site/src/components/Avatar/Avatar.stories.tsx +++ b/site/src/components/Avatar/Avatar.stories.tsx @@ -1,6 +1,6 @@ import { Story } from "@storybook/react" import { Avatar, AvatarIcon, AvatarProps } from "./Avatar" -import PauseIcon from "@material-ui/icons/PauseOutlined" +import PauseIcon from "@mui/icons-material/PauseOutlined" export default { title: "components/Avatar", diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx index 02e6964d39359..b8ce684e61bdc 100644 --- a/site/src/components/Avatar/Avatar.tsx +++ b/site/src/components/Avatar/Avatar.tsx @@ -1,9 +1,7 @@ // This is the only place MuiAvatar can be used // eslint-disable-next-line no-restricted-imports -- Read above -import MuiAvatar, { - AvatarProps as MuiAvatarProps, -} from "@material-ui/core/Avatar" -import { makeStyles } from "@material-ui/core/styles" +import MuiAvatar, { AvatarProps as MuiAvatarProps } from "@mui/material/Avatar" +import { makeStyles } from "@mui/material/styles" import { FC } from "react" import { combineClasses } from "utils/combineClasses" import { firstLetter } from "./firstLetter" diff --git a/site/src/components/AvatarData/AvatarData.tsx b/site/src/components/AvatarData/AvatarData.tsx index 324a1d828060d..802b7da50e007 100644 --- a/site/src/components/AvatarData/AvatarData.tsx +++ b/site/src/components/AvatarData/AvatarData.tsx @@ -1,7 +1,7 @@ import { Avatar } from "components/Avatar/Avatar" import { FC, PropsWithChildren } from "react" import { Stack } from "components/Stack/Stack" -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" export interface AvatarDataProps { title: string | JSX.Element diff --git a/site/src/components/BorderedMenu/BorderedMenu.tsx b/site/src/components/BorderedMenu/BorderedMenu.tsx index 226115ab4bb63..258ca48da71d9 100644 --- a/site/src/components/BorderedMenu/BorderedMenu.tsx +++ b/site/src/components/BorderedMenu/BorderedMenu.tsx @@ -1,5 +1,5 @@ -import Popover, { PopoverProps } from "@material-ui/core/Popover" -import { makeStyles } from "@material-ui/core/styles" +import Popover, { PopoverProps } from "@mui/material/Popover" +import { makeStyles } from "@mui/material/styles" import { FC, PropsWithChildren } from "react" type BorderedMenuVariant = "user-dropdown" diff --git a/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx b/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx index 2d71ece661449..079fe89250a86 100644 --- a/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx +++ b/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx @@ -1,7 +1,7 @@ -import ListItem from "@material-ui/core/ListItem" -import { makeStyles } from "@material-ui/core/styles" -import SvgIcon from "@material-ui/core/SvgIcon" -import CheckIcon from "@material-ui/icons/Check" +import ListItem from "@mui/material/ListItem" +import { makeStyles } from "@mui/material/styles" +import SvgIcon from "@mui/material/SvgIcon" +import CheckIcon from "@mui/icons-material/Check" import { FC } from "react" import { NavLink } from "react-router-dom" import { ellipsizeText } from "../../utils/ellipsizeText" diff --git a/site/src/components/BuildsTable/BuildAvatar.tsx b/site/src/components/BuildsTable/BuildAvatar.tsx index dd5d0743131ca..b6f39ab7d234c 100644 --- a/site/src/components/BuildsTable/BuildAvatar.tsx +++ b/site/src/components/BuildsTable/BuildAvatar.tsx @@ -1,9 +1,9 @@ -import Badge from "@material-ui/core/Badge" -import { Theme, useTheme, withStyles } from "@material-ui/core/styles" +import Badge from "@mui/material/Badge" +import { Theme, useTheme, withStyles } from "@mui/material/styles" import { FC } from "react" -import PlayArrowOutlined from "@material-ui/icons/PlayArrowOutlined" -import PauseOutlined from "@material-ui/icons/PauseOutlined" -import DeleteOutlined from "@material-ui/icons/DeleteOutlined" +import PlayArrowOutlined from "@mui/icons-material/PlayArrowOutlined" +import PauseOutlined from "@mui/icons-material/PauseOutlined" +import DeleteOutlined from "@mui/icons-material/DeleteOutlined" import { WorkspaceBuild, WorkspaceTransition } from "api/typesGenerated" import { getDisplayWorkspaceBuildStatus } from "utils/workspace" import { PaletteIndex } from "theme/palettes" diff --git a/site/src/components/BuildsTable/BuildRow.tsx b/site/src/components/BuildsTable/BuildRow.tsx index ecc6b71530c6a..e00d416591ebc 100644 --- a/site/src/components/BuildsTable/BuildRow.tsx +++ b/site/src/components/BuildsTable/BuildRow.tsx @@ -1,5 +1,5 @@ -import { makeStyles } from "@material-ui/core/styles" -import TableCell from "@material-ui/core/TableCell" +import { makeStyles } from "@mui/material/styles" +import TableCell from "@mui/material/TableCell" import { WorkspaceBuild } from "api/typesGenerated" import { Stack } from "components/Stack/Stack" import { TimelineEntry } from "components/Timeline/TimelineEntry" diff --git a/site/src/components/BuildsTable/BuildsTable.tsx b/site/src/components/BuildsTable/BuildsTable.tsx index 9ccd57d4ea675..2ea2dca2dda6a 100644 --- a/site/src/components/BuildsTable/BuildsTable.tsx +++ b/site/src/components/BuildsTable/BuildsTable.tsx @@ -1,9 +1,9 @@ -import Box from "@material-ui/core/Box" -import Table from "@material-ui/core/Table" -import TableBody from "@material-ui/core/TableBody" -import TableCell from "@material-ui/core/TableCell" -import TableContainer from "@material-ui/core/TableContainer" -import TableRow from "@material-ui/core/TableRow" +import Box from "@mui/material/Box" +import Table from "@mui/material/Table" +import TableBody from "@mui/material/TableBody" +import TableCell from "@mui/material/TableCell" +import TableContainer from "@mui/material/TableContainer" +import TableRow from "@mui/material/TableRow" import { Timeline } from "components/Timeline/Timeline" import { FC } from "react" import * as TypesGen from "../../api/typesGenerated" diff --git a/site/src/components/CodeBlock/CodeBlock.tsx b/site/src/components/CodeBlock/CodeBlock.tsx index b078aa8f44290..c66520c8a98ae 100644 --- a/site/src/components/CodeBlock/CodeBlock.tsx +++ b/site/src/components/CodeBlock/CodeBlock.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { FC, Fragment, ReactElement } from "react" import { MONOSPACE_FONT_FAMILY } from "../../theme/constants" import { combineClasses } from "../../utils/combineClasses" diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx index 2a730181a1f76..803b78108a419 100644 --- a/site/src/components/CodeExample/CodeExample.tsx +++ b/site/src/components/CodeExample/CodeExample.tsx @@ -1,4 +1,4 @@ -import { makeStyles, Theme } from "@material-ui/core/styles" +import { makeStyles, Theme } from "@mui/material/styles" import { FC } from "react" import { MONOSPACE_FONT_FAMILY } from "../../theme/constants" import { combineClasses } from "../../utils/combineClasses" diff --git a/site/src/components/CopyButton/CopyButton.tsx b/site/src/components/CopyButton/CopyButton.tsx index 82c9dd0890705..e5c4853474d08 100644 --- a/site/src/components/CopyButton/CopyButton.tsx +++ b/site/src/components/CopyButton/CopyButton.tsx @@ -1,7 +1,7 @@ -import IconButton from "@material-ui/core/Button" -import { makeStyles } from "@material-ui/core/styles" -import Tooltip from "@material-ui/core/Tooltip" -import Check from "@material-ui/icons/Check" +import IconButton from "@mui/material/Button" +import { makeStyles } from "@mui/material/styles" +import Tooltip from "@mui/material/Tooltip" +import Check from "@mui/icons-material/Check" import { useClipboard } from "hooks/useClipboard" import { combineClasses } from "../../utils/combineClasses" import { FileCopyIcon } from "../Icons/FileCopyIcon" diff --git a/site/src/components/CopyableValue/CopyableValue.tsx b/site/src/components/CopyableValue/CopyableValue.tsx index 79959dc015f4a..ea3741a68406b 100644 --- a/site/src/components/CopyableValue/CopyableValue.tsx +++ b/site/src/components/CopyableValue/CopyableValue.tsx @@ -1,5 +1,5 @@ -import { makeStyles } from "@material-ui/core/styles" -import Tooltip from "@material-ui/core/Tooltip" +import { makeStyles } from "@mui/material/styles" +import Tooltip from "@mui/material/Tooltip" import { useClickable } from "hooks/useClickable" import { useClipboard } from "hooks/useClipboard" import { FC, HTMLProps } from "react" diff --git a/site/src/components/CreateUserForm/CreateUserForm.tsx b/site/src/components/CreateUserForm/CreateUserForm.tsx index 3d00304c1efdd..ce61b8ffcc413 100644 --- a/site/src/components/CreateUserForm/CreateUserForm.tsx +++ b/site/src/components/CreateUserForm/CreateUserForm.tsx @@ -1,4 +1,4 @@ -import TextField from "@material-ui/core/TextField" +import TextField from "@mui/material/TextField" import { FormikContextType, useFormik } from "formik" import { FC } from "react" import * as Yup from "yup" diff --git a/site/src/components/DAUChart/DAUChart.tsx b/site/src/components/DAUChart/DAUChart.tsx index cf81090cd4e91..1ccfa00114b4e 100644 --- a/site/src/components/DAUChart/DAUChart.tsx +++ b/site/src/components/DAUChart/DAUChart.tsx @@ -1,5 +1,5 @@ -import { Theme } from "@material-ui/core/styles" -import useTheme from "@material-ui/styles/useTheme" +import { Theme } from "@mui/material/styles" +import useTheme from "@mui/styles/useTheme" import * as TypesGen from "api/typesGenerated" import { CategoryScale, diff --git a/site/src/components/Dashboard/DashboardLayout.tsx b/site/src/components/Dashboard/DashboardLayout.tsx index d27d24356f76e..92e47786c5e88 100644 --- a/site/src/components/Dashboard/DashboardLayout.tsx +++ b/site/src/components/Dashboard/DashboardLayout.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { useMachine } from "@xstate/react" import { UpdateCheckResponse } from "api/typesGenerated" import { DeploymentBanner } from "components/DeploymentBanner/DeploymentBanner" diff --git a/site/src/components/DeploySettingsLayout/Badges.tsx b/site/src/components/DeploySettingsLayout/Badges.tsx index a99d5a34ef42d..f371c738d75cb 100644 --- a/site/src/components/DeploySettingsLayout/Badges.tsx +++ b/site/src/components/DeploySettingsLayout/Badges.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { Stack } from "components/Stack/Stack" import { PropsWithChildren, FC } from "react" import { MONOSPACE_FONT_FAMILY } from "theme/constants" diff --git a/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx b/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx index 3b04e4fce2575..7c512e6a3902e 100644 --- a/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx +++ b/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { Margins } from "components/Margins/Margins" import { Stack } from "components/Stack/Stack" import { Sidebar } from "./Sidebar" diff --git a/site/src/components/DeploySettingsLayout/Fieldset.tsx b/site/src/components/DeploySettingsLayout/Fieldset.tsx index d70d759f1a857..b84b9382efd0a 100644 --- a/site/src/components/DeploySettingsLayout/Fieldset.tsx +++ b/site/src/components/DeploySettingsLayout/Fieldset.tsx @@ -1,6 +1,6 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { FC, ReactNode, FormEventHandler } from "react" -import Button from "@material-ui/core/Button" +import Button from "@mui/material/Button" export const Fieldset: FC<{ children: ReactNode diff --git a/site/src/components/DeploySettingsLayout/Header.tsx b/site/src/components/DeploySettingsLayout/Header.tsx index 858a76c221086..8eb45bd8dac9c 100644 --- a/site/src/components/DeploySettingsLayout/Header.tsx +++ b/site/src/components/DeploySettingsLayout/Header.tsx @@ -1,6 +1,6 @@ -import Button from "@material-ui/core/Button" -import { makeStyles } from "@material-ui/core/styles" -import LaunchOutlined from "@material-ui/icons/LaunchOutlined" +import Button from "@mui/material/Button" +import { makeStyles } from "@mui/material/styles" +import LaunchOutlined from "@mui/icons-material/LaunchOutlined" import { Stack } from "components/Stack/Stack" import { FC } from "react" diff --git a/site/src/components/DeploySettingsLayout/Option.tsx b/site/src/components/DeploySettingsLayout/Option.tsx index 8c7ad02e41ced..c2ccabf0d2219 100644 --- a/site/src/components/DeploySettingsLayout/Option.tsx +++ b/site/src/components/DeploySettingsLayout/Option.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { PropsWithChildren, FC, ReactNode } from "react" import { MONOSPACE_FONT_FAMILY } from "theme/constants" import { DisabledBadge, EnabledBadge } from "./Badges" diff --git a/site/src/components/DeploySettingsLayout/OptionsTable.tsx b/site/src/components/DeploySettingsLayout/OptionsTable.tsx index fd8b841096aab..b510c114d5f72 100644 --- a/site/src/components/DeploySettingsLayout/OptionsTable.tsx +++ b/site/src/components/DeploySettingsLayout/OptionsTable.tsx @@ -1,10 +1,10 @@ -import { makeStyles } from "@material-ui/core/styles" -import Table from "@material-ui/core/Table" -import TableBody from "@material-ui/core/TableBody" -import TableCell from "@material-ui/core/TableCell" -import TableContainer from "@material-ui/core/TableContainer" -import TableHead from "@material-ui/core/TableHead" -import TableRow from "@material-ui/core/TableRow" +import { makeStyles } from "@mui/material/styles" +import Table from "@mui/material/Table" +import TableBody from "@mui/material/TableBody" +import TableCell from "@mui/material/TableCell" +import TableContainer from "@mui/material/TableContainer" +import TableHead from "@mui/material/TableHead" +import TableRow from "@mui/material/TableRow" import { DeploymentOption } from "api/types" import { OptionDescription, diff --git a/site/src/components/DeploySettingsLayout/Sidebar.tsx b/site/src/components/DeploySettingsLayout/Sidebar.tsx index ea081f943eb9b..4c124c15ea8df 100644 --- a/site/src/components/DeploySettingsLayout/Sidebar.tsx +++ b/site/src/components/DeploySettingsLayout/Sidebar.tsx @@ -1,10 +1,10 @@ -import { makeStyles } from "@material-ui/core/styles" -import Brush from "@material-ui/icons/Brush" -import LaunchOutlined from "@material-ui/icons/LaunchOutlined" -import ApprovalIcon from "@material-ui/icons/VerifiedUserOutlined" -import LockRounded from "@material-ui/icons/LockOutlined" -import Globe from "@material-ui/icons/PublicOutlined" -import VpnKeyOutlined from "@material-ui/icons/VpnKeyOutlined" +import { makeStyles } from "@mui/material/styles" +import Brush from "@mui/icons-material/Brush" +import LaunchOutlined from "@mui/icons-material/LaunchOutlined" +import ApprovalIcon from "@mui/icons-material/VerifiedUserOutlined" +import LockRounded from "@mui/icons-material/LockOutlined" +import Globe from "@mui/icons-material/PublicOutlined" +import VpnKeyOutlined from "@mui/icons-material/VpnKeyOutlined" import { GitIcon } from "components/Icons/GitIcon" import { Stack } from "components/Stack/Stack" import { ElementType, PropsWithChildren, ReactNode, FC } from "react" diff --git a/site/src/components/DeploymentBanner/DeploymentBannerView.tsx b/site/src/components/DeploymentBanner/DeploymentBannerView.tsx index 0e5dbd9b7a1df..d43dc285d9f18 100644 --- a/site/src/components/DeploymentBanner/DeploymentBannerView.tsx +++ b/site/src/components/DeploymentBanner/DeploymentBannerView.tsx @@ -2,23 +2,23 @@ import { DeploymentStats, WorkspaceStatus } from "api/typesGenerated" import { FC, useMemo, useEffect, useState } from "react" import prettyBytes from "pretty-bytes" import { getStatus } from "components/WorkspaceStatusBadge/WorkspaceStatusBadge" -import BuildingIcon from "@material-ui/icons/Build" -import { makeStyles } from "@material-ui/core/styles" +import BuildingIcon from "@mui/icons-material/Build" +import { makeStyles } from "@mui/material/styles" import { RocketIcon } from "components/Icons/RocketIcon" import { MONOSPACE_FONT_FAMILY } from "theme/constants" -import Tooltip from "@material-ui/core/Tooltip" +import Tooltip from "@mui/material/Tooltip" import { Link as RouterLink } from "react-router-dom" -import Link from "@material-ui/core/Link" +import Link from "@mui/material/Link" import { VSCodeIcon } from "components/Icons/VSCodeIcon" -import DownloadIcon from "@material-ui/icons/CloudDownload" -import UploadIcon from "@material-ui/icons/CloudUpload" -import LatencyIcon from "@material-ui/icons/SettingsEthernet" -import WebTerminalIcon from "@material-ui/icons/WebAsset" +import DownloadIcon from "@mui/icons-material/CloudDownload" +import UploadIcon from "@mui/icons-material/CloudUpload" +import LatencyIcon from "@mui/icons-material/SettingsEthernet" +import WebTerminalIcon from "@mui/icons-material/WebAsset" import { TerminalIcon } from "components/Icons/TerminalIcon" import dayjs from "dayjs" -import CollectedIcon from "@material-ui/icons/Compare" -import RefreshIcon from "@material-ui/icons/Refresh" -import Button from "@material-ui/core/Button" +import CollectedIcon from "@mui/icons-material/Compare" +import RefreshIcon from "@mui/icons-material/Refresh" +import Button from "@mui/material/Button" export const bannerHeight = 36 diff --git a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx index c63233ec257a1..6b11958b717a3 100644 --- a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx +++ b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx @@ -1,5 +1,5 @@ -import DialogActions from "@material-ui/core/DialogActions" -import { makeStyles } from "@material-ui/core/styles" +import DialogActions from "@mui/material/DialogActions" +import { makeStyles } from "@mui/material/styles" import { ReactNode, FC, PropsWithChildren } from "react" import { Dialog, diff --git a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx index 326239604730c..7584e726cd3f2 100644 --- a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx +++ b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx @@ -1,5 +1,5 @@ -import makeStyles from "@material-ui/core/styles/makeStyles" -import TextField from "@material-ui/core/TextField" +import makeStyles from "@mui/material/styles/makeStyles" +import TextField from "@mui/material/TextField" import { Maybe } from "components/Conditionals/Maybe" import { ChangeEvent, useState, PropsWithChildren, FC } from "react" import { useTranslation } from "react-i18next" diff --git a/site/src/components/Dialogs/Dialog.tsx b/site/src/components/Dialogs/Dialog.tsx index 9ca0b36f9c352..b56c8886496bc 100644 --- a/site/src/components/Dialogs/Dialog.tsx +++ b/site/src/components/Dialogs/Dialog.tsx @@ -1,7 +1,5 @@ -import MuiDialog, { - DialogProps as MuiDialogProps, -} from "@material-ui/core/Dialog" -import { alpha, darken, makeStyles } from "@material-ui/core/styles" +import MuiDialog, { DialogProps as MuiDialogProps } from "@mui/material/Dialog" +import { alpha, darken, makeStyles } from "@mui/material/styles" import * as React from "react" import { colors } from "theme/colors" import { combineClasses } from "../../utils/combineClasses" diff --git a/site/src/components/Dialogs/ResetPasswordDialog/ResetPasswordDialog.tsx b/site/src/components/Dialogs/ResetPasswordDialog/ResetPasswordDialog.tsx index 28eb339e10502..af1846e9ad997 100644 --- a/site/src/components/Dialogs/ResetPasswordDialog/ResetPasswordDialog.tsx +++ b/site/src/components/Dialogs/ResetPasswordDialog/ResetPasswordDialog.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { FC } from "react" import * as TypesGen from "../../../api/typesGenerated" import { CodeExample } from "../../CodeExample/CodeExample" diff --git a/site/src/components/DropdownArrows/DropdownArrows.tsx b/site/src/components/DropdownArrows/DropdownArrows.tsx index 3fd0e3aacc6c7..74048ff5ba12c 100644 --- a/site/src/components/DropdownArrows/DropdownArrows.tsx +++ b/site/src/components/DropdownArrows/DropdownArrows.tsx @@ -1,6 +1,6 @@ -import { makeStyles, Theme } from "@material-ui/core/styles" -import KeyboardArrowDown from "@material-ui/icons/KeyboardArrowDown" -import KeyboardArrowUp from "@material-ui/icons/KeyboardArrowUp" +import { makeStyles, Theme } from "@mui/material/styles" +import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown" +import KeyboardArrowUp from "@mui/icons-material/KeyboardArrowUp" import { FC } from "react" const useStyles = makeStyles((theme: Theme) => ({ diff --git a/site/src/components/EditRolesButton/EditRolesButton.tsx b/site/src/components/EditRolesButton/EditRolesButton.tsx index 0683916fa8353..be62567355fc1 100644 --- a/site/src/components/EditRolesButton/EditRolesButton.tsx +++ b/site/src/components/EditRolesButton/EditRolesButton.tsx @@ -1,12 +1,12 @@ -import IconButton from "@material-ui/core/IconButton" +import IconButton from "@mui/material/IconButton" import { EditSquare } from "components/Icons/EditSquare" import { useRef, useState, FC } from "react" -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { useTranslation } from "react-i18next" -import Popover from "@material-ui/core/Popover" +import Popover from "@mui/material/Popover" import { Stack } from "components/Stack/Stack" -import Checkbox from "@material-ui/core/Checkbox" -import UserIcon from "@material-ui/icons/PersonOutline" +import Checkbox from "@mui/material/Checkbox" +import UserIcon from "@mui/icons-material/PersonOutline" import { Role } from "api/typesGenerated" const Option: React.FC<{ diff --git a/site/src/components/EmptyState/EmptyState.tsx b/site/src/components/EmptyState/EmptyState.tsx index 057099983c99f..0cd29f2d36412 100644 --- a/site/src/components/EmptyState/EmptyState.tsx +++ b/site/src/components/EmptyState/EmptyState.tsx @@ -1,6 +1,6 @@ -import Box from "@material-ui/core/Box" -import { makeStyles } from "@material-ui/core/styles" -import Typography from "@material-ui/core/Typography" +import Box from "@mui/material/Box" +import { makeStyles } from "@mui/material/styles" +import Typography from "@mui/material/Typography" import { FC, ReactNode } from "react" import { combineClasses } from "../../utils/combineClasses" diff --git a/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx b/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx index 04d890b103599..7e672cbae89b1 100644 --- a/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx +++ b/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx @@ -1,9 +1,9 @@ -import IconButton from "@material-ui/core/IconButton" +import IconButton from "@mui/material/IconButton" import Snackbar, { SnackbarProps as MuiSnackbarProps, -} from "@material-ui/core/Snackbar" -import { makeStyles } from "@material-ui/core/styles" -import CloseIcon from "@material-ui/icons/Close" +} from "@mui/material/Snackbar" +import { makeStyles } from "@mui/material/styles" +import CloseIcon from "@mui/icons-material/Close" import { FC } from "react" import { combineClasses } from "../../utils/combineClasses" diff --git a/site/src/components/Expander/Expander.tsx b/site/src/components/Expander/Expander.tsx index c158afc37830c..301bb2960be50 100644 --- a/site/src/components/Expander/Expander.tsx +++ b/site/src/components/Expander/Expander.tsx @@ -1,11 +1,11 @@ -import Link from "@material-ui/core/Link" -import makeStyles from "@material-ui/core/styles/makeStyles" +import Link from "@mui/material/Link" +import makeStyles from "@mui/material/styles/makeStyles" import { CloseDropdown, OpenDropdown, } from "components/DropdownArrows/DropdownArrows" import { PropsWithChildren, FC } from "react" -import Collapse from "@material-ui/core/Collapse" +import Collapse from "@mui/material/Collapse" import { useTranslation } from "react-i18next" import { combineClasses } from "utils/combineClasses" diff --git a/site/src/components/FileUpload/FileUpload.tsx b/site/src/components/FileUpload/FileUpload.tsx index 229aa2af02c9d..c5e6bf50ee9fc 100644 --- a/site/src/components/FileUpload/FileUpload.tsx +++ b/site/src/components/FileUpload/FileUpload.tsx @@ -1,13 +1,13 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { Stack } from "components/Stack/Stack" import { FC, DragEvent, useRef, ReactNode } from "react" -import UploadIcon from "@material-ui/icons/CloudUploadOutlined" +import UploadIcon from "@mui/icons-material/CloudUploadOutlined" import { useClickable } from "hooks/useClickable" -import CircularProgress from "@material-ui/core/CircularProgress" +import CircularProgress from "@mui/material/CircularProgress" import { combineClasses } from "utils/combineClasses" -import IconButton from "@material-ui/core/IconButton" -import RemoveIcon from "@material-ui/icons/DeleteOutline" -import FileIcon from "@material-ui/icons/FolderOutlined" +import IconButton from "@mui/material/IconButton" +import RemoveIcon from "@mui/icons-material/DeleteOutline" +import FileIcon from "@mui/icons-material/FolderOutlined" const useFileDrop = ( callback: (file: File) => void, diff --git a/site/src/components/Form/Form.tsx b/site/src/components/Form/Form.tsx index b0dc4e700012e..5165e66df9a9d 100644 --- a/site/src/components/Form/Form.tsx +++ b/site/src/components/Form/Form.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { FormFooterProps as BaseFormFooterProps, FormFooter as BaseFormFooter, diff --git a/site/src/components/FormCloseButton/FormCloseButton.tsx b/site/src/components/FormCloseButton/FormCloseButton.tsx index 7b196681d0f9b..caf1bab9f812a 100644 --- a/site/src/components/FormCloseButton/FormCloseButton.tsx +++ b/site/src/components/FormCloseButton/FormCloseButton.tsx @@ -1,6 +1,6 @@ -import IconButton from "@material-ui/core/IconButton" -import { makeStyles } from "@material-ui/core/styles" -import Typography from "@material-ui/core/Typography" +import IconButton from "@mui/material/IconButton" +import { makeStyles } from "@mui/material/styles" +import Typography from "@mui/material/Typography" import { useEffect, FC, PropsWithChildren } from "react" import { CloseIcon } from "../Icons/CloseIcon" diff --git a/site/src/components/FormFooter/FormFooter.tsx b/site/src/components/FormFooter/FormFooter.tsx index 804f3ef791546..ff461c6a79ae2 100644 --- a/site/src/components/FormFooter/FormFooter.tsx +++ b/site/src/components/FormFooter/FormFooter.tsx @@ -1,6 +1,6 @@ -import Button from "@material-ui/core/Button" -import { makeStyles } from "@material-ui/core/styles" -import { ClassNameMap } from "@material-ui/core/styles/withStyles" +import Button from "@mui/material/Button" +import { makeStyles } from "@mui/material/styles" +import { ClassNameMap } from "@mui/material/styles/withStyles" import { FC } from "react" import { LoadingButton } from "../LoadingButton/LoadingButton" diff --git a/site/src/components/FullPageForm/FullPageForm.stories.tsx b/site/src/components/FullPageForm/FullPageForm.stories.tsx index bd92ea6cc974e..25a836a3c6a55 100644 --- a/site/src/components/FullPageForm/FullPageForm.stories.tsx +++ b/site/src/components/FullPageForm/FullPageForm.stories.tsx @@ -1,4 +1,4 @@ -import TextField from "@material-ui/core/TextField" +import TextField from "@mui/material/TextField" import { action } from "@storybook/addon-actions" import { ComponentMeta, Story } from "@storybook/react" import { FormFooter } from "../FormFooter/FormFooter" diff --git a/site/src/components/FullPageForm/FullPageForm.tsx b/site/src/components/FullPageForm/FullPageForm.tsx index 8604172948117..b543a0ca33895 100644 --- a/site/src/components/FullPageForm/FullPageForm.tsx +++ b/site/src/components/FullPageForm/FullPageForm.tsx @@ -5,7 +5,7 @@ import { PageHeaderTitle, PageHeaderSubtitle, } from "components/PageHeader/PageHeader" -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" export interface FullPageFormProps { title: string diff --git a/site/src/components/FullPageForm/FullPageHorizontalForm.tsx b/site/src/components/FullPageForm/FullPageHorizontalForm.tsx index e31c37f003898..e1db286ac8769 100644 --- a/site/src/components/FullPageForm/FullPageHorizontalForm.tsx +++ b/site/src/components/FullPageForm/FullPageHorizontalForm.tsx @@ -5,7 +5,7 @@ import { PageHeaderTitle, PageHeaderSubtitle, } from "components/PageHeader/PageHeader" -import Button from "@material-ui/core/Button" +import Button from "@mui/material/Button" export interface FullPageHorizontalFormProps { title: string diff --git a/site/src/components/GitAuth/GitAuth.tsx b/site/src/components/GitAuth/GitAuth.tsx index 7998044677771..10cf4c906263a 100644 --- a/site/src/components/GitAuth/GitAuth.tsx +++ b/site/src/components/GitAuth/GitAuth.tsx @@ -1,9 +1,9 @@ -import Button from "@material-ui/core/Button" -import FormHelperText from "@material-ui/core/FormHelperText" -import { makeStyles, Theme } from "@material-ui/core/styles" -import { SvgIconProps } from "@material-ui/core/SvgIcon" -import Tooltip from "@material-ui/core/Tooltip" -import GitHub from "@material-ui/icons/GitHub" +import Button from "@mui/material/Button" +import FormHelperText from "@mui/material/FormHelperText" +import { makeStyles, Theme } from "@mui/material/styles" +import { SvgIconProps } from "@mui/material/SvgIcon" +import Tooltip from "@mui/material/Tooltip" +import GitHub from "@mui/icons-material/GitHub" import * as TypesGen from "api/typesGenerated" import { AzureDevOpsIcon } from "components/Icons/AzureDevOpsIcon" import { BitbucketIcon } from "components/Icons/BitbucketIcon" diff --git a/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx b/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx index f5ea165a1d8fb..1410013855890 100644 --- a/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx +++ b/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { useCallback, useState, FC } from "react" import { useCustomEvent } from "../../hooks/events" import { CustomEventListener } from "../../utils/events" diff --git a/site/src/components/GroupAvatar/GroupAvatar.tsx b/site/src/components/GroupAvatar/GroupAvatar.tsx index e909d41381857..09133cf9b628b 100644 --- a/site/src/components/GroupAvatar/GroupAvatar.tsx +++ b/site/src/components/GroupAvatar/GroupAvatar.tsx @@ -1,7 +1,7 @@ import { Avatar } from "components/Avatar/Avatar" -import Badge from "@material-ui/core/Badge" -import { withStyles } from "@material-ui/core/styles" -import Group from "@material-ui/icons/Group" +import Badge from "@mui/material/Badge" +import { withStyles } from "@mui/material/styles" +import Group from "@mui/icons-material/Group" import { FC } from "react" const StyledBadge = withStyles((theme) => ({ diff --git a/site/src/components/IconField/IconField.tsx b/site/src/components/IconField/IconField.tsx index 5f62997772573..98922f93f03a0 100644 --- a/site/src/components/IconField/IconField.tsx +++ b/site/src/components/IconField/IconField.tsx @@ -1,11 +1,11 @@ -import Button from "@material-ui/core/Button" -import InputAdornment from "@material-ui/core/InputAdornment" -import Popover from "@material-ui/core/Popover" -import TextField from "@material-ui/core/TextField" +import Button from "@mui/material/Button" +import InputAdornment from "@mui/material/InputAdornment" +import Popover from "@mui/material/Popover" +import TextField from "@mui/material/TextField" import { OpenDropdown } from "components/DropdownArrows/DropdownArrows" import { useRef, FC, useState } from "react" import Picker from "@emoji-mart/react" -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { colors } from "theme/colors" import { useTranslation } from "react-i18next" import data from "@emoji-mart/data/sets/14/twitter.json" diff --git a/site/src/components/IconField/types.ts b/site/src/components/IconField/types.ts index 03a30875bf6bf..a974854220b1a 100644 --- a/site/src/components/IconField/types.ts +++ b/site/src/components/IconField/types.ts @@ -1,4 +1,4 @@ -import { TextFieldProps } from "@material-ui/core/TextField" +import { TextFieldProps } from "@mui/material/TextField" export type IconFieldProps = TextFieldProps & { onPickEmoji: (value: string) => void diff --git a/site/src/components/Icons/AzureDevOpsIcon.tsx b/site/src/components/Icons/AzureDevOpsIcon.tsx index 5ac7b453b17f3..b9aa303ed4505 100644 --- a/site/src/components/Icons/AzureDevOpsIcon.tsx +++ b/site/src/components/Icons/AzureDevOpsIcon.tsx @@ -1,4 +1,4 @@ -import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon" +import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon" export const AzureDevOpsIcon = (props: SvgIconProps): JSX.Element => ( diff --git a/site/src/components/Icons/BitbucketIcon.tsx b/site/src/components/Icons/BitbucketIcon.tsx index f3b436baa2462..97792a0ed4718 100644 --- a/site/src/components/Icons/BitbucketIcon.tsx +++ b/site/src/components/Icons/BitbucketIcon.tsx @@ -1,4 +1,4 @@ -import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon" +import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon" export const BitbucketIcon = (props: SvgIconProps): JSX.Element => ( diff --git a/site/src/components/Icons/BuildingIcon.tsx b/site/src/components/Icons/BuildingIcon.tsx index 7f293e839f7e7..589553680f1e6 100644 --- a/site/src/components/Icons/BuildingIcon.tsx +++ b/site/src/components/Icons/BuildingIcon.tsx @@ -1,4 +1,4 @@ -import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon" +import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon" export const BuildingIcon = (props: SvgIconProps): JSX.Element => ( diff --git a/site/src/components/Icons/CloseIcon.tsx b/site/src/components/Icons/CloseIcon.tsx index af225f2cde358..157be59f4c5ce 100644 --- a/site/src/components/Icons/CloseIcon.tsx +++ b/site/src/components/Icons/CloseIcon.tsx @@ -1,4 +1,4 @@ -import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon" +import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon" export const CloseIcon: typeof SvgIcon = (props: SvgIconProps) => ( diff --git a/site/src/components/Icons/CoderIcon.tsx b/site/src/components/Icons/CoderIcon.tsx index f0dcb7e37edda..e8bd8bddd19aa 100644 --- a/site/src/components/Icons/CoderIcon.tsx +++ b/site/src/components/Icons/CoderIcon.tsx @@ -1,4 +1,4 @@ -import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon" +import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon" /** * CoderIcon represents the cloud with brackets Coder brand icon. It does not diff --git a/site/src/components/Icons/DockerIcon.tsx b/site/src/components/Icons/DockerIcon.tsx index 086a73c30955f..f2c4c042a291d 100644 --- a/site/src/components/Icons/DockerIcon.tsx +++ b/site/src/components/Icons/DockerIcon.tsx @@ -1,4 +1,4 @@ -import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon" +import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon" export const DockerIcon = (props: SvgIconProps): JSX.Element => ( diff --git a/site/src/components/Icons/EditSquare.tsx b/site/src/components/Icons/EditSquare.tsx index f727ba3b2e145..bb4ac1eee3148 100644 --- a/site/src/components/Icons/EditSquare.tsx +++ b/site/src/components/Icons/EditSquare.tsx @@ -1,4 +1,4 @@ -import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon" +import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon" export const EditSquare = (props: SvgIconProps): JSX.Element => ( diff --git a/site/src/components/Icons/ErrorIcon.tsx b/site/src/components/Icons/ErrorIcon.tsx index 34abda7c574a6..0fb8748be6e7e 100644 --- a/site/src/components/Icons/ErrorIcon.tsx +++ b/site/src/components/Icons/ErrorIcon.tsx @@ -1,4 +1,4 @@ -import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon" +import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon" export const ErrorIcon = (props: SvgIconProps): JSX.Element => ( diff --git a/site/src/components/Icons/FileCopyIcon.tsx b/site/src/components/Icons/FileCopyIcon.tsx index 74be3ce6e7664..e08c6419dae6b 100644 --- a/site/src/components/Icons/FileCopyIcon.tsx +++ b/site/src/components/Icons/FileCopyIcon.tsx @@ -1,4 +1,4 @@ -import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon" +import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon" export const FileCopyIcon: typeof SvgIcon = (props: SvgIconProps) => ( diff --git a/site/src/components/Icons/GitIcon.tsx b/site/src/components/Icons/GitIcon.tsx index c7b0f49f05b2b..a286af7a66edf 100644 --- a/site/src/components/Icons/GitIcon.tsx +++ b/site/src/components/Icons/GitIcon.tsx @@ -1,4 +1,4 @@ -import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon" +import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon" export const GitIcon: typeof SvgIcon = (props: SvgIconProps) => ( diff --git a/site/src/components/Icons/GitlabIcon.tsx b/site/src/components/Icons/GitlabIcon.tsx index 6a99d63fae0fa..e0b94a11da4d7 100644 --- a/site/src/components/Icons/GitlabIcon.tsx +++ b/site/src/components/Icons/GitlabIcon.tsx @@ -1,4 +1,4 @@ -import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon" +import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon" export const GitlabIcon = (props: SvgIconProps): JSX.Element => ( diff --git a/site/src/components/Icons/MarkdownIcon.tsx b/site/src/components/Icons/MarkdownIcon.tsx index b87b47b547eac..52b0793c9758f 100644 --- a/site/src/components/Icons/MarkdownIcon.tsx +++ b/site/src/components/Icons/MarkdownIcon.tsx @@ -1,4 +1,4 @@ -import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon" +import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon" export const MarkdownIcon = (props: SvgIconProps): JSX.Element => ( diff --git a/site/src/components/Icons/RocketIcon.tsx b/site/src/components/Icons/RocketIcon.tsx index 0973866ea76a1..e88239cf8b72c 100644 --- a/site/src/components/Icons/RocketIcon.tsx +++ b/site/src/components/Icons/RocketIcon.tsx @@ -1,4 +1,4 @@ -import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon" +import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon" export const RocketIcon: typeof SvgIcon = (props: SvgIconProps) => ( diff --git a/site/src/components/Icons/TerminalIcon.tsx b/site/src/components/Icons/TerminalIcon.tsx index 24a0b98a5fa37..149f5f0bdd211 100644 --- a/site/src/components/Icons/TerminalIcon.tsx +++ b/site/src/components/Icons/TerminalIcon.tsx @@ -1,4 +1,4 @@ -import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon" +import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon" export const TerminalIcon: typeof SvgIcon = (props: SvgIconProps) => ( diff --git a/site/src/components/Icons/TerraformIcon.tsx b/site/src/components/Icons/TerraformIcon.tsx index dcb562621d662..fe98d09c7a398 100644 --- a/site/src/components/Icons/TerraformIcon.tsx +++ b/site/src/components/Icons/TerraformIcon.tsx @@ -1,4 +1,4 @@ -import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon" +import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon" export const TerraformIcon = (props: SvgIconProps): JSX.Element => ( diff --git a/site/src/components/Icons/UsersOutlinedIcon.tsx b/site/src/components/Icons/UsersOutlinedIcon.tsx index 13f279802b321..32b185d723fc1 100644 --- a/site/src/components/Icons/UsersOutlinedIcon.tsx +++ b/site/src/components/Icons/UsersOutlinedIcon.tsx @@ -1,4 +1,4 @@ -import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon" +import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon" export const UsersOutlinedIcon: typeof SvgIcon = (props: SvgIconProps) => ( diff --git a/site/src/components/Icons/VSCodeIcon.tsx b/site/src/components/Icons/VSCodeIcon.tsx index 7231dab0e2c22..46aa8c8a2be76 100644 --- a/site/src/components/Icons/VSCodeIcon.tsx +++ b/site/src/components/Icons/VSCodeIcon.tsx @@ -1,4 +1,4 @@ -import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon" +import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon" export const VSCodeIcon: typeof SvgIcon = (props: SvgIconProps) => ( diff --git a/site/src/components/LastUsed/LastUsed.tsx b/site/src/components/LastUsed/LastUsed.tsx index 6b8cb271a25fe..98c6f0caf79ef 100644 --- a/site/src/components/LastUsed/LastUsed.tsx +++ b/site/src/components/LastUsed/LastUsed.tsx @@ -1,4 +1,4 @@ -import { makeStyles, Theme, useTheme } from "@material-ui/core/styles" +import { makeStyles, Theme, useTheme } from "@mui/material/styles" import { FC } from "react" import dayjs from "dayjs" import relativeTime from "dayjs/plugin/relativeTime" diff --git a/site/src/components/LicenseBanner/LicenseBannerView.tsx b/site/src/components/LicenseBanner/LicenseBannerView.tsx index 6032553e8bc3d..cf605c45e7e44 100644 --- a/site/src/components/LicenseBanner/LicenseBannerView.tsx +++ b/site/src/components/LicenseBanner/LicenseBannerView.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { Expander } from "components/Expander/Expander" import { Pill } from "components/Pill/Pill" import { useState } from "react" diff --git a/site/src/components/LicenseCard/LicenseCard.tsx b/site/src/components/LicenseCard/LicenseCard.tsx index 4a7420fcd267a..0eae70c12fe10 100644 --- a/site/src/components/LicenseCard/LicenseCard.tsx +++ b/site/src/components/LicenseCard/LicenseCard.tsx @@ -1,7 +1,7 @@ -import Box from "@material-ui/core/Box" -import Button from "@material-ui/core/Button" -import Paper from "@material-ui/core/Paper" -import { makeStyles } from "@material-ui/core/styles" +import Box from "@mui/material/Box" +import Button from "@mui/material/Button" +import Paper from "@mui/material/Paper" +import { makeStyles } from "@mui/material/styles" import { License } from "api/typesGenerated" import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog" import { Stack } from "components/Stack/Stack" diff --git a/site/src/components/Loader/FullScreenLoader.tsx b/site/src/components/Loader/FullScreenLoader.tsx index 6cb01cbbe7784..11e4f8b1c232e 100644 --- a/site/src/components/Loader/FullScreenLoader.tsx +++ b/site/src/components/Loader/FullScreenLoader.tsx @@ -1,5 +1,5 @@ -import CircularProgress from "@material-ui/core/CircularProgress" -import { makeStyles } from "@material-ui/core/styles" +import CircularProgress from "@mui/material/CircularProgress" +import { makeStyles } from "@mui/material/styles" import { FC } from "react" export const useStyles = makeStyles((theme) => ({ diff --git a/site/src/components/Loader/Loader.tsx b/site/src/components/Loader/Loader.tsx index e701ccb1de50e..39afe9e885469 100644 --- a/site/src/components/Loader/Loader.tsx +++ b/site/src/components/Loader/Loader.tsx @@ -1,5 +1,5 @@ -import Box from "@material-ui/core/Box" -import CircularProgress from "@material-ui/core/CircularProgress" +import Box from "@mui/material/Box" +import CircularProgress from "@mui/material/CircularProgress" import { FC } from "react" export const Loader: FC> = ({ diff --git a/site/src/components/LoadingButton/LoadingButton.tsx b/site/src/components/LoadingButton/LoadingButton.tsx index 60c0d4997bc31..479f5b0447aab 100644 --- a/site/src/components/LoadingButton/LoadingButton.tsx +++ b/site/src/components/LoadingButton/LoadingButton.tsx @@ -1,7 +1,7 @@ -import Button, { ButtonProps } from "@material-ui/core/Button" -import CircularProgress from "@material-ui/core/CircularProgress" -import { makeStyles } from "@material-ui/core/styles" -import { Theme } from "@material-ui/core/styles/createTheme" +import Button, { ButtonProps } from "@mui/material/Button" +import CircularProgress from "@mui/material/CircularProgress" +import { makeStyles } from "@mui/material/styles" +import { Theme } from "@mui/material/styles/createTheme" import { FC } from "react" export interface LoadingButtonProps extends ButtonProps { diff --git a/site/src/components/Logs/Logs.tsx b/site/src/components/Logs/Logs.tsx index 99c1e18f156dc..50c02ee71c305 100644 --- a/site/src/components/Logs/Logs.tsx +++ b/site/src/components/Logs/Logs.tsx @@ -1,4 +1,4 @@ -import { makeStyles, Theme } from "@material-ui/core/styles" +import { makeStyles, Theme } from "@mui/material/styles" import { LogLevel } from "api/typesGenerated" import dayjs from "dayjs" import { FC, useMemo } from "react" diff --git a/site/src/components/Margins/Margins.tsx b/site/src/components/Margins/Margins.tsx index b426ee009300c..66167acf10100 100644 --- a/site/src/components/Margins/Margins.tsx +++ b/site/src/components/Margins/Margins.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { FC } from "react" import { combineClasses } from "utils/combineClasses" import { diff --git a/site/src/components/Markdown/Markdown.tsx b/site/src/components/Markdown/Markdown.tsx index 12c3722d8b429..40b065075a9fa 100644 --- a/site/src/components/Markdown/Markdown.tsx +++ b/site/src/components/Markdown/Markdown.tsx @@ -1,11 +1,11 @@ -import Link from "@material-ui/core/Link" -import { makeStyles } from "@material-ui/core/styles" -import Table from "@material-ui/core/Table" -import TableBody from "@material-ui/core/TableBody" -import TableCell from "@material-ui/core/TableCell" -import TableContainer from "@material-ui/core/TableContainer" -import TableHead from "@material-ui/core/TableHead" -import TableRow from "@material-ui/core/TableRow" +import Link from "@mui/material/Link" +import { makeStyles } from "@mui/material/styles" +import Table from "@mui/material/Table" +import TableBody from "@mui/material/TableBody" +import TableCell from "@mui/material/TableCell" +import TableContainer from "@mui/material/TableContainer" +import TableHead from "@mui/material/TableHead" +import TableRow from "@mui/material/TableRow" import { FC, memo } from "react" import ReactMarkdown from "react-markdown" import { Prism as SyntaxHighlighter } from "react-syntax-highlighter" diff --git a/site/src/components/MultiTextField/MultiTextField.tsx b/site/src/components/MultiTextField/MultiTextField.tsx index dc1c18e7534da..76b0aa748040a 100644 --- a/site/src/components/MultiTextField/MultiTextField.tsx +++ b/site/src/components/MultiTextField/MultiTextField.tsx @@ -1,6 +1,6 @@ -import Chip from "@material-ui/core/Chip" -import FormHelperText from "@material-ui/core/FormHelperText" -import { makeStyles } from "@material-ui/core/styles" +import Chip from "@mui/material/Chip" +import FormHelperText from "@mui/material/FormHelperText" +import { makeStyles } from "@mui/material/styles" import { FC } from "react" export type MultiTextFieldProps = { diff --git a/site/src/components/NavbarView/NavbarView.tsx b/site/src/components/NavbarView/NavbarView.tsx index e3eaaaed29623..3b796d895c1c1 100644 --- a/site/src/components/NavbarView/NavbarView.tsx +++ b/site/src/components/NavbarView/NavbarView.tsx @@ -1,9 +1,9 @@ -import Drawer from "@material-ui/core/Drawer" -import IconButton from "@material-ui/core/IconButton" -import List from "@material-ui/core/List" -import ListItem from "@material-ui/core/ListItem" -import { makeStyles } from "@material-ui/core/styles" -import MenuIcon from "@material-ui/icons/Menu" +import Drawer from "@mui/material/Drawer" +import IconButton from "@mui/material/IconButton" +import List from "@mui/material/List" +import ListItem from "@mui/material/ListItem" +import { makeStyles } from "@mui/material/styles" +import MenuIcon from "@mui/icons-material/Menu" import { CoderIcon } from "components/Icons/CoderIcon" import { useState } from "react" import { NavLink, useLocation } from "react-router-dom" diff --git a/site/src/components/PageHeader/FullWidthPageHeader.tsx b/site/src/components/PageHeader/FullWidthPageHeader.tsx index fa940d184e2ea..4a08631c1c709 100644 --- a/site/src/components/PageHeader/FullWidthPageHeader.tsx +++ b/site/src/components/PageHeader/FullWidthPageHeader.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { FC, PropsWithChildren } from "react" export const FullWidthPageHeader: FC = ({ children }) => { diff --git a/site/src/components/PageHeader/PageHeader.tsx b/site/src/components/PageHeader/PageHeader.tsx index d4d8f96f0db26..3a80b1af4df2d 100644 --- a/site/src/components/PageHeader/PageHeader.tsx +++ b/site/src/components/PageHeader/PageHeader.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { PropsWithChildren, FC } from "react" import { combineClasses } from "../../utils/combineClasses" import { Stack } from "../Stack/Stack" diff --git a/site/src/components/PaginationWidget/PageButton.tsx b/site/src/components/PaginationWidget/PageButton.tsx index 0c7fe6245cbaa..6fc54e11b1d36 100644 --- a/site/src/components/PaginationWidget/PageButton.tsx +++ b/site/src/components/PaginationWidget/PageButton.tsx @@ -1,5 +1,5 @@ -import Button from "@material-ui/core/Button" -import { makeStyles } from "@material-ui/core/styles" +import Button from "@mui/material/Button" +import { makeStyles } from "@mui/material/styles" interface PageButtonProps { activePage?: number diff --git a/site/src/components/PaginationWidget/PaginationWidget.tsx b/site/src/components/PaginationWidget/PaginationWidget.tsx index e4cc371a21717..7841e41d74fc5 100644 --- a/site/src/components/PaginationWidget/PaginationWidget.tsx +++ b/site/src/components/PaginationWidget/PaginationWidget.tsx @@ -1,8 +1,8 @@ -import Button from "@material-ui/core/Button" -import { makeStyles, useTheme } from "@material-ui/core/styles" -import useMediaQuery from "@material-ui/core/useMediaQuery" -import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft" -import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight" +import Button from "@mui/material/Button" +import { makeStyles, useTheme } from "@mui/material/styles" +import useMediaQuery from "@mui/material/useMediaQuery" +import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft" +import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight" import { useActor } from "@xstate/react" import { ChooseOne, Cond } from "components/Conditionals/ChooseOne" import { Maybe } from "components/Conditionals/Maybe" diff --git a/site/src/components/PaginationWidget/PaginationWidgetBase.tsx b/site/src/components/PaginationWidget/PaginationWidgetBase.tsx index 14fbd36350a66..62b3968da2c5c 100644 --- a/site/src/components/PaginationWidget/PaginationWidgetBase.tsx +++ b/site/src/components/PaginationWidget/PaginationWidgetBase.tsx @@ -1,8 +1,8 @@ -import Button from "@material-ui/core/Button" -import { makeStyles, useTheme } from "@material-ui/core/styles" -import useMediaQuery from "@material-ui/core/useMediaQuery" -import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft" -import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight" +import Button from "@mui/material/Button" +import { makeStyles, useTheme } from "@mui/material/styles" +import useMediaQuery from "@mui/material/useMediaQuery" +import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft" +import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight" import { ChooseOne, Cond } from "components/Conditionals/ChooseOne" import { PageButton } from "./PageButton" import { buildPagedList } from "./utils" diff --git a/site/src/components/ParameterInput/ParameterInput.tsx b/site/src/components/ParameterInput/ParameterInput.tsx index 05f263896a98b..672242d1ae105 100644 --- a/site/src/components/ParameterInput/ParameterInput.tsx +++ b/site/src/components/ParameterInput/ParameterInput.tsx @@ -1,9 +1,9 @@ -import FormControlLabel from "@material-ui/core/FormControlLabel" -import MenuItem from "@material-ui/core/MenuItem" -import Radio from "@material-ui/core/Radio" -import RadioGroup from "@material-ui/core/RadioGroup" -import { makeStyles } from "@material-ui/core/styles" -import TextField from "@material-ui/core/TextField" +import FormControlLabel from "@mui/material/FormControlLabel" +import MenuItem from "@mui/material/MenuItem" +import Radio from "@mui/material/Radio" +import RadioGroup from "@mui/material/RadioGroup" +import { makeStyles } from "@mui/material/styles" +import TextField from "@mui/material/TextField" import { Stack } from "components/Stack/Stack" import { FC } from "react" import { ParameterSchema } from "../../api/typesGenerated" diff --git a/site/src/components/PasswordField/PasswordField.tsx b/site/src/components/PasswordField/PasswordField.tsx index 2463ac4fbbe5f..753f413d70a1e 100644 --- a/site/src/components/PasswordField/PasswordField.tsx +++ b/site/src/components/PasswordField/PasswordField.tsx @@ -1,9 +1,9 @@ -import IconButton from "@material-ui/core/IconButton" -import InputAdornment from "@material-ui/core/InputAdornment" -import { makeStyles } from "@material-ui/core/styles" -import TextField, { TextFieldProps } from "@material-ui/core/TextField" -import VisibilityOffOutlined from "@material-ui/icons/VisibilityOffOutlined" -import VisibilityOutlined from "@material-ui/icons/VisibilityOutlined" +import IconButton from "@mui/material/IconButton" +import InputAdornment from "@mui/material/InputAdornment" +import { makeStyles } from "@mui/material/styles" +import TextField, { TextFieldProps } from "@mui/material/TextField" +import VisibilityOffOutlined from "@mui/icons-material/VisibilityOffOutlined" +import VisibilityOutlined from "@mui/icons-material/VisibilityOutlined" import { useCallback, useState, FC, PropsWithChildren } from "react" type PasswordFieldProps = Omit diff --git a/site/src/components/Paywall/Paywall.tsx b/site/src/components/Paywall/Paywall.tsx index 3d1f393b865b8..fc910ea6ba977 100644 --- a/site/src/components/Paywall/Paywall.tsx +++ b/site/src/components/Paywall/Paywall.tsx @@ -1,7 +1,7 @@ -import Box from "@material-ui/core/Box" -import Chip from "@material-ui/core/Chip" -import { makeStyles } from "@material-ui/core/styles" -import Typography from "@material-ui/core/Typography" +import Box from "@mui/material/Box" +import Chip from "@mui/material/Chip" +import { makeStyles } from "@mui/material/styles" +import Typography from "@mui/material/Typography" import { Stack } from "components/Stack/Stack" import { FC, ReactNode } from "react" diff --git a/site/src/components/Pill/Pill.tsx b/site/src/components/Pill/Pill.tsx index d812ea2b66e1d..445dd4f4e6191 100644 --- a/site/src/components/Pill/Pill.tsx +++ b/site/src/components/Pill/Pill.tsx @@ -1,4 +1,4 @@ -import { makeStyles, Theme } from "@material-ui/core/styles" +import { makeStyles, Theme } from "@mui/material/styles" import { FC } from "react" import { PaletteIndex } from "theme/palettes" import { combineClasses } from "utils/combineClasses" diff --git a/site/src/components/PortForwardButton/PortForwardButton.tsx b/site/src/components/PortForwardButton/PortForwardButton.tsx index 61421e3b26170..38c253befe088 100644 --- a/site/src/components/PortForwardButton/PortForwardButton.tsx +++ b/site/src/components/PortForwardButton/PortForwardButton.tsx @@ -1,8 +1,8 @@ -import Button from "@material-ui/core/Button" -import Link from "@material-ui/core/Link" -import Popover from "@material-ui/core/Popover" -import { makeStyles } from "@material-ui/core/styles" -import TextField from "@material-ui/core/TextField" +import Button from "@mui/material/Button" +import Link from "@mui/material/Link" +import Popover from "@mui/material/Popover" +import { makeStyles } from "@mui/material/styles" +import TextField from "@mui/material/TextField" import { Stack } from "components/Stack/Stack" import { useRef, useState, Fragment } from "react" import { colors } from "theme/colors" diff --git a/site/src/components/Resources/AgentButton.tsx b/site/src/components/Resources/AgentButton.tsx index 1929ad2878d5c..14ef75c85b9e2 100644 --- a/site/src/components/Resources/AgentButton.tsx +++ b/site/src/components/Resources/AgentButton.tsx @@ -1,5 +1,5 @@ -import { makeStyles } from "@material-ui/core/styles" -import Button, { ButtonProps } from "@material-ui/core/Button" +import { makeStyles } from "@mui/material/styles" +import Button, { ButtonProps } from "@mui/material/Button" import { FC, forwardRef } from "react" import { combineClasses } from "utils/combineClasses" diff --git a/site/src/components/Resources/AgentLatency.tsx b/site/src/components/Resources/AgentLatency.tsx index 9bb67e58a8c9e..a8674747f70e5 100644 --- a/site/src/components/Resources/AgentLatency.tsx +++ b/site/src/components/Resources/AgentLatency.tsx @@ -1,5 +1,5 @@ import { useRef, useState, FC } from "react" -import { makeStyles, Theme, useTheme } from "@material-ui/core/styles" +import { makeStyles, Theme, useTheme } from "@mui/material/styles" import { HelpTooltipText, HelpPopover, diff --git a/site/src/components/Resources/AgentMetadata.tsx b/site/src/components/Resources/AgentMetadata.tsx index 6a87ef3908dbb..4f1730185aae5 100644 --- a/site/src/components/Resources/AgentMetadata.tsx +++ b/site/src/components/Resources/AgentMetadata.tsx @@ -1,4 +1,4 @@ -import makeStyles from "@material-ui/core/styles/makeStyles" +import makeStyles from "@mui/material/styles/makeStyles" import { watchAgentMetadata } from "api/api" import { WorkspaceAgent, WorkspaceAgentMetadata } from "api/typesGenerated" import { Stack } from "components/Stack/Stack" diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx index 2dd0bb81a24c4..30bec72f3a7a5 100644 --- a/site/src/components/Resources/AgentRow.tsx +++ b/site/src/components/Resources/AgentRow.tsx @@ -1,8 +1,8 @@ -import Popover from "@material-ui/core/Popover" -import { makeStyles, useTheme } from "@material-ui/core/styles" +import Popover from "@mui/material/Popover" +import { makeStyles, useTheme } from "@mui/material/styles" import { Skeleton } from "@material-ui/lab" import { useMachine } from "@xstate/react" -import CodeOutlined from "@material-ui/icons/CodeOutlined" +import CodeOutlined from "@mui/icons-material/CodeOutlined" import { CloseDropdown, OpenDropdown, @@ -42,7 +42,7 @@ import { AgentLatency } from "./AgentLatency" import { AgentMetadata } from "./AgentMetadata" import { AgentVersion } from "./AgentVersion" import { AgentStatus } from "./AgentStatus" -import Collapse from "@material-ui/core/Collapse" +import Collapse from "@mui/material/Collapse" import { useProxy } from "contexts/ProxyContext" export interface AgentRowProps { diff --git a/site/src/components/Resources/AgentRowPreview.tsx b/site/src/components/Resources/AgentRowPreview.tsx index cc9c0bde50593..0c04ac5d348ef 100644 --- a/site/src/components/Resources/AgentRowPreview.tsx +++ b/site/src/components/Resources/AgentRowPreview.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { AppPreviewLink } from "components/AppLink/AppPreviewLink" import { Maybe } from "components/Conditionals/Maybe" import { FC } from "react" diff --git a/site/src/components/Resources/AgentStatus.tsx b/site/src/components/Resources/AgentStatus.tsx index d03fb1c664e32..14d03eace82a4 100644 --- a/site/src/components/Resources/AgentStatus.tsx +++ b/site/src/components/Resources/AgentStatus.tsx @@ -1,17 +1,17 @@ -import Tooltip from "@material-ui/core/Tooltip" -import { makeStyles } from "@material-ui/core/styles" +import Tooltip from "@mui/material/Tooltip" +import { makeStyles } from "@mui/material/styles" import { combineClasses } from "utils/combineClasses" import { WorkspaceAgent } from "api/typesGenerated" import { ChooseOne, Cond } from "components/Conditionals/ChooseOne" import { useTranslation } from "react-i18next" -import WarningRounded from "@material-ui/icons/WarningRounded" +import WarningRounded from "@mui/icons-material/WarningRounded" import { HelpPopover, HelpTooltipText, HelpTooltipTitle, } from "components/Tooltips/HelpTooltip" import { useRef, useState } from "react" -import Link from "@material-ui/core/Link" +import Link from "@mui/material/Link" // If we think in the agent status and lifecycle into a single enum/state I’d // say we would have: connecting, timeout, disconnected, connected:created, diff --git a/site/src/components/Resources/AgentVersion.tsx b/site/src/components/Resources/AgentVersion.tsx index 713609b686197..ea4d50ffebde0 100644 --- a/site/src/components/Resources/AgentVersion.tsx +++ b/site/src/components/Resources/AgentVersion.tsx @@ -1,5 +1,5 @@ import { useRef, useState, FC } from "react" -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { WorkspaceAgent } from "api/typesGenerated" import { getDisplayVersionStatus } from "utils/workspace" import { AgentOutdatedTooltip } from "components/Tooltips/AgentOutdatedTooltip" diff --git a/site/src/components/Resources/ResourceCard.tsx b/site/src/components/Resources/ResourceCard.tsx index 83e3d9798d9a4..64792173b6d4d 100644 --- a/site/src/components/Resources/ResourceCard.tsx +++ b/site/src/components/Resources/ResourceCard.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { FC, useState } from "react" import { WorkspaceAgent, WorkspaceResource } from "../../api/typesGenerated" import { Stack } from "../Stack/Stack" @@ -8,8 +8,8 @@ import { OpenDropdown, CloseDropdown, } from "components/DropdownArrows/DropdownArrows" -import IconButton from "@material-ui/core/IconButton" -import Tooltip from "@material-ui/core/Tooltip" +import IconButton from "@mui/material/IconButton" +import Tooltip from "@mui/material/Tooltip" import { Maybe } from "components/Conditionals/Maybe" import { CopyableValue } from "components/CopyableValue/CopyableValue" diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx index 978099798fadd..79955bdc3139f 100644 --- a/site/src/components/Resources/Resources.tsx +++ b/site/src/components/Resources/Resources.tsx @@ -1,5 +1,5 @@ -import Button from "@material-ui/core/Button" -import { makeStyles } from "@material-ui/core/styles" +import Button from "@mui/material/Button" +import { makeStyles } from "@mui/material/styles" import { CloseDropdown, OpenDropdown, diff --git a/site/src/components/Resources/SensitiveValue.tsx b/site/src/components/Resources/SensitiveValue.tsx index b8e7f42d761b1..cc014df770d17 100644 --- a/site/src/components/Resources/SensitiveValue.tsx +++ b/site/src/components/Resources/SensitiveValue.tsx @@ -1,8 +1,8 @@ -import IconButton from "@material-ui/core/IconButton" -import { makeStyles } from "@material-ui/core/styles" -import Tooltip from "@material-ui/core/Tooltip" -import VisibilityOffOutlined from "@material-ui/icons/VisibilityOffOutlined" -import VisibilityOutlined from "@material-ui/icons/VisibilityOutlined" +import IconButton from "@mui/material/IconButton" +import { makeStyles } from "@mui/material/styles" +import Tooltip from "@mui/material/Tooltip" +import VisibilityOffOutlined from "@mui/icons-material/VisibilityOffOutlined" +import VisibilityOutlined from "@mui/icons-material/VisibilityOutlined" import { CopyableValue } from "components/CopyableValue/CopyableValue" import { useState } from "react" diff --git a/site/src/components/RichParameterInput/RichParameterInput.tsx b/site/src/components/RichParameterInput/RichParameterInput.tsx index 13fc5aa9b8ae5..375f3681b95bf 100644 --- a/site/src/components/RichParameterInput/RichParameterInput.tsx +++ b/site/src/components/RichParameterInput/RichParameterInput.tsx @@ -1,8 +1,8 @@ -import FormControlLabel from "@material-ui/core/FormControlLabel" -import Radio from "@material-ui/core/Radio" -import RadioGroup from "@material-ui/core/RadioGroup" -import { makeStyles } from "@material-ui/core/styles" -import TextField, { TextFieldProps } from "@material-ui/core/TextField" +import FormControlLabel from "@mui/material/FormControlLabel" +import Radio from "@mui/material/Radio" +import RadioGroup from "@mui/material/RadioGroup" +import { makeStyles } from "@mui/material/styles" +import TextField, { TextFieldProps } from "@mui/material/TextField" import { Stack } from "components/Stack/Stack" import { FC, useState } from "react" import { TemplateVersionParameter } from "../../api/typesGenerated" diff --git a/site/src/components/RuntimeErrorState/RuntimeErrorReport.tsx b/site/src/components/RuntimeErrorState/RuntimeErrorReport.tsx index 55aba804998df..a39f40ea8f8f9 100644 --- a/site/src/components/RuntimeErrorState/RuntimeErrorReport.tsx +++ b/site/src/components/RuntimeErrorState/RuntimeErrorReport.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { ReactElement } from "react" import { CodeBlock } from "../CodeBlock/CodeBlock" import { createCtas } from "./createCtas" diff --git a/site/src/components/RuntimeErrorState/RuntimeErrorState.tsx b/site/src/components/RuntimeErrorState/RuntimeErrorState.tsx index 8e18db4388c61..5c1eb17fc2fce 100644 --- a/site/src/components/RuntimeErrorState/RuntimeErrorState.tsx +++ b/site/src/components/RuntimeErrorState/RuntimeErrorState.tsx @@ -1,7 +1,7 @@ -import Button from "@material-ui/core/Button" -import Link from "@material-ui/core/Link" -import { makeStyles } from "@material-ui/core/styles" -import RefreshOutlined from "@material-ui/icons/RefreshOutlined" +import Button from "@mui/material/Button" +import Link from "@mui/material/Link" +import { makeStyles } from "@mui/material/styles" +import RefreshOutlined from "@mui/icons-material/RefreshOutlined" import { BuildInfoResponse } from "api/typesGenerated" import { CopyButton } from "components/CopyButton/CopyButton" import { CoderIcon } from "components/Icons/CoderIcon" diff --git a/site/src/components/RuntimeErrorState/createCtas.tsx b/site/src/components/RuntimeErrorState/createCtas.tsx index 5314441166892..b18f55e939e9c 100644 --- a/site/src/components/RuntimeErrorState/createCtas.tsx +++ b/site/src/components/RuntimeErrorState/createCtas.tsx @@ -1,6 +1,6 @@ -import Button from "@material-ui/core/Button" -import { makeStyles } from "@material-ui/core/styles" -import RefreshIcon from "@material-ui/icons/Refresh" +import Button from "@mui/material/Button" +import { makeStyles } from "@mui/material/styles" +import RefreshIcon from "@mui/icons-material/Refresh" import { ReactElement } from "react" import { CopyButton } from "../CopyButton/CopyButton" diff --git a/site/src/components/SSHButton/SSHButton.tsx b/site/src/components/SSHButton/SSHButton.tsx index 865005c905695..f2b9b10a4733a 100644 --- a/site/src/components/SSHButton/SSHButton.tsx +++ b/site/src/components/SSHButton/SSHButton.tsx @@ -1,5 +1,5 @@ -import Popover from "@material-ui/core/Popover" -import { makeStyles } from "@material-ui/core/styles" +import Popover from "@mui/material/Popover" +import { makeStyles } from "@mui/material/styles" import { SecondaryAgentButton } from "components/Resources/AgentButton" import { useRef, useState } from "react" import { CodeExample } from "../CodeExample/CodeExample" diff --git a/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx b/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx index 1741e37a0d4a7..8e0e929f3a383 100644 --- a/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx +++ b/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx @@ -1,12 +1,12 @@ -import Button from "@material-ui/core/Button" -import Fade from "@material-ui/core/Fade" -import InputAdornment from "@material-ui/core/InputAdornment" -import Menu from "@material-ui/core/Menu" -import MenuItem from "@material-ui/core/MenuItem" -import OutlinedInput from "@material-ui/core/OutlinedInput" -import { makeStyles } from "@material-ui/core/styles" -import { Theme } from "@material-ui/core/styles/createTheme" -import SearchIcon from "@material-ui/icons/Search" +import Button from "@mui/material/Button" +import Fade from "@mui/material/Fade" +import InputAdornment from "@mui/material/InputAdornment" +import Menu from "@mui/material/Menu" +import MenuItem from "@mui/material/MenuItem" +import OutlinedInput from "@mui/material/OutlinedInput" +import { makeStyles } from "@mui/material/styles" +import { Theme } from "@mui/material/styles/createTheme" +import SearchIcon from "@mui/icons-material/Search" import debounce from "just-debounce-it" import { useCallback, useEffect, useRef, useState } from "react" import { getValidationErrorMessage } from "../../api/errors" diff --git a/site/src/components/Section/Section.stories.tsx b/site/src/components/Section/Section.stories.tsx index b33e2b5cab9f4..ff6f803a0dba4 100644 --- a/site/src/components/Section/Section.stories.tsx +++ b/site/src/components/Section/Section.stories.tsx @@ -1,5 +1,5 @@ -import Button from "@material-ui/core/Button" -import TextField from "@material-ui/core/TextField" +import Button from "@mui/material/Button" +import TextField from "@mui/material/TextField" import { Story } from "@storybook/react" import { Section, SectionProps } from "./Section" diff --git a/site/src/components/Section/Section.tsx b/site/src/components/Section/Section.tsx index fe9d297940cc0..b49853c13fa8b 100644 --- a/site/src/components/Section/Section.tsx +++ b/site/src/components/Section/Section.tsx @@ -1,5 +1,5 @@ -import { makeStyles } from "@material-ui/core/styles" -import Typography from "@material-ui/core/Typography" +import { makeStyles } from "@mui/material/styles" +import Typography from "@mui/material/Typography" import { FC } from "react" import { combineClasses } from "../../utils/combineClasses" import { SectionAction } from "../SectionAction/SectionAction" diff --git a/site/src/components/SectionAction/SectionAction.tsx b/site/src/components/SectionAction/SectionAction.tsx index 1d20ab4275ba6..c860739973955 100644 --- a/site/src/components/SectionAction/SectionAction.tsx +++ b/site/src/components/SectionAction/SectionAction.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { FC } from "react" const useStyles = makeStyles((theme) => ({ diff --git a/site/src/components/ServiceBanner/ServiceBannerView.tsx b/site/src/components/ServiceBanner/ServiceBannerView.tsx index 7561a29cdc22d..a72b49b82c914 100644 --- a/site/src/components/ServiceBanner/ServiceBannerView.tsx +++ b/site/src/components/ServiceBanner/ServiceBannerView.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { Pill } from "components/Pill/Pill" import ReactMarkdown from "react-markdown" import { colors } from "theme/colors" diff --git a/site/src/components/SettingsAccountForm/SettingsAccountForm.tsx b/site/src/components/SettingsAccountForm/SettingsAccountForm.tsx index e1302e935750a..700df82e35c21 100644 --- a/site/src/components/SettingsAccountForm/SettingsAccountForm.tsx +++ b/site/src/components/SettingsAccountForm/SettingsAccountForm.tsx @@ -1,4 +1,4 @@ -import TextField from "@material-ui/core/TextField" +import TextField from "@mui/material/TextField" import { FormikContextType, FormikTouched, useFormik } from "formik" import { FC } from "react" import * as Yup from "yup" diff --git a/site/src/components/SettingsLayout/Section.tsx b/site/src/components/SettingsLayout/Section.tsx index 2ff69ed20984d..69e2fecabccc8 100644 --- a/site/src/components/SettingsLayout/Section.tsx +++ b/site/src/components/SettingsLayout/Section.tsx @@ -1,5 +1,5 @@ -import { makeStyles } from "@material-ui/core/styles" -import Typography from "@material-ui/core/Typography" +import { makeStyles } from "@mui/material/styles" +import Typography from "@mui/material/Typography" import { FC, ReactNode, PropsWithChildren } from "react" import { SectionAction } from "../SectionAction/SectionAction" diff --git a/site/src/components/SettingsLayout/SettingsLayout.tsx b/site/src/components/SettingsLayout/SettingsLayout.tsx index aba85e313573b..7538cfdc47479 100644 --- a/site/src/components/SettingsLayout/SettingsLayout.tsx +++ b/site/src/components/SettingsLayout/SettingsLayout.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { Sidebar } from "./Sidebar" import { Stack } from "components/Stack/Stack" import { FC, Suspense } from "react" diff --git a/site/src/components/SettingsLayout/Sidebar.tsx b/site/src/components/SettingsLayout/Sidebar.tsx index 8c21647214a1c..d77917c2042c4 100644 --- a/site/src/components/SettingsLayout/Sidebar.tsx +++ b/site/src/components/SettingsLayout/Sidebar.tsx @@ -1,15 +1,15 @@ -import { makeStyles } from "@material-ui/core/styles" -import VpnKeyOutlined from "@material-ui/icons/VpnKeyOutlined" -import FingerprintOutlinedIcon from "@material-ui/icons/FingerprintOutlined" +import { makeStyles } from "@mui/material/styles" +import VpnKeyOutlined from "@mui/icons-material/VpnKeyOutlined" +import FingerprintOutlinedIcon from "@mui/icons-material/FingerprintOutlined" import { User } from "api/typesGenerated" import { Stack } from "components/Stack/Stack" import { UserAvatar } from "components/UserAvatar/UserAvatar" import { FC, ElementType, PropsWithChildren, ReactNode } from "react" import { NavLink } from "react-router-dom" import { combineClasses } from "utils/combineClasses" -import AccountIcon from "@material-ui/icons/Person" -import SecurityIcon from "@material-ui/icons/LockOutlined" -import PublicIcon from "@material-ui/icons/Public" +import AccountIcon from "@mui/icons-material/Person" +import SecurityIcon from "@mui/icons-material/LockOutlined" +import PublicIcon from "@mui/icons-material/Public" import { useDashboard } from "components/Dashboard/DashboardProvider" const SidebarNavItem: FC< diff --git a/site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx b/site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx index 7eb25dd1930a5..e77ca9a092ef8 100644 --- a/site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx +++ b/site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx @@ -1,4 +1,4 @@ -import TextField from "@material-ui/core/TextField" +import TextField from "@mui/material/TextField" import { FormikContextType, FormikTouched, useFormik } from "formik" import { FC } from "react" import * as Yup from "yup" diff --git a/site/src/components/SignInForm/OAuthSignInForm.tsx b/site/src/components/SignInForm/OAuthSignInForm.tsx index ca958ab09eaaf..5a863261fcc22 100644 --- a/site/src/components/SignInForm/OAuthSignInForm.tsx +++ b/site/src/components/SignInForm/OAuthSignInForm.tsx @@ -1,12 +1,12 @@ -import Link from "@material-ui/core/Link" -import Button from "@material-ui/core/Button" -import GitHubIcon from "@material-ui/icons/GitHub" -import KeyIcon from "@material-ui/icons/VpnKey" -import Box from "@material-ui/core/Box" +import Link from "@mui/material/Link" +import Button from "@mui/material/Button" +import GitHubIcon from "@mui/icons-material/GitHub" +import KeyIcon from "@mui/icons-material/VpnKey" +import Box from "@mui/material/Box" import { Language } from "./SignInForm" import { AuthMethods } from "../../api/typesGenerated" import { FC } from "react" -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" type OAuthSignInFormProps = { isSigningIn: boolean diff --git a/site/src/components/SignInForm/PasswordSignInForm.tsx b/site/src/components/SignInForm/PasswordSignInForm.tsx index b8d123644fb4d..fa07d9e67cf22 100644 --- a/site/src/components/SignInForm/PasswordSignInForm.tsx +++ b/site/src/components/SignInForm/PasswordSignInForm.tsx @@ -1,5 +1,5 @@ import { Stack } from "../Stack/Stack" -import TextField from "@material-ui/core/TextField" +import TextField from "@mui/material/TextField" import { getFormHelpers, onChangeTrimmed } from "../../utils/formUtils" import { LoadingButton } from "../LoadingButton/LoadingButton" import { Language } from "./SignInForm" diff --git a/site/src/components/SignInForm/SignInForm.tsx b/site/src/components/SignInForm/SignInForm.tsx index b3c7470254759..f662f37f75b52 100644 --- a/site/src/components/SignInForm/SignInForm.tsx +++ b/site/src/components/SignInForm/SignInForm.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { FormikTouched } from "formik" import { FC, useState } from "react" import { AuthMethods } from "../../api/typesGenerated" @@ -7,8 +7,8 @@ import { Maybe } from "../Conditionals/Maybe" import { PasswordSignInForm } from "./PasswordSignInForm" import { OAuthSignInForm } from "./OAuthSignInForm" import { BuiltInAuthFormValues } from "./SignInForm.types" -import Button from "@material-ui/core/Button" -import EmailIcon from "@material-ui/icons/EmailOutlined" +import Button from "@mui/material/Button" +import EmailIcon from "@mui/icons-material/EmailOutlined" import { AlertBanner } from "components/AlertBanner/AlertBanner" export const Language = { diff --git a/site/src/components/SignInLayout/SignInLayout.tsx b/site/src/components/SignInLayout/SignInLayout.tsx index 3639f4e692215..eebdb628aae56 100644 --- a/site/src/components/SignInLayout/SignInLayout.tsx +++ b/site/src/components/SignInLayout/SignInLayout.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { FC, ReactNode } from "react" export const useStyles = makeStyles((theme) => ({ diff --git a/site/src/components/Stack/Stack.stories.tsx b/site/src/components/Stack/Stack.stories.tsx index 66860abdad9d4..10bd5572b2db5 100644 --- a/site/src/components/Stack/Stack.stories.tsx +++ b/site/src/components/Stack/Stack.stories.tsx @@ -1,4 +1,4 @@ -import TextField from "@material-ui/core/TextField" +import TextField from "@mui/material/TextField" import { Story } from "@storybook/react" import { Stack, StackProps } from "./Stack" diff --git a/site/src/components/Stack/Stack.tsx b/site/src/components/Stack/Stack.tsx index c6070ab83d643..8f60a7af3edf2 100644 --- a/site/src/components/Stack/Stack.tsx +++ b/site/src/components/Stack/Stack.tsx @@ -1,5 +1,5 @@ -import { makeStyles } from "@material-ui/core/styles" -import { CSSProperties } from "@material-ui/core/styles/withStyles" +import { makeStyles } from "@mui/material/styles" +import { CSSProperties } from "@mui/material/styles/withStyles" import { FC } from "react" import { ReactNode } from "react-markdown/lib/react-markdown" import { combineClasses } from "../../utils/combineClasses" diff --git a/site/src/components/Stats/Stats.tsx b/site/src/components/Stats/Stats.tsx index 5b8e57da74c4b..036abe564014c 100644 --- a/site/src/components/Stats/Stats.tsx +++ b/site/src/components/Stats/Stats.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { ComponentProps, FC, PropsWithChildren } from "react" import { combineClasses } from "utils/combineClasses" diff --git a/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx b/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx index 343ff30d95268..bad41c3016936 100644 --- a/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx +++ b/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx @@ -2,7 +2,7 @@ import { FC } from "react" import Editor, { DiffEditor, loader } from "@monaco-editor/react" import * as monaco from "monaco-editor" import { useCoderTheme } from "./coderTheme" -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" loader.config({ monaco }) diff --git a/site/src/components/SyntaxHighlighter/coderTheme.ts b/site/src/components/SyntaxHighlighter/coderTheme.ts index 88c1eeebf265d..df9fc101dfa1b 100644 --- a/site/src/components/SyntaxHighlighter/coderTheme.ts +++ b/site/src/components/SyntaxHighlighter/coderTheme.ts @@ -1,4 +1,4 @@ -import { Theme, useTheme } from "@material-ui/core/styles" +import { Theme, useTheme } from "@mui/material/styles" import { useMonaco } from "@monaco-editor/react" import { useEffect, useState } from "react" import { hslToHex } from "utils/colors" diff --git a/site/src/components/TabPanel/TabPanel.tsx b/site/src/components/TabPanel/TabPanel.tsx index ed90bcd35669f..aad5a311d1480 100644 --- a/site/src/components/TabPanel/TabPanel.tsx +++ b/site/src/components/TabPanel/TabPanel.tsx @@ -1,5 +1,5 @@ -import { makeStyles } from "@material-ui/core/styles" -import { alpha } from "@material-ui/core/styles/colorManipulator" +import { makeStyles } from "@mui/material/styles" +import { alpha } from "@mui/material/styles/colorManipulator" import { FC } from "react" import { TabSidebar, TabSidebarItem } from "../TabSidebar/TabSidebar" diff --git a/site/src/components/TabSidebar/TabSidebar.tsx b/site/src/components/TabSidebar/TabSidebar.tsx index ddd86c39478ad..1715cd6a7851f 100644 --- a/site/src/components/TabSidebar/TabSidebar.tsx +++ b/site/src/components/TabSidebar/TabSidebar.tsx @@ -1,6 +1,6 @@ -import List from "@material-ui/core/List" -import ListItem from "@material-ui/core/ListItem" -import { makeStyles } from "@material-ui/core/styles" +import List from "@mui/material/List" +import ListItem from "@mui/material/ListItem" +import { makeStyles } from "@mui/material/styles" import { FC } from "react" import { NavLink } from "react-router-dom" import { sidePadding } from "theme/constants" diff --git a/site/src/components/TableCellLink/TableCellLink.tsx b/site/src/components/TableCellLink/TableCellLink.tsx index a371fddde7de4..2ab4d76010f5d 100644 --- a/site/src/components/TableCellLink/TableCellLink.tsx +++ b/site/src/components/TableCellLink/TableCellLink.tsx @@ -1,6 +1,6 @@ -import Link from "@material-ui/core/Link" -import { makeStyles } from "@material-ui/core/styles" -import TableCell, { TableCellProps } from "@material-ui/core/TableCell" +import Link from "@mui/material/Link" +import { makeStyles } from "@mui/material/styles" +import TableCell, { TableCellProps } from "@mui/material/TableCell" import { Link as RouterLink } from "react-router-dom" import { combineClasses } from "../../utils/combineClasses" diff --git a/site/src/components/TableEmpty/TableEmpty.tsx b/site/src/components/TableEmpty/TableEmpty.tsx index e1afa4776438c..88e6612109265 100644 --- a/site/src/components/TableEmpty/TableEmpty.tsx +++ b/site/src/components/TableEmpty/TableEmpty.tsx @@ -1,6 +1,6 @@ -import { makeStyles } from "@material-ui/core/styles" -import TableCell from "@material-ui/core/TableCell" -import TableRow from "@material-ui/core/TableRow" +import { makeStyles } from "@mui/material/styles" +import TableCell from "@mui/material/TableCell" +import TableRow from "@mui/material/TableRow" import { FC } from "react" import { EmptyState, diff --git a/site/src/components/TableLoader/TableLoader.tsx b/site/src/components/TableLoader/TableLoader.tsx index 6cb054ec9c46d..94e391cdedd64 100644 --- a/site/src/components/TableLoader/TableLoader.tsx +++ b/site/src/components/TableLoader/TableLoader.tsx @@ -1,6 +1,6 @@ -import { makeStyles } from "@material-ui/core/styles" -import TableCell from "@material-ui/core/TableCell" -import TableRow from "@material-ui/core/TableRow" +import { makeStyles } from "@mui/material/styles" +import TableCell from "@mui/material/TableCell" +import TableRow from "@mui/material/TableRow" import Skeleton from "@material-ui/lab/Skeleton" import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton" import { FC } from "react" diff --git a/site/src/components/TableRowMenu/TableRowMenu.tsx b/site/src/components/TableRowMenu/TableRowMenu.tsx index 30bc79ce30c1c..d9bf45fca09fc 100644 --- a/site/src/components/TableRowMenu/TableRowMenu.tsx +++ b/site/src/components/TableRowMenu/TableRowMenu.tsx @@ -1,7 +1,7 @@ -import IconButton from "@material-ui/core/IconButton" -import Menu, { MenuProps } from "@material-ui/core/Menu" -import MenuItem from "@material-ui/core/MenuItem" -import MoreVertIcon from "@material-ui/icons/MoreVert" +import IconButton from "@mui/material/IconButton" +import Menu, { MenuProps } from "@mui/material/Menu" +import MenuItem from "@mui/material/MenuItem" +import MoreVertIcon from "@mui/icons-material/MoreVert" import { MouseEvent, useState } from "react" export interface TableRowMenuProps { diff --git a/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx b/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx index 20d70ea3eff09..0242fe95136c2 100644 --- a/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx +++ b/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { TemplateExample } from "api/typesGenerated" import { FC } from "react" import { Link } from "react-router-dom" diff --git a/site/src/components/TemplateFiles/TemplateFiles.tsx b/site/src/components/TemplateFiles/TemplateFiles.tsx index f0791614deadc..9d795190ae450 100644 --- a/site/src/components/TemplateFiles/TemplateFiles.tsx +++ b/site/src/components/TemplateFiles/TemplateFiles.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { DockerIcon } from "components/Icons/DockerIcon" import { MarkdownIcon } from "components/Icons/MarkdownIcon" import { TerraformIcon } from "components/Icons/TerraformIcon" diff --git a/site/src/components/TemplateLayout/TemplateLayout.tsx b/site/src/components/TemplateLayout/TemplateLayout.tsx index 5fe6e3bfa4959..eb60944a39a44 100644 --- a/site/src/components/TemplateLayout/TemplateLayout.tsx +++ b/site/src/components/TemplateLayout/TemplateLayout.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { useOrganizationId } from "hooks/useOrganizationId" import { createContext, FC, Suspense, useContext } from "react" import { NavLink, Outlet, useNavigate, useParams } from "react-router-dom" diff --git a/site/src/components/TemplateLayout/TemplatePageHeader.tsx b/site/src/components/TemplateLayout/TemplatePageHeader.tsx index ef978ca99e511..acf234f1785ff 100644 --- a/site/src/components/TemplateLayout/TemplatePageHeader.tsx +++ b/site/src/components/TemplateLayout/TemplatePageHeader.tsx @@ -1,5 +1,5 @@ -import Button from "@material-ui/core/Button" -import AddCircleOutline from "@material-ui/icons/AddCircleOutline" +import Button from "@mui/material/Button" +import AddCircleOutline from "@mui/icons-material/AddCircleOutline" import { AuthorizationResponse, Template, @@ -18,13 +18,13 @@ import { FC, useRef, useState } from "react" import { Link as RouterLink, useNavigate } from "react-router-dom" import { useDeleteTemplate } from "./deleteTemplate" import { Margins } from "components/Margins/Margins" -import MoreVertOutlined from "@material-ui/icons/MoreVertOutlined" -import Menu from "@material-ui/core/Menu" -import MenuItem from "@material-ui/core/MenuItem" -import SettingsOutlined from "@material-ui/icons/SettingsOutlined" -import DeleteOutlined from "@material-ui/icons/DeleteOutlined" -import EditOutlined from "@material-ui/icons/EditOutlined" -import FileCopyOutlined from "@material-ui/icons/FileCopyOutlined" +import MoreVertOutlined from "@mui/icons-material/MoreVertOutlined" +import Menu from "@mui/material/Menu" +import MenuItem from "@mui/material/MenuItem" +import SettingsOutlined from "@mui/icons-material/SettingsOutlined" +import DeleteOutlined from "@mui/icons-material/DeleteOutlined" +import EditOutlined from "@mui/icons-material/EditOutlined" +import FileCopyOutlined from "@mui/icons-material/FileCopyOutlined" const TemplateMenu: FC<{ templateName: string diff --git a/site/src/components/TemplateVariableField/TemplateVariableField.tsx b/site/src/components/TemplateVariableField/TemplateVariableField.tsx index 3920896ea8353..e614a507feb72 100644 --- a/site/src/components/TemplateVariableField/TemplateVariableField.tsx +++ b/site/src/components/TemplateVariableField/TemplateVariableField.tsx @@ -1,7 +1,7 @@ -import FormControlLabel from "@material-ui/core/FormControlLabel" -import Radio from "@material-ui/core/Radio" -import RadioGroup from "@material-ui/core/RadioGroup" -import TextField from "@material-ui/core/TextField" +import FormControlLabel from "@mui/material/FormControlLabel" +import Radio from "@mui/material/Radio" +import RadioGroup from "@mui/material/RadioGroup" +import TextField from "@mui/material/TextField" import { TemplateVersionVariable } from "api/typesGenerated" import { FC, useState } from "react" import { useTranslation } from "react-i18next" diff --git a/site/src/components/TemplateVersionEditor/FileDialog.tsx b/site/src/components/TemplateVersionEditor/FileDialog.tsx index 29c01dada8e0c..c398a1360e98b 100644 --- a/site/src/components/TemplateVersionEditor/FileDialog.tsx +++ b/site/src/components/TemplateVersionEditor/FileDialog.tsx @@ -1,8 +1,8 @@ -import TextField from "@material-ui/core/TextField" +import TextField from "@mui/material/TextField" import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog" import { Stack } from "components/Stack/Stack" import { ChangeEvent, FC, useState } from "react" -import Typography from "@material-ui/core/Typography" +import Typography from "@mui/material/Typography" import { allowedExtensions, isAllowedFile } from "utils/templateVersion" import { FileTree, isFolder, validatePath } from "utils/filetree" diff --git a/site/src/components/TemplateVersionEditor/FileTreeView.tsx b/site/src/components/TemplateVersionEditor/FileTreeView.tsx index 372476a6ff034..f760125bec702 100644 --- a/site/src/components/TemplateVersionEditor/FileTreeView.tsx +++ b/site/src/components/TemplateVersionEditor/FileTreeView.tsx @@ -1,10 +1,10 @@ -import { makeStyles } from "@material-ui/core/styles" -import ChevronRightIcon from "@material-ui/icons/ChevronRight" -import ExpandMoreIcon from "@material-ui/icons/ExpandMore" +import { makeStyles } from "@mui/material/styles" +import ChevronRightIcon from "@mui/icons-material/ChevronRight" +import ExpandMoreIcon from "@mui/icons-material/ExpandMore" import TreeView from "@material-ui/lab/TreeView" import TreeItem from "@material-ui/lab/TreeItem" -import Menu from "@material-ui/core/Menu" -import MenuItem from "@material-ui/core/MenuItem" +import Menu from "@mui/material/Menu" +import MenuItem from "@mui/material/MenuItem" import { CSSProperties, FC, useState } from "react" import { FileTree } from "utils/filetree" import { DockerIcon } from "components/Icons/DockerIcon" diff --git a/site/src/components/TemplateVersionEditor/MissingTemplateVariablesDialog.tsx b/site/src/components/TemplateVersionEditor/MissingTemplateVariablesDialog.tsx index 23dfc27be2506..84c8270d89b57 100644 --- a/site/src/components/TemplateVersionEditor/MissingTemplateVariablesDialog.tsx +++ b/site/src/components/TemplateVersionEditor/MissingTemplateVariablesDialog.tsx @@ -1,14 +1,14 @@ -import { makeStyles } from "@material-ui/core/styles" -import Dialog from "@material-ui/core/Dialog" -import DialogContent from "@material-ui/core/DialogContent" -import DialogContentText from "@material-ui/core/DialogContentText" -import DialogTitle from "@material-ui/core/DialogTitle" +import { makeStyles } from "@mui/material/styles" +import Dialog from "@mui/material/Dialog" +import DialogContent from "@mui/material/DialogContent" +import DialogContentText from "@mui/material/DialogContentText" +import DialogTitle from "@mui/material/DialogTitle" import { DialogProps } from "components/Dialogs/Dialog" import { FC, useEffect, useState } from "react" import { FormFields, VerticalForm } from "components/Form/Form" import { TemplateVersionVariable, VariableValue } from "api/typesGenerated" -import DialogActions from "@material-ui/core/DialogActions" -import Button from "@material-ui/core/Button" +import DialogActions from "@mui/material/DialogActions" +import Button from "@mui/material/Button" import { VariableInput } from "pages/CreateTemplatePage/VariableInput" import { Loader } from "components/Loader/Loader" diff --git a/site/src/components/TemplateVersionEditor/MonacoEditor.tsx b/site/src/components/TemplateVersionEditor/MonacoEditor.tsx index 8fc42420b2333..7a1aaabd5b31b 100644 --- a/site/src/components/TemplateVersionEditor/MonacoEditor.tsx +++ b/site/src/components/TemplateVersionEditor/MonacoEditor.tsx @@ -1,4 +1,4 @@ -import { useTheme } from "@material-ui/core/styles" +import { useTheme } from "@mui/material/styles" import Editor, { loader } from "@monaco-editor/react" import * as monaco from "monaco-editor" import { FC, useLayoutEffect, useMemo, useState } from "react" diff --git a/site/src/components/TemplateVersionEditor/PublishTemplateVersionDialog.tsx b/site/src/components/TemplateVersionEditor/PublishTemplateVersionDialog.tsx index 63de32cfa9d90..05a2f8c3d9a66 100644 --- a/site/src/components/TemplateVersionEditor/PublishTemplateVersionDialog.tsx +++ b/site/src/components/TemplateVersionEditor/PublishTemplateVersionDialog.tsx @@ -5,10 +5,10 @@ import { FormFields } from "components/Form/Form" import { useFormik } from "formik" import * as Yup from "yup" import { PublishVersionData } from "pages/TemplateVersionPage/TemplateVersionEditorPage/types" -import TextField from "@material-ui/core/TextField" +import TextField from "@mui/material/TextField" import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog" -import Checkbox from "@material-ui/core/Checkbox" -import FormControlLabel from "@material-ui/core/FormControlLabel" +import Checkbox from "@mui/material/Checkbox" +import FormControlLabel from "@mui/material/FormControlLabel" import { Stack } from "components/Stack/Stack" export type PublishTemplateVersionDialogProps = DialogProps & { diff --git a/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx b/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx index d639a262ff169..85333e12c91e1 100644 --- a/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx +++ b/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx @@ -1,10 +1,10 @@ -import Button from "@material-ui/core/Button" -import IconButton from "@material-ui/core/IconButton" -import { makeStyles, Theme } from "@material-ui/core/styles" -import Tooltip from "@material-ui/core/Tooltip" -import CreateIcon from "@material-ui/icons/AddOutlined" -import BuildIcon from "@material-ui/icons/BuildOutlined" -import PreviewIcon from "@material-ui/icons/VisibilityOutlined" +import Button from "@mui/material/Button" +import IconButton from "@mui/material/IconButton" +import { makeStyles, Theme } from "@mui/material/styles" +import Tooltip from "@mui/material/Tooltip" +import CreateIcon from "@mui/icons-material/AddOutlined" +import BuildIcon from "@mui/icons-material/BuildOutlined" +import PreviewIcon from "@mui/icons-material/VisibilityOutlined" import { ProvisionerJobLog, Template, diff --git a/site/src/components/TemplateVersionEditor/TemplateVersionStatusBadge.tsx b/site/src/components/TemplateVersionEditor/TemplateVersionStatusBadge.tsx index f336ee65ef529..0ae581528549e 100644 --- a/site/src/components/TemplateVersionEditor/TemplateVersionStatusBadge.tsx +++ b/site/src/components/TemplateVersionEditor/TemplateVersionStatusBadge.tsx @@ -1,9 +1,9 @@ import { TemplateVersion } from "api/typesGenerated" import { FC, ReactNode } from "react" import { PaletteIndex } from "theme/palettes" -import CircularProgress from "@material-ui/core/CircularProgress" -import ErrorIcon from "@material-ui/icons/ErrorOutline" -import CheckIcon from "@material-ui/icons/CheckOutlined" +import CircularProgress from "@mui/material/CircularProgress" +import ErrorIcon from "@mui/icons-material/ErrorOutline" +import CheckIcon from "@mui/icons-material/CheckOutlined" import { Pill } from "components/Pill/Pill" export const TemplateVersionStatusBadge: FC<{ diff --git a/site/src/components/TerminalLink/TerminalLink.tsx b/site/src/components/TerminalLink/TerminalLink.tsx index ee0ee3bcac6d8..e5f88985547c3 100644 --- a/site/src/components/TerminalLink/TerminalLink.tsx +++ b/site/src/components/TerminalLink/TerminalLink.tsx @@ -1,4 +1,4 @@ -import Link from "@material-ui/core/Link" +import Link from "@mui/material/Link" import { SecondaryAgentButton } from "components/Resources/AgentButton" import { FC } from "react" import * as TypesGen from "../../api/typesGenerated" diff --git a/site/src/components/Timeline/TimelineDateRow.tsx b/site/src/components/Timeline/TimelineDateRow.tsx index 6419f537c66dd..bb409f08bfec4 100644 --- a/site/src/components/Timeline/TimelineDateRow.tsx +++ b/site/src/components/Timeline/TimelineDateRow.tsx @@ -1,6 +1,6 @@ -import { makeStyles } from "@material-ui/core/styles" -import TableCell from "@material-ui/core/TableCell" -import TableRow from "@material-ui/core/TableRow" +import { makeStyles } from "@mui/material/styles" +import TableCell from "@mui/material/TableCell" +import TableRow from "@mui/material/TableRow" import formatRelative from "date-fns/formatRelative" import { FC } from "react" diff --git a/site/src/components/Timeline/TimelineEntry.tsx b/site/src/components/Timeline/TimelineEntry.tsx index 788d5a0e93393..997346a102221 100644 --- a/site/src/components/Timeline/TimelineEntry.tsx +++ b/site/src/components/Timeline/TimelineEntry.tsx @@ -1,5 +1,5 @@ -import { makeStyles } from "@material-ui/core/styles" -import TableRow, { TableRowProps } from "@material-ui/core/TableRow" +import { makeStyles } from "@mui/material/styles" +import TableRow, { TableRowProps } from "@mui/material/TableRow" import { PropsWithChildren } from "react" import { combineClasses } from "utils/combineClasses" diff --git a/site/src/components/Tooltips/AgentOutdatedTooltip.tsx b/site/src/components/Tooltips/AgentOutdatedTooltip.tsx index 14f1a2c827717..0b4f2a8171c72 100644 --- a/site/src/components/Tooltips/AgentOutdatedTooltip.tsx +++ b/site/src/components/Tooltips/AgentOutdatedTooltip.tsx @@ -1,6 +1,6 @@ import { ComponentProps, FC } from "react" -import { makeStyles } from "@material-ui/core/styles" -import RefreshIcon from "@material-ui/icons/RefreshOutlined" +import { makeStyles } from "@mui/material/styles" +import RefreshIcon from "@mui/icons-material/RefreshOutlined" import { HelpTooltipText, HelpPopover, diff --git a/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx b/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx index 11167c062b06b..cd9acc44d79d1 100644 --- a/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx +++ b/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx @@ -1,8 +1,8 @@ -import Link from "@material-ui/core/Link" -import Popover, { PopoverProps } from "@material-ui/core/Popover" -import { makeStyles } from "@material-ui/core/styles" -import HelpIcon from "@material-ui/icons/HelpOutline" -import OpenInNewIcon from "@material-ui/icons/OpenInNew" +import Link from "@mui/material/Link" +import Popover, { PopoverProps } from "@mui/material/Popover" +import { makeStyles } from "@mui/material/styles" +import HelpIcon from "@mui/icons-material/HelpOutline" +import OpenInNewIcon from "@mui/icons-material/OpenInNew" import { createContext, useContext, diff --git a/site/src/components/Tooltips/OutdatedHelpTooltip.tsx b/site/src/components/Tooltips/OutdatedHelpTooltip.tsx index 10655537f65a8..3f921276db444 100644 --- a/site/src/components/Tooltips/OutdatedHelpTooltip.tsx +++ b/site/src/components/Tooltips/OutdatedHelpTooltip.tsx @@ -1,4 +1,4 @@ -import RefreshIcon from "@material-ui/icons/Refresh" +import RefreshIcon from "@mui/icons-material/Refresh" import { FC } from "react" import { HelpTooltip, @@ -7,8 +7,8 @@ import { HelpTooltipText, HelpTooltipTitle, } from "./HelpTooltip" -import InfoIcon from "@material-ui/icons/InfoOutlined" -import { makeStyles } from "@material-ui/core/styles" +import InfoIcon from "@mui/icons-material/InfoOutlined" +import { makeStyles } from "@mui/material/styles" import { colors } from "theme/colors" export const Language = { diff --git a/site/src/components/Typography/Typography.tsx b/site/src/components/Typography/Typography.tsx index 81ea488825009..5b5d3fbe66724 100644 --- a/site/src/components/Typography/Typography.tsx +++ b/site/src/components/Typography/Typography.tsx @@ -3,10 +3,10 @@ * verbatim port from `@coder/ui`. */ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import MuiTypography, { TypographyProps as MuiTypographyProps, -} from "@material-ui/core/Typography" +} from "@mui/material/Typography" import * as React from "react" import { appendCSSString, combineClasses } from "../../utils/combineClasses" diff --git a/site/src/components/UpdateCheckBanner/UpdateCheckBanner.tsx b/site/src/components/UpdateCheckBanner/UpdateCheckBanner.tsx index 3fc692bb753c7..c3511180c8765 100644 --- a/site/src/components/UpdateCheckBanner/UpdateCheckBanner.tsx +++ b/site/src/components/UpdateCheckBanner/UpdateCheckBanner.tsx @@ -1,4 +1,4 @@ -import Link from "@material-ui/core/Link" +import Link from "@mui/material/Link" import { AlertBanner } from "components/AlertBanner/AlertBanner" import { Trans, useTranslation } from "react-i18next" import * as TypesGen from "api/typesGenerated" diff --git a/site/src/components/UserAutocomplete/UserAutocomplete.tsx b/site/src/components/UserAutocomplete/UserAutocomplete.tsx index 3ca4ce7529c43..6535c00f38637 100644 --- a/site/src/components/UserAutocomplete/UserAutocomplete.tsx +++ b/site/src/components/UserAutocomplete/UserAutocomplete.tsx @@ -1,6 +1,6 @@ -import CircularProgress from "@material-ui/core/CircularProgress" -import { makeStyles } from "@material-ui/core/styles" -import TextField from "@material-ui/core/TextField" +import CircularProgress from "@mui/material/CircularProgress" +import { makeStyles } from "@mui/material/styles" +import TextField from "@mui/material/TextField" import Autocomplete from "@material-ui/lab/Autocomplete" import { useMachine } from "@xstate/react" import { User } from "api/typesGenerated" diff --git a/site/src/components/UserCell/UserCell.tsx b/site/src/components/UserCell/UserCell.tsx index 8b30bd0d9d264..fd2086b8e2063 100644 --- a/site/src/components/UserCell/UserCell.tsx +++ b/site/src/components/UserCell/UserCell.tsx @@ -1,7 +1,7 @@ -import Box from "@material-ui/core/Box" -import Link from "@material-ui/core/Link" -import { makeStyles } from "@material-ui/core/styles" -import Typography from "@material-ui/core/Typography" +import Box from "@mui/material/Box" +import Link from "@mui/material/Link" +import { makeStyles } from "@mui/material/styles" +import Typography from "@mui/material/Typography" import { FC } from "react" import { UserAvatar, UserAvatarProps } from "../UserAvatar/UserAvatar" diff --git a/site/src/components/UserDropdown/UserDropdown.stories.tsx b/site/src/components/UserDropdown/UserDropdown.stories.tsx index 6b76fa11e4b64..8320e29e69811 100644 --- a/site/src/components/UserDropdown/UserDropdown.stories.tsx +++ b/site/src/components/UserDropdown/UserDropdown.stories.tsx @@ -1,4 +1,4 @@ -import Box from "@material-ui/core/Box" +import Box from "@mui/material/Box" import { Story } from "@storybook/react" import { MockUser } from "../../testHelpers/entities" import { UserDropdown, UserDropdownProps } from "./UsersDropdown" diff --git a/site/src/components/UserDropdown/UsersDropdown.tsx b/site/src/components/UserDropdown/UsersDropdown.tsx index 3d670f3be3273..26c0949a69337 100644 --- a/site/src/components/UserDropdown/UsersDropdown.tsx +++ b/site/src/components/UserDropdown/UsersDropdown.tsx @@ -1,6 +1,6 @@ -import Badge from "@material-ui/core/Badge" -import MenuItem from "@material-ui/core/MenuItem" -import { makeStyles } from "@material-ui/core/styles" +import Badge from "@mui/material/Badge" +import MenuItem from "@mui/material/MenuItem" +import { makeStyles } from "@mui/material/styles" import { useState, FC, PropsWithChildren, MouseEvent } from "react" import { colors } from "theme/colors" import * as TypesGen from "../../api/typesGenerated" diff --git a/site/src/components/UserDropdownContent/UserDropdownContent.tsx b/site/src/components/UserDropdownContent/UserDropdownContent.tsx index 0a1e840665b30..b7633f0b4bc6e 100644 --- a/site/src/components/UserDropdownContent/UserDropdownContent.tsx +++ b/site/src/components/UserDropdownContent/UserDropdownContent.tsx @@ -1,16 +1,16 @@ -import Divider from "@material-ui/core/Divider" -import MenuItem from "@material-ui/core/MenuItem" -import { makeStyles } from "@material-ui/core/styles" -import AccountIcon from "@material-ui/icons/AccountCircleOutlined" -import BugIcon from "@material-ui/icons/BugReportOutlined" -import ChatIcon from "@material-ui/icons/ChatOutlined" -import LaunchIcon from "@material-ui/icons/LaunchOutlined" +import Divider from "@mui/material/Divider" +import MenuItem from "@mui/material/MenuItem" +import { makeStyles } from "@mui/material/styles" +import AccountIcon from "@mui/icons-material/AccountCircleOutlined" +import BugIcon from "@mui/icons-material/BugReportOutlined" +import ChatIcon from "@mui/icons-material/ChatOutlined" +import LaunchIcon from "@mui/icons-material/LaunchOutlined" import { Stack } from "components/Stack/Stack" import { FC } from "react" import { Link } from "react-router-dom" import * as TypesGen from "../../api/typesGenerated" -import DocsIcon from "@material-ui/icons/MenuBook" -import LogoutIcon from "@material-ui/icons/ExitToAppOutlined" +import DocsIcon from "@mui/icons-material/MenuBook" +import LogoutIcon from "@mui/icons-material/ExitToAppOutlined" import { combineClasses } from "utils/combineClasses" export const Language = { diff --git a/site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx b/site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx index d0883534e0482..3d6d707de0013 100644 --- a/site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx +++ b/site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx @@ -1,6 +1,6 @@ -import CircularProgress from "@material-ui/core/CircularProgress" -import { makeStyles } from "@material-ui/core/styles" -import TextField from "@material-ui/core/TextField" +import CircularProgress from "@mui/material/CircularProgress" +import { makeStyles } from "@mui/material/styles" +import TextField from "@mui/material/TextField" import Autocomplete from "@material-ui/lab/Autocomplete" import { useMachine } from "@xstate/react" import { Group, User } from "api/typesGenerated" diff --git a/site/src/components/UsersLayout/UsersLayout.tsx b/site/src/components/UsersLayout/UsersLayout.tsx index cfc4bf7df08da..e1895ea16d62a 100644 --- a/site/src/components/UsersLayout/UsersLayout.tsx +++ b/site/src/components/UsersLayout/UsersLayout.tsx @@ -1,8 +1,8 @@ -import Button from "@material-ui/core/Button" -import Link from "@material-ui/core/Link" -import { makeStyles } from "@material-ui/core/styles" -import GroupAdd from "@material-ui/icons/GroupAddOutlined" -import PersonAdd from "@material-ui/icons/PersonAddOutlined" +import Button from "@mui/material/Button" +import Link from "@mui/material/Link" +import { makeStyles } from "@mui/material/styles" +import GroupAdd from "@mui/icons-material/GroupAddOutlined" +import PersonAdd from "@mui/icons-material/PersonAddOutlined" import { useMachine } from "@xstate/react" import { USERS_LINK } from "components/NavbarView/NavbarView" import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader" diff --git a/site/src/components/UsersTable/UsersTable.tsx b/site/src/components/UsersTable/UsersTable.tsx index 52683c6c230a4..6729c3e7e0f4f 100644 --- a/site/src/components/UsersTable/UsersTable.tsx +++ b/site/src/components/UsersTable/UsersTable.tsx @@ -1,9 +1,9 @@ -import Table from "@material-ui/core/Table" -import TableBody from "@material-ui/core/TableBody" -import TableCell from "@material-ui/core/TableCell" -import TableContainer from "@material-ui/core/TableContainer" -import TableHead from "@material-ui/core/TableHead" -import TableRow from "@material-ui/core/TableRow" +import Table from "@mui/material/Table" +import TableBody from "@mui/material/TableBody" +import TableCell from "@mui/material/TableCell" +import TableContainer from "@mui/material/TableContainer" +import TableHead from "@mui/material/TableHead" +import TableRow from "@mui/material/TableRow" import { FC } from "react" import * as TypesGen from "../../api/typesGenerated" import { Stack } from "../Stack/Stack" diff --git a/site/src/components/UsersTable/UsersTableBody.tsx b/site/src/components/UsersTable/UsersTableBody.tsx index bbd2756d303ce..a2266b25b8c04 100644 --- a/site/src/components/UsersTable/UsersTableBody.tsx +++ b/site/src/components/UsersTable/UsersTableBody.tsx @@ -1,7 +1,7 @@ -import Box from "@material-ui/core/Box" -import { makeStyles } from "@material-ui/core/styles" -import TableCell from "@material-ui/core/TableCell" -import TableRow from "@material-ui/core/TableRow" +import Box from "@mui/material/Box" +import { makeStyles } from "@mui/material/styles" +import TableCell from "@mui/material/TableCell" +import TableRow from "@mui/material/TableRow" import { ChooseOne, Cond } from "components/Conditionals/ChooseOne" import { LastUsed } from "components/LastUsed/LastUsed" import { Pill } from "components/Pill/Pill" diff --git a/site/src/components/VersionsTable/VersionRow.tsx b/site/src/components/VersionsTable/VersionRow.tsx index d1912bf5f564b..f7f3d568aa0c6 100644 --- a/site/src/components/VersionsTable/VersionRow.tsx +++ b/site/src/components/VersionsTable/VersionRow.tsx @@ -1,6 +1,6 @@ -import Button from "@material-ui/core/Button" -import { makeStyles } from "@material-ui/core/styles" -import TableCell from "@material-ui/core/TableCell" +import Button from "@mui/material/Button" +import { makeStyles } from "@mui/material/styles" +import TableCell from "@mui/material/TableCell" import { TemplateVersion } from "api/typesGenerated" import { Pill } from "components/Pill/Pill" import { Stack } from "components/Stack/Stack" diff --git a/site/src/components/VersionsTable/VersionsTable.tsx b/site/src/components/VersionsTable/VersionsTable.tsx index 1854a109e977d..57e5a256471e3 100644 --- a/site/src/components/VersionsTable/VersionsTable.tsx +++ b/site/src/components/VersionsTable/VersionsTable.tsx @@ -1,9 +1,9 @@ -import Box from "@material-ui/core/Box" -import Table from "@material-ui/core/Table" -import TableBody from "@material-ui/core/TableBody" -import TableCell from "@material-ui/core/TableCell" -import TableContainer from "@material-ui/core/TableContainer" -import TableRow from "@material-ui/core/TableRow" +import Box from "@mui/material/Box" +import Table from "@mui/material/Table" +import TableBody from "@mui/material/TableBody" +import TableCell from "@mui/material/TableCell" +import TableContainer from "@mui/material/TableContainer" +import TableRow from "@mui/material/TableRow" import { Timeline } from "components/Timeline/Timeline" import { FC } from "react" import * as TypesGen from "../../api/typesGenerated" diff --git a/site/src/components/WarningAlert/WarningAlert.stories.tsx b/site/src/components/WarningAlert/WarningAlert.stories.tsx index dc8eed293441e..e50b4f034f66d 100644 --- a/site/src/components/WarningAlert/WarningAlert.stories.tsx +++ b/site/src/components/WarningAlert/WarningAlert.stories.tsx @@ -1,6 +1,6 @@ import { Story } from "@storybook/react" import { WarningAlert, WarningAlertProps } from "./WarningAlert" -import Button from "@material-ui/core/Button" +import Button from "@mui/material/Button" export default { title: "components/WarningAlert", diff --git a/site/src/components/WarningAlert/WarningAlert.tsx b/site/src/components/WarningAlert/WarningAlert.tsx index dde48fde2666a..6ed16d9763f06 100644 --- a/site/src/components/WarningAlert/WarningAlert.tsx +++ b/site/src/components/WarningAlert/WarningAlert.tsx @@ -1,10 +1,10 @@ import { useState, FC, ReactElement } from "react" -import Collapse from "@material-ui/core/Collapse" +import Collapse from "@mui/material/Collapse" import { Stack } from "components/Stack/Stack" -import { makeStyles, Theme } from "@material-ui/core/styles" +import { makeStyles, Theme } from "@mui/material/styles" import { colors } from "theme/colors" -import ReportProblemOutlinedIcon from "@material-ui/icons/ReportProblemOutlined" -import Button from "@material-ui/core/Button" +import ReportProblemOutlinedIcon from "@mui/icons-material/ReportProblemOutlined" +import Button from "@mui/material/Button" import { useTranslation } from "react-i18next" export interface WarningAlertProps { diff --git a/site/src/components/Welcome/Welcome.tsx b/site/src/components/Welcome/Welcome.tsx index 7ba94b81e76d5..b87c6494e8a88 100644 --- a/site/src/components/Welcome/Welcome.tsx +++ b/site/src/components/Welcome/Welcome.tsx @@ -1,5 +1,5 @@ -import { makeStyles } from "@material-ui/core/styles" -import Typography from "@material-ui/core/Typography" +import { makeStyles } from "@mui/material/styles" +import Typography from "@mui/material/Typography" import { FC, PropsWithChildren } from "react" import { CoderIcon } from "../Icons/CoderIcon" diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx index 8a1db80814baf..685305b415aa3 100644 --- a/site/src/components/Workspace/Workspace.tsx +++ b/site/src/components/Workspace/Workspace.tsx @@ -1,6 +1,6 @@ -import Button from "@material-ui/core/Button" -import { makeStyles } from "@material-ui/core/styles" -import RefreshOutlined from "@material-ui/icons/RefreshOutlined" +import Button from "@mui/material/Button" +import { makeStyles } from "@mui/material/styles" +import RefreshOutlined from "@mui/icons-material/RefreshOutlined" import { Avatar } from "components/Avatar/Avatar" import { AgentRow } from "components/Resources/AgentRow" import { WorkspaceBuildLogs } from "components/WorkspaceBuildLogs/WorkspaceBuildLogs" diff --git a/site/src/components/WorkspaceActions/Buttons.tsx b/site/src/components/WorkspaceActions/Buttons.tsx index d17465271a394..e7da9bdef24b1 100644 --- a/site/src/components/WorkspaceActions/Buttons.tsx +++ b/site/src/components/WorkspaceActions/Buttons.tsx @@ -1,9 +1,9 @@ -import Button from "@material-ui/core/Button" -import BlockIcon from "@material-ui/icons/Block" -import CloudQueueIcon from "@material-ui/icons/CloudQueue" -import CropSquareIcon from "@material-ui/icons/CropSquare" -import PlayCircleOutlineIcon from "@material-ui/icons/PlayCircleOutline" -import ReplayIcon from "@material-ui/icons/Replay" +import Button from "@mui/material/Button" +import BlockIcon from "@mui/icons-material/Block" +import CloudQueueIcon from "@mui/icons-material/CloudQueue" +import CropSquareIcon from "@mui/icons-material/CropSquare" +import PlayCircleOutlineIcon from "@mui/icons-material/PlayCircleOutline" +import ReplayIcon from "@mui/icons-material/Replay" import { LoadingButton } from "components/LoadingButton/LoadingButton" import { FC, PropsWithChildren } from "react" import { useTranslation } from "react-i18next" diff --git a/site/src/components/WorkspaceActions/WorkspaceActions.tsx b/site/src/components/WorkspaceActions/WorkspaceActions.tsx index 7f72339216244..8643cc8906933 100644 --- a/site/src/components/WorkspaceActions/WorkspaceActions.tsx +++ b/site/src/components/WorkspaceActions/WorkspaceActions.tsx @@ -1,7 +1,7 @@ -import MenuItem from "@material-ui/core/MenuItem" -import Menu from "@material-ui/core/Menu" -import { makeStyles } from "@material-ui/core/styles" -import MoreVertOutlined from "@material-ui/icons/MoreVertOutlined" +import MenuItem from "@mui/material/MenuItem" +import Menu from "@mui/material/Menu" +import { makeStyles } from "@mui/material/styles" +import MoreVertOutlined from "@mui/icons-material/MoreVertOutlined" import { FC, ReactNode, useRef, useState } from "react" import { useTranslation } from "react-i18next" import { WorkspaceStatus } from "api/typesGenerated" @@ -19,10 +19,10 @@ import { ButtonTypesEnum, actionsByWorkspaceStatus, } from "./constants" -import SettingsOutlined from "@material-ui/icons/SettingsOutlined" -import HistoryOutlined from "@material-ui/icons/HistoryOutlined" -import DeleteOutlined from "@material-ui/icons/DeleteOutlined" -import IconButton from "@material-ui/core/IconButton" +import SettingsOutlined from "@mui/icons-material/SettingsOutlined" +import HistoryOutlined from "@mui/icons-material/HistoryOutlined" +import DeleteOutlined from "@mui/icons-material/DeleteOutlined" +import IconButton from "@mui/material/IconButton" export interface WorkspaceActionsProps { workspaceStatus: WorkspaceStatus diff --git a/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx b/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx index d64d54c94a1cf..19cb6fa25850b 100644 --- a/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx +++ b/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx @@ -1,4 +1,4 @@ -import { makeStyles, Theme } from "@material-ui/core/styles" +import { makeStyles, Theme } from "@mui/material/styles" import dayjs from "dayjs" import { FC, Fragment } from "react" import { ProvisionerJobLog } from "../../api/typesGenerated" diff --git a/site/src/components/WorkspaceBuildProgress/WorkspaceBuildProgress.tsx b/site/src/components/WorkspaceBuildProgress/WorkspaceBuildProgress.tsx index 55eaab9055173..27d9927de4f13 100644 --- a/site/src/components/WorkspaceBuildProgress/WorkspaceBuildProgress.tsx +++ b/site/src/components/WorkspaceBuildProgress/WorkspaceBuildProgress.tsx @@ -1,5 +1,5 @@ -import LinearProgress from "@material-ui/core/LinearProgress" -import makeStyles from "@material-ui/core/styles/makeStyles" +import LinearProgress from "@mui/material/LinearProgress" +import makeStyles from "@mui/material/styles/makeStyles" import { TransitionStats, Template, Workspace } from "api/typesGenerated" import dayjs, { Dayjs } from "dayjs" import { FC, useEffect, useState } from "react" diff --git a/site/src/components/WorkspaceDeletedBanner/WorkspaceDeletedBanner.tsx b/site/src/components/WorkspaceDeletedBanner/WorkspaceDeletedBanner.tsx index 0eaa2eb06bbd2..edda54a7a7133 100644 --- a/site/src/components/WorkspaceDeletedBanner/WorkspaceDeletedBanner.tsx +++ b/site/src/components/WorkspaceDeletedBanner/WorkspaceDeletedBanner.tsx @@ -1,4 +1,4 @@ -import Button from "@material-ui/core/Button" +import Button from "@mui/material/Button" import { FC } from "react" import * as TypesGen from "api/typesGenerated" import { AlertBanner } from "components/AlertBanner/AlertBanner" diff --git a/site/src/components/WorkspaceSchedule/WorkspaceSchedule.tsx b/site/src/components/WorkspaceSchedule/WorkspaceSchedule.tsx index f23e774da064a..d6f10066c90f4 100644 --- a/site/src/components/WorkspaceSchedule/WorkspaceSchedule.tsx +++ b/site/src/components/WorkspaceSchedule/WorkspaceSchedule.tsx @@ -1,5 +1,5 @@ -import Link from "@material-ui/core/Link" -import { makeStyles } from "@material-ui/core/styles" +import Link from "@mui/material/Link" +import { makeStyles } from "@mui/material/styles" import dayjs from "dayjs" import advancedFormat from "dayjs/plugin/advancedFormat" import duration from "dayjs/plugin/duration" diff --git a/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx b/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx index e77bcb1d1d636..a84f385535d14 100644 --- a/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx +++ b/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx @@ -1,13 +1,13 @@ -import Checkbox from "@material-ui/core/Checkbox" -import FormControl from "@material-ui/core/FormControl" -import FormControlLabel from "@material-ui/core/FormControlLabel" -import FormGroup from "@material-ui/core/FormGroup" -import FormHelperText from "@material-ui/core/FormHelperText" -import FormLabel from "@material-ui/core/FormLabel" -import MenuItem from "@material-ui/core/MenuItem" -import makeStyles from "@material-ui/core/styles/makeStyles" -import Switch from "@material-ui/core/Switch" -import TextField from "@material-ui/core/TextField" +import Checkbox from "@mui/material/Checkbox" +import FormControl from "@mui/material/FormControl" +import FormControlLabel from "@mui/material/FormControlLabel" +import FormGroup from "@mui/material/FormGroup" +import FormHelperText from "@mui/material/FormHelperText" +import FormLabel from "@mui/material/FormLabel" +import MenuItem from "@mui/material/MenuItem" +import makeStyles from "@mui/material/styles/makeStyles" +import Switch from "@mui/material/Switch" +import TextField from "@mui/material/TextField" import { HorizontalForm, FormFooter, diff --git a/site/src/components/WorkspaceSection/WorkspaceSection.stories.tsx b/site/src/components/WorkspaceSection/WorkspaceSection.stories.tsx index 7926462b9bd73..8ace87a07e998 100644 --- a/site/src/components/WorkspaceSection/WorkspaceSection.stories.tsx +++ b/site/src/components/WorkspaceSection/WorkspaceSection.stories.tsx @@ -1,5 +1,5 @@ -import IconButton from "@material-ui/core/IconButton" -import EditIcon from "@material-ui/icons/Edit" +import IconButton from "@mui/material/IconButton" +import EditIcon from "@mui/icons-material/Edit" import { action } from "@storybook/addon-actions" import { Story } from "@storybook/react" import { WorkspaceSection, WorkspaceSectionProps } from "./WorkspaceSection" diff --git a/site/src/components/WorkspaceSection/WorkspaceSection.tsx b/site/src/components/WorkspaceSection/WorkspaceSection.tsx index 98e96dc685444..d0d8e69e152f7 100644 --- a/site/src/components/WorkspaceSection/WorkspaceSection.tsx +++ b/site/src/components/WorkspaceSection/WorkspaceSection.tsx @@ -1,6 +1,6 @@ -import Paper from "@material-ui/core/Paper" -import { makeStyles } from "@material-ui/core/styles" -import Typography from "@material-ui/core/Typography" +import Paper from "@mui/material/Paper" +import { makeStyles } from "@mui/material/styles" +import Typography from "@mui/material/Typography" import { HTMLProps, ReactNode, FC, PropsWithChildren } from "react" import { CardPadding } from "../../theme/constants" import { combineClasses } from "../../utils/combineClasses" diff --git a/site/src/components/WorkspaceStats/WorkspaceStats.tsx b/site/src/components/WorkspaceStats/WorkspaceStats.tsx index 292fce8222d17..c7f32aeeadac5 100644 --- a/site/src/components/WorkspaceStats/WorkspaceStats.tsx +++ b/site/src/components/WorkspaceStats/WorkspaceStats.tsx @@ -1,4 +1,4 @@ -import Link from "@material-ui/core/Link" +import Link from "@mui/material/Link" import { OutdatedHelpTooltip } from "components/Tooltips" import { FC, useRef, useState } from "react" import { Link as RouterLink } from "react-router-dom" @@ -12,13 +12,13 @@ import { Workspace } from "../../api/typesGenerated" import { Stats, StatsItem } from "components/Stats/Stats" import upperFirst from "lodash/upperFirst" import { autostartDisplay, autostopDisplay } from "utils/schedule" -import IconButton from "@material-ui/core/IconButton" -import RemoveIcon from "@material-ui/icons/RemoveOutlined" -import { makeStyles } from "@material-ui/core/styles" -import AddIcon from "@material-ui/icons/AddOutlined" -import Popover from "@material-ui/core/Popover" -import TextField from "@material-ui/core/TextField" -import Button from "@material-ui/core/Button" +import IconButton from "@mui/material/IconButton" +import RemoveIcon from "@mui/icons-material/RemoveOutlined" +import { makeStyles } from "@mui/material/styles" +import AddIcon from "@mui/icons-material/AddOutlined" +import Popover from "@mui/material/Popover" +import TextField from "@mui/material/TextField" +import Button from "@mui/material/Button" import { WorkspaceStatusText } from "components/WorkspaceStatusBadge/WorkspaceStatusBadge" const Language = { diff --git a/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx b/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx index a37b10a07a412..5d47b662f20b4 100644 --- a/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx +++ b/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx @@ -1,14 +1,14 @@ -import CircularProgress from "@material-ui/core/CircularProgress" -import ErrorIcon from "@material-ui/icons/ErrorOutline" -import StopIcon from "@material-ui/icons/StopOutlined" -import PlayIcon from "@material-ui/icons/PlayArrowOutlined" -import QueuedIcon from "@material-ui/icons/HourglassEmpty" +import CircularProgress from "@mui/material/CircularProgress" +import ErrorIcon from "@mui/icons-material/ErrorOutline" +import StopIcon from "@mui/icons-material/StopOutlined" +import PlayIcon from "@mui/icons-material/PlayArrowOutlined" +import QueuedIcon from "@mui/icons-material/HourglassEmpty" import { WorkspaceBuild } from "api/typesGenerated" import { Pill } from "components/Pill/Pill" import i18next from "i18next" import { FC, ReactNode, PropsWithChildren } from "react" import { PaletteIndex } from "theme/palettes" -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { combineClasses } from "utils/combineClasses" const LoadingIcon: FC = () => { diff --git a/site/src/components/WorkspacesTable/WorkspacesRow.tsx b/site/src/components/WorkspacesTable/WorkspacesRow.tsx index c8908223a4f70..8c442d5f27b11 100644 --- a/site/src/components/WorkspacesTable/WorkspacesRow.tsx +++ b/site/src/components/WorkspacesTable/WorkspacesRow.tsx @@ -1,7 +1,7 @@ -import TableCell from "@material-ui/core/TableCell" -import { makeStyles } from "@material-ui/core/styles" -import TableRow from "@material-ui/core/TableRow" -import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight" +import TableCell from "@mui/material/TableCell" +import { makeStyles } from "@mui/material/styles" +import TableRow from "@mui/material/TableRow" +import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight" import { AvatarData } from "components/AvatarData/AvatarData" import { WorkspaceStatusBadge } from "components/WorkspaceStatusBadge/WorkspaceStatusBadge" import { FC } from "react" diff --git a/site/src/components/WorkspacesTable/WorkspacesTable.tsx b/site/src/components/WorkspacesTable/WorkspacesTable.tsx index 94eb6e5c7568f..796d768b5a97b 100644 --- a/site/src/components/WorkspacesTable/WorkspacesTable.tsx +++ b/site/src/components/WorkspacesTable/WorkspacesTable.tsx @@ -1,9 +1,9 @@ -import Table from "@material-ui/core/Table" -import TableBody from "@material-ui/core/TableBody" -import TableCell from "@material-ui/core/TableCell" -import TableContainer from "@material-ui/core/TableContainer" -import TableHead from "@material-ui/core/TableHead" -import TableRow from "@material-ui/core/TableRow" +import Table from "@mui/material/Table" +import TableBody from "@mui/material/TableBody" +import TableCell from "@mui/material/TableCell" +import TableContainer from "@mui/material/TableContainer" +import TableHead from "@mui/material/TableHead" +import TableRow from "@mui/material/TableRow" import { Workspace } from "api/typesGenerated" import { FC } from "react" import { WorkspacesTableBody } from "./WorkspacesTableBody" diff --git a/site/src/components/WorkspacesTable/WorkspacesTableBody.tsx b/site/src/components/WorkspacesTable/WorkspacesTableBody.tsx index c42d4c4323a46..dc5fa01fa6ff6 100644 --- a/site/src/components/WorkspacesTable/WorkspacesTableBody.tsx +++ b/site/src/components/WorkspacesTable/WorkspacesTableBody.tsx @@ -1,7 +1,7 @@ -import Button from "@material-ui/core/Button" -import Link from "@material-ui/core/Link" -import { makeStyles } from "@material-ui/core/styles" -import AddOutlined from "@material-ui/icons/AddOutlined" +import Button from "@mui/material/Button" +import Link from "@mui/material/Link" +import { makeStyles } from "@mui/material/styles" +import AddOutlined from "@mui/icons-material/AddOutlined" import { Workspace } from "api/typesGenerated" import { ChooseOne, Cond } from "components/Conditionals/ChooseOne" import { TableEmpty } from "components/TableEmpty/TableEmpty" diff --git a/site/src/hooks/useClickableTableRow.ts b/site/src/hooks/useClickableTableRow.ts index 2610e2fb76503..1c97ddf9ec0f1 100644 --- a/site/src/hooks/useClickableTableRow.ts +++ b/site/src/hooks/useClickableTableRow.ts @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { useClickable, UseClickableResult } from "./useClickable" interface UseClickableTableRowResult extends UseClickableResult { diff --git a/site/src/pages/404Page/404Page.tsx b/site/src/pages/404Page/404Page.tsx index 308d581abe573..da60ea18754c1 100644 --- a/site/src/pages/404Page/404Page.tsx +++ b/site/src/pages/404Page/404Page.tsx @@ -1,5 +1,5 @@ -import { makeStyles } from "@material-ui/core/styles" -import Typography from "@material-ui/core/Typography" +import { makeStyles } from "@mui/material/styles" +import Typography from "@mui/material/Typography" import { FC } from "react" export const NotFoundPage: FC = () => { diff --git a/site/src/pages/AuditPage/AuditPageView.tsx b/site/src/pages/AuditPage/AuditPageView.tsx index 312cebfb79288..d2180067df578 100644 --- a/site/src/pages/AuditPage/AuditPageView.tsx +++ b/site/src/pages/AuditPage/AuditPageView.tsx @@ -1,8 +1,8 @@ -import Table from "@material-ui/core/Table" -import TableBody from "@material-ui/core/TableBody" -import TableCell from "@material-ui/core/TableCell" -import TableContainer from "@material-ui/core/TableContainer" -import TableRow from "@material-ui/core/TableRow" +import Table from "@mui/material/Table" +import TableBody from "@mui/material/TableBody" +import TableCell from "@mui/material/TableCell" +import TableContainer from "@mui/material/TableContainer" +import TableRow from "@mui/material/TableRow" import { AuditLog } from "api/typesGenerated" import { AuditLogRow } from "components/AuditLogRow/AuditLogRow" import { ChooseOne, Cond } from "components/Conditionals/ChooseOne" diff --git a/site/src/pages/AuditPage/AuditPaywall.tsx b/site/src/pages/AuditPage/AuditPaywall.tsx index d905fc8d6e21a..11d8877f80eea 100644 --- a/site/src/pages/AuditPage/AuditPaywall.tsx +++ b/site/src/pages/AuditPage/AuditPaywall.tsx @@ -1,6 +1,6 @@ -import Button from "@material-ui/core/Button" -import Link from "@material-ui/core/Link" -import ArrowRightAltOutlined from "@material-ui/icons/ArrowRightAltOutlined" +import Button from "@mui/material/Button" +import Link from "@mui/material/Link" +import ArrowRightAltOutlined from "@mui/icons-material/ArrowRightAltOutlined" import { Paywall } from "components/Paywall/Paywall" import { Stack } from "components/Stack/Stack" import { FC } from "react" diff --git a/site/src/pages/CliAuthPage/CliAuthPageView.tsx b/site/src/pages/CliAuthPage/CliAuthPageView.tsx index ab04a83c0dd2a..0cc62101fd244 100644 --- a/site/src/pages/CliAuthPage/CliAuthPageView.tsx +++ b/site/src/pages/CliAuthPage/CliAuthPageView.tsx @@ -1,5 +1,5 @@ -import Button from "@material-ui/core/Button" -import { makeStyles } from "@material-ui/core/styles" +import Button from "@mui/material/Button" +import { makeStyles } from "@mui/material/styles" import { CodeExample } from "components/CodeExample/CodeExample" import { SignInLayout } from "components/SignInLayout/SignInLayout" import { Welcome } from "components/Welcome/Welcome" diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx index da6dcea1c2533..ae5a0f9fc6748 100644 --- a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx +++ b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx @@ -1,6 +1,6 @@ -import Checkbox from "@material-ui/core/Checkbox" -import { makeStyles } from "@material-ui/core/styles" -import TextField from "@material-ui/core/TextField" +import Checkbox from "@mui/material/Checkbox" +import { makeStyles } from "@mui/material/styles" +import TextField from "@mui/material/TextField" import { ParameterSchema, ProvisionerJobLog, @@ -31,7 +31,7 @@ import { HelpTooltip, HelpTooltipText } from "components/Tooltips/HelpTooltip" import { LazyIconField } from "components/IconField/LazyIconField" import { Maybe } from "components/Conditionals/Maybe" import i18next from "i18next" -import Link from "@material-ui/core/Link" +import Link from "@mui/material/Link" import { HorizontalForm, FormSection, diff --git a/site/src/pages/CreateTemplatePage/TemplateUpload.tsx b/site/src/pages/CreateTemplatePage/TemplateUpload.tsx index 7d56662e4eeae..f7e73812f7c07 100644 --- a/site/src/pages/CreateTemplatePage/TemplateUpload.tsx +++ b/site/src/pages/CreateTemplatePage/TemplateUpload.tsx @@ -1,4 +1,4 @@ -import Link from "@material-ui/core/Link" +import Link from "@mui/material/Link" import { FileUpload } from "components/FileUpload/FileUpload" import { FC } from "react" import { useTranslation } from "react-i18next" diff --git a/site/src/pages/CreateTemplatePage/VariableInput.tsx b/site/src/pages/CreateTemplatePage/VariableInput.tsx index 83978dc30a7ab..aae15a83e931e 100644 --- a/site/src/pages/CreateTemplatePage/VariableInput.tsx +++ b/site/src/pages/CreateTemplatePage/VariableInput.tsx @@ -1,8 +1,8 @@ -import FormControlLabel from "@material-ui/core/FormControlLabel" -import Radio from "@material-ui/core/Radio" -import RadioGroup from "@material-ui/core/RadioGroup" -import { makeStyles } from "@material-ui/core/styles" -import TextField from "@material-ui/core/TextField" +import FormControlLabel from "@mui/material/FormControlLabel" +import Radio from "@mui/material/Radio" +import RadioGroup from "@mui/material/RadioGroup" +import { makeStyles } from "@mui/material/styles" +import TextField from "@mui/material/TextField" import { Stack } from "components/Stack/Stack" import { FC } from "react" import { TemplateVersionVariable } from "../../api/typesGenerated" diff --git a/site/src/pages/CreateTokenPage/CreateTokenForm.tsx b/site/src/pages/CreateTokenPage/CreateTokenForm.tsx index 4bffb10ddc0aa..6a0ae84df5775 100644 --- a/site/src/pages/CreateTokenPage/CreateTokenForm.tsx +++ b/site/src/pages/CreateTokenPage/CreateTokenForm.tsx @@ -5,11 +5,11 @@ import { FormFooter, HorizontalForm, } from "components/Form/Form" -import makeStyles from "@material-ui/core/styles/makeStyles" +import makeStyles from "@mui/material/styles/makeStyles" import { useTranslation } from "react-i18next" import { onChangeTrimmed, getFormHelpers } from "utils/formUtils" -import TextField from "@material-ui/core/TextField" -import MenuItem from "@material-ui/core/MenuItem" +import TextField from "@mui/material/TextField" +import MenuItem from "@mui/material/MenuItem" import { NANO_HOUR, CreateTokenData, diff --git a/site/src/pages/CreateTokenPage/CreateTokenPage.tsx b/site/src/pages/CreateTokenPage/CreateTokenPage.tsx index 1e1e5c8a12133..4da5f0511fe0d 100644 --- a/site/src/pages/CreateTokenPage/CreateTokenPage.tsx +++ b/site/src/pages/CreateTokenPage/CreateTokenPage.tsx @@ -14,7 +14,7 @@ import { NANO_HOUR, CreateTokenData } from "./utils" import { AlertBanner } from "components/AlertBanner/AlertBanner" import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog" import { CodeExample } from "components/CodeExample/CodeExample" -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" const initialValues: CreateTokenData = { name: "", diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx index ba5a7e38eba6c..958cd51d3bae9 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx @@ -1,4 +1,4 @@ -import TextField from "@material-ui/core/TextField" +import TextField from "@mui/material/TextField" import * as TypesGen from "api/typesGenerated" import { ParameterInput } from "components/ParameterInput/ParameterInput" import { RichParameterInput } from "components/RichParameterInput/RichParameterInput" @@ -20,7 +20,7 @@ import { FormFooter, HorizontalForm, } from "components/Form/Form" -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { selectInitialRichParametersValues, useValidationSchemaForRichParameters, diff --git a/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx b/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx index efb400c4577e5..7cfd112665896 100644 --- a/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx +++ b/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { Template, TemplateExample } from "api/typesGenerated" import { Avatar } from "components/Avatar/Avatar" import { Stack } from "components/Stack/Stack" diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx index bd545920bdc0a..42d337345ba07 100644 --- a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx +++ b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx @@ -6,21 +6,21 @@ import { EnterpriseBadge, EntitledBadge, } from "components/DeploySettingsLayout/Badges" -import InputAdornment from "@material-ui/core/InputAdornment" +import InputAdornment from "@mui/material/InputAdornment" import { Fieldset } from "components/DeploySettingsLayout/Fieldset" import { getFormHelpers } from "utils/formUtils" -import Button from "@material-ui/core/Button" -import FormControlLabel from "@material-ui/core/FormControlLabel" -import FormHelperText from "@material-ui/core/FormHelperText" +import Button from "@mui/material/Button" +import FormControlLabel from "@mui/material/FormControlLabel" +import FormHelperText from "@mui/material/FormHelperText" import { BlockPicker } from "react-color" import { useTranslation } from "react-i18next" -import makeStyles from "@material-ui/core/styles/makeStyles" -import Switch from "@material-ui/core/Switch" -import TextField from "@material-ui/core/TextField" +import makeStyles from "@mui/material/styles/makeStyles" +import Switch from "@mui/material/Switch" +import TextField from "@mui/material/TextField" import { UpdateAppearanceConfig } from "api/typesGenerated" import { Stack } from "components/Stack/Stack" import { useFormik } from "formik" -import { useTheme } from "@material-ui/core/styles" +import { useTheme } from "@mui/material/styles" export type AppearanceSettingsPageViewProps = { appearance: UpdateAppearanceConfig diff --git a/site/src/pages/DeploySettingsPage/GitAuthSettingsPage/GitAuthSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/GitAuthSettingsPage/GitAuthSettingsPageView.tsx index 771977473be0a..46c1d52f732bd 100644 --- a/site/src/pages/DeploySettingsPage/GitAuthSettingsPage/GitAuthSettingsPageView.tsx +++ b/site/src/pages/DeploySettingsPage/GitAuthSettingsPage/GitAuthSettingsPageView.tsx @@ -1,10 +1,10 @@ -import { makeStyles } from "@material-ui/core/styles" -import Table from "@material-ui/core/Table" -import TableBody from "@material-ui/core/TableBody" -import TableCell from "@material-ui/core/TableCell" -import TableContainer from "@material-ui/core/TableContainer" -import TableHead from "@material-ui/core/TableHead" -import TableRow from "@material-ui/core/TableRow" +import { makeStyles } from "@mui/material/styles" +import Table from "@mui/material/Table" +import TableBody from "@mui/material/TableBody" +import TableCell from "@mui/material/TableCell" +import TableContainer from "@mui/material/TableContainer" +import TableHead from "@mui/material/TableHead" +import TableRow from "@mui/material/TableRow" import { DeploymentValues, GitAuthConfig } from "api/typesGenerated" import { AlertBanner } from "components/AlertBanner/AlertBanner" import { EnterpriseBadge } from "components/DeploySettingsLayout/Badges" diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx index 9d2266b816767..a69ff383f5e21 100644 --- a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx +++ b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx @@ -1,6 +1,6 @@ -import Button from "@material-ui/core/Button" -import TextField from "@material-ui/core/TextField" -import { makeStyles } from "@material-ui/core/styles" +import Button from "@mui/material/Button" +import TextField from "@mui/material/TextField" +import { makeStyles } from "@mui/material/styles" import { ApiErrorResponse } from "api/errors" import { AlertBanner } from "components/AlertBanner/AlertBanner" import { Fieldset } from "components/DeploySettingsLayout/Fieldset" diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/DividerWithText.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/DividerWithText.tsx index a246163f20591..e1622f7aecb9f 100644 --- a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/DividerWithText.tsx +++ b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/DividerWithText.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { FC, PropsWithChildren } from "react" export const DividerWithText: FC = ({ children }) => { diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx index 631e6dc6565f7..4c157e4357997 100644 --- a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx +++ b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx @@ -1,5 +1,5 @@ -import Button from "@material-ui/core/Button" -import { makeStyles, useTheme } from "@material-ui/core/styles" +import Button from "@mui/material/Button" +import { makeStyles, useTheme } from "@mui/material/styles" import Skeleton from "@material-ui/lab/Skeleton" import { GetLicensesResponse } from "api/api" import { Header } from "components/DeploySettingsLayout/Header" diff --git a/site/src/pages/GitAuthPage/GitAuthPage.tsx b/site/src/pages/GitAuthPage/GitAuthPage.tsx index 063f7c6b97ff9..e6d4b19db4d57 100644 --- a/site/src/pages/GitAuthPage/GitAuthPage.tsx +++ b/site/src/pages/GitAuthPage/GitAuthPage.tsx @@ -1,5 +1,5 @@ -import Button from "@material-ui/core/Button" -import { makeStyles } from "@material-ui/core/styles" +import Button from "@mui/material/Button" +import { makeStyles } from "@mui/material/styles" import { SignInLayout } from "components/SignInLayout/SignInLayout" import { Welcome } from "components/Welcome/Welcome" import { FC, useEffect } from "react" diff --git a/site/src/pages/GroupsPage/CreateGroupPageView.tsx b/site/src/pages/GroupsPage/CreateGroupPageView.tsx index 4901178284e4d..5e2fc3d910052 100644 --- a/site/src/pages/GroupsPage/CreateGroupPageView.tsx +++ b/site/src/pages/GroupsPage/CreateGroupPageView.tsx @@ -1,4 +1,4 @@ -import TextField from "@material-ui/core/TextField" +import TextField from "@mui/material/TextField" import { CreateGroupRequest } from "api/typesGenerated" import { FormFooter } from "components/FormFooter/FormFooter" import { FullPageForm } from "components/FullPageForm/FullPageForm" diff --git a/site/src/pages/GroupsPage/GroupPage.tsx b/site/src/pages/GroupsPage/GroupPage.tsx index 14fe99e8cee58..4e26eb73dcfa0 100644 --- a/site/src/pages/GroupsPage/GroupPage.tsx +++ b/site/src/pages/GroupsPage/GroupPage.tsx @@ -1,14 +1,14 @@ -import Button from "@material-ui/core/Button" -import Link from "@material-ui/core/Link" -import Table from "@material-ui/core/Table" -import TableBody from "@material-ui/core/TableBody" -import TableCell from "@material-ui/core/TableCell" -import TableContainer from "@material-ui/core/TableContainer" -import TableHead from "@material-ui/core/TableHead" -import TableRow from "@material-ui/core/TableRow" -import DeleteOutline from "@material-ui/icons/DeleteOutline" -import PersonAdd from "@material-ui/icons/PersonAdd" -import SettingsOutlined from "@material-ui/icons/SettingsOutlined" +import Button from "@mui/material/Button" +import Link from "@mui/material/Link" +import Table from "@mui/material/Table" +import TableBody from "@mui/material/TableBody" +import TableCell from "@mui/material/TableCell" +import TableContainer from "@mui/material/TableContainer" +import TableHead from "@mui/material/TableHead" +import TableRow from "@mui/material/TableRow" +import DeleteOutline from "@mui/icons-material/DeleteOutline" +import PersonAdd from "@mui/icons-material/PersonAdd" +import SettingsOutlined from "@mui/icons-material/SettingsOutlined" import { useMachine } from "@xstate/react" import { User } from "api/typesGenerated" import { AvatarData } from "components/AvatarData/AvatarData" @@ -32,7 +32,7 @@ import { Link as RouterLink, useNavigate, useParams } from "react-router-dom" import { pageTitle } from "utils/page" import { groupMachine } from "xServices/groups/groupXService" import { Maybe } from "components/Conditionals/Maybe" -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" const AddGroupMember: React.FC<{ isLoading: boolean diff --git a/site/src/pages/GroupsPage/GroupsPageView.tsx b/site/src/pages/GroupsPage/GroupsPageView.tsx index 57ac0a7764362..ab0eec82ea279 100644 --- a/site/src/pages/GroupsPage/GroupsPageView.tsx +++ b/site/src/pages/GroupsPage/GroupsPageView.tsx @@ -1,15 +1,15 @@ -import Button from "@material-ui/core/Button" -import Link from "@material-ui/core/Link" -import { makeStyles } from "@material-ui/core/styles" -import Table from "@material-ui/core/Table" -import TableBody from "@material-ui/core/TableBody" -import TableCell from "@material-ui/core/TableCell" -import TableContainer from "@material-ui/core/TableContainer" -import TableHead from "@material-ui/core/TableHead" -import TableRow from "@material-ui/core/TableRow" -import ArrowRightAltOutlined from "@material-ui/icons/ArrowRightAltOutlined" -import AddCircleOutline from "@material-ui/icons/AddCircleOutline" -import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight" +import Button from "@mui/material/Button" +import Link from "@mui/material/Link" +import { makeStyles } from "@mui/material/styles" +import Table from "@mui/material/Table" +import TableBody from "@mui/material/TableBody" +import TableCell from "@mui/material/TableCell" +import TableContainer from "@mui/material/TableContainer" +import TableHead from "@mui/material/TableHead" +import TableRow from "@mui/material/TableRow" +import ArrowRightAltOutlined from "@mui/icons-material/ArrowRightAltOutlined" +import AddCircleOutline from "@mui/icons-material/AddCircleOutline" +import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight" import AvatarGroup from "@material-ui/lab/AvatarGroup" import { AvatarData } from "components/AvatarData/AvatarData" import { ChooseOne, Cond } from "components/Conditionals/ChooseOne" diff --git a/site/src/pages/GroupsPage/SettingsGroupPageView.tsx b/site/src/pages/GroupsPage/SettingsGroupPageView.tsx index 161c973cefdcc..3f28458de4e28 100644 --- a/site/src/pages/GroupsPage/SettingsGroupPageView.tsx +++ b/site/src/pages/GroupsPage/SettingsGroupPageView.tsx @@ -1,4 +1,4 @@ -import TextField from "@material-ui/core/TextField" +import TextField from "@mui/material/TextField" import { Group } from "api/typesGenerated" import { ChooseOne, Cond } from "components/Conditionals/ChooseOne" import { FormFooter } from "components/FormFooter/FormFooter" diff --git a/site/src/pages/LoginPage/LoginPageView.tsx b/site/src/pages/LoginPage/LoginPageView.tsx index a3400cfc571ab..9d979c86434db 100644 --- a/site/src/pages/LoginPage/LoginPageView.tsx +++ b/site/src/pages/LoginPage/LoginPageView.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { FullScreenLoader } from "components/Loader/FullScreenLoader" import { FC } from "react" import { useLocation } from "react-router-dom" diff --git a/site/src/pages/SetupPage/SetupPageView.tsx b/site/src/pages/SetupPage/SetupPageView.tsx index cde67b896efe5..2bcd4fd23d67f 100644 --- a/site/src/pages/SetupPage/SetupPageView.tsx +++ b/site/src/pages/SetupPage/SetupPageView.tsx @@ -1,8 +1,8 @@ -import Box from "@material-ui/core/Box" -import Checkbox from "@material-ui/core/Checkbox" -import { makeStyles } from "@material-ui/core/styles" -import TextField from "@material-ui/core/TextField" -import Typography from "@material-ui/core/Typography" +import Box from "@mui/material/Box" +import Checkbox from "@mui/material/Checkbox" +import { makeStyles } from "@mui/material/styles" +import TextField from "@mui/material/TextField" +import Typography from "@mui/material/Typography" import { LoadingButton } from "components/LoadingButton/LoadingButton" import { SignInLayout } from "components/SignInLayout/SignInLayout" import { Stack } from "components/Stack/Stack" diff --git a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx index 79d25aeed653e..43e3a68eedcfc 100644 --- a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx +++ b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx @@ -1,5 +1,5 @@ -import Button from "@material-ui/core/Button" -import { makeStyles } from "@material-ui/core/styles" +import Button from "@mui/material/Button" +import { makeStyles } from "@mui/material/styles" import { Loader } from "components/Loader/Loader" import { Margins } from "components/Margins/Margins" import { MemoizedMarkdown } from "components/Markdown/Markdown" @@ -10,8 +10,8 @@ import { } from "components/PageHeader/PageHeader" import { FC } from "react" import { StarterTemplateContext } from "xServices/starterTemplates/starterTemplateXService" -import ViewCodeIcon from "@material-ui/icons/OpenInNewOutlined" -import PlusIcon from "@material-ui/icons/AddOutlined" +import ViewCodeIcon from "@mui/icons-material/OpenInNewOutlined" +import PlusIcon from "@mui/icons-material/AddOutlined" import { AlertBanner } from "components/AlertBanner/AlertBanner" import { useTranslation } from "react-i18next" import { Stack } from "components/Stack/Stack" diff --git a/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.tsx b/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.tsx index 48de58b72d806..7c349309f2316 100644 --- a/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.tsx +++ b/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { AlertBanner } from "components/AlertBanner/AlertBanner" import { Maybe } from "components/Conditionals/Maybe" import { Loader } from "components/Loader/Loader" diff --git a/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx b/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx index 264c5cfe6b03b..ed72d2f23886d 100644 --- a/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx +++ b/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { MemoizedMarkdown } from "components/Markdown/Markdown" import { useTemplateLayoutContext } from "components/TemplateLayout/TemplateLayout" import frontMatter from "front-matter" diff --git a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx index 47babcc06ade8..852a59c7e1a25 100644 --- a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx +++ b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { Template, TemplateVersion, diff --git a/site/src/pages/TemplateSettingsPage/Sidebar.tsx b/site/src/pages/TemplateSettingsPage/Sidebar.tsx index 70dd51e184b01..220bcddd3c0e0 100644 --- a/site/src/pages/TemplateSettingsPage/Sidebar.tsx +++ b/site/src/pages/TemplateSettingsPage/Sidebar.tsx @@ -1,13 +1,13 @@ -import { makeStyles } from "@material-ui/core/styles" -import ScheduleIcon from "@material-ui/icons/TimerOutlined" -import VariablesIcon from "@material-ui/icons/CodeOutlined" +import { makeStyles } from "@mui/material/styles" +import ScheduleIcon from "@mui/icons-material/TimerOutlined" +import VariablesIcon from "@mui/icons-material/CodeOutlined" import { Template } from "api/typesGenerated" import { Stack } from "components/Stack/Stack" import { FC, ElementType, PropsWithChildren, ReactNode } from "react" import { Link, NavLink } from "react-router-dom" import { combineClasses } from "utils/combineClasses" -import GeneralIcon from "@material-ui/icons/SettingsOutlined" -import SecurityIcon from "@material-ui/icons/LockOutlined" +import GeneralIcon from "@mui/icons-material/SettingsOutlined" +import SecurityIcon from "@mui/icons-material/LockOutlined" import { Avatar } from "components/Avatar/Avatar" const SidebarNavItem: FC< diff --git a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx index 5762eba17335a..0dbcd624c3944 100644 --- a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx @@ -1,4 +1,4 @@ -import TextField from "@material-ui/core/TextField" +import TextField from "@mui/material/TextField" import { Template, UpdateTemplateMeta } from "api/typesGenerated" import { FormikContextType, FormikTouched, useFormik } from "formik" import { FC } from "react" @@ -20,9 +20,9 @@ import { FormFooter, } from "components/Form/Form" import { Stack } from "components/Stack/Stack" -import Checkbox from "@material-ui/core/Checkbox" +import Checkbox from "@mui/material/Checkbox" import { HelpTooltip, HelpTooltipText } from "components/Tooltips/HelpTooltip" -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" const MAX_DESCRIPTION_CHAR_LIMIT = 128 diff --git a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPageView.tsx b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPageView.tsx index e35cb6aa568b8..cca553450f34a 100644 --- a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPageView.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPageView.tsx @@ -3,7 +3,7 @@ import { ComponentProps, FC } from "react" import { TemplateSettingsForm } from "./TemplateSettingsForm" import { useTranslation } from "react-i18next" import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader" -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" export interface TemplateSettingsPageViewProps { template: Template diff --git a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage.tsx b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage.tsx index a278910845d2a..43141ec4c09cc 100644 --- a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage.tsx @@ -1,6 +1,6 @@ -import Button from "@material-ui/core/Button" -import Link from "@material-ui/core/Link" -import ArrowRightAltOutlined from "@material-ui/icons/ArrowRightAltOutlined" +import Button from "@mui/material/Button" +import Link from "@mui/material/Link" +import ArrowRightAltOutlined from "@mui/icons-material/ArrowRightAltOutlined" import { useMachine } from "@xstate/react" import { ChooseOne, Cond } from "components/Conditionals/ChooseOne" import { Paywall } from "components/Paywall/Paywall" diff --git a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx index 9b6e8d5947747..94dc2091ed704 100644 --- a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx @@ -1,13 +1,13 @@ -import MenuItem from "@material-ui/core/MenuItem" -import Select, { SelectProps } from "@material-ui/core/Select" -import { makeStyles } from "@material-ui/core/styles" -import Table from "@material-ui/core/Table" -import TableBody from "@material-ui/core/TableBody" -import TableCell from "@material-ui/core/TableCell" -import TableContainer from "@material-ui/core/TableContainer" -import TableHead from "@material-ui/core/TableHead" -import TableRow from "@material-ui/core/TableRow" -import PersonAdd from "@material-ui/icons/PersonAdd" +import MenuItem from "@mui/material/MenuItem" +import Select, { SelectProps } from "@mui/material/Select" +import { makeStyles } from "@mui/material/styles" +import Table from "@mui/material/Table" +import TableBody from "@mui/material/TableBody" +import TableCell from "@mui/material/TableCell" +import TableContainer from "@mui/material/TableContainer" +import TableHead from "@mui/material/TableHead" +import TableRow from "@mui/material/TableRow" +import PersonAdd from "@mui/icons-material/PersonAdd" import { Group, TemplateACL, diff --git a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm.tsx index 5e15afad4a941..8642ef0435028 100644 --- a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm.tsx @@ -1,4 +1,4 @@ -import TextField from "@material-ui/core/TextField" +import TextField from "@mui/material/TextField" import { Template, UpdateTemplateMeta } from "api/typesGenerated" import { FormikTouched, useFormik } from "formik" import { FC, ChangeEvent } from "react" @@ -14,11 +14,11 @@ import { FormFields, } from "components/Form/Form" import { Stack } from "components/Stack/Stack" -import { makeStyles } from "@material-ui/core/styles" -import Link from "@material-ui/core/Link" -import Checkbox from "@material-ui/core/Checkbox" -import FormControlLabel from "@material-ui/core/FormControlLabel" -import Switch from "@material-ui/core/Switch" +import { makeStyles } from "@mui/material/styles" +import Link from "@mui/material/Link" +import Checkbox from "@mui/material/Checkbox" +import FormControlLabel from "@mui/material/FormControlLabel" +import Switch from "@mui/material/Switch" const TTLHelperText = ({ ttl, diff --git a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateSchedulePageView.tsx b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateSchedulePageView.tsx index 96c322aaac789..d600251908ec4 100644 --- a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateSchedulePageView.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateSchedulePageView.tsx @@ -2,7 +2,7 @@ import { Template, UpdateTemplateMeta } from "api/typesGenerated" import { ComponentProps, FC } from "react" import { TemplateScheduleForm } from "./TemplateScheduleForm" import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader" -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" export interface TemplateSchedulePageViewProps { template: Template diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx index 5e1ad0fbe3250..309ca99c28c53 100644 --- a/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { Sidebar } from "./Sidebar" import { Stack } from "components/Stack/Stack" import { createContext, FC, Suspense, useContext } from "react" diff --git a/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.tsx b/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.tsx index 04bc10b26e0a9..6fa3e41a00512 100644 --- a/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.tsx @@ -8,7 +8,7 @@ import { Loader } from "components/Loader/Loader" import { ComponentProps, FC } from "react" import { TemplateVariablesForm } from "./TemplateVariablesForm" import { Stack } from "components/Stack/Stack" -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { useTranslation } from "react-i18next" import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader" diff --git a/site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx b/site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx index 5676599a7acd6..48fac36403bf4 100644 --- a/site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx +++ b/site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx @@ -1,6 +1,6 @@ -import Button from "@material-ui/core/Button" -import Link from "@material-ui/core/Link" -import EditIcon from "@material-ui/icons/Edit" +import Button from "@mui/material/Button" +import Link from "@mui/material/Link" +import EditIcon from "@mui/icons-material/Edit" import { AlertBanner } from "components/AlertBanner/AlertBanner" import { Loader } from "components/Loader/Loader" import { Margins } from "components/Margins/Margins" diff --git a/site/src/pages/TemplatesPage/EmptyTemplates.tsx b/site/src/pages/TemplatesPage/EmptyTemplates.tsx index c88f809024558..0b30bb712014d 100644 --- a/site/src/pages/TemplatesPage/EmptyTemplates.tsx +++ b/site/src/pages/TemplatesPage/EmptyTemplates.tsx @@ -1,6 +1,6 @@ -import Button from "@material-ui/core/Button" -import Link from "@material-ui/core/Link" -import { makeStyles } from "@material-ui/core/styles" +import Button from "@mui/material/Button" +import Link from "@mui/material/Link" +import { makeStyles } from "@mui/material/styles" import { TemplateExample } from "api/typesGenerated" import { CodeExample } from "components/CodeExample/CodeExample" import { Stack } from "components/Stack/Stack" diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index de63ab467ce6e..50096aad20dbf 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx @@ -1,13 +1,13 @@ -import Button from "@material-ui/core/Button" -import Link from "@material-ui/core/Link" -import { makeStyles } from "@material-ui/core/styles" -import Table from "@material-ui/core/Table" -import TableBody from "@material-ui/core/TableBody" -import TableCell from "@material-ui/core/TableCell" -import TableContainer from "@material-ui/core/TableContainer" -import TableHead from "@material-ui/core/TableHead" -import TableRow from "@material-ui/core/TableRow" -import AddIcon from "@material-ui/icons/AddOutlined" +import Button from "@mui/material/Button" +import Link from "@mui/material/Link" +import { makeStyles } from "@mui/material/styles" +import Table from "@mui/material/Table" +import TableBody from "@mui/material/TableBody" +import TableCell from "@mui/material/TableCell" +import TableContainer from "@mui/material/TableContainer" +import TableHead from "@mui/material/TableHead" +import TableRow from "@mui/material/TableRow" +import AddIcon from "@mui/icons-material/AddOutlined" import { AlertBanner } from "components/AlertBanner/AlertBanner" import { ChooseOne, Cond } from "components/Conditionals/ChooseOne" import { Maybe } from "components/Conditionals/Maybe" @@ -40,7 +40,7 @@ import { useClickableTableRow } from "hooks/useClickableTableRow" import { Template } from "api/typesGenerated" import { combineClasses } from "utils/combineClasses" import { colors } from "theme/colors" -import ArrowForwardOutlined from "@material-ui/icons/ArrowForwardOutlined" +import ArrowForwardOutlined from "@mui/icons-material/ArrowForwardOutlined" import { Avatar } from "components/Avatar/Avatar" export const Language = { diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx index 7bef86379e145..b17c419ce04f7 100644 --- a/site/src/pages/TerminalPage/TerminalPage.tsx +++ b/site/src/pages/TerminalPage/TerminalPage.tsx @@ -1,7 +1,7 @@ -import Button from "@material-ui/core/Button" -import { makeStyles } from "@material-ui/core/styles" -import WarningIcon from "@material-ui/icons/ErrorOutlineRounded" -import RefreshOutlined from "@material-ui/icons/RefreshOutlined" +import Button from "@mui/material/Button" +import { makeStyles } from "@mui/material/styles" +import WarningIcon from "@mui/icons-material/ErrorOutlineRounded" +import RefreshOutlined from "@mui/icons-material/RefreshOutlined" import { useMachine } from "@xstate/react" import { portForwardURL } from "components/PortForwardButton/PortForwardButton" import { Stack } from "components/Stack/Stack" diff --git a/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPageView.tsx b/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPageView.tsx index 74038b33e729d..42a85cb7e13f9 100644 --- a/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPageView.tsx +++ b/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPageView.tsx @@ -1,7 +1,7 @@ -import { makeStyles } from "@material-ui/core/styles" -import Box from "@material-ui/core/Box" -import Button from "@material-ui/core/Button" -import CircularProgress from "@material-ui/core/CircularProgress" +import { makeStyles } from "@mui/material/styles" +import Box from "@mui/material/Box" +import Button from "@mui/material/Button" +import CircularProgress from "@mui/material/CircularProgress" import { GitSSHKey } from "api/typesGenerated" import { AlertBanner } from "components/AlertBanner/AlertBanner" import { CodeExample } from "components/CodeExample/CodeExample" diff --git a/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx b/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx index af4d569824b29..8c73b924071fc 100644 --- a/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx +++ b/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx @@ -1,14 +1,14 @@ import { FC, PropsWithChildren, useState } from "react" import { Section } from "components/SettingsLayout/Section" import { TokensPageView } from "./TokensPageView" -import makeStyles from "@material-ui/core/styles/makeStyles" +import makeStyles from "@mui/material/styles/makeStyles" import { useTranslation, Trans } from "react-i18next" import { useTokensData } from "./hooks" import { ConfirmDeleteDialog } from "./components" import { Stack } from "components/Stack/Stack" -import Button from "@material-ui/core/Button" +import Button from "@mui/material/Button" import { Link as RouterLink } from "react-router-dom" -import AddIcon from "@material-ui/icons/AddOutlined" +import AddIcon from "@mui/icons-material/AddOutlined" import { APIKeyWithOwner } from "api/typesGenerated" export const TokensPage: FC> = () => { diff --git a/site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx b/site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx index 8cee5549b3f5e..94a52a0c27a1d 100644 --- a/site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx +++ b/site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx @@ -1,19 +1,19 @@ -import { useTheme } from "@material-ui/core/styles" -import Table from "@material-ui/core/Table" -import TableBody from "@material-ui/core/TableBody" -import TableCell from "@material-ui/core/TableCell" -import TableContainer from "@material-ui/core/TableContainer" -import TableHead from "@material-ui/core/TableHead" -import TableRow from "@material-ui/core/TableRow" +import { useTheme } from "@mui/material/styles" +import Table from "@mui/material/Table" +import TableBody from "@mui/material/TableBody" +import TableCell from "@mui/material/TableCell" +import TableContainer from "@mui/material/TableContainer" +import TableHead from "@mui/material/TableHead" +import TableRow from "@mui/material/TableRow" import { ChooseOne, Cond } from "components/Conditionals/ChooseOne" import { Stack } from "components/Stack/Stack" import { TableEmpty } from "components/TableEmpty/TableEmpty" import { TableLoader } from "components/TableLoader/TableLoader" -import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline" +import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline" import dayjs from "dayjs" import { FC } from "react" import { AlertBanner } from "components/AlertBanner/AlertBanner" -import IconButton from "@material-ui/core/IconButton/IconButton" +import IconButton from "@mui/material/IconButton/IconButton" import { useTranslation } from "react-i18next" import { APIKeyWithOwner } from "api/typesGenerated" import relativeTime from "dayjs/plugin/relativeTime" diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyPage.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyPage.tsx index a3e59b8f9f9af..89cb8b64172d5 100644 --- a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyPage.tsx +++ b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyPage.tsx @@ -1,7 +1,7 @@ import { FC, PropsWithChildren } from "react" import { Section } from "components/SettingsLayout/Section" import { WorkspaceProxyView } from "./WorkspaceProxyView" -import makeStyles from "@material-ui/core/styles/makeStyles" +import makeStyles from "@mui/material/styles/makeStyles" import { displayError } from "components/GlobalSnackbar/utils" import { useProxy } from "contexts/ProxyContext" diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx index de62d3ebec0c2..7c264ff2e7ee7 100644 --- a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx +++ b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx @@ -2,14 +2,14 @@ import { Region } from "api/typesGenerated" import { AvatarData } from "components/AvatarData/AvatarData" import { Avatar } from "components/Avatar/Avatar" import { useClickableTableRow } from "hooks/useClickableTableRow" -import TableCell from "@material-ui/core/TableCell" -import TableRow from "@material-ui/core/TableRow" +import TableCell from "@mui/material/TableCell" +import TableRow from "@mui/material/TableRow" import { FC } from "react" import { HealthyBadge, NotHealthyBadge, } from "components/DeploySettingsLayout/Badges" -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { combineClasses } from "utils/combineClasses" export const ProxyRow: FC<{ diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.tsx index 22a2402d470db..9bd4dbf3e6b9f 100644 --- a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.tsx +++ b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.tsx @@ -1,9 +1,9 @@ -import Table from "@material-ui/core/Table" -import TableBody from "@material-ui/core/TableBody" -import TableCell from "@material-ui/core/TableCell" -import TableContainer from "@material-ui/core/TableContainer" -import TableHead from "@material-ui/core/TableHead" -import TableRow from "@material-ui/core/TableRow" +import Table from "@mui/material/Table" +import TableBody from "@mui/material/TableBody" +import TableCell from "@mui/material/TableCell" +import TableContainer from "@mui/material/TableContainer" +import TableHead from "@mui/material/TableHead" +import TableRow from "@mui/material/TableRow" import { ChooseOne, Cond } from "components/Conditionals/ChooseOne" import { Stack } from "components/Stack/Stack" import { TableEmpty } from "components/TableEmpty/TableEmpty" diff --git a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildStateError.tsx b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildStateError.tsx index 80aa947b52ac9..bfe96be1b5485 100644 --- a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildStateError.tsx +++ b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildStateError.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { WorkspaceBuild } from "api/typesGenerated" import { CodeExample } from "components/CodeExample/CodeExample" import { Stack } from "components/Stack/Stack" diff --git a/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx b/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx index cbf3e687fb4ce..a90be89174286 100644 --- a/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx +++ b/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx @@ -1,7 +1,7 @@ import { DialogProps } from "components/Dialogs/Dialog" import { FC, useRef, useState } from "react" import { FormFields } from "components/Form/Form" -import TextField from "@material-ui/core/TextField" +import TextField from "@mui/material/TextField" import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog" import { Stack } from "components/Stack/Stack" import { Template, TemplateVersion } from "api/typesGenerated" @@ -11,7 +11,7 @@ import { createDayString } from "utils/createDayString" import { AvatarData } from "components/AvatarData/AvatarData" import { Pill } from "components/Pill/Pill" import { Avatar } from "components/Avatar/Avatar" -import CircularProgress from "@material-ui/core/CircularProgress" +import CircularProgress from "@mui/material/CircularProgress" export type ChangeVersionDialogProps = DialogProps & { template: Template | undefined diff --git a/site/src/pages/WorkspacePage/UpdateBuildParametersDialog.tsx b/site/src/pages/WorkspacePage/UpdateBuildParametersDialog.tsx index 8b422f9258d88..a285c9527716e 100644 --- a/site/src/pages/WorkspacePage/UpdateBuildParametersDialog.tsx +++ b/site/src/pages/WorkspacePage/UpdateBuildParametersDialog.tsx @@ -1,8 +1,8 @@ -import { makeStyles } from "@material-ui/core/styles" -import Dialog from "@material-ui/core/Dialog" -import DialogContent from "@material-ui/core/DialogContent" -import DialogContentText from "@material-ui/core/DialogContentText" -import DialogTitle from "@material-ui/core/DialogTitle" +import { makeStyles } from "@mui/material/styles" +import Dialog from "@mui/material/Dialog" +import DialogContent from "@mui/material/DialogContent" +import DialogContentText from "@mui/material/DialogContentText" +import DialogTitle from "@mui/material/DialogTitle" import { DialogProps } from "components/Dialogs/Dialog" import { FC } from "react" import { getFormHelpers } from "utils/formUtils" @@ -18,8 +18,8 @@ import { useValidationSchemaForRichParameters, } from "utils/richParameters" import * as Yup from "yup" -import DialogActions from "@material-ui/core/DialogActions" -import Button from "@material-ui/core/Button" +import DialogActions from "@mui/material/DialogActions" +import Button from "@mui/material/Button" import { useTranslation } from "react-i18next" export type UpdateBuildParametersDialogProps = DialogProps & { diff --git a/site/src/pages/WorkspacePage/WorkspacePage.tsx b/site/src/pages/WorkspacePage/WorkspacePage.tsx index 2e326e1798e5a..8daefc7966744 100644 --- a/site/src/pages/WorkspacePage/WorkspacePage.tsx +++ b/site/src/pages/WorkspacePage/WorkspacePage.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { useQuery } from "@tanstack/react-query" import { useMachine } from "@xstate/react" import { getWorkspaceBuildLogs } from "api/api" diff --git a/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx b/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx index b53f80bd8a6b9..da791f5f48641 100644 --- a/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx +++ b/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx @@ -1,12 +1,12 @@ -import { makeStyles } from "@material-ui/core/styles" -import ScheduleIcon from "@material-ui/icons/TimerOutlined" +import { makeStyles } from "@mui/material/styles" +import ScheduleIcon from "@mui/icons-material/TimerOutlined" import { Workspace } from "api/typesGenerated" import { Stack } from "components/Stack/Stack" import { FC, ElementType, PropsWithChildren, ReactNode } from "react" import { Link, NavLink } from "react-router-dom" import { combineClasses } from "utils/combineClasses" -import GeneralIcon from "@material-ui/icons/SettingsOutlined" -import ParameterIcon from "@material-ui/icons/CodeOutlined" +import GeneralIcon from "@mui/icons-material/SettingsOutlined" +import ParameterIcon from "@mui/icons-material/CodeOutlined" import { Avatar } from "components/Avatar/Avatar" const SidebarNavItem: FC< diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx index 5b9795d13a755..69c1644db2d50 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx @@ -14,7 +14,7 @@ import { WorkspaceParametersForm, } from "./WorkspaceParametersForm" import { useNavigate } from "react-router-dom" -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader" import { displaySuccess } from "components/GlobalSnackbar/utils" import { FC } from "react" diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx index d273f38bb7a36..07ddf1f0fd547 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { useMachine } from "@xstate/react" import { AlertBanner } from "components/AlertBanner/AlertBanner" import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog" diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsForm.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsForm.tsx index 33f2e36019819..f79c516f4d25f 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsForm.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsForm.tsx @@ -9,7 +9,7 @@ import { FC } from "react" import { useTranslation } from "react-i18next" import * as Yup from "yup" import { nameValidator, getFormHelpers, onChangeTrimmed } from "utils/formUtils" -import TextField from "@material-ui/core/TextField" +import TextField from "@mui/material/TextField" import { Workspace } from "api/typesGenerated" export type WorkspaceSettingsFormValues = { diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx index 713906f39b8a9..e59aa54d518a8 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { Sidebar } from "./Sidebar" import { Stack } from "components/Stack/Stack" import { createContext, FC, Suspense, useContext } from "react" diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPageView.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPageView.tsx index 4460428e51362..099991b42f577 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPageView.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPageView.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from "@mui/material/styles" import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader" import { ComponentProps, FC } from "react" import { useTranslation } from "react-i18next" diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx index b509bbfcde9cd..29f377bb79a56 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx @@ -1,4 +1,4 @@ -import Link from "@material-ui/core/Link" +import Link from "@mui/material/Link" import { Workspace } from "api/typesGenerated" import { AlertBanner } from "components/AlertBanner/AlertBanner" import { Maybe } from "components/Conditionals/Maybe" diff --git a/site/src/theme/overrides.ts b/site/src/theme/overrides.ts index a6484d2d34371..70a155a11f6ee 100644 --- a/site/src/theme/overrides.ts +++ b/site/src/theme/overrides.ts @@ -1,6 +1,6 @@ -import { Theme, StyleRules } from "@material-ui/core/styles" -import { Overrides } from "@material-ui/core/styles/overrides" -import { SkeletonClassKey } from "@material-ui/lab" +import { Theme, StyleRules } from "@mui/material/styles" +import { Overrides } from "@mui/material/styles/overrides" +import { SkeletonClassKey } from "@mui/lab" import { colors } from "./colors" import { borderRadius, borderRadiusSm } from "./constants" @@ -21,7 +21,7 @@ export const getOverrides = ({ backgroundAttachment: "fixed", }, ":root": { - colorScheme: palette.type, + colorScheme: palette.mode, }, }, }, diff --git a/site/src/theme/palettes.ts b/site/src/theme/palettes.ts index 724614f1072af..4f3e5315acf95 100644 --- a/site/src/theme/palettes.ts +++ b/site/src/theme/palettes.ts @@ -1,4 +1,4 @@ -import { PaletteOptions } from "@material-ui/core/styles/createPalette" +import { PaletteOptions } from "@mui/material/styles/createPalette" import { colors } from "./colors" // Couldn't find a type for this so I made one. We can extend the palette if needed with module augmentation. @@ -10,7 +10,7 @@ export type PaletteIndex = | "error" | "warning" -declare module "@material-ui/core/styles/createPalette" { +declare module "@mui/material/styles/createPalette" { interface TypeBackground { paperLight: string } diff --git a/site/src/theme/props.ts b/site/src/theme/props.ts index eddeb36427c7d..67296de0d0c19 100644 --- a/site/src/theme/props.ts +++ b/site/src/theme/props.ts @@ -1,4 +1,4 @@ -import { ComponentsProps } from "@material-ui/core/styles/props" +import { ComponentsProps } from "@mui/material/styles/props" /** * These are global overrides to MUI components and we may move away from using them in the future. diff --git a/site/src/theme/theme.ts b/site/src/theme/theme.ts index 1fda4ea4b9c51..2c1784eec96f3 100644 --- a/site/src/theme/theme.ts +++ b/site/src/theme/theme.ts @@ -1,5 +1,5 @@ -import { createTheme } from "@material-ui/core/styles" -import { PaletteOptions } from "@material-ui/core/styles/createPalette" +import { createTheme, adaptV4Theme } from "@mui/material/styles"; +import { PaletteOptions } from "@mui/material/styles/createPalette" import { borderRadius } from "./constants" import { getOverrides } from "./overrides" import { darkPalette } from "./palettes" @@ -8,14 +8,14 @@ import { typography } from "./typography" import isChromatic from "chromatic/isChromatic" const makeTheme = (palette: PaletteOptions) => { - const theme = createTheme({ + const theme = createTheme(adaptV4Theme({ palette, typography, shape: { borderRadius, }, props, - }) + })) // We want to disable transitions during chromatic snapshots // https://www.chromatic.com/docs/animations#javascript-animations diff --git a/site/src/theme/typography.ts b/site/src/theme/typography.ts index 236f558cac524..69412fc844aab 100644 --- a/site/src/theme/typography.ts +++ b/site/src/theme/typography.ts @@ -1,4 +1,4 @@ -import { TypographyOptions } from "@material-ui/core/styles/createTypography" +import { TypographyOptions } from "@mui/material/styles/createTypography" import { BODY_FONT_FAMILY } from "./constants" export const typography: TypographyOptions = { diff --git a/site/src/utils/schedule.ts b/site/src/utils/schedule.ts index 02e37516389b9..e37abadf88951 100644 --- a/site/src/utils/schedule.ts +++ b/site/src/utils/schedule.ts @@ -37,7 +37,7 @@ const DEFAULT_TIMEZONE = "UTC" * stripTimezone strips a leading timezone from a schedule string */ export const stripTimezone = (raw: string): string => { - return raw.replace(/CRON_TZ=\S*\s/, "") + return raw.replace(/CRON_TZ=\S*\s/, ""); } /** @@ -51,7 +51,7 @@ export const extractTimezone = ( const matches = raw.match(/CRON_TZ=\S*\s/g) if (matches && matches.length > 0) { - return matches[0].replace(/CRON_TZ=/, "").trim() + return matches[0].replace(/CRON_TZ=/, "").trim(); } else { return defaultTZ } diff --git a/site/src/utils/workspace.ts b/site/src/utils/workspace.ts index e79ae365b7277..9b051d2ddcca5 100644 --- a/site/src/utils/workspace.ts +++ b/site/src/utils/workspace.ts @@ -1,4 +1,4 @@ -import { Theme } from "@material-ui/core/styles" +import { Theme } from "@mui/material/styles" import dayjs from "dayjs" import duration from "dayjs/plugin/duration" import minMax from "dayjs/plugin/minMax" diff --git a/site/yarn.lock b/site/yarn.lock index da8ac7bfaad9c..f413ebe695e97 100644 --- a/site/yarn.lock +++ b/site/yarn.lock @@ -220,6 +220,13 @@ dependencies: "@babel/types" "^7.21.0" +"@babel/helper-module-imports@^7.16.7": + version "7.21.4" + resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz#ac88b2f76093637489e718a90cec6cf8a9b029af" + integrity sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg== + dependencies: + "@babel/types" "^7.21.4" + "@babel/helper-module-imports@^7.18.6": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e" @@ -1099,13 +1106,20 @@ core-js-pure "^3.25.1" regenerator-runtime "^0.13.11" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.17.2", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.9", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.17.2", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.9", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": version "7.21.0" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673" integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw== dependencies: regenerator-runtime "^0.13.11" +"@babel/runtime@^7.18.3", "@babel/runtime@^7.21.0": + version "7.21.5" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.5.tgz#8492dddda9644ae3bda3b45eabe87382caee7200" + integrity sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q== + dependencies: + regenerator-runtime "^0.13.11" + "@babel/template@^7.18.10", "@babel/template@^7.20.7", "@babel/template@^7.3.3": version "7.20.7" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8" @@ -1195,16 +1209,113 @@ resolved "https://registry.yarnpkg.com/@emoji-mart/react/-/react-1.0.1.tgz#46b6a2e92faf16fa9b7f9471f137fa2e3d1e8ac3" integrity sha512-ALhLD96BOL5w+a4NI5NpmfqfF1aVjjj2qJE0dLst/OhjBfVmpteWNgn/h8LZy9ulU6AnbeS+13KnPFzDjCvRRw== -"@emotion/hash@^0.8.0": +"@emotion/babel-plugin@^11.10.8": + version "11.10.8" + resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.8.tgz#bae325c902937665d00684038fd5294223ef9e1d" + integrity sha512-gxNky50AJL3AlkbjvTARiwAqei6/tNUxDZPSKd+3jqWVM3AmdVTTdpjHorR/an/M0VJqdsuq5oGcFH+rjtyujQ== + dependencies: + "@babel/helper-module-imports" "^7.16.7" + "@babel/runtime" "^7.18.3" + "@emotion/hash" "^0.9.0" + "@emotion/memoize" "^0.8.0" + "@emotion/serialize" "^1.1.1" + babel-plugin-macros "^3.1.0" + convert-source-map "^1.5.0" + escape-string-regexp "^4.0.0" + find-root "^1.1.0" + source-map "^0.5.7" + stylis "4.1.4" + +"@emotion/cache@^11.10.8": + version "11.10.8" + resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.10.8.tgz#3b39b4761bea0ae2f4f07f0a425eec8b6977c03e" + integrity sha512-5fyqGHi51LU95o7qQ/vD1jyvC4uCY5GcBT+UgP4LHdpO9jPDlXqhrRr9/wCKmfoAvh5G/F7aOh4MwQa+8uEqhA== + dependencies: + "@emotion/memoize" "^0.8.0" + "@emotion/sheet" "^1.2.1" + "@emotion/utils" "^1.2.0" + "@emotion/weak-memoize" "^0.3.0" + stylis "4.1.4" + +"@emotion/hash@^0.9.0": + version "0.9.0" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7" + integrity sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ== + +"@emotion/is-prop-valid@^1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83" + integrity sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg== + dependencies: + "@emotion/memoize" "^0.8.0" + +"@emotion/memoize@^0.8.0": version "0.8.0" - resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413" - integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow== + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f" + integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA== + +"@emotion/react@^11.10.8": + version "11.10.8" + resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.10.8.tgz#02e274ecb45e03ab9d7a8eb9f0f0c064613eaf7b" + integrity sha512-ZfGfiABtJ1P1OXqOBsW08EgCDp5fK6C5I8hUJauc/VcJBGSzqAirMnFslhFWnZJ/w5HxPI36XbvMV0l4KZHl+w== + dependencies: + "@babel/runtime" "^7.18.3" + "@emotion/babel-plugin" "^11.10.8" + "@emotion/cache" "^11.10.8" + "@emotion/serialize" "^1.1.1" + "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0" + "@emotion/utils" "^1.2.0" + "@emotion/weak-memoize" "^0.3.0" + hoist-non-react-statics "^3.3.1" + +"@emotion/serialize@^1.1.1": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.1.tgz#0595701b1902feded8a96d293b26be3f5c1a5cf0" + integrity sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA== + dependencies: + "@emotion/hash" "^0.9.0" + "@emotion/memoize" "^0.8.0" + "@emotion/unitless" "^0.8.0" + "@emotion/utils" "^1.2.0" + csstype "^3.0.2" + +"@emotion/sheet@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.1.tgz#0767e0305230e894897cadb6c8df2c51e61a6c2c" + integrity sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA== + +"@emotion/styled@^11.10.8": + version "11.10.8" + resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.10.8.tgz#a3fd68efd90bd7e8a06b82b95adec643d386fa69" + integrity sha512-gow0lF4Uw/QEdX2REMhI8v6wLOabPKJ+4HKNF0xdJ2DJdznN6fxaXpQOx6sNkyBhSUL558Rmcu1Lq/MYlVo4vw== + dependencies: + "@babel/runtime" "^7.18.3" + "@emotion/babel-plugin" "^11.10.8" + "@emotion/is-prop-valid" "^1.2.0" + "@emotion/serialize" "^1.1.1" + "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0" + "@emotion/utils" "^1.2.0" + +"@emotion/unitless@^0.8.0": + version "0.8.0" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db" + integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw== "@emotion/use-insertion-effect-with-fallbacks@^1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz#ffadaec35dbb7885bd54de3fa267ab2f860294df" integrity sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A== +"@emotion/utils@^1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.0.tgz#9716eaccbc6b5ded2ea5a90d65562609aab0f561" + integrity sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw== + +"@emotion/weak-memoize@^0.3.0": + version "0.3.0" + resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz#ea89004119dc42db2e1dba0f97d553f7372f6fcb" + integrity sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg== + "@esbuild/android-arm64@0.17.16": version "0.17.16" resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.17.16.tgz#7b18cab5f4d93e878306196eed26b6d960c12576" @@ -1713,88 +1824,6 @@ semver "^7.3.5" tar "^6.1.11" -"@material-ui/core@4.12.1": - version "4.12.1" - resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.1.tgz#ac8f081498047aa02bb6ee70b77c5dad6a2a6e73" - integrity sha512-C6hYsjkWCTfBx9FaqxhCZCITBagh7fyCKFtHyvO3tTOcBw6NJaktdhNZ2n82jQdQdgfFvg6OOxi7OOzsAdAcBQ== - dependencies: - "@babel/runtime" "^7.4.4" - "@material-ui/styles" "^4.11.4" - "@material-ui/system" "^4.12.1" - "@material-ui/types" "5.1.0" - "@material-ui/utils" "^4.11.2" - "@types/react-transition-group" "^4.2.0" - clsx "^1.0.4" - hoist-non-react-statics "^3.3.2" - popper.js "1.16.1-lts" - prop-types "^15.7.2" - react-is "^16.8.0 || ^17.0.0" - react-transition-group "^4.4.0" - -"@material-ui/icons@4.5.1": - version "4.5.1" - resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.5.1.tgz#6963bad139e938702ece85ca43067688018f04f8" - integrity sha512-YZ/BgJbXX4a0gOuKWb30mBaHaoXRqPanlePam83JQPZ/y4kl+3aW0Wv9tlR70hB5EGAkEJGW5m4ktJwMgxQAeA== - dependencies: - "@babel/runtime" "^7.4.4" - -"@material-ui/lab@4.0.0-alpha.42": - version "4.0.0-alpha.42" - resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.42.tgz#f8789d3ba39a1e5a13f462d618c2eec53f87ae10" - integrity sha512-JbKEMIXSslh03u6HNU1Pp1VXd9ycJ1dqkI+iQK6yR+Sng2mvMKzJ80GCV5ROXAXwwNnD8zHOopLZNIpTsEAVgQ== - dependencies: - "@babel/runtime" "^7.4.4" - "@material-ui/utils" "^4.7.1" - clsx "^1.0.4" - prop-types "^15.7.2" - react-is "^16.8.0" - -"@material-ui/styles@^4.11.4": - version "4.11.5" - resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.5.tgz#19f84457df3aafd956ac863dbe156b1d88e2bbfb" - integrity sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA== - dependencies: - "@babel/runtime" "^7.4.4" - "@emotion/hash" "^0.8.0" - "@material-ui/types" "5.1.0" - "@material-ui/utils" "^4.11.3" - clsx "^1.0.4" - csstype "^2.5.2" - hoist-non-react-statics "^3.3.2" - jss "^10.5.1" - jss-plugin-camel-case "^10.5.1" - jss-plugin-default-unit "^10.5.1" - jss-plugin-global "^10.5.1" - jss-plugin-nested "^10.5.1" - jss-plugin-props-sort "^10.5.1" - jss-plugin-rule-value-function "^10.5.1" - jss-plugin-vendor-prefixer "^10.5.1" - prop-types "^15.7.2" - -"@material-ui/system@^4.12.1": - version "4.12.2" - resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.12.2.tgz#f5c389adf3fce4146edd489bf4082d461d86aa8b" - integrity sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw== - dependencies: - "@babel/runtime" "^7.4.4" - "@material-ui/utils" "^4.11.3" - csstype "^2.5.2" - prop-types "^15.7.2" - -"@material-ui/types@5.1.0": - version "5.1.0" - resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2" - integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A== - -"@material-ui/utils@^4.11.2", "@material-ui/utils@^4.11.3", "@material-ui/utils@^4.7.1": - version "4.11.3" - resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.3.tgz#232bd86c4ea81dab714f21edad70b7fdf0253942" - integrity sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg== - dependencies: - "@babel/runtime" "^7.4.4" - prop-types "^15.7.2" - react-is "^16.8.0 || ^17.0.0" - "@mdn/browser-compat-data@^3.3.14": version "3.3.14" resolved "https://registry.yarnpkg.com/@mdn/browser-compat-data/-/browser-compat-data-3.3.14.tgz#b72a37c654e598f9ae6f8335faaee182bebc6b28" @@ -1849,6 +1878,136 @@ strict-event-emitter "^0.2.4" web-encoding "^1.1.5" +"@mui/base@5.0.0-alpha.128": + version "5.0.0-alpha.128" + resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.128.tgz#8ce4beb971ac989df0b1d3b2bd3e9274dbfa604f" + integrity sha512-wub3wxNN+hUp8hzilMlXX3sZrPo75vsy1cXEQpqdTfIFlE9HprP1jlulFiPg5tfPst2OKmygXr2hhmgvAKRrzQ== + dependencies: + "@babel/runtime" "^7.21.0" + "@emotion/is-prop-valid" "^1.2.0" + "@mui/types" "^7.2.4" + "@mui/utils" "^5.12.3" + "@popperjs/core" "^2.11.7" + clsx "^1.2.1" + prop-types "^15.8.1" + react-is "^18.2.0" + +"@mui/core-downloads-tracker@^5.12.3": + version "5.12.3" + resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.12.3.tgz#3dffe62dccc065ddd7338e97d7be4b917004287e" + integrity sha512-yiJZ+knaknPHuRKhRk4L6XiwppwkAahVal3LuYpvBH7GkA2g+D9WLEXOEnNYtVFUggyKf6fWGLGnx0iqzkU5YA== + +"@mui/icons-material@^5.11.16": + version "5.11.16" + resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.11.16.tgz#417fa773c56672e39d6ccfed9ac55591985f0d38" + integrity sha512-oKkx9z9Kwg40NtcIajF9uOXhxiyTZrrm9nmIJ4UjkU2IdHpd4QVLbCc/5hZN/y0C6qzi2Zlxyr9TGddQx2vx2A== + dependencies: + "@babel/runtime" "^7.21.0" + +"@mui/lab@^5.0.0-alpha.129": + version "5.0.0-alpha.129" + resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.129.tgz#e940aeef995175586e058cad36e801502730b670" + integrity sha512-niv2mFgSTgdrRJXbWoX9pIivhe80BaFXfdWajXe1bS8VYH3Y5WyJpk8KiU3rbHyJswbFEGd8N6EBBrq11X8yMA== + dependencies: + "@babel/runtime" "^7.21.0" + "@mui/base" "5.0.0-alpha.128" + "@mui/system" "^5.12.3" + "@mui/types" "^7.2.4" + "@mui/utils" "^5.12.3" + clsx "^1.2.1" + prop-types "^15.8.1" + react-is "^18.2.0" + +"@mui/material@^5.12.3": + version "5.12.3" + resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.12.3.tgz#398c1b123fb065763558bc1f9fc47d1f8cb87d0c" + integrity sha512-xNmKlrEN4HsTaKFNLZfc7ie7CXx2YqEeO//hsXZx2p3MGtDdeMr2sV3jC4hsFs57RhQlF79weY7uVvC8xSuVbg== + dependencies: + "@babel/runtime" "^7.21.0" + "@mui/base" "5.0.0-alpha.128" + "@mui/core-downloads-tracker" "^5.12.3" + "@mui/system" "^5.12.3" + "@mui/types" "^7.2.4" + "@mui/utils" "^5.12.3" + "@types/react-transition-group" "^4.4.5" + clsx "^1.2.1" + csstype "^3.1.2" + prop-types "^15.8.1" + react-is "^18.2.0" + react-transition-group "^4.4.5" + +"@mui/private-theming@^5.12.3": + version "5.12.3" + resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.12.3.tgz#f5e4704e25d9d91b906561cae573cda8f3801e10" + integrity sha512-o1e7Z1Bp27n4x2iUHhegV4/Jp6H3T6iBKHJdLivS5GbwsuAE/5l4SnZ+7+K+e5u9TuhwcAKZLkjvqzkDe8zqfA== + dependencies: + "@babel/runtime" "^7.21.0" + "@mui/utils" "^5.12.3" + prop-types "^15.8.1" + +"@mui/styled-engine@^5.12.3": + version "5.12.3" + resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.12.3.tgz#3307643d52c81947a624cdd0437536cc8109c4f0" + integrity sha512-AhZtiRyT8Bjr7fufxE/mLS+QJ3LxwX1kghIcM2B2dvJzSSg9rnIuXDXM959QfUVIM3C8U4x3mgVoPFMQJvc4/g== + dependencies: + "@babel/runtime" "^7.21.0" + "@emotion/cache" "^11.10.8" + csstype "^3.1.2" + prop-types "^15.8.1" + +"@mui/styles@^5.12.3": + version "5.12.3" + resolved "https://registry.yarnpkg.com/@mui/styles/-/styles-5.12.3.tgz#2856fea1002199155bca02d4188b3771539481c6" + integrity sha512-y0GN1kTYO2FF/0LH8a0PpVxwLotlcunFqdJpCL5gza0w5Fqz9wxlwauPZW0bDt0+sF79CrohzdzWkh+fxB+oww== + dependencies: + "@babel/runtime" "^7.21.0" + "@emotion/hash" "^0.9.0" + "@mui/private-theming" "^5.12.3" + "@mui/types" "^7.2.4" + "@mui/utils" "^5.12.3" + clsx "^1.2.1" + csstype "^3.1.2" + hoist-non-react-statics "^3.3.2" + jss "^10.10.0" + jss-plugin-camel-case "^10.10.0" + jss-plugin-default-unit "^10.10.0" + jss-plugin-global "^10.10.0" + jss-plugin-nested "^10.10.0" + jss-plugin-props-sort "^10.10.0" + jss-plugin-rule-value-function "^10.10.0" + jss-plugin-vendor-prefixer "^10.10.0" + prop-types "^15.8.1" + +"@mui/system@^5.12.3": + version "5.12.3" + resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.12.3.tgz#306b3cdffa3046067640219c1e5dd7e3dae38ff9" + integrity sha512-JB/6sypHqeJCqwldWeQ1MKkijH829EcZAKKizxbU2MJdxGG5KSwZvTBa5D9qiJUA1hJFYYupjiuy9ZdJt6rV6w== + dependencies: + "@babel/runtime" "^7.21.0" + "@mui/private-theming" "^5.12.3" + "@mui/styled-engine" "^5.12.3" + "@mui/types" "^7.2.4" + "@mui/utils" "^5.12.3" + clsx "^1.2.1" + csstype "^3.1.2" + prop-types "^15.8.1" + +"@mui/types@^7.2.4": + version "7.2.4" + resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.4.tgz#b6fade19323b754c5c6de679a38f068fd50b9328" + integrity sha512-LBcwa8rN84bKF+f5sDyku42w1NTxaPgPyYKODsh01U1fVstTClbUoSA96oyRBnSNyEiAVjKm6Gwx9vjR+xyqHA== + +"@mui/utils@^5.12.3": + version "5.12.3" + resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.12.3.tgz#3fa3570dac7ec66bb9cc84ab7c16ab6e1b7200f2" + integrity sha512-D/Z4Ub3MRl7HiUccid7sQYclTr24TqUAQFFlxHQF8FR177BrCTQ0JJZom7EqYjZCdXhwnSkOj2ph685MSKNtIA== + dependencies: + "@babel/runtime" "^7.21.0" + "@types/prop-types" "^15.7.5" + "@types/react-is" "^16.7.1 || ^17.0.0" + prop-types "^15.8.1" + react-is "^18.2.0" + "@ndelangen/get-tarball@^3.0.7": version "3.0.7" resolved "https://registry.yarnpkg.com/@ndelangen/get-tarball/-/get-tarball-3.0.7.tgz#87c7aef2df4ff4fbdbab6ac9ed32cee142c4b1a3" @@ -1904,6 +2063,11 @@ "@types/node" "*" playwright-core "1.29.2" +"@popperjs/core@^2.11.7": + version "2.11.7" + resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.7.tgz#ccab5c8f7dc557a52ca3288c10075c9ccd37fff7" + integrity sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw== + "@remix-run/router@1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.0.1.tgz#88d7ac31811ab0cef14aaaeae2a0474923b278bc" @@ -3270,7 +3434,7 @@ resolved "https://registry.yarnpkg.com/@types/pretty-hrtime/-/pretty-hrtime-1.0.1.tgz#72a26101dc567b0d68fd956cf42314556e42d601" integrity sha512-VjID5MJb1eGKthz2qUerWT8+R4b9N+CHvGCzg9fn4kWZgaF9AhdYikQio3R7wV8YY1NsQKPaCwKz1Yff+aHNUQ== -"@types/prop-types@*", "@types/prop-types@^15.0.0": +"@types/prop-types@*", "@types/prop-types@^15.0.0", "@types/prop-types@^15.7.5": version "15.7.5" resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf" integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w== @@ -3314,6 +3478,13 @@ dependencies: "@types/react" "*" +"@types/react-is@^16.7.1 || ^17.0.0": + version "17.0.4" + resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-17.0.4.tgz#3cccd02851f7f7a75b21d6e922da26bc7f8f44ad" + integrity sha512-FLzd0K9pnaEvKz4D1vYxK9JmgQPiGk1lu23o1kqGsLeT0iPbRSF7b76+S5T9fD8aRa0B8bY7I/3DebEj+1ysBA== + dependencies: + "@types/react" "^17" + "@types/react-syntax-highlighter@15.5.5": version "15.5.5" resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.5.tgz#4d3b51f8956195f1f63360ff03f8822c5d74c516" @@ -3321,10 +3492,10 @@ dependencies: "@types/react" "*" -"@types/react-transition-group@^4.2.0": - version "4.4.5" - resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.5.tgz#aae20dcf773c5aa275d5b9f7cdbca638abc5e416" - integrity sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA== +"@types/react-transition-group@^4.4.5": + version "4.4.6" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.6.tgz#18187bcda5281f8e10dfc48f0943e2fdf4f75e2e" + integrity sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew== dependencies: "@types/react" "*" @@ -3369,6 +3540,15 @@ "@types/scheduler" "*" csstype "^3.0.2" +"@types/react@^17": + version "17.0.58" + resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.58.tgz#c8bbc82114e5c29001548ebe8ed6c4ba4d3c9fb0" + integrity sha512-c1GzVY97P0fGxwGxhYq989j4XwlcHQoto6wQISOC2v6wm3h0PORRWJFHlkRjfGsiG3y1609WdQ+J+tKxvrEd6A== + dependencies: + "@types/prop-types" "*" + "@types/scheduler" "*" + csstype "^3.0.2" + "@types/reactcss@*": version "1.2.6" resolved "https://registry.yarnpkg.com/@types/reactcss/-/reactcss-1.2.6.tgz#133c1e7e896f2726370d1d5a26bf06a30a038bcc" @@ -4274,6 +4454,15 @@ babel-plugin-jest-hoist@^29.5.0: "@types/babel__core" "^7.1.14" "@types/babel__traverse" "^7.0.6" +babel-plugin-macros@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1" + integrity sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg== + dependencies: + "@babel/runtime" "^7.12.5" + cosmiconfig "^7.0.0" + resolve "^1.19.0" + babel-plugin-polyfill-corejs2@^0.3.3: version "0.3.3" resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz#5d1bd3836d0a19e1b84bbf2d9640ccb6f951c122" @@ -4780,7 +4969,7 @@ clone@^1.0.2: resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e" integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg== -clsx@^1.0.4: +clsx@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12" integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg== @@ -4923,7 +5112,7 @@ content-type@~1.0.4: resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.5.tgz#8b773162656d1d1086784c8f23a54ce6d73d7918" integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA== -convert-source-map@^1.6.0, convert-source-map@^1.7.0: +convert-source-map@^1.5.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0: version "1.9.0" resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f" integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A== @@ -5085,17 +5274,12 @@ cssstyle@^2.3.0: dependencies: cssom "~0.3.6" -csstype@^2.5.2: - version "2.6.21" - resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.21.tgz#2efb85b7cc55c80017c66a5ad7cbd931fda3a90e" - integrity sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w== - csstype@^3.0.2: version "3.1.1" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9" integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw== -csstype@^3.0.6: +csstype@^3.0.6, csstype@^3.1.2: version "3.1.2" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b" integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ== @@ -6255,6 +6439,11 @@ find-cache-dir@^3.0.0: make-dir "^3.0.2" pkg-dir "^4.1.0" +find-root@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4" + integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng== + find-up@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73" @@ -6785,7 +6974,7 @@ history@5.3.0: dependencies: "@babel/runtime" "^7.7.6" -hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: +hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -8088,7 +8277,7 @@ jsonfile@^6.0.1: optionalDependencies: graceful-fs "^4.1.6" -jss-plugin-camel-case@^10.5.1: +jss-plugin-camel-case@^10.10.0: version "10.10.0" resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.10.0.tgz#27ea159bab67eb4837fa0260204eb7925d4daa1c" integrity sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw== @@ -8097,7 +8286,7 @@ jss-plugin-camel-case@^10.5.1: hyphenate-style-name "^1.0.3" jss "10.10.0" -jss-plugin-default-unit@^10.5.1: +jss-plugin-default-unit@^10.10.0: version "10.10.0" resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.10.0.tgz#db3925cf6a07f8e1dd459549d9c8aadff9804293" integrity sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ== @@ -8105,7 +8294,7 @@ jss-plugin-default-unit@^10.5.1: "@babel/runtime" "^7.3.1" jss "10.10.0" -jss-plugin-global@^10.5.1: +jss-plugin-global@^10.10.0: version "10.10.0" resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.10.0.tgz#1c55d3c35821fab67a538a38918292fc9c567efd" integrity sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A== @@ -8113,7 +8302,7 @@ jss-plugin-global@^10.5.1: "@babel/runtime" "^7.3.1" jss "10.10.0" -jss-plugin-nested@^10.5.1: +jss-plugin-nested@^10.10.0: version "10.10.0" resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.10.0.tgz#db872ed8925688806e77f1fc87f6e62264513219" integrity sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA== @@ -8122,7 +8311,7 @@ jss-plugin-nested@^10.5.1: jss "10.10.0" tiny-warning "^1.0.2" -jss-plugin-props-sort@^10.5.1: +jss-plugin-props-sort@^10.10.0: version "10.10.0" resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.10.0.tgz#67f4dd4c70830c126f4ec49b4b37ccddb680a5d7" integrity sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg== @@ -8130,7 +8319,7 @@ jss-plugin-props-sort@^10.5.1: "@babel/runtime" "^7.3.1" jss "10.10.0" -jss-plugin-rule-value-function@^10.5.1: +jss-plugin-rule-value-function@^10.10.0: version "10.10.0" resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.10.0.tgz#7d99e3229e78a3712f78ba50ab342e881d26a24b" integrity sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g== @@ -8139,7 +8328,7 @@ jss-plugin-rule-value-function@^10.5.1: jss "10.10.0" tiny-warning "^1.0.2" -jss-plugin-vendor-prefixer@^10.5.1: +jss-plugin-vendor-prefixer@^10.10.0: version "10.10.0" resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.10.0.tgz#c01428ef5a89f2b128ec0af87a314d0c767931c7" integrity sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg== @@ -8148,7 +8337,7 @@ jss-plugin-vendor-prefixer@^10.5.1: css-vendor "^2.0.8" jss "10.10.0" -jss@10.10.0, jss@^10.5.1: +jss@10.10.0, jss@^10.10.0: version "10.10.0" resolved "https://registry.yarnpkg.com/jss/-/jss-10.10.0.tgz#a75cc85b0108c7ac8c7b7d296c520a3e4fbc6ccc" integrity sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw== @@ -9708,11 +9897,6 @@ polished@^4.2.2: dependencies: "@babel/runtime" "^7.17.8" -popper.js@1.16.1-lts: - version "1.16.1-lts" - resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05" - integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA== - postcss@^8.4.21: version "8.4.21" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.21.tgz#c639b719a57efc3187b13a1d765675485f4134f4" @@ -10105,17 +10289,17 @@ react-is@18.1.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67" integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg== -react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.0: +react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== -"react-is@^16.8.0 || ^17.0.0", react-is@^17.0.1: +react-is@^17.0.1: version "17.0.2" resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== -react-is@^18.0.0: +react-is@^18.0.0, react-is@^18.2.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== @@ -10172,7 +10356,7 @@ react-syntax-highlighter@15.5.0: prismjs "^1.27.0" refractor "^3.6.0" -react-transition-group@^4.4.0: +react-transition-group@^4.4.5: version "4.4.5" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1" integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g== @@ -10498,7 +10682,7 @@ resolve.exports@^2.0.0: resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-2.0.1.tgz#cee884cd4e3f355660e501fa3276b27d7ffe5a20" integrity sha512-OEJWVeimw8mgQuj3HfkNl4KqRevH7lzeQNaWRPfx0PPse7Jk6ozcsG4FKVgtzDsC1KUF+YlTHh17NcgHOPykLw== -resolve@^1.1.6, resolve@^1.14.2, resolve@^1.17.0: +resolve@^1.1.6, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.19.0: version "1.22.2" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.2.tgz#0ed0943d4e301867955766c9f3e1ae6d01c6845f" integrity sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g== @@ -10913,6 +11097,11 @@ source-map@0.5.6: resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412" integrity sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA== +source-map@^0.5.7: + version "0.5.7" + resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" + integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ== + source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" @@ -11192,6 +11381,11 @@ style-to-object@^0.3.0: dependencies: inline-style-parser "0.1.1" +stylis@4.1.4: + version "4.1.4" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.4.tgz#9cb60e7153d8ac6d02d773552bf51c7a0344535b" + integrity sha512-USf5pszRYwuE6hg9by0OkKChkQYEXfkeTtm0xKw+jqQhwyjCVLdYyMBK7R+n7dhzsblAWJnGxju4vxq5eH20GQ== + stylis@^4.0.6: version "4.1.3" resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.3.tgz#fd2fbe79f5fed17c55269e16ed8da14c84d069f7" From 047c10be847c66911949a442f94091227c424979 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 5 May 2023 16:15:32 +0000 Subject: [PATCH 02/32] Apply codemod --- site/src/app.tsx | 26 +++-- .../components/AlertBanner/AlertBanner.tsx | 6 +- .../components/AppLink/AppLinkSkeleton.tsx | 6 +- .../AvatarData/AvatarDataSkeleton.tsx | 6 +- .../BorderedMenuRow/BorderedMenuRow.tsx | 4 +- .../DeploySettingsLayout/Fieldset.tsx | 2 +- .../DeploymentBanner/DeploymentBannerView.tsx | 4 +- .../Dialogs/ConfirmDialog/ConfirmDialog.tsx | 2 +- .../EnterpriseSnackbar/EnterpriseSnackbar.tsx | 4 +- site/src/components/Expander/Expander.tsx | 2 +- site/src/components/Form/Form.tsx | 10 +- .../FormCloseButton/FormCloseButton.tsx | 2 +- site/src/components/IconField/IconField.tsx | 2 +- site/src/components/Logs/Logs.tsx | 2 +- site/src/components/Markdown/Markdown.tsx | 2 +- site/src/components/NavbarView/NavbarView.tsx | 8 +- .../PageHeader/FullWidthPageHeader.tsx | 6 +- site/src/components/PageHeader/PageHeader.tsx | 4 +- .../PaginationWidget/PaginationWidget.tsx | 4 +- .../PaginationWidget/PaginationWidgetBase.tsx | 4 +- .../PortForwardButton/PortForwardButton.tsx | 4 +- .../components/Resources/AgentMetadata.tsx | 2 +- site/src/components/Resources/AgentRow.tsx | 18 +-- .../components/Resources/AgentRowPreview.tsx | 4 +- .../src/components/Resources/ResourceCard.tsx | 4 +- site/src/components/SSHButton/SSHButton.tsx | 4 +- site/src/components/Section/Section.tsx | 2 +- .../components/SignInForm/OAuthSignInForm.tsx | 4 +- site/src/components/Stack/Stack.tsx | 2 +- site/src/components/Stats/Stats.tsx | 4 +- site/src/components/TabPanel/TabPanel.tsx | 8 +- site/src/components/TabSidebar/TabSidebar.tsx | 4 +- .../components/TableLoader/TableLoader.tsx | 2 +- .../TemplateVersionEditor/FileTreeView.tsx | 6 +- .../UserAutocomplete/UserAutocomplete.tsx | 8 +- .../UserOrGroupAutocomplete.tsx | 6 +- .../components/WarningAlert/WarningAlert.tsx | 2 +- site/src/components/Workspace/Workspace.tsx | 4 +- .../WorkspaceSection.stories.tsx | 2 +- .../WorkspaceStats/WorkspaceStats.tsx | 2 +- site/src/contexts/ProxyContext.tsx | 2 +- .../LicensesSettingsPageView.tsx | 108 +++++++++--------- site/src/pages/GroupsPage/GroupsPageView.tsx | 2 +- .../WorkspaceBuildStateError.tsx | 4 +- .../WorkspacePage/ChangeVersionDialog.tsx | 6 +- .../WorkspaceSchedulePage.tsx | 2 +- 46 files changed, 161 insertions(+), 161 deletions(-) diff --git a/site/src/app.tsx b/site/src/app.tsx index 4e0f15ab6d986..ba0913d0f4f17 100644 --- a/site/src/app.tsx +++ b/site/src/app.tsx @@ -24,19 +24,21 @@ const queryClient = new QueryClient({ export const AppProviders: FC = ({ children }) => { return ( - - - - - - {children} - - - - - + + + + + + + {children} + + + + + + - ) + ); } export const App: FC = () => { diff --git a/site/src/components/AlertBanner/AlertBanner.tsx b/site/src/components/AlertBanner/AlertBanner.tsx index a952fee7b795c..77c648420dea2 100644 --- a/site/src/components/AlertBanner/AlertBanner.tsx +++ b/site/src/components/AlertBanner/AlertBanner.tsx @@ -104,13 +104,13 @@ const useStyles = makeStyles((theme) => ({ textAlign: "left", "& > span": { - paddingTop: `${theme.spacing(0.25)}px`, + paddingTop: theme.spacing(0.25), }, // targeting the alert icon rather than the expander icon "& svg:nth-child(2)": { - marginTop: props.hasDetail ? `${theme.spacing(1)}px` : "inherit", - marginRight: `${theme.spacing(1)}px`, + marginTop: props.hasDetail ? theme.spacing(1) : "inherit", + marginRight: theme.spacing(1), }, }), diff --git a/site/src/components/AppLink/AppLinkSkeleton.tsx b/site/src/components/AppLink/AppLinkSkeleton.tsx index f2a8fdc5614e3..3e24ebe0bcbc9 100644 --- a/site/src/components/AppLink/AppLinkSkeleton.tsx +++ b/site/src/components/AppLink/AppLinkSkeleton.tsx @@ -1,5 +1,5 @@ import { makeStyles } from "@mui/material/styles" -import { Skeleton } from "@material-ui/lab" +import { Skeleton } from '@mui/material'; import { FC } from "react" import { borderRadiusSm } from "theme/constants" @@ -9,10 +9,10 @@ export const AppLinkSkeleton: FC<{ width: number }> = ({ width }) => { - ) + ); } const useStyles = makeStyles(() => ({ diff --git a/site/src/components/AvatarData/AvatarDataSkeleton.tsx b/site/src/components/AvatarData/AvatarDataSkeleton.tsx index d9994aa68e983..4e780cd130ac1 100644 --- a/site/src/components/AvatarData/AvatarDataSkeleton.tsx +++ b/site/src/components/AvatarData/AvatarDataSkeleton.tsx @@ -1,16 +1,16 @@ import { FC } from "react" import { Stack } from "components/Stack/Stack" -import { Skeleton } from "@material-ui/lab" +import { Skeleton } from '@mui/material'; export const AvatarDataSkeleton: FC = () => { return ( - + - ) + ); } diff --git a/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx b/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx index 079fe89250a86..6e71396a8f971 100644 --- a/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx +++ b/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx @@ -66,7 +66,7 @@ const iconSize = 20 const useStyles = makeStyles((theme) => ({ root: { cursor: "pointer", - padding: `0 ${theme.spacing(1)}px`, + padding: `0 ${theme.spacing(1)}`, "&:hover": { backgroundColor: "unset", @@ -86,7 +86,7 @@ const useStyles = makeStyles((theme) => ({ }, }, rootGutters: { - padding: `0 ${theme.spacing(1.5)}px`, + padding: `0 ${theme.spacing(1.5)}`, }, content: { borderRadius: theme.shape.borderRadius, diff --git a/site/src/components/DeploySettingsLayout/Fieldset.tsx b/site/src/components/DeploySettingsLayout/Fieldset.tsx index b84b9382efd0a..193a59d19b786 100644 --- a/site/src/components/DeploySettingsLayout/Fieldset.tsx +++ b/site/src/components/DeploySettingsLayout/Fieldset.tsx @@ -58,7 +58,7 @@ const useStyles = makeStyles((theme) => ({ }, footer: { background: theme.palette.background.paperLight, - padding: `${theme.spacing(2)}px ${theme.spacing(3)}px`, + padding: `${theme.spacing(2)} ${theme.spacing(3)}`, display: "flex", alignItems: "center", justifyContent: "space-between", diff --git a/site/src/components/DeploymentBanner/DeploymentBannerView.tsx b/site/src/components/DeploymentBanner/DeploymentBannerView.tsx index d43dc285d9f18..0f76ae7b9a51e 100644 --- a/site/src/components/DeploymentBanner/DeploymentBannerView.tsx +++ b/site/src/components/DeploymentBanner/DeploymentBannerView.tsx @@ -251,7 +251,7 @@ const useStyles = makeStyles((theme) => ({ height: 16, }, - [theme.breakpoints.down("md")]: { + [theme.breakpoints.down('lg')]: { display: "none", }, }, @@ -269,7 +269,7 @@ const useStyles = makeStyles((theme) => ({ gap: theme.spacing(4), borderTop: `1px solid ${theme.palette.divider}`, - [theme.breakpoints.down("md")]: { + [theme.breakpoints.down('lg')]: { flexDirection: "column", gap: theme.spacing(1), alignItems: "left", diff --git a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx index 6b11958b717a3..c6eedc1822e09 100644 --- a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx +++ b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx @@ -64,7 +64,7 @@ const useStyles = makeStyles((theme) => ({ maxWidth: theme.spacing(55), }, "& .MuiDialogActions-spacing": { - padding: `0 ${theme.spacing(5)}px ${theme.spacing(5)}px`, + padding: `0 ${theme.spacing(5)} ${theme.spacing(5)}`, }, }, dialogContent: { diff --git a/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx b/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx index 7e672cbae89b1..159e46b7b20f3 100644 --- a/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx +++ b/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx @@ -42,7 +42,7 @@ export const EnterpriseSnackbar: FC< action={
{action} - +
@@ -58,7 +58,7 @@ export const EnterpriseSnackbar: FC< }} onClose={onClose} /> - ) + ); } const useStyles = makeStyles((theme) => ({ diff --git a/site/src/components/Expander/Expander.tsx b/site/src/components/Expander/Expander.tsx index 301bb2960be50..8550349513eb1 100644 --- a/site/src/components/Expander/Expander.tsx +++ b/site/src/components/Expander/Expander.tsx @@ -58,7 +58,7 @@ const useStyles = makeStyles((theme) => ({ color: theme.palette.text.secondary, }, collapseLink: { - marginTop: `${theme.spacing(2)}px`, + marginTop: theme.spacing(2), }, text: { display: "flex", diff --git a/site/src/components/Form/Form.tsx b/site/src/components/Form/Form.tsx index 5165e66df9a9d..65352eaf903e1 100644 --- a/site/src/components/Form/Form.tsx +++ b/site/src/components/Form/Form.tsx @@ -122,7 +122,7 @@ const useStyles = makeStyles((theme) => ({ gap: ({ direction }: FormContextValue = {}) => direction === "horizontal" ? theme.spacing(10) : theme.spacing(5), - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down('md')]: { gap: theme.spacing(8), }, }, @@ -135,7 +135,7 @@ const useStyles = makeStyles((theme) => ({ flexDirection: ({ direction }: FormContextValue = {}) => direction === "horizontal" ? "row" : "column", - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down('md')]: { flexDirection: "column", gap: theme.spacing(2), }, @@ -150,7 +150,7 @@ const useStyles = makeStyles((theme) => ({ direction === "horizontal" ? "sticky" : undefined, top: theme.spacing(3), - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down('md')]: { width: "100%", position: "initial", }, @@ -180,7 +180,7 @@ const useFormFooterStyles = makeStyles((theme) => ({ button: { minWidth: theme.spacing(23), - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down('md')]: { width: "100%", }, }, @@ -191,7 +191,7 @@ const useFormFooterStyles = makeStyles((theme) => ({ flexDirection: "row-reverse", gap: theme.spacing(2), - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down('md')]: { flexDirection: "column", gap: theme.spacing(1), }, diff --git a/site/src/components/FormCloseButton/FormCloseButton.tsx b/site/src/components/FormCloseButton/FormCloseButton.tsx index caf1bab9f812a..64f1f578bf765 100644 --- a/site/src/components/FormCloseButton/FormCloseButton.tsx +++ b/site/src/components/FormCloseButton/FormCloseButton.tsx @@ -48,7 +48,7 @@ const useStyles = makeStyles((theme) => ({ opacity: 1, }, - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down('md')]: { top: theme.spacing(1), right: theme.spacing(1), }, diff --git a/site/src/components/IconField/IconField.tsx b/site/src/components/IconField/IconField.tsx index 98922f93f03a0..a1ec12d6a2286 100644 --- a/site/src/components/IconField/IconField.tsx +++ b/site/src/components/IconField/IconField.tsx @@ -84,7 +84,7 @@ const IconField: FC = ({ onPickEmoji, ...textFieldProps }) => { /> - ) + ); } const useStyles = makeStyles((theme) => ({ diff --git a/site/src/components/Logs/Logs.tsx b/site/src/components/Logs/Logs.tsx index 50c02ee71c305..2d7d294e1c3e8 100644 --- a/site/src/components/Logs/Logs.tsx +++ b/site/src/components/Logs/Logs.tsx @@ -66,7 +66,7 @@ export const LogLine: FC<{ lineNumbers: Boolean(number), }) const output = useMemo(() => { - return convert.toHtml(line.output.split(/\r/g).pop() as string) + return convert.toHtml(line.output.split(/\r/g).pop() as string); }, [line.output]) return ( diff --git a/site/src/components/Markdown/Markdown.tsx b/site/src/components/Markdown/Markdown.tsx index 40b065075a9fa..216f681918feb 100644 --- a/site/src/components/Markdown/Markdown.tsx +++ b/site/src/components/Markdown/Markdown.tsx @@ -95,7 +95,7 @@ export const Markdown: FC<{ children: string }> = ({ children }) => { > {children} - ) + ); } export const MemoizedMarkdown = memo(Markdown) diff --git a/site/src/components/NavbarView/NavbarView.tsx b/site/src/components/NavbarView/NavbarView.tsx index 3b796d895c1c1..04d63c52cef6c 100644 --- a/site/src/components/NavbarView/NavbarView.tsx +++ b/site/src/components/NavbarView/NavbarView.tsx @@ -104,7 +104,7 @@ export const NavbarView: React.FC> = ({ onClick={() => { setIsDrawerOpen(true) }} - > + size="large"> @@ -156,7 +156,7 @@ export const NavbarView: React.FC> = ({ - ) + ); } const useStyles = makeStyles((theme) => ({ @@ -231,7 +231,7 @@ const useStyles = makeStyles((theme) => ({ display: "flex", flex: 1, fontSize: 16, - padding: `${theme.spacing(1.5)}px ${theme.spacing(2)}px`, + padding: `${theme.spacing(1.5)} ${theme.spacing(2)}`, textDecoration: "none", transition: "background-color 0.15s ease-in-out", @@ -247,7 +247,7 @@ const useStyles = makeStyles((theme) => ({ [theme.breakpoints.up("md")]: { height: navHeight, - padding: `0 ${theme.spacing(3)}px`, + padding: `0 ${theme.spacing(3)}`, }, }, })) diff --git a/site/src/components/PageHeader/FullWidthPageHeader.tsx b/site/src/components/PageHeader/FullWidthPageHeader.tsx index 4a08631c1c709..49e5de574beeb 100644 --- a/site/src/components/PageHeader/FullWidthPageHeader.tsx +++ b/site/src/components/PageHeader/FullWidthPageHeader.tsx @@ -39,17 +39,17 @@ const useStyles = makeStyles((theme) => ({ zIndex: 10, flexWrap: "wrap", - [theme.breakpoints.down("md")]: { + [theme.breakpoints.down('lg')]: { position: "unset", alignItems: "flex-start", }, - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down('md')]: { flexDirection: "column", }, }, actions: { marginLeft: "auto", - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down('md')]: { marginLeft: "unset", }, }, diff --git a/site/src/components/PageHeader/PageHeader.tsx b/site/src/components/PageHeader/PageHeader.tsx index 3a80b1af4df2d..a419cd348549c 100644 --- a/site/src/components/PageHeader/PageHeader.tsx +++ b/site/src/components/PageHeader/PageHeader.tsx @@ -61,7 +61,7 @@ const useStyles = makeStyles((theme) => ({ paddingBottom: theme.spacing(6), gap: theme.spacing(4), - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down('md')]: { flexDirection: "column", alignItems: "flex-start", }, @@ -90,7 +90,7 @@ const useStyles = makeStyles((theme) => ({ actions: { marginLeft: "auto", - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down('md')]: { marginTop: theme.spacing(3), marginLeft: "initial", width: "100%", diff --git a/site/src/components/PaginationWidget/PaginationWidget.tsx b/site/src/components/PaginationWidget/PaginationWidget.tsx index 7841e41d74fc5..cbaab7cafee77 100644 --- a/site/src/components/PaginationWidget/PaginationWidget.tsx +++ b/site/src/components/PaginationWidget/PaginationWidget.tsx @@ -27,7 +27,7 @@ export const PaginationWidget = ({ paginationRef, }: PaginationWidgetProps): JSX.Element | null => { const theme = useTheme() - const isMobile = useMediaQuery(theme.breakpoints.down("sm")) + const isMobile = useMediaQuery(theme.breakpoints.down('md')) const styles = useStyles() const [paginationState, send] = useActor(paginationRef) @@ -106,6 +106,6 @@ const useStyles = makeStyles((theme) => ({ }, prevLabelStyles: { - marginRight: `${theme.spacing(0.5)}px`, + marginRight: theme.spacing(0.5), }, })) diff --git a/site/src/components/PaginationWidget/PaginationWidgetBase.tsx b/site/src/components/PaginationWidget/PaginationWidgetBase.tsx index 62b3968da2c5c..6866daa548dc3 100644 --- a/site/src/components/PaginationWidget/PaginationWidgetBase.tsx +++ b/site/src/components/PaginationWidget/PaginationWidgetBase.tsx @@ -21,7 +21,7 @@ export const PaginationWidgetBase = ({ onChange, }: PaginationWidgetBaseProps): JSX.Element | null => { const theme = useTheme() - const isMobile = useMediaQuery(theme.breakpoints.down("sm")) + const isMobile = useMediaQuery(theme.breakpoints.down('md')) const styles = useStyles() const numPages = Math.ceil(count / limit) const isFirstPage = page === 0 @@ -99,6 +99,6 @@ const useStyles = makeStyles((theme) => ({ }, prevLabelStyles: { - marginRight: `${theme.spacing(0.5)}px`, + marginRight: theme.spacing(0.5), }, })) diff --git a/site/src/components/PortForwardButton/PortForwardButton.tsx b/site/src/components/PortForwardButton/PortForwardButton.tsx index 38c253befe088..8f381becfbc37 100644 --- a/site/src/components/PortForwardButton/PortForwardButton.tsx +++ b/site/src/components/PortForwardButton/PortForwardButton.tsx @@ -181,9 +181,9 @@ export const PortForwardButton: React.FC = (props) => { const useStyles = makeStyles((theme) => ({ popoverPaper: { - padding: `${theme.spacing(2.5)}px ${theme.spacing(3.5)}px ${theme.spacing( + padding: `${theme.spacing(2.5)} ${theme.spacing(3.5)} ${theme.spacing( 3.5, - )}px`, + )}`, width: theme.spacing(52), color: theme.palette.text.secondary, marginTop: theme.spacing(0.25), diff --git a/site/src/components/Resources/AgentMetadata.tsx b/site/src/components/Resources/AgentMetadata.tsx index 4f1730185aae5..836769eafc97b 100644 --- a/site/src/components/Resources/AgentMetadata.tsx +++ b/site/src/components/Resources/AgentMetadata.tsx @@ -4,7 +4,7 @@ import { WorkspaceAgent, WorkspaceAgentMetadata } from "api/typesGenerated" import { Stack } from "components/Stack/Stack" import dayjs from "dayjs" import { createContext, FC, useContext, useEffect, useState } from "react" -import { Skeleton } from "@material-ui/lab" +import { Skeleton } from '@mui/material'; import { MONOSPACE_FONT_FAMILY } from "theme/constants" type ItemStatus = "stale" | "valid" | "loading" diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx index 30bec72f3a7a5..1c3767056bd70 100644 --- a/site/src/components/Resources/AgentRow.tsx +++ b/site/src/components/Resources/AgentRow.tsx @@ -1,6 +1,6 @@ import Popover from "@mui/material/Popover" import { makeStyles, useTheme } from "@mui/material/styles" -import { Skeleton } from "@material-ui/lab" +import { Skeleton } from '@mui/material'; import { useMachine } from "@xstate/react" import CodeOutlined from "@mui/icons-material/CodeOutlined" import { @@ -266,13 +266,13 @@ export const AgentRow: FC = ({ @@ -381,7 +381,7 @@ export const AgentRow: FC = ({ )} - ) + ); } const useStyles = makeStyles((theme) => ({ @@ -452,7 +452,7 @@ const useStyles = makeStyles((theme) => ({ gap: theme.spacing(6), flexWrap: "wrap", - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down('md')]: { gap: theme.spacing(2), }, }, @@ -463,7 +463,7 @@ const useStyles = makeStyles((theme) => ({ gap: theme.spacing(3), flexWrap: "wrap", - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down('md')]: { gap: theme.spacing(1.5), }, }, @@ -475,7 +475,7 @@ const useStyles = makeStyles((theme) => ({ flexWrap: "wrap", flex: 1, - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down('md')]: { marginLeft: 0, justifyContent: "flex-start", }, @@ -507,7 +507,7 @@ const useStyles = makeStyles((theme) => ({ alignItems: "center", gap: theme.spacing(4), - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down('md')]: { width: "100%", }, }, @@ -522,7 +522,7 @@ const useStyles = makeStyles((theme) => ({ flexShrink: 0, width: "fit-content", - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down('md')]: { overflow: "unset", }, }, diff --git a/site/src/components/Resources/AgentRowPreview.tsx b/site/src/components/Resources/AgentRowPreview.tsx index 0c04ac5d348ef..dbd4dc40cfbc7 100644 --- a/site/src/components/Resources/AgentRowPreview.tsx +++ b/site/src/components/Resources/AgentRowPreview.tsx @@ -158,7 +158,7 @@ const useStyles = makeStyles((theme) => ({ fontSize: 14, color: theme.palette.text.secondary, - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down('md')]: { gap: theme.spacing(2), flexWrap: "wrap", }, @@ -187,7 +187,7 @@ const useStyles = makeStyles((theme) => ({ }, agentDataItem: { - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down('md')]: { flexDirection: "column", alignItems: "flex-start", gap: theme.spacing(1), diff --git a/site/src/components/Resources/ResourceCard.tsx b/site/src/components/Resources/ResourceCard.tsx index 64792173b6d4d..219d6d16fecdc 100644 --- a/site/src/components/Resources/ResourceCard.tsx +++ b/site/src/components/Resources/ResourceCard.tsx @@ -89,7 +89,7 @@ export const ResourceCard: FC = ({ resource, agentRow }) => { onClick={() => { setShouldDisplayAllMetadata((value) => !value) }} - > + size="large"> {shouldDisplayAllMetadata ? ( ) : ( @@ -105,7 +105,7 @@ export const ResourceCard: FC = ({ resource, agentRow }) => {
{resource.agents.map(agentRow)}
)} - ) + ); } const useStyles = makeStyles((theme) => ({ diff --git a/site/src/components/SSHButton/SSHButton.tsx b/site/src/components/SSHButton/SSHButton.tsx index f2b9b10a4733a..00d51120223b0 100644 --- a/site/src/components/SSHButton/SSHButton.tsx +++ b/site/src/components/SSHButton/SSHButton.tsx @@ -105,9 +105,9 @@ export const SSHButton: React.FC> = ({ const useStyles = makeStyles((theme) => ({ popoverPaper: { - padding: `${theme.spacing(2)}px ${theme.spacing(3)}px ${theme.spacing( + padding: `${theme.spacing(2)} ${theme.spacing(3)} ${theme.spacing( 3, - )}px`, + )}`, width: theme.spacing(38), color: theme.palette.text.secondary, marginTop: theme.spacing(0.25), diff --git a/site/src/components/Section/Section.tsx b/site/src/components/Section/Section.tsx index b49853c13fa8b..28d1755b063d6 100644 --- a/site/src/components/Section/Section.tsx +++ b/site/src/components/Section/Section.tsx @@ -68,7 +68,7 @@ const useStyles = makeStyles((theme) => ({ borderRadius: theme.shape.borderRadius, border: `1px solid ${theme.palette.divider}`, - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down('md')]: { padding: theme.spacing(4, 3, 4, 3), }, }, diff --git a/site/src/components/SignInForm/OAuthSignInForm.tsx b/site/src/components/SignInForm/OAuthSignInForm.tsx index 5a863261fcc22..57c83788b4acf 100644 --- a/site/src/components/SignInForm/OAuthSignInForm.tsx +++ b/site/src/components/SignInForm/OAuthSignInForm.tsx @@ -29,7 +29,7 @@ export const OAuthSignInForm: FC = ({ const styles = useStyles() return ( - + {authMethods?.github.enabled && ( = ({ )} - ) + ); } diff --git a/site/src/components/Stack/Stack.tsx b/site/src/components/Stack/Stack.tsx index 8f60a7af3edf2..ac9d0d576ce07 100644 --- a/site/src/components/Stack/Stack.tsx +++ b/site/src/components/Stack/Stack.tsx @@ -28,7 +28,7 @@ const useStyles = makeStyles((theme) => ({ flexWrap: ({ wrap }: StyleProps) => wrap, maxWidth: ({ maxWidth }: StyleProps) => maxWidth, - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down('md')]: { width: "100%", }, }, diff --git a/site/src/components/Stats/Stats.tsx b/site/src/components/Stats/Stats.tsx index 036abe564014c..c8ab1be4b2c94 100644 --- a/site/src/components/Stats/Stats.tsx +++ b/site/src/components/Stats/Stats.tsx @@ -43,7 +43,7 @@ const useStyles = makeStyles((theme) => ({ margin: "0px", flexWrap: "wrap", - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down('md')]: { display: "block", padding: theme.spacing(2), }, @@ -57,7 +57,7 @@ const useStyles = makeStyles((theme) => ({ alignItems: "baseline", gap: theme.spacing(1), - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down('md')]: { padding: theme.spacing(1), }, }, diff --git a/site/src/components/TabPanel/TabPanel.tsx b/site/src/components/TabPanel/TabPanel.tsx index aad5a311d1480..ae41b040ab272 100644 --- a/site/src/components/TabPanel/TabPanel.tsx +++ b/site/src/components/TabPanel/TabPanel.tsx @@ -40,7 +40,7 @@ const useStyles = makeStyles((theme) => ({ maxWidth: 1920, padding: theme.spacing(5, 3.5, 0, 4), - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down('md')]: { flexDirection: "column", padding: 0, }, @@ -59,7 +59,7 @@ const useStyles = makeStyles((theme) => ({ menuPanel: { paddingRight: 40, - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down('md')]: { padding: 0, }, }, @@ -87,12 +87,12 @@ const useStyles = makeStyles((theme) => ({ }, }, - [theme.breakpoints.down("lg")]: { + [theme.breakpoints.down('xl')]: { contentPanel: { width: 890, }, }, - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down('md')]: { contentPanel: { width: "auto", }, diff --git a/site/src/components/TabSidebar/TabSidebar.tsx b/site/src/components/TabSidebar/TabSidebar.tsx index 1715cd6a7851f..21bfb36402b02 100644 --- a/site/src/components/TabSidebar/TabSidebar.tsx +++ b/site/src/components/TabSidebar/TabSidebar.tsx @@ -56,7 +56,7 @@ const useStyles = makeStyles((theme) => ({ minWidth: 160, marginTop: theme.spacing(5), - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down('md')]: { display: "flex", borderBottom: `1px solid ${theme.palette.divider}`, marginBottom: theme.spacing(2), @@ -105,7 +105,7 @@ const useStyles = makeStyles((theme) => ({ }, }, - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down('md')]: { textAlign: "center", width: "100%", paddingTop: theme.spacing(2), diff --git a/site/src/components/TableLoader/TableLoader.tsx b/site/src/components/TableLoader/TableLoader.tsx index 94e391cdedd64..6b8139f6f5cbe 100644 --- a/site/src/components/TableLoader/TableLoader.tsx +++ b/site/src/components/TableLoader/TableLoader.tsx @@ -1,7 +1,7 @@ import { makeStyles } from "@mui/material/styles" import TableCell from "@mui/material/TableCell" import TableRow from "@mui/material/TableRow" -import Skeleton from "@material-ui/lab/Skeleton" +import Skeleton from '@mui/material/Skeleton' import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton" import { FC } from "react" import { Loader } from "../Loader/Loader" diff --git a/site/src/components/TemplateVersionEditor/FileTreeView.tsx b/site/src/components/TemplateVersionEditor/FileTreeView.tsx index f760125bec702..367793808c3eb 100644 --- a/site/src/components/TemplateVersionEditor/FileTreeView.tsx +++ b/site/src/components/TemplateVersionEditor/FileTreeView.tsx @@ -1,8 +1,8 @@ import { makeStyles } from "@mui/material/styles" import ChevronRightIcon from "@mui/icons-material/ChevronRight" import ExpandMoreIcon from "@mui/icons-material/ExpandMore" -import TreeView from "@material-ui/lab/TreeView" -import TreeItem from "@material-ui/lab/TreeItem" +import TreeView from "@mui/lab/TreeView" +import TreeItem from "@mui/lab/TreeItem" import Menu from "@mui/material/Menu" import MenuItem from "@mui/material/MenuItem" import { CSSProperties, FC, useState } from "react" @@ -205,7 +205,7 @@ const useStyles = makeStyles((theme) => ({ // We need to find a better way to recursive padding here "& .MuiTreeItem-content": { - paddingLeft: `calc(var(--level) * ${theme.spacing(5)}px)`, + paddingLeft: `calc(var(--level) * ${theme.spacing(5)})`, }, }, }, diff --git a/site/src/components/UserAutocomplete/UserAutocomplete.tsx b/site/src/components/UserAutocomplete/UserAutocomplete.tsx index 6535c00f38637..1577ed724e3ae 100644 --- a/site/src/components/UserAutocomplete/UserAutocomplete.tsx +++ b/site/src/components/UserAutocomplete/UserAutocomplete.tsx @@ -1,7 +1,7 @@ import CircularProgress from "@mui/material/CircularProgress" import { makeStyles } from "@mui/material/styles" import TextField from "@mui/material/TextField" -import Autocomplete from "@material-ui/lab/Autocomplete" +import Autocomplete from '@mui/material/Autocomplete' import { useMachine } from "@xstate/react" import { User } from "api/typesGenerated" import { Avatar } from "components/Avatar/Avatar" @@ -68,7 +68,7 @@ export const UserAutocomplete: FC = ({ onChange(newValue) }} - getOptionSelected={(option: User, value: User) => + isOptionEqualToValue={(option: User, value: User) => option.username === value.username } getOptionLabel={(option) => option.email} @@ -110,7 +110,7 @@ export const UserAutocomplete: FC = ({ /> )} /> - ) + ); } export const useStyles = makeStyles((theme) => ({ @@ -120,7 +120,7 @@ export const useStyles = makeStyles((theme) => ({ }, }, inputRoot: { - paddingLeft: `${theme.spacing(1.75)}px !important`, // Same padding left as input + paddingLeft: `${theme.spacing(1.75)} !important`, // Same padding left as input gap: theme.spacing(0.5), }, })) diff --git a/site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx b/site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx index 3d6d707de0013..4ae303bbf3d00 100644 --- a/site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx +++ b/site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx @@ -1,7 +1,7 @@ import CircularProgress from "@mui/material/CircularProgress" import { makeStyles } from "@mui/material/styles" import TextField from "@mui/material/TextField" -import Autocomplete from "@material-ui/lab/Autocomplete" +import Autocomplete from '@mui/material/Autocomplete' import { useMachine } from "@xstate/react" import { Group, User } from "api/typesGenerated" import { AvatarData } from "components/AvatarData/AvatarData" @@ -66,7 +66,7 @@ export const UserOrGroupAutocomplete: React.FC< onChange(newValue) }} - getOptionSelected={(option, value) => option.id === value.id} + isOptionEqualToValue={(option, value) => option.id === value.id} getOptionLabel={(option) => isGroup(option) ? option.name : option.email } @@ -105,7 +105,7 @@ export const UserOrGroupAutocomplete: React.FC< /> )} /> - ) + ); } export const useStyles = makeStyles((theme) => { diff --git a/site/src/components/WarningAlert/WarningAlert.tsx b/site/src/components/WarningAlert/WarningAlert.tsx index 6ed16d9763f06..f5b90cb963df0 100644 --- a/site/src/components/WarningAlert/WarningAlert.tsx +++ b/site/src/components/WarningAlert/WarningAlert.tsx @@ -60,7 +60,7 @@ const useStyles = makeStyles((theme) => ({ alertContainer: { border: `1px solid ${colors.orange[7]}`, borderRadius: theme.shape.borderRadius, - padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`, + padding: `${theme.spacing(1)} ${theme.spacing(2)}`, backgroundColor: `${colors.gray[16]}`, }, alertIcon: { diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx index 685305b415aa3..275809e98cfb8 100644 --- a/site/src/components/Workspace/Workspace.tsx +++ b/site/src/components/Workspace/Workspace.tsx @@ -273,7 +273,7 @@ export const useStyles = makeStyles((theme) => { }, actions: { - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down('md')]: { flexDirection: "column", }, }, @@ -309,5 +309,5 @@ export const useStyles = makeStyles((theme) => { fullWidth: { width: "100%", }, - } + }; }) diff --git a/site/src/components/WorkspaceSection/WorkspaceSection.stories.tsx b/site/src/components/WorkspaceSection/WorkspaceSection.stories.tsx index 8ace87a07e998..7550af1fc9169 100644 --- a/site/src/components/WorkspaceSection/WorkspaceSection.stories.tsx +++ b/site/src/components/WorkspaceSection/WorkspaceSection.stories.tsx @@ -21,7 +21,7 @@ NoAction.args = { export const Action = Template.bind({}) Action.args = { action: ( - + ), diff --git a/site/src/components/WorkspaceStats/WorkspaceStats.tsx b/site/src/components/WorkspaceStats/WorkspaceStats.tsx index c7f32aeeadac5..49a28f555e45c 100644 --- a/site/src/components/WorkspaceStats/WorkspaceStats.tsx +++ b/site/src/components/WorkspaceStats/WorkspaceStats.tsx @@ -314,7 +314,7 @@ const useStyles = makeStyles((theme) => ({ rowGap: theme.spacing(3), flex: 1, - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down('md')]: { display: "flex", flexDirection: "column", alignItems: "flex-start", diff --git a/site/src/contexts/ProxyContext.tsx b/site/src/contexts/ProxyContext.tsx index eef89b31ef239..5a7d16f3b06ca 100644 --- a/site/src/contexts/ProxyContext.tsx +++ b/site/src/contexts/ProxyContext.tsx @@ -187,7 +187,7 @@ export const getPreferredProxy = ( // Trim trailing slashes to be consistent preferredPathAppURL: pathAppURL.replace(/\/$/, ""), preferredWildcardHostname: wildcardHostname, - } + }; } // Local storage functions diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx index 4c157e4357997..263635667700a 100644 --- a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx +++ b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx @@ -1,6 +1,6 @@ import Button from "@mui/material/Button" import { makeStyles, useTheme } from "@mui/material/styles" -import Skeleton from "@material-ui/lab/Skeleton" +import Skeleton from '@mui/material/Skeleton' import { GetLicensesResponse } from "api/api" import { Header } from "components/DeploySettingsLayout/Header" import { LicenseCard } from "components/LicenseCard/LicenseCard" @@ -34,66 +34,64 @@ const LicensesSettingsPageView: FC = ({ const theme = useTheme() - return ( - <> - + + +
- -
- - + + - {isLoading && } + {isLoading && } - {!isLoading && licenses && licenses?.length > 0 && ( - - {licenses?.map((license) => ( - - ))} - - )} + {!isLoading && licenses && licenses?.length > 0 && ( + + {licenses?.map((license) => ( + + ))} + + )} - {!isLoading && licenses === null && ( -
- - - No licenses yet - - Contact sales or{" "} - request a trial license to - learn more. - - + {!isLoading && licenses === null && ( +
+ + + No licenses yet + + Contact sales or{" "} + request a trial license to + learn more. + -
- )} - - ) + +
+ )} + ; } const useStyles = makeStyles((theme) => ({ diff --git a/site/src/pages/GroupsPage/GroupsPageView.tsx b/site/src/pages/GroupsPage/GroupsPageView.tsx index ab0eec82ea279..dcc69c7a826a8 100644 --- a/site/src/pages/GroupsPage/GroupsPageView.tsx +++ b/site/src/pages/GroupsPage/GroupsPageView.tsx @@ -10,7 +10,7 @@ import TableRow from "@mui/material/TableRow" import ArrowRightAltOutlined from "@mui/icons-material/ArrowRightAltOutlined" import AddCircleOutline from "@mui/icons-material/AddCircleOutline" import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight" -import AvatarGroup from "@material-ui/lab/AvatarGroup" +import AvatarGroup from '@mui/material/AvatarGroup' import { AvatarData } from "components/AvatarData/AvatarData" import { ChooseOne, Cond } from "components/Conditionals/ChooseOne" import { EmptyState } from "components/EmptyState/EmptyState" diff --git a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildStateError.tsx b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildStateError.tsx index bfe96be1b5485..8270a5b2cf1bc 100644 --- a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildStateError.tsx +++ b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildStateError.tsx @@ -38,7 +38,7 @@ export const WorkspaceBuildStateError: React.FC< const useStyles = makeStyles((theme) => ({ root: { background: theme.palette.warning.main, - padding: `${theme.spacing(2)}px`, + padding: theme.spacing(2), borderRadius: theme.shape.borderRadius, gap: 0, }, @@ -49,7 +49,7 @@ const useStyles = makeStyles((theme) => ({ justifyContent: "space-between", }, errorMessage: { - marginRight: `${theme.spacing(1)}px`, + marginRight: theme.spacing(1), }, iconButton: { padding: 0, diff --git a/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx b/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx index a90be89174286..adea54dc151dc 100644 --- a/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx +++ b/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx @@ -6,7 +6,7 @@ import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog" import { Stack } from "components/Stack/Stack" import { Template, TemplateVersion } from "api/typesGenerated" import { Loader } from "components/Loader/Loader" -import Autocomplete from "@material-ui/lab/Autocomplete" +import Autocomplete from '@mui/material/Autocomplete' import { createDayString } from "utils/createDayString" import { AvatarData } from "components/AvatarData/AvatarData" import { Pill } from "components/Pill/Pill" @@ -67,7 +67,7 @@ export const ChangeVersionDialog: FC = ({ onClose={() => { setIsAutocompleteOpen(false) }} - getOptionSelected={( + isOptionEqualToValue={( option: TemplateVersion, value: TemplateVersion, ) => option.id === value.id} @@ -121,5 +121,5 @@ export const ChangeVersionDialog: FC = ({ } /> - ) + ); } diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx index 07ddf1f0fd547..e3b9ebeb2879d 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx @@ -30,7 +30,7 @@ const getAutostop = (workspace: TypesGen.Workspace) => const useStyles = makeStyles((theme) => ({ topMargin: { - marginTop: `${theme.spacing(3)}px`, + marginTop: theme.spacing(3), }, pageHeader: { paddingTop: 0, From 0b26a9bc8b43903d6c73ce7384d1820bd78fae89 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 5 May 2023 16:16:29 +0000 Subject: [PATCH 03/32] Apply variant mod --- .../Dialogs/DeleteDialog/DeleteDialog.tsx | 4 +- .../ParameterInput/ParameterInput.tsx | 12 +- .../PortForwardButton/PortForwardButton.tsx | 144 ++++--- .../RichParameterInput/RichParameterInput.tsx | 6 +- .../TemplateVersionEditor/FileDialog.tsx | 12 +- .../PublishTemplateVersionDialog.tsx | 6 +- .../WorkspaceScheduleForm.tsx | 19 +- .../WorkspaceStats/WorkspaceStats.tsx | 388 +++++++++--------- .../CreateTemplatePage/VariableInput.tsx | 6 +- .../pages/CreateTokenPage/CreateTokenForm.tsx | 10 +- .../AppearanceSettingsPageView.tsx | 300 +++++++------- .../AddNewLicensePageView.tsx | 124 +++--- 12 files changed, 513 insertions(+), 518 deletions(-) diff --git a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx index 7584e726cd3f2..6f668e7876deb 100644 --- a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx +++ b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx @@ -42,6 +42,7 @@ export const DeleteDialog: FC> = ({

{t("deleteDialog.confirm", { entity })}

> = ({ onChange={handleChange} label={t("deleteDialog.confirmLabel", { entity })} error={hasError} - helperText={hasError && t("deleteDialog.incorrectName", { entity })} - /> + helperText={hasError && t("deleteDialog.incorrectName", { entity })} /> ) diff --git a/site/src/components/ParameterInput/ParameterInput.tsx b/site/src/components/ParameterInput/ParameterInput.tsx index 672242d1ae105..7b10070bfe67a 100644 --- a/site/src/components/ParameterInput/ParameterInput.tsx +++ b/site/src/components/ParameterInput/ParameterInput.tsx @@ -70,6 +70,7 @@ const ParameterField: React.FC = ({ if (schema.validation_contains && schema.validation_contains.length > 0) { return ( = ({ onChange(event.target.value) }} select - fullWidth - > + fullWidth> {schema.validation_contains.map((item) => ( {item} ))} - ) + ); } if (isBoolean(schema)) { @@ -120,6 +120,7 @@ const ParameterField: React.FC = ({ // we should break this out into more finely scoped input fields. return ( = ({ defaultValue={defaultValue ?? schema.default_source_value} onChange={(event) => { onChange(event.target.value) - }} - /> - ) + }} /> + ); } const useStyles = makeStyles((theme) => ({ diff --git a/site/src/components/PortForwardButton/PortForwardButton.tsx b/site/src/components/PortForwardButton/PortForwardButton.tsx index 8f381becfbc37..ffc9836da0063 100644 --- a/site/src/components/PortForwardButton/PortForwardButton.tsx +++ b/site/src/components/PortForwardButton/PortForwardButton.tsx @@ -59,82 +59,80 @@ const TooltipView: React.FC = (props) => { }) const ports = state.context.listeningPorts?.ports - return ( - <> - - Access ports running on the agent with the{" "} - port, agent name, workspace name and{" "} - your username URL schema, as shown below. Port URLs are - only accessible by you. - - - + return <> + + Access ports running on the agent with the{" "} + port, agent name, workspace name and{" "} + your username URL schema, as shown below. Port URLs are + only accessible by you. + + + + + + Use the form to open applications in a new tab. + + + + { + setPort(e.currentTarget.value) + }} /> + + + + + 0)}> - Use the form to open applications in a new tab. + {ports && + ports.map((p, i) => { + const url = portForwardURL( + host, + p.port, + agentName, + workspaceName, + username, + ) + let label = `${p.port}` + if (p.process_name) { + label = `${p.process_name} - ${p.port}` + } + + return ( + + {i > 0 && ·} + + {label} + + + ) + })} - - - { - setPort(e.currentTarget.value) - }} - /> - - - - - - 0)}> - - {ports && - ports.map((p, i) => { - const url = portForwardURL( - host, - p.port, - agentName, - workspaceName, - username, - ) - let label = `${p.port}` - if (p.process_name) { - label = `${p.process_name} - ${p.port}` - } - - return ( - - {i > 0 && ·} - - {label} - - - ) - })} - - - - - - Learn more about web port forwarding - - - - ) + + + + + Learn more about web port forwarding + + + ; } export const PortForwardButton: React.FC = (props) => { diff --git a/site/src/components/RichParameterInput/RichParameterInput.tsx b/site/src/components/RichParameterInput/RichParameterInput.tsx index 375f3681b95bf..68d0144bb7d0a 100644 --- a/site/src/components/RichParameterInput/RichParameterInput.tsx +++ b/site/src/components/RichParameterInput/RichParameterInput.tsx @@ -191,6 +191,7 @@ const RichParameterField: React.FC = ({ // we should break this out into more finely scoped input fields. return ( = ({ onChange={(event) => { setParameterValue(event.target.value) onChange(event.target.value) - }} - /> - ) + }} /> + ); } const optionIconSize = 20 diff --git a/site/src/components/TemplateVersionEditor/FileDialog.tsx b/site/src/components/TemplateVersionEditor/FileDialog.tsx index c398a1360e98b..a9158e2c0332c 100644 --- a/site/src/components/TemplateVersionEditor/FileDialog.tsx +++ b/site/src/components/TemplateVersionEditor/FileDialog.tsx @@ -65,6 +65,7 @@ export const CreateFileDialog: FC<{ slashes too. { if (event.key === "Enter") { @@ -82,12 +83,11 @@ export const CreateFileDialog: FC<{ label="File Path" InputLabelProps={{ shrink: true, - }} - /> + }} /> } /> - ) + ); } export const DeleteFileDialog: FC<{ @@ -179,6 +179,7 @@ export const RenameFileDialog: FC<{ contain slashes too!

{ if (event.key === "Enter") { @@ -193,10 +194,9 @@ export const RenameFileDialog: FC<{ placeholder={filename} value={pathValue} onChange={handleChange} - label="File Path" - /> + label="File Path" /> } /> - ) + ); } diff --git a/site/src/components/TemplateVersionEditor/PublishTemplateVersionDialog.tsx b/site/src/components/TemplateVersionEditor/PublishTemplateVersionDialog.tsx index 05a2f8c3d9a66..67514d95918d4 100644 --- a/site/src/components/TemplateVersionEditor/PublishTemplateVersionDialog.tsx +++ b/site/src/components/TemplateVersionEditor/PublishTemplateVersionDialog.tsx @@ -64,14 +64,14 @@ export const PublishTemplateVersionDialog: FC<

You are about to publish a new version of this template.

+ }} /> } /> - ) + ); } diff --git a/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx b/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx index a84f385535d14..c74bfe071f788 100644 --- a/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx +++ b/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx @@ -299,6 +299,7 @@ export const WorkspaceScheduleForm: FC< /> + fullWidth /> + fullWidth> {zones.map((zone) => ( {zone} @@ -326,7 +326,10 @@ export const WorkspaceScheduleForm: FC< - + {Language.daysOfWeekLabel} @@ -375,18 +378,18 @@ export const WorkspaceScheduleForm: FC< label={Language.stopSwitch} /> + fullWidth /> - ) + ); } export const ttlShutdownAt = (formTTL: number): string => { diff --git a/site/src/components/WorkspaceStats/WorkspaceStats.tsx b/site/src/components/WorkspaceStats/WorkspaceStats.tsx index 49a28f555e45c..081234c6b0e99 100644 --- a/site/src/components/WorkspaceStats/WorkspaceStats.tsx +++ b/site/src/components/WorkspaceStats/WorkspaceStats.tsx @@ -66,226 +66,224 @@ export const WorkspaceStats: FC = ({ const [isAddingTime, setIsAddingTime] = useState(false) const [isSubTime, setIsSubTime] = useState(false) - return ( - <> - - } - /> - + + } + /> + + {displayTemplateName} + + } + /> + - {displayTemplateName} + {workspace.latest_build.template_version_name} - } - /> + + {workspace.outdated && ( + + )} + + } + /> + + {upperFirst(createDayString(workspace.latest_build.created_at))}{" "} + by {initiatedBy} + + } + /> + {shouldDisplayScheduleLabel(workspace) && ( + - {workspace.latest_build.template_version_name} + {isWorkspaceOn(workspace) + ? autostopDisplay(workspace) + : autostartDisplay(workspace.autostart_schedule)} - - {workspace.outdated && ( - + {canUpdateWorkspace && canEditDeadline(workspace) && ( + + setIsSubTime(true)} + > + + + setIsAddingTime(true)} + > + + + )} - + } /> + )} + {workspace.latest_build.daily_cost > 0 && ( - {upperFirst(createDayString(workspace.latest_build.created_at))}{" "} - by {initiatedBy} - - } + label={Language.costLabel} + value={`${workspace.latest_build.daily_cost} ${ + quota_budget ? `/ ${quota_budget}` : "" + }`} /> - {shouldDisplayScheduleLabel(workspace) && ( - - - {isWorkspaceOn(workspace) - ? autostopDisplay(workspace) - : autostartDisplay(workspace.autostart_schedule)} - - {canUpdateWorkspace && canEditDeadline(workspace) && ( - - setIsSubTime(true)} - > - - - setIsAddingTime(true)} - > - - - - )} - - } - /> - )} - {workspace.latest_build.daily_cost > 0 && ( - - )} - + )} + - setIsAddingTime(false)} - anchorOrigin={{ - vertical: "bottom", - horizontal: "right", - }} - transformOrigin={{ - vertical: "top", - horizontal: "right", + setIsAddingTime(false)} + anchorOrigin={{ + vertical: "bottom", + horizontal: "right", + }} + transformOrigin={{ + vertical: "top", + horizontal: "right", + }} + > + Add hours to deadline + + Delay the shutdown of this workspace for a few more hours. This is + only applied once. + +
{ + e.preventDefault() + const formData = new FormData(e.currentTarget) + const hours = Number(formData.get("hours")) + onDeadlinePlus(hours) + setIsAddingTime(false) }} > - Add hours to deadline - - Delay the shutdown of this workspace for a few more hours. This is - only applied once. - - { - e.preventDefault() - const formData = new FormData(e.currentTarget) - const hours = Number(formData.get("hours")) - onDeadlinePlus(hours) - setIsAddingTime(false) - }} - > - + - - -
+ + + - setIsSubTime(false)} - anchorOrigin={{ - vertical: "bottom", - horizontal: "right", - }} - transformOrigin={{ - vertical: "top", - horizontal: "right", + setIsSubTime(false)} + anchorOrigin={{ + vertical: "bottom", + horizontal: "right", + }} + transformOrigin={{ + vertical: "top", + horizontal: "right", + }} + > + + Subtract hours to deadline + + + Anticipate the shutdown of this workspace for a few more hours. This + is only applied once. + +
{ + e.preventDefault() + const formData = new FormData(e.currentTarget) + const hours = Number(formData.get("hours")) + onDeadlineMinus(hours) + setIsSubTime(false) }} > - - Subtract hours to deadline - - - Anticipate the shutdown of this workspace for a few more hours. This - is only applied once. - - { - e.preventDefault() - const formData = new FormData(e.currentTarget) - const hours = Number(formData.get("hours")) - onDeadlineMinus(hours) - setIsSubTime(false) - }} - > - + - - -
- - ) + + + + ; } export const canEditDeadline = (workspace: Workspace): boolean => { diff --git a/site/src/pages/CreateTemplatePage/VariableInput.tsx b/site/src/pages/CreateTemplatePage/VariableInput.tsx index aae15a83e931e..d20b5b4a950e3 100644 --- a/site/src/pages/CreateTemplatePage/VariableInput.tsx +++ b/site/src/pages/CreateTemplatePage/VariableInput.tsx @@ -90,6 +90,7 @@ const VariableField: React.FC = ({ return ( = ({ : variable.sensitive ? "password" : "string" - } - /> - ) + } /> + ); } const useStyles = makeStyles((theme) => ({ diff --git a/site/src/pages/CreateTokenPage/CreateTokenForm.tsx b/site/src/pages/CreateTokenPage/CreateTokenForm.tsx index 6a0ae84df5775..343cb26f3a725 100644 --- a/site/src/pages/CreateTokenPage/CreateTokenForm.tsx +++ b/site/src/pages/CreateTokenPage/CreateTokenForm.tsx @@ -95,6 +95,7 @@ export const CreateTokenForm: FC = ({ = ({ fullWidth InputLabelProps={{ shrink: true, - }} - > + }}> {filterByMaxTokenLifetime(maxTokenLifetime).map((lt) => ( {lt.label} @@ -122,6 +122,7 @@ export const CreateTokenForm: FC = ({ {lifetimeDays === "custom" && ( = ({ InputLabelProps={{ shrink: true, required: true, - }} - /> + }} /> )} @@ -160,7 +160,7 @@ export const CreateTokenForm: FC = ({ } /> - ) + ); } const useStyles = makeStyles(() => ({ diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx index 42d337345ba07..b860a3ca9da18 100644 --- a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx +++ b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx @@ -68,170 +68,168 @@ export const AppearanceSettingsPageView = ({ const [backgroundColor, setBackgroundColor] = useState( serviceBannerForm.values.background_color, ) - return ( - <> -
+ return <> +
- - {isEntitled ? : } - - + + {isEntitled ? : } + + -
Submit} - > -

- Specify a custom URL for your logo to be displayed in the top left - corner of the dashboard. -

- - (e.currentTarget.style.display = "none")} - onLoad={(e) => (e.currentTarget.style.display = "inline")} - /> - - ), - }} - /> -
+
Submit} + > +

+ Specify a custom URL for your logo to be displayed in the top left + corner of the dashboard. +

+ + (e.currentTarget.style.display = "none")} + onLoad={(e) => (e.currentTarget.style.display = "inline")} + /> + + ), + }} /> +
-
{ - updateAppearance( - { - service_banner: { - message: - "👋 **This** is a service banner. The banner's color and text are editable.", - background_color: "#004852", - enabled: true, - }, +
{ + updateAppearance( + { + service_banner: { + message: + "👋 **This** is a service banner. The banner's color and text are editable.", + background_color: "#004852", + enabled: true, }, - true, - ) - }} - > - {t("showPreviewLabel")} - - ) - } - validation={ - !isEntitled && ( -

- Your license does not include Service Banners.{" "} - Contact sales to learn more. -

- ) - } - > -

Configure a banner that displays a message to all users.

- - {isEntitled && ( - - { - const newState = !serviceBannerForm.values.enabled - const newBanner = { - ...serviceBannerForm.values, - enabled: newState, - } - updateAppearance( - { - service_banner: newBanner, - }, - false, - ) - await serviceBannerForm.setFieldValue("enabled", newState) - }} - /> - } - label="Enabled" - /> - - - {t("messageHelperText")} - + }, + true, + ) + }} + > + {t("showPreviewLabel")} + + ) + } + validation={ + !isEntitled && ( +

+ Your license does not include Service Banners.{" "} + Contact sales to learn more. +

+ ) + } + > +

Configure a banner that displays a message to all users.

- -

{"Background Color"}

- { - setBackgroundColor(color.hex) - await serviceBannerForm.setFieldValue( - "background_color", - color.hex, - ) + {isEntitled && ( + + { + const newState = !serviceBannerForm.values.enabled + const newBanner = { + ...serviceBannerForm.values, + enabled: newState, + } updateAppearance( { - service_banner: { - ...serviceBannerForm.values, - background_color: color.hex, - }, + service_banner: newBanner, }, - true, + false, ) + await serviceBannerForm.setFieldValue("enabled", newState) }} - triangle="hide" - colors={["#004852", "#D65D0F", "#4CD473", "#D94A5D", "#5A00CF"]} - styles={{ - default: { - input: { - color: "white", - backgroundColor: theme.palette.background.default, - }, - body: { - backgroundColor: "black", - color: "white", - }, - card: { - backgroundColor: "black", + /> + } + label="Enabled" + /> + + + {t("messageHelperText")} + + + +

{"Background Color"}

+ { + setBackgroundColor(color.hex) + await serviceBannerForm.setFieldValue( + "background_color", + color.hex, + ) + updateAppearance( + { + service_banner: { + ...serviceBannerForm.values, + background_color: color.hex, }, }, - }} - /> - + true, + ) + }} + triangle="hide" + colors={["#004852", "#D65D0F", "#4CD473", "#D94A5D", "#5A00CF"]} + styles={{ + default: { + input: { + color: "white", + backgroundColor: theme.palette.background.default, + }, + body: { + backgroundColor: "black", + color: "white", + }, + card: { + backgroundColor: "black", + }, + }, + }} + /> - )} -
- - ) + + )} +
+ ; } const useStyles = makeStyles((theme) => ({ diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx index a69ff383f5e21..b3eafdff4cc5d 100644 --- a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx +++ b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx @@ -46,70 +46,68 @@ export const AddNewLicensePageView: FC = ({ handleFileUploaded([file]) } - return ( - <> - -
- - - - {savingLicenseError && ( - - )} - - + +
- - - or - -
{ - e.preventDefault() - - const form = e.target - const formData = new FormData(form as HTMLFormElement) - - const licenseKey = formData.get("licenseKey") - - onSaveLicenseKey(licenseKey?.toString() || "") - }} - button={ - - } - > - -
- - - ) + + + + {savingLicenseError && ( + + )} + + + + + or + +
{ + e.preventDefault() + + const form = e.target + const formData = new FormData(form as HTMLFormElement) + + const licenseKey = formData.get("licenseKey") + + onSaveLicenseKey(licenseKey?.toString() || "") + }} + button={ + + } + > + +
+ + ; } const useStyles = makeStyles((theme) => ({ From d0b064a8b89c36989f03a855765fbf08285f5a42 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 5 May 2023 18:21:27 +0000 Subject: [PATCH 04/32] Migrate theme options --- site/.eslintrc.yaml | 7 +- site/mui.d.ts | 11 + site/src/app.tsx | 4 +- site/src/components/AppLink/AppLink.tsx | 2 +- .../components/AppLink/AppLinkSkeleton.tsx | 6 +- .../src/components/AppLink/AppPreviewLink.tsx | 2 +- .../AuditLogRow/AuditLogDiff/AuditLogDiff.tsx | 2 +- .../components/AuditLogRow/AuditLogRow.tsx | 2 +- site/src/components/Avatar/Avatar.tsx | 2 +- site/src/components/AvatarData/AvatarData.tsx | 2 +- .../components/BorderedMenu/BorderedMenu.tsx | 2 +- .../BorderedMenuRow/BorderedMenuRow.tsx | 2 +- site/src/components/BuildsTable/BuildRow.tsx | 2 +- site/src/components/CodeBlock/CodeBlock.tsx | 2 +- site/src/components/CopyButton/CopyButton.tsx | 2 +- .../CopyableValue/CopyableValue.tsx | 2 +- .../components/Dashboard/DashboardLayout.tsx | 2 +- .../DeploySettingsLayout/Badges.tsx | 2 +- .../DeploySettingsLayout.tsx | 2 +- .../DeploySettingsLayout/Fieldset.tsx | 2 +- .../DeploySettingsLayout/Header.tsx | 2 +- .../DeploySettingsLayout/Option.tsx | 2 +- .../DeploySettingsLayout/OptionsTable.tsx | 2 +- .../DeploySettingsLayout/Sidebar.tsx | 2 +- .../DeploymentBanner/DeploymentBannerView.tsx | 6 +- .../Dialogs/ConfirmDialog/ConfirmDialog.tsx | 2 +- .../ResetPasswordDialog.tsx | 2 +- .../EditRolesButton/EditRolesButton.tsx | 2 +- site/src/components/EmptyState/EmptyState.tsx | 2 +- .../EnterpriseSnackbar/EnterpriseSnackbar.tsx | 10 +- site/src/components/FileUpload/FileUpload.tsx | 2 +- site/src/components/Form/Form.tsx | 12 +- .../FormCloseButton/FormCloseButton.tsx | 4 +- site/src/components/FormFooter/FormFooter.tsx | 2 +- .../components/FullPageForm/FullPageForm.tsx | 2 +- .../GlobalSnackbar/GlobalSnackbar.tsx | 2 +- site/src/components/IconField/IconField.tsx | 4 +- .../LicenseBanner/LicenseBannerView.tsx | 2 +- .../components/LicenseCard/LicenseCard.tsx | 2 +- .../components/Loader/FullScreenLoader.tsx | 2 +- .../LoadingButton/LoadingButton.tsx | 2 +- site/src/components/Margins/Margins.tsx | 2 +- site/src/components/Markdown/Markdown.tsx | 4 +- .../MultiTextField/MultiTextField.tsx | 2 +- site/src/components/NavbarView/NavbarView.tsx | 7 +- .../PageHeader/FullWidthPageHeader.tsx | 8 +- site/src/components/PageHeader/PageHeader.tsx | 6 +- .../PaginationWidget/PageButton.tsx | 2 +- .../ParameterInput/ParameterInput.tsx | 12 +- .../PasswordField/PasswordField.tsx | 2 +- site/src/components/Paywall/Paywall.tsx | 2 +- .../PortForwardButton/PortForwardButton.tsx | 147 +++--- site/src/components/Resources/AgentButton.tsx | 2 +- .../components/Resources/AgentRowPreview.tsx | 6 +- site/src/components/Resources/AgentStatus.tsx | 2 +- .../src/components/Resources/AgentVersion.tsx | 2 +- .../src/components/Resources/ResourceCard.tsx | 7 +- site/src/components/Resources/Resources.tsx | 2 +- .../components/Resources/SensitiveValue.tsx | 2 +- .../RichParameterInput/RichParameterInput.tsx | 7 +- .../RuntimeErrorState/RuntimeErrorReport.tsx | 2 +- .../RuntimeErrorState/RuntimeErrorState.tsx | 2 +- .../RuntimeErrorState/createCtas.tsx | 2 +- site/src/components/SSHButton/SSHButton.tsx | 6 +- .../SearchBarWithFilter.tsx | 2 +- site/src/components/Section/Section.tsx | 4 +- .../SectionAction/SectionAction.tsx | 2 +- .../ServiceBanner/ServiceBannerView.tsx | 2 +- .../src/components/SettingsLayout/Section.tsx | 2 +- .../SettingsLayout/SettingsLayout.tsx | 2 +- .../src/components/SettingsLayout/Sidebar.tsx | 2 +- .../components/SignInForm/OAuthSignInForm.tsx | 4 +- site/src/components/SignInForm/SignInForm.tsx | 2 +- .../components/SignInLayout/SignInLayout.tsx | 2 +- site/src/components/Stack/Stack.tsx | 4 +- site/src/components/Stats/Stats.tsx | 6 +- .../SyntaxHighlighter/SyntaxHighlighter.tsx | 2 +- site/src/components/TabPanel/TabPanel.tsx | 10 +- site/src/components/TabSidebar/TabSidebar.tsx | 6 +- .../TableCellLink/TableCellLink.tsx | 2 +- site/src/components/TableEmpty/TableEmpty.tsx | 2 +- .../components/TableLoader/TableLoader.tsx | 4 +- .../TemplateExampleCard.tsx | 2 +- .../TemplateFiles/TemplateFiles.tsx | 2 +- .../TemplateLayout/TemplateLayout.tsx | 2 +- .../TemplateVersionEditor/FileTreeView.tsx | 2 +- .../MissingTemplateVariablesDialog.tsx | 2 +- .../components/Timeline/TimelineDateRow.tsx | 2 +- .../src/components/Timeline/TimelineEntry.tsx | 2 +- .../Tooltips/AgentOutdatedTooltip.tsx | 2 +- .../Tooltips/HelpTooltip/HelpTooltip.tsx | 2 +- .../Tooltips/OutdatedHelpTooltip.tsx | 2 +- site/src/components/Typography/Typography.tsx | 2 +- .../UserAutocomplete/UserAutocomplete.tsx | 6 +- site/src/components/UserCell/UserCell.tsx | 2 +- .../components/UserDropdown/UsersDropdown.tsx | 2 +- .../UserDropdownContent.tsx | 2 +- .../UserOrGroupAutocomplete.tsx | 6 +- .../components/UsersLayout/UsersLayout.tsx | 2 +- .../components/UsersTable/UsersTableBody.tsx | 2 +- .../components/VersionsTable/VersionRow.tsx | 2 +- site/src/components/Welcome/Welcome.tsx | 2 +- site/src/components/Workspace/Workspace.tsx | 6 +- .../WorkspaceActions/WorkspaceActions.tsx | 2 +- .../WorkspaceSchedule/WorkspaceSchedule.tsx | 2 +- .../WorkspaceSection/WorkspaceSection.tsx | 2 +- .../WorkspaceStats/WorkspaceStats.tsx | 394 +++++++------- .../WorkspaceStatusBadge.tsx | 2 +- .../WorkspacesTable/WorkspacesRow.tsx | 2 +- .../WorkspacesTable/WorkspacesTableBody.tsx | 2 +- site/src/hooks/useClickableTableRow.ts | 2 +- site/src/pages/404Page/404Page.tsx | 2 +- .../src/pages/CliAuthPage/CliAuthPageView.tsx | 2 +- .../CreateTemplatePage/CreateTemplateForm.tsx | 2 +- .../CreateTemplatePage/VariableInput.tsx | 7 +- .../pages/CreateTokenPage/CreateTokenPage.tsx | 2 +- .../CreateWorkspacePageView.tsx | 2 +- .../CreateWorkspacePage/SelectedTemplate.tsx | 2 +- .../GitAuthSettingsPageView.tsx | 2 +- .../AddNewLicensePageView.tsx | 127 ++--- .../LicensesSettingsPage/DividerWithText.tsx | 2 +- site/src/pages/GitAuthPage/GitAuthPage.tsx | 2 +- site/src/pages/GroupsPage/GroupPage.tsx | 2 +- site/src/pages/GroupsPage/GroupsPageView.tsx | 4 +- site/src/pages/LoginPage/LoginPageView.tsx | 2 +- site/src/pages/SetupPage/SetupPageView.tsx | 2 +- .../StarterTemplatePageView.tsx | 2 +- .../StarterTemplatesPageView.tsx | 2 +- .../TemplateDocsPage/TemplateDocsPage.tsx | 2 +- .../TemplateSummaryPageView.tsx | 2 +- .../pages/TemplateSettingsPage/Sidebar.tsx | 2 +- .../TemplateSettingsForm.tsx | 2 +- .../TemplateSettingsPageView.tsx | 2 +- .../TemplatePermissionsPageView.tsx | 2 +- .../TemplateScheduleForm.tsx | 2 +- .../TemplateSchedulePageView.tsx | 2 +- .../TemplateSettingsLayout.tsx | 2 +- .../TemplateVariablesPageView.tsx | 2 +- .../pages/TemplatesPage/EmptyTemplates.tsx | 2 +- .../pages/TemplatesPage/TemplatesPageView.tsx | 2 +- site/src/pages/TerminalPage/TerminalPage.tsx | 2 +- .../SSHKeysPage/SSHKeysPageView.tsx | 2 +- .../WorkspaceProxyPage/WorkspaceProxyRow.tsx | 2 +- .../WorkspaceBuildStateError.tsx | 2 +- .../UpdateBuildParametersDialog.tsx | 2 +- .../src/pages/WorkspacePage/WorkspacePage.tsx | 2 +- .../pages/WorkspaceSettingsPage/Sidebar.tsx | 2 +- .../WorkspaceParametersPage.tsx | 2 +- .../WorkspaceSchedulePage.tsx | 2 +- .../WorkspaceSettingsLayout.tsx | 2 +- .../WorkspaceSettingsPageView.tsx | 2 +- site/src/theme/overrides.ts | 265 ---------- site/src/theme/palettes.ts | 65 --- site/src/theme/props.ts | 44 -- site/src/theme/theme.ts | 486 ++++++++++++++++-- site/src/theme/typography.ts | 72 --- 156 files changed, 1017 insertions(+), 1013 deletions(-) create mode 100644 site/mui.d.ts delete mode 100644 site/src/theme/overrides.ts delete mode 100644 site/src/theme/palettes.ts delete mode 100644 site/src/theme/props.ts delete mode 100644 site/src/theme/typography.ts diff --git a/site/.eslintrc.yaml b/site/.eslintrc.yaml index 66b02ebc6bda2..195db1bd7d5e6 100644 --- a/site/.eslintrc.yaml +++ b/site/.eslintrc.yaml @@ -86,6 +86,9 @@ rules: - argsIgnorePattern: "^_" varsIgnorePattern: "^_" ignoreRestSiblings: true + "@typescript-eslint/no-empty-interface": + - error + - allowSingleExtends: true "brace-style": "off" "curly": ["error", "all"] "eslint-comments/require-description": "error" @@ -121,10 +124,6 @@ rules: message: "Use path imports to avoid pulling in unused modules. See: https://material-ui.com/guides/minimizing-bundle-size/" - - name: "@mui/styles" - message: - "Use path imports to avoid pulling in unused modules. See: - https://material-ui.com/guides/minimizing-bundle-size/" - name: "@mui/material/Avatar" message: "You should use the Avatar component provided on diff --git a/site/mui.d.ts b/site/mui.d.ts new file mode 100644 index 0000000000000..8dc71ec527fd3 --- /dev/null +++ b/site/mui.d.ts @@ -0,0 +1,11 @@ +import { Theme } from "@mui/material/styles" + +declare module "@mui/material/styles" { + interface TypeBackground { + paperLight: string + } +} + +declare module "@mui/styles/defaultTheme" { + interface DefaultTheme extends Theme {} +} diff --git a/site/src/app.tsx b/site/src/app.tsx index ba0913d0f4f17..02e6a06fa22da 100644 --- a/site/src/app.tsx +++ b/site/src/app.tsx @@ -1,5 +1,4 @@ import CssBaseline from "@mui/material/CssBaseline" -import ThemeProvider from "@mui/styles/ThemeProvider" import { QueryClient, QueryClientProvider } from "@tanstack/react-query" import { AuthProvider } from "components/AuthProvider/AuthProvider" import { FC, PropsWithChildren } from "react" @@ -9,6 +8,7 @@ import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary" import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar" import { dark } from "./theme" import "./theme/globalFonts" +import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles" const queryClient = new QueryClient({ defaultOptions: { @@ -38,7 +38,7 @@ export const AppProviders: FC = ({ children }) => { - ); + ) } export const App: FC = () => { diff --git a/site/src/components/AppLink/AppLink.tsx b/site/src/components/AppLink/AppLink.tsx index 23288120efb2b..5e3dee464298d 100644 --- a/site/src/components/AppLink/AppLink.tsx +++ b/site/src/components/AppLink/AppLink.tsx @@ -1,6 +1,6 @@ import CircularProgress from "@mui/material/CircularProgress" import Link from "@mui/material/Link" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import Tooltip from "@mui/material/Tooltip" import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline" import { PrimaryAgentButton } from "components/Resources/AgentButton" diff --git a/site/src/components/AppLink/AppLinkSkeleton.tsx b/site/src/components/AppLink/AppLinkSkeleton.tsx index 3e24ebe0bcbc9..52aa5a275a549 100644 --- a/site/src/components/AppLink/AppLinkSkeleton.tsx +++ b/site/src/components/AppLink/AppLinkSkeleton.tsx @@ -1,5 +1,5 @@ -import { makeStyles } from "@mui/material/styles" -import { Skeleton } from '@mui/material'; +import { makeStyles } from "@mui/styles" +import { Skeleton } from "@mui/material" import { FC } from "react" import { borderRadiusSm } from "theme/constants" @@ -12,7 +12,7 @@ export const AppLinkSkeleton: FC<{ width: number }> = ({ width }) => { variant="rectangular" className={styles.skeleton} /> - ); + ) } const useStyles = makeStyles(() => ({ diff --git a/site/src/components/AppLink/AppPreviewLink.tsx b/site/src/components/AppLink/AppPreviewLink.tsx index 910b678bccf53..748f67130aa3d 100644 --- a/site/src/components/AppLink/AppPreviewLink.tsx +++ b/site/src/components/AppLink/AppPreviewLink.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { Stack } from "components/Stack/Stack" import { FC } from "react" import * as TypesGen from "api/typesGenerated" diff --git a/site/src/components/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx b/site/src/components/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx index 885340d00cfd0..4ebeffcaf9bf6 100644 --- a/site/src/components/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx +++ b/site/src/components/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { AuditLog } from "api/typesGenerated" import { colors } from "theme/colors" import { MONOSPACE_FONT_FAMILY } from "theme/constants" diff --git a/site/src/components/AuditLogRow/AuditLogRow.tsx b/site/src/components/AuditLogRow/AuditLogRow.tsx index 89ed3dd86d866..3e7a5f2bec0a3 100644 --- a/site/src/components/AuditLogRow/AuditLogRow.tsx +++ b/site/src/components/AuditLogRow/AuditLogRow.tsx @@ -1,5 +1,5 @@ import Collapse from "@mui/material/Collapse" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import TableCell from "@mui/material/TableCell" import { AuditLog } from "api/typesGenerated" import { diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx index b8ce684e61bdc..20eb1f1ab2203 100644 --- a/site/src/components/Avatar/Avatar.tsx +++ b/site/src/components/Avatar/Avatar.tsx @@ -1,7 +1,7 @@ // This is the only place MuiAvatar can be used // eslint-disable-next-line no-restricted-imports -- Read above import MuiAvatar, { AvatarProps as MuiAvatarProps } from "@mui/material/Avatar" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { FC } from "react" import { combineClasses } from "utils/combineClasses" import { firstLetter } from "./firstLetter" diff --git a/site/src/components/AvatarData/AvatarData.tsx b/site/src/components/AvatarData/AvatarData.tsx index 802b7da50e007..11eaa4fcd3507 100644 --- a/site/src/components/AvatarData/AvatarData.tsx +++ b/site/src/components/AvatarData/AvatarData.tsx @@ -1,7 +1,7 @@ import { Avatar } from "components/Avatar/Avatar" import { FC, PropsWithChildren } from "react" import { Stack } from "components/Stack/Stack" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" export interface AvatarDataProps { title: string | JSX.Element diff --git a/site/src/components/BorderedMenu/BorderedMenu.tsx b/site/src/components/BorderedMenu/BorderedMenu.tsx index 258ca48da71d9..9190845107fbd 100644 --- a/site/src/components/BorderedMenu/BorderedMenu.tsx +++ b/site/src/components/BorderedMenu/BorderedMenu.tsx @@ -1,5 +1,5 @@ import Popover, { PopoverProps } from "@mui/material/Popover" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { FC, PropsWithChildren } from "react" type BorderedMenuVariant = "user-dropdown" diff --git a/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx b/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx index 6e71396a8f971..d033909ffde44 100644 --- a/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx +++ b/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx @@ -1,5 +1,5 @@ import ListItem from "@mui/material/ListItem" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import SvgIcon from "@mui/material/SvgIcon" import CheckIcon from "@mui/icons-material/Check" import { FC } from "react" diff --git a/site/src/components/BuildsTable/BuildRow.tsx b/site/src/components/BuildsTable/BuildRow.tsx index e00d416591ebc..8cf0a1122c8ce 100644 --- a/site/src/components/BuildsTable/BuildRow.tsx +++ b/site/src/components/BuildsTable/BuildRow.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import TableCell from "@mui/material/TableCell" import { WorkspaceBuild } from "api/typesGenerated" import { Stack } from "components/Stack/Stack" diff --git a/site/src/components/CodeBlock/CodeBlock.tsx b/site/src/components/CodeBlock/CodeBlock.tsx index c66520c8a98ae..e7af0b9d3226b 100644 --- a/site/src/components/CodeBlock/CodeBlock.tsx +++ b/site/src/components/CodeBlock/CodeBlock.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { FC, Fragment, ReactElement } from "react" import { MONOSPACE_FONT_FAMILY } from "../../theme/constants" import { combineClasses } from "../../utils/combineClasses" diff --git a/site/src/components/CopyButton/CopyButton.tsx b/site/src/components/CopyButton/CopyButton.tsx index e5c4853474d08..2e3c13207fa6d 100644 --- a/site/src/components/CopyButton/CopyButton.tsx +++ b/site/src/components/CopyButton/CopyButton.tsx @@ -1,5 +1,5 @@ import IconButton from "@mui/material/Button" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import Tooltip from "@mui/material/Tooltip" import Check from "@mui/icons-material/Check" import { useClipboard } from "hooks/useClipboard" diff --git a/site/src/components/CopyableValue/CopyableValue.tsx b/site/src/components/CopyableValue/CopyableValue.tsx index ea3741a68406b..8f3b279d1ff29 100644 --- a/site/src/components/CopyableValue/CopyableValue.tsx +++ b/site/src/components/CopyableValue/CopyableValue.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import Tooltip from "@mui/material/Tooltip" import { useClickable } from "hooks/useClickable" import { useClipboard } from "hooks/useClipboard" diff --git a/site/src/components/Dashboard/DashboardLayout.tsx b/site/src/components/Dashboard/DashboardLayout.tsx index 92e47786c5e88..3835ef5935e62 100644 --- a/site/src/components/Dashboard/DashboardLayout.tsx +++ b/site/src/components/Dashboard/DashboardLayout.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { useMachine } from "@xstate/react" import { UpdateCheckResponse } from "api/typesGenerated" import { DeploymentBanner } from "components/DeploymentBanner/DeploymentBanner" diff --git a/site/src/components/DeploySettingsLayout/Badges.tsx b/site/src/components/DeploySettingsLayout/Badges.tsx index f371c738d75cb..8a3173f1f45b9 100644 --- a/site/src/components/DeploySettingsLayout/Badges.tsx +++ b/site/src/components/DeploySettingsLayout/Badges.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { Stack } from "components/Stack/Stack" import { PropsWithChildren, FC } from "react" import { MONOSPACE_FONT_FAMILY } from "theme/constants" diff --git a/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx b/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx index 7c512e6a3902e..d0c15de104390 100644 --- a/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx +++ b/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { Margins } from "components/Margins/Margins" import { Stack } from "components/Stack/Stack" import { Sidebar } from "./Sidebar" diff --git a/site/src/components/DeploySettingsLayout/Fieldset.tsx b/site/src/components/DeploySettingsLayout/Fieldset.tsx index 193a59d19b786..2be022c6f625a 100644 --- a/site/src/components/DeploySettingsLayout/Fieldset.tsx +++ b/site/src/components/DeploySettingsLayout/Fieldset.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { FC, ReactNode, FormEventHandler } from "react" import Button from "@mui/material/Button" diff --git a/site/src/components/DeploySettingsLayout/Header.tsx b/site/src/components/DeploySettingsLayout/Header.tsx index 8eb45bd8dac9c..23ed2591318db 100644 --- a/site/src/components/DeploySettingsLayout/Header.tsx +++ b/site/src/components/DeploySettingsLayout/Header.tsx @@ -1,5 +1,5 @@ import Button from "@mui/material/Button" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import LaunchOutlined from "@mui/icons-material/LaunchOutlined" import { Stack } from "components/Stack/Stack" import { FC } from "react" diff --git a/site/src/components/DeploySettingsLayout/Option.tsx b/site/src/components/DeploySettingsLayout/Option.tsx index c2ccabf0d2219..f4d5b10c0ee6c 100644 --- a/site/src/components/DeploySettingsLayout/Option.tsx +++ b/site/src/components/DeploySettingsLayout/Option.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { PropsWithChildren, FC, ReactNode } from "react" import { MONOSPACE_FONT_FAMILY } from "theme/constants" import { DisabledBadge, EnabledBadge } from "./Badges" diff --git a/site/src/components/DeploySettingsLayout/OptionsTable.tsx b/site/src/components/DeploySettingsLayout/OptionsTable.tsx index b510c114d5f72..75d165dd46429 100644 --- a/site/src/components/DeploySettingsLayout/OptionsTable.tsx +++ b/site/src/components/DeploySettingsLayout/OptionsTable.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import Table from "@mui/material/Table" import TableBody from "@mui/material/TableBody" import TableCell from "@mui/material/TableCell" diff --git a/site/src/components/DeploySettingsLayout/Sidebar.tsx b/site/src/components/DeploySettingsLayout/Sidebar.tsx index 4c124c15ea8df..e7db4e2b5f2c6 100644 --- a/site/src/components/DeploySettingsLayout/Sidebar.tsx +++ b/site/src/components/DeploySettingsLayout/Sidebar.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import Brush from "@mui/icons-material/Brush" import LaunchOutlined from "@mui/icons-material/LaunchOutlined" import ApprovalIcon from "@mui/icons-material/VerifiedUserOutlined" diff --git a/site/src/components/DeploymentBanner/DeploymentBannerView.tsx b/site/src/components/DeploymentBanner/DeploymentBannerView.tsx index 0f76ae7b9a51e..3902f03920178 100644 --- a/site/src/components/DeploymentBanner/DeploymentBannerView.tsx +++ b/site/src/components/DeploymentBanner/DeploymentBannerView.tsx @@ -3,7 +3,7 @@ import { FC, useMemo, useEffect, useState } from "react" import prettyBytes from "pretty-bytes" import { getStatus } from "components/WorkspaceStatusBadge/WorkspaceStatusBadge" import BuildingIcon from "@mui/icons-material/Build" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { RocketIcon } from "components/Icons/RocketIcon" import { MONOSPACE_FONT_FAMILY } from "theme/constants" import Tooltip from "@mui/material/Tooltip" @@ -251,7 +251,7 @@ const useStyles = makeStyles((theme) => ({ height: 16, }, - [theme.breakpoints.down('lg')]: { + [theme.breakpoints.down("lg")]: { display: "none", }, }, @@ -269,7 +269,7 @@ const useStyles = makeStyles((theme) => ({ gap: theme.spacing(4), borderTop: `1px solid ${theme.palette.divider}`, - [theme.breakpoints.down('lg')]: { + [theme.breakpoints.down("lg")]: { flexDirection: "column", gap: theme.spacing(1), alignItems: "left", diff --git a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx index c6eedc1822e09..5d77d34b28906 100644 --- a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx +++ b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx @@ -1,5 +1,5 @@ import DialogActions from "@mui/material/DialogActions" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { ReactNode, FC, PropsWithChildren } from "react" import { Dialog, diff --git a/site/src/components/Dialogs/ResetPasswordDialog/ResetPasswordDialog.tsx b/site/src/components/Dialogs/ResetPasswordDialog/ResetPasswordDialog.tsx index af1846e9ad997..4c813b38137fd 100644 --- a/site/src/components/Dialogs/ResetPasswordDialog/ResetPasswordDialog.tsx +++ b/site/src/components/Dialogs/ResetPasswordDialog/ResetPasswordDialog.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { FC } from "react" import * as TypesGen from "../../../api/typesGenerated" import { CodeExample } from "../../CodeExample/CodeExample" diff --git a/site/src/components/EditRolesButton/EditRolesButton.tsx b/site/src/components/EditRolesButton/EditRolesButton.tsx index be62567355fc1..48dbf498a1c0c 100644 --- a/site/src/components/EditRolesButton/EditRolesButton.tsx +++ b/site/src/components/EditRolesButton/EditRolesButton.tsx @@ -1,7 +1,7 @@ import IconButton from "@mui/material/IconButton" import { EditSquare } from "components/Icons/EditSquare" import { useRef, useState, FC } from "react" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { useTranslation } from "react-i18next" import Popover from "@mui/material/Popover" import { Stack } from "components/Stack/Stack" diff --git a/site/src/components/EmptyState/EmptyState.tsx b/site/src/components/EmptyState/EmptyState.tsx index 0cd29f2d36412..256062340cfe3 100644 --- a/site/src/components/EmptyState/EmptyState.tsx +++ b/site/src/components/EmptyState/EmptyState.tsx @@ -1,5 +1,5 @@ import Box from "@mui/material/Box" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import Typography from "@mui/material/Typography" import { FC, ReactNode } from "react" import { combineClasses } from "../../utils/combineClasses" diff --git a/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx b/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx index 159e46b7b20f3..3708eb4588ff4 100644 --- a/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx +++ b/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx @@ -2,7 +2,7 @@ import IconButton from "@mui/material/IconButton" import Snackbar, { SnackbarProps as MuiSnackbarProps, } from "@mui/material/Snackbar" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import CloseIcon from "@mui/icons-material/Close" import { FC } from "react" import { combineClasses } from "../../utils/combineClasses" @@ -42,7 +42,11 @@ export const EnterpriseSnackbar: FC< action={
{action} - +
@@ -58,7 +62,7 @@ export const EnterpriseSnackbar: FC< }} onClose={onClose} /> - ); + ) } const useStyles = makeStyles((theme) => ({ diff --git a/site/src/components/FileUpload/FileUpload.tsx b/site/src/components/FileUpload/FileUpload.tsx index c5e6bf50ee9fc..16b5263fa9376 100644 --- a/site/src/components/FileUpload/FileUpload.tsx +++ b/site/src/components/FileUpload/FileUpload.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { Stack } from "components/Stack/Stack" import { FC, DragEvent, useRef, ReactNode } from "react" import UploadIcon from "@mui/icons-material/CloudUploadOutlined" diff --git a/site/src/components/Form/Form.tsx b/site/src/components/Form/Form.tsx index 65352eaf903e1..059362fa71832 100644 --- a/site/src/components/Form/Form.tsx +++ b/site/src/components/Form/Form.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { FormFooterProps as BaseFormFooterProps, FormFooter as BaseFormFooter, @@ -122,7 +122,7 @@ const useStyles = makeStyles((theme) => ({ gap: ({ direction }: FormContextValue = {}) => direction === "horizontal" ? theme.spacing(10) : theme.spacing(5), - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down("md")]: { gap: theme.spacing(8), }, }, @@ -135,7 +135,7 @@ const useStyles = makeStyles((theme) => ({ flexDirection: ({ direction }: FormContextValue = {}) => direction === "horizontal" ? "row" : "column", - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down("md")]: { flexDirection: "column", gap: theme.spacing(2), }, @@ -150,7 +150,7 @@ const useStyles = makeStyles((theme) => ({ direction === "horizontal" ? "sticky" : undefined, top: theme.spacing(3), - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down("md")]: { width: "100%", position: "initial", }, @@ -180,7 +180,7 @@ const useFormFooterStyles = makeStyles((theme) => ({ button: { minWidth: theme.spacing(23), - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down("md")]: { width: "100%", }, }, @@ -191,7 +191,7 @@ const useFormFooterStyles = makeStyles((theme) => ({ flexDirection: "row-reverse", gap: theme.spacing(2), - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down("md")]: { flexDirection: "column", gap: theme.spacing(1), }, diff --git a/site/src/components/FormCloseButton/FormCloseButton.tsx b/site/src/components/FormCloseButton/FormCloseButton.tsx index 64f1f578bf765..fecb349d5a69d 100644 --- a/site/src/components/FormCloseButton/FormCloseButton.tsx +++ b/site/src/components/FormCloseButton/FormCloseButton.tsx @@ -1,5 +1,5 @@ import IconButton from "@mui/material/IconButton" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import Typography from "@mui/material/Typography" import { useEffect, FC, PropsWithChildren } from "react" import { CloseIcon } from "../Icons/CloseIcon" @@ -48,7 +48,7 @@ const useStyles = makeStyles((theme) => ({ opacity: 1, }, - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down("md")]: { top: theme.spacing(1), right: theme.spacing(1), }, diff --git a/site/src/components/FormFooter/FormFooter.tsx b/site/src/components/FormFooter/FormFooter.tsx index ff461c6a79ae2..001b4a167f4a5 100644 --- a/site/src/components/FormFooter/FormFooter.tsx +++ b/site/src/components/FormFooter/FormFooter.tsx @@ -1,5 +1,5 @@ import Button from "@mui/material/Button" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { ClassNameMap } from "@mui/material/styles/withStyles" import { FC } from "react" import { LoadingButton } from "../LoadingButton/LoadingButton" diff --git a/site/src/components/FullPageForm/FullPageForm.tsx b/site/src/components/FullPageForm/FullPageForm.tsx index b543a0ca33895..3808fd7b3cb5d 100644 --- a/site/src/components/FullPageForm/FullPageForm.tsx +++ b/site/src/components/FullPageForm/FullPageForm.tsx @@ -5,7 +5,7 @@ import { PageHeaderTitle, PageHeaderSubtitle, } from "components/PageHeader/PageHeader" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" export interface FullPageFormProps { title: string diff --git a/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx b/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx index 1410013855890..6287918045167 100644 --- a/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx +++ b/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { useCallback, useState, FC } from "react" import { useCustomEvent } from "../../hooks/events" import { CustomEventListener } from "../../utils/events" diff --git a/site/src/components/IconField/IconField.tsx b/site/src/components/IconField/IconField.tsx index a1ec12d6a2286..0ee1fe5525c92 100644 --- a/site/src/components/IconField/IconField.tsx +++ b/site/src/components/IconField/IconField.tsx @@ -5,7 +5,7 @@ import TextField from "@mui/material/TextField" import { OpenDropdown } from "components/DropdownArrows/DropdownArrows" import { useRef, FC, useState } from "react" import Picker from "@emoji-mart/react" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { colors } from "theme/colors" import { useTranslation } from "react-i18next" import data from "@emoji-mart/data/sets/14/twitter.json" @@ -84,7 +84,7 @@ const IconField: FC = ({ onPickEmoji, ...textFieldProps }) => { /> - ); + ) } const useStyles = makeStyles((theme) => ({ diff --git a/site/src/components/LicenseBanner/LicenseBannerView.tsx b/site/src/components/LicenseBanner/LicenseBannerView.tsx index cf605c45e7e44..745acf28f5b44 100644 --- a/site/src/components/LicenseBanner/LicenseBannerView.tsx +++ b/site/src/components/LicenseBanner/LicenseBannerView.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { Expander } from "components/Expander/Expander" import { Pill } from "components/Pill/Pill" import { useState } from "react" diff --git a/site/src/components/LicenseCard/LicenseCard.tsx b/site/src/components/LicenseCard/LicenseCard.tsx index 0eae70c12fe10..60f147e4bd2d6 100644 --- a/site/src/components/LicenseCard/LicenseCard.tsx +++ b/site/src/components/LicenseCard/LicenseCard.tsx @@ -1,7 +1,7 @@ import Box from "@mui/material/Box" import Button from "@mui/material/Button" import Paper from "@mui/material/Paper" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { License } from "api/typesGenerated" import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog" import { Stack } from "components/Stack/Stack" diff --git a/site/src/components/Loader/FullScreenLoader.tsx b/site/src/components/Loader/FullScreenLoader.tsx index 11e4f8b1c232e..9774f1bb303d9 100644 --- a/site/src/components/Loader/FullScreenLoader.tsx +++ b/site/src/components/Loader/FullScreenLoader.tsx @@ -1,5 +1,5 @@ import CircularProgress from "@mui/material/CircularProgress" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { FC } from "react" export const useStyles = makeStyles((theme) => ({ diff --git a/site/src/components/LoadingButton/LoadingButton.tsx b/site/src/components/LoadingButton/LoadingButton.tsx index 479f5b0447aab..afbb18ba646e2 100644 --- a/site/src/components/LoadingButton/LoadingButton.tsx +++ b/site/src/components/LoadingButton/LoadingButton.tsx @@ -1,6 +1,6 @@ import Button, { ButtonProps } from "@mui/material/Button" import CircularProgress from "@mui/material/CircularProgress" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { Theme } from "@mui/material/styles/createTheme" import { FC } from "react" diff --git a/site/src/components/Margins/Margins.tsx b/site/src/components/Margins/Margins.tsx index 66167acf10100..acfa252bb3815 100644 --- a/site/src/components/Margins/Margins.tsx +++ b/site/src/components/Margins/Margins.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { FC } from "react" import { combineClasses } from "utils/combineClasses" import { diff --git a/site/src/components/Markdown/Markdown.tsx b/site/src/components/Markdown/Markdown.tsx index 216f681918feb..982a2b583edd3 100644 --- a/site/src/components/Markdown/Markdown.tsx +++ b/site/src/components/Markdown/Markdown.tsx @@ -1,5 +1,5 @@ import Link from "@mui/material/Link" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import Table from "@mui/material/Table" import TableBody from "@mui/material/TableBody" import TableCell from "@mui/material/TableCell" @@ -95,7 +95,7 @@ export const Markdown: FC<{ children: string }> = ({ children }) => { > {children} - ); + ) } export const MemoizedMarkdown = memo(Markdown) diff --git a/site/src/components/MultiTextField/MultiTextField.tsx b/site/src/components/MultiTextField/MultiTextField.tsx index 76b0aa748040a..a3244580b6d30 100644 --- a/site/src/components/MultiTextField/MultiTextField.tsx +++ b/site/src/components/MultiTextField/MultiTextField.tsx @@ -1,6 +1,6 @@ import Chip from "@mui/material/Chip" import FormHelperText from "@mui/material/FormHelperText" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { FC } from "react" export type MultiTextFieldProps = { diff --git a/site/src/components/NavbarView/NavbarView.tsx b/site/src/components/NavbarView/NavbarView.tsx index 04d63c52cef6c..d099198bd1b22 100644 --- a/site/src/components/NavbarView/NavbarView.tsx +++ b/site/src/components/NavbarView/NavbarView.tsx @@ -2,7 +2,7 @@ import Drawer from "@mui/material/Drawer" import IconButton from "@mui/material/IconButton" import List from "@mui/material/List" import ListItem from "@mui/material/ListItem" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import MenuIcon from "@mui/icons-material/Menu" import { CoderIcon } from "components/Icons/CoderIcon" import { useState } from "react" @@ -104,7 +104,8 @@ export const NavbarView: React.FC> = ({ onClick={() => { setIsDrawerOpen(true) }} - size="large"> + size="large" + > @@ -156,7 +157,7 @@ export const NavbarView: React.FC> = ({ - ); + ) } const useStyles = makeStyles((theme) => ({ diff --git a/site/src/components/PageHeader/FullWidthPageHeader.tsx b/site/src/components/PageHeader/FullWidthPageHeader.tsx index 49e5de574beeb..fe62b38df5438 100644 --- a/site/src/components/PageHeader/FullWidthPageHeader.tsx +++ b/site/src/components/PageHeader/FullWidthPageHeader.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { FC, PropsWithChildren } from "react" export const FullWidthPageHeader: FC = ({ children }) => { @@ -39,17 +39,17 @@ const useStyles = makeStyles((theme) => ({ zIndex: 10, flexWrap: "wrap", - [theme.breakpoints.down('lg')]: { + [theme.breakpoints.down("lg")]: { position: "unset", alignItems: "flex-start", }, - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down("md")]: { flexDirection: "column", }, }, actions: { marginLeft: "auto", - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down("md")]: { marginLeft: "unset", }, }, diff --git a/site/src/components/PageHeader/PageHeader.tsx b/site/src/components/PageHeader/PageHeader.tsx index a419cd348549c..0944828fdf071 100644 --- a/site/src/components/PageHeader/PageHeader.tsx +++ b/site/src/components/PageHeader/PageHeader.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { PropsWithChildren, FC } from "react" import { combineClasses } from "../../utils/combineClasses" import { Stack } from "../Stack/Stack" @@ -61,7 +61,7 @@ const useStyles = makeStyles((theme) => ({ paddingBottom: theme.spacing(6), gap: theme.spacing(4), - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down("md")]: { flexDirection: "column", alignItems: "flex-start", }, @@ -90,7 +90,7 @@ const useStyles = makeStyles((theme) => ({ actions: { marginLeft: "auto", - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down("md")]: { marginTop: theme.spacing(3), marginLeft: "initial", width: "100%", diff --git a/site/src/components/PaginationWidget/PageButton.tsx b/site/src/components/PaginationWidget/PageButton.tsx index 6fc54e11b1d36..9caa97d2df285 100644 --- a/site/src/components/PaginationWidget/PageButton.tsx +++ b/site/src/components/PaginationWidget/PageButton.tsx @@ -1,5 +1,5 @@ import Button from "@mui/material/Button" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" interface PageButtonProps { activePage?: number diff --git a/site/src/components/ParameterInput/ParameterInput.tsx b/site/src/components/ParameterInput/ParameterInput.tsx index 7b10070bfe67a..ddf8529cbeb7a 100644 --- a/site/src/components/ParameterInput/ParameterInput.tsx +++ b/site/src/components/ParameterInput/ParameterInput.tsx @@ -2,7 +2,7 @@ import FormControlLabel from "@mui/material/FormControlLabel" import MenuItem from "@mui/material/MenuItem" import Radio from "@mui/material/Radio" import RadioGroup from "@mui/material/RadioGroup" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import TextField from "@mui/material/TextField" import { Stack } from "components/Stack/Stack" import { FC } from "react" @@ -80,14 +80,15 @@ const ParameterField: React.FC = ({ onChange(event.target.value) }} select - fullWidth> + fullWidth + > {schema.validation_contains.map((item) => ( {item} ))} - ); + ) } if (isBoolean(schema)) { @@ -128,8 +129,9 @@ const ParameterField: React.FC = ({ defaultValue={defaultValue ?? schema.default_source_value} onChange={(event) => { onChange(event.target.value) - }} /> - ); + }} + /> + ) } const useStyles = makeStyles((theme) => ({ diff --git a/site/src/components/PasswordField/PasswordField.tsx b/site/src/components/PasswordField/PasswordField.tsx index 753f413d70a1e..f1eb57b356bef 100644 --- a/site/src/components/PasswordField/PasswordField.tsx +++ b/site/src/components/PasswordField/PasswordField.tsx @@ -1,6 +1,6 @@ import IconButton from "@mui/material/IconButton" import InputAdornment from "@mui/material/InputAdornment" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import TextField, { TextFieldProps } from "@mui/material/TextField" import VisibilityOffOutlined from "@mui/icons-material/VisibilityOffOutlined" import VisibilityOutlined from "@mui/icons-material/VisibilityOutlined" diff --git a/site/src/components/Paywall/Paywall.tsx b/site/src/components/Paywall/Paywall.tsx index fc910ea6ba977..42aab2e20b180 100644 --- a/site/src/components/Paywall/Paywall.tsx +++ b/site/src/components/Paywall/Paywall.tsx @@ -1,6 +1,6 @@ import Box from "@mui/material/Box" import Chip from "@mui/material/Chip" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import Typography from "@mui/material/Typography" import { Stack } from "components/Stack/Stack" import { FC, ReactNode } from "react" diff --git a/site/src/components/PortForwardButton/PortForwardButton.tsx b/site/src/components/PortForwardButton/PortForwardButton.tsx index ffc9836da0063..df53b2b2cdcea 100644 --- a/site/src/components/PortForwardButton/PortForwardButton.tsx +++ b/site/src/components/PortForwardButton/PortForwardButton.tsx @@ -1,7 +1,7 @@ import Button from "@mui/material/Button" import Link from "@mui/material/Link" import Popover from "@mui/material/Popover" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import TextField from "@mui/material/TextField" import { Stack } from "components/Stack/Stack" import { useRef, useState, Fragment } from "react" @@ -59,80 +59,83 @@ const TooltipView: React.FC = (props) => { }) const ports = state.context.listeningPorts?.ports - return <> - - Access ports running on the agent with the{" "} - port, agent name, workspace name and{" "} - your username URL schema, as shown below. Port URLs are - only accessible by you. - - - - - - Use the form to open applications in a new tab. - - - - { - setPort(e.currentTarget.value) - }} /> - - - - + return ( + <> + + Access ports running on the agent with the{" "} + port, agent name, workspace name and{" "} + your username URL schema, as shown below. Port URLs are + only accessible by you. + + + - 0)}> - {ports && - ports.map((p, i) => { - const url = portForwardURL( - host, - p.port, - agentName, - workspaceName, - username, - ) - let label = `${p.port}` - if (p.process_name) { - label = `${p.process_name} - ${p.port}` - } - - return ( - - {i > 0 && ·} - - {label} - - - ) - })} + Use the form to open applications in a new tab. - - - - - Learn more about web port forwarding - - - ; + + + { + setPort(e.currentTarget.value) + }} + /> + + + + + + 0)}> + + {ports && + ports.map((p, i) => { + const url = portForwardURL( + host, + p.port, + agentName, + workspaceName, + username, + ) + let label = `${p.port}` + if (p.process_name) { + label = `${p.process_name} - ${p.port}` + } + + return ( + + {i > 0 && ·} + + {label} + + + ) + })} + + + + + + Learn more about web port forwarding + + + + ) } export const PortForwardButton: React.FC = (props) => { diff --git a/site/src/components/Resources/AgentButton.tsx b/site/src/components/Resources/AgentButton.tsx index 14ef75c85b9e2..1ba299bc3e7e0 100644 --- a/site/src/components/Resources/AgentButton.tsx +++ b/site/src/components/Resources/AgentButton.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import Button, { ButtonProps } from "@mui/material/Button" import { FC, forwardRef } from "react" import { combineClasses } from "utils/combineClasses" diff --git a/site/src/components/Resources/AgentRowPreview.tsx b/site/src/components/Resources/AgentRowPreview.tsx index dbd4dc40cfbc7..9f7926fb42357 100644 --- a/site/src/components/Resources/AgentRowPreview.tsx +++ b/site/src/components/Resources/AgentRowPreview.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { AppPreviewLink } from "components/AppLink/AppPreviewLink" import { Maybe } from "components/Conditionals/Maybe" import { FC } from "react" @@ -158,7 +158,7 @@ const useStyles = makeStyles((theme) => ({ fontSize: 14, color: theme.palette.text.secondary, - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down("md")]: { gap: theme.spacing(2), flexWrap: "wrap", }, @@ -187,7 +187,7 @@ const useStyles = makeStyles((theme) => ({ }, agentDataItem: { - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down("md")]: { flexDirection: "column", alignItems: "flex-start", gap: theme.spacing(1), diff --git a/site/src/components/Resources/AgentStatus.tsx b/site/src/components/Resources/AgentStatus.tsx index 14d03eace82a4..e414f1a06aba4 100644 --- a/site/src/components/Resources/AgentStatus.tsx +++ b/site/src/components/Resources/AgentStatus.tsx @@ -1,5 +1,5 @@ import Tooltip from "@mui/material/Tooltip" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { combineClasses } from "utils/combineClasses" import { WorkspaceAgent } from "api/typesGenerated" import { ChooseOne, Cond } from "components/Conditionals/ChooseOne" diff --git a/site/src/components/Resources/AgentVersion.tsx b/site/src/components/Resources/AgentVersion.tsx index ea4d50ffebde0..c6caff69a93d3 100644 --- a/site/src/components/Resources/AgentVersion.tsx +++ b/site/src/components/Resources/AgentVersion.tsx @@ -1,5 +1,5 @@ import { useRef, useState, FC } from "react" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { WorkspaceAgent } from "api/typesGenerated" import { getDisplayVersionStatus } from "utils/workspace" import { AgentOutdatedTooltip } from "components/Tooltips/AgentOutdatedTooltip" diff --git a/site/src/components/Resources/ResourceCard.tsx b/site/src/components/Resources/ResourceCard.tsx index 219d6d16fecdc..38d71855af90e 100644 --- a/site/src/components/Resources/ResourceCard.tsx +++ b/site/src/components/Resources/ResourceCard.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { FC, useState } from "react" import { WorkspaceAgent, WorkspaceResource } from "../../api/typesGenerated" import { Stack } from "../Stack/Stack" @@ -89,7 +89,8 @@ export const ResourceCard: FC = ({ resource, agentRow }) => { onClick={() => { setShouldDisplayAllMetadata((value) => !value) }} - size="large"> + size="large" + > {shouldDisplayAllMetadata ? ( ) : ( @@ -105,7 +106,7 @@ export const ResourceCard: FC = ({ resource, agentRow }) => {
{resource.agents.map(agentRow)}
)} - ); + ) } const useStyles = makeStyles((theme) => ({ diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx index 79955bdc3139f..94b004a74b6fc 100644 --- a/site/src/components/Resources/Resources.tsx +++ b/site/src/components/Resources/Resources.tsx @@ -1,5 +1,5 @@ import Button from "@mui/material/Button" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { CloseDropdown, OpenDropdown, diff --git a/site/src/components/Resources/SensitiveValue.tsx b/site/src/components/Resources/SensitiveValue.tsx index cc014df770d17..5fcb63cb9dd04 100644 --- a/site/src/components/Resources/SensitiveValue.tsx +++ b/site/src/components/Resources/SensitiveValue.tsx @@ -1,5 +1,5 @@ import IconButton from "@mui/material/IconButton" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import Tooltip from "@mui/material/Tooltip" import VisibilityOffOutlined from "@mui/icons-material/VisibilityOffOutlined" import VisibilityOutlined from "@mui/icons-material/VisibilityOutlined" diff --git a/site/src/components/RichParameterInput/RichParameterInput.tsx b/site/src/components/RichParameterInput/RichParameterInput.tsx index 68d0144bb7d0a..17034e42df9a4 100644 --- a/site/src/components/RichParameterInput/RichParameterInput.tsx +++ b/site/src/components/RichParameterInput/RichParameterInput.tsx @@ -1,7 +1,7 @@ import FormControlLabel from "@mui/material/FormControlLabel" import Radio from "@mui/material/Radio" import RadioGroup from "@mui/material/RadioGroup" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import TextField, { TextFieldProps } from "@mui/material/TextField" import { Stack } from "components/Stack/Stack" import { FC, useState } from "react" @@ -202,8 +202,9 @@ const RichParameterField: React.FC = ({ onChange={(event) => { setParameterValue(event.target.value) onChange(event.target.value) - }} /> - ); + }} + /> + ) } const optionIconSize = 20 diff --git a/site/src/components/RuntimeErrorState/RuntimeErrorReport.tsx b/site/src/components/RuntimeErrorState/RuntimeErrorReport.tsx index a39f40ea8f8f9..e2eb7c94c97ad 100644 --- a/site/src/components/RuntimeErrorState/RuntimeErrorReport.tsx +++ b/site/src/components/RuntimeErrorState/RuntimeErrorReport.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { ReactElement } from "react" import { CodeBlock } from "../CodeBlock/CodeBlock" import { createCtas } from "./createCtas" diff --git a/site/src/components/RuntimeErrorState/RuntimeErrorState.tsx b/site/src/components/RuntimeErrorState/RuntimeErrorState.tsx index 5c1eb17fc2fce..1499252fbdfb2 100644 --- a/site/src/components/RuntimeErrorState/RuntimeErrorState.tsx +++ b/site/src/components/RuntimeErrorState/RuntimeErrorState.tsx @@ -1,6 +1,6 @@ import Button from "@mui/material/Button" import Link from "@mui/material/Link" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import RefreshOutlined from "@mui/icons-material/RefreshOutlined" import { BuildInfoResponse } from "api/typesGenerated" import { CopyButton } from "components/CopyButton/CopyButton" diff --git a/site/src/components/RuntimeErrorState/createCtas.tsx b/site/src/components/RuntimeErrorState/createCtas.tsx index b18f55e939e9c..5884eb4a84411 100644 --- a/site/src/components/RuntimeErrorState/createCtas.tsx +++ b/site/src/components/RuntimeErrorState/createCtas.tsx @@ -1,5 +1,5 @@ import Button from "@mui/material/Button" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import RefreshIcon from "@mui/icons-material/Refresh" import { ReactElement } from "react" import { CopyButton } from "../CopyButton/CopyButton" diff --git a/site/src/components/SSHButton/SSHButton.tsx b/site/src/components/SSHButton/SSHButton.tsx index 00d51120223b0..4e89b4b80676b 100644 --- a/site/src/components/SSHButton/SSHButton.tsx +++ b/site/src/components/SSHButton/SSHButton.tsx @@ -1,5 +1,5 @@ import Popover from "@mui/material/Popover" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { SecondaryAgentButton } from "components/Resources/AgentButton" import { useRef, useState } from "react" import { CodeExample } from "../CodeExample/CodeExample" @@ -105,9 +105,7 @@ export const SSHButton: React.FC> = ({ const useStyles = makeStyles((theme) => ({ popoverPaper: { - padding: `${theme.spacing(2)} ${theme.spacing(3)} ${theme.spacing( - 3, - )}`, + padding: `${theme.spacing(2)} ${theme.spacing(3)} ${theme.spacing(3)}`, width: theme.spacing(38), color: theme.palette.text.secondary, marginTop: theme.spacing(0.25), diff --git a/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx b/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx index 8e0e929f3a383..d90044abcb901 100644 --- a/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx +++ b/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx @@ -4,7 +4,7 @@ import InputAdornment from "@mui/material/InputAdornment" import Menu from "@mui/material/Menu" import MenuItem from "@mui/material/MenuItem" import OutlinedInput from "@mui/material/OutlinedInput" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { Theme } from "@mui/material/styles/createTheme" import SearchIcon from "@mui/icons-material/Search" import debounce from "just-debounce-it" diff --git a/site/src/components/Section/Section.tsx b/site/src/components/Section/Section.tsx index 28d1755b063d6..fc1df1dc5187b 100644 --- a/site/src/components/Section/Section.tsx +++ b/site/src/components/Section/Section.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import Typography from "@mui/material/Typography" import { FC } from "react" import { combineClasses } from "../../utils/combineClasses" @@ -68,7 +68,7 @@ const useStyles = makeStyles((theme) => ({ borderRadius: theme.shape.borderRadius, border: `1px solid ${theme.palette.divider}`, - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down("md")]: { padding: theme.spacing(4, 3, 4, 3), }, }, diff --git a/site/src/components/SectionAction/SectionAction.tsx b/site/src/components/SectionAction/SectionAction.tsx index c860739973955..76ac6c7c26454 100644 --- a/site/src/components/SectionAction/SectionAction.tsx +++ b/site/src/components/SectionAction/SectionAction.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { FC } from "react" const useStyles = makeStyles((theme) => ({ diff --git a/site/src/components/ServiceBanner/ServiceBannerView.tsx b/site/src/components/ServiceBanner/ServiceBannerView.tsx index a72b49b82c914..988085972a791 100644 --- a/site/src/components/ServiceBanner/ServiceBannerView.tsx +++ b/site/src/components/ServiceBanner/ServiceBannerView.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { Pill } from "components/Pill/Pill" import ReactMarkdown from "react-markdown" import { colors } from "theme/colors" diff --git a/site/src/components/SettingsLayout/Section.tsx b/site/src/components/SettingsLayout/Section.tsx index 69e2fecabccc8..29e761fdec030 100644 --- a/site/src/components/SettingsLayout/Section.tsx +++ b/site/src/components/SettingsLayout/Section.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import Typography from "@mui/material/Typography" import { FC, ReactNode, PropsWithChildren } from "react" import { SectionAction } from "../SectionAction/SectionAction" diff --git a/site/src/components/SettingsLayout/SettingsLayout.tsx b/site/src/components/SettingsLayout/SettingsLayout.tsx index 7538cfdc47479..d2a23f35a37ab 100644 --- a/site/src/components/SettingsLayout/SettingsLayout.tsx +++ b/site/src/components/SettingsLayout/SettingsLayout.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { Sidebar } from "./Sidebar" import { Stack } from "components/Stack/Stack" import { FC, Suspense } from "react" diff --git a/site/src/components/SettingsLayout/Sidebar.tsx b/site/src/components/SettingsLayout/Sidebar.tsx index d77917c2042c4..446ab6c3074e5 100644 --- a/site/src/components/SettingsLayout/Sidebar.tsx +++ b/site/src/components/SettingsLayout/Sidebar.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import VpnKeyOutlined from "@mui/icons-material/VpnKeyOutlined" import FingerprintOutlinedIcon from "@mui/icons-material/FingerprintOutlined" import { User } from "api/typesGenerated" diff --git a/site/src/components/SignInForm/OAuthSignInForm.tsx b/site/src/components/SignInForm/OAuthSignInForm.tsx index 57c83788b4acf..07940ee3dbc9e 100644 --- a/site/src/components/SignInForm/OAuthSignInForm.tsx +++ b/site/src/components/SignInForm/OAuthSignInForm.tsx @@ -6,7 +6,7 @@ import Box from "@mui/material/Box" import { Language } from "./SignInForm" import { AuthMethods } from "../../api/typesGenerated" import { FC } from "react" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" type OAuthSignInFormProps = { isSigningIn: boolean @@ -78,5 +78,5 @@ export const OAuthSignInForm: FC = ({ )} - ); + ) } diff --git a/site/src/components/SignInForm/SignInForm.tsx b/site/src/components/SignInForm/SignInForm.tsx index f662f37f75b52..15d93fe5e3c4a 100644 --- a/site/src/components/SignInForm/SignInForm.tsx +++ b/site/src/components/SignInForm/SignInForm.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { FormikTouched } from "formik" import { FC, useState } from "react" import { AuthMethods } from "../../api/typesGenerated" diff --git a/site/src/components/SignInLayout/SignInLayout.tsx b/site/src/components/SignInLayout/SignInLayout.tsx index eebdb628aae56..5c9a4eb13f772 100644 --- a/site/src/components/SignInLayout/SignInLayout.tsx +++ b/site/src/components/SignInLayout/SignInLayout.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { FC, ReactNode } from "react" export const useStyles = makeStyles((theme) => ({ diff --git a/site/src/components/Stack/Stack.tsx b/site/src/components/Stack/Stack.tsx index ac9d0d576ce07..f6a3d72cbc44a 100644 --- a/site/src/components/Stack/Stack.tsx +++ b/site/src/components/Stack/Stack.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { CSSProperties } from "@mui/material/styles/withStyles" import { FC } from "react" import { ReactNode } from "react-markdown/lib/react-markdown" @@ -28,7 +28,7 @@ const useStyles = makeStyles((theme) => ({ flexWrap: ({ wrap }: StyleProps) => wrap, maxWidth: ({ maxWidth }: StyleProps) => maxWidth, - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down("md")]: { width: "100%", }, }, diff --git a/site/src/components/Stats/Stats.tsx b/site/src/components/Stats/Stats.tsx index c8ab1be4b2c94..1b8c1fb6a1e50 100644 --- a/site/src/components/Stats/Stats.tsx +++ b/site/src/components/Stats/Stats.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { ComponentProps, FC, PropsWithChildren } from "react" import { combineClasses } from "utils/combineClasses" @@ -43,7 +43,7 @@ const useStyles = makeStyles((theme) => ({ margin: "0px", flexWrap: "wrap", - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down("md")]: { display: "block", padding: theme.spacing(2), }, @@ -57,7 +57,7 @@ const useStyles = makeStyles((theme) => ({ alignItems: "baseline", gap: theme.spacing(1), - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down("md")]: { padding: theme.spacing(1), }, }, diff --git a/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx b/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx index bad41c3016936..d37c884f1b97e 100644 --- a/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx +++ b/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx @@ -2,7 +2,7 @@ import { FC } from "react" import Editor, { DiffEditor, loader } from "@monaco-editor/react" import * as monaco from "monaco-editor" import { useCoderTheme } from "./coderTheme" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" loader.config({ monaco }) diff --git a/site/src/components/TabPanel/TabPanel.tsx b/site/src/components/TabPanel/TabPanel.tsx index ae41b040ab272..4b5c129189056 100644 --- a/site/src/components/TabPanel/TabPanel.tsx +++ b/site/src/components/TabPanel/TabPanel.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { alpha } from "@mui/material/styles/colorManipulator" import { FC } from "react" import { TabSidebar, TabSidebarItem } from "../TabSidebar/TabSidebar" @@ -40,7 +40,7 @@ const useStyles = makeStyles((theme) => ({ maxWidth: 1920, padding: theme.spacing(5, 3.5, 0, 4), - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down("md")]: { flexDirection: "column", padding: 0, }, @@ -59,7 +59,7 @@ const useStyles = makeStyles((theme) => ({ menuPanel: { paddingRight: 40, - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down("md")]: { padding: 0, }, }, @@ -87,12 +87,12 @@ const useStyles = makeStyles((theme) => ({ }, }, - [theme.breakpoints.down('xl')]: { + [theme.breakpoints.down("xl")]: { contentPanel: { width: 890, }, }, - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down("md")]: { contentPanel: { width: "auto", }, diff --git a/site/src/components/TabSidebar/TabSidebar.tsx b/site/src/components/TabSidebar/TabSidebar.tsx index 21bfb36402b02..77fda5bdddaea 100644 --- a/site/src/components/TabSidebar/TabSidebar.tsx +++ b/site/src/components/TabSidebar/TabSidebar.tsx @@ -1,6 +1,6 @@ import List from "@mui/material/List" import ListItem from "@mui/material/ListItem" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { FC } from "react" import { NavLink } from "react-router-dom" import { sidePadding } from "theme/constants" @@ -56,7 +56,7 @@ const useStyles = makeStyles((theme) => ({ minWidth: 160, marginTop: theme.spacing(5), - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down("md")]: { display: "flex", borderBottom: `1px solid ${theme.palette.divider}`, marginBottom: theme.spacing(2), @@ -105,7 +105,7 @@ const useStyles = makeStyles((theme) => ({ }, }, - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down("md")]: { textAlign: "center", width: "100%", paddingTop: theme.spacing(2), diff --git a/site/src/components/TableCellLink/TableCellLink.tsx b/site/src/components/TableCellLink/TableCellLink.tsx index 2ab4d76010f5d..8b2a8754a3a2a 100644 --- a/site/src/components/TableCellLink/TableCellLink.tsx +++ b/site/src/components/TableCellLink/TableCellLink.tsx @@ -1,5 +1,5 @@ import Link from "@mui/material/Link" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import TableCell, { TableCellProps } from "@mui/material/TableCell" import { Link as RouterLink } from "react-router-dom" import { combineClasses } from "../../utils/combineClasses" diff --git a/site/src/components/TableEmpty/TableEmpty.tsx b/site/src/components/TableEmpty/TableEmpty.tsx index 88e6612109265..744e27a6fc840 100644 --- a/site/src/components/TableEmpty/TableEmpty.tsx +++ b/site/src/components/TableEmpty/TableEmpty.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import TableCell from "@mui/material/TableCell" import TableRow from "@mui/material/TableRow" import { FC } from "react" diff --git a/site/src/components/TableLoader/TableLoader.tsx b/site/src/components/TableLoader/TableLoader.tsx index 6b8139f6f5cbe..9c569f08b208f 100644 --- a/site/src/components/TableLoader/TableLoader.tsx +++ b/site/src/components/TableLoader/TableLoader.tsx @@ -1,7 +1,7 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import TableCell from "@mui/material/TableCell" import TableRow from "@mui/material/TableRow" -import Skeleton from '@mui/material/Skeleton' +import Skeleton from "@mui/material/Skeleton" import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton" import { FC } from "react" import { Loader } from "../Loader/Loader" diff --git a/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx b/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx index 0242fe95136c2..9332a9b86bd8b 100644 --- a/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx +++ b/site/src/components/TemplateExampleCard/TemplateExampleCard.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { TemplateExample } from "api/typesGenerated" import { FC } from "react" import { Link } from "react-router-dom" diff --git a/site/src/components/TemplateFiles/TemplateFiles.tsx b/site/src/components/TemplateFiles/TemplateFiles.tsx index 9d795190ae450..abbb608bd428d 100644 --- a/site/src/components/TemplateFiles/TemplateFiles.tsx +++ b/site/src/components/TemplateFiles/TemplateFiles.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { DockerIcon } from "components/Icons/DockerIcon" import { MarkdownIcon } from "components/Icons/MarkdownIcon" import { TerraformIcon } from "components/Icons/TerraformIcon" diff --git a/site/src/components/TemplateLayout/TemplateLayout.tsx b/site/src/components/TemplateLayout/TemplateLayout.tsx index eb60944a39a44..e9cbea1dc8b6a 100644 --- a/site/src/components/TemplateLayout/TemplateLayout.tsx +++ b/site/src/components/TemplateLayout/TemplateLayout.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { useOrganizationId } from "hooks/useOrganizationId" import { createContext, FC, Suspense, useContext } from "react" import { NavLink, Outlet, useNavigate, useParams } from "react-router-dom" diff --git a/site/src/components/TemplateVersionEditor/FileTreeView.tsx b/site/src/components/TemplateVersionEditor/FileTreeView.tsx index 367793808c3eb..b0a39aa619bad 100644 --- a/site/src/components/TemplateVersionEditor/FileTreeView.tsx +++ b/site/src/components/TemplateVersionEditor/FileTreeView.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import ChevronRightIcon from "@mui/icons-material/ChevronRight" import ExpandMoreIcon from "@mui/icons-material/ExpandMore" import TreeView from "@mui/lab/TreeView" diff --git a/site/src/components/TemplateVersionEditor/MissingTemplateVariablesDialog.tsx b/site/src/components/TemplateVersionEditor/MissingTemplateVariablesDialog.tsx index 84c8270d89b57..d44133eb36d09 100644 --- a/site/src/components/TemplateVersionEditor/MissingTemplateVariablesDialog.tsx +++ b/site/src/components/TemplateVersionEditor/MissingTemplateVariablesDialog.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import Dialog from "@mui/material/Dialog" import DialogContent from "@mui/material/DialogContent" import DialogContentText from "@mui/material/DialogContentText" diff --git a/site/src/components/Timeline/TimelineDateRow.tsx b/site/src/components/Timeline/TimelineDateRow.tsx index bb409f08bfec4..10955266ca801 100644 --- a/site/src/components/Timeline/TimelineDateRow.tsx +++ b/site/src/components/Timeline/TimelineDateRow.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import TableCell from "@mui/material/TableCell" import TableRow from "@mui/material/TableRow" import formatRelative from "date-fns/formatRelative" diff --git a/site/src/components/Timeline/TimelineEntry.tsx b/site/src/components/Timeline/TimelineEntry.tsx index 997346a102221..a0156b40a5bfb 100644 --- a/site/src/components/Timeline/TimelineEntry.tsx +++ b/site/src/components/Timeline/TimelineEntry.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import TableRow, { TableRowProps } from "@mui/material/TableRow" import { PropsWithChildren } from "react" import { combineClasses } from "utils/combineClasses" diff --git a/site/src/components/Tooltips/AgentOutdatedTooltip.tsx b/site/src/components/Tooltips/AgentOutdatedTooltip.tsx index 0b4f2a8171c72..eb706f3a58fc2 100644 --- a/site/src/components/Tooltips/AgentOutdatedTooltip.tsx +++ b/site/src/components/Tooltips/AgentOutdatedTooltip.tsx @@ -1,5 +1,5 @@ import { ComponentProps, FC } from "react" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import RefreshIcon from "@mui/icons-material/RefreshOutlined" import { HelpTooltipText, diff --git a/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx b/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx index cd9acc44d79d1..4465a848296bb 100644 --- a/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx +++ b/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx @@ -1,6 +1,6 @@ import Link from "@mui/material/Link" import Popover, { PopoverProps } from "@mui/material/Popover" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import HelpIcon from "@mui/icons-material/HelpOutline" import OpenInNewIcon from "@mui/icons-material/OpenInNew" import { diff --git a/site/src/components/Tooltips/OutdatedHelpTooltip.tsx b/site/src/components/Tooltips/OutdatedHelpTooltip.tsx index 3f921276db444..8314a70d3e405 100644 --- a/site/src/components/Tooltips/OutdatedHelpTooltip.tsx +++ b/site/src/components/Tooltips/OutdatedHelpTooltip.tsx @@ -8,7 +8,7 @@ import { HelpTooltipTitle, } from "./HelpTooltip" import InfoIcon from "@mui/icons-material/InfoOutlined" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { colors } from "theme/colors" export const Language = { diff --git a/site/src/components/Typography/Typography.tsx b/site/src/components/Typography/Typography.tsx index 5b5d3fbe66724..e5c539aeb7159 100644 --- a/site/src/components/Typography/Typography.tsx +++ b/site/src/components/Typography/Typography.tsx @@ -3,7 +3,7 @@ * verbatim port from `@coder/ui`. */ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import MuiTypography, { TypographyProps as MuiTypographyProps, } from "@mui/material/Typography" diff --git a/site/src/components/UserAutocomplete/UserAutocomplete.tsx b/site/src/components/UserAutocomplete/UserAutocomplete.tsx index 1577ed724e3ae..94310efbd1092 100644 --- a/site/src/components/UserAutocomplete/UserAutocomplete.tsx +++ b/site/src/components/UserAutocomplete/UserAutocomplete.tsx @@ -1,7 +1,7 @@ import CircularProgress from "@mui/material/CircularProgress" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import TextField from "@mui/material/TextField" -import Autocomplete from '@mui/material/Autocomplete' +import Autocomplete from "@mui/material/Autocomplete" import { useMachine } from "@xstate/react" import { User } from "api/typesGenerated" import { Avatar } from "components/Avatar/Avatar" @@ -110,7 +110,7 @@ export const UserAutocomplete: FC = ({ /> )} /> - ); + ) } export const useStyles = makeStyles((theme) => ({ diff --git a/site/src/components/UserCell/UserCell.tsx b/site/src/components/UserCell/UserCell.tsx index fd2086b8e2063..7260bb2c139ad 100644 --- a/site/src/components/UserCell/UserCell.tsx +++ b/site/src/components/UserCell/UserCell.tsx @@ -1,6 +1,6 @@ import Box from "@mui/material/Box" import Link from "@mui/material/Link" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import Typography from "@mui/material/Typography" import { FC } from "react" import { UserAvatar, UserAvatarProps } from "../UserAvatar/UserAvatar" diff --git a/site/src/components/UserDropdown/UsersDropdown.tsx b/site/src/components/UserDropdown/UsersDropdown.tsx index 26c0949a69337..4bd3c75f31403 100644 --- a/site/src/components/UserDropdown/UsersDropdown.tsx +++ b/site/src/components/UserDropdown/UsersDropdown.tsx @@ -1,6 +1,6 @@ import Badge from "@mui/material/Badge" import MenuItem from "@mui/material/MenuItem" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { useState, FC, PropsWithChildren, MouseEvent } from "react" import { colors } from "theme/colors" import * as TypesGen from "../../api/typesGenerated" diff --git a/site/src/components/UserDropdownContent/UserDropdownContent.tsx b/site/src/components/UserDropdownContent/UserDropdownContent.tsx index b7633f0b4bc6e..43562c6a44252 100644 --- a/site/src/components/UserDropdownContent/UserDropdownContent.tsx +++ b/site/src/components/UserDropdownContent/UserDropdownContent.tsx @@ -1,6 +1,6 @@ import Divider from "@mui/material/Divider" import MenuItem from "@mui/material/MenuItem" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import AccountIcon from "@mui/icons-material/AccountCircleOutlined" import BugIcon from "@mui/icons-material/BugReportOutlined" import ChatIcon from "@mui/icons-material/ChatOutlined" diff --git a/site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx b/site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx index 4ae303bbf3d00..7c1da3cc6fd54 100644 --- a/site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx +++ b/site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx @@ -1,7 +1,7 @@ import CircularProgress from "@mui/material/CircularProgress" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import TextField from "@mui/material/TextField" -import Autocomplete from '@mui/material/Autocomplete' +import Autocomplete from "@mui/material/Autocomplete" import { useMachine } from "@xstate/react" import { Group, User } from "api/typesGenerated" import { AvatarData } from "components/AvatarData/AvatarData" @@ -105,7 +105,7 @@ export const UserOrGroupAutocomplete: React.FC< /> )} /> - ); + ) } export const useStyles = makeStyles((theme) => { diff --git a/site/src/components/UsersLayout/UsersLayout.tsx b/site/src/components/UsersLayout/UsersLayout.tsx index e1895ea16d62a..96886349c4d6f 100644 --- a/site/src/components/UsersLayout/UsersLayout.tsx +++ b/site/src/components/UsersLayout/UsersLayout.tsx @@ -1,6 +1,6 @@ import Button from "@mui/material/Button" import Link from "@mui/material/Link" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import GroupAdd from "@mui/icons-material/GroupAddOutlined" import PersonAdd from "@mui/icons-material/PersonAddOutlined" import { useMachine } from "@xstate/react" diff --git a/site/src/components/UsersTable/UsersTableBody.tsx b/site/src/components/UsersTable/UsersTableBody.tsx index a2266b25b8c04..064d800098759 100644 --- a/site/src/components/UsersTable/UsersTableBody.tsx +++ b/site/src/components/UsersTable/UsersTableBody.tsx @@ -1,5 +1,5 @@ import Box from "@mui/material/Box" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import TableCell from "@mui/material/TableCell" import TableRow from "@mui/material/TableRow" import { ChooseOne, Cond } from "components/Conditionals/ChooseOne" diff --git a/site/src/components/VersionsTable/VersionRow.tsx b/site/src/components/VersionsTable/VersionRow.tsx index f7f3d568aa0c6..c22fd4517ae66 100644 --- a/site/src/components/VersionsTable/VersionRow.tsx +++ b/site/src/components/VersionsTable/VersionRow.tsx @@ -1,5 +1,5 @@ import Button from "@mui/material/Button" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import TableCell from "@mui/material/TableCell" import { TemplateVersion } from "api/typesGenerated" import { Pill } from "components/Pill/Pill" diff --git a/site/src/components/Welcome/Welcome.tsx b/site/src/components/Welcome/Welcome.tsx index b87c6494e8a88..6297f7db422c5 100644 --- a/site/src/components/Welcome/Welcome.tsx +++ b/site/src/components/Welcome/Welcome.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import Typography from "@mui/material/Typography" import { FC, PropsWithChildren } from "react" import { CoderIcon } from "../Icons/CoderIcon" diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx index 275809e98cfb8..e3370836f04dd 100644 --- a/site/src/components/Workspace/Workspace.tsx +++ b/site/src/components/Workspace/Workspace.tsx @@ -1,5 +1,5 @@ import Button from "@mui/material/Button" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import RefreshOutlined from "@mui/icons-material/RefreshOutlined" import { Avatar } from "components/Avatar/Avatar" import { AgentRow } from "components/Resources/AgentRow" @@ -273,7 +273,7 @@ export const useStyles = makeStyles((theme) => { }, actions: { - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down("md")]: { flexDirection: "column", }, }, @@ -309,5 +309,5 @@ export const useStyles = makeStyles((theme) => { fullWidth: { width: "100%", }, - }; + } }) diff --git a/site/src/components/WorkspaceActions/WorkspaceActions.tsx b/site/src/components/WorkspaceActions/WorkspaceActions.tsx index 8643cc8906933..84cd10c63a824 100644 --- a/site/src/components/WorkspaceActions/WorkspaceActions.tsx +++ b/site/src/components/WorkspaceActions/WorkspaceActions.tsx @@ -1,6 +1,6 @@ import MenuItem from "@mui/material/MenuItem" import Menu from "@mui/material/Menu" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import MoreVertOutlined from "@mui/icons-material/MoreVertOutlined" import { FC, ReactNode, useRef, useState } from "react" import { useTranslation } from "react-i18next" diff --git a/site/src/components/WorkspaceSchedule/WorkspaceSchedule.tsx b/site/src/components/WorkspaceSchedule/WorkspaceSchedule.tsx index d6f10066c90f4..e3d91b9a699d6 100644 --- a/site/src/components/WorkspaceSchedule/WorkspaceSchedule.tsx +++ b/site/src/components/WorkspaceSchedule/WorkspaceSchedule.tsx @@ -1,5 +1,5 @@ import Link from "@mui/material/Link" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import dayjs from "dayjs" import advancedFormat from "dayjs/plugin/advancedFormat" import duration from "dayjs/plugin/duration" diff --git a/site/src/components/WorkspaceSection/WorkspaceSection.tsx b/site/src/components/WorkspaceSection/WorkspaceSection.tsx index d0d8e69e152f7..77ed3f4700903 100644 --- a/site/src/components/WorkspaceSection/WorkspaceSection.tsx +++ b/site/src/components/WorkspaceSection/WorkspaceSection.tsx @@ -1,5 +1,5 @@ import Paper from "@mui/material/Paper" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import Typography from "@mui/material/Typography" import { HTMLProps, ReactNode, FC, PropsWithChildren } from "react" import { CardPadding } from "../../theme/constants" diff --git a/site/src/components/WorkspaceStats/WorkspaceStats.tsx b/site/src/components/WorkspaceStats/WorkspaceStats.tsx index 081234c6b0e99..409c0036f3890 100644 --- a/site/src/components/WorkspaceStats/WorkspaceStats.tsx +++ b/site/src/components/WorkspaceStats/WorkspaceStats.tsx @@ -14,7 +14,7 @@ import upperFirst from "lodash/upperFirst" import { autostartDisplay, autostopDisplay } from "utils/schedule" import IconButton from "@mui/material/IconButton" import RemoveIcon from "@mui/icons-material/RemoveOutlined" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import AddIcon from "@mui/icons-material/AddOutlined" import Popover from "@mui/material/Popover" import TextField from "@mui/material/TextField" @@ -66,224 +66,228 @@ export const WorkspaceStats: FC = ({ const [isAddingTime, setIsAddingTime] = useState(false) const [isSubTime, setIsSubTime] = useState(false) - return <> - - } - /> - - {displayTemplateName} - - } - /> - + return ( + <> + + } + /> + - {workspace.latest_build.template_version_name} + {displayTemplateName} - - {workspace.outdated && ( - - )} - - } - /> - - {upperFirst(createDayString(workspace.latest_build.created_at))}{" "} - by {initiatedBy} - - } - /> - {shouldDisplayScheduleLabel(workspace) && ( + } + /> + <> - {isWorkspaceOn(workspace) - ? autostopDisplay(workspace) - : autostartDisplay(workspace.autostart_schedule)} + {workspace.latest_build.template_version_name} - {canUpdateWorkspace && canEditDeadline(workspace) && ( - - setIsSubTime(true)} - > - - - setIsAddingTime(true)} - > - - - + + {workspace.outdated && ( + )} - + } /> - )} - {workspace.latest_build.daily_cost > 0 && ( + {upperFirst(createDayString(workspace.latest_build.created_at))}{" "} + by {initiatedBy} + + } /> - )} - + {shouldDisplayScheduleLabel(workspace) && ( + + + {isWorkspaceOn(workspace) + ? autostopDisplay(workspace) + : autostartDisplay(workspace.autostart_schedule)} + + {canUpdateWorkspace && canEditDeadline(workspace) && ( + + setIsSubTime(true)} + > + + + setIsAddingTime(true)} + > + + + + )} + + } + /> + )} + {workspace.latest_build.daily_cost > 0 && ( + + )} + - setIsAddingTime(false)} - anchorOrigin={{ - vertical: "bottom", - horizontal: "right", - }} - transformOrigin={{ - vertical: "top", - horizontal: "right", - }} - > - Add hours to deadline - - Delay the shutdown of this workspace for a few more hours. This is - only applied once. - -
{ - e.preventDefault() - const formData = new FormData(e.currentTarget) - const hours = Number(formData.get("hours")) - onDeadlinePlus(hours) - setIsAddingTime(false) + setIsAddingTime(false)} + anchorOrigin={{ + vertical: "bottom", + horizontal: "right", + }} + transformOrigin={{ + vertical: "top", + horizontal: "right", }} > - - - - -
+ + + + + - setIsSubTime(false)} - anchorOrigin={{ - vertical: "bottom", - horizontal: "right", - }} - transformOrigin={{ - vertical: "top", - horizontal: "right", - }} - > - - Subtract hours to deadline - - - Anticipate the shutdown of this workspace for a few more hours. This - is only applied once. - -
{ - e.preventDefault() - const formData = new FormData(e.currentTarget) - const hours = Number(formData.get("hours")) - onDeadlineMinus(hours) - setIsSubTime(false) + setIsSubTime(false)} + anchorOrigin={{ + vertical: "bottom", + horizontal: "right", + }} + transformOrigin={{ + vertical: "top", + horizontal: "right", }} > - - - - -
- ; + + + + + + + ) } export const canEditDeadline = (workspace: Workspace): boolean => { @@ -312,7 +316,7 @@ const useStyles = makeStyles((theme) => ({ rowGap: theme.spacing(3), flex: 1, - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down("md")]: { display: "flex", flexDirection: "column", alignItems: "flex-start", diff --git a/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx b/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx index 5d47b662f20b4..37e511171f357 100644 --- a/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx +++ b/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx @@ -8,7 +8,7 @@ import { Pill } from "components/Pill/Pill" import i18next from "i18next" import { FC, ReactNode, PropsWithChildren } from "react" import { PaletteIndex } from "theme/palettes" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { combineClasses } from "utils/combineClasses" const LoadingIcon: FC = () => { diff --git a/site/src/components/WorkspacesTable/WorkspacesRow.tsx b/site/src/components/WorkspacesTable/WorkspacesRow.tsx index 8c442d5f27b11..97d43da875b62 100644 --- a/site/src/components/WorkspacesTable/WorkspacesRow.tsx +++ b/site/src/components/WorkspacesTable/WorkspacesRow.tsx @@ -1,5 +1,5 @@ import TableCell from "@mui/material/TableCell" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import TableRow from "@mui/material/TableRow" import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight" import { AvatarData } from "components/AvatarData/AvatarData" diff --git a/site/src/components/WorkspacesTable/WorkspacesTableBody.tsx b/site/src/components/WorkspacesTable/WorkspacesTableBody.tsx index dc5fa01fa6ff6..24e448b42fa27 100644 --- a/site/src/components/WorkspacesTable/WorkspacesTableBody.tsx +++ b/site/src/components/WorkspacesTable/WorkspacesTableBody.tsx @@ -1,6 +1,6 @@ import Button from "@mui/material/Button" import Link from "@mui/material/Link" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import AddOutlined from "@mui/icons-material/AddOutlined" import { Workspace } from "api/typesGenerated" import { ChooseOne, Cond } from "components/Conditionals/ChooseOne" diff --git a/site/src/hooks/useClickableTableRow.ts b/site/src/hooks/useClickableTableRow.ts index 1c97ddf9ec0f1..002e76c92ddac 100644 --- a/site/src/hooks/useClickableTableRow.ts +++ b/site/src/hooks/useClickableTableRow.ts @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { useClickable, UseClickableResult } from "./useClickable" interface UseClickableTableRowResult extends UseClickableResult { diff --git a/site/src/pages/404Page/404Page.tsx b/site/src/pages/404Page/404Page.tsx index da60ea18754c1..d7b1bfbc83c0b 100644 --- a/site/src/pages/404Page/404Page.tsx +++ b/site/src/pages/404Page/404Page.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import Typography from "@mui/material/Typography" import { FC } from "react" diff --git a/site/src/pages/CliAuthPage/CliAuthPageView.tsx b/site/src/pages/CliAuthPage/CliAuthPageView.tsx index 0cc62101fd244..49e32773d200c 100644 --- a/site/src/pages/CliAuthPage/CliAuthPageView.tsx +++ b/site/src/pages/CliAuthPage/CliAuthPageView.tsx @@ -1,5 +1,5 @@ import Button from "@mui/material/Button" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { CodeExample } from "components/CodeExample/CodeExample" import { SignInLayout } from "components/SignInLayout/SignInLayout" import { Welcome } from "components/Welcome/Welcome" diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx index ae5a0f9fc6748..2a0d255a1ded3 100644 --- a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx +++ b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx @@ -1,5 +1,5 @@ import Checkbox from "@mui/material/Checkbox" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import TextField from "@mui/material/TextField" import { ParameterSchema, diff --git a/site/src/pages/CreateTemplatePage/VariableInput.tsx b/site/src/pages/CreateTemplatePage/VariableInput.tsx index d20b5b4a950e3..7926f8d1df58d 100644 --- a/site/src/pages/CreateTemplatePage/VariableInput.tsx +++ b/site/src/pages/CreateTemplatePage/VariableInput.tsx @@ -1,7 +1,7 @@ import FormControlLabel from "@mui/material/FormControlLabel" import Radio from "@mui/material/Radio" import RadioGroup from "@mui/material/RadioGroup" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import TextField from "@mui/material/TextField" import { Stack } from "components/Stack/Stack" import { FC } from "react" @@ -109,8 +109,9 @@ const VariableField: React.FC = ({ : variable.sensitive ? "password" : "string" - } /> - ); + } + /> + ) } const useStyles = makeStyles((theme) => ({ diff --git a/site/src/pages/CreateTokenPage/CreateTokenPage.tsx b/site/src/pages/CreateTokenPage/CreateTokenPage.tsx index 4da5f0511fe0d..e18c9e3069a19 100644 --- a/site/src/pages/CreateTokenPage/CreateTokenPage.tsx +++ b/site/src/pages/CreateTokenPage/CreateTokenPage.tsx @@ -14,7 +14,7 @@ import { NANO_HOUR, CreateTokenData } from "./utils" import { AlertBanner } from "components/AlertBanner/AlertBanner" import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog" import { CodeExample } from "components/CodeExample/CodeExample" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" const initialValues: CreateTokenData = { name: "", diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx index 958cd51d3bae9..c9d0544e97307 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx @@ -20,7 +20,7 @@ import { FormFooter, HorizontalForm, } from "components/Form/Form" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { selectInitialRichParametersValues, useValidationSchemaForRichParameters, diff --git a/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx b/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx index 7cfd112665896..1c57ab4ede560 100644 --- a/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx +++ b/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { Template, TemplateExample } from "api/typesGenerated" import { Avatar } from "components/Avatar/Avatar" import { Stack } from "components/Stack/Stack" diff --git a/site/src/pages/DeploySettingsPage/GitAuthSettingsPage/GitAuthSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/GitAuthSettingsPage/GitAuthSettingsPageView.tsx index 46c1d52f732bd..95aa93b1b90aa 100644 --- a/site/src/pages/DeploySettingsPage/GitAuthSettingsPage/GitAuthSettingsPageView.tsx +++ b/site/src/pages/DeploySettingsPage/GitAuthSettingsPage/GitAuthSettingsPageView.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import Table from "@mui/material/Table" import TableBody from "@mui/material/TableBody" import TableCell from "@mui/material/TableCell" diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx index b3eafdff4cc5d..5f9974171e1c4 100644 --- a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx +++ b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx @@ -1,6 +1,6 @@ import Button from "@mui/material/Button" import TextField from "@mui/material/TextField" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { ApiErrorResponse } from "api/errors" import { AlertBanner } from "components/AlertBanner/AlertBanner" import { Fieldset } from "components/DeploySettingsLayout/Fieldset" @@ -46,68 +46,71 @@ export const AddNewLicensePageView: FC = ({ handleFileUploaded([file]) } - return <> - -
- - - - {savingLicenseError && ( - - )} - - - - - or - -
{ - e.preventDefault() - - const form = e.target - const formData = new FormData(form as HTMLFormElement) - - const licenseKey = formData.get("licenseKey") - - onSaveLicenseKey(licenseKey?.toString() || "") - }} - button={ - - } + return ( + <> + - -
- - ; +
+ + + + {savingLicenseError && ( + + )} + + + + + or + +
{ + e.preventDefault() + + const form = e.target + const formData = new FormData(form as HTMLFormElement) + + const licenseKey = formData.get("licenseKey") + + onSaveLicenseKey(licenseKey?.toString() || "") + }} + button={ + + } + > + +
+ + + ) } const useStyles = makeStyles((theme) => ({ diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/DividerWithText.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/DividerWithText.tsx index e1622f7aecb9f..321de70f52e94 100644 --- a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/DividerWithText.tsx +++ b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/DividerWithText.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { FC, PropsWithChildren } from "react" export const DividerWithText: FC = ({ children }) => { diff --git a/site/src/pages/GitAuthPage/GitAuthPage.tsx b/site/src/pages/GitAuthPage/GitAuthPage.tsx index e6d4b19db4d57..bfb34f19e038a 100644 --- a/site/src/pages/GitAuthPage/GitAuthPage.tsx +++ b/site/src/pages/GitAuthPage/GitAuthPage.tsx @@ -1,5 +1,5 @@ import Button from "@mui/material/Button" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { SignInLayout } from "components/SignInLayout/SignInLayout" import { Welcome } from "components/Welcome/Welcome" import { FC, useEffect } from "react" diff --git a/site/src/pages/GroupsPage/GroupPage.tsx b/site/src/pages/GroupsPage/GroupPage.tsx index 4e26eb73dcfa0..ca92e3252a147 100644 --- a/site/src/pages/GroupsPage/GroupPage.tsx +++ b/site/src/pages/GroupsPage/GroupPage.tsx @@ -32,7 +32,7 @@ import { Link as RouterLink, useNavigate, useParams } from "react-router-dom" import { pageTitle } from "utils/page" import { groupMachine } from "xServices/groups/groupXService" import { Maybe } from "components/Conditionals/Maybe" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" const AddGroupMember: React.FC<{ isLoading: boolean diff --git a/site/src/pages/GroupsPage/GroupsPageView.tsx b/site/src/pages/GroupsPage/GroupsPageView.tsx index dcc69c7a826a8..919c2a8a5d136 100644 --- a/site/src/pages/GroupsPage/GroupsPageView.tsx +++ b/site/src/pages/GroupsPage/GroupsPageView.tsx @@ -1,6 +1,6 @@ import Button from "@mui/material/Button" import Link from "@mui/material/Link" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import Table from "@mui/material/Table" import TableBody from "@mui/material/TableBody" import TableCell from "@mui/material/TableCell" @@ -10,7 +10,7 @@ import TableRow from "@mui/material/TableRow" import ArrowRightAltOutlined from "@mui/icons-material/ArrowRightAltOutlined" import AddCircleOutline from "@mui/icons-material/AddCircleOutline" import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight" -import AvatarGroup from '@mui/material/AvatarGroup' +import AvatarGroup from "@mui/material/AvatarGroup" import { AvatarData } from "components/AvatarData/AvatarData" import { ChooseOne, Cond } from "components/Conditionals/ChooseOne" import { EmptyState } from "components/EmptyState/EmptyState" diff --git a/site/src/pages/LoginPage/LoginPageView.tsx b/site/src/pages/LoginPage/LoginPageView.tsx index 9d979c86434db..70f8eec3afc9d 100644 --- a/site/src/pages/LoginPage/LoginPageView.tsx +++ b/site/src/pages/LoginPage/LoginPageView.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { FullScreenLoader } from "components/Loader/FullScreenLoader" import { FC } from "react" import { useLocation } from "react-router-dom" diff --git a/site/src/pages/SetupPage/SetupPageView.tsx b/site/src/pages/SetupPage/SetupPageView.tsx index 2bcd4fd23d67f..abf63bd8419ce 100644 --- a/site/src/pages/SetupPage/SetupPageView.tsx +++ b/site/src/pages/SetupPage/SetupPageView.tsx @@ -1,6 +1,6 @@ import Box from "@mui/material/Box" import Checkbox from "@mui/material/Checkbox" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import TextField from "@mui/material/TextField" import Typography from "@mui/material/Typography" import { LoadingButton } from "components/LoadingButton/LoadingButton" diff --git a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx index 43e3a68eedcfc..15e9db441ee44 100644 --- a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx +++ b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx @@ -1,5 +1,5 @@ import Button from "@mui/material/Button" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { Loader } from "components/Loader/Loader" import { Margins } from "components/Margins/Margins" import { MemoizedMarkdown } from "components/Markdown/Markdown" diff --git a/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.tsx b/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.tsx index 7c349309f2316..5849799adf342 100644 --- a/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.tsx +++ b/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { AlertBanner } from "components/AlertBanner/AlertBanner" import { Maybe } from "components/Conditionals/Maybe" import { Loader } from "components/Loader/Loader" diff --git a/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx b/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx index ed72d2f23886d..602122b7363b3 100644 --- a/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx +++ b/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { MemoizedMarkdown } from "components/Markdown/Markdown" import { useTemplateLayoutContext } from "components/TemplateLayout/TemplateLayout" import frontMatter from "front-matter" diff --git a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx index 852a59c7e1a25..31fa3e0bede93 100644 --- a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx +++ b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { Template, TemplateVersion, diff --git a/site/src/pages/TemplateSettingsPage/Sidebar.tsx b/site/src/pages/TemplateSettingsPage/Sidebar.tsx index 220bcddd3c0e0..9423a02e1310d 100644 --- a/site/src/pages/TemplateSettingsPage/Sidebar.tsx +++ b/site/src/pages/TemplateSettingsPage/Sidebar.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import ScheduleIcon from "@mui/icons-material/TimerOutlined" import VariablesIcon from "@mui/icons-material/CodeOutlined" import { Template } from "api/typesGenerated" diff --git a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx index 0dbcd624c3944..dcffb5aa3fc35 100644 --- a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx @@ -22,7 +22,7 @@ import { import { Stack } from "components/Stack/Stack" import Checkbox from "@mui/material/Checkbox" import { HelpTooltip, HelpTooltipText } from "components/Tooltips/HelpTooltip" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" const MAX_DESCRIPTION_CHAR_LIMIT = 128 diff --git a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPageView.tsx b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPageView.tsx index cca553450f34a..e9339233ac866 100644 --- a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPageView.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPageView.tsx @@ -3,7 +3,7 @@ import { ComponentProps, FC } from "react" import { TemplateSettingsForm } from "./TemplateSettingsForm" import { useTranslation } from "react-i18next" import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" export interface TemplateSettingsPageViewProps { template: Template diff --git a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx index 94dc2091ed704..4578f45741300 100644 --- a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx @@ -1,6 +1,6 @@ import MenuItem from "@mui/material/MenuItem" import Select, { SelectProps } from "@mui/material/Select" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import Table from "@mui/material/Table" import TableBody from "@mui/material/TableBody" import TableCell from "@mui/material/TableCell" diff --git a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm.tsx index 8642ef0435028..c3f8596e0a88f 100644 --- a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm.tsx @@ -14,7 +14,7 @@ import { FormFields, } from "components/Form/Form" import { Stack } from "components/Stack/Stack" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import Link from "@mui/material/Link" import Checkbox from "@mui/material/Checkbox" import FormControlLabel from "@mui/material/FormControlLabel" diff --git a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateSchedulePageView.tsx b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateSchedulePageView.tsx index d600251908ec4..8e4aa9a6c0d65 100644 --- a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateSchedulePageView.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateSchedulePageView.tsx @@ -2,7 +2,7 @@ import { Template, UpdateTemplateMeta } from "api/typesGenerated" import { ComponentProps, FC } from "react" import { TemplateScheduleForm } from "./TemplateScheduleForm" import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" export interface TemplateSchedulePageViewProps { template: Template diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx index 309ca99c28c53..fff6225fb9f86 100644 --- a/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { Sidebar } from "./Sidebar" import { Stack } from "components/Stack/Stack" import { createContext, FC, Suspense, useContext } from "react" diff --git a/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.tsx b/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.tsx index 6fa3e41a00512..2405375e32e7f 100644 --- a/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.tsx @@ -8,7 +8,7 @@ import { Loader } from "components/Loader/Loader" import { ComponentProps, FC } from "react" import { TemplateVariablesForm } from "./TemplateVariablesForm" import { Stack } from "components/Stack/Stack" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { useTranslation } from "react-i18next" import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader" diff --git a/site/src/pages/TemplatesPage/EmptyTemplates.tsx b/site/src/pages/TemplatesPage/EmptyTemplates.tsx index 0b30bb712014d..98c50818b58e1 100644 --- a/site/src/pages/TemplatesPage/EmptyTemplates.tsx +++ b/site/src/pages/TemplatesPage/EmptyTemplates.tsx @@ -1,6 +1,6 @@ import Button from "@mui/material/Button" import Link from "@mui/material/Link" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { TemplateExample } from "api/typesGenerated" import { CodeExample } from "components/CodeExample/CodeExample" import { Stack } from "components/Stack/Stack" diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index 50096aad20dbf..7a0657d436ab0 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx @@ -1,6 +1,6 @@ import Button from "@mui/material/Button" import Link from "@mui/material/Link" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import Table from "@mui/material/Table" import TableBody from "@mui/material/TableBody" import TableCell from "@mui/material/TableCell" diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx index b17c419ce04f7..4ff40c9f00ed4 100644 --- a/site/src/pages/TerminalPage/TerminalPage.tsx +++ b/site/src/pages/TerminalPage/TerminalPage.tsx @@ -1,5 +1,5 @@ import Button from "@mui/material/Button" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import WarningIcon from "@mui/icons-material/ErrorOutlineRounded" import RefreshOutlined from "@mui/icons-material/RefreshOutlined" import { useMachine } from "@xstate/react" diff --git a/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPageView.tsx b/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPageView.tsx index 42a85cb7e13f9..fcf5357c09071 100644 --- a/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPageView.tsx +++ b/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPageView.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import Box from "@mui/material/Box" import Button from "@mui/material/Button" import CircularProgress from "@mui/material/CircularProgress" diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx index 7c264ff2e7ee7..a9e64d54d9b7e 100644 --- a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx +++ b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx @@ -9,7 +9,7 @@ import { HealthyBadge, NotHealthyBadge, } from "components/DeploySettingsLayout/Badges" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { combineClasses } from "utils/combineClasses" export const ProxyRow: FC<{ diff --git a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildStateError.tsx b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildStateError.tsx index 8270a5b2cf1bc..67cbe87e791e2 100644 --- a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildStateError.tsx +++ b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildStateError.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { WorkspaceBuild } from "api/typesGenerated" import { CodeExample } from "components/CodeExample/CodeExample" import { Stack } from "components/Stack/Stack" diff --git a/site/src/pages/WorkspacePage/UpdateBuildParametersDialog.tsx b/site/src/pages/WorkspacePage/UpdateBuildParametersDialog.tsx index a285c9527716e..4cbd9e697229b 100644 --- a/site/src/pages/WorkspacePage/UpdateBuildParametersDialog.tsx +++ b/site/src/pages/WorkspacePage/UpdateBuildParametersDialog.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import Dialog from "@mui/material/Dialog" import DialogContent from "@mui/material/DialogContent" import DialogContentText from "@mui/material/DialogContentText" diff --git a/site/src/pages/WorkspacePage/WorkspacePage.tsx b/site/src/pages/WorkspacePage/WorkspacePage.tsx index 8daefc7966744..dad2f7792461b 100644 --- a/site/src/pages/WorkspacePage/WorkspacePage.tsx +++ b/site/src/pages/WorkspacePage/WorkspacePage.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { useQuery } from "@tanstack/react-query" import { useMachine } from "@xstate/react" import { getWorkspaceBuildLogs } from "api/api" diff --git a/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx b/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx index da791f5f48641..bfde64c4f5ebb 100644 --- a/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx +++ b/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import ScheduleIcon from "@mui/icons-material/TimerOutlined" import { Workspace } from "api/typesGenerated" import { Stack } from "components/Stack/Stack" diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx index 69c1644db2d50..e7a09d2f5eca6 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx @@ -14,7 +14,7 @@ import { WorkspaceParametersForm, } from "./WorkspaceParametersForm" import { useNavigate } from "react-router-dom" -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader" import { displaySuccess } from "components/GlobalSnackbar/utils" import { FC } from "react" diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx index e3b9ebeb2879d..053274ad12949 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { useMachine } from "@xstate/react" import { AlertBanner } from "components/AlertBanner/AlertBanner" import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog" diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx index e59aa54d518a8..7f864abce1e5e 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { Sidebar } from "./Sidebar" import { Stack } from "components/Stack/Stack" import { createContext, FC, Suspense, useContext } from "react" diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPageView.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPageView.tsx index 099991b42f577..bed0052ee6e88 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPageView.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPageView.tsx @@ -1,4 +1,4 @@ -import { makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader" import { ComponentProps, FC } from "react" import { useTranslation } from "react-i18next" diff --git a/site/src/theme/overrides.ts b/site/src/theme/overrides.ts deleted file mode 100644 index 70a155a11f6ee..0000000000000 --- a/site/src/theme/overrides.ts +++ /dev/null @@ -1,265 +0,0 @@ -import { Theme, StyleRules } from "@mui/material/styles" -import { Overrides } from "@mui/material/styles/overrides" -import { SkeletonClassKey } from "@mui/lab" -import { colors } from "./colors" -import { borderRadius, borderRadiusSm } from "./constants" - -type ExtendedOverrides = Overrides & { - MuiSkeleton: Partial> -} - -export const getOverrides = ({ - palette, - breakpoints, -}: Theme): ExtendedOverrides => { - return { - MuiCssBaseline: { - "@global": { - body: { - backgroundImage: `linear-gradient(to right bottom, ${palette.background.default}, ${colors.gray[17]})`, - backgroundRepeat: "no-repeat", - backgroundAttachment: "fixed", - }, - ":root": { - colorScheme: palette.mode, - }, - }, - }, - MuiAvatar: { - root: { - width: 36, - height: 36, - fontSize: 18, - - "& .MuiSvgIcon-root": { - width: "50%", - }, - }, - colorDefault: { - backgroundColor: colors.gray[6], - }, - }, - MuiButton: { - root: { - // Prevents a loading button from collapsing! - minHeight: 40, - height: 40, // Same size of input height - fontWeight: "normal", - fontSize: 16, - textTransform: "none", - letterSpacing: "none", - border: `1px solid ${palette.divider}`, - whiteSpace: "nowrap", - - "&:focus-visible": { - outline: `2px solid ${palette.primary.dark}`, - }, - }, - - contained: { - boxShadow: "none", - color: palette.text.primary, - backgroundColor: colors.gray[13], - borderColor: colors.gray[12], - - "&:hover:not(:disabled):not(.MuiButton-containedPrimary):not(.MuiButton-containedSecondary)": - { - boxShadow: "none", - backgroundColor: colors.gray[12], - borderColor: colors.gray[11], - }, - - "&.Mui-disabled:not(.MuiButton-containedPrimary):not(.MuiButton-containedSecondary)": - { - color: colors.gray[9], - backgroundColor: colors.gray[14], - cursor: "not-allowed", - pointerEvents: "auto", - }, - }, - sizeSmall: { - padding: `0 16px`, - fontSize: 14, - minHeight: 36, - height: 36, - borderRadius: borderRadiusSm, - }, - iconSizeSmall: { - width: 14, - height: 14, - marginLeft: "0 !important", - marginRight: 8, - - "& svg:not(.MuiCircularProgress-svg)": { - width: 14, - height: 14, - }, - }, - outlined: { - border: `1px solid ${colors.gray[11]}`, - - "&:hover:not(:disabled)": { - borderColor: colors.gray[1], - background: "none", - }, - - "&.Mui-disabled": { - color: colors.gray[9], - border: `1px solid ${colors.gray[12]}`, - pointerEvents: "auto", - cursor: "not-allowed", - }, - }, - }, - MuiIconButton: { - sizeSmall: { - "& .MuiSvgIcon-root": { - width: 20, - height: 20, - }, - }, - }, - MuiTableContainer: { - root: { - borderRadius, - border: `1px solid ${palette.divider}`, - }, - }, - MuiTable: { - root: { - borderCollapse: "unset", - border: "none", - background: palette.background.paper, - boxShadow: `0 0 0 1px ${palette.background.default} inset`, - overflow: "hidden", - - "& td": { - paddingTop: 16, - paddingBottom: 16, - background: "transparent", - }, - - [breakpoints.down("sm")]: { - // Random value based on visual adjustments. - // This is used to avoid line breaking on columns - minWidth: 1000, - }, - }, - }, - - MuiTableCell: { - head: { - fontSize: 14, - color: palette.text.secondary, - fontWeight: 600, - background: palette.background.paperLight, - }, - root: { - fontSize: 16, - background: palette.background.paper, - borderBottom: `1px solid ${palette.divider}`, - padding: "12px 8px", - // This targets the first+last td elements, and also the first+last elements - // of a TableCellLink. - "&:not(:only-child):first-child, &:not(:only-child):first-child > a": { - paddingLeft: 32, - }, - "&:not(:only-child):last-child, &:not(:only-child):last-child > a": { - paddingRight: 32, - }, - }, - }, - - MuiTableRow: { - root: { - "&:last-child .MuiTableCell-body": { - borderBottom: 0, - }, - }, - }, - - MuiInputBase: { - root: { - borderRadius, - }, - }, - MuiOutlinedInput: { - root: { - "& .MuiOutlinedInput-notchedOutline": { - borderColor: palette.divider, - }, - - "& input:-webkit-autofill": { - WebkitBoxShadow: `0 0 0 1000px ${palette.background.paper} inset`, - }, - - "&:hover:not(.Mui-focused) .MuiOutlinedInput-notchedOutline": { - borderColor: palette.divider, - }, - }, - }, - MuiLink: { - root: { - color: palette.primary.light, - }, - }, - MuiPaper: { - root: { - borderRadius, - border: `1px solid ${palette.divider}`, - }, - }, - MuiFormHelperText: { - contained: { - marginLeft: 0, - marginRight: 0, - }, - - marginDense: { - marginTop: 8, - }, - }, - MuiSkeleton: { - root: { - backgroundColor: palette.divider, - }, - }, - MuiLinearProgress: { - root: { - borderRadius: 999, - }, - }, - MuiChip: { - root: { - backgroundColor: colors.gray[12], - }, - }, - MuiMenu: { - paper: { - marginTop: 8, - borderRadius: 4, - padding: "4px 0", - minWidth: 120, - }, - }, - MuiMenuItem: { - root: { - gap: 12, - - "& .MuiSvgIcon-root": { - fontSize: 20, - }, - }, - }, - MuiSnackbar: { - anchorOriginBottomRight: { - bottom: `${24 + 36}px !important`, // 36 is the bottom bar height - }, - }, - MuiSnackbarContent: { - root: { - borderRadius: "4px !important", - }, - }, - } -} diff --git a/site/src/theme/palettes.ts b/site/src/theme/palettes.ts deleted file mode 100644 index 4f3e5315acf95..0000000000000 --- a/site/src/theme/palettes.ts +++ /dev/null @@ -1,65 +0,0 @@ -import { PaletteOptions } from "@mui/material/styles/createPalette" -import { colors } from "./colors" - -// Couldn't find a type for this so I made one. We can extend the palette if needed with module augmentation. -export type PaletteIndex = - | "primary" - | "secondary" - | "info" - | "success" - | "error" - | "warning" - -declare module "@mui/material/styles/createPalette" { - interface TypeBackground { - paperLight: string - } -} - -export const darkPalette: PaletteOptions = { - type: "dark", - primary: { - main: colors.blue[7], - contrastText: colors.blue[1], - light: colors.blue[6], - dark: colors.blue[9], - }, - secondary: { - main: colors.gray[11], - contrastText: colors.gray[4], - dark: colors.indigo[7], - }, - background: { - default: colors.gray[17], - paper: colors.gray[16], - paperLight: colors.gray[15], - }, - text: { - primary: colors.gray[1], - secondary: colors.gray[5], - disabled: colors.gray[7], - }, - divider: colors.gray[13], - warning: { - light: colors.orange[7], - main: colors.orange[11], - dark: colors.orange[15], - }, - success: { - main: colors.green[11], - dark: colors.green[15], - }, - info: { - main: colors.blue[11], - dark: colors.blue[15], - contrastText: colors.gray[4], - }, - error: { - main: colors.red[5], - dark: colors.red[15], - contrastText: colors.gray[4], - }, - action: { - hover: colors.gray[14], - }, -} diff --git a/site/src/theme/props.ts b/site/src/theme/props.ts deleted file mode 100644 index 67296de0d0c19..0000000000000 --- a/site/src/theme/props.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { ComponentsProps } from "@mui/material/styles/props" - -/** - * These are global overrides to MUI components and we may move away from using them in the future. - */ -export const props = { - MuiButtonBase: { - disableRipple: true, - }, - MuiButton: { - variant: "contained", - }, - MuiTextField: { - margin: "dense", - variant: "outlined", - spellCheck: false, - }, - MuiFormControl: { - variant: "outlined", - margin: "dense", - }, - MuiMenu: { - anchorOrigin: { - vertical: "bottom", - horizontal: "right", - }, - transformOrigin: { - vertical: "top", - horizontal: "right", - }, - // Disable the behavior of placing the select at the selected option - getContentAnchorEl: null, - }, - MuiList: { - disablePadding: true, - }, - MuiTabs: { - textColor: "primary", - indicatorColor: "primary", - }, - MuiPaper: { - elevation: 0, - }, -} as ComponentsProps diff --git a/site/src/theme/theme.ts b/site/src/theme/theme.ts index 2c1784eec96f3..759e8ac71bfd5 100644 --- a/site/src/theme/theme.ts +++ b/site/src/theme/theme.ts @@ -1,32 +1,454 @@ -import { createTheme, adaptV4Theme } from "@mui/material/styles"; -import { PaletteOptions } from "@mui/material/styles/createPalette" -import { borderRadius } from "./constants" -import { getOverrides } from "./overrides" -import { darkPalette } from "./palettes" -import { props } from "./props" -import { typography } from "./typography" -import isChromatic from "chromatic/isChromatic" - -const makeTheme = (palette: PaletteOptions) => { - const theme = createTheme(adaptV4Theme({ - palette, - typography, - shape: { - borderRadius, - }, - props, - })) - - // We want to disable transitions during chromatic snapshots - // https://www.chromatic.com/docs/animations#javascript-animations - // https://github.com/mui/material-ui/issues/10560#issuecomment-439147374 - if (isChromatic()) { - theme.transitions.create = () => "none" - } - - theme.overrides = getOverrides(theme) - - return theme -} - -export const dark = makeTheme(darkPalette) +import { colors } from "./colors" +import { ThemeOptions, createTheme } from "@mui/material/styles" +import { BODY_FONT_FAMILY, borderRadius, borderRadiusSm } from "./constants" + +export let dark = createTheme({ + palette: { + mode: "dark", + primary: { + main: colors.blue[7], + contrastText: colors.blue[1], + light: colors.blue[6], + dark: colors.blue[9], + }, + secondary: { + main: colors.gray[11], + contrastText: colors.gray[4], + dark: colors.indigo[7], + }, + background: { + default: colors.gray[17], + paper: colors.gray[16], + paperLight: colors.gray[15], + }, + text: { + primary: colors.gray[1], + secondary: colors.gray[5], + disabled: colors.gray[7], + }, + divider: colors.gray[13], + warning: { + light: colors.orange[7], + main: colors.orange[11], + dark: colors.orange[15], + }, + success: { + main: colors.green[11], + dark: colors.green[15], + }, + info: { + main: colors.blue[11], + dark: colors.blue[15], + contrastText: colors.gray[4], + }, + error: { + main: colors.red[5], + dark: colors.red[15], + contrastText: colors.gray[4], + }, + action: { + hover: colors.gray[14], + }, + }, + typography: { + fontFamily: BODY_FONT_FAMILY, + fontSize: 16, + fontWeightLight: 300, + fontWeightRegular: 400, + fontWeightMedium: 500, + h1: { + fontSize: 72, + fontWeight: 400, + letterSpacing: -2, + }, + h2: { + fontSize: 64, + letterSpacing: -2, + fontWeight: 400, + }, + h3: { + fontSize: 32, + letterSpacing: -0.3, + fontWeight: 400, + }, + h4: { + fontSize: 24, + letterSpacing: -0.3, + fontWeight: 400, + }, + h5: { + fontSize: 20, + letterSpacing: -0.3, + fontWeight: 400, + }, + h6: { + fontSize: 16, + fontWeight: 600, + }, + body1: { + fontSize: 16, + lineHeight: "24px", + }, + body2: { + fontSize: 14, + lineHeight: "20px", + }, + subtitle1: { + fontSize: 18, + lineHeight: "28px", + }, + subtitle2: { + fontSize: 16, + lineHeight: "24px", + }, + caption: { + fontSize: 12, + lineHeight: "16px", + }, + overline: { + fontSize: 12, + fontWeight: 500, + lineHeight: "16px", + letterSpacing: 1.5, + textTransform: "uppercase", + }, + button: { + fontSize: 13, + fontWeight: 600, + textTransform: "uppercase", + letterSpacing: 1.5, + }, + }, +}) + +dark = createTheme(dark, { + components: { + MuiCssBaseline: { + styleOverrides: { + "@global": { + body: { + backgroundImage: `linear-gradient(to right bottom, ${dark.palette.background.default}, ${colors.gray[17]})`, + backgroundRepeat: "no-repeat", + backgroundAttachment: "fixed", + }, + ":root": { + colorScheme: dark.palette.mode, + }, + }, + }, + }, + MuiAvatar: { + styleOverrides: { + root: { + width: 36, + height: 36, + fontSize: 18, + + "& .MuiSvgIcon-root": { + width: "50%", + }, + }, + colorDefault: { + backgroundColor: colors.gray[6], + }, + }, + }, + MuiButtonBase: { + defaultProps: { + disableRipple: true, + }, + }, + MuiButton: { + defaultProps: { + variant: "contained", + }, + styleOverrides: { + root: { + // Prevents a loading button from collapsing! + minHeight: 40, + height: 40, // Same size of input height + fontWeight: "normal", + fontSize: 16, + textTransform: "none", + letterSpacing: "none", + border: `1px solid ${dark.palette.divider}`, + whiteSpace: "nowrap", + + "&:focus-visible": { + outline: `2px solid ${dark.palette.primary.dark}`, + }, + }, + + contained: { + boxShadow: "none", + color: dark.palette.text.primary, + backgroundColor: colors.gray[13], + borderColor: colors.gray[12], + + "&:hover:not(:disabled):not(.MuiButton-containedPrimary):not(.MuiButton-containedSecondary)": + { + boxShadow: "none", + backgroundColor: colors.gray[12], + borderColor: colors.gray[11], + }, + + "&.Mui-disabled:not(.MuiButton-containedPrimary):not(.MuiButton-containedSecondary)": + { + color: colors.gray[9], + backgroundColor: colors.gray[14], + cursor: "not-allowed", + pointerEvents: "auto", + }, + }, + sizeSmall: { + padding: `0 16px`, + fontSize: 14, + minHeight: 36, + height: 36, + borderRadius: borderRadiusSm, + }, + iconSizeSmall: { + width: 14, + height: 14, + marginLeft: "0 !important", + marginRight: 8, + + "& svg:not(.MuiCircularProgress-svg)": { + width: 14, + height: 14, + }, + }, + outlined: { + border: `1px solid ${colors.gray[11]}`, + + "&:hover:not(:disabled)": { + borderColor: colors.gray[1], + background: "none", + }, + + "&.Mui-disabled": { + color: colors.gray[9], + border: `1px solid ${colors.gray[12]}`, + pointerEvents: "auto", + cursor: "not-allowed", + }, + }, + }, + }, + MuiIconButton: { + styleOverrides: { + sizeSmall: { + "& .MuiSvgIcon-root": { + width: 20, + height: 20, + }, + }, + }, + }, + MuiTableContainer: { + styleOverrides: { + root: { + borderRadius, + border: `1px solid ${dark.palette.divider}`, + }, + }, + }, + MuiTable: { + styleOverrides: { + root: { + borderCollapse: "unset", + border: "none", + background: dark.palette.background.paper, + boxShadow: `0 0 0 1px ${dark.palette.background.default} inset`, + overflow: "hidden", + + "& td": { + paddingTop: 16, + paddingBottom: 16, + background: "transparent", + }, + }, + }, + }, + MuiTableCell: { + styleOverrides: { + head: { + fontSize: 14, + color: dark.palette.text.secondary, + fontWeight: 600, + background: dark.palette.background.paperLight, + }, + root: { + fontSize: 16, + background: dark.palette.background.paper, + borderBottom: `1px solid ${dark.palette.divider}`, + padding: "12px 8px", + // This targets the first+last td elements, and also the first+last elements + // of a TableCellLink. + "&:not(:only-child):first-child, &:not(:only-child):first-child > a": + { + paddingLeft: 32, + }, + "&:not(:only-child):last-child, &:not(:only-child):last-child > a": { + paddingRight: 32, + }, + }, + }, + }, + MuiTableRow: { + styleOverrides: { + root: { + "&:last-child .MuiTableCell-body": { + borderBottom: 0, + }, + }, + }, + }, + MuiInputBase: { + styleOverrides: { + root: { + borderRadius, + }, + }, + }, + MuiOutlinedInput: { + styleOverrides: { + root: { + "& .MuiOutlinedInput-notchedOutline": { + borderColor: dark.palette.divider, + }, + + "& input:-webkit-autofill": { + WebkitBoxShadow: `0 0 0 1000px ${dark.palette.background.paper} inset`, + }, + + "&:hover:not(.Mui-focused) .MuiOutlinedInput-notchedOutline": { + borderColor: dark.palette.divider, + }, + }, + }, + }, + MuiLink: { + styleOverrides: { + root: { + color: dark.palette.primary.light, + }, + }, + }, + MuiPaper: { + defaultProps: { + elevation: 0, + }, + styleOverrides: { + root: { + borderRadius, + border: `1px solid ${dark.palette.divider}`, + }, + }, + }, + MuiFormHelperText: { + styleOverrides: { + contained: { + marginLeft: 0, + marginRight: 0, + }, + + marginDense: { + marginTop: 8, + }, + }, + }, + MuiSkeleton: { + styleOverrides: { + root: { + backgroundColor: dark.palette.divider, + }, + }, + }, + MuiLinearProgress: { + styleOverrides: { + root: { + borderRadius: 999, + }, + }, + }, + MuiChip: { + styleOverrides: { + root: { + backgroundColor: colors.gray[12], + }, + }, + }, + MuiMenu: { + defaultProps: { + anchorOrigin: { + vertical: "bottom", + horizontal: "right", + }, + transformOrigin: { + vertical: "top", + horizontal: "right", + }, + // Disable the behavior of placing the select at the selected option + getContentAnchorEl: null, + }, + styleOverrides: { + paper: { + marginTop: 8, + borderRadius: 4, + padding: "4px 0", + minWidth: 120, + }, + }, + }, + MuiMenuItem: { + styleOverrides: { + root: { + gap: 12, + + "& .MuiSvgIcon-root": { + fontSize: 20, + }, + }, + }, + }, + MuiSnackbar: { + styleOverrides: { + anchorOriginBottomRight: { + bottom: `${24 + 36}px !important`, // 36 is the bottom bar height + }, + }, + }, + MuiSnackbarContent: { + styleOverrides: { + root: { + borderRadius: "4px !important", + }, + }, + }, + MuiTextField: { + defaultProps: { + margin: "dense", + variant: "outlined", + spellCheck: false, + }, + }, + MuiFormControl: { + defaultProps: { + variant: "outlined", + margin: "dense", + }, + }, + MuiList: { + defaultProps: { + disablePadding: true, + }, + }, + MuiTabs: { + defaultProps: { + textColor: "primary", + indicatorColor: "primary", + }, + }, + }, +} as ThemeOptions) diff --git a/site/src/theme/typography.ts b/site/src/theme/typography.ts deleted file mode 100644 index 69412fc844aab..0000000000000 --- a/site/src/theme/typography.ts +++ /dev/null @@ -1,72 +0,0 @@ -import { TypographyOptions } from "@mui/material/styles/createTypography" -import { BODY_FONT_FAMILY } from "./constants" - -export const typography: TypographyOptions = { - fontFamily: BODY_FONT_FAMILY, - fontSize: 16, - fontWeightLight: 300, - fontWeightRegular: 400, - fontWeightMedium: 500, - h1: { - fontSize: 72, - fontWeight: 400, - letterSpacing: -2, - }, - h2: { - fontSize: 64, - letterSpacing: -2, - fontWeight: 400, - }, - h3: { - fontSize: 32, - letterSpacing: -0.3, - fontWeight: 400, - }, - h4: { - fontSize: 24, - letterSpacing: -0.3, - fontWeight: 400, - }, - h5: { - fontSize: 20, - letterSpacing: -0.3, - fontWeight: 400, - }, - h6: { - fontSize: 16, - fontWeight: 600, - }, - body1: { - fontSize: 16, - lineHeight: "24px", - }, - body2: { - fontSize: 14, - lineHeight: "20px", - }, - subtitle1: { - fontSize: 18, - lineHeight: "28px", - }, - subtitle2: { - fontSize: 16, - lineHeight: "24px", - }, - caption: { - fontSize: 12, - lineHeight: "16px", - }, - overline: { - fontSize: 12, - fontWeight: 500, - lineHeight: "16px", - letterSpacing: 1.5, - textTransform: "uppercase", - }, - button: { - fontSize: 13, - fontWeight: 600, - textTransform: "uppercase", - letterSpacing: 1.5, - }, -} From 1f078cef3004c499662f91a8530659b9186c4856 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Mon, 8 May 2023 13:44:11 +0000 Subject: [PATCH 05/32] Fix all TS problems --- site/package.json | 2 +- .../components/AlertBanner/AlertBanner.tsx | 3 +- .../components/AuditLogRow/AuditLogRow.tsx | 2 +- .../BorderedMenu/BorderedMenu.stories.tsx | 4 - .../BorderedMenuRow/BorderedMenuRow.tsx | 6 +- .../components/BuildsTable/BuildAvatar.tsx | 5 +- .../components/CodeExample/CodeExample.tsx | 3 +- .../DeploymentBanner/DeploymentBannerView.tsx | 4 +- .../Dialogs/DeleteDialog/DeleteDialog.tsx | 5 +- site/src/components/Dialogs/Dialog.tsx | 20 +- .../DropdownArrows/DropdownArrows.tsx | 3 +- site/src/components/Expander/Expander.tsx | 2 +- site/src/components/FormFooter/FormFooter.tsx | 2 +- site/src/components/GitAuth/GitAuth.tsx | 5 +- .../components/GroupAvatar/GroupAvatar.tsx | 2 +- site/src/components/Icons/CloseIcon.tsx | 2 +- site/src/components/Icons/FileCopyIcon.tsx | 2 +- site/src/components/Icons/GitIcon.tsx | 2 +- site/src/components/Icons/RocketIcon.tsx | 2 +- site/src/components/Icons/TerminalIcon.tsx | 2 +- .../components/Icons/UsersOutlinedIcon.tsx | 2 +- site/src/components/Icons/VSCodeIcon.tsx | 2 +- site/src/components/LastUsed/LastUsed.tsx | 3 +- .../LoadingButton/LoadingButton.tsx | 2 +- site/src/components/Logs/Logs.tsx | 5 +- .../PaginationWidget/PaginationWidget.tsx | 4 +- .../PaginationWidget/PaginationWidgetBase.tsx | 4 +- site/src/components/Pill/Pill.tsx | 13 +- .../src/components/Resources/AgentLatency.tsx | 3 +- .../components/Resources/AgentMetadata.tsx | 4 +- site/src/components/Resources/AgentRow.tsx | 16 +- .../SearchBarWithFilter.tsx | 2 +- site/src/components/Stack/Stack.tsx | 2 +- .../SyntaxHighlighter/coderTheme.ts | 3 +- site/src/components/TabPanel/TabPanel.tsx | 3 +- .../TemplateVersionEditor/MonacoEditor.tsx | 2 +- .../TemplateVersionEditor.tsx | 5 +- .../TemplateVersionStatusBadge.tsx | 2 +- .../UserAutocomplete/UserAutocomplete.tsx | 77 +++-- .../components/UserDropdown/UsersDropdown.tsx | 1 - .../UserOrGroupAutocomplete.tsx | 55 ++-- .../components/WarningAlert/WarningAlert.tsx | 4 +- .../WorkspaceBuildLogs/WorkspaceBuildLogs.tsx | 3 +- .../WorkspaceBuildProgress.tsx | 2 +- .../WorkspaceScheduleForm.tsx | 16 +- .../WorkspaceStatusBadge.tsx | 33 +- .../pages/CreateTokenPage/CreateTokenForm.tsx | 10 +- .../AppearanceSettingsPageView.tsx | 305 +++++++++--------- .../LicensesSettingsPageView.tsx | 110 +++---- .../TokensPage/TokensPage.tsx | 2 +- .../TokensPage/TokensPageView.tsx | 2 +- .../WorkspaceProxyPage/WorkspaceProxyPage.tsx | 2 +- .../WorkspacePage/ChangeVersionDialog.tsx | 87 ++--- site/src/theme/theme.ts | 8 +- site/src/utils/workspace.ts | 19 +- site/yarn.lock | 14 +- 56 files changed, 465 insertions(+), 440 deletions(-) diff --git a/site/package.json b/site/package.json index 47582e5dde241..ee9c45ff83f34 100644 --- a/site/package.json +++ b/site/package.json @@ -75,7 +75,7 @@ "react-dom": "18.2.0", "react-headless-tabs": "6.0.3", "react-helmet-async": "1.3.0", - "react-i18next": "12.1.1", + "react-i18next": "12.2.2", "react-markdown": "8.0.3", "react-router-dom": "6.4.1", "react-syntax-highlighter": "15.5.0", diff --git a/site/src/components/AlertBanner/AlertBanner.tsx b/site/src/components/AlertBanner/AlertBanner.tsx index 77c648420dea2..89a7558a442df 100644 --- a/site/src/components/AlertBanner/AlertBanner.tsx +++ b/site/src/components/AlertBanner/AlertBanner.tsx @@ -1,7 +1,7 @@ import { useState, FC, Children } from "react" import Collapse from "@mui/material/Collapse" import { Stack } from "components/Stack/Stack" -import { makeStyles, Theme } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { colors } from "theme/colors" import { useTranslation } from "react-i18next" import { getErrorDetail, getErrorMessage } from "api/errors" @@ -9,6 +9,7 @@ import { Expander } from "components/Expander/Expander" import { Severity, AlertBannerProps } from "./alertTypes" import { severityConstants } from "./severityConstants" import { AlertBannerCtas } from "./AlertBannerCtas" +import { Theme } from "@mui/material/styles" /** * @param children: the children to be displayed in the alert diff --git a/site/src/components/AuditLogRow/AuditLogRow.tsx b/site/src/components/AuditLogRow/AuditLogRow.tsx index 3e7a5f2bec0a3..322f6fc2a2f41 100644 --- a/site/src/components/AuditLogRow/AuditLogRow.tsx +++ b/site/src/components/AuditLogRow/AuditLogRow.tsx @@ -11,11 +11,11 @@ import { Stack } from "components/Stack/Stack" import { TimelineEntry } from "components/Timeline/TimelineEntry" import { UserAvatar } from "components/UserAvatar/UserAvatar" import { useState } from "react" -import { PaletteIndex } from "theme/palettes" import userAgentParser from "ua-parser-js" import { AuditLogDiff, determineGroupDiff } from "./AuditLogDiff" import { useTranslation } from "react-i18next" import { AuditLogDescription } from "./AuditLogDescription" +import { PaletteIndex } from "theme/theme" const httpStatusColor = (httpStatus: number): PaletteIndex => { // redirects are successful diff --git a/site/src/components/BorderedMenu/BorderedMenu.stories.tsx b/site/src/components/BorderedMenu/BorderedMenu.stories.tsx index 38e803979b4f1..a8dbec147bf25 100644 --- a/site/src/components/BorderedMenu/BorderedMenu.stories.tsx +++ b/site/src/components/BorderedMenu/BorderedMenu.stories.tsx @@ -1,7 +1,5 @@ import { Story } from "@storybook/react" import { BorderedMenuRow } from "../BorderedMenuRow/BorderedMenuRow" -import { BuildingIcon } from "../Icons/BuildingIcon" -import { UsersOutlinedIcon } from "../Icons/UsersOutlinedIcon" import { BorderedMenu, BorderedMenuProps } from "./BorderedMenu" export default { @@ -14,14 +12,12 @@ const Template: Story = (args: BorderedMenuProps) => ( diff --git a/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx b/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx index d033909ffde44..fa67df6cf999e 100644 --- a/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx +++ b/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx @@ -1,6 +1,5 @@ import ListItem from "@mui/material/ListItem" import { makeStyles } from "@mui/styles" -import SvgIcon from "@mui/material/SvgIcon" import CheckIcon from "@mui/icons-material/Check" import { FC } from "react" import { NavLink } from "react-router-dom" @@ -14,8 +13,6 @@ interface BorderedMenuRowProps { active?: boolean /** Optional description that appears beneath the title */ description?: string - /** An SvgIcon that will be rendered to the left of the title */ - Icon: typeof SvgIcon /** URL path */ path: string /** Required title of this row */ @@ -28,7 +25,7 @@ interface BorderedMenuRowProps { export const BorderedMenuRow: FC< React.PropsWithChildren -> = ({ active, description, Icon, path, title, variant, onClick }) => { +> = ({ active, description, path, title, variant, onClick }) => { const styles = useStyles() return ( @@ -41,7 +38,6 @@ export const BorderedMenuRow: FC< >
- {title} {active && }
diff --git a/site/src/components/BuildsTable/BuildAvatar.tsx b/site/src/components/BuildsTable/BuildAvatar.tsx index b6f39ab7d234c..e095bda76a32e 100644 --- a/site/src/components/BuildsTable/BuildAvatar.tsx +++ b/site/src/components/BuildsTable/BuildAvatar.tsx @@ -1,13 +1,14 @@ import Badge from "@mui/material/Badge" -import { Theme, useTheme, withStyles } from "@mui/material/styles" +import { useTheme, withStyles } from "@mui/styles" import { FC } from "react" import PlayArrowOutlined from "@mui/icons-material/PlayArrowOutlined" import PauseOutlined from "@mui/icons-material/PauseOutlined" import DeleteOutlined from "@mui/icons-material/DeleteOutlined" import { WorkspaceBuild, WorkspaceTransition } from "api/typesGenerated" import { getDisplayWorkspaceBuildStatus } from "utils/workspace" -import { PaletteIndex } from "theme/palettes" import { Avatar, AvatarProps } from "components/Avatar/Avatar" +import { PaletteIndex } from "theme/theme" +import { Theme } from "@mui/material/styles" interface StylesBadgeProps { type: PaletteIndex diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx index 803b78108a419..583348ba7de53 100644 --- a/site/src/components/CodeExample/CodeExample.tsx +++ b/site/src/components/CodeExample/CodeExample.tsx @@ -1,8 +1,9 @@ -import { makeStyles, Theme } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { FC } from "react" import { MONOSPACE_FONT_FAMILY } from "../../theme/constants" import { combineClasses } from "../../utils/combineClasses" import { CopyButton } from "../CopyButton/CopyButton" +import { Theme } from "@mui/material/styles" export interface CodeExampleProps { code: string diff --git a/site/src/components/DeploymentBanner/DeploymentBannerView.tsx b/site/src/components/DeploymentBanner/DeploymentBannerView.tsx index 3902f03920178..3a52a54acf4e0 100644 --- a/site/src/components/DeploymentBanner/DeploymentBannerView.tsx +++ b/site/src/components/DeploymentBanner/DeploymentBannerView.tsx @@ -281,7 +281,7 @@ const useStyles = makeStyles((theme) => ({ }, category: { marginRight: theme.spacing(2), - color: theme.palette.text.hint, + color: theme.palette.text.primary, }, values: { display: "flex", @@ -307,7 +307,7 @@ const useStyles = makeStyles((theme) => ({ }, }, refresh: { - color: theme.palette.text.hint, + color: theme.palette.text.primary, marginLeft: "auto", display: "flex", alignItems: "center", diff --git a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx index 6f668e7876deb..74fc72516f0fd 100644 --- a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx +++ b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx @@ -1,4 +1,4 @@ -import makeStyles from "@mui/material/styles/makeStyles" +import makeStyles from "@mui/styles/makeStyles" import TextField from "@mui/material/TextField" import { Maybe } from "components/Conditionals/Maybe" import { ChangeEvent, useState, PropsWithChildren, FC } from "react" @@ -57,7 +57,8 @@ export const DeleteDialog: FC> = ({ onChange={handleChange} label={t("deleteDialog.confirmLabel", { entity })} error={hasError} - helperText={hasError && t("deleteDialog.incorrectName", { entity })} /> + helperText={hasError && t("deleteDialog.incorrectName", { entity })} + /> ) diff --git a/site/src/components/Dialogs/Dialog.tsx b/site/src/components/Dialogs/Dialog.tsx index b56c8886496bc..d423d96d3897c 100644 --- a/site/src/components/Dialogs/Dialog.tsx +++ b/site/src/components/Dialogs/Dialog.tsx @@ -1,5 +1,5 @@ import MuiDialog, { DialogProps as MuiDialogProps } from "@mui/material/Dialog" -import { alpha, darken, makeStyles } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import * as React from "react" import { colors } from "theme/colors" import { combineClasses } from "../../utils/combineClasses" @@ -106,7 +106,7 @@ const useButtonStyles = makeStyles((theme) => ({ backgroundColor: theme.palette.success.main, color: theme.palette.primary.contrastText, "&:hover": { - backgroundColor: darken(theme.palette.success.main, 0.3), + backgroundColor: theme.palette.success.dark, "@media (hover: none)": { backgroundColor: "transparent", }, @@ -116,7 +116,7 @@ const useButtonStyles = makeStyles((theme) => ({ }, "&.Mui-disabled": { backgroundColor: theme.palette.action.disabledBackground, - color: alpha(theme.palette.text.disabled, 0.5), + color: theme.palette.text.secondary, }, }, @@ -124,10 +124,7 @@ const useButtonStyles = makeStyles((theme) => ({ color: theme.palette.success.main, borderColor: theme.palette.success.main, "&:hover": { - backgroundColor: alpha( - theme.palette.success.main, - theme.palette.action.hoverOpacity, - ), + backgroundColor: theme.palette.success.dark, "@media (hover: none)": { backgroundColor: "transparent", }, @@ -136,7 +133,7 @@ const useButtonStyles = makeStyles((theme) => ({ }, }, "&.Mui-disabled": { - color: alpha(theme.palette.text.disabled, 0.5), + color: theme.palette.text.secondary, borderColor: theme.palette.action.disabled, }, }, @@ -144,16 +141,13 @@ const useButtonStyles = makeStyles((theme) => ({ "&.MuiButton-text": { color: theme.palette.success.main, "&:hover": { - backgroundColor: alpha( - theme.palette.success.main, - theme.palette.action.hoverOpacity, - ), + backgroundColor: theme.palette.success.dark, "@media (hover: none)": { backgroundColor: "transparent", }, }, "&.Mui-disabled": { - color: alpha(theme.palette.text.disabled, 0.5), + color: theme.palette.text.secondary, }, }, }, diff --git a/site/src/components/DropdownArrows/DropdownArrows.tsx b/site/src/components/DropdownArrows/DropdownArrows.tsx index 74048ff5ba12c..6a26758018a30 100644 --- a/site/src/components/DropdownArrows/DropdownArrows.tsx +++ b/site/src/components/DropdownArrows/DropdownArrows.tsx @@ -1,7 +1,8 @@ -import { makeStyles, Theme } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown" import KeyboardArrowUp from "@mui/icons-material/KeyboardArrowUp" import { FC } from "react" +import { Theme } from "@mui/material/styles" const useStyles = makeStyles((theme: Theme) => ({ arrowIcon: { diff --git a/site/src/components/Expander/Expander.tsx b/site/src/components/Expander/Expander.tsx index 8550349513eb1..86c5eaa21c764 100644 --- a/site/src/components/Expander/Expander.tsx +++ b/site/src/components/Expander/Expander.tsx @@ -1,5 +1,5 @@ import Link from "@mui/material/Link" -import makeStyles from "@mui/material/styles/makeStyles" +import makeStyles from "@mui/styles/makeStyles" import { CloseDropdown, OpenDropdown, diff --git a/site/src/components/FormFooter/FormFooter.tsx b/site/src/components/FormFooter/FormFooter.tsx index 001b4a167f4a5..d4d274be33e2a 100644 --- a/site/src/components/FormFooter/FormFooter.tsx +++ b/site/src/components/FormFooter/FormFooter.tsx @@ -1,6 +1,6 @@ import Button from "@mui/material/Button" import { makeStyles } from "@mui/styles" -import { ClassNameMap } from "@mui/material/styles/withStyles" +import { ClassNameMap } from "@mui/styles/withStyles" import { FC } from "react" import { LoadingButton } from "../LoadingButton/LoadingButton" diff --git a/site/src/components/GitAuth/GitAuth.tsx b/site/src/components/GitAuth/GitAuth.tsx index 10cf4c906263a..0a5f83702fde8 100644 --- a/site/src/components/GitAuth/GitAuth.tsx +++ b/site/src/components/GitAuth/GitAuth.tsx @@ -1,6 +1,6 @@ import Button from "@mui/material/Button" import FormHelperText from "@mui/material/FormHelperText" -import { makeStyles, Theme } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { SvgIconProps } from "@mui/material/SvgIcon" import Tooltip from "@mui/material/Tooltip" import GitHub from "@mui/icons-material/GitHub" @@ -10,6 +10,7 @@ import { BitbucketIcon } from "components/Icons/BitbucketIcon" import { GitlabIcon } from "components/Icons/GitlabIcon" import { Typography } from "components/Typography/Typography" import { FC } from "react" +import { Theme } from "@mui/material/styles" export interface GitAuthProps { type: TypesGen.GitProvider @@ -41,7 +42,7 @@ export const GitAuth: FC = ({ break case "github": prettyName = "GitHub" - Icon = GitHub + Icon = GitHub as (props: SvgIconProps) => JSX.Element break case "gitlab": prettyName = "GitLab" diff --git a/site/src/components/GroupAvatar/GroupAvatar.tsx b/site/src/components/GroupAvatar/GroupAvatar.tsx index 09133cf9b628b..8b08481a670b3 100644 --- a/site/src/components/GroupAvatar/GroupAvatar.tsx +++ b/site/src/components/GroupAvatar/GroupAvatar.tsx @@ -1,6 +1,6 @@ import { Avatar } from "components/Avatar/Avatar" import Badge from "@mui/material/Badge" -import { withStyles } from "@mui/material/styles" +import { withStyles } from "@mui/styles" import Group from "@mui/icons-material/Group" import { FC } from "react" diff --git a/site/src/components/Icons/CloseIcon.tsx b/site/src/components/Icons/CloseIcon.tsx index 157be59f4c5ce..fbfc2f3d6e74c 100644 --- a/site/src/components/Icons/CloseIcon.tsx +++ b/site/src/components/Icons/CloseIcon.tsx @@ -1,6 +1,6 @@ import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon" -export const CloseIcon: typeof SvgIcon = (props: SvgIconProps) => ( +export const CloseIcon = (props: SvgIconProps) => ( ( +export const FileCopyIcon = (props: SvgIconProps) => ( ( +export const GitIcon = (props: SvgIconProps) => ( diff --git a/site/src/components/Icons/RocketIcon.tsx b/site/src/components/Icons/RocketIcon.tsx index e88239cf8b72c..36dfd11c00f92 100644 --- a/site/src/components/Icons/RocketIcon.tsx +++ b/site/src/components/Icons/RocketIcon.tsx @@ -1,6 +1,6 @@ import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon" -export const RocketIcon: typeof SvgIcon = (props: SvgIconProps) => ( +export const RocketIcon = (props: SvgIconProps) => ( diff --git a/site/src/components/Icons/TerminalIcon.tsx b/site/src/components/Icons/TerminalIcon.tsx index 149f5f0bdd211..60090c3032962 100644 --- a/site/src/components/Icons/TerminalIcon.tsx +++ b/site/src/components/Icons/TerminalIcon.tsx @@ -1,6 +1,6 @@ import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon" -export const TerminalIcon: typeof SvgIcon = (props: SvgIconProps) => ( +export const TerminalIcon = (props: SvgIconProps) => ( diff --git a/site/src/components/Icons/UsersOutlinedIcon.tsx b/site/src/components/Icons/UsersOutlinedIcon.tsx index 32b185d723fc1..aa689b4dc5321 100644 --- a/site/src/components/Icons/UsersOutlinedIcon.tsx +++ b/site/src/components/Icons/UsersOutlinedIcon.tsx @@ -1,6 +1,6 @@ import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon" -export const UsersOutlinedIcon: typeof SvgIcon = (props: SvgIconProps) => ( +export const UsersOutlinedIcon = (props: SvgIconProps) => ( ( +export const VSCodeIcon = (props: SvgIconProps) => ( { - return convert.toHtml(line.output.split(/\r/g).pop() as string); + return convert.toHtml(line.output.split(/\r/g).pop() as string) }, [line.output]) return ( diff --git a/site/src/components/PaginationWidget/PaginationWidget.tsx b/site/src/components/PaginationWidget/PaginationWidget.tsx index cbaab7cafee77..499ce52308fc6 100644 --- a/site/src/components/PaginationWidget/PaginationWidget.tsx +++ b/site/src/components/PaginationWidget/PaginationWidget.tsx @@ -1,5 +1,5 @@ import Button from "@mui/material/Button" -import { makeStyles, useTheme } from "@mui/material/styles" +import { makeStyles, useTheme } from "@mui/styles" import useMediaQuery from "@mui/material/useMediaQuery" import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft" import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight" @@ -27,7 +27,7 @@ export const PaginationWidget = ({ paginationRef, }: PaginationWidgetProps): JSX.Element | null => { const theme = useTheme() - const isMobile = useMediaQuery(theme.breakpoints.down('md')) + const isMobile = useMediaQuery(theme.breakpoints.down("md")) const styles = useStyles() const [paginationState, send] = useActor(paginationRef) diff --git a/site/src/components/PaginationWidget/PaginationWidgetBase.tsx b/site/src/components/PaginationWidget/PaginationWidgetBase.tsx index 6866daa548dc3..594150d81190b 100644 --- a/site/src/components/PaginationWidget/PaginationWidgetBase.tsx +++ b/site/src/components/PaginationWidget/PaginationWidgetBase.tsx @@ -1,5 +1,5 @@ import Button from "@mui/material/Button" -import { makeStyles, useTheme } from "@mui/material/styles" +import { makeStyles, useTheme } from "@mui/styles" import useMediaQuery from "@mui/material/useMediaQuery" import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft" import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight" @@ -21,7 +21,7 @@ export const PaginationWidgetBase = ({ onChange, }: PaginationWidgetBaseProps): JSX.Element | null => { const theme = useTheme() - const isMobile = useMediaQuery(theme.breakpoints.down('md')) + const isMobile = useMediaQuery(theme.breakpoints.down("md")) const styles = useStyles() const numPages = Math.ceil(count / limit) const isFirstPage = page === 0 diff --git a/site/src/components/Pill/Pill.tsx b/site/src/components/Pill/Pill.tsx index 445dd4f4e6191..9632ba988cc9b 100644 --- a/site/src/components/Pill/Pill.tsx +++ b/site/src/components/Pill/Pill.tsx @@ -1,6 +1,7 @@ -import { makeStyles, Theme } from "@mui/material/styles" +import { PaletteColor, Theme } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { FC } from "react" -import { PaletteIndex } from "theme/palettes" +import { PaletteIndex } from "theme/theme" import { combineClasses } from "utils/combineClasses" export interface PillProps { @@ -46,12 +47,14 @@ const useStyles = makeStyles((theme) => ({ pillColor: { backgroundColor: ({ type }) => - type ? theme.palette[type].dark : theme.palette.text.secondary, + type + ? (theme.palette[type] as PaletteColor).dark + : theme.palette.text.secondary, borderColor: ({ type, lightBorder }) => type ? lightBorder - ? theme.palette[type].light - : theme.palette[type].main + ? (theme.palette[type] as PaletteColor).light + : (theme.palette[type] as PaletteColor).main : theme.palette.text.secondary, }, diff --git a/site/src/components/Resources/AgentLatency.tsx b/site/src/components/Resources/AgentLatency.tsx index a8674747f70e5..ad7bf1c8084d8 100644 --- a/site/src/components/Resources/AgentLatency.tsx +++ b/site/src/components/Resources/AgentLatency.tsx @@ -1,5 +1,5 @@ import { useRef, useState, FC } from "react" -import { makeStyles, Theme, useTheme } from "@mui/material/styles" +import { makeStyles, useTheme } from "@mui/styles" import { HelpTooltipText, HelpPopover, @@ -7,6 +7,7 @@ import { } from "components/Tooltips/HelpTooltip" import { Stack } from "components/Stack/Stack" import { WorkspaceAgent, DERPRegion } from "api/typesGenerated" +import { Theme } from "@mui/material/styles" const getDisplayLatency = (theme: Theme, agent: WorkspaceAgent) => { // Find the right latency to display diff --git a/site/src/components/Resources/AgentMetadata.tsx b/site/src/components/Resources/AgentMetadata.tsx index 836769eafc97b..b981f9fccc2af 100644 --- a/site/src/components/Resources/AgentMetadata.tsx +++ b/site/src/components/Resources/AgentMetadata.tsx @@ -1,10 +1,10 @@ -import makeStyles from "@mui/material/styles/makeStyles" +import makeStyles from "@mui/styles/makeStyles" import { watchAgentMetadata } from "api/api" import { WorkspaceAgent, WorkspaceAgentMetadata } from "api/typesGenerated" import { Stack } from "components/Stack/Stack" import dayjs from "dayjs" import { createContext, FC, useContext, useEffect, useState } from "react" -import { Skeleton } from '@mui/material'; +import { Skeleton } from "@mui/material" import { MONOSPACE_FONT_FAMILY } from "theme/constants" type ItemStatus = "stale" | "valid" | "loading" diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx index 1c3767056bd70..4aa88edc089f8 100644 --- a/site/src/components/Resources/AgentRow.tsx +++ b/site/src/components/Resources/AgentRow.tsx @@ -1,6 +1,6 @@ import Popover from "@mui/material/Popover" -import { makeStyles, useTheme } from "@mui/material/styles" -import { Skeleton } from '@mui/material'; +import { makeStyles, useTheme } from "@mui/styles" +import { Skeleton } from "@mui/material" import { useMachine } from "@xstate/react" import CodeOutlined from "@mui/icons-material/CodeOutlined" import { @@ -381,7 +381,7 @@ export const AgentRow: FC = ({
)} - ); + ) } const useStyles = makeStyles((theme) => ({ @@ -452,7 +452,7 @@ const useStyles = makeStyles((theme) => ({ gap: theme.spacing(6), flexWrap: "wrap", - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down("md")]: { gap: theme.spacing(2), }, }, @@ -463,7 +463,7 @@ const useStyles = makeStyles((theme) => ({ gap: theme.spacing(3), flexWrap: "wrap", - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down("md")]: { gap: theme.spacing(1.5), }, }, @@ -475,7 +475,7 @@ const useStyles = makeStyles((theme) => ({ flexWrap: "wrap", flex: 1, - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down("md")]: { marginLeft: 0, justifyContent: "flex-start", }, @@ -507,7 +507,7 @@ const useStyles = makeStyles((theme) => ({ alignItems: "center", gap: theme.spacing(4), - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down("md")]: { width: "100%", }, }, @@ -522,7 +522,7 @@ const useStyles = makeStyles((theme) => ({ flexShrink: 0, width: "fit-content", - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down("md")]: { overflow: "unset", }, }, diff --git a/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx b/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx index d90044abcb901..bc3b083bc9188 100644 --- a/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx +++ b/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx @@ -5,7 +5,7 @@ import Menu from "@mui/material/Menu" import MenuItem from "@mui/material/MenuItem" import OutlinedInput from "@mui/material/OutlinedInput" import { makeStyles } from "@mui/styles" -import { Theme } from "@mui/material/styles/createTheme" +import { Theme } from "@mui/material/styles" import SearchIcon from "@mui/icons-material/Search" import debounce from "just-debounce-it" import { useCallback, useEffect, useRef, useState } from "react" diff --git a/site/src/components/Stack/Stack.tsx b/site/src/components/Stack/Stack.tsx index f6a3d72cbc44a..b157329927229 100644 --- a/site/src/components/Stack/Stack.tsx +++ b/site/src/components/Stack/Stack.tsx @@ -1,5 +1,5 @@ import { makeStyles } from "@mui/styles" -import { CSSProperties } from "@mui/material/styles/withStyles" +import { CSSProperties } from "@mui/styles/withStyles" import { FC } from "react" import { ReactNode } from "react-markdown/lib/react-markdown" import { combineClasses } from "../../utils/combineClasses" diff --git a/site/src/components/SyntaxHighlighter/coderTheme.ts b/site/src/components/SyntaxHighlighter/coderTheme.ts index df9fc101dfa1b..f12c204d56e6e 100644 --- a/site/src/components/SyntaxHighlighter/coderTheme.ts +++ b/site/src/components/SyntaxHighlighter/coderTheme.ts @@ -1,8 +1,9 @@ -import { Theme, useTheme } from "@mui/material/styles" +import { useTheme } from "@mui/styles" import { useMonaco } from "@monaco-editor/react" import { useEffect, useState } from "react" import { hslToHex } from "utils/colors" import { editor } from "monaco-editor" +import { Theme } from "@mui/material/styles" // Theme based on https://github.com/brijeshb42/monaco-themes/blob/master/themes/Dracula.json // eslint-disable-next-line @typescript-eslint/no-explicit-any -- The theme is not typed diff --git a/site/src/components/TabPanel/TabPanel.tsx b/site/src/components/TabPanel/TabPanel.tsx index 4b5c129189056..72e6d9f628217 100644 --- a/site/src/components/TabPanel/TabPanel.tsx +++ b/site/src/components/TabPanel/TabPanel.tsx @@ -1,5 +1,4 @@ import { makeStyles } from "@mui/styles" -import { alpha } from "@mui/material/styles/colorManipulator" import { FC } from "react" import { TabSidebar, TabSidebarItem } from "../TabSidebar/TabSidebar" @@ -51,7 +50,7 @@ const useStyles = makeStyles((theme) => ({ position: "absolute", left: -50, top: 31, - color: alpha(theme.palette.common.black, 0.1), + color: theme.palette.text.secondary, transition: "transform 0.3s ease", zIndex: -1, }, diff --git a/site/src/components/TemplateVersionEditor/MonacoEditor.tsx b/site/src/components/TemplateVersionEditor/MonacoEditor.tsx index 7a1aaabd5b31b..32191245422b3 100644 --- a/site/src/components/TemplateVersionEditor/MonacoEditor.tsx +++ b/site/src/components/TemplateVersionEditor/MonacoEditor.tsx @@ -1,4 +1,4 @@ -import { useTheme } from "@mui/material/styles" +import { useTheme } from "@mui/styles" import Editor, { loader } from "@monaco-editor/react" import * as monaco from "monaco-editor" import { FC, useLayoutEffect, useMemo, useState } from "react" diff --git a/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx b/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx index 85333e12c91e1..4ea39da4be33b 100644 --- a/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx +++ b/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx @@ -1,6 +1,6 @@ import Button from "@mui/material/Button" import IconButton from "@mui/material/IconButton" -import { makeStyles, Theme } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import Tooltip from "@mui/material/Tooltip" import CreateIcon from "@mui/icons-material/AddOutlined" import BuildIcon from "@mui/icons-material/BuildOutlined" @@ -46,6 +46,7 @@ import { getStatus, TemplateVersionStatusBadge, } from "./TemplateVersionStatusBadge" +import { Theme } from "@mui/material/styles" export interface TemplateVersionEditorProps { template: Template @@ -581,7 +582,7 @@ const useStyles = makeStyles< top: 0, background: theme.palette.background.default, borderBottom: `1px solid ${theme.palette.divider}`, - color: theme.palette.text.hint, + color: theme.palette.text.primary, textTransform: "uppercase", fontSize: 12, diff --git a/site/src/components/TemplateVersionEditor/TemplateVersionStatusBadge.tsx b/site/src/components/TemplateVersionEditor/TemplateVersionStatusBadge.tsx index 0ae581528549e..397d5c68ae824 100644 --- a/site/src/components/TemplateVersionEditor/TemplateVersionStatusBadge.tsx +++ b/site/src/components/TemplateVersionEditor/TemplateVersionStatusBadge.tsx @@ -1,10 +1,10 @@ import { TemplateVersion } from "api/typesGenerated" import { FC, ReactNode } from "react" -import { PaletteIndex } from "theme/palettes" import CircularProgress from "@mui/material/CircularProgress" import ErrorIcon from "@mui/icons-material/ErrorOutline" import CheckIcon from "@mui/icons-material/CheckOutlined" import { Pill } from "components/Pill/Pill" +import { PaletteIndex } from "theme/theme" export const TemplateVersionStatusBadge: FC<{ version: TemplateVersion diff --git a/site/src/components/UserAutocomplete/UserAutocomplete.tsx b/site/src/components/UserAutocomplete/UserAutocomplete.tsx index 94310efbd1092..da484dc500c78 100644 --- a/site/src/components/UserAutocomplete/UserAutocomplete.tsx +++ b/site/src/components/UserAutocomplete/UserAutocomplete.tsx @@ -10,6 +10,7 @@ import debounce from "just-debounce-it" import { ChangeEvent, FC, useEffect, useState } from "react" import { searchUserMachine } from "xServices/users/searchUserXService" import { useTranslation } from "react-i18next" +import Box from "@mui/material/Box" export type UserAutocompleteProps = { value: User | null @@ -50,7 +51,7 @@ export const UserAutocomplete: FC = ({ = ({ option.username === value.username } getOptionLabel={(option) => option.email} - renderOption={(option: User) => ( - + renderOption={(props, option) => ( + + + )} renderInput={(params) => ( - - {value.username} - - ), - endAdornment: ( - <> - {searchState.matches("searching") ? ( - - ) : null} - {params.InputProps.endAdornment} - - ), - classes: { - root: styles.inputRoot, - }, - }} - /> + <> + {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment -- Need it */} + {/* @ts-ignore -- Issue from lib https://github.com/i18next/react-i18next/issues/1543 */} + + {value.username} + + ), + endAdornment: ( + <> + {searchState.matches("searching") ? ( + + ) : null} + {params.InputProps.endAdornment} + + ), + classes: { + root: styles.inputRoot, + }, + }} + /> + )} /> ) diff --git a/site/src/components/UserDropdown/UsersDropdown.tsx b/site/src/components/UserDropdown/UsersDropdown.tsx index 4bd3c75f31403..32582b6fd08b2 100644 --- a/site/src/components/UserDropdown/UsersDropdown.tsx +++ b/site/src/components/UserDropdown/UsersDropdown.tsx @@ -54,7 +54,6 @@ export const UserDropdown: FC> = ({ isGroup(option) ? option.name : option.email } - renderOption={(option) => { + renderOption={(props, option) => { const isOptionGroup = isGroup(option) return ( - + + + ) }} options={options} loading={searchState.matches("searching")} className={styles.autocomplete} renderInput={(params) => ( - - {searchState.matches("searching") ? ( - - ) : null} - {params.InputProps.endAdornment} - - ), - }} - /> + <> + {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment -- Need it */} + {/* @ts-ignore -- Issue from lib https://github.com/i18next/react-i18next/issues/1543 */} + + {searchState.matches("searching") ? ( + + ) : null} + {params.InputProps.endAdornment} + + ), + }} + /> + )} /> ) diff --git a/site/src/components/WarningAlert/WarningAlert.tsx b/site/src/components/WarningAlert/WarningAlert.tsx index f5b90cb963df0..cf82c02760b09 100644 --- a/site/src/components/WarningAlert/WarningAlert.tsx +++ b/site/src/components/WarningAlert/WarningAlert.tsx @@ -1,7 +1,7 @@ import { useState, FC, ReactElement } from "react" import Collapse from "@mui/material/Collapse" import { Stack } from "components/Stack/Stack" -import { makeStyles, Theme } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import { colors } from "theme/colors" import ReportProblemOutlinedIcon from "@mui/icons-material/ReportProblemOutlined" import Button from "@mui/material/Button" @@ -56,7 +56,7 @@ export const WarningAlert: FC = ({ ) } -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles((theme) => ({ alertContainer: { border: `1px solid ${colors.orange[7]}`, borderRadius: theme.shape.borderRadius, diff --git a/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx b/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx index 19cb6fa25850b..79689b9c92062 100644 --- a/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx +++ b/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx @@ -1,9 +1,10 @@ -import { makeStyles, Theme } from "@mui/material/styles" +import { makeStyles } from "@mui/styles" import dayjs from "dayjs" import { FC, Fragment } from "react" import { ProvisionerJobLog } from "../../api/typesGenerated" import { MONOSPACE_FONT_FAMILY } from "../../theme/constants" import { Logs } from "../Logs/Logs" +import { Theme } from "@mui/material/styles" const Language = { seconds: "seconds", diff --git a/site/src/components/WorkspaceBuildProgress/WorkspaceBuildProgress.tsx b/site/src/components/WorkspaceBuildProgress/WorkspaceBuildProgress.tsx index 27d9927de4f13..29df203e17504 100644 --- a/site/src/components/WorkspaceBuildProgress/WorkspaceBuildProgress.tsx +++ b/site/src/components/WorkspaceBuildProgress/WorkspaceBuildProgress.tsx @@ -1,5 +1,5 @@ import LinearProgress from "@mui/material/LinearProgress" -import makeStyles from "@mui/material/styles/makeStyles" +import makeStyles from "@mui/styles/makeStyles" import { TransitionStats, Template, Workspace } from "api/typesGenerated" import dayjs, { Dayjs } from "dayjs" import { FC, useEffect, useState } from "react" diff --git a/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx b/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx index c74bfe071f788..4194d4357321a 100644 --- a/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx +++ b/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx @@ -5,7 +5,7 @@ import FormGroup from "@mui/material/FormGroup" import FormHelperText from "@mui/material/FormHelperText" import FormLabel from "@mui/material/FormLabel" import MenuItem from "@mui/material/MenuItem" -import makeStyles from "@mui/material/styles/makeStyles" +import makeStyles from "@mui/styles/makeStyles" import Switch from "@mui/material/Switch" import TextField from "@mui/material/TextField" import { @@ -307,7 +307,8 @@ export const WorkspaceScheduleForm: FC< }} label={Language.startTimeLabel} type="time" - fullWidth /> + fullWidth + /> + fullWidth + > {zones.map((zone) => ( {zone} @@ -329,7 +331,8 @@ export const WorkspaceScheduleForm: FC< + error={Boolean(form.errors.monday)} + > {Language.daysOfWeekLabel} @@ -384,12 +387,13 @@ export const WorkspaceScheduleForm: FC< inputProps={{ min: 0, step: 1 }} label={Language.ttlLabel} type="number" - fullWidth /> + fullWidth + /> - ); + ) } export const ttlShutdownAt = (formTTL: number): string => { diff --git a/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx b/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx index 37e511171f357..0ce52f7edfb36 100644 --- a/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx +++ b/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx @@ -6,8 +6,7 @@ import QueuedIcon from "@mui/icons-material/HourglassEmpty" import { WorkspaceBuild } from "api/typesGenerated" import { Pill } from "components/Pill/Pill" import i18next from "i18next" -import { FC, ReactNode, PropsWithChildren } from "react" -import { PaletteIndex } from "theme/palettes" +import { FC, PropsWithChildren } from "react" import { makeStyles } from "@mui/styles" import { combineClasses } from "utils/combineClasses" @@ -15,13 +14,7 @@ const LoadingIcon: FC = () => { return } -export const getStatus = ( - buildStatus: WorkspaceBuild["status"], -): { - type?: PaletteIndex - text: string - icon: ReactNode -} => { +export const getStatus = (buildStatus: WorkspaceBuild["status"]) => { const { t } = i18next switch (buildStatus) { @@ -29,67 +22,67 @@ export const getStatus = ( return { text: t("workspaceStatus.loading", { ns: "common" }), icon: , - } + } as const case "running": return { type: "success", text: t("workspaceStatus.running", { ns: "common" }), icon: , - } + } as const case "starting": return { type: "success", text: t("workspaceStatus.starting", { ns: "common" }), icon: , - } + } as const case "stopping": return { type: "warning", text: t("workspaceStatus.stopping", { ns: "common" }), icon: , - } + } as const case "stopped": return { type: "warning", text: t("workspaceStatus.stopped", { ns: "common" }), icon: , - } + } as const case "deleting": return { type: "warning", text: t("workspaceStatus.deleting", { ns: "common" }), icon: , - } + } as const case "deleted": return { type: "error", text: t("workspaceStatus.deleted", { ns: "common" }), icon: , - } + } as const case "canceling": return { type: "warning", text: t("workspaceStatus.canceling", { ns: "common" }), icon: , - } + } as const case "canceled": return { type: "warning", text: t("workspaceStatus.canceled", { ns: "common" }), icon: , - } + } as const case "failed": return { type: "error", text: t("workspaceStatus.failed", { ns: "common" }), icon: , - } + } as const case "pending": return { type: "info", text: t("workspaceStatus.pending", { ns: "common" }), icon: , - } + } as const } } diff --git a/site/src/pages/CreateTokenPage/CreateTokenForm.tsx b/site/src/pages/CreateTokenPage/CreateTokenForm.tsx index 343cb26f3a725..b58478e5ba5e2 100644 --- a/site/src/pages/CreateTokenPage/CreateTokenForm.tsx +++ b/site/src/pages/CreateTokenPage/CreateTokenForm.tsx @@ -5,7 +5,7 @@ import { FormFooter, HorizontalForm, } from "components/Form/Form" -import makeStyles from "@mui/material/styles/makeStyles" +import makeStyles from "@mui/styles/makeStyles" import { useTranslation } from "react-i18next" import { onChangeTrimmed, getFormHelpers } from "utils/formUtils" import TextField from "@mui/material/TextField" @@ -106,7 +106,8 @@ export const CreateTokenForm: FC = ({ fullWidth InputLabelProps={{ shrink: true, - }}> + }} + > {filterByMaxTokenLifetime(maxTokenLifetime).map((lt) => ( {lt.label} @@ -145,7 +146,8 @@ export const CreateTokenForm: FC = ({ InputLabelProps={{ shrink: true, required: true, - }} /> + }} + /> )} @@ -160,7 +162,7 @@ export const CreateTokenForm: FC = ({ } /> - ); + ) } const useStyles = makeStyles(() => ({ diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx index b860a3ca9da18..9a740a1a37d1d 100644 --- a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx +++ b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx @@ -14,13 +14,13 @@ import FormControlLabel from "@mui/material/FormControlLabel" import FormHelperText from "@mui/material/FormHelperText" import { BlockPicker } from "react-color" import { useTranslation } from "react-i18next" -import makeStyles from "@mui/material/styles/makeStyles" +import makeStyles from "@mui/styles/makeStyles" import Switch from "@mui/material/Switch" import TextField from "@mui/material/TextField" import { UpdateAppearanceConfig } from "api/typesGenerated" import { Stack } from "components/Stack/Stack" import { useFormik } from "formik" -import { useTheme } from "@mui/material/styles" +import { useTheme } from "@mui/styles" export type AppearanceSettingsPageViewProps = { appearance: UpdateAppearanceConfig @@ -68,168 +68,171 @@ export const AppearanceSettingsPageView = ({ const [backgroundColor, setBackgroundColor] = useState( serviceBannerForm.values.background_color, ) - return <> -
+ return ( + <> +
- - {isEntitled ? : } - - + + {isEntitled ? : } + + -
Submit} - > -

- Specify a custom URL for your logo to be displayed in the top left - corner of the dashboard. -

- - (e.currentTarget.style.display = "none")} - onLoad={(e) => (e.currentTarget.style.display = "inline")} - /> - - ), - }} /> -
- -
{ - updateAppearance( - { - service_banner: { - message: - "👋 **This** is a service banner. The banner's color and text are editable.", - background_color: "#004852", - enabled: true, - }, - }, - true, - ) - }} - > - {t("showPreviewLabel")} - - ) - } - validation={ - !isEntitled && ( -

- Your license does not include Service Banners.{" "} - Contact sales to learn more. -

- ) - } - > -

Configure a banner that displays a message to all users.

- - {isEntitled && ( - - { - const newState = !serviceBannerForm.values.enabled - const newBanner = { - ...serviceBannerForm.values, - enabled: newState, - } - updateAppearance( - { - service_banner: newBanner, - }, - false, - ) - await serviceBannerForm.setFieldValue("enabled", newState) - }} - /> - } - label="Enabled" - /> - - - {t("messageHelperText")} - +
Submit} + > +

+ Specify a custom URL for your logo to be displayed in the top left + corner of the dashboard. +

+ + (e.currentTarget.style.display = "none")} + onLoad={(e) => (e.currentTarget.style.display = "inline")} + /> + + ), + }} + /> +
- -

{"Background Color"}

- { - setBackgroundColor(color.hex) - await serviceBannerForm.setFieldValue( - "background_color", - color.hex, - ) +
{ updateAppearance( { service_banner: { - ...serviceBannerForm.values, - background_color: color.hex, + message: + "👋 **This** is a service banner. The banner's color and text are editable.", + background_color: "#004852", + enabled: true, }, }, true, ) }} - triangle="hide" - colors={["#004852", "#D65D0F", "#4CD473", "#D94A5D", "#5A00CF"]} - styles={{ - default: { - input: { - color: "white", - backgroundColor: theme.palette.background.default, - }, - body: { - backgroundColor: "black", - color: "white", - }, - card: { - backgroundColor: "black", - }, - }, - }} + > + {t("showPreviewLabel")} + + ) + } + validation={ + !isEntitled && ( +

+ Your license does not include Service Banners.{" "} + Contact sales to learn more. +

+ ) + } + > +

Configure a banner that displays a message to all users.

+ + {isEntitled && ( + + { + const newState = !serviceBannerForm.values.enabled + const newBanner = { + ...serviceBannerForm.values, + enabled: newState, + } + updateAppearance( + { + service_banner: newBanner, + }, + false, + ) + await serviceBannerForm.setFieldValue("enabled", newState) + }} + /> + } + label="Enabled" /> + + + {t("messageHelperText")} + + + +

{"Background Color"}

+ { + setBackgroundColor(color.hex) + await serviceBannerForm.setFieldValue( + "background_color", + color.hex, + ) + updateAppearance( + { + service_banner: { + ...serviceBannerForm.values, + background_color: color.hex, + }, + }, + true, + ) + }} + triangle="hide" + colors={["#004852", "#D65D0F", "#4CD473", "#D94A5D", "#5A00CF"]} + styles={{ + default: { + input: { + color: "white", + backgroundColor: theme.palette.background.default, + }, + body: { + backgroundColor: "black", + color: "white", + }, + card: { + backgroundColor: "black", + }, + }, + }} + /> + - - )} -
- ; + )} +
+ + ) } const useStyles = makeStyles((theme) => ({ diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx index 263635667700a..bdf7946a1acf5 100644 --- a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx +++ b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx @@ -1,6 +1,6 @@ import Button from "@mui/material/Button" -import { makeStyles, useTheme } from "@mui/material/styles" -import Skeleton from '@mui/material/Skeleton' +import { makeStyles, useTheme } from "@mui/styles" +import Skeleton from "@mui/material/Skeleton" import { GetLicensesResponse } from "api/api" import { Header } from "components/DeploySettingsLayout/Header" import { LicenseCard } from "components/LicenseCard/LicenseCard" @@ -34,64 +34,66 @@ const LicensesSettingsPageView: FC = ({ const theme = useTheme() - return <> - - -
+ - - - - - {isLoading && } +
- {!isLoading && licenses && licenses?.length > 0 && ( - - {licenses?.map((license) => ( - - ))} + - )} - {!isLoading && licenses === null && ( -
- - - No licenses yet - - Contact sales or{" "} - request a trial license to - learn more. - - + {isLoading && } + + {!isLoading && licenses && licenses?.length > 0 && ( + + {licenses?.map((license) => ( + + ))} -
- )} - ; + )} + + {!isLoading && licenses === null && ( +
+ + + No licenses yet + + Contact sales or{" "} + request a trial license to + learn more. + + + +
+ )} + + ) } const useStyles = makeStyles((theme) => ({ diff --git a/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx b/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx index 8c73b924071fc..f2ffa61e7e12a 100644 --- a/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx +++ b/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx @@ -1,7 +1,7 @@ import { FC, PropsWithChildren, useState } from "react" import { Section } from "components/SettingsLayout/Section" import { TokensPageView } from "./TokensPageView" -import makeStyles from "@mui/material/styles/makeStyles" +import makeStyles from "@mui/styles/makeStyles" import { useTranslation, Trans } from "react-i18next" import { useTokensData } from "./hooks" import { ConfirmDeleteDialog } from "./components" diff --git a/site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx b/site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx index 94a52a0c27a1d..f5680925f894b 100644 --- a/site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx +++ b/site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx @@ -1,4 +1,4 @@ -import { useTheme } from "@mui/material/styles" +import { useTheme } from "@mui/styles" import Table from "@mui/material/Table" import TableBody from "@mui/material/TableBody" import TableCell from "@mui/material/TableCell" diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyPage.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyPage.tsx index 89cb8b64172d5..bc02e7e14d27b 100644 --- a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyPage.tsx +++ b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyPage.tsx @@ -1,7 +1,7 @@ import { FC, PropsWithChildren } from "react" import { Section } from "components/SettingsLayout/Section" import { WorkspaceProxyView } from "./WorkspaceProxyView" -import makeStyles from "@mui/material/styles/makeStyles" +import makeStyles from "@mui/styles/makeStyles" import { displayError } from "components/GlobalSnackbar/utils" import { useProxy } from "contexts/ProxyContext" diff --git a/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx b/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx index adea54dc151dc..057217d1130e6 100644 --- a/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx +++ b/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx @@ -6,12 +6,13 @@ import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog" import { Stack } from "components/Stack/Stack" import { Template, TemplateVersion } from "api/typesGenerated" import { Loader } from "components/Loader/Loader" -import Autocomplete from '@mui/material/Autocomplete' +import Autocomplete from "@mui/material/Autocomplete" import { createDayString } from "utils/createDayString" import { AvatarData } from "components/AvatarData/AvatarData" import { Pill } from "components/Pill/Pill" import { Avatar } from "components/Avatar/Avatar" import CircularProgress from "@mui/material/CircularProgress" +import Box from "@mui/material/Box" export type ChangeVersionDialogProps = DialogProps & { template: Template | undefined @@ -72,46 +73,52 @@ export const ChangeVersionDialog: FC = ({ value: TemplateVersion, ) => option.id === value.id} getOptionLabel={(option) => option.name} - renderOption={(option: TemplateVersion) => ( - - {option.name} - - } - title={ - - {option.name} - {template?.active_version_id === option.id && ( - - )} - - } - subtitle={createDayString(option.created_at)} - /> + renderOption={(props, option: TemplateVersion) => ( + + + {option.name} + + } + title={ + + {option.name} + {template?.active_version_id === option.id && ( + + )} + + } + subtitle={createDayString(option.created_at)} + /> + )} renderInput={(params) => ( - - {!templateVersions ? ( - - ) : null} - {params.InputProps.endAdornment} - - ), - }} - /> + <> + {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment -- Need it */} + {/* @ts-ignore -- Issue from lib https://github.com/i18next/react-i18next/issues/1543 */} + + {!templateVersions ? ( + + ) : null} + {params.InputProps.endAdornment} + + ), + }} + /> + )} /> @@ -121,5 +128,5 @@ export const ChangeVersionDialog: FC = ({ } /> - ); + ) } diff --git a/site/src/theme/theme.ts b/site/src/theme/theme.ts index 759e8ac71bfd5..eb70d4defc22f 100644 --- a/site/src/theme/theme.ts +++ b/site/src/theme/theme.ts @@ -1,7 +1,13 @@ import { colors } from "./colors" -import { ThemeOptions, createTheme } from "@mui/material/styles" +import { ThemeOptions, createTheme, Theme } from "@mui/material/styles" import { BODY_FONT_FAMILY, borderRadius, borderRadiusSm } from "./constants" +export type PaletteIndex = keyof Theme["palette"] +export type PaletteStatusIndex = Extract< + PaletteIndex, + "error" | "warning" | "info" | "success" +> + export let dark = createTheme({ palette: { mode: "dark", diff --git a/site/src/utils/workspace.ts b/site/src/utils/workspace.ts index 9b051d2ddcca5..d180222e0a83d 100644 --- a/site/src/utils/workspace.ts +++ b/site/src/utils/workspace.ts @@ -4,7 +4,6 @@ import duration from "dayjs/plugin/duration" import minMax from "dayjs/plugin/minMax" import utc from "dayjs/plugin/utc" import semver from "semver" -import { PaletteIndex } from "theme/palettes" import * as TypesGen from "../api/typesGenerated" dayjs.extend(duration) @@ -27,48 +26,44 @@ const DisplayAgentVersionLanguage = { export const getDisplayWorkspaceBuildStatus = ( theme: Theme, build: TypesGen.WorkspaceBuild, -): { - color: string - status: string - type: PaletteIndex -} => { +) => { switch (build.job.status) { case "succeeded": return { type: "success", color: theme.palette.success.main, status: DisplayWorkspaceBuildStatusLanguage.succeeded, - } + } as const case "pending": return { type: "secondary", color: theme.palette.text.secondary, status: DisplayWorkspaceBuildStatusLanguage.pending, - } + } as const case "running": return { type: "info", color: theme.palette.primary.main, status: DisplayWorkspaceBuildStatusLanguage.running, - } + } as const case "failed": return { type: "error", color: theme.palette.text.secondary, status: DisplayWorkspaceBuildStatusLanguage.failed, - } + } as const case "canceling": return { type: "warning", color: theme.palette.warning.light, status: DisplayWorkspaceBuildStatusLanguage.canceling, - } + } as const case "canceled": return { type: "secondary", color: theme.palette.text.secondary, status: DisplayWorkspaceBuildStatusLanguage.canceled, - } + } as const } } diff --git a/site/yarn.lock b/site/yarn.lock index 2870bf8196075..2a0739e30ed23 100644 --- a/site/yarn.lock +++ b/site/yarn.lock @@ -1106,14 +1106,14 @@ core-js-pure "^3.25.1" regenerator-runtime "^0.13.11" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.17.2", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.9", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.17.2", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.9", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": version "7.21.0" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673" integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw== dependencies: regenerator-runtime "^0.13.11" -"@babel/runtime@^7.18.3", "@babel/runtime@^7.21.0": +"@babel/runtime@^7.18.3", "@babel/runtime@^7.20.6", "@babel/runtime@^7.21.0": version "7.21.5" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.5.tgz#8492dddda9644ae3bda3b45eabe87382caee7200" integrity sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q== @@ -10276,12 +10276,12 @@ react-helmet-async@1.3.0: react-fast-compare "^3.2.0" shallowequal "^1.1.0" -react-i18next@12.1.1: - version "12.1.1" - resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-12.1.1.tgz#2626cdbfe6bcb76ef833861c0184a5c4e5e3c089" - integrity sha512-mFdieOI0LDy84q3JuZU6Aou1DoWW2fhapcTGeBS8+vWSJuViuoCLQAMYSb0QoHhXS8B0WKUOPpx4cffAP7r/aA== +react-i18next@^12.2.2: + version "12.2.2" + resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-12.2.2.tgz#38a6fad11acf4f2abfc5611bdb6b1918d0f47578" + integrity sha512-KBB6buBmVKXUWNxXHdnthp+38gPyBT46hJCAIQ8rX19NFL/m2ahte2KARfIDf2tMnSAL7wwck6eDOd/9zn6aFg== dependencies: - "@babel/runtime" "^7.14.5" + "@babel/runtime" "^7.20.6" html-parse-stringify "^3.0.1" react-inspector@^6.0.0: From 77777fb65a7d9b43c6f77ac5c113fa507e4434d4 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Mon, 8 May 2023 16:31:06 +0000 Subject: [PATCH 06/32] Remove unusable test --- .../FormCloseButton.stories.tsx | 17 ----- .../FormCloseButton/FormCloseButton.test.tsx | 69 ------------------- .../FormCloseButton/FormCloseButton.tsx | 62 ----------------- .../Loader/FullScreenLoader.test.tsx | 13 ---- .../LoadingButton/LoadingButton.test.tsx | 22 ------ 5 files changed, 183 deletions(-) delete mode 100644 site/src/components/FormCloseButton/FormCloseButton.stories.tsx delete mode 100644 site/src/components/FormCloseButton/FormCloseButton.test.tsx delete mode 100644 site/src/components/FormCloseButton/FormCloseButton.tsx delete mode 100644 site/src/components/Loader/FullScreenLoader.test.tsx delete mode 100644 site/src/components/LoadingButton/LoadingButton.test.tsx diff --git a/site/src/components/FormCloseButton/FormCloseButton.stories.tsx b/site/src/components/FormCloseButton/FormCloseButton.stories.tsx deleted file mode 100644 index a100d9d141123..0000000000000 --- a/site/src/components/FormCloseButton/FormCloseButton.stories.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { Story } from "@storybook/react" -import { FormCloseButton, FormCloseButtonProps } from "./FormCloseButton" - -export default { - title: "components/FormCloseButton", - component: FormCloseButton, - argTypes: { - onClose: { action: "onClose" }, - }, -} - -const Template: Story = (args) => ( - -) - -export const Example = Template.bind({}) -Example.args = {} diff --git a/site/src/components/FormCloseButton/FormCloseButton.test.tsx b/site/src/components/FormCloseButton/FormCloseButton.test.tsx deleted file mode 100644 index 7fd1d97093be4..0000000000000 --- a/site/src/components/FormCloseButton/FormCloseButton.test.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { fireEvent, render, screen } from "@testing-library/react" -import { FormCloseButton } from "./FormCloseButton" - -describe("FormCloseButton", () => { - it("renders", async () => { - // When - render( - { - return - }} - />, - ) - - // Then - await screen.findByText("ESC") - }) - - it("calls onClose when clicked", async () => { - // Given - const onClose = jest.fn() - - // When - render() - - // Then - const element = await screen.findByText("ESC") - - // When - fireEvent.click(element) - - // Then - expect(onClose).toBeCalledTimes(1) - }) - - it("calls onClose when escape is pressed", async () => { - // Given - const onClose = jest.fn() - - // When - render() - - // Then - const element = await screen.findByText("ESC") - - // When - fireEvent.keyDown(element, { key: "Escape", code: "Esc", charCode: 27 }) - - // Then - expect(onClose).toBeCalledTimes(1) - }) - - it("doesn't call onClose if another key is pressed", async () => { - // Given - const onClose = jest.fn() - - // When - render() - - // Then - const element = await screen.findByText("ESC") - - // When - fireEvent.keyDown(element, { key: "Enter", code: "Enter", charCode: 13 }) - - // Then - expect(onClose).toBeCalledTimes(0) - }) -}) diff --git a/site/src/components/FormCloseButton/FormCloseButton.tsx b/site/src/components/FormCloseButton/FormCloseButton.tsx deleted file mode 100644 index fecb349d5a69d..0000000000000 --- a/site/src/components/FormCloseButton/FormCloseButton.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import IconButton from "@mui/material/IconButton" -import { makeStyles } from "@mui/styles" -import Typography from "@mui/material/Typography" -import { useEffect, FC, PropsWithChildren } from "react" -import { CloseIcon } from "../Icons/CloseIcon" - -export interface FormCloseButtonProps { - onClose: () => void -} - -export const FormCloseButton: FC> = ({ - onClose, -}) => { - const styles = useStyles() - - useEffect(() => { - const handleKeyPress = (event: KeyboardEvent) => { - if (event.key === "Escape") { - onClose() - } - } - - document.body.addEventListener("keydown", handleKeyPress, false) - - return () => { - document.body.removeEventListener("keydown", handleKeyPress, false) - } - }, [onClose]) - - return ( - - - - ESC - - - ) -} - -const useStyles = makeStyles((theme) => ({ - closeButton: { - position: "fixed", - top: theme.spacing(3), - right: theme.spacing(6), - opacity: 0.5, - color: theme.palette.text.primary, - "&:hover": { - opacity: 1, - }, - - [theme.breakpoints.down("md")]: { - top: theme.spacing(1), - right: theme.spacing(1), - }, - }, - label: { - position: "absolute", - left: "50%", - top: "100%", - transform: "translate(-50%, 50%)", - }, -})) diff --git a/site/src/components/Loader/FullScreenLoader.test.tsx b/site/src/components/Loader/FullScreenLoader.test.tsx deleted file mode 100644 index 3bf1ea41bd23f..0000000000000 --- a/site/src/components/Loader/FullScreenLoader.test.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { render, screen } from "@testing-library/react" -import { FullScreenLoader } from "./FullScreenLoader" - -describe("FullScreenLoader", () => { - it("renders", async () => { - // When - render() - - // Then - const element = await screen.findByRole("progressbar") - expect(element).toBeDefined() - }) -}) diff --git a/site/src/components/LoadingButton/LoadingButton.test.tsx b/site/src/components/LoadingButton/LoadingButton.test.tsx deleted file mode 100644 index c663d3db5ecbd..0000000000000 --- a/site/src/components/LoadingButton/LoadingButton.test.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { render, screen } from "@testing-library/react" -import { LoadingButton } from "./LoadingButton" - -describe("LoadingButton", () => { - it("renders", async () => { - // When - render(Sign In) - - // Then - const element = await screen.findByText("Sign In") - expect(element).toBeDefined() - }) - - it("shows spinner if loading is set to true", async () => { - // When - render(Sign in) - - // Then - const spinnerElement = await screen.findByRole("progressbar") - expect(spinnerElement).toBeDefined() - }) -}) From 479ce0771278ce407752cb7fc88632dac25476cd Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Mon, 8 May 2023 17:46:05 +0000 Subject: [PATCH 07/32] Button and input text --- site/mui.d.ts | 20 +- .../components/SignInForm/OAuthSignInForm.tsx | 2 + .../SignInForm/PasswordSignInForm.tsx | 3 +- site/src/components/SignInForm/SignInForm.tsx | 1 + site/src/theme/theme.ts | 181 ++++++------------ 5 files changed, 80 insertions(+), 127 deletions(-) diff --git a/site/mui.d.ts b/site/mui.d.ts index 8dc71ec527fd3..c8a44d589102d 100644 --- a/site/mui.d.ts +++ b/site/mui.d.ts @@ -1,11 +1,25 @@ -import { Theme } from "@mui/material/styles" +import { PaletteColor, PaletteColorOptions, Theme } from "@mui/material/styles" + +declare module "@mui/styles/defaultTheme" { + interface DefaultTheme extends Theme {} +} declare module "@mui/material/styles" { interface TypeBackground { paperLight: string } + + interface Palette { + neutral: PaletteColor + } + + interface PaletteOptions { + neutral?: PaletteColorOptions + } } -declare module "@mui/styles/defaultTheme" { - interface DefaultTheme extends Theme {} +declare module "@mui/material/Button" { + interface ButtonPropsColorOverrides { + neutral: true + } } diff --git a/site/src/components/SignInForm/OAuthSignInForm.tsx b/site/src/components/SignInForm/OAuthSignInForm.tsx index 07940ee3dbc9e..3d10026dd3022 100644 --- a/site/src/components/SignInForm/OAuthSignInForm.tsx +++ b/site/src/components/SignInForm/OAuthSignInForm.tsx @@ -43,6 +43,7 @@ export const OAuthSignInForm: FC = ({ fullWidth type="submit" variant="outlined" + size="large" > {Language.githubSignIn} @@ -57,6 +58,7 @@ export const OAuthSignInForm: FC = ({ )}`} > @@ -42,7 +37,7 @@ export const AlertBannerCtas: FC = ({ {/* close CTA */} {dismissible && ( - )} diff --git a/site/src/components/CreateUserForm/CreateUserForm.tsx b/site/src/components/CreateUserForm/CreateUserForm.tsx index ce61b8ffcc413..5537428728103 100644 --- a/site/src/components/CreateUserForm/CreateUserForm.tsx +++ b/site/src/components/CreateUserForm/CreateUserForm.tsx @@ -70,7 +70,6 @@ export const CreateUserForm: FC< autoFocus fullWidth label={Language.usernameLabel} - variant="outlined" /> diff --git a/site/src/components/DeploySettingsLayout/Header.tsx b/site/src/components/DeploySettingsLayout/Header.tsx index 23ed2591318db..441072f0ae486 100644 --- a/site/src/components/DeploySettingsLayout/Header.tsx +++ b/site/src/components/DeploySettingsLayout/Header.tsx @@ -30,7 +30,6 @@ export const Header: FC<{ component="a" href={docsHref} target="_blank" - variant="outlined" > Read the docs diff --git a/site/src/components/Dialogs/Dialog.tsx b/site/src/components/Dialogs/Dialog.tsx index d423d96d3897c..cf7538079267d 100644 --- a/site/src/components/Dialogs/Dialog.tsx +++ b/site/src/components/Dialogs/Dialog.tsx @@ -51,12 +51,7 @@ export const DialogActionButtons: React.FC = ({ return ( <> {onCancel && ( - + {cancelText} )} diff --git a/site/src/components/FormFooter/FormFooter.tsx b/site/src/components/FormFooter/FormFooter.tsx index d4d274be33e2a..6568a4ad29980 100644 --- a/site/src/components/FormFooter/FormFooter.tsx +++ b/site/src/components/FormFooter/FormFooter.tsx @@ -42,7 +42,6 @@ export const FormFooter: FC = ({ type="button" className={styles.button} onClick={onCancel} - variant="outlined" tabIndex={0} > {Language.cancelLabel} diff --git a/site/src/components/FullPageForm/FullPageForm.stories.tsx b/site/src/components/FullPageForm/FullPageForm.stories.tsx index 25a836a3c6a55..bdc8a2da10380 100644 --- a/site/src/components/FullPageForm/FullPageForm.stories.tsx +++ b/site/src/components/FullPageForm/FullPageForm.stories.tsx @@ -18,8 +18,8 @@ const Template: Story = (args) => ( }} > - - + + diff --git a/site/src/components/FullPageForm/FullPageHorizontalForm.tsx b/site/src/components/FullPageForm/FullPageHorizontalForm.tsx index e1db286ac8769..175ae224e1a3a 100644 --- a/site/src/components/FullPageForm/FullPageHorizontalForm.tsx +++ b/site/src/components/FullPageForm/FullPageHorizontalForm.tsx @@ -21,7 +21,7 @@ export const FullPageHorizontalForm: FC< + ) diff --git a/site/src/components/IconField/IconField.tsx b/site/src/components/IconField/IconField.tsx index 0ee1fe5525c92..c5ebc7e015493 100644 --- a/site/src/components/IconField/IconField.tsx +++ b/site/src/components/IconField/IconField.tsx @@ -31,7 +31,6 @@ const IconField: FC = ({ onPickEmoji, ...textFieldProps }) => { {...textFieldProps} fullWidth label={t("iconLabel")} - variant="outlined" InputProps={{ endAdornment: hasIcon ? ( @@ -51,7 +50,6 @@ const IconField: FC = ({ onPickEmoji, ...textFieldProps }) => { - diff --git a/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx b/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx index bc3b083bc9188..02b13e5a0c5ac 100644 --- a/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx +++ b/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx @@ -80,7 +80,6 @@ export const SearchBarWithFilter: React.FC< {presetFilters && presetFilters.length > 0 && ( diff --git a/site/src/components/SignInForm/PasswordSignInForm.tsx b/site/src/components/SignInForm/PasswordSignInForm.tsx index cf5a621689fcb..1e12a834dac66 100644 --- a/site/src/components/SignInForm/PasswordSignInForm.tsx +++ b/site/src/components/SignInForm/PasswordSignInForm.tsx @@ -50,7 +50,6 @@ export const PasswordSignInForm: FC = ({ fullWidth label={Language.emailLabel} type="email" - variant="outlined" /> = ({ id="password" label={Language.passwordLabel} type="password" - variant="outlined" />
= ({ loading={isSigningIn} fullWidth type="submit" - variant="outlined" > {isSigningIn ? "" : Language.passwordSignIn} diff --git a/site/src/components/SignInForm/SignInForm.tsx b/site/src/components/SignInForm/SignInForm.tsx index 1b6e1c957289a..90d654976118a 100644 --- a/site/src/components/SignInForm/SignInForm.tsx +++ b/site/src/components/SignInForm/SignInForm.tsx @@ -143,7 +143,6 @@ export const SignInForm: FC> = ({ fullWidth size="large" onClick={() => setShowPasswordAuth(true)} - variant="outlined" startIcon={} > {loginPageTranslation.t("showPassword")} diff --git a/site/src/components/Stack/Stack.stories.tsx b/site/src/components/Stack/Stack.stories.tsx index 10bd5572b2db5..490bda1442866 100644 --- a/site/src/components/Stack/Stack.stories.tsx +++ b/site/src/components/Stack/Stack.stories.tsx @@ -9,25 +9,9 @@ export default { const Template: Story = (args: StackProps) => ( - - - + + + ) diff --git a/site/src/components/TemplateLayout/TemplatePageHeader.tsx b/site/src/components/TemplateLayout/TemplatePageHeader.tsx index acf234f1785ff..41ea11557da11 100644 --- a/site/src/components/TemplateLayout/TemplatePageHeader.tsx +++ b/site/src/components/TemplateLayout/TemplatePageHeader.tsx @@ -45,7 +45,6 @@ const TemplateMenu: FC<{ return (
- diff --git a/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx b/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx index 4ea39da4be33b..2b4b679d3ae89 100644 --- a/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx +++ b/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx @@ -207,7 +207,6 @@ export const TemplateVersionEditor: FC = ({ + )} diff --git a/site/src/components/VersionsTable/VersionRow.tsx b/site/src/components/VersionsTable/VersionRow.tsx index c22fd4517ae66..13038f003ded4 100644 --- a/site/src/components/VersionsTable/VersionRow.tsx +++ b/site/src/components/VersionsTable/VersionRow.tsx @@ -74,7 +74,6 @@ export const VersionRow: React.FC = ({ onPromoteClick && ( )} diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx index e3370836f04dd..54201b6792a9f 100644 --- a/site/src/components/Workspace/Workspace.tsx +++ b/site/src/components/Workspace/Workspace.tsx @@ -208,7 +208,6 @@ export const Workspace: FC> = ({ onClick={handleBuildRetry} startIcon={} size="small" - variant="outlined" > {t("actionButton.retryDebugMode")} diff --git a/site/src/components/WorkspaceActions/Buttons.tsx b/site/src/components/WorkspaceActions/Buttons.tsx index e7da9bdef24b1..1936729f35713 100644 --- a/site/src/components/WorkspaceActions/Buttons.tsx +++ b/site/src/components/WorkspaceActions/Buttons.tsx @@ -21,7 +21,6 @@ export const UpdateButton: FC> = ({ ) @@ -52,12 +47,7 @@ export const StopButton: FC> = ({ const { t } = useTranslation("workspacePage") return ( - ) @@ -69,12 +59,7 @@ export const RestartButton: FC> = ({ const { t } = useTranslation("workspacePage") return ( - ) @@ -84,7 +69,7 @@ export const CancelButton: FC> = ({ handleAction, }) => { return ( - ) @@ -98,7 +83,7 @@ export const DisabledButton: FC> = ({ label, }) => { return ( - ) @@ -111,12 +96,5 @@ interface LoadingProps { export const ActionLoadingButton: FC> = ({ label, }) => { - return ( - - ) + return } diff --git a/site/src/components/WorkspaceStats/WorkspaceStats.tsx b/site/src/components/WorkspaceStats/WorkspaceStats.tsx index 409c0036f3890..a2552d72effc4 100644 --- a/site/src/components/WorkspaceStats/WorkspaceStats.tsx +++ b/site/src/components/WorkspaceStats/WorkspaceStats.tsx @@ -218,7 +218,6 @@ export const WorkspaceStats: FC = ({ />
diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx index 2a0d255a1ded3..f73d27cb2f0ad 100644 --- a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx +++ b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx @@ -254,7 +254,6 @@ export const CreateTemplateForm: FC = ({ fullWidth required label={t("form.fields.name")} - variant="outlined" /> @@ -270,7 +269,6 @@ export const CreateTemplateForm: FC = ({ disabled={isSubmitting} fullWidth label={t("form.fields.displayName")} - variant="outlined" /> = ({ multiline fullWidth label={t("form.fields.description")} - variant="outlined" /> = ({ onChange={onChangeTrimmed(form)} fullWidth label={t("form.fields.icon")} - variant="outlined" onPickEmoji={(value) => form.setFieldValue("icon", value)} /> @@ -314,7 +310,6 @@ export const CreateTemplateForm: FC = ({ onChange={onChangeTrimmed(form)} fullWidth label={t("form.fields.autostop")} - variant="outlined" type="number" /> @@ -339,7 +334,6 @@ export const CreateTemplateForm: FC = ({ disabled={isSubmitting || !allowAdvancedScheduling} fullWidth label={t("form.fields.maxTTL")} - variant="outlined" type="number" /> diff --git a/site/src/pages/CreateTokenPage/CreateTokenForm.tsx b/site/src/pages/CreateTokenPage/CreateTokenForm.tsx index b58478e5ba5e2..b043bbafda250 100644 --- a/site/src/pages/CreateTokenPage/CreateTokenForm.tsx +++ b/site/src/pages/CreateTokenPage/CreateTokenForm.tsx @@ -74,7 +74,6 @@ export const CreateTokenForm: FC = ({ onChange={onChangeTrimmed(form, () => setFormError(undefined))} autoFocus fullWidth - variant="outlined" /> diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx index c9d0544e97307..6256bd6ecd8b8 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx @@ -242,7 +242,6 @@ export const CreateWorkspacePageView: FC< autoFocus fullWidth label={t("nameLabel")} - variant="outlined" /> diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx index 9a740a1a37d1d..6cf27f35bcb4e 100644 --- a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx +++ b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx @@ -183,7 +183,6 @@ export const AppearanceSettingsPageView = ({ {...serviceBannerFieldHelpers("message")} fullWidth label="Message" - variant="outlined" multiline /> {t("messageHelperText")} diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx index 9dfeb2837eacd..1acaa1d2b2163 100644 --- a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx +++ b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx @@ -56,11 +56,7 @@ export const AddNewLicensePageView: FC = ({ title="Add your license" description="Enterprise licenses unlock more features on your deployment." /> - diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx index bdf7946a1acf5..6d5bdb94f4ce4 100644 --- a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx +++ b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx @@ -52,11 +52,7 @@ const LicensesSettingsPageView: FC = ({ description="Enterprise licenses unlock more features on your deployment." /> - diff --git a/site/src/pages/GitAuthPage/GitAuthPage.tsx b/site/src/pages/GitAuthPage/GitAuthPage.tsx index bfb34f19e038a..18c251a1e4b14 100644 --- a/site/src/pages/GitAuthPage/GitAuthPage.tsx +++ b/site/src/pages/GitAuthPage/GitAuthPage.tsx @@ -26,13 +26,7 @@ const GitAuthPage: FC = () => {

-
diff --git a/site/src/pages/GroupsPage/CreateGroupPageView.tsx b/site/src/pages/GroupsPage/CreateGroupPageView.tsx index 5e2fc3d910052..601f61e64c9b5 100644 --- a/site/src/pages/GroupsPage/CreateGroupPageView.tsx +++ b/site/src/pages/GroupsPage/CreateGroupPageView.tsx @@ -48,7 +48,6 @@ export const CreateGroupPageView: FC = ({ autoFocus fullWidth label="Name" - variant="outlined" /> = ({ autoComplete="avatar url" fullWidth label="Avatar URL" - variant="outlined" /> diff --git a/site/src/pages/GroupsPage/GroupPage.tsx b/site/src/pages/GroupsPage/GroupPage.tsx index ca92e3252a147..393c22a772a42 100644 --- a/site/src/pages/GroupsPage/GroupPage.tsx +++ b/site/src/pages/GroupsPage/GroupPage.tsx @@ -114,12 +114,9 @@ export const GroupPage: React.FC = () => { actions={ - + + } > diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index 7a0657d436ab0..0db5a6107086e 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx @@ -118,7 +118,6 @@ const TemplateRow: FC<{ template: Template }> = ({ template }) => { )} {canCreateGroup && isTemplateRBACEnabled && ( - + )} diff --git a/site/src/components/WorkspacesTable/WorkspacesTableBody.tsx b/site/src/components/WorkspacesTable/WorkspacesTableBody.tsx index 24e448b42fa27..01f132fd442c0 100644 --- a/site/src/components/WorkspacesTable/WorkspacesTableBody.tsx +++ b/site/src/components/WorkspacesTable/WorkspacesTableBody.tsx @@ -45,7 +45,7 @@ export const WorkspacesTableBody: FC< message={t("emptyCreateWorkspaceMessage")} description={t("emptyCreateWorkspaceDescription")} cta={ - + diff --git a/site/src/pages/AuditPage/AuditPaywall.tsx b/site/src/pages/AuditPage/AuditPaywall.tsx index 11d8877f80eea..5a3ce28d3c81b 100644 --- a/site/src/pages/AuditPage/AuditPaywall.tsx +++ b/site/src/pages/AuditPage/AuditPaywall.tsx @@ -16,7 +16,6 @@ export const AuditPaywall: FC = () => { cta={ { { - + = ({ } cta={ canCreateGroup && ( - + diff --git a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage.tsx b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage.tsx index 43141ec4c09cc..c33312b7e7efc 100644 --- a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage.tsx @@ -38,7 +38,6 @@ export const TemplatePermissionsPage: FC< cta={ = ({ diff --git a/site/src/theme/theme.ts b/site/src/theme/theme.ts index 614f423e5f844..55b777aad18d7 100644 --- a/site/src/theme/theme.ts +++ b/site/src/theme/theme.ts @@ -213,6 +213,7 @@ dark = createTheme(dark, { root: { borderRadius, border: `1px solid ${dark.palette.divider}`, + backgroundImage: "none", }, }, }, @@ -254,7 +255,6 @@ dark = createTheme(dark, { borderRadius: 4, padding: "4px 0", minWidth: 120, - backgroundImage: "none", }, }, }, From 5c45cf66e6f8af1f445386a49cefdcd831fd4208 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Mon, 8 May 2023 20:08:02 +0000 Subject: [PATCH 13/32] Fix button outlined neutral --- site/src/theme/theme.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/site/src/theme/theme.ts b/site/src/theme/theme.ts index 55b777aad18d7..c9c4249341a3f 100644 --- a/site/src/theme/theme.ts +++ b/site/src/theme/theme.ts @@ -129,6 +129,9 @@ dark = createTheme(dark, { sizeLarge: { height: BUTTON_LG_HEIGHT, }, + outlinedNeutral: { + borderColor: colors.gray[12], + }, }, }, MuiIconButton: { From 5ae26fa6863cf9f1f2ad8c29b7bbb0f913013734 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Mon, 8 May 2023 20:17:00 +0000 Subject: [PATCH 14/32] Fix --- site/src/theme/theme.ts | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/site/src/theme/theme.ts b/site/src/theme/theme.ts index c9c4249341a3f..1574eb138593f 100644 --- a/site/src/theme/theme.ts +++ b/site/src/theme/theme.ts @@ -5,6 +5,8 @@ import { BODY_FONT_FAMILY, borderRadius } from "./constants" // MUI does not have aligned heights for buttons and inputs so we have to "hack" it a little bit const INPUT_HEIGHT = 46 const BUTTON_LG_HEIGHT = 46 +const BUTTON_MD_HEIGHT = 40 +const BUTTON_SM_HEIGHT = 36 export type PaletteIndex = keyof Theme["palette"] export type PaletteStatusIndex = Extract< @@ -122,9 +124,11 @@ dark = createTheme(dark, { textTransform: "none", letterSpacing: "normal", fontWeight: 500, + height: BUTTON_MD_HEIGHT, }, sizeSmall: { borderRadius: 6, + height: BUTTON_SM_HEIGHT, }, sizeLarge: { height: BUTTON_LG_HEIGHT, @@ -132,6 +136,16 @@ dark = createTheme(dark, { outlinedNeutral: { borderColor: colors.gray[12], }, + iconSizeMedium: { + "& > .MuiSvgIcon-root": { + fontSize: 18, + }, + }, + iconSizeSmall: { + "& > .MuiSvgIcon-root": { + fontSize: 16, + }, + }, }, }, MuiIconButton: { @@ -205,7 +219,7 @@ dark = createTheme(dark, { }, MuiLink: { defaultProps: { - underline: "none", + underline: "hover", }, }, MuiPaper: { @@ -214,7 +228,6 @@ dark = createTheme(dark, { }, styleOverrides: { root: { - borderRadius, border: `1px solid ${dark.palette.divider}`, backgroundImage: "none", }, From a1cbc123b25b700ddebb9c53deb5a921fb7af42a Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Mon, 8 May 2023 20:27:35 +0000 Subject: [PATCH 15/32] Update workspace header --- site/src/components/Stats/Stats.tsx | 1 + .../TemplateLayout/TemplatePageHeader.tsx | 11 +++++++---- .../pages/TemplatesPage/TemplatesPageView.tsx | 7 ++++++- site/src/theme/theme.ts | 19 ++++++++----------- 4 files changed, 22 insertions(+), 16 deletions(-) diff --git a/site/src/components/Stats/Stats.tsx b/site/src/components/Stats/Stats.tsx index 1b8c1fb6a1e50..5adb4174f56ed 100644 --- a/site/src/components/Stats/Stats.tsx +++ b/site/src/components/Stats/Stats.tsx @@ -33,6 +33,7 @@ export const StatsItem: FC< const useStyles = makeStyles((theme) => ({ stats: { + ...theme.typography.body2, paddingLeft: theme.spacing(2), paddingRight: theme.spacing(2), borderRadius: theme.shape.borderRadius, diff --git a/site/src/components/TemplateLayout/TemplatePageHeader.tsx b/site/src/components/TemplateLayout/TemplatePageHeader.tsx index 41ea11557da11..8db6d317b97d2 100644 --- a/site/src/components/TemplateLayout/TemplatePageHeader.tsx +++ b/site/src/components/TemplateLayout/TemplatePageHeader.tsx @@ -1,5 +1,5 @@ import Button from "@mui/material/Button" -import AddCircleOutline from "@mui/icons-material/AddCircleOutline" +import AddIcon from "@mui/icons-material/AddOutlined" import { AuthorizationResponse, Template, @@ -25,6 +25,7 @@ import SettingsOutlined from "@mui/icons-material/SettingsOutlined" import DeleteOutlined from "@mui/icons-material/DeleteOutlined" import EditOutlined from "@mui/icons-material/EditOutlined" import FileCopyOutlined from "@mui/icons-material/FileCopyOutlined" +import IconButton from "@mui/material/IconButton" const TemplateMenu: FC<{ templateName: string @@ -44,14 +45,15 @@ const TemplateMenu: FC<{ return (
- + = ({ templateName }) => ( - diff --git a/site/src/theme/theme.ts b/site/src/theme/theme.ts index 1574eb138593f..2e04eb096e73b 100644 --- a/site/src/theme/theme.ts +++ b/site/src/theme/theme.ts @@ -136,6 +136,13 @@ dark = createTheme(dark, { outlinedNeutral: { borderColor: colors.gray[12], }, + containedNeutral: { + borderColor: colors.gray[12], + backgroundColor: colors.gray[13], + "&:hover": { + backgroundColor: colors.gray[12], + }, + }, iconSizeMedium: { "& > .MuiSvgIcon-root": { fontSize: 18, @@ -148,16 +155,6 @@ dark = createTheme(dark, { }, }, }, - MuiIconButton: { - styleOverrides: { - sizeSmall: { - "& .MuiSvgIcon-root": { - width: 20, - height: 20, - }, - }, - }, - }, MuiTableContainer: { styleOverrides: { root: { @@ -270,7 +267,7 @@ dark = createTheme(dark, { marginTop: 8, borderRadius: 4, padding: "4px 0", - minWidth: 120, + minWidth: 160, }, }, }, From 168814cc8773bd2b64b674dcf5810be94c2e3e18 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 9 May 2023 13:50:23 +0000 Subject: [PATCH 16/32] Fix format --- site/src/components/AvatarData/AvatarDataSkeleton.tsx | 4 ++-- .../components/TemplateVersionEditor/FileDialog.tsx | 10 ++++++---- .../PublishTemplateVersionDialog.tsx | 5 +++-- site/src/contexts/ProxyContext.tsx | 2 +- site/src/utils/schedule.ts | 4 ++-- site/yarn.lock | 2 +- 6 files changed, 15 insertions(+), 12 deletions(-) diff --git a/site/src/components/AvatarData/AvatarDataSkeleton.tsx b/site/src/components/AvatarData/AvatarDataSkeleton.tsx index 4e780cd130ac1..04c961a9cbeb7 100644 --- a/site/src/components/AvatarData/AvatarDataSkeleton.tsx +++ b/site/src/components/AvatarData/AvatarDataSkeleton.tsx @@ -1,6 +1,6 @@ import { FC } from "react" import { Stack } from "components/Stack/Stack" -import { Skeleton } from '@mui/material'; +import { Skeleton } from "@mui/material" export const AvatarDataSkeleton: FC = () => { return ( @@ -12,5 +12,5 @@ export const AvatarDataSkeleton: FC = () => { - ); + ) } diff --git a/site/src/components/TemplateVersionEditor/FileDialog.tsx b/site/src/components/TemplateVersionEditor/FileDialog.tsx index a9158e2c0332c..3c2a1943277b9 100644 --- a/site/src/components/TemplateVersionEditor/FileDialog.tsx +++ b/site/src/components/TemplateVersionEditor/FileDialog.tsx @@ -83,11 +83,12 @@ export const CreateFileDialog: FC<{ label="File Path" InputLabelProps={{ shrink: true, - }} /> + }} + /> } /> - ); + ) } export const DeleteFileDialog: FC<{ @@ -194,9 +195,10 @@ export const RenameFileDialog: FC<{ placeholder={filename} value={pathValue} onChange={handleChange} - label="File Path" /> + label="File Path" + /> } /> - ); + ) } diff --git a/site/src/components/TemplateVersionEditor/PublishTemplateVersionDialog.tsx b/site/src/components/TemplateVersionEditor/PublishTemplateVersionDialog.tsx index 67514d95918d4..98777a53b91d4 100644 --- a/site/src/components/TemplateVersionEditor/PublishTemplateVersionDialog.tsx +++ b/site/src/components/TemplateVersionEditor/PublishTemplateVersionDialog.tsx @@ -71,7 +71,8 @@ export const PublishTemplateVersionDialog: FC< disabled={isPublishing} InputLabelProps={{ shrink: true, - }} /> + }} + /> } /> - ); + ) } diff --git a/site/src/contexts/ProxyContext.tsx b/site/src/contexts/ProxyContext.tsx index 5a7d16f3b06ca..eef89b31ef239 100644 --- a/site/src/contexts/ProxyContext.tsx +++ b/site/src/contexts/ProxyContext.tsx @@ -187,7 +187,7 @@ export const getPreferredProxy = ( // Trim trailing slashes to be consistent preferredPathAppURL: pathAppURL.replace(/\/$/, ""), preferredWildcardHostname: wildcardHostname, - }; + } } // Local storage functions diff --git a/site/src/utils/schedule.ts b/site/src/utils/schedule.ts index e37abadf88951..02e37516389b9 100644 --- a/site/src/utils/schedule.ts +++ b/site/src/utils/schedule.ts @@ -37,7 +37,7 @@ const DEFAULT_TIMEZONE = "UTC" * stripTimezone strips a leading timezone from a schedule string */ export const stripTimezone = (raw: string): string => { - return raw.replace(/CRON_TZ=\S*\s/, ""); + return raw.replace(/CRON_TZ=\S*\s/, "") } /** @@ -51,7 +51,7 @@ export const extractTimezone = ( const matches = raw.match(/CRON_TZ=\S*\s/g) if (matches && matches.length > 0) { - return matches[0].replace(/CRON_TZ=/, "").trim(); + return matches[0].replace(/CRON_TZ=/, "").trim() } else { return defaultTZ } diff --git a/site/yarn.lock b/site/yarn.lock index 2a0739e30ed23..9b1c4101be564 100644 --- a/site/yarn.lock +++ b/site/yarn.lock @@ -10276,7 +10276,7 @@ react-helmet-async@1.3.0: react-fast-compare "^3.2.0" shallowequal "^1.1.0" -react-i18next@^12.2.2: +react-i18next@12.2.2: version "12.2.2" resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-12.2.2.tgz#38a6fad11acf4f2abfc5611bdb6b1918d0f47578" integrity sha512-KBB6buBmVKXUWNxXHdnthp+38gPyBT46hJCAIQ8rX19NFL/m2ahte2KARfIDf2tMnSAL7wwck6eDOd/9zn6aFg== From a5915590978c0793887d3f868a7405878b85500f Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 9 May 2023 14:00:16 +0000 Subject: [PATCH 17/32] Adjust buttons --- .../UserDropdownContent/UserDropdownContent.tsx | 1 + site/src/theme/theme.ts | 9 +++++---- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/site/src/components/UserDropdownContent/UserDropdownContent.tsx b/site/src/components/UserDropdownContent/UserDropdownContent.tsx index 43562c6a44252..c5f779b54d875 100644 --- a/site/src/components/UserDropdownContent/UserDropdownContent.tsx +++ b/site/src/components/UserDropdownContent/UserDropdownContent.tsx @@ -107,6 +107,7 @@ export const UserDropdownContent: FC = ({ const useStyles = makeStyles((theme) => ({ info: { padding: theme.spacing(2.5), + ...theme.typography.body2, }, userName: { fontWeight: 600, diff --git a/site/src/theme/theme.ts b/site/src/theme/theme.ts index 2e04eb096e73b..b206a3bd5e254 100644 --- a/site/src/theme/theme.ts +++ b/site/src/theme/theme.ts @@ -120,12 +120,13 @@ dark = createTheme(dark, { color: "neutral", }, styleOverrides: { - root: { + root: ({ theme }) => ({ textTransform: "none", letterSpacing: "normal", fontWeight: 500, height: BUTTON_MD_HEIGHT, - }, + padding: theme.spacing(1, 2), + }), sizeSmall: { borderRadius: 6, height: BUTTON_SM_HEIGHT, @@ -145,12 +146,12 @@ dark = createTheme(dark, { }, iconSizeMedium: { "& > .MuiSvgIcon-root": { - fontSize: 18, + fontSize: 16, }, }, iconSizeSmall: { "& > .MuiSvgIcon-root": { - fontSize: 16, + fontSize: 14, }, }, }, From a4bba50c4a20e1de7b83289b89423489cbf6e3ea Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 9 May 2023 14:10:11 +0000 Subject: [PATCH 18/32] Fix table loaders --- site/src/components/UsersTable/UsersTableBody.tsx | 2 +- .../components/WorkspacesTable/WorkspacesTableBody.tsx | 2 +- site/src/pages/GroupsPage/GroupsPageView.tsx | 8 ++++++-- site/src/pages/TemplatesPage/TemplatesPageView.tsx | 2 +- 4 files changed, 9 insertions(+), 5 deletions(-) diff --git a/site/src/components/UsersTable/UsersTableBody.tsx b/site/src/components/UsersTable/UsersTableBody.tsx index 064d800098759..a1317e9e4b267 100644 --- a/site/src/components/UsersTable/UsersTableBody.tsx +++ b/site/src/components/UsersTable/UsersTableBody.tsx @@ -70,7 +70,7 @@ export const UsersTableBody: FC< return ( - + diff --git a/site/src/components/WorkspacesTable/WorkspacesTableBody.tsx b/site/src/components/WorkspacesTable/WorkspacesTableBody.tsx index 01f132fd442c0..ef8c69c2ad7f7 100644 --- a/site/src/components/WorkspacesTable/WorkspacesTableBody.tsx +++ b/site/src/components/WorkspacesTable/WorkspacesTableBody.tsx @@ -29,7 +29,7 @@ export const WorkspacesTableBody: FC< } if (!workspaces) { - return + return } if (workspaces.length === 0) { diff --git a/site/src/pages/GroupsPage/GroupsPageView.tsx b/site/src/pages/GroupsPage/GroupsPageView.tsx index b06a34522fc5e..8f178b764d3f5 100644 --- a/site/src/pages/GroupsPage/GroupsPageView.tsx +++ b/site/src/pages/GroupsPage/GroupsPageView.tsx @@ -81,7 +81,7 @@ export const GroupsPageView: FC = ({ - + @@ -143,7 +143,11 @@ export const GroupsPageView: FC = ({ {group.members.length === 0 && "-"} - + {group.members.map((member) => ( - + From a24edeedf567190253c11c16ccc5efdecc18d2ee Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 9 May 2023 14:22:14 +0000 Subject: [PATCH 19/32] Few tweaks on deployment settings --- .../DeploySettingsLayout/Fieldset.tsx | 26 ++++++++++++++----- .../DeploySettingsLayout/Header.tsx | 1 - .../AppearanceSettingsPageView.tsx | 17 +++++------- 3 files changed, 26 insertions(+), 18 deletions(-) diff --git a/site/src/components/DeploySettingsLayout/Fieldset.tsx b/site/src/components/DeploySettingsLayout/Fieldset.tsx index 2be022c6f625a..1c0209979ca42 100644 --- a/site/src/components/DeploySettingsLayout/Fieldset.tsx +++ b/site/src/components/DeploySettingsLayout/Fieldset.tsx @@ -5,17 +5,27 @@ import Button from "@mui/material/Button" export const Fieldset: FC<{ children: ReactNode title: string | JSX.Element + subtitle?: string | JSX.Element validation?: string | JSX.Element | false button?: JSX.Element | false onSubmit: FormEventHandler isSubmitting?: boolean -}> = ({ title, children, validation, button, onSubmit, isSubmitting }) => { +}> = ({ + title, + subtitle, + children, + validation, + button, + onSubmit, + isSubmitting, +}) => { const styles = useStyles() return (
{title}
+ {subtitle &&
{subtitle}
}
{children}