Jun 3, 2022 · Jun 3, 2022
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx
 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 { FormikErrors, useFormik } from "formik"
 import { FC, useState } from "react"
  }

  return (
    <>
      <Margins>
        <div className={styles.actions}>
          <Stack direction="row">
            <Button aria-controls="filter-menu" aria-haspopup="true" onClick={handleClick}>
    <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>

            <Menu id="filter-menu" anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
            <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>

            <form onSubmit={form.handleSubmit}>
              <TextField {...getFieldHelpers("query")} onChange={onChangeTrimmed(form)} fullWidth variant="outlined" />
            </form>
          </Stack>

          <Link underline="none" component={RouterLink} to="/workspaces/new">
            <Button startIcon={<AddCircleOutline />}>{Language.createWorkspaceButton}</Button>
          </Link>
        </div>

        <WorkspacesPageView
          loading={workspacesState.hasTag("loading")}
          workspaces={workspacesState.context.workspaces}
        />
      </Margins>
    </>
        </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) => ({
 actions: {
 workspacesHeaderContainer: {
    marginTop: theme.spacing(3),
    marginBottom: theme.spacing(3),
    display: "flex",
    justifyContent: "space-between",
    height: theme.spacing(6),
  },
  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",
    },
  },
 }))
Original file line number	Diff line number	Diff line change
		@@ -1,10 +1,13 @@
		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 { FormikErrors, useFormik } from "formik"
		import { FC, useState } from "react"
Expand DownExpand Up		@@ -70,45 +73,96 @@ const WorkspacesPage: FC = () => {
		}

		return (
		<>
		<Margins>
		<div className={styles.actions}>
		<Stack direction="row">
		<Button aria-controls="filter-menu" aria-haspopup="true" onClick={handleClick}>
		<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>

		<Menu id="filter-menu" anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
		<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>

		<form onSubmit={form.handleSubmit}>
		<TextField {...getFieldHelpers("query")} onChange={onChangeTrimmed(form)} fullWidth variant="outlined" />
		</form>
		</Stack>

		<Link underline="none" component={RouterLink} to="/workspaces/new">
		<Button startIcon={<AddCircleOutline />}>{Language.createWorkspaceButton}</Button>
		</Link>
		</div>

		<WorkspacesPageView
		loading={workspacesState.hasTag("loading")}
		workspaces={workspacesState.context.workspaces}
		/>
		</Margins>
		</>
		</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) => ({
		actions: {
		workspacesHeaderContainer: {
		marginTop: theme.spacing(3),
		marginBottom: theme.spacing(3),
		display: "flex",
		justifyContent: "space-between",
		height: theme.spacing(6),
		},
		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",
		},
		},
		}))

Expand Down