coder · f0ssel · Jun 3, 2022 · Jun 1, 2022 · Jun 1, 2022 · Jun 1, 2022
diff --git a/coderd/database/databasefake/databasefake.go b/coderd/database/databasefake/databasefake.go
@@ -328,6 +328,9 @@ func (q *fakeQuerier) GetWorkspacesWithFilter(_ context.Context, arg database.Ge
 		if !arg.Deleted && workspace.Deleted {
 			continue
 		}
+		if arg.Name != "" && workspace.Name != arg.Name {
+			continue
+		}
 		workspaces = append(workspaces, workspace)
 	}
 

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 :: text != '' THEN
+				LOWER(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/coderd/workspaces_test.go b/coderd/workspaces_test.go
@@ -268,6 +268,37 @@ func TestWorkspacesByOwner(t *testing.T) {
 		require.NoError(t, err)
 		require.Len(t, workspaces, 1)
 	})
+
+	t.Run("ListName", func(t *testing.T) {
+		t.Parallel()
+		client := coderdtest.New(t, &coderdtest.Options{IncludeProvisionerD: true})
+		user := coderdtest.CreateFirstUser(t, client)
+
+		version := coderdtest.CreateTemplateVersion(t, client, user.OrganizationID, nil)
+		coderdtest.AwaitTemplateVersionJob(t, client, version.ID)
+		template := coderdtest.CreateTemplate(t, client, user.OrganizationID, version.ID)
+		w := coderdtest.CreateWorkspace(t, client, user.OrganizationID, template.ID)
+
+		// Create noise workspace that should be filtered out
+		_ = coderdtest.CreateWorkspace(t, client, user.OrganizationID, template.ID)
+
+		// Use name filter
+		workspaces, err := client.Workspaces(context.Background(), codersdk.WorkspaceFilter{
+			Name: w.Name,
+		})
+		require.NoError(t, err)
+		require.Len(t, workspaces, 1)
+
+		// Create same name workspace that should be included
+		other := coderdtest.CreateAnotherUser(t, client, user.OrganizationID)
+		_ = coderdtest.CreateWorkspace(t, other, user.OrganizationID, template.ID, func(cwr *codersdk.CreateWorkspaceRequest) { cwr.Name = w.Name })
+
+		workspaces, err = client.Workspaces(context.Background(), codersdk.WorkspaceFilter{
+			Name: w.Name,
+		})
+		require.NoError(t, err)
+		require.Len(t, workspaces, 2)
+	})
 }
 
 func TestWorkspaceByOwnerAndName(t *testing.T) {

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
@@ -443,8 +443,9 @@ export interface WorkspaceBuildsRequest extends Pagination {
 
 // From codersdk/workspaces.go:200: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