import { useEffect } from 'react' import ShareProjectModal from '../js/features/share-project-modal/components/share-project-modal' import useFetchMock from './hooks/use-fetch-mock' import { useScope } from './hooks/use-scope' import { ScopeDecorator } from './decorators/scope' import { contacts } from './fixtures/contacts' import { project } from './fixtures/project' export const LinkSharingOff = args => { useFetchMock(setupFetchMock) useScope({ project: { ...args.project, publicAccesLevel: 'private', }, }) return } export const LinkSharingOn = args => { useFetchMock(setupFetchMock) useScope({ project: { ...args.project, publicAccesLevel: 'tokenBased', }, }) return } export const LinkSharingLoading = args => { useFetchMock(setupFetchMock) useScope({ project: { ...args.project, publicAccesLevel: 'tokenBased', tokens: undefined, }, }) return } export const NonProjectOwnerLinkSharingOff = args => { useScope({ project: { ...args.project, publicAccesLevel: 'private', }, }) return } export const NonProjectOwnerLinkSharingOn = args => { useScope({ project: { ...args.project, publicAccesLevel: 'tokenBased', }, }) return } export const RestrictedTokenMember = args => { // Override isRestrictedTokenMember to be true, then revert it back to the // original value on unmount // Currently this is necessary because the context value is set from window, // however in the future we should change this to set via props useEffect(() => { const originalIsRestrictedTokenMember = window.isRestrictedTokenMember window.isRestrictedTokenMember = true return () => { window.isRestrictedTokenMember = originalIsRestrictedTokenMember } }) useScope({ project: { ...args.project, publicAccesLevel: 'tokenBased', }, }) return } export const LegacyLinkSharingReadAndWrite = args => { useFetchMock(setupFetchMock) useScope({ project: { ...args.project, publicAccesLevel: 'readAndWrite', }, }) return } export const LegacyLinkSharingReadOnly = args => { useFetchMock(setupFetchMock) useScope({ project: { ...args.project, publicAccesLevel: 'readOnly', }, }) return } export const LimitedCollaborators = args => { useFetchMock(setupFetchMock) useScope({ project: { ...args.project, features: { ...args.project.features, collaborators: 3, }, }, }) return } export default { title: 'Editor / Modals / Share Project', component: ShareProjectModal, args: { show: true, animation: false, user: {}, project: { ...project, owner: { ...project.owner, _id: window.user.id, }, }, }, argTypes: { handleHide: { action: 'hide' }, }, decorators: [ScopeDecorator], } function setupFetchMock(fetchMock) { const delay = 1000 fetchMock // list contacts .get('express:/user/contacts', { contacts }, { delay }) // change privacy setting .post('express:/project/:projectId/settings/admin', 200, { delay }) // update project member (e.g. set privilege level) .put('express:/project/:projectId/users/:userId', 200, { delay }) // remove project member .delete('express:/project/:projectId/users/:userId', 200, { delay }) // transfer ownership .post('express:/project/:projectId/transfer-ownership', 200, { delay, }) // send invite .post('express:/project/:projectId/invite', 200, { delay }) // delete invite .delete('express:/project/:projectId/invite/:inviteId', 204, { delay, }) // resend invite .post('express:/project/:projectId/invite/:inviteId/resend', 200, { delay, }) // send analytics event .post('express:/event/:key', 200) }