Merge pull request #23220 from overleaf/td-bs5-paused-plan-remove-bs3

Remove Bootstrap 3 styles from paused plan widget

GitOrigin-RevId: 1f04ab5c356f60330a9c5266b81de114dd81f943

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 (
     <>
-      <span
-        className={classnames(
-          'current-plan-label',
-          bsVersion({ bs5: 'd-md-none', bs3: 'visible-xs' })
-        )}
-      >
-        {currentPlanLabel}
-      </span>
+      <span className="current-plan-label d-md-none">{currentPlanLabel}</span>
       <OLTooltip
         description={t('click_to_unpause')}
         id="individual-plan"
@@ -38,18 +28,10 @@ function PausedPlan({ subscriptionPageUrl }: PausedPlanProps) {
       >
         <a
           href={subscriptionPageUrl}
-          className={classnames(
-            'current-plan-label',
-            bsVersion({ bs5: 'd-none d-md-inline-block', bs3: 'hidden-xs' })
-          )}
+          className="current-plan-label d-none d-md-inline-block"
         >
           {currentPlanLabel}&nbsp;
-          <BootstrapVersionSwitcher
-            bs3={<span className="info-badge" />}
-            bs5={
-              <MaterialIcon type="info" className="current-plan-label-icon" />
-            }
-          />
+          <MaterialIcon type="info" className="current-plan-label-icon" />
         </a>
       </OLTooltip>
     </>

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,
   },
 }

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,
   },
 }

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 {
       </div>
     ),
   ],
-  argTypes: {
-    ...bsVersionDecorator.argTypes,
+  parameters: {
+    bootstrap5: true,
   },
 }

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 <CurrentPlanWidget {...args} />
 }
 
