overleaf/services/web/frontend/stories/settings/linking.stories.jsx
Antoine Clausse 4a8b79080b [storybook] Update Storybook and add a control for BS3/BS5 (#20948)
* [storybook] Update Storybook to version 8.3.5

* [storybook] Run storybook with `--no-open`. Fixes xdg-utils issue

* [storybook] Create decorator for BS3/BS5

* [storybook] Add `bsVersionDecorator` to stories

* [storybook] Fix bugs in stories

* [storybook] Fixup `useMeta` type. Use `DeepPartial`

* [storybook] Fix types

GitOrigin-RevId: 48c0f0fefb1ab2d4863ab59051b900b1908a613c
2024-10-14 11:07:40 +00:00

100 lines
2.5 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import useFetchMock from '../hooks/use-fetch-mock'
import LinkingSection from '../../js/features/settings/components/linking-section'
import { setDefaultMeta, defaultSetupMocks } from './helpers/linking'
import { UserProvider } from '../../js/shared/context/user-context'
import { SSOProvider } from '../../js/features/settings/context/sso-context'
import { ScopeDecorator } from '../decorators/scope'
import { useEffect } from 'react'
import { useMeta } from '../hooks/use-meta'
import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
const MOCK_DELAY = 1000
export const Section = args => {
useFetchMock(defaultSetupMocks)
setDefaultMeta()
return (
<UserProvider>
<SSOProvider>
<LinkingSection {...args} />
</SSOProvider>
</UserProvider>
)
}
export const SectionAllUnlinked = args => {
useFetchMock(defaultSetupMocks)
useMeta({
'ol-thirdPartyIds': {},
'ol-user': {
features: { github: true, dropbox: true, mendeley: true, zotero: true },
refProviders: {
mendeley: false,
zotero: false,
},
},
'ol-github': { enabled: false },
'ol-dropbox': { registered: false },
})
useEffect(() => {
setDefaultMeta()
}, [])
return (
<UserProvider>
<SSOProvider>
<LinkingSection {...args} />
</SSOProvider>
</UserProvider>
)
}
export const SectionSSOErrors = args => {
useFetchMock(fetchMock =>
fetchMock.post('/user/oauth-unlink', 500, { delay: MOCK_DELAY })
)
setDefaultMeta()
window.metaAttributesCache.set('ol-hideLinkingWidgets', true)
window.metaAttributesCache.set(
'ol-ssoErrorMessage',
'Account already linked to another Overleaf user'
)
return (
<UserProvider>
<SSOProvider>
<LinkingSection {...args} />
</SSOProvider>
</UserProvider>
)
}
export const SectionProjetSyncSuccess = args => {
useFetchMock(defaultSetupMocks)
setDefaultMeta()
window.metaAttributesCache.set('ol-github', { enabled: true })
window.metaAttributesCache.set(
'ol-projectSyncSuccessMessage',
'Thanks, weve successfully linked your GitHub account to Overleaf. You can now export your Overleaf projects to GitHub, or import projects from your GitHub repositories.'
)
return (
<UserProvider>
<SSOProvider>
<LinkingSection {...args} />
</SSOProvider>
</UserProvider>
)
}
export default {
title: 'Account Settings / Linking',
component: LinkingSection,
decorators: [ScopeDecorator],
argTypes: {
...bsVersionDecorator.argTypes,
},
}