[JN-1375] UX tweaks for kit scanning (#1129)

Co-authored-by: Devon <[email protected]>

ui-admin/src/api/api-utils.tsx

@@ -63,15 +63,21 @@ export const doApiLoad = async (loadingFunc: () => Promise<unknown>,
   opts: {
         setIsLoading?: (isLoading: boolean) => void,
         setIsError?: (isError: boolean) => void,
-        customErrorMsg?: string
+        customErrorMsg?: string,
+        alertErrors?: boolean,
+        setError?: (error: string) => void
     } = {}) => {
+  if (opts.alertErrors === undefined) {
+    opts.alertErrors = true
+  }
   if (opts.setIsLoading) { opts.setIsLoading(true) }
   try {
     await loadingFunc()
     if (opts.setIsError) { opts.setIsError(false) }
   } catch (e) {
-    defaultApiErrorHandle(e as ApiErrorResponse, opts.customErrorMsg)
+    if (opts.alertErrors) { defaultApiErrorHandle(e as ApiErrorResponse, opts.customErrorMsg) }
     if (opts.setIsError) { opts.setIsError(true) }
+    if (opts.setError) { opts.setError((e as ApiErrorResponse).message) }
   }
   if (opts.setIsLoading) { opts.setIsLoading(false) }
 }

ui-admin/src/components/forms/Textarea.tsx

@@ -5,7 +5,7 @@ import InfoPopup from './InfoPopup'
 export type TextareaProps = Omit<JSX.IntrinsicElements['textarea'], 'onChange'> & {
   description?: string
   infoContent?: React.ReactNode
-  label: string
+  label?: string
   labelClassname?: string,
   required?: boolean
   onChange?: (value: string) => void

ui-admin/src/navbar/AdminSidebar.tsx

@@ -1,8 +1,8 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useUser } from '../user/UserProvider'
 import { Link, NavLink, useParams } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faArrowRightFromBracket } from '@fortawesome/free-solid-svg-icons'
+import { faCaretRight } from '@fortawesome/free-solid-svg-icons'
 import { Study } from '@juniper/ui-core'
 import { studyShortcodeFromPath } from '../study/StudyRouter'
 import { useNavContext } from './NavContextProvider'
@@ -44,6 +44,13 @@ const AdminSidebar = ({ config }: { config: Config }) => {
 
   const color = ZONE_COLORS[config.deploymentZone] || ZONE_COLORS['prod']
 
+  // automatically collapse the sidebar for mobile-first routes
+  useEffect(() => {
+    if (isMobileFirstRoute()) {
+      setOpen(false)
+    }
+  }, [])
+
   return <div style={{ backgroundColor: color, minHeight: '100vh', minWidth: open ? '250px' : '50px' }}
     className="p-2 pt-3">
     <>
@@ -55,7 +62,7 @@ const AdminSidebar = ({ config }: { config: Config }) => {
             localStorage.setItem(SHOW_SIDEBAR_KEY, (!open).toString())
           }}
           tooltip={open ? 'Hide sidebar' : 'Show sidebar'}>
-          <FontAwesomeIcon icon={faArrowRightFromBracket}
+          <FontAwesomeIcon icon={faCaretRight}
             className={classNames(open ? 'fa-rotate-180' : '')}/>
         </Button>
       </div>
@@ -83,4 +90,8 @@ const AdminSidebar = ({ config }: { config: Config }) => {
   </div>
 }
 
+const isMobileFirstRoute = () => {
+  return window.location.pathname.endsWith('kits/scan')
+}
+
 export default AdminSidebar