Merge pull request #21013 from overleaf/td-bs5-history-document-diff-viewer

Migrate document diff viewer to Bootstrap 5

GitOrigin-RevId: 361e6398a09a5ec5c48aced02f27d9896567b539

services/web/frontend/js/features/history/components/diff-view/document-diff-viewer.tsx

@@ -18,9 +18,10 @@ import {
   highlightLocationsField,
   scrollToHighlight,
 } from '../../extensions/highlight-locations'
-import Icon from '../../../../shared/components/icon'
 import { useTranslation } from 'react-i18next'
 import { inlineBackground } from '../../../source-editor/extensions/inline-background'
+import OLButton from '@/features/ui/components/ol/ol-button'
+import { bsVersion } from '@/features/utils/bootstrap-5'
 
 function extensions(themeOptions: Options): Extension[] {
   return [
@@ -131,24 +132,24 @@ function DocumentDiffViewer({
     <div className="document-diff-container">
       <div ref={containerRef} className="cm-viewer-container" />
       {before > 0 ? (
-        <button
-          className="btn btn-secondary previous-highlight-button"
+        <OLButton
+          variant="secondary"
+          leadingIcon={bsVersion({ bs3: 'arrow-up', bs5: 'arrow_upward' })}
           onClick={scrollToPrevious}
+          className="previous-highlight-button"
         >
-          <Icon type="arrow-up" />
-          &nbsp;
           {t('n_more_updates_above', { count: before })}
-        </button>
+        </OLButton>
       ) : null}
       {after > 0 ? (
-        <button
-          className="btn btn-secondary next-highlight-button"
+        <OLButton
+          variant="secondary"
+          leadingIcon={bsVersion({ bs3: 'arrow-down', bs5: 'arrow_downward' })}
           onClick={scrollToNext}
+          className="next-highlight-button"
         >
-          <Icon type="arrow-down" />
-          &nbsp;
           {t('n_more_updates_below', { count: after })}
-        </button>
+        </OLButton>
       ) : null}
     </div>
   )

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

@@ -7,6 +7,8 @@ import Button from '../bootstrap-5/button'
 import classnames from 'classnames'
 import { getAriaAndDataProps } from '@/features/utils/bootstrap-5'
 import { callFnsInSequence } from '@/utils/functions'
+import Icon from '@/shared/components/icon'
+
 export type BS3ButtonSize = 'xsmall' | 'sm' | 'medium' | 'lg'
 
 export type OLButtonProps = ButtonProps & {
@@ -49,6 +51,38 @@ export function bs3ButtonProps(props: ButtonProps) {
   return bs3ButtonProps
 }
 
+function BS3ButtonContent({
+  children,
+  leadingIcon,
+  trailingIcon,
+}: {
+  children: React.ReactNode
+  leadingIcon: OLButtonProps['leadingIcon']
+  trailingIcon: OLButtonProps['trailingIcon']
+}) {
+  const leadingIconComponent =
+    leadingIcon && typeof leadingIcon === 'string' ? (
+      <Icon type={leadingIcon} />
+    ) : (
+      leadingIcon
+    )
+
+  const trailingIconComponent =
+    trailingIcon && typeof trailingIcon === 'string' ? (
+      <Icon type={trailingIcon} />
+    ) : (
+      trailingIcon
+    )
+
+  return (
+    <>
+      {leadingIconComponent ? <>{leadingIconComponent}&nbsp;</> : null}
+      {children}
+      {trailingIconComponent ? <>&nbsp;{trailingIconComponent}</> : null}
+    </>
+  )
+}
+
 const OLButton = forwardRef<HTMLButtonElement, OLButtonProps>(
   ({ bs3Props = {}, ...rest }, ref) => {
     const { className: _, ...restBs3Props } = bs3Props
@@ -78,7 +112,14 @@ const OLButton = forwardRef<HTMLButtonElement, OLButtonProps>(
             {...bs3FinalProps}
             ref={ref as React.LegacyRef<any> | undefined}
           >
-            {bs3Props?.loading || rest.children}
+            {bs3Props?.loading || (
+              <BS3ButtonContent
+                leadingIcon={rest.leadingIcon}
+                trailingIcon={rest.trailingIcon}
+              >
+                {rest.children}
+              </BS3ButtonContent>
+            )}
           </BS3Button>
         }
         bs5={<Button {...rest} ref={ref} />}

services/web/frontend/stylesheets/bootstrap-5/pages/editor/history.scss

@@ -365,6 +365,34 @@ history-root {
   }
 }
 
+.document-diff-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  .cm-viewer-container,
+  .cm-editor {
+    height: 100%;
+  }
+
+  .previous-highlight-button,
+  .next-highlight-button {
+    @include shadow-md;
+
+    position: absolute;
+    right: var(--spacing-06);
+  }
+
+  .previous-highlight-button {
+    top: var(--spacing-06);
+  }
+
+  .next-highlight-button {
+    bottom: var(--spacing-06);
+  }
+}
+
 .history-dropdown-icon {
   color: var(--content-primary);
 }