Apply suggestions from code review

f0ssel · greyscaled · web-flow · commit bc2ed3389f8d · 2022-06-02T11:11:10.000-05:00
Co-authored-by: G r e y &lt;grey@coder.com&gt;
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx
@@ -25,30 +25,36 @@ const WorkspacesPage: FC = () => {
   const styles = useStyles()
   const [workspacesState, send] = useMachine(workspacesMachine)
 
-  const form: FormikContextType<FilterFormValues> = useFormik<FilterFormValues>({
-    initialValues: { query: workspacesState.context.filter || "" },
-    onSubmit: (data) => {
+const form = useFormik<FilterFormValues>({
+    initialValues: {
+      query: workspacesState.context.filter || "",
+    },
+    onSubmit: (values) => {
       send({
         type: "SET_FILTER",
-        query: data.query,
+        query: values.query,
       })
     },
   })
 
-  const getFieldHelpers = getFormHelpers<FilterFormValues>(form, {})
+  const getFieldHelpers = getFormHelpers<FilterFormValues>(form)
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget)
   }
+
   const handleClose = () => {
     setAnchorEl(null)
   }
+
   const setYourWorkspaces = () => {
     form.setFieldValue("query", "owner:me")
     void form.submitForm()
     handleClose()
   }
+
   const setAllWorkspaces = () => {
     form.setFieldValue("query", "")
     void form.submitForm()
@@ -60,13 +66,15 @@ const WorkspacesPage: FC = () => {
       <Margins>
         <div className={styles.actions}>
           <Stack direction="row">
-            <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
+            <Button aria-controls="filter-menu" aria-haspopup="true" onClick={handleClick}>
               Filter
             </Button>
-            <Menu id="simple-menu" anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
+
+            <Menu id="filter-menu" anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
               <MenuItem onClick={setYourWorkspaces}>Your workspaces</MenuItem>
               <MenuItem onClick={setAllWorkspaces}>All workspaces</MenuItem>
             </Menu>
+
             <form onSubmit={form.handleSubmit}>
               <TextField {...getFieldHelpers("query")} onChange={onChangeTrimmed(form)} fullWidth variant="outlined" />
             </form>
@@ -76,6 +84,7 @@ const WorkspacesPage: FC = () => {
             <Button startIcon={<AddCircleOutline />}>{Language.createButton}</Button>
           </Link>
         </div>
+
         <WorkspacesPageView
           loading={workspacesState.hasTag("loading")}
           workspaces={workspacesState.context.workspaces}
diff --git a/site/src/util/workspace.test.ts b/site/src/util/workspace.test.ts
@@ -46,9 +46,9 @@ describe("util > workspace", () => {
       ["", { Owner: "", OrganizationID: "" }],
       ["asdkfvjn", { Owner: "", OrganizationID: "" }],
       ["owner:me", { Owner: "me", OrganizationID: "" }],
-      ["owner:me owner:me2", { Owner: "me2", OrganizationID: "" }],
+      ["owner:me owner:me2", { Owner: "me", OrganizationID: "" }],
     ])(`query=%p, filter=%p`, (query, filter) => {
-      expect(workspaceQueryToFilter(query)).toBe(filter)
+      expect(workspaceQueryToFilter(query)).toEqual(filter)
     })
   })
 })
diff --git a/site/src/util/workspace.ts b/site/src/util/workspace.ts
@@ -193,23 +193,28 @@ export const isWorkspaceOn = (workspace: Workspace): boolean => {
 }
 
 export const workspaceQueryToFilter = (query?: string): WorkspaceFilter => {
-  let filter: WorkspaceFilter = {
+  const defaultFilter: WorkspaceFilter = {
     Owner: "",
     OrganizationID: "",
   }
 
-  if (query) {
-    const parts = query.split(" ")
+  const preparedQuery = query?.replace(/  +/g, " ")
 
-    parts.map((part) => {
-      if (part.startsWith("owner:")) {
-        filter = {
-          Owner: part.slice("owner:".length),
+  if (!preparedQuery) {
+    return defaultFilter
+  } else {
+    const parts = preparedQuery.split(" ")
+
+    for (const part of parts) {
+      const [key, val] = part.split(":")
+      if (key === "owner") {
+        return {
+          Owner: val,
           OrganizationID: "",
         }
       }
-    })
-  }
+    }
 
-  return filter
+    return defaultFilter
+  }
 }
