From 5c49f3b8629be98d83a25dc7c8cf3c3c6b53f68a Mon Sep 17 00:00:00 2001 From: Tim Down <158919+timdown@users.noreply.github.com> Date: Fri, 7 Feb 2025 10:10:01 +0000 Subject: [PATCH] Merge pull request #23220 from overleaf/td-bs5-paused-plan-remove-bs3 Remove Bootstrap 3 styles from paused plan widget GitOrigin-RevId: 1f04ab5c356f60330a9c5266b81de114dd81f943 --- .../current-plan-widget/paused-plan.tsx | 24 +- .../project-list/add-affiliation.stories.tsx | 5 +- .../project-list/color-picker.stories.tsx | 5 +- ...mpile-and-download-project-pdf.stories.tsx | 5 +- .../current-plan-widget.stories.tsx | 22 +- .../project-list/inr-banner.stories.tsx | 5 +- .../new-project-button.stories.tsx | 18 +- .../notifications-new.stories.tsx | 323 ------------------ .../project-list/notifications.stories.tsx | 5 +- .../project-list/project-list.stories.tsx | 5 +- .../project-list/project-search.stories.tsx | 5 +- .../project-list/survey-widget.stories.tsx | 5 +- .../project-list/system-messages.stories.tsx | 5 +- 13 files changed, 51 insertions(+), 381 deletions(-) delete mode 100644 services/web/frontend/stories/project-list/notifications-new.stories.tsx diff --git a/services/web/frontend/js/features/project-list/components/current-plan-widget/paused-plan.tsx b/services/web/frontend/js/features/project-list/components/current-plan-widget/paused-plan.tsx index 20b5e7abdb..a501731b18 100644 --- a/services/web/frontend/js/features/project-list/components/current-plan-widget/paused-plan.tsx +++ b/services/web/frontend/js/features/project-list/components/current-plan-widget/paused-plan.tsx @@ -1,9 +1,6 @@ import { Trans, useTranslation } from 'react-i18next' import OLTooltip from '@/features/ui/components/ol/ol-tooltip' -import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher' import MaterialIcon from '@/shared/components/material-icon' -import { bsVersion } from '@/features/utils/bootstrap-5' -import classnames from 'classnames' type PausedPlanProps = { subscriptionPageUrl: string @@ -23,14 +20,7 @@ function PausedPlan({ subscriptionPageUrl }: PausedPlanProps) { return ( <> - - {currentPlanLabel} - + {currentPlanLabel} {currentPlanLabel}  - } - bs5={ - - } - /> + diff --git a/services/web/frontend/stories/project-list/add-affiliation.stories.tsx b/services/web/frontend/stories/project-list/add-affiliation.stories.tsx index ed94b126f6..d1732bc5d9 100644 --- a/services/web/frontend/stories/project-list/add-affiliation.stories.tsx +++ b/services/web/frontend/stories/project-list/add-affiliation.stories.tsx @@ -3,7 +3,6 @@ import { ProjectListProvider } from '../../js/features/project-list/context/proj import useFetchMock from '../hooks/use-fetch-mock' import { projectsData } from '../../../test/frontend/features/project-list/fixtures/projects-data' import getMeta from '@/utils/meta' -import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher' export const Add = (args: any) => { Object.assign(getMeta('ol-ExposedSettings'), { @@ -27,7 +26,7 @@ export const Add = (args: any) => { export default { title: 'Project List / Affiliation', component: AddAffiliation, - argTypes: { - ...bsVersionDecorator.argTypes, + parameters: { + bootstrap5: true, }, } diff --git a/services/web/frontend/stories/project-list/color-picker.stories.tsx b/services/web/frontend/stories/project-list/color-picker.stories.tsx index 12ffc697c1..ade57f772a 100644 --- a/services/web/frontend/stories/project-list/color-picker.stories.tsx +++ b/services/web/frontend/stories/project-list/color-picker.stories.tsx @@ -1,6 +1,5 @@ import { ColorPicker } from '../../js/features/project-list/components/color-picker/color-picker' import { ColorPickerProvider } from '../../js/features/project-list/context/color-picker-context' -import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher' export const Select = (args: any) => { return ( @@ -13,7 +12,7 @@ export const Select = (args: any) => { export default { title: 'Project List / Color Picker', component: ColorPicker, - argTypes: { - ...bsVersionDecorator.argTypes, + parameters: { + bootstrap5: true, }, } diff --git a/services/web/frontend/stories/project-list/compile-and-download-project-pdf.stories.tsx b/services/web/frontend/stories/project-list/compile-and-download-project-pdf.stories.tsx index 2c1d4d18c9..422a494649 100644 --- a/services/web/frontend/stories/project-list/compile-and-download-project-pdf.stories.tsx +++ b/services/web/frontend/stories/project-list/compile-and-download-project-pdf.stories.tsx @@ -2,7 +2,6 @@ import ProjectListTable from '../../js/features/project-list/components/table/pr import { ProjectListProvider } from '../../js/features/project-list/context/project-list-context' import useFetchMock from '../hooks/use-fetch-mock' import { projectsData } from '../../../test/frontend/features/project-list/fixtures/projects-data' -import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher' export const Successful = (args: any) => { window.metaAttributesCache.set('ol-user_id', '624333f147cfd8002622a1d3') @@ -63,7 +62,7 @@ export default { ), ], - argTypes: { - ...bsVersionDecorator.argTypes, + parameters: { + bootstrap5: true, }, } diff --git a/services/web/frontend/stories/project-list/current-plan-widget.stories.tsx b/services/web/frontend/stories/project-list/current-plan-widget.stories.tsx index e182a60854..3827853a67 100644 --- a/services/web/frontend/stories/project-list/current-plan-widget.stories.tsx +++ b/services/web/frontend/stories/project-list/current-plan-widget.stories.tsx @@ -1,5 +1,4 @@ import CurrentPlanWidget from '../../js/features/project-list/components/current-plan-widget/current-plan-widget' -import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher' export const FreePlan = (args: any) => { window.metaAttributesCache.set('ol-usersBestSubscription', { @@ -53,10 +52,27 @@ export const PaidPlanActive = (args: any) => { return } +export const PausedPlan = (args: any) => { + window.metaAttributesCache.set('ol-usersBestSubscription', { + type: 'individual', + plan: { + name: 'Individual', + }, + subscription: { + name: 'Example Name', + recurlyStatus: { + state: 'paused', + }, + }, + }) + + return +} + export default { title: 'Project List / Current Plan Widget', component: CurrentPlanWidget, - argTypes: { - ...bsVersionDecorator.argTypes, + parameters: { + bootstrap5: true, }, } diff --git a/services/web/frontend/stories/project-list/inr-banner.stories.tsx b/services/web/frontend/stories/project-list/inr-banner.stories.tsx index 945e3e8096..4e970afae4 100644 --- a/services/web/frontend/stories/project-list/inr-banner.stories.tsx +++ b/services/web/frontend/stories/project-list/inr-banner.stories.tsx @@ -1,5 +1,4 @@ import INRBanner from '@/features/project-list/components/notifications/ads/inr-banner' -import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher' export const Default = () => { return @@ -8,7 +7,7 @@ export const Default = () => { export default { title: 'Project List / INR Banner', component: INRBanner, - argTypes: { - ...bsVersionDecorator.argTypes, + parameters: { + bootstrap5: true, }, } diff --git a/services/web/frontend/stories/project-list/new-project-button.stories.tsx b/services/web/frontend/stories/project-list/new-project-button.stories.tsx index 86eb07f8d8..6338f5d969 100644 --- a/services/web/frontend/stories/project-list/new-project-button.stories.tsx +++ b/services/web/frontend/stories/project-list/new-project-button.stories.tsx @@ -1,8 +1,8 @@ -import NewProjectButton from '../../js/features/project-list/components/new-project-button' -import { ProjectListProvider } from '../../js/features/project-list/context/project-list-context' +import NewProjectButton from '@/features/project-list/components/new-project-button' +import { ProjectListProvider } from '@/features/project-list/context/project-list-context' import useFetchMock from '../hooks/use-fetch-mock' import getMeta from '@/utils/meta' -import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher' +import { SplitTestProvider } from '@/shared/context/split-test-context' const templateLinks = [ { @@ -67,7 +67,9 @@ export const Success = () => { return ( - + + + ) } @@ -92,7 +94,9 @@ export const Error = () => { return ( - + + + ) } @@ -100,7 +104,7 @@ export const Error = () => { export default { title: 'Project List / New Project Button', component: NewProjectButton, - argTypes: { - ...bsVersionDecorator.argTypes, + parameters: { + bootstrap5: true, }, } diff --git a/services/web/frontend/stories/project-list/notifications-new.stories.tsx b/services/web/frontend/stories/project-list/notifications-new.stories.tsx deleted file mode 100644 index 3b80bc1320..0000000000 --- a/services/web/frontend/stories/project-list/notifications-new.stories.tsx +++ /dev/null @@ -1,323 +0,0 @@ -import UserNotifications from '../../js/features/project-list/components/notifications/user-notifications' -import { ProjectListProvider } from '../../js/features/project-list/context/project-list-context' -import useFetchMock from '../hooks/use-fetch-mock' -import { - commonSetupMocks, - errorsMocks, - fakeReconfirmationUsersData, - institutionSetupMocks, - reconfirmAffiliationSetupMocks, - reconfirmationSetupMocks, - setCommonMeta, - setInstitutionMeta, - setReconfirmAffiliationMeta, - setReconfirmationMeta, -} from './helpers/emails' -import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher' - -export const ProjectInvite = (args: any) => { - useFetchMock(commonSetupMocks) - setCommonMeta({ - templateKey: 'notification_project_invite', - messageOpts: { - projectId: '123', - projectName: 'Abc Project', - userName: 'fakeUser', - token: 'abcdef', - }, - }) - return ( - - - - ) -} - -export const ProjectInviteNetworkError = (args: any) => { - useFetchMock(errorsMocks) - setCommonMeta({ - templateKey: 'notification_project_invite', - messageOpts: { - projectId: '123', - projectName: 'Abc Project', - userName: 'fakeUser', - token: 'abcdef', - }, - }) - return ( - - - - ) -} - -export const Wfh2020UpgradeOffer = (args: any) => { - useFetchMock(commonSetupMocks) - setCommonMeta({ - _id: 1, - templateKey: 'wfh_2020_upgrade_offer', - }) - return ( - - - - ) -} - -export const IPMatchedAffiliationSsoEnabled = (args: any) => { - useFetchMock(commonSetupMocks) - setCommonMeta({ - _id: 1, - templateKey: 'notification_ip_matched_affiliation', - messageOpts: { - university_name: 'Abc University', - institutionId: '456', - ssoEnabled: true, - }, - }) - return ( - - - - ) -} - -export const IPMatchedAffiliationSsoDisabled = (args: any) => { - useFetchMock(commonSetupMocks) - setCommonMeta({ - _id: 1, - templateKey: 'notification_ip_matched_affiliation', - messageOpts: { - university_name: 'Abc University', - institutionId: '456', - ssoEnabled: false, - }, - }) - return ( - - - - ) -} - -export const TpdsFileLimit = (args: any) => { - useFetchMock(commonSetupMocks) - setCommonMeta({ - _id: 1, - templateKey: 'notification_tpds_file_limit', - messageOpts: { - projectName: 'Abc Project', - }, - }) - return ( - - - - ) -} - -export const DropBoxDuplicateProjectNames = (args: any) => { - useFetchMock(commonSetupMocks) - setCommonMeta({ - _id: 1, - templateKey: 'notification_dropbox_duplicate_project_names', - messageOpts: { - projectName: 'Abc Project', - }, - }) - return ( - - - - ) -} - -export const DropBoxUnlinkedDueToLapsedReconfirmation = (args: any) => { - useFetchMock(commonSetupMocks) - setCommonMeta({ - _id: 1, - templateKey: 'notification_dropbox_unlinked_due_to_lapsed_reconfirmation', - }) - return ( - - - - ) -} - -export const NotificationGroupInvitation = (args: any) => { - useFetchMock(commonSetupMocks) - setCommonMeta({ - _id: 1, - templateKey: 'notification_group_invitation', - messageOpts: { - inviterName: 'John Doe', - }, - }) - return ( - - - - ) -} - -export const NotificationGroupInvitationCancelSubscription = (args: any) => { - useFetchMock(commonSetupMocks) - setCommonMeta({ - _id: 1, - templateKey: 'notification_group_invitation', - messageOpts: { - inviterName: 'John Doe', - }, - }) - window.metaAttributesCache.set('ol-hasIndividualRecurlySubscription', true) - return ( - - - - ) -} - -export const NonSpecificMessage = (args: any) => { - useFetchMock(commonSetupMocks) - setCommonMeta({ _id: 1, html: 'Non specific message' }) - return ( - - - - ) -} - -export const InstitutionSsoAvailable = (args: any) => { - useFetchMock(institutionSetupMocks) - setInstitutionMeta({ - _id: 1, - templateKey: 'notification_institution_sso_available', - }) - return ( - - - - ) -} - -export const InstitutionSsoLinked = (args: any) => { - useFetchMock(institutionSetupMocks) - setInstitutionMeta({ - _id: 1, - templateKey: 'notification_institution_sso_linked', - }) - return ( - - - - ) -} - -export const InstitutionSsoNonCanonical = (args: any) => { - useFetchMock(institutionSetupMocks) - setInstitutionMeta({ - _id: 1, - templateKey: 'notification_institution_sso_non_canonical', - }) - return ( - - - - ) -} - -export const InstitutionSsoAlreadyRegistered = (args: any) => { - useFetchMock(institutionSetupMocks) - setInstitutionMeta({ - _id: 1, - templateKey: 'notification_institution_sso_already_registered', - }) - return ( - - - - ) -} - -export const InstitutionSsoError = (args: any) => { - useFetchMock(institutionSetupMocks) - setInstitutionMeta({ - templateKey: 'notification_institution_sso_error', - error: { - message: 'message', - translatedMessage: 'Translated Message', - tryAgain: true, - }, - }) - return ( - - - - ) -} - -export const ResendConfirmationEmail = (args: any) => { - useFetchMock(reconfirmationSetupMocks) - setReconfirmationMeta() - return ( - - - - ) -} - -export const ResendConfirmationEmailNetworkError = (args: any) => { - useFetchMock(errorsMocks) - setReconfirmationMeta() - return ( - - - - ) -} - -export const ReconfirmAffiliation = (args: any) => { - useFetchMock(reconfirmAffiliationSetupMocks) - setReconfirmAffiliationMeta() - window.metaAttributesCache.set('ol-allInReconfirmNotificationPeriods', [ - fakeReconfirmationUsersData, - ]) - return ( - - - - ) -} - -export const ReconfirmAffiliationNetworkError = (args: any) => { - useFetchMock(errorsMocks) - setReconfirmAffiliationMeta() - window.metaAttributesCache.set('ol-allInReconfirmNotificationPeriods', [ - fakeReconfirmationUsersData, - ]) - return ( - - - - ) -} - -export const ReconfirmedAffiliationSuccess = (args: any) => { - useFetchMock(reconfirmAffiliationSetupMocks) - setReconfirmAffiliationMeta() - window.metaAttributesCache.set('ol-userEmails', [fakeReconfirmationUsersData]) - return ( - - - - ) -} - -export default { - title: 'Project List / Notifications New Style', - component: UserNotifications, - argTypes: { - ...bsVersionDecorator.argTypes, - }, -} diff --git a/services/web/frontend/stories/project-list/notifications.stories.tsx b/services/web/frontend/stories/project-list/notifications.stories.tsx index e62eb69e3e..773dcebe5d 100644 --- a/services/web/frontend/stories/project-list/notifications.stories.tsx +++ b/services/web/frontend/stories/project-list/notifications.stories.tsx @@ -13,7 +13,6 @@ import { setReconfirmAffiliationMeta, setReconfirmationMeta, } from './helpers/emails' -import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher' import { useMeta } from '../hooks/use-meta' export const ProjectInvite = (args: any) => { @@ -344,7 +343,7 @@ export const ReconfirmedAffiliationSuccess = (args: any) => { export default { title: 'Project List / Notifications', component: UserNotifications, - argTypes: { - ...bsVersionDecorator.argTypes, + parameters: { + bootstrap5: true, }, } diff --git a/services/web/frontend/stories/project-list/project-list.stories.tsx b/services/web/frontend/stories/project-list/project-list.stories.tsx index 53162b5ec7..066092c835 100644 --- a/services/web/frontend/stories/project-list/project-list.stories.tsx +++ b/services/web/frontend/stories/project-list/project-list.stories.tsx @@ -8,7 +8,6 @@ import { import { useMeta } from '../hooks/use-meta' import { tags } from '../../../test/frontend/features/project-list/fixtures/tags-data' import { v4 as uuid } from 'uuid' -import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher' const MOCK_DELAY = 500 @@ -58,7 +57,7 @@ export default { ), ], - argTypes: { - ...bsVersionDecorator.argTypes, + parameters: { + bootstrap5: true, }, } diff --git a/services/web/frontend/stories/project-list/project-search.stories.tsx b/services/web/frontend/stories/project-list/project-search.stories.tsx index 7f65ff3814..bb727cfb13 100644 --- a/services/web/frontend/stories/project-list/project-search.stories.tsx +++ b/services/web/frontend/stories/project-list/project-search.stories.tsx @@ -2,7 +2,6 @@ import SearchForm from '../../js/features/project-list/components/search-form' import { ProjectListProvider } from '../../js/features/project-list/context/project-list-context' import useFetchMock from '../hooks/use-fetch-mock' import { projectsData } from '../../../test/frontend/features/project-list/fixtures/projects-data' -import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher' export const Search = (args: any) => { useFetchMock(fetchMock => { @@ -25,7 +24,7 @@ export default { args: { inputValue: '', }, - argTypes: { - ...bsVersionDecorator.argTypes, + parameters: { + bootstrap5: true, }, } diff --git a/services/web/frontend/stories/project-list/survey-widget.stories.tsx b/services/web/frontend/stories/project-list/survey-widget.stories.tsx index de00912efe..e386bd1121 100644 --- a/services/web/frontend/stories/project-list/survey-widget.stories.tsx +++ b/services/web/frontend/stories/project-list/survey-widget.stories.tsx @@ -1,5 +1,4 @@ import SurveyWidget from '../../js/features/project-list/components/survey-widget' -import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher' export const Survey = (args: any) => { localStorage.clear() @@ -29,7 +28,7 @@ export const EmptySurvey = (args: any) => { export default { title: 'Project List / Survey Widget', component: SurveyWidget, - argTypes: { - ...bsVersionDecorator.argTypes, + parameters: { + bootstrap5: true, }, } diff --git a/services/web/frontend/stories/project-list/system-messages.stories.tsx b/services/web/frontend/stories/project-list/system-messages.stories.tsx index b5415a465e..e76330788f 100644 --- a/services/web/frontend/stories/project-list/system-messages.stories.tsx +++ b/services/web/frontend/stories/project-list/system-messages.stories.tsx @@ -1,7 +1,6 @@ import SystemMessages from '@/shared/components/system-messages' import useFetchMock from '../hooks/use-fetch-mock' import { FetchMockStatic } from 'fetch-mock' -import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher' export const SystemMessage = (args: any) => { useFetchMock((fetchMock: FetchMockStatic) => { @@ -40,7 +39,7 @@ export const TranslationMessage = (args: any) => { export default { title: 'Project List / System Messages', component: SystemMessages, - argTypes: { - ...bsVersionDecorator.argTypes, + parameters: { + bootstrap5: true, }, }