From e2a8bf768b8104179f47dace6f907599a4e10dc5 Mon Sep 17 00:00:00 2001 From: Rebeka Dekany <50901361+rebekadekany@users.noreply.github.com> Date: Tue, 7 Jul 2026 14:38:41 +0200 Subject: [PATCH] Merge intermediate component wrappers into OL-prefixed components (#34996) * Merge intermediate component wrappers into OL-prefixed components * Replace all intermediate wrapper consumers with OL-prefixed components directly * Fix jsx/js files still importing deleted shim components * Remove duplicate OLNotification imports left by first pass * Rename OLTagIcon to TagIcon, remove OL prefix * Rename OLDropdownMenuItem to DropdownMenuItem, remove OL prefix * Remove OLNotification, use Notification directly * Move Notification to the main shared component folder * Update tag-icon import path out of ol/ * Move TagIcon to the main shared component folder * Update dropdown-menu-item import path out of ol/ * Move DropdownMenuItem to the main shared component folder * Fix dropdown-menu-item import path to dropdown/ subfolder * Remove BS5 alias prefixes from shared components * Restore notification-list wrapper in Notification component * Add translation for loading button * Remove redundant import aliasing * Resolve conflicts * Restore notification container `notification-list` GitOrigin-RevId: 24a5af18599a3e02ac6fd61c09cf5a49ef6e0020 --- .../chat/components/chat-fallback-error.tsx | 6 +- .../components/clone-project-tag.tsx | 6 +- .../components/dictionary-modal-content.tsx | 14 +- .../file-tree-create/danger-message.tsx | 8 +- .../file-tree-create-name-input.tsx | 53 ++-- .../file-tree-modal-create-file-body.tsx | 38 +-- .../modals/file-tree-modal-delete.tsx | 14 +- .../components/file-view-refresh-error.tsx | 20 +- .../components/add-seats/add-seats.tsx | 19 +- .../components/add-seats/po-number.tsx | 4 +- .../components/back-button.tsx | 4 +- .../group-management/components/card.tsx | 4 +- .../components/error-alert.tsx | 16 +- .../components/group-members.tsx | 14 +- .../components/group-users.tsx | 54 ++-- .../manually-collected-subscription.tsx | 52 ++-- .../components/members-table/list-alert.tsx | 282 +++++++++--------- .../offboard-managed-user-modal.tsx | 6 +- .../remove-managed-user-modal.tsx | 6 +- .../missing-billing-information.tsx | 42 +-- .../components/request-status.tsx | 10 +- .../components/subtotal-limit-exceeded.tsx | 30 +- .../upgrade-subscription.tsx | 15 +- .../dropdown/menu-item/add-label.tsx | 10 +- .../menu-item/compare-dropdown-item.tsx | 6 +- .../dropdown/menu-item/download.tsx | 6 +- .../dropdown/menu-item/restore-project.tsx | 6 +- .../components/change-list/modal-error.tsx | 26 +- .../components/change-list/tag-tooltip.tsx | 6 +- .../history/components/diff-view/main.tsx | 6 +- .../ide-react/components/alerts/alerts.tsx | 46 +-- .../alerts/lost-connection-alert.tsx | 42 +-- .../components/toolbar/download-project.tsx | 10 +- .../components/toolbar/duplicate-project.tsx | 6 +- .../export-project-with-conversion-button.tsx | 6 +- .../components/toolbar/project-title.tsx | 6 +- .../toolbar/review-mode-options.tsx | 14 +- .../unsaved-docs/unsaved-docs-alert.tsx | 18 +- .../unsaved-docs-locked-alert.tsx | 22 +- .../rolling-compile-image-changed-alert.tsx | 20 +- .../components/pdf-zoom-dropdown.tsx | 4 +- .../rolling-build-selected-reminder.tsx | 16 +- .../import-document-modal.tsx | 54 ++-- .../groups/group-sso-setup-success.tsx | 2 +- .../components/notifications/notification.tsx | 6 +- .../components/project-list-ds-nav.tsx | 2 +- .../components/table/cells/inline-tags.tsx | 6 +- .../menu-items/copy-project-menu-item.tsx | 6 +- .../menu-items/rename-project-menu-item.tsx | 6 +- .../components/review-mode-switcher.tsx | 14 +- .../components/review-panel-change-action.tsx | 5 +- .../components/account-info-section.tsx | 22 +- .../email-preferences-form.tsx | 29 +- .../settings/components/emails-section.tsx | 12 +- .../components/emails/add-email/layout.tsx | 12 +- .../components/emails/reconfirmation-info.tsx | 86 +++--- .../settings/components/emails/sso-alert.tsx | 94 +++--- .../emails/unlink-commons-sso-modal.tsx | 12 +- .../components/leave/modal-form-error.tsx | 32 +- .../settings/components/linking-section.tsx | 22 +- .../settings/components/password-section.tsx | 74 ++--- .../components/edit-member.tsx | 22 +- .../share-project-modal/components/invite.tsx | 10 +- .../components/project-access.tsx | 14 +- .../components/send-invites-notice.tsx | 38 +-- .../components/share-modal-body.tsx | 14 +- .../share-project-modal-content.tsx | 16 +- .../components/transfer-ownership-modal.tsx | 14 +- .../components/diagnostic-component.tsx | 8 +- .../figure-modal/figure-modal-body.tsx | 6 +- .../figure-modal/file-name-input.tsx | 18 +- .../components/math-preview-tooltip.tsx | 10 +- .../canceled-subscription/canceled.tsx | 26 +- .../dashboard/generic-error-alert.tsx | 26 +- .../dashboard/institution-memberships.tsx | 24 +- .../components/dashboard/pause-modal.tsx | 10 +- .../personal-subscription-sync-email.tsx | 12 +- .../dashboard/personal-subscription.tsx | 44 +-- .../components/dashboard/redirect-alerts.tsx | 6 +- .../dashboard/states/active/add-ons.tsx | 10 +- .../modals/cancel-ai-add-on-modal.tsx | 26 +- .../modals/change-to-group-modal.tsx | 24 +- .../modals/keep-current-plan-modal.tsx | 26 +- .../writefull-bundle-management-modal.tsx | 6 +- .../states/active/confirm-unpause-modal.tsx | 25 +- .../dashboard/subscription-dashboard.tsx | 92 +++--- .../trial-disabled-notification.tsx | 16 +- .../shared/payment-error-notification.tsx | 8 +- .../redirected-payment-error-notification.tsx | 32 +- .../successful-subscription.tsx | 90 +++--- .../components/word-count-error.tsx | 6 +- .../components/word-counts-client.tsx | 20 +- .../components/word-counts.tsx | 19 +- .../js/shared/components/badge/badge-link.tsx | 2 +- .../js/shared/components/badge/badge.tsx | 23 -- .../js/shared/components/button/button.tsx | 77 ----- .../shared/components/button/icon-button.tsx | 46 --- .../dropdown-menu-item.tsx} | 4 +- .../shared/components/ds/ds-form-feedback.tsx | 6 +- .../components/error-boundary-fallback.tsx | 6 +- .../shared/components/form/form-control.tsx | 45 --- .../shared/components/form/form-feedback.tsx | 23 -- .../js/shared/components/form/form-group.tsx | 14 - .../js/shared/components/form/form-text.tsx | 81 ----- .../labs/labs-experiments-widget.tsx | 2 +- .../js/shared/components/notification.tsx | 6 +- .../js/shared/components/ol/ol-badge.tsx | 24 +- .../js/shared/components/ol/ol-button.tsx | 75 ++++- .../shared/components/ol/ol-form-checkbox.tsx | 2 +- .../shared/components/ol/ol-form-control.tsx | 55 +++- .../shared/components/ol/ol-form-feedback.tsx | 24 +- .../js/shared/components/ol/ol-form-group.tsx | 10 +- .../js/shared/components/ol/ol-form-text.tsx | 86 +++++- .../shared/components/ol/ol-icon-button.tsx | 43 ++- .../shared/components/ol/ol-notification.tsx | 11 - .../js/shared/components/ol/ol-table.tsx | 42 ++- .../js/shared/components/ol/ol-tag.tsx | 72 ++++- .../components/ol/ol-toast-container.tsx | 6 +- .../js/shared/components/ol/ol-toast.tsx | 11 +- .../js/shared/components/ol/ol-tooltip.tsx | 117 +++++++- .../frontend/js/shared/components/select.tsx | 6 +- .../frontend/js/shared/components/table.tsx | 43 --- .../{ol/ol-tag-icon.tsx => tag-icon.tsx} | 2 +- .../web/frontend/js/shared/components/tag.tsx | 74 ----- .../frontend/js/shared/components/tooltip.tsx | 118 -------- .../components/full-project-search-button.tsx | 2 +- .../js/components/full-project-search-ui.tsx | 6 +- .../shared/components/notification.test.tsx | 2 +- 128 files changed, 1712 insertions(+), 1661 deletions(-) delete mode 100644 services/web/frontend/js/shared/components/badge/badge.tsx delete mode 100644 services/web/frontend/js/shared/components/button/button.tsx delete mode 100644 services/web/frontend/js/shared/components/button/icon-button.tsx rename services/web/frontend/js/shared/components/{ol/ol-dropdown-menu-item.tsx => dropdown/dropdown-menu-item.tsx} (81%) delete mode 100644 services/web/frontend/js/shared/components/form/form-control.tsx delete mode 100644 services/web/frontend/js/shared/components/form/form-feedback.tsx delete mode 100644 services/web/frontend/js/shared/components/form/form-group.tsx delete mode 100644 services/web/frontend/js/shared/components/form/form-text.tsx delete mode 100644 services/web/frontend/js/shared/components/ol/ol-notification.tsx delete mode 100644 services/web/frontend/js/shared/components/table.tsx rename services/web/frontend/js/shared/components/{ol/ol-tag-icon.tsx => tag-icon.tsx} (72%) delete mode 100644 services/web/frontend/js/shared/components/tag.tsx delete mode 100644 services/web/frontend/js/shared/components/tooltip.tsx diff --git a/services/web/frontend/js/features/chat/components/chat-fallback-error.tsx b/services/web/frontend/js/features/chat/components/chat-fallback-error.tsx index 8dd18824e1..6668ed20fa 100644 --- a/services/web/frontend/js/features/chat/components/chat-fallback-error.tsx +++ b/services/web/frontend/js/features/chat/components/chat-fallback-error.tsx @@ -1,5 +1,5 @@ import { useTranslation } from 'react-i18next' -import OLNotification from '@/shared/components/ol/ol-notification' +import Notification from '@/shared/components/notification' import OLButton from '@/shared/components/ol/ol-button' import RailPanelHeader from '@/features/ide-react/components/rail/rail-panel-header' @@ -16,7 +16,9 @@ function ChatFallbackError({ reconnect }: ChatFallbackErrorProps) {
) } diff --git a/services/web/frontend/js/features/settings/components/emails/sso-alert.tsx b/services/web/frontend/js/features/settings/components/emails/sso-alert.tsx index 2ee535281b..64c9087eff 100644 --- a/services/web/frontend/js/features/settings/components/emails/sso-alert.tsx +++ b/services/web/frontend/js/features/settings/components/emails/sso-alert.tsx @@ -1,7 +1,7 @@ import { useState } from 'react' import { useTranslation, Trans } from 'react-i18next' import getMeta from '../../../../utils/meta' -import OLNotification from '@/shared/components/ol/ol-notification' +import Notification from '@/shared/components/notification' export function SSOAlert() { const { t } = useTranslation() @@ -38,12 +38,14 @@ export function SSOAlert() { ) return !errorClosed ? ( - +
+ +
) : null } @@ -54,51 +56,57 @@ export function SSOAlert() { return ( <> {!infoClosed && ( - -

- ]} // eslint-disable-line react/jsx-key - values={{ institutionName: institutionLinked.universityName }} - shouldUnescape - tOptions={{ interpolation: { escapeValue: true } }} - /> -

- {institutionLinked.hasEntitlement && ( +
+

]} // eslint-disable-line react/jsx-key - values={{ featureType: t('commons') }} + values={{ + institutionName: institutionLinked.universityName, + }} shouldUnescape tOptions={{ interpolation: { escapeValue: true } }} />

- )} - - } - isDismissible - onDismiss={handleInfoClosed} - /> + {institutionLinked.hasEntitlement && ( +

+ ]} // eslint-disable-line react/jsx-key + values={{ featureType: t('commons') }} + shouldUnescape + tOptions={{ interpolation: { escapeValue: true } }} + /> +

