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 (
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`] = `