Add search

coder · BrunoQuaresma · May 15, 2024 · May 15, 2024 · May 15, 2024 · May 15, 2024
commit 38b10a53f13beadac27c0ecd887097908fd1ce3e
diff --git a/site/src/components/Search/SearchField.tsx b/site/src/components/Search/SearchField.tsx
@@ -12,13 +12,14 @@ type SearchFieldProps = {
   id: string;
   label: string;
   value: string;
+  className?: string;
   error?: string;
   onChange: (value: string) => void;
 };
 
 export const SearchField: FC<SearchFieldProps> = (props) => {
   const theme = useTheme();
-  const { value, label, id, error, onChange } = props;
+  const { value, label, id, error, className, onChange } = props;
   const isEmpty = value.length === 0;
 
   return (
@@ -65,7 +66,7 @@ export const SearchField: FC<SearchFieldProps> = (props) => {
         }}
         fullWidth
         placeholder="Search..."
-        css={{ fontSize: 14, height: "100%", flex: 1 }}
+        className={className}
         value={value}
         onChange={(e) => {
           onChange(e.currentTarget.value);

diff --git a/site/src/pages/WorkspacesPage/WorkspaceSearch/UserMenu.tsx b/site/src/pages/WorkspacesPage/WorkspaceSearch/UserMenu.tsx
@@ -1,3 +1,5 @@
+import { css } from "@emotion/css";
+import { useTheme } from "@emotion/react";
 import CheckOutlined from "@mui/icons-material/CheckOutlined";
 import Button from "@mui/material/Button";
 import MenuItem from "@mui/material/MenuItem";
@@ -13,6 +15,7 @@ import {
   usePopover,
   withPopover,
 } from "components/Popover/Popover";
+import { SearchField } from "components/Search/SearchField";
 import { Stack } from "components/Stack/Stack";
 import { UserAvatar } from "components/UserAvatar/UserAvatar";
 
@@ -53,6 +56,7 @@ type UserMenuProps = {
 };
 
 export const UserMenu = withPopover<UserMenuProps>((props) => {
+  const theme = useTheme();
   const popover = usePopover();
   const { placeholder, selected, onSelect } = props;
   const userOptionsQuery = useQuery({
@@ -79,23 +83,38 @@ export const UserMenu = withPopover<UserMenuProps>((props) => {
       </PopoverTrigger>
       <PopoverContent>
         {options ? (
-          <MenuList dense>
-            {options.map((option) => (
-              <MenuItem
-                selected={option.value === selected}
-                key={option.value}
-                onClick={() => {
-                  popover.setIsOpen(false);
-                  onSelect(option.value);
-                }}
-              >
-                <SelectLabel
-                  option={option}
+          <>
+            <SearchField
+              id="search"
+              label="Search user"
+              value=""
+              onChange={() => {}}
+              className={css({
+                "& fieldset": {
+                  border: 0,
+                  borderRadius: 0,
+                  borderBottom: `1px solid ${theme.palette.divider}`,
+                },
+              })}
+            />
+            <MenuList dense>
+              {options.map((option) => (
+                <MenuItem
                   selected={option.value === selected}
-                />
-              </MenuItem>
-            ))}
-          </MenuList>
+                  key={option.value}
+                  onClick={() => {
+                    popover.setIsOpen(false);
+                    onSelect(option.value);
+                  }}
+                >
+                  <SelectLabel
+                    option={option}
+                    selected={option.value === selected}
+                  />
+                </MenuItem>
+              ))}
+            </MenuList>
+          </>
         ) : (
           <Loader />
         )}