OCD-5298: remove a variety of AngularJS pieces

.yarnrc.yml

@@ -13,9 +13,11 @@ enableScripts: true
 
 nodeLinker: node-modules
 
+npmMinimalAgeGate: 0
+
 packageExtensions:
   deasync@*:
     dependencies:
       node-gyp: ^8.2.0
 
-yarnPath: .yarn/releases/yarn-4.14.1.cjs
+yarnPath: .yarn/releases/yarn-4.17.0.cjs

package.json

@@ -29,17 +29,13 @@
     "angular-animate": "^1.8.3",
     "angular-aria": "^1.8.3",
     "angular-confirm": "1.2.6",
-    "angular-feature-flags": "^1.6.1",
     "angular-file-saver": "^1.1.3",
     "angular-loading-bar": "^0.9.0",
     "angular-resource": "^1.8.3",
     "angular-sanitize": "^1.8.3",
     "angular-ui-bootstrap": "2.5.6",
     "angular-ui-router": "^1.0.30",
     "angular-zxcvbn": "^3.2.2",
-    "angularjs-toaster": "^2.2.0",
-    "angulartics": "^1.6.0",
-    "angulartics-google-tag-manager": "^0.0.1",
     "axios": "^1.7.7",
     "axios-jwt": "^4.0.3",
     "bootstrap-sass": "3.4.3",
@@ -120,5 +116,5 @@
   "engines": {
     "node": ">=0.10.0"
   },
-  "packageManager": "yarn@4.14.1"
+  "packageManager": "yarn@4.17.0"
 }

src/app/api/api-keys.jsx

@@ -2,6 +2,16 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 
 import { useAxios } from './axios';
 
+const useDeleteKey = () => {
+  const axios = useAxios();
+  const queryClient = useQueryClient();
+  return useMutation(async (key) => axios.delete(`/key/${key.key}`), {
+    onSuccess: () => {
+      queryClient.invalidateQueries(['api-keys']);
+    },
+  });
+};
+
 const useFetchApiKeys = () => {
   const axios = useAxios();
   return useQuery(['api-keys'], async () => {
@@ -10,17 +20,13 @@ const useFetchApiKeys = () => {
   });
 };
 
-const useDeleteKey = () => {
+const usePostConfirmApiKey = () => {
   const axios = useAxios();
-  const queryClient = useQueryClient();
-  return useMutation(async (key) => axios.delete(`/key/${key.key}`), {
-    onSuccess: () => {
-      queryClient.invalidateQueries(['api-keys']);
-    },
-  });
+  return useMutation(async (data) => axios.post('key/confirm', data));
 };
 
 export {
-  useFetchApiKeys,
   useDeleteKey,
+  useFetchApiKeys,
+  usePostConfirmApiKey,
 };

src/app/api/axios.jsx

@@ -2,6 +2,7 @@ import React, { createContext, useContext, useMemo } from 'react';
 import Axios from 'axios';
 import { applyAuthTokenInterceptor, getAccessToken } from 'axios-jwt';
 import { element } from 'prop-types';
+import { useSnackbar } from 'notistack';
 
 import { getAngularService } from 'services/angular-react-helper';
 import { UserContext } from 'shared/contexts';
@@ -11,6 +12,7 @@ const AxiosContext = createContext();
 function AxiosProvider({ children }) {
   const $localStorage = getAngularService('$localStorage');
   const authService = getAngularService('authService');
+  const { enqueueSnackbar } = useSnackbar();
   const { setLoginWidgetState } = useContext(UserContext);
 
   const axios = useMemo(() => {
@@ -62,14 +64,34 @@ function AxiosProvider({ children }) {
       return updated;
     });
 
-    ax.interceptors.response.use((response) => response,
+    ax.interceptors.response.use(
+      (response) => {
+        if (response.headers['chpl-id-changed']) {
+          if (response.headers['chpl-id-changed'].indexOf(',') > 1) {
+            enqueueSnackbar('CHPL IDs Changed. Your activity caused CHPL Product Numbers to change', {
+              variant: 'success',
+            });
+          } else {
+            enqueueSnackbar('CHPL ID Changed. Your activity caused a CHPL Product Number to change', {
+              variant: 'success',
+            });
+          }
+        }
+        if (response.headers['cache-cleared']) {
+          enqueueSnackbar('Update processing. Your changes may not be reflected immediately in the search results and shortcuts pages. Please contact CHPL admin if you have any concerns', {
+            variant: 'warning',
+          });
+        }
+        return response;
+      },
       (error) => {
         if (error.response.data && error.response.data === 'Invalid authentication token.' && authService.hasAnyRole(['chpl-admin', 'chpl-onc', 'chpl-onc-acb', 'chpl-cms-staff', 'chpl-developer'])) {
           setLoginWidgetState('SIGNIN');
           authService.logout();
         }
         return Promise.reject(error);
-      });
+      },
+    );
 
     return ax;
   }, []);

src/app/app-wrapper.jsx

@@ -15,14 +15,16 @@ import CompareWrapper from 'components/compare-widget/compare-wrapper';
 import FlagWrapper from 'api/flag-wrapper';
 import { UserWrapper } from 'components/login';
 import { SnackbarWrapper } from 'components/util';
+import ChplNavigationBottom from 'navigation/navigation-bottom';
+import ChplNavigationTop from 'navigation/navigation-top';
 import theme from 'themes/theme';
 
 function AppWrapper({ children, showQueryTools = DEVELOPER_MODE }) {
   return (
     <ThemeProvider theme={theme}>
-      <ApiWrapper showQueryTools={showQueryTools}>
-        <UserWrapper>
-          <SnackbarWrapper>
+      <SnackbarWrapper>
+        <ApiWrapper showQueryTools={showQueryTools}>
+          <UserWrapper>
             <FlagWrapper>
               <CompareWrapper>
                 <CmsWrapper>
@@ -34,16 +36,18 @@ function AppWrapper({ children, showQueryTools = DEVELOPER_MODE }) {
                         domain: '.healthit.gov',
                       }}
                       >
+                        <ChplNavigationTop />
                         {children}
+                        <ChplNavigationBottom />
                       </CookiesProvider>
                     </AnalyticsProvider>
                   </BrowserWrapper>
                 </CmsWrapper>
               </CompareWrapper>
             </FlagWrapper>
-          </SnackbarWrapper>
-        </UserWrapper>
-      </ApiWrapper>
+          </UserWrapper>
+        </ApiWrapper>
+      </SnackbarWrapper>
     </ThemeProvider>
   );
 }

