coder · Kira-Pilot · Jun 1, 2022 · Jun 1, 2022 · Jun 1, 2022 · Jun 2, 2022
diff --git a/coderd/database/queries.sql.go b/coderd/database/queries.sql.go
diff --git a/coderd/database/queries/workspaces.sql b/coderd/database/queries/workspaces.sql
@@ -28,6 +28,12 @@ WHERE
 				owner_id = @owner_id
 		  ELSE true
 	END
+	-- Filter by name
+	AND CASE
+		  WHEN @name :: string != '' THEN
+				name = LOWER(@name)
+		  ELSE true
+	END
 ;
 
 -- name: GetWorkspacesByOrganizationIDs :many

diff --git a/coderd/workspaces.go b/coderd/workspaces.go
@@ -137,17 +137,14 @@ func (api *API) workspaces(rw http.ResponseWriter, r *http.Request) {
 	// Empty strings mean no filter
 	orgFilter := r.URL.Query().Get("organization_id")
 	ownerFilter := r.URL.Query().Get("owner")
+	nameFilter := r.URL.Query().Get("name")
 
 	filter := database.GetWorkspacesWithFilterParams{Deleted: false}
 	if orgFilter != "" {
 		orgID, err := uuid.Parse(orgFilter)
-		if err != nil {
-			httpapi.Write(rw, http.StatusBadRequest, httpapi.Response{
-				Message: fmt.Sprintf("organization_id must be a uuid: %s", err.Error()),
-			})
-			return
+		if err == nil {
+			filter.OrganizationID = orgID
 		}
-		filter.OrganizationID = orgID
 	}
 	if ownerFilter == "me" {
 		filter.OwnerID = apiKey.UserID
@@ -160,15 +157,15 @@ func (api *API) workspaces(rw http.ResponseWriter, r *http.Request) {
 				Username: ownerFilter,
 				Email:    ownerFilter,
 			})
-			if err != nil {
-				httpapi.Write(rw, http.StatusBadRequest, httpapi.Response{
-					Message: "owner must be a uuid or username",
-				})
-				return
+			if err == nil {
+				filter.OwnerID = user.ID
 			}
-			userID = user.ID
+		} else {
+			filter.OwnerID = userID
 		}
-		filter.OwnerID = userID
+	}
+	if nameFilter != "" {
+		filter.Name = nameFilter
 	}
 
 	workspaces, err := api.Database.GetWorkspacesWithFilter(r.Context(), filter)

diff --git a/codersdk/workspaces.go b/codersdk/workspaces.go
@@ -198,9 +198,10 @@ func (c *Client) PutExtendWorkspace(ctx context.Context, id uuid.UUID, req PutEx
 }
 
 type WorkspaceFilter struct {
-	OrganizationID uuid.UUID
+	OrganizationID uuid.UUID `json:"organization_id,omitempty"`
 	// Owner can be a user_id (uuid), "me", or a username
-	Owner string
+	Owner string `json:"owner,omitempty"`
+	Name  string `json:"name,omitempty"`
 }
 
 // asRequestOption returns a function that can be used in (*Client).Request.
@@ -214,6 +215,9 @@ func (f WorkspaceFilter) asRequestOption() requestOption {
 		if f.Owner != "" {
 			q.Set("owner", f.Owner)
 		}
+		if f.Name != "" {
+			q.Set("name", f.Name)
+		}
 		r.URL.RawQuery = q.Encode()
 	}
 }

