[web] Update bsVersion to return its arguments types (#20963)

* [web] Update `bsVersion` to return its arguments types

* [web] Remove `as string` after `bsVersion` calls

GitOrigin-RevId: 604ce87aaccd709299124a986e98cf45874484bb

services/web/frontend/js/features/project-list/components/table/cells/action-buttons/archive-project-button.tsx

@@ -78,12 +78,7 @@ const ArchiveProjectButtonTooltip = memo(function ArchiveProjectButtonTooltip({
               variant="link"
               accessibilityLabel={text}
               className="action-btn"
-              icon={
+              icon={bsVersion({ bs5: 'inbox', bs3: 'inbox' })}
-                bsVersion({
-                  bs5: 'inbox',
-                  bs3: 'inbox',
-                }) as string
-              }
               bs3Props={{ fw: true }}
             />
           </span>

services/web/frontend/js/features/project-list/components/table/cells/action-buttons/compile-and-download-project-pdf-button.tsx

@@ -159,12 +159,7 @@ const CompileAndDownloadProjectPDFButtonTooltip = memo(
                 loadingLabel={text}
                 isLoading={pendingCompile}
                 className="action-btn"
-                icon={
+                icon={bsVersion({ bs5: 'picture_as_pdf', bs3: 'file-pdf-o' })}
-                  bsVersion({
-                    bs5: 'picture_as_pdf',
-                    bs3: 'file-pdf-o',
-                  }) as string
-                }
                 bs3Props={{
                   fw: true,
                   loading: pendingCompile ? (

services/web/frontend/js/features/project-list/components/table/cells/action-buttons/copy-project-button.tsx

@@ -111,12 +111,7 @@ const CopyProjectButtonTooltip = memo(function CopyProjectButtonTooltip({
               variant="link"
               accessibilityLabel={text}
               className="action-btn"
-              icon={
+              icon={bsVersion({ bs5: 'file_copy', bs3: 'files-o' })}
-                bsVersion({
-                  bs5: 'file_copy',
-                  bs3: 'files-o',
-                }) as string
-              }
               bs3Props={{ fw: true }}
             />
           </span>

services/web/frontend/js/features/project-list/components/table/cells/action-buttons/delete-project-button.tsx

@@ -76,12 +76,7 @@ const DeleteProjectButtonTooltip = memo(function DeleteProjectButtonTooltip({
               variant="link"
               accessibilityLabel={text}
               className="action-btn"
-              icon={
+              icon={bsVersion({ bs5: 'block', bs3: 'ban' })}
-                bsVersion({
-                  bs5: 'block',
-                  bs3: 'ban',
-                }) as string
-              }
               bs3Props={{ fw: true }}
             />
           </span>

services/web/frontend/js/features/project-list/components/table/cells/action-buttons/download-project-button.tsx

@@ -52,12 +52,7 @@ const DownloadProjectButtonTooltip = memo(
                 variant="link"
                 accessibilityLabel={text}
                 className="action-btn"
-                icon={
+                icon={bsVersion({ bs5: 'download', bs3: 'cloud-download' })}
-                  bsVersion({
-                    bs5: 'download',
-                    bs3: 'cloud-download',
-                  }) as string
-                }
                 bs3Props={{ fw: true }}
               />
             </span>

services/web/frontend/js/features/project-list/components/table/cells/action-buttons/leave-project-button.tsx

@@ -75,12 +75,7 @@ const LeaveProjectButtonTooltip = memo(function LeaveProjectButtonTooltip({
               variant="link"
               accessibilityLabel={text}
               className="action-btn"
-              icon={
+              icon={bsVersion({ bs5: 'logout', bs3: 'sign-out' })}
-                bsVersion({
-                  bs5: 'logout',
-                  bs3: 'sign-out',
-                }) as string
-              }
               bs3Props={{ fw: true }}
             />
           </span>

services/web/frontend/js/features/project-list/components/table/cells/action-buttons/trash-project-button.tsx

@@ -75,12 +75,7 @@ const TrashProjectButtonTooltip = memo(function TrashProjectButtonTooltip({
               variant="link"
               accessibilityLabel={text}
               className="action-btn"
-              icon={
+              icon={bsVersion({ bs5: 'delete', bs3: 'trash' })}
-                bsVersion({
-                  bs5: 'delete',
-                  bs3: 'trash',
-                }) as string
-              }
               bs3Props={{ fw: true }}
             />
           </span>

services/web/frontend/js/features/project-list/components/table/cells/action-buttons/unarchive-project-button.tsx

@@ -54,12 +54,7 @@ const UnarchiveProjectButtonTooltip = memo(
                 variant="link"
                 accessibilityLabel={text}
                 className="action-btn"
-                icon={
+                icon={bsVersion({ bs5: 'restore_page', bs3: 'reply' })}
-                  bsVersion({
-                    bs5: 'restore_page',
-                    bs3: 'reply',
-                  }) as string
-                }
                 bs3Props={{ fw: true }}
               />
             </span>

services/web/frontend/js/features/project-list/components/table/cells/action-buttons/untrash-project-button.tsx

@@ -53,12 +53,7 @@ const UntrashProjectButtonTooltip = memo(function UntrashProjectButtonTooltip({
               variant="link"
               accessibilityLabel={text}
               className="action-btn"
-              icon={
+              icon={bsVersion({ bs5: 'restore_page', bs3: 'reply' })}
-                bsVersion({
-                  bs5: 'restore_page',
-                  bs3: 'reply',
-                }) as string
-              }
               bs3Props={{ fw: true }}
             />
           </span>

services/web/frontend/js/features/project-list/components/table/project-tools/buttons/archive-projects-button.tsx

@@ -50,12 +50,7 @@ function ArchiveProjectsButton() {
           onClick={handleOpenModal}
           variant="secondary"
           accessibilityLabel={text}
-          icon={
+          icon={bsVersion({ bs5: 'inbox', bs3: 'inbox' })}
-            bsVersion({
-              bs5: 'inbox',
-              bs3: 'inbox',
-            }) as string
-          }
         />
       </OLTooltip>
       <ArchiveProjectModal

services/web/frontend/js/features/project-list/components/table/project-tools/buttons/download-projects-button.tsx

@@ -39,12 +39,7 @@ function DownloadProjectsButton() {
         onClick={handleDownloadProjects}
         variant="secondary"
         accessibilityLabel={text}
-        icon={
+        icon={bsVersion({ bs5: 'download', bs3: 'cloud-download' })}
-          bsVersion({
-            bs5: 'download',
-            bs3: 'cloud-download',
-          }) as string
-        }
       />
     </OLTooltip>
   )

services/web/frontend/js/features/project-list/components/table/project-tools/buttons/trash-projects-button.tsx

@@ -50,12 +50,7 @@ function TrashProjectsButton() {
           onClick={handleOpenModal}
           variant="secondary"
           accessibilityLabel={text}
-          icon={
+          icon={bsVersion({ bs5: 'delete', bs3: 'trash' })}
-            bsVersion({
-              bs5: 'delete',
-              bs3: 'trash',
-            }) as string
-          }
         />
       </OLTooltip>
       <TrashProjectModal

services/web/frontend/js/features/settings/components/emails/actions/remove.tsx

@@ -26,12 +26,7 @@ function DeleteButton({ disabled, isLoading, onClick }: DeleteButtonProps) {
       size="sm"
       onClick={onClick}
       accessibilityLabel={t('remove') || ''}
-      icon={
+      icon={bsVersion({ bs5: 'delete', bs3: 'trash' })}
-        bsVersion({
-          bs5: 'delete',
-          bs3: 'trash',
-        }) as string
-      }
       bs3Props={{ fw: true }}
     />
   )

services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx

@@ -187,7 +187,7 @@ const Toolbar = memo(function Toolbar() {
           label="Toggle Search"
           command={commands.toggleSearch}
           active={searchPanelOpen(state)}
-          icon={bsVersion({ bs5: 'search', bs3: 'search' }) as string}
+          icon={bsVersion({ bs5: 'search', bs3: 'search' })}
         />
 
         <SwitchToPDFButton />
@@ -202,7 +202,7 @@ const Toolbar = memo(function Toolbar() {
           id="toolbar-expand-less"
           label="Hide Toolbar"
           command={toggleToolbar}
-          icon={bsVersion({ bs5: 'arrow_drop_up', bs3: 'caret-up' }) as string}
+          icon={bsVersion({ bs5: 'arrow_drop_up', bs3: 'caret-up' })}
           hidden // enable this once there's a way to show the toolbar again
         />
       </div>

services/web/frontend/js/features/source-editor/components/figure-modal/figure-modal-source-picker.tsx

@@ -22,25 +22,25 @@ export const FigureModalSourcePicker: FC = () => {
       <FigureModalSourceButton
         type={FigureModalSource.FILE_UPLOAD}
         title={t('replace_from_computer')}
-        icon={bsVersion({ bs3: 'upload', bs5: 'upload' }) as string}
+        icon={bsVersion({ bs3: 'upload', bs5: 'upload' })}
       />
       <FigureModalSourceButton
         type={FigureModalSource.FILE_TREE}
         title={t('replace_from_project_files')}
-        icon={bsVersion({ bs3: 'archive', bs5: 'inbox' }) as string}
+        icon={bsVersion({ bs3: 'archive', bs5: 'inbox' })}
       />
       {(hasLinkedProjectFileFeature || hasLinkedProjectOutputFileFeature) && (
         <FigureModalSourceButton
           type={FigureModalSource.OTHER_PROJECT}
           title={t('replace_from_another_project')}
-          icon={bsVersion({ bs3: 'folder-open', bs5: 'folder_open' }) as string}
+          icon={bsVersion({ bs3: 'folder-open', bs5: 'folder_open' })}
         />
       )}
       {hasLinkUrlFeature && (
         <FigureModalSourceButton
           type={FigureModalSource.FROM_URL}
           title={t('replace_from_url')}
-          icon={bsVersion({ bs3: 'globe', bs5: 'public' }) as string}
+          icon={bsVersion({ bs3: 'globe', bs5: 'public' })}
         />
       )}
     </div>

services/web/frontend/js/features/source-editor/components/toolbar/toolbar-items.tsx

@@ -46,14 +46,14 @@ export const ToolbarItems: FC<{
             id="toolbar-undo"
             label={t('toolbar_undo')}
             command={undo}
-            icon={bsVersion({ bs5: 'undo', bs3: 'undo' }) as string}
+            icon={bsVersion({ bs5: 'undo', bs3: 'undo' })}
             shortcut={isMac ? '⌘Z' : 'Ctrl+Z'}
           />
           <ToolbarButton
             id="toolbar-redo"
             label={t('toolbar_redo')}
             command={redo}
-            icon={bsVersion({ bs5: 'redo', bs3: 'repeat' }) as string}
+            icon={bsVersion({ bs5: 'redo', bs3: 'repeat' })}
             shortcut={isMac ? '⇧⌘Z' : 'Ctrl+Y'}
           />
         </div>
@@ -79,7 +79,7 @@ export const ToolbarItems: FC<{
                 label={t('toolbar_format_bold')}
                 command={commands.toggleBold}
                 active={isActive('\\textbf')}
-                icon={bsVersion({ bs5: 'format_bold', bs3: 'bold' }) as string}
+                icon={bsVersion({ bs5: 'format_bold', bs3: 'bold' })}
                 shortcut={isMac ? '⌘B' : 'Ctrl+B'}
               />
               <ToolbarButton
@@ -87,9 +87,7 @@ export const ToolbarItems: FC<{
                 label={t('toolbar_format_italic')}
                 command={commands.toggleItalic}
                 active={isActive('\\textit')}
-                icon={
+                icon={bsVersion({ bs5: 'format_italic', bs3: 'italic' })}
-                  bsVersion({ bs5: 'format_italic', bs3: 'italic' }) as string
-                }
                 shortcut={isMac ? '⌘I' : 'Ctrl+I'}
               />
             </div>
@@ -124,19 +122,19 @@ export const ToolbarItems: FC<{
                 id="toolbar-href"
                 label={t('toolbar_insert_link')}
                 command={commands.wrapInHref}
-                icon={bsVersion({ bs5: 'link', bs3: 'link' }) as string}
+                icon={bsVersion({ bs5: 'link', bs3: 'link' })}
               />
               <ToolbarButton
                 id="toolbar-ref"
                 label={t('toolbar_insert_cross_reference')}
                 command={commands.insertRef}
-                icon={bsVersion({ bs5: 'sell', bs3: 'tag' }) as string}
+                icon={bsVersion({ bs5: 'sell', bs3: 'tag' })}
               />
               <ToolbarButton
                 id="toolbar-cite"
                 label={t('toolbar_insert_citation')}
                 command={commands.insertCite}
-                icon={bsVersion({ bs5: 'menu_book', bs3: 'book' }) as string}
+                icon={bsVersion({ bs5: 'menu_book', bs3: 'book' })}
               />
               <InsertFigureDropdown />
               <TableInserterDropdown />
@@ -152,34 +150,28 @@ export const ToolbarItems: FC<{
                 id="toolbar-bullet-list"
                 label={t('toolbar_bullet_list')}
                 command={commands.toggleBulletList}
-                icon={
+                icon={bsVersion({
-                  bsVersion({
+                  bs5: 'format_list_bulleted',
-                    bs5: 'format_list_bulleted',
+                  bs3: 'list-ul',
-                    bs3: 'list-ul',
+                })}
-                  }) as string
-                }
               />
               <ToolbarButton
                 id="toolbar-numbered-list"
                 label={t('toolbar_numbered_list')}
                 command={commands.toggleNumberedList}
-                icon={
+                icon={bsVersion({
-                  bsVersion({
+                  bs5: 'format_list_numbered',
-                    bs5: 'format_list_numbered',
+                  bs3: 'list-ol',
-                    bs3: 'list-ol',
+                })}
-                  }) as string
-                }
               />
               <ToolbarButton
                 id="toolbar-format-indent-decrease"
                 label={t('toolbar_decrease_indent')}
                 command={commands.indentDecrease}
-                icon={
+                icon={bsVersion({
-                  bsVersion({
+                  bs5: 'format_indent_decrease',
-                    bs5: 'format_indent_decrease',
+                  bs3: 'outdent',
-                    bs3: 'outdent',
+                })}
-                  }) as string
-                }
                 shortcut={visual ? (isMac ? '⌘[' : 'Ctrl+[') : undefined}
                 disabled={listDepth < 2}
               />
@@ -187,12 +179,10 @@ export const ToolbarItems: FC<{
                 id="toolbar-format-indent-increase"
                 label={t('toolbar_increase_indent')}
                 command={commands.indentIncrease}
-                icon={
+                icon={bsVersion({
-                  bsVersion({
+                  bs5: 'format_indent_increase',
-                    bs5: 'format_indent_increase',
+                  bs3: 'indent',
-                    bs3: 'indent',
+                })}
-                  }) as string
-                }
                 shortcut={visual ? (isMac ? '⌘]' : 'Ctrl+]') : undefined}
                 disabled={listDepth < 1}
               />

services/web/frontend/js/features/utils/bootstrap-5.ts

@@ -4,7 +4,11 @@ import getMeta from '@/utils/meta'
 // any isBootstrap5 check is performed
 export const isBootstrap5 = () => getMeta('ol-bootstrapVersion') === 5
 
-export const bsVersion = ({ bs5, bs3 }: { bs5?: string; bs3?: string }) => {
+/* eslint-disable no-redeclare */
+export function bsVersion<A>({ bs5 }: { bs5: A }): A | undefined
+export function bsVersion<B>({ bs3 }: { bs3: B }): B | undefined
+export function bsVersion<A, B>({ bs5, bs3 }: { bs5: A; bs3: B }): A | B
+export function bsVersion({ bs5, bs3 }: { bs5?: unknown; bs3?: unknown }) {
   return isBootstrap5() ? bs5 : bs3
 }
 

services/web/frontend/js/shared/components/copy-to-clipboard.tsx

@@ -77,12 +77,10 @@ const IconButton: FC<{
       accessibilityLabel={t('copy')}
       className="copy-button"
       bs3Props={{ bsSize: 'xsmall' }}
-      icon={
+      icon={bsVersion({
-        bsVersion({
+        bs5: copied ? 'check' : 'content_copy',
-          bs5: copied ? 'check' : 'content_copy',
+        bs3: copied ? 'check' : 'clipboard',
-          bs3: copied ? 'check' : 'clipboard',
+      })}
-        }) || ''
-      }
     />
   )
 }