Move Skill Categories link from menu to button on Skills page, update snapshot tests

Author: pieperm

web-ui/src/components/edit_skills/EditSkillsCard.test.js

@@ -4,6 +4,7 @@ import EditSkillsPage from "../../pages/EditSkillsPage";
 import { AppContextProvider } from "../../context/AppContext";
 import { rest } from "msw";
 import { setupServer } from "msw/node";
+import {BrowserRouter} from "react-router-dom";
 
 const initialState = {
   state: {
@@ -56,7 +57,9 @@ it("renders correctly", () => {
 it("renders correctly", () => {
   snapshot(
     <AppContextProvider value={initialState}>
-      <EditSkillsPage />
+      <BrowserRouter>
+        <EditSkillsPage />
+      </BrowserRouter>
     </AppContextProvider>
   );
 });

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

@@ -797,7 +797,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
       </div>
     </div>
     <div
-      className="combine-skills"
+      className="skill-actions-container"
     >
       <button
         className="MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButtonBase-root  emotion-6"
@@ -823,6 +823,34 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
           className="MuiTouchRipple-root emotion-7"
         />
       </button>
+      <a
+        href="/admin/skill-categories"
+        onClick={[Function]}
+      >
+        <button
+          className="MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButtonBase-root  emotion-6"
+          disabled={false}
+          onBlur={[Function]}
+          onContextMenu={[Function]}
+          onDragLeave={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          onMouseDown={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
+          tabIndex={0}
+          type="button"
+        >
+          Categorize Skills
+          <span
+            className="MuiTouchRipple-root emotion-7"
+          />
+        </button>
+      </a>
     </div>
   </div>
   <div

web-ui/src/components/menu/Menu.jsx

@@ -100,7 +100,6 @@ const adminLinks = [
   ["/admin/users", "Users"],
   ["/admin/email", "Send Email"],
   ["/admin/edit-skills", "Skills"],
-  ["/admin/skill-categories", "Skill Categories"],
 ];
 
 const directoryLinks = [

web-ui/src/pages/EditSkillsPage.css

@@ -6,10 +6,11 @@
   margin: 1rem;
 }
 
-.combine-skills {
+.skill-actions-container {
   align-items: center;
   display: flex;
   justify-content: flex-end;
+  gap: 1rem;
 }
 
 .search {
@@ -18,6 +19,7 @@
   align-items: center;
   margin-left: 1rem;
   margin-right: 1rem;
+  flex-wrap: wrap;
 }
 
 .show-all-skills {

web-ui/src/pages/EditSkillsPage.jsx

@@ -4,12 +4,13 @@ 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 { Button, TextField } from "@mui/material";
 
 import "./EditSkillsPage.css";
 
-const EditSkillsPage = (props) => {
+const EditSkillsPage = () => {
   const { state } = useContext(AppContext);
 
   const [searchText, setSearchText] = useState("");
@@ -48,8 +49,11 @@ const EditSkillsPage = (props) => {
             />
           </div>
         </div>
-        <div className="combine-skills">
+        <div className="skill-actions-container">
           <Button onClick={handleOpen}>Combine Skills</Button>
+          <Link to="/admin/skill-categories">
+            <Button>Categorize Skills</Button>
+          </Link>
         </div>
       </div>
 

web-ui/src/pages/EditSkillsPage.test.js

@@ -1,11 +1,14 @@
 import React from "react";
 import EditSkillsPage from "./EditSkillsPage";
 import { AppContextProvider } from "../context/AppContext";
+import {BrowserRouter} from "react-router-dom";
 
 it("renders correctly", () => {
   snapshot(
     <AppContextProvider>
-      <EditSkillsPage />
+      <BrowserRouter>
+        <EditSkillsPage />
+      </BrowserRouter>
     </AppContextProvider>
   );
 });

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

@@ -403,7 +403,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
       </div>
     </div>
     <div
-      className="combine-skills"
+      className="skill-actions-container"
     >
       <button
         className="MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButtonBase-root  emotion-6"
@@ -426,6 +426,31 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
       >
         Combine Skills
       </button>
+      <a
+        href="/admin/skill-categories"
+        onClick={[Function]}
+      >
+        <button
+          className="MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButtonBase-root  emotion-6"
+          disabled={false}
+          onBlur={[Function]}
+          onContextMenu={[Function]}
+          onDragLeave={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          onMouseDown={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
+          tabIndex={0}
+          type="button"
+        >
+          Categorize Skills
+        </button>
+      </a>
     </div>
   </div>
   <div