[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
2024-10-17 21:05:04 -04:00 · 2024-10-10 09:26:37 +02:00 · 2024-10-10 09:26:37 +02:00 · b054342ddb
commit b054342ddb
parent 4a8b79080b
18 changed files with 51 additions and 124 deletions
--- a/services/web/frontend/js/features/project-list/components/table/cells/action-buttons/archive-project-button.tsx
+++ b/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={
-                bsVersion({
-                  bs5: 'inbox',
-                  bs3: 'inbox',
-                }) as string
-              }
+              icon={bsVersion({ bs5: 'inbox', bs3: 'inbox' })}
              bs3Props={{ fw: true }}
            />
          </span>
--- a/services/web/frontend/js/features/project-list/components/table/cells/action-buttons/compile-and-download-project-pdf-button.tsx
+++ b/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={
-                  bsVersion({
-                    bs5: 'picture_as_pdf',
-                    bs3: 'file-pdf-o',
-                  }) as string
-                }
+                icon={bsVersion({ bs5: 'picture_as_pdf', bs3: 'file-pdf-o' })}
                bs3Props={{
                  fw: true,
                  loading: pendingCompile ? (
--- a/services/web/frontend/js/features/project-list/components/table/cells/action-buttons/copy-project-button.tsx
+++ b/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={
-                bsVersion({
-                  bs5: 'file_copy',
-                  bs3: 'files-o',
-                }) as string
-              }
+              icon={bsVersion({ bs5: 'file_copy', bs3: 'files-o' })}
              bs3Props={{ fw: true }}
            />
          </span>
--- a/services/web/frontend/js/features/project-list/components/table/cells/action-buttons/delete-project-button.tsx
+++ b/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={
-                bsVersion({
-                  bs5: 'block',
-                  bs3: 'ban',
-                }) as string
-              }
+              icon={bsVersion({ bs5: 'block', bs3: 'ban' })}
              bs3Props={{ fw: true }}
            />
          </span>
--- a/services/web/frontend/js/features/project-list/components/table/cells/action-buttons/download-project-button.tsx
+++ b/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={
-                  bsVersion({
-                    bs5: 'download',
-                    bs3: 'cloud-download',
-                  }) as string
-                }
+                icon={bsVersion({ bs5: 'download', bs3: 'cloud-download' })}
                bs3Props={{ fw: true }}
              />
            </span>
--- a/services/web/frontend/js/features/project-list/components/table/cells/action-buttons/leave-project-button.tsx
+++ b/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={
-                bsVersion({
-                  bs5: 'logout',
-                  bs3: 'sign-out',
-                }) as string
-              }
+              icon={bsVersion({ bs5: 'logout', bs3: 'sign-out' })}
              bs3Props={{ fw: true }}
            />
          </span>
--- a/services/web/frontend/js/features/project-list/components/table/cells/action-buttons/trash-project-button.tsx
+++ b/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={
-                bsVersion({
-                  bs5: 'delete',
-                  bs3: 'trash',
-                }) as string
-              }
+              icon={bsVersion({ bs5: 'delete', bs3: 'trash' })}
              bs3Props={{ fw: true }}
            />
          </span>
--- a/services/web/frontend/js/features/project-list/components/table/cells/action-buttons/unarchive-project-button.tsx
+++ b/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={
-                  bsVersion({
-                    bs5: 'restore_page',
-                    bs3: 'reply',
-                  }) as string
-                }
+                icon={bsVersion({ bs5: 'restore_page', bs3: 'reply' })}
                bs3Props={{ fw: true }}
              />
            </span>
--- a/services/web/frontend/js/features/project-list/components/table/cells/action-buttons/untrash-project-button.tsx
+++ b/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={
-                bsVersion({
-                  bs5: 'restore_page',
-                  bs3: 'reply',
-                }) as string
-              }
+              icon={bsVersion({ bs5: 'restore_page', bs3: 'reply' })}
              bs3Props={{ fw: true }}
            />
          </span>
--- a/services/web/frontend/js/features/project-list/components/table/project-tools/buttons/archive-projects-button.tsx
+++ b/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={
-            bsVersion({
-              bs5: 'inbox',
-              bs3: 'inbox',
-            }) as string
-          }
+          icon={bsVersion({ bs5: 'inbox', bs3: 'inbox' })}
        />
      </OLTooltip>
      <ArchiveProjectModal
--- a/services/web/frontend/js/features/project-list/components/table/project-tools/buttons/download-projects-button.tsx
+++ b/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={
-          bsVersion({
-            bs5: 'download',
-            bs3: 'cloud-download',
-          }) as string
-        }
+        icon={bsVersion({ bs5: 'download', bs3: 'cloud-download' })}
      />
    </OLTooltip>
  )
--- a/services/web/frontend/js/features/project-list/components/table/project-tools/buttons/trash-projects-button.tsx
+++ b/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={
-            bsVersion({
-              bs5: 'delete',
-              bs3: 'trash',
-            }) as string
-          }
+          icon={bsVersion({ bs5: 'delete', bs3: 'trash' })}
        />
      </OLTooltip>
      <TrashProjectModal
--- a/services/web/frontend/js/features/settings/components/emails/actions/remove.tsx
+++ b/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={
-        bsVersion({
-          bs5: 'delete',
-          bs3: 'trash',
-        }) as string
-      }
+      icon={bsVersion({ bs5: 'delete', bs3: 'trash' })}
      bs3Props={{ fw: true }}
    />
  )
--- a/services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx
+++ b/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>
--- a/services/web/frontend/js/features/source-editor/components/figure-modal/figure-modal-source-picker.tsx
+++ b/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>
--- a/services/web/frontend/js/features/source-editor/components/toolbar/toolbar-items.tsx
+++ b/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={
-                  bsVersion({ bs5: 'format_italic', bs3: 'italic' }) as string
-                }
+                icon={bsVersion({ bs5: 'format_italic', bs3: 'italic' })}
                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={
-                  bsVersion({
-                    bs5: 'format_list_bulleted',
-                    bs3: 'list-ul',
-                  }) as string
-                }
+                icon={bsVersion({
+                  bs5: 'format_list_bulleted',
+                  bs3: 'list-ul',
+                })}
              />
              <ToolbarButton
                id="toolbar-numbered-list"
                label={t('toolbar_numbered_list')}
                command={commands.toggleNumberedList}
-                icon={
-                  bsVersion({
-                    bs5: 'format_list_numbered',
-                    bs3: 'list-ol',
-                  }) as string
-                }
+                icon={bsVersion({
+                  bs5: 'format_list_numbered',
+                  bs3: 'list-ol',
+                })}
              />
              <ToolbarButton
                id="toolbar-format-indent-decrease"
                label={t('toolbar_decrease_indent')}
                command={commands.indentDecrease}
-                icon={
-                  bsVersion({
-                    bs5: 'format_indent_decrease',
-                    bs3: 'outdent',
-                  }) as string
-                }
+                icon={bsVersion({
+                  bs5: 'format_indent_decrease',
+                  bs3: 'outdent',
+                })}
                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={
-                  bsVersion({
-                    bs5: 'format_indent_increase',
-                    bs3: 'indent',
-                  }) as string
-                }
+                icon={bsVersion({
+                  bs5: 'format_indent_increase',
+                  bs3: 'indent',
+                })}
                shortcut={visual ? (isMac ? '⌘]' : 'Ctrl+]') : undefined}
                disabled={listDepth < 1}
              />
--- a/services/web/frontend/js/features/utils/bootstrap-5.ts
+++ b/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
 }

--- a/services/web/frontend/js/shared/components/copy-to-clipboard.tsx
+++ b/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={
-        bsVersion({
-          bs5: copied ? 'check' : 'content_copy',
-          bs3: copied ? 'check' : 'clipboard',
-        }) || ''
-      }
+      icon={bsVersion({
+        bs5: copied ? 'check' : 'content_copy',
+        bs3: copied ? 'check' : 'clipboard',
+      })}
    />
  )
 }