Aedp/aw/255/vadx panel improvements and testing (#33559)

* updates for panel tabs * kb shortcut for panel, form data viewer, logged in button, better toggle reset, cleaned up styling * test: unit tests for ChapterAnalyzer tool, update propTypes
department-of-veterans-affairs · Dec 17, 2024 · 88de231 · 88de231
1 parent 7ee28db
commit 88de231
Show file tree

Hide file tree

Showing 27 changed files with 924 additions and 276 deletions.
diff --git a/src/applications/_mock-form-ae-design-patterns/hooks/useLocalStorage.js b/src/applications/_mock-form-ae-design-patterns/hooks/useLocalStorage.js
@@ -1,5 +1,4 @@
 import { useState, useEffect } from 'react';
-
 /**
  * useLocalStorage is a hook that provides a way to store and retrieve values from localStorage
  * @param {string} key - The key to store the value under
@@ -11,10 +10,17 @@ export const useLocalStorage = (key, defaultValue) => {
     let currentValue;
 
     try {
-      currentValue = JSON.parse(
-        localStorage.getItem(key) || String(defaultValue),
-      );
+      const item = localStorage.getItem(key);
+      if (item === null) {
+        currentValue = defaultValue;
+      } else if (item.startsWith('{') || item.startsWith('[')) {
+        currentValue = JSON.parse(item);
+      } else {
+        currentValue = item;
+      }
     } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('Error getting value from localStorage', error);
       currentValue = defaultValue;
     }
 
@@ -30,6 +36,7 @@ export const useLocalStorage = (key, defaultValue) => {
 
   const clearValue = () => {
     localStorage.removeItem(key);
+    setValue(defaultValue);
   };
 
   return [value, setValue, clearValue];

diff --git a/src/applications/_mock-form-ae-design-patterns/hooks/useMockedLogin.js b/src/applications/_mock-form-ae-design-patterns/hooks/useMockedLogin.js
@@ -1,37 +1,51 @@
-import { useEffect } from 'react';
-import { useDispatch } from 'react-redux';
+import { useEffect, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { teardownProfileSession } from 'platform/user/profile/utilities';
 import { updateLoggedInStatus } from 'platform/user/authentication/actions';
 
 import { useLocalStorage } from './useLocalStorage';
 
 export const useMockedLogin = () => {
-  const [, setHasSession] = useLocalStorage('hasSession', '');
+  const [
+    localHasSession,
+    setLocalHasSession,
+    clearLocalHasSession,
+  ] = useLocalStorage('hasSession', '');
+
+  const loggedInFromState = useSelector(
+    state => state?.user?.login?.currentlyLoggedIn,
+  );
+
+  const loggedIn = useMemo(
+    () => localHasSession === 'true' || loggedInFromState,
+    [localHasSession, loggedInFromState],
+  );
+
   const dispatch = useDispatch();
 
   const logIn = () => {
-    setHasSession('true');
+    setLocalHasSession('true');
     dispatch(updateLoggedInStatus(true));
   };
 
   const logOut = () => {
     teardownProfileSession();
     dispatch(updateLoggedInStatus(false));
-    setHasSession('');
+    clearLocalHasSession();
   };
 
   const useLoggedInQuery = location => {
     useEffect(
       () => {
         if (location?.query?.loggedIn === 'true') {
-          setHasSession('true');
+          setLocalHasSession('true');
           dispatch(updateLoggedInStatus(true));
         }
 
         if (location?.query?.loggedIn === 'false') {
           teardownProfileSession();
           dispatch(updateLoggedInStatus(false));
-          setHasSession('');
+          clearLocalHasSession();
         }
 
         // having the pollTimeout present triggers some api calls to be made locally and in codespaces
@@ -43,5 +57,5 @@ export const useMockedLogin = () => {
     );
   };
 
-  return { logIn, logOut, useLoggedInQuery };
+  return { logIn, logOut, useLoggedInQuery, loggedIn };
 };
diff --git a/src/applications/_mock-form-ae-design-patterns/mocks/endpoints/in-progress-forms/22-1990.js b/src/applications/_mock-form-ae-design-patterns/mocks/endpoints/in-progress-forms/22-1990.js
@@ -18,7 +18,7 @@ const response = {
       street: USER.MAILING_ADDRESS.ADDRESS_LINE1,
       city: USER.MAILING_ADDRESS.CITY,
       state: USER.MAILING_ADDRESS.STATE_CODE,
-      country: USER.MAILING_ADDRESS.COUNTRY_CODE_ISO2,
+      country: USER.MAILING_ADDRESS.COUNTRY_CODE_ISO3,
       postalCode: USER.MAILING_ADDRESS.ZIP_CODE,
       isMilitary: false,
     },

diff --git a/src/applications/_mock-form-ae-design-patterns/mocks/endpoints/in-progress-forms/26-1880.js b/src/applications/_mock-form-ae-design-patterns/mocks/endpoints/in-progress-forms/26-1880.js
@@ -8,7 +8,7 @@ const response = {
       street: USER.MAILING_ADDRESS.ADDRESS_LINE1,
       city: USER.MAILING_ADDRESS.CITY,
       state: USER.MAILING_ADDRESS.STATE_CODE,
-      country: USER.MAILING_ADDRESS.COUNTRY_CODE_ISO2,
+      country: USER.MAILING_ADDRESS.COUNTRY_CODE_ISO3,
       postalCode: USER.MAILING_ADDRESS.ZIP_CODE,
     },
     contactPhone: `${USER.HOME_PHONE.AREA_CODE}${USER.HOME_PHONE.PHONE_NUMBER}`,

diff --git a/src/applications/_mock-form-ae-design-patterns/mocks/server.js b/src/applications/_mock-form-ae-design-patterns/mocks/server.js
@@ -47,8 +47,8 @@ const responses = {
         res.json(
           generateFeatureToggles({
             aedpVADX: true,
-            coeAccess: true,
-            profileUseExperimental: true,
+            coeAccess: false,
+            profileUseExperimental: false,
           }),
         ),
       secondsOfDelay,

diff --git a/...s/_mock-form-ae-design-patterns/patterns/pattern2/TaskBlue/ProfileInformationEditView.jsx b/...s/_mock-form-ae-design-patterns/patterns/pattern2/TaskBlue/ProfileInformationEditView.jsx
@@ -346,7 +346,7 @@ export class ProfileInformationEditView extends Component {
                     <va-button
                       data-testid="cancel-edit-button"
                       secondary
-                      class="vads-u-margin--0 vads-u-margin-top--0 vads-u-width--full mobile-lg:vads-u-width--auto"
+                      class="vads-u-margin--0 vads-u-margin-top--1p5 vads-u-width--full mobile-lg:vads-u-width--auto"
                       onClick={onCancel}
                       text={cancelButtonText || 'Cancel'}
                     />

diff --git a/...ations/_mock-form-ae-design-patterns/patterns/pattern2/TaskGray/shared/components/WIP.jsx b/...ations/_mock-form-ae-design-patterns/patterns/pattern2/TaskGray/shared/components/WIP.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 export const WIP = () => (
-  <div className="row vads-u-margin-bottom--5">
+  <div className="row vads-u-margin-y--5">
     <div className="usa-width-two-thirds medium-8 columns">
       <va-alert status="warning">
         <h1 slot="headline" className="vads-u-font-size--h3">

diff --git a/src/applications/_mock-form-ae-design-patterns/shared/components/VADXPlugin.jsx b/src/applications/_mock-form-ae-design-patterns/shared/components/VADXPlugin.jsx
@@ -4,13 +4,42 @@ import { Link } from 'react-router';
 export const VADXPlugin = () => {
   return (
     <div>
-      <p>VADX Plugin</p>
-      <p>
-        <Link to="/mock-form-ae-design-patterns/1">Pattern 1</Link>
-      </p>
-      <p>
-        <Link to="/mock-form-ae-design-patterns/2">Pattern 2</Link>
-      </p>
+      <p>VADX Plugin Example</p>
+      <div>
+        <Link to="/1">Pattern 1</Link>
+        <ul>
+          <li>
+            <Link to="/1/task-green">Task Green</Link>
+          </li>
+          <li>
+            <Link to="/1/task-yellow/introduction?loggedIn=true">
+              Task Yellow
+            </Link>
+          </li>
+          <li>
+            <Link to="/1/task-purple/introduction?loggedIn=true">
+              Task Purple
+            </Link>
+          </li>
+        </ul>
+      </div>
+      <div>
+        <Link to="/2">Pattern 2</Link>
+        <ul>
+          <li>
+            <Link to="/2/task-orange">Task Orange</Link>
+          </li>
+          <li>
+            <Link to="/2/task-gray/introduction?loggedIn=true">Task Gray</Link>
+          </li>
+          <li>
+            <Link to="/2/task-blue">Task Blue</Link>
+          </li>
+          <li>
+            <Link to="/2/post-study">Post Study</Link>
+          </li>
+        </ul>
+      </div>
     </div>
   );
 };

diff --git a/src/applications/_mock-form-ae-design-patterns/vadx/context/vadx.js b/src/applications/_mock-form-ae-design-patterns/vadx/context/vadx.js
@@ -7,7 +7,7 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 
-import { debounce, isEqual } from 'lodash';
+import { debounce } from 'lodash';
 import { useDispatch, useSelector } from 'react-redux';
 import { useMockedLogin } from '../../hooks/useMockedLogin';
 import { vadxPreferencesStorage } from '../utils/StorageAdapter';
@@ -22,10 +22,9 @@ import { setVadxToggles } from '../actions/toggles';
 export const VADXContext = createContext(null);
 
 /**
- * @param {Object} props
+ * @component VADXProvider
  * @param {React.ReactNode} props.children
  * @returns {React.ReactNode}
- * @component
  */
 export const VADXProvider = ({ children }) => {
   const [preferences, setPreferences] = useState({});
@@ -40,7 +39,7 @@ export const VADXProvider = ({ children }) => {
   );
 
   // mock login functions
-  const { logIn, logOut } = useMockedLogin();
+  const { logIn, logOut, loggedIn } = useMockedLogin();
 
   useEffect(
     () => {
@@ -120,10 +119,14 @@ export const VADXProvider = ({ children }) => {
 
   // update local toggles
   const updateLocalToggles = useCallback(
-    toggles => {
-      setSyncedData({ ...preferences, localToggles: toggles });
+    async toggles => {
+      await setSyncedData({
+        ...preferences,
+        localToggles: { ...toggles },
+      });
+      dispatch(setVadxToggles(toggles));
     },
-    [preferences, setSyncedData],
+    [preferences, setSyncedData, dispatch],
   );
 
   // clear local toggles
@@ -142,30 +145,12 @@ export const VADXProvider = ({ children }) => {
 
   const togglesState = useSelector(state => state?.featureToggles);
 
-  const localTogglesAreEmpty = useMemo(
-    () => isEqual(preferences?.localToggles, {}),
-    [preferences?.localToggles],
-  );
-
-  // check if the local toggles are not empty and not equal to the toggles state
-  const customLocalToggles =
-    !localTogglesAreEmpty && !isEqual(preferences?.localToggles, togglesState);
-
-  // if the custom local toggles are true, then update the redux state for the toggles
-  useEffect(
-    () => {
-      if (customLocalToggles) {
-        dispatch(setVadxToggles(preferences?.localToggles));
-      }
-    },
-    [customLocalToggles, preferences?.localToggles, dispatch],
-  );
-
   return (
     <VADXContext.Provider
       value={{
         logIn,
         logOut,
+        loggedIn,
         preferences,
         setSyncedData,
         updateDevLoading,

diff --git a/src/applications/_mock-form-ae-design-patterns/vadx/panel/FloatingButton.jsx b/src/applications/_mock-form-ae-design-patterns/vadx/panel/FloatingButton.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
@@ -22,6 +22,26 @@ const FloatingButtonStyled = styled.button`
 `;
 
 export const FloatingButton = ({ showVADX, setShowVADX }) => {
+  useEffect(
+    () => {
+      const handleKeyPress = event => {
+        // Check for Ctrl/Cmd + Shift + /
+        if (
+          (event.ctrlKey || event.metaKey) &&
+          event.shiftKey &&
+          event.key === '\\'
+        ) {
+          event.preventDefault();
+          setShowVADX(!showVADX);
+        }
+      };
+
+      document.addEventListener('keydown', handleKeyPress);
+      return () => document.removeEventListener('keydown', handleKeyPress);
+    },
+    [showVADX, setShowVADX],
+  );
+
   return (
     <FloatingButtonStyled onClick={() => setShowVADX(!showVADX)} type="button">
       <va-icon icon={showVADX ? 'chevron_right' : 'chevron_left'} size={3} />

diff --git a/src/applications/_mock-form-ae-design-patterns/vadx/panel/Panel.jsx b/src/applications/_mock-form-ae-design-patterns/vadx/panel/Panel.jsx
@@ -1,9 +1,9 @@
-import React, { useContext } from 'react';
+import React, { useCallback, useContext } from 'react';
 
 import { PluginContext } from '../context/plugin';
 import { VADXContext } from '../context/vadx';
 
-import Tabs from './Tabs';
+import Tabs from './tabs/Tabs';
 import { FloatingButton } from './FloatingButton';
 
 const VADXContainer = () => {
@@ -12,9 +12,12 @@ const VADXContainer = () => {
 
   const showVADX = !!preferences?.showVADX;
 
-  const handleShowVADX = () => {
-    updateShowVADX(!showVADX);
-  };
+  const handleShowVADX = useCallback(
+    () => {
+      updateShowVADX(!showVADX);
+    },
+    [showVADX, updateShowVADX],
+  );
 
   return (
     <>

diff --git a/src/applications/_mock-form-ae-design-patterns/vadx/panel/tabs/FormTab.jsx b/src/applications/_mock-form-ae-design-patterns/vadx/panel/tabs/FormTab.jsx