Add check

BrunoQuaresma · BrunoQuaresma · commit a423ac6da844 · 2023-05-25T12:31:24.000Z
diff --git a/site/src/pages/WorkspacesPage/Filter.tsx b/site/src/pages/WorkspacesPage/Filter.tsx
@@ -21,6 +21,7 @@ import { useSearchParams } from "react-router-dom"
 import { useQuery } from "@tanstack/react-query"
 import { getUsers, getTemplates } from "api/api"
 import Skeleton, { SkeletonProps } from "@mui/material/Skeleton"
+import CheckOutlined from "@mui/icons-material/CheckOutlined"
 
 /** Filter */
 
@@ -431,32 +432,36 @@ const OwnerFilter = ({ autocomplete }: { autocomplete: UsersAutocomplete }) => {
               handleClose()
             }}
           >
-            <UserOptionItem option={option} />
+            <UserOptionItem
+              option={option}
+              isSelected={option.value === autocomplete.selectedOption?.value}
+            />
           </MenuItem>
         )}
       />
     </div>
   )
 }
 
-const UserOptionItem = ({ option }: { option: OwnerOption }) => {
+const UserOptionItem = ({
+  option,
+  isSelected,
+}: {
+  option: OwnerOption
+  isSelected?: boolean
+}) => {
   return (
-    <Box
-      display="flex"
-      alignItems="center"
-      gap={2}
-      fontSize={14}
-      overflow="hidden"
-    >
-      <UserAvatar
-        username={option.label}
-        avatarURL={option.avatarUrl}
-        sx={{ width: 16, height: 16, fontSize: 8 }}
-      />
-      <Box component="span" overflow="hidden" textOverflow="ellipsis">
-        {option.label}
-      </Box>
-    </Box>
+    <OptionItem
+      option={option}
+      isSelected={isSelected}
+      left={
+        <UserAvatar
+          username={option.label}
+          avatarURL={option.avatarUrl}
+          sx={{ width: 16, height: 16, fontSize: 8 }}
+        />
+      }
+    />
   )
 }
 
@@ -502,32 +507,36 @@ const TemplatesFilter = ({
               handleClose()
             }}
           >
-            <TemplateOptionItem option={option} />
+            <TemplateOptionItem
+              option={option}
+              isSelected={option.value === autocomplete.selectedOption?.value}
+            />
           </MenuItem>
         )}
       />
     </div>
   )
 }
 
-const TemplateOptionItem = ({ option }: { option: TemplateOption }) => {
+const TemplateOptionItem = ({
+  option,
+  isSelected,
+}: {
+  option: TemplateOption
+  isSelected?: boolean
+}) => {
   return (
-    <Box
-      display="flex"
-      alignItems="center"
-      gap={2}
-      fontSize={14}
-      overflow="hidden"
-    >
-      <TemplateAvatar
-        templateName={option.label}
-        icon={option.icon}
-        sx={{ width: 14, height: 14, fontSize: 8 }}
-      />
-      <Box component="span" overflow="hidden" textOverflow="ellipsis">
-        {option.label}
-      </Box>
-    </Box>
+    <OptionItem
+      option={option}
+      isSelected={isSelected}
+      left={
+        <TemplateAvatar
+          templateName={option.label}
+          icon={option.icon}
+          sx={{ width: 14, height: 14, fontSize: 8 }}
+        />
+      }
+    />
   )
 }
 
@@ -589,20 +598,30 @@ const StatusFilter = ({
               handleClose()
             }}
           >
-            <StatusOptionItem option={option} />
+            <StatusOptionItem
+              option={option}
+              isSelected={option.value === autocomplete.selectedOption?.value}
+            />
           </MenuItem>
         ))}
       </Menu>
     </div>
   )
 }
 
-const StatusOptionItem = ({ option }: { option: StatusOption }) => {
+const StatusOptionItem = ({
+  option,
+  isSelected,
+}: {
+  option: StatusOption
+  isSelected?: boolean
+}) => {
   return (
-    <Box display="flex" alignItems="center" gap={2} fontSize={14}>
-      <StatusIndicator option={option} />
-      <span>{option.label}</span>
-    </Box>
+    <OptionItem
+      option={option}
+      left={<StatusIndicator option={option} />}
+      isSelected={isSelected}
+    />
   )
 }
 
@@ -620,6 +639,33 @@ const StatusIndicator: FC<{ option: StatusOption }> = ({ option }) => {
   )
 }
 
+type OptionItemProps = {
+  option: BaseOption
+  left?: ReactNode
+  isSelected?: boolean
+}
+
+const OptionItem = ({ option, left, isSelected }: OptionItemProps) => {
+  return (
+    <Box
+      display="flex"
+      alignItems="center"
+      gap={2}
+      fontSize={14}
+      overflow="hidden"
+      width="100%"
+    >
+      {left}
+      <Box component="span" overflow="hidden" textOverflow="ellipsis">
+        {option.label}
+      </Box>
+      {isSelected && (
+        <CheckOutlined sx={{ width: 16, height: 16, marginLeft: "auto" }} />
+      )}
+    </Box>
+  )
+}
+
 const MenuButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   return (
     <Button
