Merge branch 'main' into feat/issue-6267/add-vscode-insiders

matifali · matifali · commit a2a65de42630 · 2023-05-31T13:51:27.000Z
diff --git a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx
@@ -41,20 +41,29 @@ export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
       </Maybe>
       <p>{t("deleteDialog.confirm", { entity })}</p>
 
-      <TextField
-        fullWidth
-        autoFocus
-        className={styles.textField}
-        name="confirmation"
-        autoComplete="off"
-        id="confirmation"
-        placeholder={name}
-        value={nameValue}
-        onChange={handleChange}
-        label={t("deleteDialog.confirmLabel", { entity })}
-        error={hasError}
-        helperText={hasError && t("deleteDialog.incorrectName", { entity })}
-      />
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          if (confirmed) {
+            onConfirm()
+          }
+        }}
+      >
+        <TextField
+          fullWidth
+          autoFocus
+          className={styles.textField}
+          name="confirmation"
+          autoComplete="off"
+          id="confirmation"
+          placeholder={name}
+          value={nameValue}
+          onChange={handleChange}
+          label={t("deleteDialog.confirmLabel", { entity })}
+          error={hasError}
+          helperText={hasError && t("deleteDialog.incorrectName", { entity })}
+        />
+      </form>
     </>
   )
 
diff --git a/site/src/components/Navbar/NavbarView.tsx b/site/src/components/Navbar/NavbarView.tsx
@@ -23,6 +23,7 @@ import Divider from "@mui/material/Divider"
 import HelpOutline from "@mui/icons-material/HelpOutline"
 import Tooltip from "@mui/material/Tooltip"
 import Skeleton from "@mui/material/Skeleton"
+import { BUTTON_SM_HEIGHT } from "theme/theme"
 
 export const USERS_LINK = `/users?filter=${encodeURIComponent("status:active")}`
 