src/app/components/action-bar/index.js

@@ -1,7 +1,5 @@
 import ChplActionBar from './action-bar';
-import ChplActionBarWrapper from './action-bar-wrapper';
 
 export {
   ChplActionBar,
-  ChplActionBarWrapper,
 };

src/app/components/api-key/api-key-confirm.jsx

@@ -3,16 +3,14 @@ import {
   Card,
   CardContent,
   CardHeader,
-  ThemeProvider,
   Typography,
   makeStyles,
 } from '@material-ui/core';
 import { string } from 'prop-types';
 
-import { getAngularService } from '../../services/angular-react-helper';
-import theme from '../../themes/theme';
+import { usePostConfirmApiKey } from 'api/api-keys';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles({
   grid: {
     display: 'grid',
     gridTemplateColumns: '1fr 1fr 1fr 1fr',
@@ -21,66 +19,64 @@ const useStyles = makeStyles(() => ({
   centeredGridItem: {
     gridColumn: '2 / 4',
   },
-}));
+});
 
-function ChplApiKeyConfirm(props) {
-  const networkService = getAngularService('networkService');
+function ChplApiKeyConfirm({ hash }) {
+  const { mutate } = usePostConfirmApiKey();
   const [apiKey, setApiKey] = useState({});
   const [confirmError, setConfirmError] = useState(false);
+  const classes = useStyles();
 
   useEffect(() => {
-    networkService.confirmApiKey(props.hash)
-      .then((result) => {
+    mutate(hash, {
+      onSuccess: (result) => {
         setApiKey(result);
-      }, () => {
+      },
+      onError: () => {
         setConfirmError(true);
-      });
+      },
+    });
   }, []);
 
-  const classes = useStyles();
-
   return (
-    <ThemeProvider theme={theme}>
-      <div className={classes.grid}>
-        <div className={classes.centeredGridItem}>
-          <Card>
-            <CardHeader title="API Key Confirmation" />
-            <CardContent>
-              { confirmError
-                ? (
-                  <>
-                    <Typography variant="error" component="div" data-testid="api-key-error">
-                      There was an error confirming your email!
-                    </Typography>
-                    <Typography variant="body1" component="div">
-                      Possible reasons:
-                      <ul>
-                        <li>This email confirmation request has already been processed.  Be sure to check you email for an email with your API key.</li>
-                        <li>The confirmation token in the URL is not correct.</li>
-                        <li>The confirmation succeeded, but the acknowledgement email was unable to be sent.</li>
-                      </ul>
-                    </Typography>
-                  </>
-                )
-                : (
-                  <>
-                    <Typography variant="body1" gutterBottom>
-                      Congratulations on sucessfully registering your email for use with CHPL API.  CHPL has sent you an email containing your new API key.
-                    </Typography>
-                    <Typography variant="body1" gutterBottom data-testid="api-key-display">
-                      Your API key is: &nbsp;
-                      <strong>{ apiKey.key }</strong>
-                    </Typography>
-                    <Typography variant="body1" gutterBottom>
-                      Your API key must be included in all API calls via either a header with the name &quot;API-Key&quot; or as a URL parameter named &quot;api_key&quot;.
-                    </Typography>
-                  </>
-                )}
-            </CardContent>
-          </Card>
-        </div>
+    <div className={classes.grid}>
+      <div className={classes.centeredGridItem}>
+        <Card>
+          <CardHeader title="API Key Confirmation" />
+          <CardContent>
+            { confirmError
+              ? (
+                <>
+                  <Typography component="div" data-testid="api-key-error">
+                    There was an error confirming your email!
+                  </Typography>
+                  <Typography variant="body1" component="div">
+                    Possible reasons:
+                    <ul>
+                      <li>This email confirmation request has already been processed. Be sure to check your email for an email with your API key.</li>
+                      <li>The confirmation token in the URL is not correct.</li>
+                      <li>The confirmation succeeded, but the acknowledgement email was unable to be sent.</li>
+                    </ul>
+                  </Typography>
+                </>
+              ) : (
+                <>
+                  <Typography variant="body1" gutterBottom>
+                    Congratulations on sucessfully registering your email for use with CHPL API.  CHPL has sent you an email containing your new API key.
+                  </Typography>
+                  <Typography variant="body1" gutterBottom data-testid="api-key-display">
+                    Your API key is: &nbsp;
+                    <strong>{ apiKey.key }</strong>
+                  </Typography>
+                  <Typography variant="body1" gutterBottom>
+                    Your API key must be included in all API calls via either a header with the name &quot;API-Key&quot; or as a URL parameter named &quot;api_key&quot;.
+                  </Typography>
+                </>
+              )}
+          </CardContent>
+        </Card>
       </div>
-    </ThemeProvider>
+    </div>
   );
 }