Merge pull request #18733 from overleaf/td-bs5-button-props

Simplify handling of BS3 props in button wrapper component GitOrigin-RevId: 12a6b1374da5084e075775f3cef23f0b24d098fc
2024-11-21 20:47:08 -05:00 · 2024-06-06 16:37:47 +01:00 · 2024-06-06 16:37:47 +01:00 · 29837ec838
commit 29837ec838
parent c070c036af
15 changed files with 32 additions and 132 deletions
--- a/services/web/frontend/js/features/settings/components/emails/actions/make-primary/confirmation-modal.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/actions/make-primary/confirmation-modal.tsx
@ -46,21 +46,13 @@ function ConfirmationModal({
        <p className="mb-0">{t('log_in_with_primary_email_address')}</p>
      </OLModalBody>
      <OLModalFooter>
-        <OLButton
-          variant="secondary"
-          onClick={onHide}
-          bs3Props={{
-            bsStyle: null,
-            className: 'btn-secondary-info btn-secondary',
-          }}
-        >
+        <OLButton variant="secondary" onClick={onHide}>
          {t('cancel')}
        </OLButton>
        <OLButton
          variant="primary"
          disabled={isConfirmDisabled}
          onClick={onConfirm}
-          bs3Props={{ bsStyle: null, className: 'btn-primary' }}
        >
          {t('confirm')}
        </OLButton>
--- a/services/web/frontend/js/features/settings/components/emails/actions/make-primary/primary-button.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/actions/make-primary/primary-button.tsx
@ -13,10 +13,6 @@ function PrimaryButton({
      isLoading={isLoading}
      onClick={onClick}
      variant="secondary"
-      bs3Props={{
-        bsStyle: null,
-        className: 'btn-secondary btn-secondary-info',
-      }}
    >
      {children}
    </OLButton>
--- a/services/web/frontend/js/features/settings/components/emails/add-email/add-another-email-btn.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/add-email/add-another-email-btn.tsx
@ -9,7 +9,6 @@ function AddAnotherEmailBtn({ onClick, ...props }: OLButtonProps) {
      variant="link"
      onClick={onClick}
      className="btn-inline-link"
-      bs3Props={{ bsStyle: null }}
      {...props}
    >
      {t('add_another_email')}
--- a/services/web/frontend/js/features/settings/components/emails/add-email/email-affiliated-with-institution.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/add-email/email-affiliated-with-institution.tsx
@ -11,7 +11,6 @@ function EmailAffiliatedWithInstitution({ onClick, ...props }: OLButtonProps) {
        variant="link"
        onClick={onClick}
        className="btn-inline-link"
-        bs3Props={{ bsStyle: null }}
        {...props}
      >
        {t('let_us_know')}
--- a/services/web/frontend/js/features/settings/components/emails/add-email/university-name.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/add-email/university-name.tsx
@ -14,12 +14,7 @@ function UniversityName({ name, onClick }: UniversityNameProps) {
      {name}
      <span className="small">
        {' '}
-        <OLButton
-          variant="link"
-          onClick={onClick}
-          className="btn-inline-link"
-          bs3Props={{ bsStyle: null }}
-        >
+        <OLButton variant="link" onClick={onClick} className="btn-inline-link">
          {t('change')}
        </OLButton>
      </span>
--- a/services/web/frontend/js/features/settings/components/emails/reconfirmation-info.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/reconfirmation-info.tsx
@ -150,9 +150,6 @@ function ReconfirmationInfo({ userEmailData }: ReconfirmationInfoProps) {
                        disabled={state.isLoading}
                        onClick={handleRequestReconfirmation}
                        className="btn-inline-link"
-                        bs3Props={{
-                          bsStyle: null,
-                        }}
                      >
                        {t('resend_confirmation_email')}
                      </OLButton>
@ -164,7 +161,6 @@ function ReconfirmationInfo({ userEmailData }: ReconfirmationInfoProps) {
                    disabled={isPending}
                    isLoading={isLoading}
                    onClick={handleRequestReconfirmation}
-                    bs3Props={{ bsStyle: 'info' }}
                  >
                    {isLoading ? (
                      <>
@ -209,7 +205,6 @@ function ReconfirmationInfo({ userEmailData }: ReconfirmationInfoProps) {
                      disabled={state.isLoading}
                      onClick={handleRequestReconfirmation}
                      className="btn-inline-link"
-                      bs3Props={{ bsStyle: null }}
                    >
                      {t('resend_confirmation_email')}
                    </OLButton>
@ -241,7 +236,6 @@ function ReconfirmationInfo({ userEmailData }: ReconfirmationInfoProps) {
                      variant="secondary"
                      disabled={state.isLoading || isPending}
                      onClick={handleRequestReconfirmation}
-                      bs3Props={{ bsStyle: 'info' }}
                    >
                      {isLoading ? (
                        <>
--- a/services/web/frontend/js/features/settings/components/emails/resend-confirmation-email-button.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/resend-confirmation-email-button.tsx
@ -52,7 +52,6 @@ function ResendConfirmationEmailButton({
        disabled={state.isLoading || isLoading}
        onClick={handleResendConfirmationEmail}
        className="btn-inline-link"
-        bs3Props={{ bsStyle: null }}
      >
        {t('resend_confirmation_email')}
      </OLButton>
--- a/services/web/frontend/js/features/settings/components/leave/modal-content.tsx
+++ b/services/web/frontend/js/features/settings/components/leave/modal-content.tsx
@ -74,12 +74,7 @@ function LeaveModalContent({
      </OLModalBody>

      <OLModalFooter>
-        <OLButton
-          disabled={inFlight}
-          onClick={handleHide}
-          variant="secondary"
-          bs3Props={{ bsStyle: null, className: 'btn-secondary' }}
-        >
+        <OLButton disabled={inFlight} onClick={handleHide} variant="secondary">
          {t('cancel')}
        </OLButton>

--- a/services/web/frontend/js/features/settings/components/linking/enable-widget.tsx
+++ b/services/web/frontend/js/features/settings/components/linking/enable-widget.tsx
@ -96,7 +96,6 @@ function ActionButton({
        variant="primary"
        href="/user/subscription/plans"
        onClick={trackUpgradeClick}
-        bs3Props={{ bsStyle: null, className: 'btn-primary' }}
      >
        <span className="text-capitalize">{t('upgrade')}</span>
      </OLButton>
@ -107,7 +106,6 @@ function ActionButton({
        variant="danger-ghost"
        onClick={handleUnlinkClick}
        disabled={disabled}
-        bs3Props={{ bsStyle: null, className: 'btn-danger-ghost' }}
      >
        {t('turn_off')}
      </OLButton>
@ -118,10 +116,6 @@ function ActionButton({
        variant="secondary"
        disabled={disabled}
        onClick={handleLinkClick}
-        bs3Props={{
-          bsStyle: null,
-          className: 'btn btn-secondary-info btn-secondary',
-        }}
      >
        {t('turn_on')}
      </OLButton>
--- a/services/web/frontend/js/features/settings/components/linking/integration-widget.tsx
+++ b/services/web/frontend/js/features/settings/components/linking/integration-widget.tsx
@ -4,7 +4,6 @@ import OLBadge from '@/features/ui/components/ol/ol-badge'
 import getMeta from '../../../../utils/meta'
 import { sendMB } from '../../../../infrastructure/event-tracking'
 import OLButton from '@/features/ui/components/ol/ol-button'
-import { bsVersion } from '@/features/utils/bootstrap-5'
 import OLModal, {
  OLModalBody,
  OLModalFooter,
@ -123,7 +122,6 @@ function ActionButton({
        variant="primary"
        href="/user/subscription/plans"
        onClick={() => trackUpgradeClick(integration)}
-        bs3Props={{ bsStyle: null, className: 'btn-primary' }}
      >
        <span className="text-capitalize">{t('upgrade')}</span>
      </OLButton>
@ -134,7 +132,6 @@ function ActionButton({
        variant="danger-ghost"
        onClick={handleUnlinkClick}
        disabled={disabled}
-        bs3Props={{ bsStyle: null, className: 'btn-danger-ghost' }}
      >
        {t('unlink')}
      </OLButton>
@ -143,25 +140,14 @@ function ActionButton({
    return (
      <>
        {disabled ? (
-          <OLButton
-            disabled
-            variant="secondary"
-            className={bsVersion({
-              bs3: 'btn btn-secondary-info btn-secondary text-capitalize',
-              bs5: 'text-capitalize',
-            })}
-          >
+          <OLButton disabled variant="secondary" className="text-capitalize">
            {t('link')}
          </OLButton>
        ) : (
          <OLButton
            variant="secondary"
            href={linkPath}
-            className={bsVersion({
-              bs3: 'btn btn-secondary-info btn-secondary text-capitalize',
-              bs5: 'text-capitalize',
-            })}
-            bs3Props={{ bsStyle: null }}
+            className="text-capitalize"
            onClick={() => trackLinkingClick(integration)}
          >
            {t('link')}
@ -215,20 +201,12 @@ function UnlinkConfirmationModal({
      <OLModalFooter>
        <form action={unlinkPath} method="POST" className="form-inline">
          <input type="hidden" name="_csrf" value={getMeta('ol-csrfToken')} />
-          <OLButton
-            variant="secondary"
-            onClick={handleCancel}
-            bs3Props={{
-              bsStyle: null,
-              className: 'btn-secondary-info btn-secondary',
-            }}
-          >
+          <OLButton variant="secondary" onClick={handleCancel}>
            {t('cancel')}
          </OLButton>
          <OLButton
            type="submit"
            variant="danger-ghost"
-            bs3Props={{ bsStyle: null, className: 'btn-danger-ghost' }}
            onClick={handleConfirm}
          >
            {t('unlink')}
--- a/services/web/frontend/js/features/settings/components/linking/sso-widget.tsx
+++ b/services/web/frontend/js/features/settings/components/linking/sso-widget.tsx
@ -6,7 +6,6 @@ import GoogleLogo from '../../../../shared/svgs/google-logo'
 import OrcidLogo from '../../../../shared/svgs/orcid-logo'
 import LinkingStatus from './status'
 import OLButton from '@/features/ui/components/ol/ol-button'
-import { bsVersion } from '@/features/utils/bootstrap-5'
 import OLModal, {
  OLModalBody,
  OLModalFooter,
@ -118,35 +117,19 @@ function ActionButton({
  const { t } = useTranslation()
  if (unlinkRequestInflight) {
    return (
-      <OLButton
-        variant="danger-ghost"
-        disabled
-        bs3Props={{ bsStyle: null, className: 'btn-danger-ghost' }}
-      >
+      <OLButton variant="danger-ghost" disabled>
        {t('unlinking')}
      </OLButton>
    )
  } else if (accountIsLinked) {
    return (
-      <OLButton
-        variant="danger-ghost"
-        onClick={onUnlinkClick}
-        bs3Props={{ bsStyle: null, className: 'btn-danger-ghost' }}
-      >
+      <OLButton variant="danger-ghost" onClick={onUnlinkClick}>
        {t('unlink')}
      </OLButton>
    )
  } else {
    return (
-      <OLButton
-        variant="secondary"
-        href={linkPath}
-        bs3Props={{ bsStyle: null }}
-        className={bsVersion({
-          bs3: 'btn btn-secondary-info btn-secondary text-capitalize',
-          bs5: 'text-capitalize',
-        })}
-      >
+      <OLButton variant="secondary" href={linkPath} className="text-capitalize">
        {t('link')}
      </OLButton>
    )
@ -181,21 +164,10 @@ function UnlinkConfirmModal({
      </OLModalBody>

      <OLModalFooter>
-        <OLButton
-          variant="secondary"
-          onClick={handleHide}
-          bs3Props={{
-            bsStyle: null,
-            className: 'btn-secondary-info btn-secondary',
-          }}
-        >
+        <OLButton variant="secondary" onClick={handleHide}>
          {t('cancel')}
        </OLButton>
-        <OLButton
-          variant="danger-ghost"
-          onClick={handleConfirmation}
-          bs3Props={{ bsStyle: null, className: 'btn-danger-ghost' }}
-        >
+        <OLButton variant="danger-ghost" onClick={handleConfirmation}>
          {t('unlink')}
        </OLButton>
      </OLModalFooter>
--- a/services/web/frontend/js/features/settings/components/security-section.tsx
+++ b/services/web/frontend/js/features/settings/components/security-section.tsx
@ -87,7 +87,6 @@ function SecuritySection() {
                  <div className="button-column">
                    <OLButton
                      variant="primary"
-                      bs3Props={{ className: 'btn btn-primary', bsStyle: null }}
                      href={`/subscription/${groupId}/sso_enrollment`}
                    >
                      {t('set_up_sso')}
--- a/services/web/frontend/js/features/ui/components/ol/ol-button.tsx
+++ b/services/web/frontend/js/features/ui/components/ol/ol-button.tsx
@ -3,13 +3,12 @@ import { Button as BS3Button } from 'react-bootstrap'
 import type { ButtonProps } from '@/features/ui/components/types/button-props'
 import type { ButtonProps as BS3ButtonPropsBase } from 'react-bootstrap'
 import Button from '../bootstrap-5/button'
+import classnames from 'classnames'

 export type BS3ButtonSize = 'xsmall' | 'sm' | 'medium' | 'lg'

 export type OLButtonProps = ButtonProps & {
  bs3Props?: {
-    bsStyle?: string | null
-    className?: string
    loading?: React.ReactNode
    bsSize?: BS3ButtonSize
  }
@ -20,6 +19,20 @@ export type BS3ButtonProps = Omit<BS3ButtonPropsBase, 'onClick'> & {
  onClick?: React.MouseEventHandler<any>
 }

+export function bs3ButtonProps(props: ButtonProps) {
+  const bs3ButtonProps: BS3ButtonProps = {
+    bsStyle: null,
+    bsSize: mapBsButtonSizes(props.size),
+    className: classnames(`btn-${props.variant || 'primary'}`, props.className),
+    disabled: props.isLoading || props.disabled,
+    form: props.form,
+    href: props.href,
+    onClick: props.onClick,
+    type: props.type,
+  }
+  return bs3ButtonProps
+}
+
 // maps Bootstrap 5 sizes to Bootstrap 3 sizes
 export const mapBsButtonSizes = (
  size: ButtonProps['size']
@ -29,22 +42,10 @@ export const mapBsButtonSizes = (
 export default function OLButton(props: OLButtonProps) {
  const { bs3Props, ...rest } = props

-  const bs3ButtonProps: BS3ButtonProps = {
-    bsStyle: rest.variant === 'secondary' ? 'default' : rest.variant,
-    bsSize: mapBsButtonSizes(rest.size),
-    className: rest.className,
-    disabled: rest.isLoading || rest.disabled,
-    form: rest.form,
-    href: rest.href,
-    onClick: rest.onClick,
-    type: rest.type,
-    ...bs3Props,
-  }
-
  return (
    <BootstrapVersionSwitcher
      bs3={
-        <BS3Button {...bs3ButtonProps}>
+        <BS3Button {...bs3ButtonProps(rest)} {...bs3Props}>
          {bs3Props?.loading || rest.children}
        </BS3Button>
      }
--- a/services/web/frontend/js/features/ui/components/ol/ol-icon-button.tsx
+++ b/services/web/frontend/js/features/ui/components/ol/ol-icon-button.tsx
@ -1,4 +1,4 @@
-import { BS3ButtonProps, BS3ButtonSize, mapBsButtonSizes } from './ol-button'
+import { bs3ButtonProps, BS3ButtonSize } 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'
@ -17,22 +17,12 @@ export type OLIconButtonProps = IconButtonProps & {
 export default function OLIconButton(props: OLIconButtonProps) {
  const { bs3Props, ...rest } = props

-  const { fw, ...filterBs3Props } = bs3Props || {}
-
-  const bs3ButtonProps: BS3ButtonProps = {
-    bsStyle: rest.variant === 'secondary' ? 'default' : rest.variant,
-    bsSize: mapBsButtonSizes(rest.size),
-    disabled: rest.isLoading || rest.disabled,
-    form: rest.form,
-    onClick: rest.onClick,
-    type: rest.type,
-    ...filterBs3Props,
-  }
+  const { fw, ...bs3Rest } = bs3Props || {}

  return (
    <BootstrapVersionSwitcher
      bs3={
-        <BS3Button {...bs3ButtonProps}>
+        <BS3Button {...bs3ButtonProps(rest)} {...bs3Rest}>
          {bs3Props?.loading}
          <Icon
            type={rest.icon}
--- a/services/web/frontend/js/shared/components/copy-to-clipboard.tsx
+++ b/services/web/frontend/js/shared/components/copy-to-clipboard.tsx
@ -55,11 +55,8 @@ const TextButton: FC<{
      onClick={handleClick}
      size="small"
      variant="secondary"
-      bs3Props={{
-        bsStyle: null,
-        className: 'btn-secondary copy-button',
-        bsSize: 'xsmall',
-      }}
+      className="copy-button"
+      bs3Props={{ bsSize: 'xsmall' }}
    >
      {t('copy')}
    </OLButton>