From 6e1aaaffb6b32cb91e7223b7788b769aad39120d Mon Sep 17 00:00:00 2001
From: Garrett <garrett@coder.com>
Date: Fri, 27 May 2022 23:35:06 +0000
Subject: [PATCH 1/2] feat: Add poc for workspace query filer

---
 .../WorkspacesPage/WorkspacesPageView.tsx     | 38 +++++++++++++++++--
 1 file changed, 35 insertions(+), 3 deletions(-)

diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
index bdf72223b998a..b82a8064e1867 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -6,21 +6,23 @@ import TableBody from "@material-ui/core/TableBody"
 import TableCell from "@material-ui/core/TableCell"
 import TableHead from "@material-ui/core/TableHead"
 import TableRow from "@material-ui/core/TableRow"
+import TextField from "@material-ui/core/TextField/TextField"
 import AddCircleOutline from "@material-ui/icons/AddCircleOutline"
 import useTheme from "@material-ui/styles/useTheme"
 import dayjs from "dayjs"
 import relativeTime from "dayjs/plugin/relativeTime"
-import React from "react"
 import { Link as RouterLink } from "react-router-dom"
 import * as TypesGen from "../../api/typesGenerated"
 import { AvatarData } from "../../components/AvatarData/AvatarData"
 import { Margins } from "../../components/Margins/Margins"
 import { Stack } from "../../components/Stack/Stack"
 import { getDisplayStatus } from "../../util/workspace"
+import React, { useCallback, useState } from "react"
 
 dayjs.extend(relativeTime)
 
 export const Language = {
+  filterLabel: "Filter",
   createButton: "Create workspace",
   emptyView: "so you can check out your repositories, edit your source code, and build and test your software.",
 }
