diff --git a/web-ui/src/components/edit_skills/__snapshots__/EditSkillsCard.test.jsx.snap b/web-ui/src/components/edit_skills/__snapshots__/EditSkillsCard.test.jsx.snap index 07b0630f60..73f3cd4433 100644 --- a/web-ui/src/components/edit_skills/__snapshots__/EditSkillsCard.test.jsx.snap +++ b/web-ui/src/components/edit_skills/__snapshots__/EditSkillsCard.test.jsx.snap @@ -56,7 +56,6 @@ exports[`EditSkillsCard > renders correctly 1`] = ` diff --git a/web-ui/src/pages/EditSkillsPage.jsx b/web-ui/src/pages/EditSkillsPage.jsx index 57d8602320..b32a2f40b4 100644 --- a/web-ui/src/pages/EditSkillsPage.jsx +++ b/web-ui/src/pages/EditSkillsPage.jsx @@ -1,10 +1,11 @@ import React, { useContext, useState } from 'react'; +import { Link } from 'react-router-dom'; import { AppContext } from '../context/AppContext'; import { selectOrderedSkills, selectPendingSkills } from '../context/selectors'; import EditSkillsCard from '../components/edit_skills/EditSkillsCard'; import EditSkillsModal from '../components/edit_skills/EditSkillsModal'; -import { Link } from 'react-router-dom'; +import { useQueryParameters } from '../helpers/query-parameters'; import { Button, TextField } from '@mui/material'; @@ -26,6 +27,21 @@ const EditSkillsPage = () => { const handleClick = () => setShowAllSkills(!showAllSkills); + useQueryParameters([ + { + name: 'search', + default: '', + value: searchText, + setter: setSearchText + }, + { + name: 'showAll', + default: false, + value: showAllSkills, + setter: setShowAllSkills + } + ]); + return (
@@ -42,10 +58,10 @@ const EditSkillsPage = () => {
diff --git a/web-ui/src/pages/SkillCategoriesPage.jsx b/web-ui/src/pages/SkillCategoriesPage.jsx index e8d8388af9..4ff7cd3df6 100644 --- a/web-ui/src/pages/SkillCategoriesPage.jsx +++ b/web-ui/src/pages/SkillCategoriesPage.jsx @@ -1,38 +1,37 @@ import React, { useCallback, useContext, useEffect, useState } from 'react'; -import { styled } from '@mui/material/styles'; - -import { AppContext } from '../context/AppContext'; - import fileDownload from 'js-file-download'; - +import { Search } from '@mui/icons-material'; +import DownloadIcon from '@mui/icons-material/FileDownload'; import { + Autocomplete, Button, + Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton, + InputAdornment, TextField, Tooltip, Typography } from '@mui/material'; -import SkillCategoryCard from '../components/skill-category-card/SkillCategoryCard'; +import { styled } from '@mui/material/styles'; -import './SkillCategoriesPage.css'; -import { selectCsrfToken, selectOrderedSkills } from '../context/selectors'; import { createSkillCategory, deleteSkillCategory, getSkillCategories, getSkillsCsv } from '../api/skillcategory'; +import SkillCategoryCard from '../components/skill-category-card/SkillCategoryCard'; import SkillCategoryNewDialog from '../components/skill-category-new-dialog/SkillCategoryNewDialog'; import { UPDATE_TOAST } from '../context/actions'; -import Dialog from '@mui/material/Dialog'; -import InputAdornment from '@mui/material/InputAdornment'; -import { Search } from '@mui/icons-material'; -import Autocomplete from '@mui/material/Autocomplete'; -import DownloadIcon from '@mui/icons-material/FileDownload'; +import { AppContext } from '../context/AppContext'; +import { selectCsrfToken, selectOrderedSkills } from '../context/selectors'; +import { useQueryParameters } from '../helpers/query-parameters'; + +import './SkillCategoriesPage.css'; const PREFIX = 'SkillCategoriesPage'; const classes = { @@ -65,6 +64,33 @@ const SkillCategoriesPage = () => { const [query, setQuery] = useState(''); const [skillFilter, setSkillFilter] = useState(null); + useQueryParameters([ + { + name: 'addNew', + default: false, + value: dialogOpen, + setter: setDialogOpen + }, + { + name: 'filter', + default: null, + value: skillFilter, + setter(value) { + const skill = skills.find(s => s.name === value) || null; + setSkillFilter(skill); + }, + toQP(filter) { + return filter?.name ?? null; + } + }, + { + name: 'search', + default: '', + value: query, + setter: setQuery + } + ]); + const retrieveCategories = useCallback(async () => { if (csrf) { const res = await getSkillCategories(csrf); diff --git a/web-ui/src/pages/__snapshots__/EditSkillsPage.test.jsx.snap b/web-ui/src/pages/__snapshots__/EditSkillsPage.test.jsx.snap index 63f6cd064b..640cb8ee49 100644 --- a/web-ui/src/pages/__snapshots__/EditSkillsPage.test.jsx.snap +++ b/web-ui/src/pages/__snapshots__/EditSkillsPage.test.jsx.snap @@ -56,7 +56,6 @@ exports[`renders correctly 1`] = `