Skill Categories page now gets settings from query parameters

web-ui/src/components/edit_skills/__snapshots__/EditSkillsCard.test.jsx.snap

@@ -56,7 +56,6 @@ exports[`EditSkillsCard > renders correctly 1`] = `
           <input
             id="all-skills"
             type="checkbox"
-            value="false"
           />
         </div>
       </div>

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 (
     <div className="pending-skills-page">
       <div className="search">
@@ -42,10 +58,10 @@ const EditSkillsPage = () => {
           <div className="show-all-skills">
             <label htmlFor="all-skills">Show all skills</label>
             <input
-              onClick={handleClick}
+              onChange={handleClick}
               id="all-skills"
               type="checkbox"
-              value={showAllSkills}
+              checked={showAllSkills}
             />
           </div>
         </div>

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);

web-ui/src/pages/__snapshots__/EditSkillsPage.test.jsx.snap

@@ -56,7 +56,6 @@ exports[`renders correctly 1`] = `
           <input
             id="all-skills"
             type="checkbox"
-            value="false"
           />
         </div>
       </div>