-
+
+ Heading Hierarchy
{analysis?.issues?.length > 0 ? (
-
- Heading Issues Found ({analysis.issues.length})
+
+ Issues Found ({analysis.issues.length})
) : (
@@ -94,9 +95,6 @@ const HeadingHierarchyInspectorBase = ({ location }) => {
)}
-
- Heading Hierarchy
-
{analysis &&
new HeadingHierarchyAnalyzer().generateTreeText(
diff --git a/src/applications/_mock-form-ae-design-patterns/vadx/panel/tabs/other/LoggedInState.jsx b/src/applications/_mock-form-ae-design-patterns/vadx/panel/tabs/other/LoggedInState.jsx
new file mode 100644
index 000000000000..c18ec30fe326
--- /dev/null
+++ b/src/applications/_mock-form-ae-design-patterns/vadx/panel/tabs/other/LoggedInState.jsx
@@ -0,0 +1,19 @@
+import React, { useContext } from 'react';
+import { VADXContext } from '../../../context/vadx';
+
+export const LoggedInState = () => {
+ const { logIn, logOut, loggedIn } = useContext(VADXContext);
+
+ return (
+
+
+ Logged In Status: {loggedIn ? 'true' : 'false'}
+
+
+
+ );
+};
diff --git a/src/applications/_mock-form-ae-design-patterns/vadx/panel/tabs/other/MemoryUsage.jsx b/src/applications/_mock-form-ae-design-patterns/vadx/panel/tabs/other/MemoryUsage.jsx
new file mode 100644
index 000000000000..29534cbd0ad8
--- /dev/null
+++ b/src/applications/_mock-form-ae-design-patterns/vadx/panel/tabs/other/MemoryUsage.jsx
@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react';
+
+export const MemoryUsage = () => {
+ const [memoryUsage, setMemoryUsage] = useState(null);
+
+ useEffect(() => {
+ // Function to get browser tab's memory usage
+ const updateMemoryUsage = () => {
+ if (performance && performance.memory) {
+ const used = Math.round(
+ performance.memory.usedJSHeapSize / 1024 / 1024,
+ );
+ const total = Math.round(
+ performance.memory.totalJSHeapSize / 1024 / 1024,
+ );
+ setMemoryUsage({ used, total });
+ }
+ };
+
+ updateMemoryUsage();
+
+ const interval = setInterval(updateMemoryUsage, 2000);
+
+ return () => clearInterval(interval);
+ }, []);
+
+ return memoryUsage ? (
+
+
+ Memory Usage: {memoryUsage.used}
+ MB / {memoryUsage.total}
+ MB
+
+
+ ) : null;
+};
diff --git a/src/applications/_mock-form-ae-design-patterns/vadx/panel/tabs/other/OtherTab.jsx b/src/applications/_mock-form-ae-design-patterns/vadx/panel/tabs/other/OtherTab.jsx
new file mode 100644
index 000000000000..f1cf24d1cc2d
--- /dev/null
+++ b/src/applications/_mock-form-ae-design-patterns/vadx/panel/tabs/other/OtherTab.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { HeadingHierarchyInspector } from './HeadingHierarchyInspector';
+import { MemoryUsage } from './MemoryUsage';
+import { ActiveElement } from './ActiveElement';
+import { LoggedInState } from './LoggedInState';
+
+export const OtherTab = () => {
+ return (
+
+ );
+};
diff --git a/src/applications/_mock-form-ae-design-patterns/vadx/panel/tabs/toggles/TogglesTab.jsx b/src/applications/_mock-form-ae-design-patterns/vadx/panel/tabs/toggles/TogglesTab.jsx
new file mode 100644
index 000000000000..a6b2e96b269e
--- /dev/null
+++ b/src/applications/_mock-form-ae-design-patterns/vadx/panel/tabs/toggles/TogglesTab.jsx
@@ -0,0 +1,180 @@
+import {
+ VaButton,
+ VaCheckbox,
+ VaSearchInput,
+} from '@department-of-veterans-affairs/component-library/dist/react-bindings';
+import { snakeCase } from 'lodash';
+import React, { useCallback, useContext, useEffect, useMemo } from 'react';
+import FEATURE_FLAG_NAMES from 'platform/utilities/feature-toggles/featureFlagNames';
+import { useDispatch } from 'react-redux';
+import { connectFeatureToggle } from 'platform/utilities/feature-toggles';
+import { TOGGLE_VALUES_RESET } from 'platform/site-wide/feature-toggles/actionTypes';
+import { VADXContext } from '../../../context/vadx';
+
+/**
+ * @component TogglesTab
+ *
+ * @description A tab component that manages and displays feature toggles
+ * This component provides functionality to:
+ * - Search through feature toggles
+ * - Reset toggles to their default values
+ * - Fetch toggles from the staging environment
+ * - Toggle individual features on/off
+ *
+ * @requires VADXContext - Context providing toggle state management and other VADX utilities
+ *
+ * @requires Redux - For global state management of feature toggles
+ *
+ * @note
+ * - Only displays toggles with underscore naming convention
+ * - Excludes toggles containing 'vadx' in their names
+ * - Maintains both camelCase and snake_case versions of toggle names for compatibility within state
+ *
+ */
+export const TogglesTab = () => {
+ const dispatch = useDispatch();
+ const {
+ preferences,
+ updateDevLoading,
+ updateLocalToggles,
+ updateClearLocalToggles,
+ debouncedSetSearchQuery,
+ togglesLoading,
+ togglesState,
+ } = useContext(VADXContext);
+
+ const handleResetToggles = useCallback(
+ () => {
+ updateDevLoading(true);
+ updateClearLocalToggles();
+ dispatch({ type: TOGGLE_VALUES_RESET });
+ dispatch(connectFeatureToggle);
+ updateDevLoading(false);
+ },
+ [dispatch, updateDevLoading, updateClearLocalToggles],
+ );
+
+ const { searchQuery, isDevLoading } = preferences;
+
+ useEffect(() => {
+ if (preferences?.localToggles) {
+ updateLocalToggles(preferences.localToggles);
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ const fetchDevToggles = useCallback(
+ async () => {
+ try {
+ updateDevLoading(true);
+
+ const response = await fetch(
+ 'https://staging-api.va.gov/v0/feature_toggles',
+ );
+ const {
+ data: { features },
+ } = await response.json();
+
+ const formattedToggles = features
+ .filter(toggle => {
+ return toggle.name.includes('_') && !toggle.name.includes('vadx');
+ })
+ .reduce(
+ (acc, toggle) => {
+ acc[toggle.name] = toggle.value;
+ return acc;
+ },
+ {
+ [FEATURE_FLAG_NAMES.aedpVADX]: true,
+ },
+ );
+
+ updateLocalToggles(formattedToggles);
+
+ updateDevLoading(false);
+ } catch (error) {
+ // eslint-disable-next-line no-console
+ console.error('Error fetching dev toggles:', error);
+ }
+ },
+ [updateDevLoading, updateLocalToggles],
+ );
+
+ const filteredToggles = useMemo(
+ () => {
+ return Object.keys(togglesState).filter(toggle => {
+ const toggleName = toggle.toLowerCase();
+ const searchQueryLower = searchQuery?.toLowerCase() || '';
+
+ return (
+ toggle.includes('_') &&
+ toggleName.includes(searchQueryLower) &&
+ !toggleName.includes('vadx') &&
+ toggle !== 'loading'
+ );
+ });
+ },
+ [togglesState, searchQuery],
+ );
+
+ if (togglesLoading || isDevLoading) {
+ return Loading...
;
+ }
+
+ return (
+ <>
+ debouncedSetSearchQuery(e.target.value)}
+ onSubmit={e => debouncedSetSearchQuery(e.target.value)}
+ small
+ value={searchQuery}
+ />
+
+
+
+
+
+
+ {filteredToggles?.length} toggles
+
+
+
+ {Object.keys(togglesState).length < 2 && (
+
+
+
+ No toggles found.
+
+