@@ -195,7 +196,7 @@ const ProxyMenu: FC<{ proxyContextValue: ProxyContextValue }> = ({
     return (
       <Skeleton
         width="160px"
-        height={30}
+        height={BUTTON_SM_HEIGHT}
         sx={{ borderRadius: "4px", transform: "none" }}
       />
     )
diff --git a/site/src/components/UserDropdown/UsersDropdown.tsx b/site/src/components/UserDropdown/UsersDropdown.tsx
@@ -9,6 +9,7 @@ import { BorderedMenu } from "../BorderedMenu/BorderedMenu"
 import { CloseDropdown, OpenDropdown } from "../DropdownArrows/DropdownArrows"
 import { UserAvatar } from "../UserAvatar/UserAvatar"
 import { UserDropdownContent } from "../UserDropdownContent/UserDropdownContent"
+import { BUTTON_SM_HEIGHT } from "theme/theme"
 
 export interface UserDropdownProps {
   user: TypesGen.User
@@ -42,7 +43,15 @@ export const UserDropdown: FC<PropsWithChildren<UserDropdownProps>> = ({
       >
         <div className={styles.inner}>
           <Badge overlap="circular">
-            <UserAvatar username={user.username} avatarURL={user.avatar_url} />
+            <UserAvatar
+              sx={{
+                width: BUTTON_SM_HEIGHT,
+                height: BUTTON_SM_HEIGHT,
+                fontSize: 16,
+              }}
+              username={user.username}
+              avatarURL={user.avatar_url}
+            />
           </Badge>
           {anchorEl ? (
             <CloseDropdown color={colors.gray[6]} />
diff --git a/site/src/components/WorkspaceActions/WorkspaceActions.tsx b/site/src/components/WorkspaceActions/WorkspaceActions.tsx
@@ -102,10 +102,7 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
           ? buttonMapping[ButtonTypesEnum.updating]
           : buttonMapping[ButtonTypesEnum.update])}
       {isRestarting && buttonMapping[ButtonTypesEnum.restarting]}
-      {!isRestarting &&
-        actionsByStatus.map((action) => (
-          <span key={action}>{buttonMapping[action]}</span>
-        ))}
+      {!isRestarting && actionsByStatus.map((action) => buttonMapping[action])}
       {canCancel && <CancelButton handleAction={handleCancel} />}
       <div>
         <IconButton
diff --git a/site/src/pages/WorkspacesPage/filter/autocompletes.ts b/site/src/pages/WorkspacesPage/filter/autocompletes.ts
@@ -9,6 +9,7 @@ import { useQuery } from "@tanstack/react-query"
 import { getTemplates, getUsers } from "api/api"
 import { WorkspaceStatuses } from "api/typesGenerated"
 import { getDisplayWorkspaceStatus } from "utils/workspace"
+import { useMe } from "hooks"
 
 type UseAutocompleteOptions<TOption extends BaseOption> = {
   id: string
@@ -50,7 +51,7 @@ const useAutocomplete = <TOption extends BaseOption = BaseOption>({
   })
   const selectedOption = selectedOptionQuery.data
   const searchOptionsQuery = useQuery({
-    queryKey: [id, "autocomplete", "search"],
+    queryKey: [id, "autocomplete", "search", query],
     queryFn: () => getOptions(query),
     enabled,
   })
@@ -114,8 +115,18 @@ export const useUsersAutocomplete = (
   value: string | undefined,
   onChange: (option: OwnerOption | undefined) => void,
   enabled?: boolean,
-) =>
-  useAutocomplete({
+) => {
+  const me = useMe()
+
+  const addMeAsFirstOption = (options: OwnerOption[]) => {
+    options = options.filter((option) => option.value !== me.username)
+    return [
+      { label: me.username, value: me.username, avatarUrl: me.avatar_url },
+      ...options,
+    ]
+  }
+
+  return useAutocomplete({
     onChange,
     enabled,
     value,
@@ -134,13 +145,16 @@ export const useUsersAutocomplete = (
     },
     getOptions: async (query) => {
       const usersRes = await getUsers({ q: query, limit: 25 })
-      return usersRes.users.map((user) => ({
+      let options: OwnerOption[] = usersRes.users.map((user) => ({
         label: user.username,
         value: user.username,
         avatarUrl: user.avatar_url,
       }))
+      options = addMeAsFirstOption(options)
+      return options
     },
   })
+}
 
 export type UsersAutocomplete = ReturnType<typeof useUsersAutocomplete>
 
diff --git a/site/src/theme/theme.ts b/site/src/theme/theme.ts
@@ -3,9 +3,9 @@ import { ThemeOptions, createTheme, Theme } from "@mui/material/styles"
 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 BUTTON_LG_HEIGHT = 42
-const BUTTON_MD_HEIGHT = 36
-const BUTTON_SM_HEIGHT = 30
+export const BUTTON_LG_HEIGHT = 40
+export const BUTTON_MD_HEIGHT = 36
+export const BUTTON_SM_HEIGHT = 32
 
 export type PaletteIndex = keyof Theme["palette"]
 export type PaletteStatusIndex = Extract<
@@ -110,6 +110,8 @@ dark = createTheme(dark, {
         },
       },
     },
+    // Button styles are based on
+    // https://tailwindui.com/components/application-ui/elements/buttons
     MuiButtonBase: {
       defaultProps: {
         disableRipple: true,
@@ -127,20 +129,26 @@ dark = createTheme(dark, {
           fontWeight: 500,
           height: BUTTON_MD_HEIGHT,
           padding: theme.spacing(1, 2),
+          borderRadius: "6px",
+          fontSize: 14,
 
           whiteSpace: "nowrap",
           ":focus-visible": {
             outline: `2px solid ${theme.palette.primary.main}`,
           },
+
+          "& .MuiLoadingButton-loadingIndicator": {
+            width: 14,
+            height: 14,
+          },
+
+          "& .MuiLoadingButton-loadingIndicator .MuiCircularProgress-root": {
+            width: "inherit !important",
+            height: "inherit !important",
+          },
         }),
         sizeSmall: {
-          borderRadius: 6,
           height: BUTTON_SM_HEIGHT,
-
-          "& .MuiCircularProgress-root": {
-            width: "14px !important",
-            height: "14px !important",
-          },
         },
         sizeLarge: {
           height: BUTTON_LG_HEIGHT,
@@ -174,6 +182,9 @@ dark = createTheme(dark, {
             fontSize: 13,
           },
         },
+        startIcon: {
+          marginLeft: "-2px",
+        },
       },
     },
     MuiTableContainer: {
