Merge pull request #18567 from overleaf/rd-bs5-settings-modal

[web] Migrate the Git Integration settings on the Account Settings page to Bootstrap 5

GitOrigin-RevId: bafac941d3afaadaa046de07e18968d8e3692b1c

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

@@ -30,7 +30,7 @@ function DeleteButton({ disabled, isLoading, onClick }: DeleteButtonProps) {
         bsVersion({
           bs5: 'delete',
           bs3: 'trash',
-        }) || 'trash'
+        }) as string
       }
       bs3Props={{ fw: true }}
     />

services/web/frontend/js/features/ui/components/ol/ol-button.tsx

@@ -4,11 +4,14 @@ import type { ButtonProps } from '@/features/ui/components/types/button-props'
 import type { ButtonProps as BS3ButtonPropsBase } from 'react-bootstrap'
 import Button from '../bootstrap-5/button'
 
+export type BS3ButtonSize = 'xsmall' | 'sm' | 'medium' | 'lg'
+
 export type OLButtonProps = ButtonProps & {
   bs3Props?: {
     bsStyle?: string | null
     className?: string
     loading?: React.ReactNode
+    bsSize?: BS3ButtonSize
   }
 }
 

services/web/frontend/js/features/ui/components/ol/ol-icon-button.tsx

@@ -1,4 +1,4 @@
-import { BS3ButtonProps, mapBsButtonSizes } from './ol-button'
+import { BS3ButtonProps, BS3ButtonSize, mapBsButtonSizes } from './ol-button'
 import { Button as BS3Button } from 'react-bootstrap'
 import type { IconButtonProps } from '@/features/ui/components/types/icon-button-props'
 import BootstrapVersionSwitcher from '../bootstrap-5/bootstrap-version-switcher'
@@ -9,6 +9,8 @@ export type OLIconButtonProps = IconButtonProps & {
   bs3Props?: {
     loading?: React.ReactNode
     fw?: IconProps['fw']
+    className?: string
+    bsSize?: BS3ButtonSize
   }
 }
 
@@ -18,7 +20,7 @@ export default function OLIconButton(props: OLIconButtonProps) {
   const { fw, ...filterBs3Props } = bs3Props || {}
 
   const bs3ButtonProps: BS3ButtonProps = {
-    bsStyle: rest.variant,
+    bsStyle: rest.variant === 'secondary' ? 'default' : rest.variant,
     bsSize: mapBsButtonSizes(rest.size),
     disabled: rest.isLoading || rest.disabled,
     form: rest.form,

services/web/frontend/js/features/ui/components/ol/ol-modal.tsx

@@ -42,7 +42,6 @@ export default function OLModal({ children, ...props }: OLModalProps) {
     onHide: bs5Props.onHide,
     backdrop: bs5Props.backdrop,
     animation: bs5Props.animation,
-    dialogComponent: bs5Props.dialogAs,
     ...bs3Props,
   }
 

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

@@ -1,8 +1,9 @@
 import { FC, memo, MouseEventHandler, useCallback, useState } from 'react'
-import { Button } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
-import Tooltip from './tooltip'
-import Icon from './icon'
+import OLButton from '@/features/ui/components/ol/ol-button'
+import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
+import OLIconButton from '@/features/ui/components/ol/ol-icon-button'
+import { bsVersion } from '@/features/utils/bootstrap-5'
 
 export const CopyToClipboard = memo<{
   content: string
@@ -27,13 +28,10 @@ export const CopyToClipboard = memo<{
   }
 
   return (
-    <Tooltip
+    <OLTooltip
       id={tooltipId}
       description={copied ? `${t('copied')}!` : t('copy')}
-      overlayProps={{
-        delayHide: copied ? 1000 : 250,
-        shouldUpdatePosition: true,
-      }}
+      overlayProps={{ delay: copied ? 1000 : 250 }}
     >
       <span>
         {kind === 'text' ? (
@@ -42,43 +40,51 @@ export const CopyToClipboard = memo<{
           <IconButton handleClick={handleClick} copied={copied} />
         )}
       </span>
-    </Tooltip>
+    </OLTooltip>
   )
 })
 CopyToClipboard.displayName = 'CopyToClipboard'
 
 const TextButton: FC<{
-  handleClick: MouseEventHandler<Button>
+  handleClick: MouseEventHandler<HTMLButtonElement>
 }> = ({ handleClick }) => {
   const { t } = useTranslation()
 
   return (
-    <Button
+    <OLButton
       onClick={handleClick}
-      bsSize="xsmall"
-      bsStyle={null}
-      className="copy-button btn-secondary"
+      size="small"
+      variant="secondary"
+      bs3Props={{
+        bsStyle: null,
+        className: 'btn-secondary copy-button',
+        bsSize: 'xsmall',
+      }}
     >
       {t('copy')}
-    </Button>
+    </OLButton>
   )
 }
 
 const IconButton: FC<{
-  handleClick: MouseEventHandler<Button>
+  handleClick: MouseEventHandler<HTMLButtonElement>
   copied: boolean
 }> = ({ handleClick, copied }) => {
   const { t } = useTranslation()
 
   return (
-    <Button
+    <OLIconButton
       onClick={handleClick}
-      bsSize="xsmall"
-      bsStyle="link"
+      variant="link"
+      accessibilityLabel={t('copy')}
       className="copy-button"
-      aria-label={t('copy')}
-    >
-      <Icon type={copied ? 'check' : 'clipboard'} />
-    </Button>
+      bs3Props={{ bsSize: 'xsmall' }}
+      icon={
+        bsVersion({
+          bs5: copied ? 'check' : 'content_copy',
+          bs3: copied ? 'check' : 'clipboard',
+        }) || ''
+      }
+    />
   )
 }

services/web/frontend/stylesheets/bootstrap-5/base/typography.scss

@@ -54,3 +54,12 @@ h6,
 .small {
   @include body-sm;
 }
+
+// Peformatted text, sample output, code, keyboard input elements
+// E.g.: Git authentication token
+code,
+kbd,
+pre,
+samp {
+  @include body-base;
+}

services/web/frontend/stylesheets/bootstrap-5/components/button.scss

@@ -201,3 +201,8 @@
 a[role='button']:visited {
   color: var(--bs-btn-color);
 }
+
+// Copy icon button
+.copy-button {
+  text-decoration: none;
+}

services/web/frontend/stylesheets/bootstrap-5/components/modal.scss

@@ -47,3 +47,38 @@
     }
   }
 }
+
+// Git bridge modal
+.git-bridge-copy {
+  background: var(--bg-light-secondary);
+  color: var(--content-primary);
+  padding: var(--spacing-05);
+  border-radius: var(--border-radius-base);
+  display: flex;
+  justify-content: center;
+  gap: var(--spacing-05);
+  align-items: center;
+  margin: var(--spacing-09) 0;
+
+  & code {
+    color: var(--content-primary);
+    word-break: break-word;
+  }
+}
+
+.git-bridge-optional-tokens {
+  border: 1px solid var(--border-primary);
+  border-radius: var(--border-radius-base);
+  padding: var(--spacing-07);
+  margin: var(--spacing-09) 0;
+}
+
+.git-bridge-optional-tokens-header {
+  font-size: 120%;
+  font-weight: bold;
+  margin-bottom: var(--spacing-05);
+}
+
+.git-bridge-optional-tokens-actions {
+  margin-top: var(--spacing-05);
+}