Core 1264 port default layout part 1 (#2783)

* CORE-1264: Port default layouts, part 1

[CORE-1264]

* Remove welcome

* Quiet more tests

* Cover the piTracker call

* Coverage of default/shared

* Handle missing/disabled localStorage

Author: RoyEJohnson

src/app/layouts/default/default.tsx

@@ -9,7 +9,6 @@ import useMainClassContext, {
 } from '~/contexts/main-class';
 import useLanguageContext from '~/contexts/language';
 import ReactModal from 'react-modal';
-import Welcome from './welcome/welcome';
 import TakeoverDialog from './takeover-dialog/takeover-dialog';
 import cn from 'classnames';
 import './default.scss';
@@ -53,7 +52,6 @@ function Main({children}: React.PropsWithChildren<object>) {
             ref={ref}
             tabIndex={-1}
         >
-            <Welcome />
             <TakeoverDialog />
             {children}
         </div>

src/app/layouts/default/footer/copyright.tsx

@@ -7,9 +7,7 @@ type Props = {
 }
 
 export default function Copyright({copyright, apStatement}: Props) {
-    const updatedCopyright = copyright
-        ? copyright.replace(/-\d+/, `-${new Date().getFullYear()}`)
-        : copyright;
+    const updatedCopyright = copyright?.replace(/-\d+/, `-${new Date().getFullYear()}`);
 
     return (
         <React.Fragment>

src/app/layouts/default/header/header.js renamed to src/app/layouts/default/header/header.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import JITLoad from '~/helpers/jit-load';
+import StickyNote from './sticky-note/sticky-note';
 import {useStickyData} from '../shared';
 import Menus from './menus/menus';
 import './header.scss';
@@ -9,7 +9,7 @@ export default function Header() {
 
     return (
         <div className="page-header">
-            <JITLoad importFn={() => import('./sticky-note/sticky-note.js')} stickyData={stickyData} />
+            <StickyNote stickyData={stickyData} />
             <Menus />
         </div>
     );

src/app/layouts/default/header/menus/dropdown-context.tsx

@@ -3,7 +3,7 @@ import {useState} from 'react';
 
 function useContextValue({prefix} = {prefix: 'menulabel'}) {
     const [activeDropdown, setActiveDropdown] = useState<
-        React.MutableRefObject<HTMLAnchorElement> | Record<string, never>
+        React.MutableRefObject<HTMLAnchorElement | null> | Record<string, never>
     >({});
     const [submenuLabel, setSubmenuLabel] = useState<string>();
 

src/app/layouts/default/header/menus/give-button/give-button.js renamed to src/app/layouts/default/header/menus/give-button/give-button.tsx

@@ -4,38 +4,43 @@ import {useLocation} from 'react-router-dom';
 import {treatSpaceOrEnterAsClick} from '~/helpers/events';
 import './menu-expander.scss';
 
-function useCloseOnLocationChange(onClick, active) {
+function useCloseOnLocationChange(toggleActive: (v?: boolean) => void, active: boolean) {
     const location = useLocation();
     const {setActiveDropdown} = useDropdownContext();
-    const activeRef = React.useRef();
+    const activeRef = React.useRef<boolean>();
 
     activeRef.current = active;
 
     React.useEffect(() => {
         if (activeRef.current) {
-            onClick({});
+            toggleActive(false);
             setActiveDropdown({});
         }
-    }, [location, onClick, setActiveDropdown]);
+    }, [location, toggleActive, setActiveDropdown]);
 }
 
-export default function MenuExpander({active, onClick, ...props}) {
+type MenuExpanderProps = {
+    active: boolean;
+    toggleActive: (v?: boolean) => void;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+export default function MenuExpander({active, toggleActive, ...props}: MenuExpanderProps) {
     const onClickAndBlur = React.useCallback(
-        (event) => {
-            onClick(event);
+        (event: React.MouseEvent<HTMLButtonElement>) => {
+            toggleActive();
             event.currentTarget.blur();
         },
-        [onClick]
+        [toggleActive]
     );
 
-    useCloseOnLocationChange(onClick, active);
+    useCloseOnLocationChange(toggleActive, active);
 
     return (
         <button
             type="button"
             className="expand"
             aria-haspopup="true" aria-label="Toggle Meta Navigation Menu"
-            tabIndex="0"
+            tabIndex={0}
             onClick={onClickAndBlur}
             onKeyDown={treatSpaceOrEnterAsClick}
             {...props}

src/app/layouts/default/header/menus/logo/logo.js renamed to src/app/layouts/default/header/menus/logo/logo.tsx

@@ -12,23 +12,22 @@ import { treatSpaceOrEnterAsClick } from '~/helpers/events';
 
 export default function Menus() {
     const ref = React.useRef<HTMLDivElement>(null);
-    const [active, toggle] = useToggle();
-    const expandMenu = React.useCallback(() => toggle(), [toggle]);
+    const [active, toggleActive] = useToggle();
     const clickOverlay = React.useCallback(
         (event: React.MouseEvent) => {
             if (event.currentTarget === event.target) {
-                expandMenu();
+                toggleActive(false);
             }
         },
-        [expandMenu]
+        [toggleActive]
     );
     const closeOnEsc = React.useCallback(
         (event: React.KeyboardEvent) => {
-            if (active && event.key === 'Escape') {
-                expandMenu();
+            if (event.key === 'Escape') {
+                toggleActive(false);
             }
         },
-        [active, expandMenu]
+        [toggleActive]
     );
 
     React.useEffect(() => {
@@ -66,7 +65,7 @@ export default function Menus() {
                     <Logo />
                     <MenuExpander
                         active={active}
-                        onClick={expandMenu}
+                        toggleActive={toggleActive}
                         aria-controls='menu-popover'
                         aria-expanded={active}
                     />

src/app/layouts/default/header/menus/menu-expander/menu-expander.js renamed to src/app/layouts/default/header/menus/menu-expander/menu-expander.tsx

@@ -3,10 +3,17 @@ import RawHTML from '~/components/jsx-helpers/raw-html';
 import {usePutAway} from '../../shared';
 import './sticky-note.scss';
 
-export default function StickyNote({stickyData}) {
+export type StickyNoteProps = {
+    stickyData: {
+        mode: 'emergency';
+        emergency_content: string;
+    } | object | null;
+};
+
+export default function StickyNote({stickyData}: StickyNoteProps) {
     const [closed, PutAway] = usePutAway();
 
-    if (!stickyData || closed || stickyData.mode !== 'emergency') {
+    if (!stickyData || closed || !('emergency_content' in stickyData)) {
         return null;
     }
 

src/app/layouts/default/header/menus/menus.tsx

@@ -7,7 +7,7 @@ import cn from 'classnames';
 import './lower-sticky-note.scss';
 
 type BannerInfo = {
-    html_message: string;
+    html_message?: string;
     link_url: string;
     link_text: string;
     banner_thumbnail?: string;