Skip to content

feat: Workspaces filtering #1972

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 23 commits into from
Jun 3, 2022
Merged

feat: Workspaces filtering #1972

Changes from 1 commit
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
d7c1318
feat: Workspaces filtering
f0ssel Jun 1, 2022
5cb62d5
Remove error handling
f0ssel Jun 1, 2022
09011d9
styling
f0ssel Jun 1, 2022
11836ea
Apply suggestions from code review
f0ssel Jun 2, 2022
568e3a6
pr fixes
f0ssel Jun 2, 2022
f1409b2
language
f0ssel Jun 2, 2022
f8e09e6
push up what I have
f0ssel Jun 2, 2022
424e933
Add name filter to backend
f0ssel Jun 2, 2022
5dbf5b4
Add name filter
f0ssel Jun 2, 2022
2912d03
add backend
f0ssel Jun 2, 2022
9ea5c14
fix
f0ssel Jun 2, 2022
93a7d3c
Apply suggestions from code review
f0ssel Jun 2, 2022
79e71f1
fmt
f0ssel Jun 2, 2022
5f1ae06
Merge branch 'f0ssel/workspace-filter' of github.com:coder/coder into…
f0ssel Jun 2, 2022
6b2999d
trim query
f0ssel Jun 2, 2022
57fe5db
skip invalid key pairs
f0ssel Jun 2, 2022
0a5d972
fix pq type
f0ssel Jun 2, 2022
4aea7a0
fix tests
f0ssel Jun 2, 2022
0dd5552
make gen
f0ssel Jun 2, 2022
5d0d9bb
fix test
f0ssel Jun 2, 2022
59e7d5e
flicker less
f0ssel Jun 2, 2022
912b65c
some styling ideas (#2010)
Kira-Pilot Jun 3, 2022
30a17e9
fix lower comparison
f0ssel Jun 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
some styling ideas (#2010)
  • Loading branch information
@Kira-Pilot
Kira-Pilot authored Jun 3, 2022
commit 912b65c4609c07ba34a910775f615c2e8d6b19be
104 changes: 79 additions & 25 deletions site/src/pages/WorkspacesPage/WorkspacesPage.tsx
View file
Open in desktop
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 Down Expand 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