diff --git a/site/src/api/api.test.ts b/site/src/api/api.test.ts
@@ -118,10 +118,10 @@ describe("api.ts", () => {
     it.each<[TypesGen.WorkspaceFilter | undefined, string]>([
       [undefined, "/api/v2/workspaces"],
 
-      [{ OrganizationID: "1", Owner: "" }, "/api/v2/workspaces?organization_id=1"],
-      [{ OrganizationID: "", Owner: "1" }, "/api/v2/workspaces?owner=1"],
+      [{ organization_id: "1", owner: "" }, "/api/v2/workspaces?organization_id=1"],
+      [{ organization_id: "", owner: "1" }, "/api/v2/workspaces?owner=1"],
 
-      [{ OrganizationID: "1", Owner: "me" }, "/api/v2/workspaces?organization_id=1&owner=me"],
+      [{ organization_id: "1", owner: "me" }, "/api/v2/workspaces?organization_id=1&owner=me"],
     ])(`getWorkspacesURL(%p) returns %p`, (filter, expected) => {
       expect(getWorkspacesURL(filter)).toBe(expected)
     })

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -116,11 +116,14 @@ export const getWorkspacesURL = (filter?: TypesGen.WorkspaceFilter): string => {
   const basePath = "/api/v2/workspaces"
   const searchParams = new URLSearchParams()
 
-  if (filter?.OrganizationID) {
-    searchParams.append("organization_id", filter.OrganizationID)
+  if (filter?.organization_id) {
+    searchParams.append("organization_id", filter.organization_id)
   }
-  if (filter?.Owner) {
-    searchParams.append("owner", filter.Owner)
+  if (filter?.owner) {
+    searchParams.append("owner", filter.owner)
+  }
+  if (filter?.name) {
+    searchParams.append("name", filter.name)
   }
 
   const searchString = searchParams.toString()

diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts
@@ -88,7 +88,7 @@ export interface CreateUserRequest {
   readonly organization_id: string
 }
 
-// From codersdk/workspaces.go:34:6
+// From codersdk/workspaces.go:35:6
 export interface CreateWorkspaceBuildRequest {
   readonly template_version_id?: string
   readonly transition: WorkspaceTransition
@@ -222,7 +222,7 @@ export interface ProvisionerJobLog {
   readonly output: string
 }
 
-// From codersdk/workspaces.go:182:6
+// From codersdk/workspaces.go:183:6
 export interface PutExtendWorkspaceRequest {
   readonly deadline: string
 }
@@ -299,12 +299,12 @@ export interface UpdateUserProfileRequest {
   readonly username: string
 }
 
-// From codersdk/workspaces.go:141:6
+// From codersdk/workspaces.go:142:6
 export interface UpdateWorkspaceAutostartRequest {
   readonly schedule: string
 }
 
-// From codersdk/workspaces.go:161:6
+// From codersdk/workspaces.go:162:6
 export interface UpdateWorkspaceTTLRequest {
   // This is likely an enum in an external package ("time.Duration")
   readonly ttl?: number
@@ -360,7 +360,7 @@ export interface UsersRequest extends Pagination {
   readonly status?: string
 }
 
-// From codersdk/workspaces.go:18:6
+// From codersdk/workspaces.go:19:6
 export interface Workspace {
   readonly id: string
   readonly created_at: string
@@ -438,15 +438,16 @@ export interface WorkspaceBuild {
   readonly deadline: string
 }
 
-// From codersdk/workspaces.go:64:6
+// From codersdk/workspaces.go:65:6
 export interface WorkspaceBuildsRequest extends Pagination {
   readonly WorkspaceID: string
 }
 
-// From codersdk/workspaces.go:200:6
+// From codersdk/workspaces.go:201:6
 export interface WorkspaceFilter {
-  readonly OrganizationID: string
-  readonly Owner: string
+  readonly organization_id?: string
+  readonly owner?: string
+  readonly name?: string
 }
 
 // From codersdk/workspaceresources.go:21:6

diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx
@@ -1,20 +1,169 @@
+import Button from "@material-ui/core/Button"
+import Fade from "@material-ui/core/Fade"
+import InputAdornment from "@material-ui/core/InputAdornment"
+import Link from "@material-ui/core/Link"
+import Menu from "@material-ui/core/Menu"
+import MenuItem from "@material-ui/core/MenuItem"
+import { makeStyles } from "@material-ui/core/styles"
+import TextField from "@material-ui/core/TextField"
+import AddCircleOutline from "@material-ui/icons/AddCircleOutline"
+import SearchIcon from "@material-ui/icons/Search"
 import { useMachine } from "@xstate/react"
-import { FC } from "react"
+import { FormikErrors, useFormik } from "formik"
+import { FC, useState } from "react"
+import { Link as RouterLink } from "react-router-dom"
+import { CloseDropdown, OpenDropdown } from "../../components/DropdownArrows/DropdownArrows"
+import { Margins } from "../../components/Margins/Margins"
+import { Stack } from "../../components/Stack/Stack"
+import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
 import { workspacesMachine } from "../../xServices/workspaces/workspacesXService"
 import { WorkspacesPageView } from "./WorkspacesPageView"
 
+interface FilterFormValues {
+  query: string
+}
+
+const Language = {
+  filterName: "Filters",
+  createWorkspaceButton: "Create workspace",
+  yourWorkspacesButton: "Your workspaces",
+  allWorkspacesButton: "All workspaces",
+}
+
+export type FilterFormErrors = FormikErrors<FilterFormValues>
+
 const WorkspacesPage: FC = () => {
-  const [workspacesState] = useMachine(workspacesMachine)
+  const styles = useStyles()
+  const [workspacesState, send] = useMachine(workspacesMachine)
+
+  const form = useFormik<FilterFormValues>({
+    initialValues: {
+      query: workspacesState.context.filter || "",
+    },
+    onSubmit: (values) => {
+      send({
+        type: "SET_FILTER",
+        query: values.query,
+      })
+    },
+  })
+
+  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 = () => {
+    void form.setFieldValue("query", "owner:me")
+    void form.submitForm()
+    handleClose()
+  }
+
+  const setAllWorkspaces = () => {
+    void form.setFieldValue("query", "")
+    void form.submitForm()
+    handleClose()
+  }
 
   return (
-    <>
-      <WorkspacesPageView
-        loading={workspacesState.hasTag("loading")}
-        workspaces={workspacesState.context.workspaces}
-        error={workspacesState.context.getWorkspacesError}
-      />
-    </>
+    <Margins>
+      <Stack direction="row" className={styles.workspacesHeaderContainer}>
+        <Stack direction="column" className={styles.filterColumn}>
+          <Stack direction="row" spacing={0} className={styles.filterContainer}>
+            <Button
+              aria-controls="filter-menu"
+              aria-haspopup="true"
+              onClick={handleClick}
+              className={styles.buttonRoot}
+            >
+              {Language.filterName} {anchorEl ? <CloseDropdown /> : <OpenDropdown />}
+            </Button>
+
+            <form onSubmit={form.handleSubmit} className={styles.filterForm}>
+              <TextField
+                {...getFieldHelpers("query")}
+                className={styles.textFieldRoot}
+                onChange={onChangeTrimmed(form)}
+                fullWidth
+                variant="outlined"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <SearchIcon fontSize="small" />
+                    </InputAdornment>
+                  ),
+                }}
+              />
+            </form>
+
+            <Menu
+              id="filter-menu"
+              anchorEl={anchorEl}
+              keepMounted
+              open={Boolean(anchorEl)}
+              onClose={handleClose}
+              TransitionComponent={Fade}
+              anchorOrigin={{
+                vertical: "bottom",
+                horizontal: "left",
+              }}
+              transformOrigin={{
+                vertical: "top",
+                horizontal: "left",
+              }}
+            >
+              <MenuItem onClick={setYourWorkspaces}>{Language.yourWorkspacesButton}</MenuItem>
+              <MenuItem onClick={setAllWorkspaces}>{Language.allWorkspacesButton}</MenuItem>
+            </Menu>
+          </Stack>
+        </Stack>
+
+        <Link underline="none" component={RouterLink} to="/workspaces/new">
+          <Button startIcon={<AddCircleOutline />} style={{ height: "44px" }}>
+            {Language.createWorkspaceButton}
+          </Button>
+        </Link>
+      </Stack>
+      <WorkspacesPageView loading={workspacesState.hasTag("loading")} workspaces={workspacesState.context.workspaces} />
+    </Margins>
   )
 }
 
+const useStyles = makeStyles((theme) => ({
+  workspacesHeaderContainer: {
+    marginTop: theme.spacing(3),
+    marginBottom: theme.spacing(3),
+    justifyContent: "space-between",
+  },
+  filterColumn: {
+    width: "60%",
+    cursor: "text",
+  },
+  filterContainer: {
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: "6px",
+  },
+  filterForm: {
+    width: "100%",
+  },
+  buttonRoot: {
+    border: "none",
+    borderRight: `1px solid ${theme.palette.divider}`,
+    borderRadius: "6px 0px 0px 6px",
+  },
+  textFieldRoot: {
+    margin: "0px",
+    "& fieldset": {
+      border: "none",
+    },
+  },
+}))
+
 export default WorkspacesPage