+export const PausedPlan = (args: any) => {
+  window.metaAttributesCache.set('ol-usersBestSubscription', {
+    type: 'individual',
+    plan: {
+      name: 'Individual',
+    },
+    subscription: {
+      name: 'Example Name',
+      recurlyStatus: {
+        state: 'paused',
+      },
+    },
+  })
+
+  return <CurrentPlanWidget {...args} />
+}
+
 export default {
   title: 'Project List / Current Plan Widget',
   component: CurrentPlanWidget,
-  argTypes: {
-    ...bsVersionDecorator.argTypes,
+  parameters: {
+    bootstrap5: true,
   },
 }

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 <INRBanner />
@@ -8,7 +7,7 @@ export const Default = () => {
 export default {
   title: 'Project List / INR Banner',
   component: INRBanner,
-  argTypes: {
-    ...bsVersionDecorator.argTypes,
+  parameters: {
+    bootstrap5: true,
   },
 }

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 (
     <ProjectListProvider>
-      <NewProjectButton id="new-project-button-story" />
+      <SplitTestProvider>
+        <NewProjectButton id="new-project-button-story" />
+      </SplitTestProvider>
     </ProjectListProvider>
   )
 }
@@ -92,7 +94,9 @@ export const Error = () => {
 
   return (
     <ProjectListProvider>
-      <NewProjectButton id="new-project-button-story" />
+      <SplitTestProvider>
+        <NewProjectButton id="new-project-button-story" />
+      </SplitTestProvider>
     </ProjectListProvider>
   )
 }
@@ -100,7 +104,7 @@ export const Error = () => {
 export default {
   title: 'Project List / New Project Button',
   component: NewProjectButton,
-  argTypes: {
-    ...bsVersionDecorator.argTypes,
+  parameters: {
+    bootstrap5: true,
   },
 }

services/web/frontend/stories/project-list/notifications-new.stories.tsx

@@ -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 (
-    <ProjectListProvider>
-      <UserNotifications {...args} />
-    </ProjectListProvider>
-  )
-}
-
-export const ProjectInviteNetworkError = (args: any) => {
-  useFetchMock(errorsMocks)
-  setCommonMeta({
-    templateKey: 'notification_project_invite',
-    messageOpts: {
-      projectId: '123',
-      projectName: 'Abc Project',
-      userName: 'fakeUser',
-      token: 'abcdef',
-    },
-  })
-  return (
-    <ProjectListProvider>
-      <UserNotifications {...args} />
-    </ProjectListProvider>
-  )
-}
-
-export const Wfh2020UpgradeOffer = (args: any) => {
-  useFetchMock(commonSetupMocks)
-  setCommonMeta({
-    _id: 1,
-    templateKey: 'wfh_2020_upgrade_offer',
-  })
-  return (
-    <ProjectListProvider>
-      <UserNotifications {...args} />
-    </ProjectListProvider>
-  )
-}
-
-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 (
-    <ProjectListProvider>
-      <UserNotifications {...args} />
-    </ProjectListProvider>
-  )
-}
-
-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 (
-    <ProjectListProvider>
-      <UserNotifications {...args} />
-    </ProjectListProvider>
-  )
-}
-
-export const TpdsFileLimit = (args: any) => {
-  useFetchMock(commonSetupMocks)
-  setCommonMeta({
-    _id: 1,
-    templateKey: 'notification_tpds_file_limit',
-    messageOpts: {
-      projectName: 'Abc Project',
-    },
-  })
-  return (
-    <ProjectListProvider>
-      <UserNotifications {...args} />
-    </ProjectListProvider>
-  )
-}
-
-export const DropBoxDuplicateProjectNames = (args: any) => {
-  useFetchMock(commonSetupMocks)
-  setCommonMeta({
-    _id: 1,
-    templateKey: 'notification_dropbox_duplicate_project_names',
-    messageOpts: {
-      projectName: 'Abc Project',
-    },
-  })
-  return (
-    <ProjectListProvider>
-      <UserNotifications {...args} />
-    </ProjectListProvider>
-  )
-}
-
-export const DropBoxUnlinkedDueToLapsedReconfirmation = (args: any) => {
-  useFetchMock(commonSetupMocks)
-  setCommonMeta({
-    _id: 1,
-    templateKey: 'notification_dropbox_unlinked_due_to_lapsed_reconfirmation',
-  })
-  return (
-    <ProjectListProvider>
-      <UserNotifications {...args} />
-    </ProjectListProvider>
-  )
-}
-
-export const NotificationGroupInvitation = (args: any) => {
-  useFetchMock(commonSetupMocks)
-  setCommonMeta({
-    _id: 1,
-    templateKey: 'notification_group_invitation',
-    messageOpts: {
-      inviterName: 'John Doe',
-    },
-  })
-  return (
-    <ProjectListProvider>
-      <UserNotifications {...args} />
-    </ProjectListProvider>
-  )
-}
-
-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 (
-    <ProjectListProvider>
-      <UserNotifications {...args} />
-    </ProjectListProvider>
-  )
-}
-
-export const NonSpecificMessage = (args: any) => {
-  useFetchMock(commonSetupMocks)
-  setCommonMeta({ _id: 1, html: 'Non specific message' })
-  return (
-    <ProjectListProvider>
-      <UserNotifications {...args} />
-    </ProjectListProvider>
-  )
-}
-
-export const InstitutionSsoAvailable = (args: any) => {
-  useFetchMock(institutionSetupMocks)
-  setInstitutionMeta({
-    _id: 1,
-    templateKey: 'notification_institution_sso_available',
-  })
-  return (
-    <ProjectListProvider>
-      <UserNotifications {...args} />
-    </ProjectListProvider>
-  )
-}
-
-export const InstitutionSsoLinked = (args: any) => {
-  useFetchMock(institutionSetupMocks)
-  setInstitutionMeta({
-    _id: 1,
-    templateKey: 'notification_institution_sso_linked',
-  })
-  return (
-    <ProjectListProvider>
-      <UserNotifications {...args} />
-    </ProjectListProvider>
-  )
-}
-
-export const InstitutionSsoNonCanonical = (args: any) => {
-  useFetchMock(institutionSetupMocks)
-  setInstitutionMeta({
-    _id: 1,
-    templateKey: 'notification_institution_sso_non_canonical',
-  })
-  return (
-    <ProjectListProvider>
-      <UserNotifications {...args} />
-    </ProjectListProvider>
-  )
-}
-
-export const InstitutionSsoAlreadyRegistered = (args: any) => {
-  useFetchMock(institutionSetupMocks)
-  setInstitutionMeta({
-    _id: 1,
-    templateKey: 'notification_institution_sso_already_registered',
-  })
-  return (
-    <ProjectListProvider>
-      <UserNotifications {...args} />
-    </ProjectListProvider>
-  )
-}
-
-export const InstitutionSsoError = (args: any) => {
-  useFetchMock(institutionSetupMocks)
-  setInstitutionMeta({
-    templateKey: 'notification_institution_sso_error',
-    error: {
-      message: 'message',
-      translatedMessage: 'Translated Message',
-      tryAgain: true,
-    },
-  })
-  return (
-    <ProjectListProvider>
-      <UserNotifications {...args} />
-    </ProjectListProvider>
-  )
-}
-
-export const ResendConfirmationEmail = (args: any) => {
-  useFetchMock(reconfirmationSetupMocks)
-  setReconfirmationMeta()
-  return (
-    <ProjectListProvider>
-      <UserNotifications {...args} />
-    </ProjectListProvider>
-  )
-}
-
-export const ResendConfirmationEmailNetworkError = (args: any) => {
-  useFetchMock(errorsMocks)
-  setReconfirmationMeta()
-  return (
-    <ProjectListProvider>
-      <UserNotifications {...args} />
-    </ProjectListProvider>
-  )
-}
-
-export const ReconfirmAffiliation = (args: any) => {
-  useFetchMock(reconfirmAffiliationSetupMocks)
-  setReconfirmAffiliationMeta()
-  window.metaAttributesCache.set('ol-allInReconfirmNotificationPeriods', [
-    fakeReconfirmationUsersData,
-  ])
-  return (
-    <ProjectListProvider>
-      <UserNotifications {...args} />
-    </ProjectListProvider>
-  )
-}
-
-export const ReconfirmAffiliationNetworkError = (args: any) => {
-  useFetchMock(errorsMocks)
-  setReconfirmAffiliationMeta()
-  window.metaAttributesCache.set('ol-allInReconfirmNotificationPeriods', [
-    fakeReconfirmationUsersData,
-  ])
-  return (
-    <ProjectListProvider>
-      <UserNotifications {...args} />
-    </ProjectListProvider>
-  )
-}
-
-export const ReconfirmedAffiliationSuccess = (args: any) => {
-  useFetchMock(reconfirmAffiliationSetupMocks)
-  setReconfirmAffiliationMeta()
-  window.metaAttributesCache.set('ol-userEmails', [fakeReconfirmationUsersData])
-  return (
-    <ProjectListProvider>
-      <UserNotifications {...args} />
-    </ProjectListProvider>
-  )
-}
-
-export default {
-  title: 'Project List / Notifications New Style',
-  component: UserNotifications,
-  argTypes: {
-    ...bsVersionDecorator.argTypes,
-  },
-}

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,
   },
 }

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 {
       </div>
     ),
   ],
-  argTypes: {
-    ...bsVersionDecorator.argTypes,
+  parameters: {
+    bootstrap5: true,
   },
 }

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,
   },
 }

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,
   },
 }

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,
   },
 }