From 1f8123141cac0bb66a0469b185c47bec7a98cd04 Mon Sep 17 00:00:00 2001
From: Aaron Shafovaloff <ashafovaloff@instructure.com>
Date: Wed, 25 Oct 2023 11:15:31 -0600
Subject: [PATCH] TypeScriptify more navigation_header files

test plan:
  - build passes

flag=none

Change-Id: I91245ac900c1a92151253d628f70fd9fe3d96a19
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/331294
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Martin Ochoa <martin.ochoa@instructure.com>
QA-Review: Aaron Shafovaloff <ashafovaloff@instructure.com>
Product-Review: Aaron Shafovaloff <ashafovaloff@instructure.com>
---
 .../{index.jsx => index.tsx}                  |  9 ++++--
 ...eToggle.jsx => HighContrastModeToggle.tsx} | 31 ++++++++++++-------
 ui/shared/alerts/react/FlashAlert.tsx         |  2 +-
 3 files changed, 27 insertions(+), 15 deletions(-)
 rename ui/features/navigation_header/{index.jsx => index.tsx} (93%)
 rename ui/features/navigation_header/react/trays/{HighContrastModeToggle.jsx => HighContrastModeToggle.tsx} (91%)

diff --git a/ui/features/navigation_header/index.jsx b/ui/features/navigation_header/index.tsx
similarity index 93%
rename from ui/features/navigation_header/index.jsx
rename to ui/features/navigation_header/index.tsx
index 8042d536009..16d59d47ca1 100644
--- a/ui/features/navigation_header/index.jsx
+++ b/ui/features/navigation_header/index.tsx
@@ -61,7 +61,9 @@ ready(() => {
 
     ReactDOM.render(
       <Navigation
+        // @ts-expect-error
         ref={DesktopNavComponent}
+        // @ts-expect-error
         onDataReceived={() => mobileNavComponent.current?.forceUpdate()}
       />,
       globalNavTrayContainer,
@@ -70,6 +72,7 @@ ready(() => {
         if (mobileContextNavContainer) {
           ReactDOM.render(
             <MobileNavigation
+              // @ts-expect-error
               ref={mobileNavComponent}
               DesktopNavComponent={DesktopNavComponent.current}
             />,
@@ -81,12 +84,12 @@ ready(() => {
   }
 
   const newTabContainers = document.getElementsByClassName('new-tab-indicator')
-  if (newTabContainers) {
-    for (const newTabContainer of newTabContainers) {
+  Array.from(newTabContainers).forEach(newTabContainer => {
+    if (newTabContainer instanceof HTMLElement && newTabContainer.dataset.tabname) {
       ReactDOM.render(
         <NewTabIndicator tabName={newTabContainer.dataset.tabname} />,
         newTabContainer
       )
     }
-  }
+  })
 })
diff --git a/ui/features/navigation_header/react/trays/HighContrastModeToggle.jsx b/ui/features/navigation_header/react/trays/HighContrastModeToggle.tsx
similarity index 91%
rename from ui/features/navigation_header/react/trays/HighContrastModeToggle.jsx
rename to ui/features/navigation_header/react/trays/HighContrastModeToggle.tsx
index 25f6cfc769d..6f828a1c32d 100644
--- a/ui/features/navigation_header/react/trays/HighContrastModeToggle.jsx
+++ b/ui/features/navigation_header/react/trays/HighContrastModeToggle.tsx
@@ -50,12 +50,19 @@ const checkboxThemeOverrides = {
   focusOutlineColor: brand,
 }
 
-const HighContrastLabel = ({loading, isMobile}) => {
+type HighContrastLabelProps = {
+  loading: boolean
+  isMobile: boolean
+}
+
+type TipTrigger = 'click' | 'hover' | 'focus'
+
+const HighContrastLabel = ({loading, isMobile}: HighContrastLabelProps) => {
   const labelText = isMobile ? I18n.t('Hi-contrast') : I18n.t('Use High Contrast UI')
   const mobileTipText = I18n.t('Enhance color contrast of content')
   const dekstopTipText = I18n.t('Enhances the color contrast of text, buttons, etc.')
   const tipText = isMobile ? mobileTipText : dekstopTipText
-  const tipTriggers = ['click']
+  const tipTriggers: TipTrigger[] = ['click']
 
   if (!isMobile) {
     tipTriggers.push('hover')
@@ -112,7 +119,11 @@ HighContrastLabel.propTypes = {
   isMobile: bool.isRequired,
 }
 
-export default function HighContrastModeToggle({isMobile}) {
+type HighContrastModeToggleProps = {
+  isMobile: boolean
+}
+
+export default function HighContrastModeToggle({isMobile}: HighContrastModeToggleProps) {
   const originalSetting = useRef(ENV.use_high_contrast)
   const [enabled, setEnabled] = useState(ENV.use_high_contrast)
   const [loading, setLoading] = useState(false)
@@ -139,10 +150,12 @@ export default function HighContrastModeToggle({isMobile}) {
       setEnabled(json.state === 'on')
       ENV.use_high_contrast = json.state === 'on'
     } catch (err) {
-      showFlashAlert({
-        message: I18n.t('An error occurred while trying to change the UI'),
-        err,
-      })
+      if (err instanceof Error) {
+        showFlashAlert({
+          message: I18n.t('An error occurred while trying to change the UI'),
+          err,
+        })
+      }
     } finally {
       setLoading(false)
     }
@@ -170,10 +183,6 @@ export default function HighContrastModeToggle({isMobile}) {
   )
 }
 
-HighContrastModeToggle.propTypes = {
-  isMobile: bool,
-}
-
 HighContrastModeToggle.defaultProps = {
   isMobile: false,
 }
diff --git a/ui/shared/alerts/react/FlashAlert.tsx b/ui/shared/alerts/react/FlashAlert.tsx
index 0350d968b62..00afffb990d 100644
--- a/ui/shared/alerts/react/FlashAlert.tsx
+++ b/ui/shared/alerts/react/FlashAlert.tsx
@@ -99,7 +99,7 @@ const isLoadingChunkError = (a?: string): boolean => {
 // more info about the error when pressed.
 // Is displayed at the top of the document, and will close itself after a while
 
-type FlashAlertProps = typeof FlashAlert.defaultProps & {
+type FlashAlertProps = {
   onClose: () => void
   message: HTMLElement | string
   error?: Error | null