@@ -34,10 +36,40 @@ export interface WorkspacesPageViewProps {
 export const WorkspacesPageView: React.FC<WorkspacesPageViewProps> = (props) => {
   const styles = useStyles()
   const theme: Theme = useTheme()
+  const [filteredWorkspaces, setFilteredWorkspaces] = useState<TypesGen.Workspace[] | undefined>(props.workspaces)
+  const [query, setQuery] = useState<string>("owner:f0ssel")
+  const handleQueryChange = useCallback(() => {
+      setQuery((query) => query)
+
+      if (query.length && filteredWorkspaces?.length) {
+        const owners: string[] = []
+        const newWorkspacers: TypesGen.Workspace[] = []
+        const phrases = query.split(" ")
+        for (const p of phrases) {
+          if (p.startsWith("owner:")) {
+            owners.push(p.slice("owner:".length))
+          }
+        }
+
+        for (const w of filteredWorkspaces) {
+          for (const o of owners) {
+            if (o === w.owner_name) {
+              newWorkspacers.push(w)
+            }
+          }
+        }
+        setFilteredWorkspaces(newWorkspacers)
+      }
+  }, [query, filteredWorkspaces])
+
   return (
     <Stack spacing={4}>
       <Margins>
         <div className={styles.actions}>
+          <TextField
+            onChange={handleQueryChange}
+            value={query}
+          />
           <Link underline="none" component={RouterLink} to="/workspaces/new">
             <Button startIcon={<AddCircleOutline />}>{Language.createButton}</Button>
           </Link>
@@ -53,7 +85,7 @@ export const WorkspacesPageView: React.FC<WorkspacesPageViewProps> = (props) =>
             </TableRow>
           </TableHead>
           <TableBody>
-            {!props.loading && !props.workspaces?.length && (
+            {!props.loading && !filteredWorkspaces?.length && (
               <TableRow>
                 <TableCell colSpan={999}>
                   <div className={styles.welcome}>
@@ -67,7 +99,7 @@ export const WorkspacesPageView: React.FC<WorkspacesPageViewProps> = (props) =>
                 </TableCell>
               </TableRow>
             )}
-            {props.workspaces?.map((workspace) => {
+            {filteredWorkspaces?.map((workspace) => {
               const status = getDisplayStatus(theme, workspace.latest_build)
               return (
                 <TableRow key={workspace.id}>

From 139e30637edfcaadbc956644fb66e28fe7b2bc56 Mon Sep 17 00:00:00 2001
From: Garrett <garrett@coder.com>
Date: Tue, 31 May 2022 22:55:09 +0000
Subject: [PATCH 2/2] fix query update

---
 .../pages/WorkspacesPage/WorkspacesPage.tsx   | 11 +++-
 .../WorkspacesPage/WorkspacesPageView.tsx     | 54 +++++++++++--------
 2 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx
index 939a225a18b64..dd56860e368b1 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx
@@ -1,16 +1,23 @@
-import { useMachine } from "@xstate/react"
-import React from "react"
+import { useMachine , useActor } from "@xstate/react"
+import React, { useContext } from "react"
 import { workspacesMachine } from "../../xServices/workspaces/workspacesXService"
 import { WorkspacesPageView } from "./WorkspacesPageView"
+import { XServiceContext } from "../../xServices/StateContext"
 
 const WorkspacesPage: React.FC = () => {
+  const xServices = useContext(XServiceContext)
+  const [authState] = useActor(xServices.authXService)
+  const { me } = authState.context
+
   const [workspacesState] = useMachine(workspacesMachine)
+  
 
   return (
     <>
       <WorkspacesPageView
         loading={workspacesState.hasTag("loading")}
         workspaces={workspacesState.context.workspaces}
+        me={me}
         error={workspacesState.context.getWorkspacesError}
       />
     </>
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
index b82a8064e1867..6627ac6d88bac 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -30,6 +30,7 @@ export const Language = {
 export interface WorkspacesPageViewProps {
   loading?: boolean
   workspaces?: TypesGen.Workspace[]
+  me?: TypesGen.User
   error?: unknown
 }
 
@@ -37,39 +38,50 @@ export const WorkspacesPageView: React.FC<WorkspacesPageViewProps> = (props) =>
   const styles = useStyles()
   const theme: Theme = useTheme()
   const [filteredWorkspaces, setFilteredWorkspaces] = useState<TypesGen.Workspace[] | undefined>(props.workspaces)
-  const [query, setQuery] = useState<string>("owner:f0ssel")
-  const handleQueryChange = useCallback(() => {
-      setQuery((query) => query)
+  const [query, setQuery] = useState<string>("owner:me")
+  const updateQuery = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const input = e.target.value
+    setQuery(input)
 
-      if (query.length && filteredWorkspaces?.length) {
-        const owners: string[] = []
-        const newWorkspacers: TypesGen.Workspace[] = []
-        const phrases = query.split(" ")
-        for (const p of phrases) {
-          if (p.startsWith("owner:")) {
-            owners.push(p.slice("owner:".length))
+    if (input.length && props.workspaces?.length) {
+      const owners: string[] = []
+      const newWorkspaces: TypesGen.Workspace[] = []
+      const phrases = input.split(" ")
+      for (const p of phrases) {
+        if (p.startsWith("owner:")) {
+          let v = p.slice("owner:".length)
+          if (v === "me" && props.me) {
+            v = props.me.username
           }
+          owners.push(v)
         }
+      }
 
-        for (const w of filteredWorkspaces) {
-          for (const o of owners) {
-            if (o === w.owner_name) {
-              newWorkspacers.push(w)
-            }
+      for (const w of props.workspaces) {
+        for (const o of owners) {
+          if (o === w.owner_name) {
+            newWorkspaces.push(w)
           }
         }
-        setFilteredWorkspaces(newWorkspacers)
       }
-  }, [query, filteredWorkspaces])
+      setFilteredWorkspaces(newWorkspaces)
+    }
+  }
+  const handleQueryChange = useCallback(updateQuery, [props.workspaces, props.me])
 
   return (
     <Stack spacing={4}>
       <Margins>
         <div className={styles.actions}>
-          <TextField
-            onChange={handleQueryChange}
-            value={query}
-          />
+        <form>
+            <TextField
+              onChange={handleQueryChange}
+              value={query}
+              fullWidth
+              label="Filter"
+              variant="outlined"
+            />
+        </form>
           <Link underline="none" component={RouterLink} to="/workspaces/new">
             <Button startIcon={<AddCircleOutline />}>{Language.createButton}</Button>
           </Link>