+ )} + + } + isDismissible + onDismiss={handleInfoClosed} + /> +
)} {!warningClosed && institutionEmailNonCanonical && ( - ]} // eslint-disable-line react/jsx-key - values={{ email: institutionEmailNonCanonical }} - shouldUnescape - tOptions={{ interpolation: { escapeValue: true } }} - /> - } - isDismissible - onDismiss={handleWarningClosed} - /> +
+ ]} // eslint-disable-line react/jsx-key + values={{ email: institutionEmailNonCanonical }} + shouldUnescape + tOptions={{ interpolation: { escapeValue: true } }} + /> + } + isDismissible + onDismiss={handleWarningClosed} + /> +
)} ) diff --git a/services/web/frontend/js/features/settings/components/emails/unlink-commons-sso-modal.tsx b/services/web/frontend/js/features/settings/components/emails/unlink-commons-sso-modal.tsx index a03e047dff..1e00ae6945 100644 --- a/services/web/frontend/js/features/settings/components/emails/unlink-commons-sso-modal.tsx +++ b/services/web/frontend/js/features/settings/components/emails/unlink-commons-sso-modal.tsx @@ -5,7 +5,7 @@ import { OLModalHeader, OLModalTitle, } from '@/shared/components/ol/ol-modal' -import OLNotification from '@/shared/components/ol/ol-notification' +import Notification from '@/shared/components/notification' import OLButton from '@/shared/components/ol/ol-button' import { postJSON } from '@/infrastructure/fetch-json' import { debugConsole } from '@/utils/debugging' @@ -69,10 +69,12 @@ export default function UnlinkCommonsSSOModal({ {hasLicence &&

{t('unlink_commons_sso_lose_licence')}

} {!hasPassword &&

{t('unlink_commons_sso_no_login')}

} {isError && ( - +
+ +
)} diff --git a/services/web/frontend/js/features/settings/components/leave/modal-form-error.tsx b/services/web/frontend/js/features/settings/components/leave/modal-form-error.tsx index 21c635e21e..9d2149c002 100644 --- a/services/web/frontend/js/features/settings/components/leave/modal-form-error.tsx +++ b/services/web/frontend/js/features/settings/components/leave/modal-form-error.tsx @@ -1,7 +1,7 @@ import { useTranslation, Trans } from 'react-i18next' import getMeta from '../../../../utils/meta' import { FetchError } from '../../../../infrastructure/fetch-json' -import OLNotification from '@/shared/components/ol/ol-notification' +import Notification from '@/shared/components/notification' type LeaveModalFormErrorProps = { error: FetchError @@ -31,20 +31,22 @@ function LeaveModalFormError({ error }: LeaveModalFormErrorProps) { } return ( - - {errorMessage} - {errorTip ? ( - <> -
- {errorTip} - - ) : null} - - } - /> +
+ + {errorMessage} + {errorTip ? ( + <> +
+ {errorTip} + + ) : null} + + } + /> +
) } diff --git a/services/web/frontend/js/features/settings/components/linking-section.tsx b/services/web/frontend/js/features/settings/components/linking-section.tsx index cd92ab614b..aa1115c569 100644 --- a/services/web/frontend/js/features/settings/components/linking-section.tsx +++ b/services/web/frontend/js/features/settings/components/linking-section.tsx @@ -5,7 +5,7 @@ import { useSSOContext, SSOSubscription } from '../context/sso-context' import { SSOLinkingWidget } from './linking/sso-widget' import getMeta from '../../../utils/meta' import { useBroadcastUser } from '@/shared/hooks/user-channel/use-broadcast-user' -import OLNotification from '@/shared/components/ol/ol-notification' +import Notification from '@/shared/components/notification' const availableIntegrationLinkingWidgets = importOverleafModules( 'integrationLinkingWidgets' @@ -104,10 +104,12 @@ function LinkingSection() { <>

{t('project_synchronisation')}

{projectSyncSuccessMessage ? ( - +
+ +
) : null}
{allIntegrationLinkingWidgets.map( @@ -144,10 +146,12 @@ function LinkingSection() { <>

{t('linked_accounts')}

{ssoErrorMessage ? ( - +
+ +
) : null}
{Object.values(subscriptions).map( diff --git a/services/web/frontend/js/features/settings/components/password-section.tsx b/services/web/frontend/js/features/settings/components/password-section.tsx index 7dacfc468a..1a558f396f 100644 --- a/services/web/frontend/js/features/settings/components/password-section.tsx +++ b/services/web/frontend/js/features/settings/components/password-section.tsx @@ -8,7 +8,7 @@ import { import getMeta from '../../../utils/meta' import useAsync from '../../../shared/hooks/use-async' import OLButton from '@/shared/components/ol/ol-button' -import OLNotification from '@/shared/components/ol/ol-notification' +import Notification from '@/shared/components/notification' import OLFormGroup from '@/shared/components/ol/ol-form-group' import OLFormLabel from '@/shared/components/ol/ol-form-label' import OLFormControl from '@/shared/components/ol/ol-form-control' @@ -156,44 +156,48 @@ function PasswordForm() { /> {isSuccess && data?.message?.text ? ( - +
+ +
) : null} {isError ? ( - - , - ]} - /> - {t('use_a_different_password')}. - - ) : getErrorMessageKey(error) === 'password-contains-email' ? ( - <> - {t('invalid_password_contains_email')}{' '} - {t('use_a_different_password')}. - - ) : getErrorMessageKey(error) === 'password-too-similar' ? ( - <> - {t('invalid_password_too_similar')}{' '} - {t('use_a_different_password')}. - - ) : ( - (getUserFacingMessage(error) ?? '') - ) - } - /> +
+ + , + ]} + /> + {t('use_a_different_password')}. + + ) : getErrorMessageKey(error) === 'password-contains-email' ? ( + <> + {t('invalid_password_contains_email')}{' '} + {t('use_a_different_password')}. + + ) : getErrorMessageKey(error) === 'password-too-similar' ? ( + <> + {t('invalid_password_too_similar')}{' '} + {t('use_a_different_password')}. + + ) : ( + (getUserFacingMessage(error) ?? '') + ) + } + /> +
) : null} diff --git a/services/web/frontend/js/features/share-project-modal/components/edit-member.tsx b/services/web/frontend/js/features/share-project-modal/components/edit-member.tsx index 07fb6ed6ad..8623f19d3b 100644 --- a/services/web/frontend/js/features/share-project-modal/components/edit-member.tsx +++ b/services/web/frontend/js/features/share-project-modal/components/edit-member.tsx @@ -21,7 +21,7 @@ import { DropdownMenu, DropdownToggle, } from '@/shared/components/dropdown/dropdown-menu' -import OLDropdownMenuItem from '@/shared/components/ol/ol-dropdown-menu-item' +import DropdownMenuItem from '@/shared/components/dropdown/dropdown-menu-item' import { useFeatureFlag } from '@/shared/context/split-test-context' import classnames from 'classnames' @@ -268,7 +268,7 @@ export default function EditMember({
- } @@ -276,8 +276,8 @@ export default function EditMember({ trailingIcon={privileges === 'owner' ? 'check' : undefined} > {t('make_owner')} - - + } @@ -287,9 +287,9 @@ export default function EditMember({ description={getPrivilegeSubtitle('readAndWrite')} > {t('editor')} - + {features.trackChangesVisible && ( - } @@ -299,9 +299,9 @@ export default function EditMember({ description={getPrivilegeSubtitle('review')} > {t('reviewer')} - + )} - } @@ -309,8 +309,8 @@ export default function EditMember({ trailingIcon={privileges === 'readOnly' ? 'check' : undefined} > {t('viewer')} - - + {t('remove_access')} - + {confirmRemoval && ( diff --git a/services/web/frontend/js/features/share-project-modal/components/invite.tsx b/services/web/frontend/js/features/share-project-modal/components/invite.tsx index 71161a4ea4..f4f19b64f8 100644 --- a/services/web/frontend/js/features/share-project-modal/components/invite.tsx +++ b/services/web/frontend/js/features/share-project-modal/components/invite.tsx @@ -10,7 +10,7 @@ import OLCol from '@/shared/components/ol/ol-col' import OLTooltip from '@/shared/components/ol/ol-tooltip' import OLButton from '@/shared/components/ol/ol-button' import OLBadge from '@/shared/components/ol/ol-badge' -import OLDropdownMenuItem from '@/shared/components/ol/ol-dropdown-menu-item' +import DropdownMenuItem from '@/shared/components/dropdown/dropdown-menu-item' import { Dropdown, DropdownMenu, @@ -120,14 +120,14 @@ function ResendInvite({ invite }: { invite: ProjectMember }) { ) return isSharingUpdatesEnabled ? ( - } onClick={handleClick} disabled={inFlight} > {t('resend_invite')} - + ) : ( } variant="danger" onClick={handleClick} > {t('revoke_invite')} - + ) : ( - } @@ -331,8 +331,8 @@ function ProjectAccess({ } > {t('editor')} - - + } @@ -340,8 +340,8 @@ function ProjectAccess({ trailingIcon={privileges === 'review' ? 'check' : undefined} > {t('reviewer')} - - + } @@ -349,7 +349,7 @@ function ProjectAccess({ trailingIcon={privileges === 'readOnly' ? 'check' : undefined} > {t('viewer')} - + )} diff --git a/services/web/frontend/js/features/share-project-modal/components/send-invites-notice.tsx b/services/web/frontend/js/features/share-project-modal/components/send-invites-notice.tsx index 1d2b015773..367dea2237 100644 --- a/services/web/frontend/js/features/share-project-modal/components/send-invites-notice.tsx +++ b/services/web/frontend/js/features/share-project-modal/components/send-invites-notice.tsx @@ -3,7 +3,7 @@ import { useProjectContext } from '@/shared/context/project-context' import { useEditorContext } from '@/shared/context/editor-context' import OLRow from '@/shared/components/ol/ol-row' import OLCol from '@/shared/components/ol/ol-col' -import OLNotification from '@/shared/components/ol/ol-notification' +import Notification from '@/shared/components/notification' import { useFeatureFlag } from '@/shared/context/split-test-context' function SendInvitesNotice() { @@ -23,25 +23,29 @@ function SendInvitesNotice() { return (
{isPendingEditor && ( - -

{t('this_project_already_has_maximum_collaborators')}

-

- {t( - 'please_ask_the_project_owner_to_upgrade_more_collaborators' - )} -

-
- } - /> +
+ +

{t('this_project_already_has_maximum_collaborators')}

+

+ {t( + 'please_ask_the_project_owner_to_upgrade_more_collaborators' + )} +

+
+ } + /> +
)} {accessLevelText && (isSharingUpdatesEnabled ? ( - +
+ +
) : ( diff --git a/services/web/frontend/js/features/share-project-modal/components/share-modal-body.tsx b/services/web/frontend/js/features/share-project-modal/components/share-modal-body.tsx index bccf27b191..344e49ba98 100644 --- a/services/web/frontend/js/features/share-project-modal/components/share-modal-body.tsx +++ b/services/web/frontend/js/features/share-project-modal/components/share-modal-body.tsx @@ -11,7 +11,7 @@ import { useMemo } from 'react' import RecaptchaConditions from '@/shared/components/recaptcha-conditions' import getMeta from '@/utils/meta' import { useFeatureFlag } from '@/shared/context/split-test-context' -import OLNotification from '@/shared/components/ol/ol-notification' +import Notification from '@/shared/components/notification' import ErrorMessage from '@/features/share-project-modal/components/error-message' import ProjectAccess from '@/features/share-project-modal/components/project-access' import InvitedPeople from '@/features/share-project-modal/components/invited-people' @@ -124,14 +124,15 @@ export default function ShareModalBody({ ) : ( )} - {isSharingUpdatesEnabled ? ( <> {error && ( - } - /> +
+ } + /> +
)} {isInvitedPeopleScreen || !isProjectOwner ? ( )} - {!getMeta('ol-ExposedSettings').recaptchaDisabled?.invite && ( )} diff --git a/services/web/frontend/js/features/share-project-modal/components/share-project-modal-content.tsx b/services/web/frontend/js/features/share-project-modal/components/share-project-modal-content.tsx index 46bc218a96..9e3a5fcbed 100644 --- a/services/web/frontend/js/features/share-project-modal/components/share-project-modal-content.tsx +++ b/services/web/frontend/js/features/share-project-modal/components/share-project-modal-content.tsx @@ -10,7 +10,7 @@ import { OLModalHeader, OLModalTitle, } from '@/shared/components/ol/ol-modal' -import OLNotification from '@/shared/components/ol/ol-notification' +import Notification from '@/shared/components/notification' import OLButton from '@/shared/components/ol/ol-button' import OLSpinner from '@/shared/components/ol/ol-spinner' import MaterialIcon from '@/shared/components/material-icon' @@ -100,7 +100,6 @@ function ShareProjectModalContentInner({ {isSharingUpdatesEnabled && isProjectOwner && } - {!isSharingUpdatesEnabled && error && ( - } - className="mb-0 mt-3" - /> +
+ } + className="mb-0 mt-3" + /> +
)} -
{isSharingUpdatesEnabled ? ( diff --git a/services/web/frontend/js/features/share-project-modal/components/transfer-ownership-modal.tsx b/services/web/frontend/js/features/share-project-modal/components/transfer-ownership-modal.tsx index ac75b734bc..9a58239f97 100644 --- a/services/web/frontend/js/features/share-project-modal/components/transfer-ownership-modal.tsx +++ b/services/web/frontend/js/features/share-project-modal/components/transfer-ownership-modal.tsx @@ -10,7 +10,7 @@ import { OLModalHeader, OLModalTitle, } from '@/shared/components/ol/ol-modal' -import OLNotification from '@/shared/components/ol/ol-notification' +import Notification from '@/shared/components/notification' import OLButton from '@/shared/components/ol/ol-button' import { ProjectMember } from '@/shared/context/types/project-metadata' import OLSpinner from '@/shared/components/ol/ol-spinner' @@ -61,11 +61,13 @@ export default function TransferOwnershipModal({

{t('project_ownership_transfer_confirmation_2')}

{error && ( - +
+ +
)} diff --git a/services/web/frontend/js/features/socket-diagnostics/components/diagnostic-component.tsx b/services/web/frontend/js/features/socket-diagnostics/components/diagnostic-component.tsx index 73a0d7dc4c..ffe0963b90 100644 --- a/services/web/frontend/js/features/socket-diagnostics/components/diagnostic-component.tsx +++ b/services/web/frontend/js/features/socket-diagnostics/components/diagnostic-component.tsx @@ -2,7 +2,7 @@ import React from 'react' import classnames from 'classnames' import type { ConnectionStatus } from './types' import { Badge, Button } from 'react-bootstrap' -import OLNotification from '@/shared/components/ol/ol-notification' +import Notification from '@/shared/components/notification' import MaterialIcon from '@/shared/components/material-icon' const variants = { @@ -44,7 +44,11 @@ export const DiagnosticItem = ({ ) export function ErrorAlert({ message }: { message: string }) { - return + return ( +
+ +
+ ) } export function ActionButton({ diff --git a/services/web/frontend/js/features/source-editor/components/figure-modal/figure-modal-body.tsx b/services/web/frontend/js/features/source-editor/components/figure-modal/figure-modal-body.tsx index 662e2cde3d..390c90b645 100644 --- a/services/web/frontend/js/features/source-editor/components/figure-modal/figure-modal-body.tsx +++ b/services/web/frontend/js/features/source-editor/components/figure-modal/figure-modal-body.tsx @@ -11,7 +11,7 @@ import { FigureModalCurrentProjectSource } from './file-sources/figure-modal-pro import { FigureModalUploadFileSource } from './file-sources/figure-modal-upload-source' import { FigureModalUrlSource } from './file-sources/figure-modal-url-source' import { useCallback } from 'react' -import OLNotification from '@/shared/components/ol/ol-notification' +import Notification from '@/shared/components/notification' const sourceModes = new Map([ [FigureModalSource.FILE_TREE, FigureModalCurrentProjectSource], @@ -44,7 +44,9 @@ export default function FigureModalBody() { return ( <> {error && ( - +
+ +
)} diff --git a/services/web/frontend/js/features/source-editor/components/figure-modal/file-name-input.tsx b/services/web/frontend/js/features/source-editor/components/figure-modal/file-name-input.tsx index 1b7346026a..08e4845637 100644 --- a/services/web/frontend/js/features/source-editor/components/figure-modal/file-name-input.tsx +++ b/services/web/frontend/js/features/source-editor/components/figure-modal/file-name-input.tsx @@ -5,7 +5,7 @@ import { useCurrentProjectFolders } from '@/features/source-editor/hooks/use-cur import OLFormControl from '@/shared/components/ol/ol-form-control' import OLFormLabel from '@/shared/components/ol/ol-form-label' import OLFormGroup from '@/shared/components/ol/ol-form-group' -import OLNotification from '@/shared/components/ol/ol-notification' +import Notification from '@/shared/components/notification' type FileNameInputProps = Omit< React.ComponentProps, @@ -85,13 +85,15 @@ export const FileNameInput = ({ {label} {overlap && ( - +
+ +
)} diff --git a/services/web/frontend/js/features/source-editor/components/math-preview-tooltip.tsx b/services/web/frontend/js/features/source-editor/components/math-preview-tooltip.tsx index 30a0bc9217..2afa88d1d0 100644 --- a/services/web/frontend/js/features/source-editor/components/math-preview-tooltip.tsx +++ b/services/web/frontend/js/features/source-editor/components/math-preview-tooltip.tsx @@ -23,7 +23,7 @@ import { import { mathPreviewStateField } from '../extensions/math-preview' import { getTooltip } from '@codemirror/view' import ReactDOM from 'react-dom' -import OLDropdownMenuItem from '@/shared/components/ol/ol-dropdown-menu-item' +import DropdownMenuItem from '@/shared/components/dropdown/dropdown-menu-item' const MathPreviewTooltipContainer: FC = () => { const state = useCodeMirrorStateContext() @@ -94,7 +94,7 @@ const MathPreviewTooltipMenu: FC = () => { /> - { } > {t('hide')} - - + {t('disable')} - + diff --git a/services/web/frontend/js/features/subscription/components/canceled-subscription/canceled.tsx b/services/web/frontend/js/features/subscription/components/canceled-subscription/canceled.tsx index b3fa9178db..04294f99f8 100644 --- a/services/web/frontend/js/features/subscription/components/canceled-subscription/canceled.tsx +++ b/services/web/frontend/js/features/subscription/components/canceled-subscription/canceled.tsx @@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next' import OLRow from '@/shared/components/ol/ol-row' import OLCol from '@/shared/components/ol/ol-col' import OLPageContentCard from '@/shared/components/ol/ol-page-content-card' -import OLNotification from '@/shared/components/ol/ol-notification' +import Notification from '@/shared/components/notification' function Canceled() { const { t } = useTranslation() @@ -13,17 +13,19 @@ function Canceled() {

{t('subscription_canceled')}

- - {t('to_modify_your_subscription_go_to')} - - {t('manage_subscription')} - -
- } - /> +
+ + {t('to_modify_your_subscription_go_to')} + + {t('manage_subscription')} + +
+ } + /> +

- {t('generic_something_went_wrong')}. {t('try_again')}.{' '} - {t('generic_if_problem_continues_contact_us')}. - - } - /> +

) } diff --git a/services/web/frontend/js/features/subscription/components/dashboard/institution-memberships.tsx b/services/web/frontend/js/features/subscription/components/dashboard/institution-memberships.tsx index 18fb768da7..2356a3e8ec 100644 --- a/services/web/frontend/js/features/subscription/components/dashboard/institution-memberships.tsx +++ b/services/web/frontend/js/features/subscription/components/dashboard/institution-memberships.tsx @@ -1,7 +1,7 @@ import { Trans } from 'react-i18next' import { Institution } from '../../../../../../types/institution' import { useSubscriptionDashboardContext } from '../../context/subscription-dashboard-context' -import OLNotification from '@/shared/components/ol/ol-notification' +import Notification from '@/shared/components/notification' function InstitutionMemberships() { const { institutionMemberships } = useSubscriptionDashboardContext() @@ -10,16 +10,18 @@ function InstitutionMemberships() { if (!institutionMemberships) { return ( - - Sorry, something went wrong. Subscription information related to - institutional affiliations may not be displayed. Please try again - later. -

- } - /> +
+ + Sorry, something went wrong. Subscription information related to + institutional affiliations may not be displayed. Please try again + later. +

+ } + /> +
) } diff --git a/services/web/frontend/js/features/subscription/components/dashboard/pause-modal.tsx b/services/web/frontend/js/features/subscription/components/dashboard/pause-modal.tsx index 620462f63a..39cbdfd053 100644 --- a/services/web/frontend/js/features/subscription/components/dashboard/pause-modal.tsx +++ b/services/web/frontend/js/features/subscription/components/dashboard/pause-modal.tsx @@ -10,7 +10,7 @@ import { } from '@/shared/components/ol/ol-modal' import { Select } from '@/shared/components/select' import OLFormGroup from '@/shared/components/ol/ol-form-group' -import Button from '@/shared/components/button/button' +import OLButton from '@/shared/components/ol/ol-button' import { Stack } from 'react-bootstrap' import { debugConsole } from '@/utils/debugging' import * as eventTracking from '../../../../infrastructure/event-tracking' @@ -119,19 +119,19 @@ export default function PauseSubscriptionModal() { /> - - + diff --git a/services/web/frontend/js/features/subscription/components/dashboard/personal-subscription-sync-email.tsx b/services/web/frontend/js/features/subscription/components/dashboard/personal-subscription-sync-email.tsx index f086377218..07e65f3f45 100644 --- a/services/web/frontend/js/features/subscription/components/dashboard/personal-subscription-sync-email.tsx +++ b/services/web/frontend/js/features/subscription/components/dashboard/personal-subscription-sync-email.tsx @@ -3,7 +3,7 @@ import { useSubscriptionDashboardContext } from '../../context/subscription-dash import getMeta from '../../../../utils/meta' import useAsync from '../../../../shared/hooks/use-async' import { postJSON } from '../../../../infrastructure/fetch-json' -import OLNotification from '@/shared/components/ol/ol-notification' +import Notification from '@/shared/components/notification' import OLButton from '@/shared/components/ol/ol-button' import OLFormGroup from '@/shared/components/ol/ol-form-group' @@ -29,10 +29,12 @@ function PersonalSubscriptionSyncEmail() { {isSuccess ? ( - +
+ +
) : ( <>

diff --git a/services/web/frontend/js/features/subscription/components/dashboard/personal-subscription.tsx b/services/web/frontend/js/features/subscription/components/dashboard/personal-subscription.tsx index 0b9ce9a4f5..073d9982a5 100644 --- a/services/web/frontend/js/features/subscription/components/dashboard/personal-subscription.tsx +++ b/services/web/frontend/js/features/subscription/components/dashboard/personal-subscription.tsx @@ -6,7 +6,7 @@ import { CanceledSubscription } from './states/canceled' import { ExpiredSubscription } from './states/expired' import { useSubscriptionDashboardContext } from '../../context/subscription-dashboard-context' import PersonalSubscriptionSyncEmail from './personal-subscription-sync-email' -import OLNotification from '@/shared/components/ol/ol-notification' +import Notification from '@/shared/components/notification' function PastDueSubscriptionAlert({ subscription, @@ -15,21 +15,23 @@ function PastDueSubscriptionAlert({ }) { const { t } = useTranslation() return ( - - {t('account_has_past_due_invoice_change_plan_warning')}{' '} - - {t('view_your_invoices')} - - - } - /> +

+ + {t('account_has_past_due_invoice_change_plan_warning')}{' '} + + {t('view_your_invoices')} + + + } + /> +
) } @@ -82,10 +84,12 @@ function PersonalSubscription() { subscription={personalSubscription as PaidSubscription} /> {recurlyLoadError && ( - {t('payment_provider_unreachable_error')}} - /> +
+ {t('payment_provider_unreachable_error')}} + /> +
)}
diff --git a/services/web/frontend/js/features/subscription/components/dashboard/redirect-alerts.tsx b/services/web/frontend/js/features/subscription/components/dashboard/redirect-alerts.tsx index 4ba7f07f8b..a356799baa 100644 --- a/services/web/frontend/js/features/subscription/components/dashboard/redirect-alerts.tsx +++ b/services/web/frontend/js/features/subscription/components/dashboard/redirect-alerts.tsx @@ -1,5 +1,5 @@ import { Trans, useTranslation } from 'react-i18next' -import OLNotification from '@/shared/components/ol/ol-notification' +import Notification from '@/shared/components/notification' import OLButton from '@/shared/components/ol/ol-button' function RedirectAlerts() { @@ -41,7 +41,9 @@ function RedirectAlerts() { } return ( - {warning}} action={action} /> +
+ {warning}} action={action} /> +
) } export default RedirectAlerts diff --git a/services/web/frontend/js/features/subscription/components/dashboard/states/active/add-ons.tsx b/services/web/frontend/js/features/subscription/components/dashboard/states/active/add-ons.tsx index 5f2f3c2bf4..04013ee7b4 100644 --- a/services/web/frontend/js/features/subscription/components/dashboard/states/active/add-ons.tsx +++ b/services/web/frontend/js/features/subscription/components/dashboard/states/active/add-ons.tsx @@ -4,7 +4,7 @@ import getMeta from '@/utils/meta' import { Dropdown, DropdownMenu, DropdownToggle } from 'react-bootstrap' import { postJSON } from '@/infrastructure/fetch-json' import { debugConsole } from '@/utils/debugging' -import OLDropdownMenuItem from '@/shared/components/ol/ol-dropdown-menu-item' +import DropdownMenuItem from '@/shared/components/dropdown/dropdown-menu-item' import OLSpinner from '@/shared/components/ol/ol-spinner' import MaterialIcon from '@/shared/components/material-icon' import { useLocation } from '@/shared/hooks/use-location' @@ -119,22 +119,22 @@ function AddOn({ {pendingCancellation ? ( - handleReactivateClick(addOnCode)} as="button" tabIndex={-1} > {t('reactivate')} - + ) : ( - handleCancelClick(addOnCode)} as="button" tabIndex={-1} variant="danger" > {t('cancel')} - + )} diff --git a/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/cancel-ai-add-on-modal.tsx b/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/cancel-ai-add-on-modal.tsx index a8993ad9e9..6f52d1c353 100644 --- a/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/cancel-ai-add-on-modal.tsx +++ b/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/cancel-ai-add-on-modal.tsx @@ -12,7 +12,7 @@ import { OLModalTitle, } from '@/shared/components/ol/ol-modal' import OLButton from '@/shared/components/ol/ol-button' -import OLNotification from '@/shared/components/ol/ol-notification' +import Notification from '@/shared/components/notification' import { AI_ADD_ON_CODE, ADD_ON_NAME, @@ -66,19 +66,20 @@ export function CancelAiAddOnModal() { {t('cancel_add_on')} - {error && ( - - {t('generic_something_went_wrong')}. {t('try_again')}.{' '} - {t('generic_if_problem_continues_contact_us')}. - - } - /> +
+ + {t('generic_something_went_wrong')}. {t('try_again')}.{' '} + {t('generic_if_problem_continues_contact_us')}. + + } + /> +
)}

{t('the_add_on_will_remain_active_until')}

 -
{error && ( - - {t('generic_something_went_wrong')}. {t('try_again')}.{' '} - {t('generic_if_problem_continues_contact_us')}. - - } - /> +
+ + {t('generic_something_went_wrong')}. {t('try_again')}.{' '} + {t('generic_if_problem_continues_contact_us')}. + + } + /> +
)} {t('change_plan')} - {error && ( - - {t('generic_something_went_wrong')}. {t('try_again')}.{' '} - {t('generic_if_problem_continues_contact_us')}. - - } - /> +
+ + {t('generic_something_went_wrong')}. {t('try_again')}.{' '} + {t('generic_if_problem_continues_contact_us')}. + + } + /> +
)}

- - + {t('manage_subscription')} - + diff --git a/services/web/frontend/js/features/subscription/components/dashboard/states/active/confirm-unpause-modal.tsx b/services/web/frontend/js/features/subscription/components/dashboard/states/active/confirm-unpause-modal.tsx index 0b2b99730f..ec38ae979b 100644 --- a/services/web/frontend/js/features/subscription/components/dashboard/states/active/confirm-unpause-modal.tsx +++ b/services/web/frontend/js/features/subscription/components/dashboard/states/active/confirm-unpause-modal.tsx @@ -12,7 +12,7 @@ import { import OLButton from '@/shared/components/ol/ol-button' import { postJSON } from '@/infrastructure/fetch-json' import { useLocation } from '@/shared/hooks/use-location' -import OLNotification from '@/shared/components/ol/ol-notification' +import Notification from '@/shared/components/notification' import { PaidSubscription } from '../../../../../../../../types/subscription/dashboard/subscription' export function ConfirmUnpauseSubscriptionModal() { @@ -53,19 +53,20 @@ export function ConfirmUnpauseSubscriptionModal() { {t('pick_up_where_you_left_off')} - {error && ( - - {t('generic_something_went_wrong')}. {t('try_again')}.{' '} - {t('generic_if_problem_continues_contact_us')}. - - } - /> +
+ + {t('generic_something_went_wrong')}. {t('try_again')}.{' '} + {t('generic_if_problem_continues_contact_us')}. + + } + /> +
)}

{hasPendingPlan && ( - - , - ]} - /> - - } - type="success" - /> +

+ + , + ]} + /> +
+ } + type="success" + /> + )} {fromPlansPage && ( - +
+ +
)} {hasRedirectedPaymentError && ( - , - ]} - /> - } - type="error" - /> +
+ , + ]} + /> + } + type="error" + /> +
)} diff --git a/services/web/frontend/js/features/subscription/components/preview-subscription-change/trial-disabled-notification.tsx b/services/web/frontend/js/features/subscription/components/preview-subscription-change/trial-disabled-notification.tsx index 1b9b143caa..021f10f53b 100644 --- a/services/web/frontend/js/features/subscription/components/preview-subscription-change/trial-disabled-notification.tsx +++ b/services/web/frontend/js/features/subscription/components/preview-subscription-change/trial-disabled-notification.tsx @@ -1,5 +1,5 @@ import { useTranslation } from 'react-i18next' -import OLNotification from '@/shared/components/ol/ol-notification' +import Notification from '@/shared/components/notification' import getMeta from '@/utils/meta' export default function TrialDisabledNotification() { @@ -11,11 +11,13 @@ export default function TrialDisabledNotification() { } return ( - +
+ +
) } diff --git a/services/web/frontend/js/features/subscription/components/shared/payment-error-notification.tsx b/services/web/frontend/js/features/subscription/components/shared/payment-error-notification.tsx index f2db8d8baf..d7196f1367 100644 --- a/services/web/frontend/js/features/subscription/components/shared/payment-error-notification.tsx +++ b/services/web/frontend/js/features/subscription/components/shared/payment-error-notification.tsx @@ -1,6 +1,6 @@ import { FetchError } from '@/infrastructure/fetch-json' import { Trans } from 'react-i18next' -import OLNotification from '@/shared/components/ol/ol-notification' +import Notification from '@/shared/components/notification' import { billingPortalUrl } from '../../data/subscription-url' type Props = { @@ -62,5 +62,9 @@ export default function PaymentErrorNotification({ error }: Props) { } } - return + return ( +
+ +
+ ) } diff --git a/services/web/frontend/js/features/subscription/components/shared/redirected-payment-error-notification.tsx b/services/web/frontend/js/features/subscription/components/shared/redirected-payment-error-notification.tsx index 1a56d042da..eab3ed0969 100644 --- a/services/web/frontend/js/features/subscription/components/shared/redirected-payment-error-notification.tsx +++ b/services/web/frontend/js/features/subscription/components/shared/redirected-payment-error-notification.tsx @@ -1,5 +1,5 @@ import { Trans } from 'react-i18next' -import OLNotification from '@/shared/components/ol/ol-notification' +import Notification from '@/shared/components/notification' import getMeta from '@/utils/meta' export default function RedirectedPaymentErrorNotification() { @@ -12,19 +12,21 @@ export default function RedirectedPaymentErrorNotification() { } return ( - , - ]} - /> - } - type="error" - /> +
+ , + ]} + /> + } + type="error" + /> +
) } diff --git a/services/web/frontend/js/features/subscription/components/successful-subscription/successful-subscription.tsx b/services/web/frontend/js/features/subscription/components/successful-subscription/successful-subscription.tsx index ab2d3492c4..70f37964b5 100644 --- a/services/web/frontend/js/features/subscription/components/successful-subscription/successful-subscription.tsx +++ b/services/web/frontend/js/features/subscription/components/successful-subscription/successful-subscription.tsx @@ -6,7 +6,7 @@ import { useSubscriptionDashboardContext } from '../../context/subscription-dash import OLRow from '@/shared/components/ol/ol-row' import OLCol from '@/shared/components/ol/ol-col' import OLPageContentCard from '@/shared/components/ol/ol-page-content-card' -import OLNotification from '@/shared/components/ol/ol-notification' +import Notification from '@/shared/components/notification' import { AI_ADD_ON_CODE, ADD_ON_NAME, @@ -44,37 +44,39 @@ function SuccessfulSubscription() {

