OCD-4307: top nav changes

package.json

@@ -26,6 +26,7 @@
     "@material-ui/lab": "^4.0.0-alpha.61",
     "@tanstack/react-query": "4.42.0",
     "@tanstack/react-query-devtools": "4.42.0",
+    "@uirouter/react": "^1.0.8",
     "angular": "^1.8.3",
     "angular-animate": "^1.8.3",
     "angular-aria": "^1.8.3",

src/app/api/axios.jsx

@@ -4,12 +4,14 @@ import { applyAuthTokenInterceptor, getAccessToken } from 'axios-jwt';
 import { element } from 'prop-types';
 
 import { getAngularService } from 'services/angular-react-helper';
+import { UserContext } from 'shared/contexts';
 
 const AxiosContext = createContext();
 
 function AxiosProvider({ children }) {
   const $localStorage = getAngularService('$localStorage');
   const authService = getAngularService('authService');
+  const { setLoginWidgetState } = useContext(UserContext);
 
   const axios = useMemo(() => {
     const ax = Axios.create({
@@ -33,6 +35,7 @@ function AxiosProvider({ children }) {
             return response.data.accessToken;
           })
           .catch(() => {
+            setLoginWidgetState('SIGNIN');
             authService.logout();
           });
       }
@@ -62,6 +65,7 @@ function AxiosProvider({ children }) {
     ax.interceptors.response.use((response) => 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);

src/app/app-wrapper.jsx

@@ -20,9 +20,9 @@ import theme from 'themes/theme';
 function AppWrapper({ children, showQueryTools = DEVELOPER_MODE }) {
   return (
     <ThemeProvider theme={theme}>
-      <UserWrapper>
-        <SnackbarWrapper>
-          <ApiWrapper showQueryTools={showQueryTools}>
+      <ApiWrapper showQueryTools={showQueryTools}>
+        <UserWrapper>
+          <SnackbarWrapper>
             <FlagWrapper>
               <CompareWrapper>
                 <CmsWrapper>
@@ -41,9 +41,9 @@ function AppWrapper({ children, showQueryTools = DEVELOPER_MODE }) {
                 </CmsWrapper>
               </CompareWrapper>
             </FlagWrapper>
-          </ApiWrapper>
-        </SnackbarWrapper>
-      </UserWrapper>
+          </SnackbarWrapper>
+        </UserWrapper>
+      </ApiWrapper>
     </ThemeProvider>
   );
 }

src/app/components/announcements/announcements-fab.jsx

@@ -1,12 +1,32 @@
 import React, { useEffect, useState } from 'react';
+import {
+  Badge,
+  CardHeader,
+  IconButton,
+  Menu,
+  makeStyles,
+} from '@material-ui/core';
 import NotificationsIcon from '@material-ui/icons/Notifications';
 
 import { useFetchAnnouncements } from 'api/announcements';
 import { palette } from 'themes';
 
+const useStyles = makeStyles({
+  announcementHeader: {
+    backgroundColor: palette.white,
+    padding: '16px',
+    fontWeight: 'bold',
+    color: palette.black,
+  },
+  badge: {
+    border: `2px solid ${palette.primaryDark}`,
+  },
+});
+
 function ChplAnnouncementsFab() {
-  const [expanded, setExpanded] = useState(false);
+  const [anchorEl, setAnchorEl] = useState(null);
   const [announcements, setAnnouncements] = useState([]);
+  const classes = useStyles();
 
   const { data, isLoading, isSuccess } = useFetchAnnouncements({ getFuture: false });
 
@@ -16,135 +36,72 @@ function ChplAnnouncementsFab() {
   }, [data, isLoading, isSuccess]);
 
   const handleToggle = (event) => {
-    event.stopPropagation();
-    setExpanded((prev) => !prev);
+    setAnchorEl(anchorEl ? null : event.currentTarget);
   };
 
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      const panel = document.getElementById('announcements-panel');
-      if (panel && !panel.contains(event.target)) {
-        setExpanded(false);
-      }
-    };
-    if (expanded) {
-      document.addEventListener('mousedown', handleClickOutside);
-      return () => document.removeEventListener('mousedown', handleClickOutside);
-    }
-  }, [expanded]);
-
   return (
     <>
-      <button
-        style={{
-          position: 'sticky',
-          zIndex: 96000,
-          backgroundColor: 'transparent',
-          color: palette.white,
-          border: 'none',
-          cursor: 'pointer',
-          boxShadow: 'none',
-          padding: '14px',
-          borderRadius: '50%',
-        }}
+      <IconButton
         onClick={handleToggle}
         aria-label="Show announcements"
+        style={{ color: palette.white }}
       >
-        <span
-          style={{
-            backgroundColor: palette.primary,
-            color: palette.white,
-            borderRadius: '50%',
-            padding: '2px 6px',
-            fontSize: '12px',
-            position: 'absolute',
-            border: `2px ${palette.primaryDark} solid`,
-            top: '-2px',
-            right: '4px',
-          }}
+        <Badge
+          badgeContent={announcements.length}
+          color="primary"
+          overlap="rectangular"
+          classes={{ badge: classes.badge }}
         >
-          {announcements.length}
-        </span>
-        <NotificationsIcon style={{ fontSize: 18, color: palette.white }} />
-      </button>
-
-      {expanded && (
-        <div
-          id="announcements-panel"
-          style={{
+          <NotificationsIcon style={{ fontSize: 18 }} />
+        </Badge>
+      </IconButton>
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={handleToggle}
+        getContentAnchorEl={null}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+        disableScrollLock
+        PaperProps={{
+          style: {
             width: '325px',
-            top: '64px',
-            right: 0,
-            position: 'fixed',
             maxWidth: 'calc(100vw - 48px)',
             maxHeight: 'calc(100vh - 100px)',
-            zIndex: 9998,
-            display: 'flex',
-            flexDirection: 'column',
-            border: `2px solid ${palette.primary}`,
-            background: palette.white,
-            borderRadius: '12px',
-            boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
-          }}
-          role="region"
-          aria-label="Announcements panel"
-          aria-live="polite"
-        >
-          <div
-            style={{
-              padding: '16px',
-              backgroundColor: palette.primary,
-              color: palette.white,
-              borderRadius: '8px 8px 0px 0px',
-              display: 'flex',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-            }}
-          >
-            <h3 style={{
-              margin: 0, fontSize: '1.75rem', fontWeight: 'bold', fontFamily: 'inherit',
-            }}
-            >
-              Announcement
-              {announcements.length !== 1 ? 's' : ''}
-            </h3>
-            <button
-              onClick={handleToggle}
-              style={{
-                background: 'none', border: 'none', color: palette.white, fontSize: '20px', cursor: 'pointer',
-              }}
-              aria-label="Close announcements panel"
-            >
-              ×
-            </button>
-          </div>
-          <div role="main" style={{ flex: 1, overflowY: 'auto' }}>
-            {announcements.length === 0 ? (
-              <div style={{ textAlign: 'center', color: '#999', padding: '32px 16px' }}>
-                <p style={{ fontFamily: 'inherit', fontSize: 'inherit', margin: 0 }}>No current announcements</p>
-              </div>
-            ) : (
-              <div style={{ display: 'flex', flexDirection: 'column' }}>
-                {announcements.map((announcement, index) => (
-                  <div
-                    key={announcement.id || index}
-                    style={{
-                      padding: '16px', wordWrap: 'break-word', whiteSpace: 'pre-wrap', borderBottom: '1px solid #e0e0e0',
-                    }}
-                  >
-                    <h4 style={{ fontFamily: 'inherit', fontSize: 'inherit', margin: 0 }}>
-                      <strong>{announcement.title}</strong>
-                    </h4>
-                    {announcement.text && (
-                      <span>{announcement.text}</span>
-                    )}
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
+          },
+        }}
+      >
+        <CardHeader
+          fontWeight="bold"
+          className={classes.announcementHeader}
+          title={`Announcement${announcements.length !== 1 ? 's' : ''}`}
+        />
+        <div style={{ maxHeight: 'calc(100vh - 200px)', overflowY: 'auto' }}>
+          {announcements.length === 0 ? (
+            <div style={{ textAlign: 'center', color: '#999', padding: '32px 16px' }}>
+              <p style={{ fontFamily: 'inherit', fontSize: 'inherit', margin: 0 }}>No current announcements</p>
+            </div>
+          ) : (
+            <div style={{ display: 'flex', flexDirection: 'column' }}>
+              {announcements.map((announcement, index) => (
+                <div
+                  key={announcement.id || index}
+                  style={{
+                    padding: '16px', wordWrap: 'break-word', whiteSpace: 'pre-wrap', borderBottom: '1px solid #e0e0e0',
+                  }}
+                >
+                  <h4 style={{ fontFamily: 'inherit', fontSize: 'inherit', margin: 0 }}>
+                    <strong>{announcement.title}</strong>
+                  </h4>
+                  {announcement.text && (
+                    <span>{announcement.text}</span>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
         </div>
-      )}
+      </Menu>
     </>
   );
 }

src/app/components/cms-widget/cms-display.jsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react';
 import {
-  Button,
   Box,
+  Button,
   CardContent,
   Chip,
   CircularProgress,
@@ -196,7 +196,7 @@ function ChplCmsDisplay() {
 
   if (!listings || listings.length === 0) {
     return (
-      <>
+      <CardContent className={classes.cardcontentPadding}>
         <Typography className={classes.emptyStateTitle} variant="h3" gutterBottom>
           CMS Certification ID Creator
         </Typography>
@@ -239,7 +239,7 @@ function ChplCmsDisplay() {
           />
           .
         </Typography>
-      </>
+      </CardContent>
     );
   }
 
@@ -315,12 +315,11 @@ function ChplCmsDisplay() {
             />
             { idAnalysis.metPercentages?.criteriaMet < 100
               && (
-                <Typography variant="body1" color="textSecondary" className={classes.preserveWhitespacePreWrapText}>
+                <Typography>
                   Note: the selected product
                   {listings?.length !== 1 ? 's' : ''}
                   {' '}
                   must meet 100% of the Base Criteria.
-                  {' '}
                 </Typography>
               )}
           </>
@@ -359,7 +358,7 @@ function ChplCmsDisplay() {
       <Divider />
       <Typography className={classes.sectionLabelFontWeight800}>Product Selected</Typography>
       <div className={classes.chipContainer}>
-        { listings.sort((a, b) => (a.name < b.name ? -1 : 1))
+        { [...listings].sort((a, b) => (a.product < b.product ? -1 : 1))
           .map((listing) => (
             <Chip
               className={classes.productChips}

src/app/components/cms-widget/cms-widget.directive.js

@@ -33,11 +33,11 @@
       });
       $scope.$on('$destroy', removeAll);
       var addListing = $scope.$on('cms.addListing', (evt, listing) => {
-        vm.toggleProduct(listing.id, listing.product, listing.chplProductNumber);
+        vm.toggleProduct(listing.id, listing.product.name, listing.chplProductNumber);
       });
       $scope.$on('$destroy', addListing);
       var removeListing = $scope.$on('cms.removeListing', (evt, listing) => {
-        vm.toggleProduct(listing.id, listing.product, listing.chplProductNumber);
+        vm.toggleProduct(listing.id, listing.product.name, listing.chplProductNumber);
       });
       $scope.$on('$destroy', removeListing);
     };