{t('thanks_for_subscribing')}

- - {subscription.payment.trialEndsAt && ( - <> -

- , ]} // eslint-disable-line react/jsx-key - /> -

- - - )} -
- {t('to_modify_your_subscription_go_to')} - - {t('manage_subscription')} - -
- - } - /> +
+ + {subscription.payment.trialEndsAt && ( + <> +

+ , ]} // eslint-disable-line react/jsx-key + /> +

+ + + )} +
+ {t('to_modify_your_subscription_go_to')} + + {t('manage_subscription')} + +
+ + } + /> +
{subscription.groupPlan && (

{t('welcome_to_plan', { planName: planDisplayName })}

- - {t('youve_upgraded_your_subscription')} - - {t('manage_subscription')} - - - } - /> +
+ + {t('youve_upgraded_your_subscription')} + + {t('manage_subscription')} + +
+ } + /> +

{ const { t } = useTranslation() return ( - +

+ +
) } diff --git a/services/web/frontend/js/features/word-count-modal/components/word-counts-client.tsx b/services/web/frontend/js/features/word-count-modal/components/word-counts-client.tsx index 9563ec754d..e206a9d537 100644 --- a/services/web/frontend/js/features/word-count-modal/components/word-counts-client.tsx +++ b/services/web/frontend/js/features/word-count-modal/components/word-counts-client.tsx @@ -2,7 +2,7 @@ import { FC, useMemo } from 'react' import { WordCountData } from '@/features/word-count-modal/components/word-count-data' import { useTranslation } from 'react-i18next' import { Container, Row, Col, Form } from 'react-bootstrap' -import OLNotification from '@/shared/components/ol/ol-notification' +import Notification from '@/shared/components/notification' import usePersistedState from '@/shared/hooks/use-persisted-state' const numberFormat = new Intl.NumberFormat() @@ -77,16 +77,17 @@ export const WordCountsClient: FC<{ data: WordCountData }> = ({ data }) => { {data.messages && ( - {data.messages}

- } - /> +
+ {data.messages}

+ } + /> +
)} - @@ -138,19 +139,16 @@ export const WordCountsClient: FC<{ data: WordCountData }> = ({ data }) => {
- {t('headers')}: {data.headers} - {t('inline_math')}: {data.mathInline} - {t('display_math')}: {data.mathDisplay} diff --git a/services/web/frontend/js/features/word-count-modal/components/word-counts.tsx b/services/web/frontend/js/features/word-count-modal/components/word-counts.tsx index 37843e8360..4d0ddc15f3 100644 --- a/services/web/frontend/js/features/word-count-modal/components/word-counts.tsx +++ b/services/web/frontend/js/features/word-count-modal/components/word-counts.tsx @@ -2,7 +2,7 @@ import { FC } from 'react' import { ServerWordCountData } from '@/features/word-count-modal/components/word-count-data' import { useTranslation } from 'react-i18next' import { Container, Row, Col } from 'react-bootstrap' -import OLNotification from '@/shared/components/ol/ol-notification' +import Notification from '@/shared/components/notification' export const WordCounts: FC<{ data: ServerWordCountData @@ -14,16 +14,17 @@ export const WordCounts: FC<{ {data.messages && ( - {data.messages}

- } - /> +
+ {data.messages}

+ } + /> +
)} -
{t('total_words')}:
@@ -36,14 +37,12 @@ export const WordCounts: FC<{ {data.headers} -
{t('math_inline')}:
{data.mathInline} -
{t('math_display')}:
diff --git a/services/web/frontend/js/shared/components/badge/badge-link.tsx b/services/web/frontend/js/shared/components/badge/badge-link.tsx index 8cafbf32a1..0977659ded 100644 --- a/services/web/frontend/js/shared/components/badge/badge-link.tsx +++ b/services/web/frontend/js/shared/components/badge/badge-link.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames' import type { MergeAndOverride } from '../../../../../types/utils' -import Badge, { type BadgeProps } from './badge' +import Badge, { type OLBadgeProps as BadgeProps } from '../ol/ol-badge' export type BadgeLinkProps = MergeAndOverride< BadgeProps, diff --git a/services/web/frontend/js/shared/components/badge/badge.tsx b/services/web/frontend/js/shared/components/badge/badge.tsx deleted file mode 100644 index 53edc782fc..0000000000 --- a/services/web/frontend/js/shared/components/badge/badge.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { Badge as BSBadge, BadgeProps as BSBadgeProps } from 'react-bootstrap' -import { MergeAndOverride } from '../../../../../types/utils' - -export type BadgeProps = MergeAndOverride< - BSBadgeProps, - { - prepend?: React.ReactNode - badgeContentRef?: React.RefObject - } -> - -function Badge({ prepend, children, badgeContentRef, ...rest }: BadgeProps) { - return ( - - {prepend && {prepend}} - - {children} - - - ) -} - -export default Badge diff --git a/services/web/frontend/js/shared/components/button/button.tsx b/services/web/frontend/js/shared/components/button/button.tsx deleted file mode 100644 index a850025cce..0000000000 --- a/services/web/frontend/js/shared/components/button/button.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { forwardRef } from 'react' -import { Button as BS5Button } from 'react-bootstrap' -import type { ButtonProps } from '@/shared/components/types/button-props' -import classNames from 'classnames' -import { useTranslation } from 'react-i18next' -import MaterialIcon from '@/shared/components/material-icon' -import OLSpinner from '../ol/ol-spinner' - -const Button = forwardRef( - ( - { - children, - className, - leadingIcon, - isLoading = false, - loadingLabel, - trailingIcon, - variant = 'primary', - ...props - }, - ref - ) => { - const { t } = useTranslation() - - const buttonClassName = classNames('d-inline-grid', className, { - 'button-loading': isLoading, - }) - - const loadingSpinnerClassName = - props.size === 'lg' ? 'loading-spinner-large' : 'loading-spinner-small' - const materialIconClassName = - props.size === 'lg' ? 'icon-large' : 'icon-small' - - const leadingIconComponent = - leadingIcon && typeof leadingIcon === 'string' ? ( - - ) : ( - leadingIcon - ) - - const trailingIconComponent = - trailingIcon && typeof trailingIcon === 'string' ? ( - - ) : ( - trailingIcon - ) - - return ( - - {isLoading && ( - - - - {loadingLabel ?? t('loading')} - - - )} - - {leadingIconComponent} - {children} - {trailingIconComponent} - - - ) - } -) -Button.displayName = 'Button' - -export default Button diff --git a/services/web/frontend/js/shared/components/button/icon-button.tsx b/services/web/frontend/js/shared/components/button/icon-button.tsx deleted file mode 100644 index f26cb8bd32..0000000000 --- a/services/web/frontend/js/shared/components/button/icon-button.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { forwardRef } from 'react' -import classNames from 'classnames' -import MaterialIcon from '@/shared/components/material-icon' -import Button from './button' -import type { IconButtonProps } from '@/shared/components/types/icon-button-props' - -const IconButton = forwardRef( - ( - { - accessibilityLabel, - icon, - isLoading = false, - size, - className, - unfilled, - ...props - }, - ref - ) => { - const iconButtonClassName = classNames(className, { - 'icon-button': !size, - 'icon-button-small': size === 'sm', - 'icon-button-large': size === 'lg', - }) - const iconSizeClassName = size === 'lg' ? 'icon-large' : 'icon-small' - const materialIconClassName = classNames(iconSizeClassName, { - 'button-content-hidden': isLoading, - unfilled, - }) - - return ( - - ) - } -) -IconButton.displayName = 'IconButton' - -export default IconButton diff --git a/services/web/frontend/js/shared/components/ol/ol-dropdown-menu-item.tsx b/services/web/frontend/js/shared/components/dropdown/dropdown-menu-item.tsx similarity index 81% rename from services/web/frontend/js/shared/components/ol/ol-dropdown-menu-item.tsx rename to services/web/frontend/js/shared/components/dropdown/dropdown-menu-item.tsx index ad89ca0e0d..3c0a5697d7 100644 --- a/services/web/frontend/js/shared/components/ol/ol-dropdown-menu-item.tsx +++ b/services/web/frontend/js/shared/components/dropdown/dropdown-menu-item.tsx @@ -3,7 +3,7 @@ import { DropdownItemProps } from '@/shared/components/types/dropdown-menu-props import DropdownListItem from '@/shared/components/dropdown/dropdown-list-item' // This represents a menu item. It wraps the item within an
  • element. -function OLDropdownMenuItem(props: DropdownItemProps) { +function DropdownMenuItem(props: DropdownItemProps) { return ( @@ -11,4 +11,4 @@ function OLDropdownMenuItem(props: DropdownItemProps) { ) } -export default OLDropdownMenuItem +export default DropdownMenuItem diff --git a/services/web/frontend/js/shared/components/ds/ds-form-feedback.tsx b/services/web/frontend/js/shared/components/ds/ds-form-feedback.tsx index e3955754e9..b2a8014d13 100644 --- a/services/web/frontend/js/shared/components/ds/ds-form-feedback.tsx +++ b/services/web/frontend/js/shared/components/ds/ds-form-feedback.tsx @@ -1,5 +1,5 @@ import { Form } from 'react-bootstrap' -import FormText from '@/shared/components/form/form-text' +import OLFormText from '@/shared/components/ol/ol-form-text' import { ComponentProps } from 'react' export type FormFeedbackProps = Pick< @@ -10,9 +10,9 @@ export type FormFeedbackProps = Pick< function DSFormFeedback(props: FormFeedbackProps) { return ( - + {props.children} - + ) } diff --git a/services/web/frontend/js/shared/components/error-boundary-fallback.tsx b/services/web/frontend/js/shared/components/error-boundary-fallback.tsx index 1f315e6f6f..96461e388a 100644 --- a/services/web/frontend/js/shared/components/error-boundary-fallback.tsx +++ b/services/web/frontend/js/shared/components/error-boundary-fallback.tsx @@ -1,13 +1,15 @@ import { FC, ReactNode } from 'react' import { DefaultMessage } from './default-message' -import OLNotification from '@/shared/components/ol/ol-notification' +import Notification from '@/shared/components/notification' export const ErrorBoundaryFallback: FC< React.PropsWithChildren<{ modal?: ReactNode }> > = ({ children, modal }) => { return (
    - } /> +
    + } /> +
    {modal}
    ) diff --git a/services/web/frontend/js/shared/components/form/form-control.tsx b/services/web/frontend/js/shared/components/form/form-control.tsx deleted file mode 100644 index 5a4ab4f00f..0000000000 --- a/services/web/frontend/js/shared/components/form/form-control.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React, { forwardRef } from 'react' -import { Form, FormControlProps as BS5FormControlProps } from 'react-bootstrap' -import classnames from 'classnames' - -export type OLBS5FormControlProps = BS5FormControlProps & { - prepend?: React.ReactNode - append?: React.ReactNode - rows?: number -} - -const FormControl = forwardRef( - ({ prepend, append, className, ...props }, ref) => { - if (prepend || append) { - const wrapperClassNames = classnames('form-control-wrapper', { - 'form-control-wrapper-sm': props.size === 'sm', - 'form-control-wrapper-lg': props.size === 'lg', - 'form-control-wrapper-disabled': props.disabled, - }) - - const formControlClassNames = classnames(className, { - 'form-control-offset-start': prepend, - 'form-control-offset-end': append, - }) - - return ( -
    - {prepend && ( - {prepend} - )} - - {append && {append}} -
    - ) - } - - return - } -) -FormControl.displayName = 'FormControl' - -export default FormControl diff --git a/services/web/frontend/js/shared/components/form/form-feedback.tsx b/services/web/frontend/js/shared/components/form/form-feedback.tsx deleted file mode 100644 index 67efb6902b..0000000000 --- a/services/web/frontend/js/shared/components/form/form-feedback.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { Form } from 'react-bootstrap' -import FormText from '@/shared/components/form/form-text' -import { ComponentProps } from 'react' - -export type FormFeedbackProps = Pick< - ComponentProps, - 'type' | 'className' | 'children' -> & { unfilled?: boolean } - -function FormFeedback({ unfilled, ...props }: FormFeedbackProps) { - return ( - - - {props.children} - - - ) -} - -export default FormFeedback diff --git a/services/web/frontend/js/shared/components/form/form-group.tsx b/services/web/frontend/js/shared/components/form/form-group.tsx deleted file mode 100644 index 5807ef9839..0000000000 --- a/services/web/frontend/js/shared/components/form/form-group.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { forwardRef } from 'react' -import { FormGroup as BS5FormGroup, FormGroupProps } from 'react-bootstrap' -import classnames from 'classnames' - -const FormGroup = forwardRef( - ({ className, ...props }, ref) => { - const classNames = classnames('form-group', className) - - return - } -) -FormGroup.displayName = 'FormGroup' - -export default FormGroup diff --git a/services/web/frontend/js/shared/components/form/form-text.tsx b/services/web/frontend/js/shared/components/form/form-text.tsx deleted file mode 100644 index acc3bb312c..0000000000 --- a/services/web/frontend/js/shared/components/form/form-text.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import { Form, FormTextProps as BS5FormTextProps } from 'react-bootstrap' -import MaterialIcon from '@/shared/components/material-icon' -import classnames from 'classnames' -import { MergeAndOverride } from '../../../../../types/utils' - -type TextType = 'default' | 'info' | 'success' | 'warning' | 'error' - -export type FormTextProps = MergeAndOverride< - BS5FormTextProps, - { - type?: TextType - unfilled?: boolean - marginless?: boolean - } -> - -const typeClassMap: Partial> = { - error: 'text-danger', - success: 'text-success', - warning: 'text-warning', -} - -export const getFormTextClass = (type?: TextType) => - typeClassMap[type || 'default'] - -function FormTextIcon({ - type, - unfilled, -}: Pick) { - switch (type) { - case 'info': - return unfilled ? ( - - ) : ( - - ) - case 'success': - return unfilled ? ( - - ) : ( - - ) - case 'warning': - return unfilled ? ( - - ) : ( - - ) - case 'error': - return unfilled ? ( - - ) : ( - - ) - default: - return null - } -} - -function FormText({ - type = 'default', - marginless, - children, - className, - unfilled, - ...rest -}: FormTextProps) { - return ( - - - - {children} - - - ) -} - -export default FormText diff --git a/services/web/frontend/js/shared/components/labs/labs-experiments-widget.tsx b/services/web/frontend/js/shared/components/labs/labs-experiments-widget.tsx index 10a2443692..708b133b9b 100644 --- a/services/web/frontend/js/shared/components/labs/labs-experiments-widget.tsx +++ b/services/web/frontend/js/shared/components/labs/labs-experiments-widget.tsx @@ -4,7 +4,7 @@ import OLBadge from '@/shared/components/ol/ol-badge' import { postJSON } from '@/infrastructure/fetch-json' import OLButton from '@/shared/components/ol/ol-button' import getMeta from '@/utils/meta' -import Notification from '../notification' +import Notification from '@/shared/components/notification' import { LabsEnableButton } from '@/shared/components/labs/labs-enable-button' export type LabsExperimentWidgetProps = { diff --git a/services/web/frontend/js/shared/components/notification.tsx b/services/web/frontend/js/shared/components/notification.tsx index 40bbc03004..87f808b01d 100644 --- a/services/web/frontend/js/shared/components/notification.tsx +++ b/services/web/frontend/js/shared/components/notification.tsx @@ -3,7 +3,7 @@ import classNames from 'classnames' import React, { ReactElement, useState } from 'react' import { useTranslation } from 'react-i18next' -import MaterialIcon from './material-icon' +import MaterialIcon from '@/shared/components/material-icon' export type NotificationType = | 'info' @@ -62,7 +62,7 @@ export function NotificationIcon({ ) } -function Notification({ +export default function Notification({ action, ariaLive, className = '', @@ -140,5 +140,3 @@ function Notification({ ) } - -export default Notification diff --git a/services/web/frontend/js/shared/components/ol/ol-badge.tsx b/services/web/frontend/js/shared/components/ol/ol-badge.tsx index b9aefbb91e..c6aec926ea 100644 --- a/services/web/frontend/js/shared/components/ol/ol-badge.tsx +++ b/services/web/frontend/js/shared/components/ol/ol-badge.tsx @@ -1,7 +1,16 @@ -import Badge from '@/shared/components/badge/badge' +import { Badge as BSBadge, BadgeProps as BSBadgeProps } from 'react-bootstrap' +import { MergeAndOverride } from '../../../../../types/utils' -function OLBadge(props: React.ComponentProps) { - let { bg, text, ...rest } = props +export type OLBadgeProps = MergeAndOverride< + BSBadgeProps, + { + prepend?: React.ReactNode + badgeContentRef?: React.RefObject + } +> + +function OLBadge(props: OLBadgeProps) { + let { bg, text, prepend, children, badgeContentRef, ...rest } = props // For warning badges, use a light background by default. We still want the // Bootstrap warning colour to be dark for text though, so make an @@ -11,7 +20,14 @@ function OLBadge(props: React.ComponentProps) { text = 'warning' } - return + return ( + + {prepend && {prepend}} + + {children} + + + ) } export default OLBadge diff --git a/services/web/frontend/js/shared/components/ol/ol-button.tsx b/services/web/frontend/js/shared/components/ol/ol-button.tsx index e8f284414b..3e6b43cb91 100644 --- a/services/web/frontend/js/shared/components/ol/ol-button.tsx +++ b/services/web/frontend/js/shared/components/ol/ol-button.tsx @@ -1,12 +1,79 @@ import { forwardRef } from 'react' +import { Button } from 'react-bootstrap' import type { ButtonProps } from '@/shared/components/types/button-props' -import Button from '../button/button' +import classNames from 'classnames' +import { useTranslation } from 'react-i18next' +import MaterialIcon from '@/shared/components/material-icon' +import OLSpinner from './ol-spinner' export type OLButtonProps = ButtonProps -const OLButton = forwardRef((props, ref) => { - return + ) + } +) OLButton.displayName = 'OLButton' diff --git a/services/web/frontend/js/shared/components/ol/ol-form-checkbox.tsx b/services/web/frontend/js/shared/components/ol/ol-form-checkbox.tsx index 825a3bb01f..863238cb17 100644 --- a/services/web/frontend/js/shared/components/ol/ol-form-checkbox.tsx +++ b/services/web/frontend/js/shared/components/ol/ol-form-checkbox.tsx @@ -1,6 +1,6 @@ import { Form, FormCheckProps } from 'react-bootstrap' import { MergeAndOverride } from '../../../../../types/utils' -import FormText from '../form/form-text' +import { FormText } from './ol-form-text' type OLFormCheckboxProps = MergeAndOverride< FormCheckProps, diff --git a/services/web/frontend/js/shared/components/ol/ol-form-control.tsx b/services/web/frontend/js/shared/components/ol/ol-form-control.tsx index eb1a19f018..598e26ebaa 100644 --- a/services/web/frontend/js/shared/components/ol/ol-form-control.tsx +++ b/services/web/frontend/js/shared/components/ol/ol-form-control.tsx @@ -1,26 +1,51 @@ -import { forwardRef } from 'react' -import FormControl, { - type OLBS5FormControlProps, -} from '@/shared/components/form/form-control' -import OLSpinner from '@/shared/components/ol/ol-spinner' +import React, { forwardRef } from 'react' +import { Form, FormControlProps as FormControlProps } from 'react-bootstrap' +import classnames from 'classnames' +import OLSpinner from './ol-spinner' -type OLFormControlProps = OLBS5FormControlProps & { +export type OLFormControlProps = FormControlProps & { + prepend?: React.ReactNode + append?: React.ReactNode + rows?: number 'data-ol-dirty'?: unknown 'main-field'?: any // For the CM6's benefit in the editor search panel loading?: boolean } const OLFormControl = forwardRef( - (props, ref) => { - const { append, ...rest } = props + ({ prepend, append, loading, className, ...props }, ref) => { + const resolvedAppend = loading ? : append - return ( - : append} - /> - ) + if (prepend || resolvedAppend) { + const wrapperClassNames = classnames('form-control-wrapper', { + 'form-control-wrapper-sm': props.size === 'sm', + 'form-control-wrapper-lg': props.size === 'lg', + 'form-control-wrapper-disabled': props.disabled, + }) + + const formControlClassNames = classnames(className, { + 'form-control-offset-start': prepend, + 'form-control-offset-end': resolvedAppend, + }) + + return ( +
    + {prepend && ( + {prepend} + )} + + {resolvedAppend && ( + {resolvedAppend} + )} +
    + ) + } + + return } ) OLFormControl.displayName = 'OLFormControl' diff --git a/services/web/frontend/js/shared/components/ol/ol-form-feedback.tsx b/services/web/frontend/js/shared/components/ol/ol-form-feedback.tsx index 8ebecd2803..9801074f54 100644 --- a/services/web/frontend/js/shared/components/ol/ol-form-feedback.tsx +++ b/services/web/frontend/js/shared/components/ol/ol-form-feedback.tsx @@ -1,9 +1,23 @@ -import FormFeedback, { - FormFeedbackProps, -} from '@/shared/components/form/form-feedback' +import { Form } from 'react-bootstrap' +import { FormText } from './ol-form-text' +import { ComponentProps } from 'react' -function OLFormFeedback(props: FormFeedbackProps) { - return +export type OLFormFeedbackProps = Pick< + ComponentProps, + 'type' | 'className' | 'children' +> & { unfilled?: boolean } + +function OLFormFeedback({ unfilled, ...props }: OLFormFeedbackProps) { + return ( + + + {props.children} + + + ) } export default OLFormFeedback diff --git a/services/web/frontend/js/shared/components/ol/ol-form-group.tsx b/services/web/frontend/js/shared/components/ol/ol-form-group.tsx index e9ea98ba8a..fd471dde5b 100644 --- a/services/web/frontend/js/shared/components/ol/ol-form-group.tsx +++ b/services/web/frontend/js/shared/components/ol/ol-form-group.tsx @@ -1,8 +1,10 @@ -import { FormGroupProps } from 'react-bootstrap' -import FormGroup from '@/shared/components/form/form-group' +import { FormGroup, FormGroupProps } from 'react-bootstrap' +import classnames from 'classnames' -function OLFormGroup(props: FormGroupProps) { - return +function OLFormGroup({ className, ...props }: FormGroupProps) { + return ( + + ) } export default OLFormGroup diff --git a/services/web/frontend/js/shared/components/ol/ol-form-text.tsx b/services/web/frontend/js/shared/components/ol/ol-form-text.tsx index caed20d4e9..f5e1d2f842 100644 --- a/services/web/frontend/js/shared/components/ol/ol-form-text.tsx +++ b/services/web/frontend/js/shared/components/ol/ol-form-text.tsx @@ -1,7 +1,87 @@ -import FormText, { FormTextProps } from '@/shared/components/form/form-text' +import { Form, FormTextProps as FormTextProps } from 'react-bootstrap' +import MaterialIcon from '@/shared/components/material-icon' +import classnames from 'classnames' +import { MergeAndOverride } from '../../../../../types/utils' -function OLFormText({ as = 'div', ...rest }: FormTextProps) { - return +type TextType = 'default' | 'info' | 'success' | 'warning' | 'error' + +export type OLFormTextProps = MergeAndOverride< + FormTextProps, + { + type?: TextType + unfilled?: boolean + marginless?: boolean + } +> + +const typeClassMap: Partial> = { + error: 'text-danger', + success: 'text-success', + warning: 'text-warning', +} + +export const getFormTextClass = (type?: TextType) => + typeClassMap[type || 'default'] + +function FormTextIcon({ + type, + unfilled, +}: Pick) { + switch (type) { + case 'info': + return unfilled ? ( + + ) : ( + + ) + case 'success': + return unfilled ? ( + + ) : ( + + ) + case 'warning': + return unfilled ? ( + + ) : ( + + ) + case 'error': + return unfilled ? ( + + ) : ( + + ) + default: + return null + } +} + +// Base component without a default `as` — exported for use by the backward-compat shim +export function FormText({ + type = 'default', + marginless, + children, + className, + unfilled, + ...rest +}: OLFormTextProps) { + return ( + + + + {children} + + + ) +} + +// OL component defaults to rendering as a
    +function OLFormText({ as = 'div', ...rest }: OLFormTextProps) { + return } export default OLFormText diff --git a/services/web/frontend/js/shared/components/ol/ol-icon-button.tsx b/services/web/frontend/js/shared/components/ol/ol-icon-button.tsx index b7db1d527d..f8608551ab 100644 --- a/services/web/frontend/js/shared/components/ol/ol-icon-button.tsx +++ b/services/web/frontend/js/shared/components/ol/ol-icon-button.tsx @@ -1,13 +1,48 @@ import { forwardRef } from 'react' +import classNames from 'classnames' +import MaterialIcon from '@/shared/components/material-icon' +import OLButton from './ol-button' import type { IconButtonProps } from '@/shared/components/types/icon-button-props' -import IconButton from '../button/icon-button' export type OLIconButtonProps = IconButtonProps const OLIconButton = forwardRef( - (props, ref) => { - // BS5 tooltip relies on the ref - return + ( + { + accessibilityLabel, + icon, + isLoading = false, + loadingLabel, + size, + className, + unfilled, + ...props + }, + ref + ) => { + const iconButtonClassName = classNames(className, { + 'icon-button': !size, + 'icon-button-small': size === 'sm', + 'icon-button-large': size === 'lg', + }) + const iconSizeClassName = size === 'lg' ? 'icon-large' : 'icon-small' + const materialIconClassName = classNames(iconSizeClassName, { + 'button-content-hidden': isLoading, + unfilled, + }) + + return ( + + + + ) } ) OLIconButton.displayName = 'OLIconButton' diff --git a/services/web/frontend/js/shared/components/ol/ol-notification.tsx b/services/web/frontend/js/shared/components/ol/ol-notification.tsx deleted file mode 100644 index 7ca811a796..0000000000 --- a/services/web/frontend/js/shared/components/ol/ol-notification.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import Notification from '@/shared/components/notification' - -function OLNotification(props: React.ComponentProps) { - return ( -
    - -
    - ) -} - -export default OLNotification diff --git a/services/web/frontend/js/shared/components/ol/ol-table.tsx b/services/web/frontend/js/shared/components/ol/ol-table.tsx index f1ed2dbc78..617e41cfc0 100644 --- a/services/web/frontend/js/shared/components/ol/ol-table.tsx +++ b/services/web/frontend/js/shared/components/ol/ol-table.tsx @@ -1,7 +1,43 @@ -import Table from '@/shared/components/table' +import { Table } from 'react-bootstrap' +import classnames from 'classnames' -function OLTable(props: React.ComponentProps) { - return +export function TableContainer({ + responsive, + bordered, + striped, + children, +}: React.ComponentProps) { + return ( +
    + {children} +
    + ) +} + +type OLTableProps = React.ComponentProps & { + container?: boolean +} + +function OLTable({ + container = true, + responsive, + bordered, + striped, + ...rest +}: OLTableProps) { + return container ? ( + +
    + + ) : ( +
    + ) } export default OLTable diff --git a/services/web/frontend/js/shared/components/ol/ol-tag.tsx b/services/web/frontend/js/shared/components/ol/ol-tag.tsx index 816574035f..7223387d33 100644 --- a/services/web/frontend/js/shared/components/ol/ol-tag.tsx +++ b/services/web/frontend/js/shared/components/ol/ol-tag.tsx @@ -1,11 +1,73 @@ -import Tag from '@/shared/components/tag' +import { useTranslation } from 'react-i18next' +import { Badge, BadgeProps } from 'react-bootstrap' +import MaterialIcon from '@/shared/components/material-icon' +import { MergeAndOverride } from '../../../../../types/utils' +import classnames from 'classnames' import { forwardRef } from 'react' -type OLTagProps = React.ComponentProps +type OLTagProps = MergeAndOverride< + BadgeProps, + { + prepend?: React.ReactNode + contentProps?: React.ComponentProps<'button'> + closeBtnProps?: React.ComponentProps<'button'> + } +> -const OLTag = forwardRef((props: OLTagProps, ref) => { - return -}) +const OLTag = forwardRef( + ( + { prepend, children, contentProps, closeBtnProps, className, ...rest }, + ref + ) => { + const { t } = useTranslation() + + const content = ( + <> + {prepend && {prepend}} + {children} + + ) + + return ( + + {contentProps?.onClick ? ( + + ) : ( + + {content} + + )} + {closeBtnProps && ( + + )} + + ) + } +) OLTag.displayName = 'OLTag' diff --git a/services/web/frontend/js/shared/components/ol/ol-toast-container.tsx b/services/web/frontend/js/shared/components/ol/ol-toast-container.tsx index 26c0ff3545..01cc7d3fcd 100644 --- a/services/web/frontend/js/shared/components/ol/ol-toast-container.tsx +++ b/services/web/frontend/js/shared/components/ol/ol-toast-container.tsx @@ -1,5 +1,5 @@ import { CSSProperties, FC } from 'react' -import { ToastContainer as BS5ToastContainer } from 'react-bootstrap' +import { ToastContainer } from 'react-bootstrap' type OLToastContainerProps = { style?: CSSProperties @@ -10,8 +10,8 @@ export const OLToastContainer: FC< React.PropsWithChildren > = ({ children, className, style }) => { return ( - + {children} - + ) } diff --git a/services/web/frontend/js/shared/components/ol/ol-toast.tsx b/services/web/frontend/js/shared/components/ol/ol-toast.tsx index 829819b02e..4cab52c09b 100644 --- a/services/web/frontend/js/shared/components/ol/ol-toast.tsx +++ b/services/web/frontend/js/shared/components/ol/ol-toast.tsx @@ -1,6 +1,9 @@ import classNames from 'classnames' -import { Toast as BS5Toast } from 'react-bootstrap' -import { NotificationIcon, NotificationType } from '../notification' +import { Toast } from 'react-bootstrap' +import { + NotificationIcon, + NotificationType, +} from '@/shared/components/notification' import { useTranslation } from 'react-i18next' import MaterialIcon from '../material-icon' import { ReactNode, useCallback, useState } from 'react' @@ -73,7 +76,7 @@ export const OLToast = ({ ) return ( - {toastElement} - + ) } diff --git a/services/web/frontend/js/shared/components/ol/ol-tooltip.tsx b/services/web/frontend/js/shared/components/ol/ol-tooltip.tsx index 6744d81664..bb44951df2 100644 --- a/services/web/frontend/js/shared/components/ol/ol-tooltip.tsx +++ b/services/web/frontend/js/shared/components/ol/ol-tooltip.tsx @@ -1,7 +1,118 @@ -import Tooltip from '@/shared/components/tooltip' +import { + cloneElement, + useEffect, + forwardRef, + useState, + useCallback, +} from 'react' +import { + OverlayTrigger, + OverlayTriggerProps, + Tooltip as BSTooltip, + TooltipProps as BSTooltipProps, +} from 'react-bootstrap' +import { callFnsInSequence } from '@/utils/functions' -function OLTooltip(props: React.ComponentProps) { - return +const DEFAULT_DELAY_SHOW = 300 +// Slightly lower value avoids flickering when an adjacent tooltip is shown before the previous one hides +const DEFAULT_DELAY_HIDE = 290 + +type OverlayProps = Omit + +const UpdatingTooltip = forwardRef( + ({ popper, children, show: _, ...props }, ref) => { + useEffect(() => { + popper?.scheduleUpdate?.() + }, [children, popper]) + + return ( + + {children} + + ) + } +) +UpdatingTooltip.displayName = 'UpdatingTooltip' + +export type OLTooltipProps = { + description: React.ReactNode + id: string + overlayProps?: OverlayProps + tooltipProps?: BSTooltipProps + hidden?: boolean + children: React.ReactElement +} + +function OLTooltip({ + id, + description, + children, + tooltipProps, + overlayProps, + hidden, +}: OLTooltipProps) { + const [show, setShow] = useState(false) + + const handleKeyDown = useCallback( + (e: KeyboardEvent) => { + if (show && e.key === 'Escape') { + setShow(false) + e.stopPropagation() + } + }, + [show, setShow] + ) + + useEffect(() => { + if (hidden) { + setShow(false) + } + }, [hidden]) + + useEffect(() => { + document.addEventListener('keydown', handleKeyDown, true) + return () => document.removeEventListener('keydown', handleKeyDown, true) + }, [handleKeyDown]) + + const hideTooltip = (e: React.MouseEvent) => { + if (e.currentTarget instanceof HTMLElement) { + e.currentTarget.blur() + } + setShow(false) + } + + const delay = overlayProps?.delay + let delayShow = DEFAULT_DELAY_SHOW + let delayHide = DEFAULT_DELAY_HIDE + if (delay !== undefined) { + delayShow = typeof delay === 'number' ? delay : delay.show + delayHide = typeof delay === 'number' ? Math.max(delay - 10, 0) : delay.hide + } + + return ( + + ) } export default OLTooltip diff --git a/services/web/frontend/js/shared/components/select.tsx b/services/web/frontend/js/shared/components/select.tsx index 6daac46a72..8c9277568f 100644 --- a/services/web/frontend/js/shared/components/select.tsx +++ b/services/web/frontend/js/shared/components/select.tsx @@ -11,7 +11,7 @@ import classNames from 'classnames' import { useSelect } from 'downshift' import { useTranslation } from 'react-i18next' import { Form, OverlayProps } from 'react-bootstrap' -import FormControl from '@/shared/components/form/form-control' +import OLFormControl from '@/shared/components/ol/ol-form-control' import MaterialIcon from '@/shared/components/material-icon' import { CaretUp, CaretDown, Check } from '@phosphor-icons/react' import { DropdownItem } from '@/shared/components/dropdown/dropdown-menu' @@ -101,7 +101,7 @@ export type SelectProps = { dataTestId?: string // CIAM-specific layout isCiam?: boolean - size?: React.ComponentProps['size'] + size?: React.ComponentProps['size'] // Renders the menu in a portal so it escapes overflow-clipping ancestors. portal?: boolean // Element the portaled menu is rendered into (only used with `portal`). @@ -312,7 +312,7 @@ export const Select = ({ {loading && } ) : null} - ) { - return ( -
    - {children} -
    - ) -} - -type TableProps = React.ComponentProps & { - container?: boolean -} - -function Table({ - container = true, - responsive, - bordered, - striped, - ...rest -}: TableProps) { - return container ? ( - - - - ) : ( - - ) -} - -export default Table diff --git a/services/web/frontend/js/shared/components/ol/ol-tag-icon.tsx b/services/web/frontend/js/shared/components/tag-icon.tsx similarity index 72% rename from services/web/frontend/js/shared/components/ol/ol-tag-icon.tsx rename to services/web/frontend/js/shared/components/tag-icon.tsx index 4a2fbadec9..dde9e0782f 100644 --- a/services/web/frontend/js/shared/components/ol/ol-tag-icon.tsx +++ b/services/web/frontend/js/shared/components/tag-icon.tsx @@ -1,5 +1,5 @@ import MaterialIcon from '@/shared/components/material-icon' -export default function OLTagIcon() { +export default function TagIcon() { return } diff --git a/services/web/frontend/js/shared/components/tag.tsx b/services/web/frontend/js/shared/components/tag.tsx deleted file mode 100644 index 76b8cd50b4..0000000000 --- a/services/web/frontend/js/shared/components/tag.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { useTranslation } from 'react-i18next' -import { Badge, BadgeProps } from 'react-bootstrap' -import MaterialIcon from '@/shared/components/material-icon' -import { MergeAndOverride } from '../../../../types/utils' -import classnames from 'classnames' -import { forwardRef } from 'react' - -type TagProps = MergeAndOverride< - BadgeProps, - { - prepend?: React.ReactNode - contentProps?: React.ComponentProps<'button'> - closeBtnProps?: React.ComponentProps<'button'> - } -> - -const Tag = forwardRef( - ( - { prepend, children, contentProps, closeBtnProps, className, ...rest }, - ref - ) => { - const { t } = useTranslation() - - const content = ( - <> - {prepend && {prepend}} - {children} - - ) - - return ( - - {contentProps?.onClick ? ( - - ) : ( - - {content} - - )} - {closeBtnProps && ( - - )} - - ) - } -) - -Tag.displayName = 'Tag' - -export default Tag diff --git a/services/web/frontend/js/shared/components/tooltip.tsx b/services/web/frontend/js/shared/components/tooltip.tsx deleted file mode 100644 index 971e3c0ecb..0000000000 --- a/services/web/frontend/js/shared/components/tooltip.tsx +++ /dev/null @@ -1,118 +0,0 @@ -import { - cloneElement, - useEffect, - forwardRef, - useState, - useCallback, -} from 'react' -import { - OverlayTrigger, - OverlayTriggerProps, - Tooltip as BSTooltip, - TooltipProps as BSTooltipProps, -} from 'react-bootstrap' -import { callFnsInSequence } from '@/utils/functions' - -const DEFAULT_DELAY_SHOW = 300 -// Slightly lower value avoids flickering when an adjacent tooltip is shown before the previous one hides -const DEFAULT_DELAY_HIDE = 290 - -type OverlayProps = Omit - -const UpdatingTooltip = forwardRef( - ({ popper, children, show: _, ...props }, ref) => { - useEffect(() => { - popper?.scheduleUpdate?.() - }, [children, popper]) - - return ( - - {children} - - ) - } -) -UpdatingTooltip.displayName = 'UpdatingTooltip' - -export type TooltipProps = { - description: React.ReactNode - id: string - overlayProps?: OverlayProps - tooltipProps?: BSTooltipProps - hidden?: boolean - children: React.ReactElement -} - -function Tooltip({ - id, - description, - children, - tooltipProps, - overlayProps, - hidden, -}: TooltipProps) { - const [show, setShow] = useState(false) - - const handleKeyDown = useCallback( - (e: KeyboardEvent) => { - if (show && e.key === 'Escape') { - setShow(false) - e.stopPropagation() - } - }, - [show, setShow] - ) - - useEffect(() => { - if (hidden) { - setShow(false) - } - }, [hidden]) - - useEffect(() => { - document.addEventListener('keydown', handleKeyDown, true) - return () => document.removeEventListener('keydown', handleKeyDown, true) - }, [handleKeyDown]) - - const hideTooltip = (e: React.MouseEvent) => { - if (e.currentTarget instanceof HTMLElement) { - e.currentTarget.blur() - } - setShow(false) - } - - const delay = overlayProps?.delay - let delayShow = DEFAULT_DELAY_SHOW - let delayHide = DEFAULT_DELAY_HIDE - if (delay !== undefined) { - delayShow = typeof delay === 'number' ? delay : delay.show - delayHide = typeof delay === 'number' ? Math.max(delay - 10, 0) : delay.hide - } - - return ( - - ) -} - -export default Tooltip diff --git a/services/web/modules/full-project-search/frontend/js/components/full-project-search-button.tsx b/services/web/modules/full-project-search/frontend/js/components/full-project-search-button.tsx index 6ee6a06a41..7752c7c93b 100644 --- a/services/web/modules/full-project-search/frontend/js/components/full-project-search-button.tsx +++ b/services/web/modules/full-project-search/frontend/js/components/full-project-search-button.tsx @@ -4,7 +4,7 @@ import classnames from 'classnames' import MaterialIcon from '@/shared/components/material-icon' import { useLayoutContext } from '@/shared/context/layout-context' import { useTranslation } from 'react-i18next' -import { TooltipProps } from '@/shared/components/tooltip' +import { OLTooltipProps as TooltipProps } from '@/shared/components/ol/ol-tooltip' import { isMac } from '@/shared/utils/os' import { sendSearchEvent } from '@/features/event-tracking/search-events' diff --git a/services/web/modules/full-project-search/frontend/js/components/full-project-search-ui.tsx b/services/web/modules/full-project-search/frontend/js/components/full-project-search-ui.tsx index b601ad634f..005c1c2292 100644 --- a/services/web/modules/full-project-search/frontend/js/components/full-project-search-ui.tsx +++ b/services/web/modules/full-project-search/frontend/js/components/full-project-search-ui.tsx @@ -20,7 +20,7 @@ import { debugConsole } from '@/utils/debugging' import useEventListener from '@/shared/hooks/use-event-listener' import { Col, Form, Row } from 'react-bootstrap' import OLFormControl from '@/shared/components/ol/ol-form-control' -import Button from '@/shared/components/button/button' +import OLButton from '@/shared/components/ol/ol-button' import Notification from '@/shared/components/notification' import '../../stylesheets/full-project-search.scss' import { userStyles } from '@/shared/utils/styles' @@ -217,9 +217,9 @@ const FullProjectSearchUI: FC = () => { />     - + diff --git a/services/web/test/frontend/shared/components/notification.test.tsx b/services/web/test/frontend/shared/components/notification.test.tsx index fbe5c04fc2..604e725270 100644 --- a/services/web/test/frontend/shared/components/notification.test.tsx +++ b/services/web/test/frontend/shared/components/notification.test.tsx @@ -1,6 +1,6 @@ import { expect } from 'chai' import { screen, render } from '@testing-library/react' -import Notification from '../../../../frontend/js/shared/components/notification' +import Notification from '@/shared/components/notification' import * as eventTracking from '@/infrastructure/event-tracking' import sinon from 'sinon'