2023-05-17 04:59:51 -04:00
|
|
|
import { useState, ElementType } from 'react'
|
2022-04-25 07:04:44 -04:00
|
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
import importOverleafModules from '../../../../macros/import-overleaf-module.macro'
|
|
|
|
import { useSSOContext, SSOSubscription } from '../context/sso-context'
|
|
|
|
import { SSOLinkingWidget } from './linking/sso-widget'
|
2022-04-27 12:13:42 -04:00
|
|
|
import getMeta from '../../../utils/meta'
|
2023-10-06 04:15:16 -04:00
|
|
|
import { useBroadcastUser } from '@/shared/hooks/user-channel/use-broadcast-user'
|
2024-04-30 10:58:34 -04:00
|
|
|
import { useFeatureFlag } from '@/shared/context/split-test-context'
|
2024-05-15 10:31:00 -04:00
|
|
|
import OLNotification from '@/features/ui/components/ol/ol-notification'
|
2022-04-25 07:04:44 -04:00
|
|
|
|
|
|
|
function LinkingSection() {
|
2023-10-06 04:15:16 -04:00
|
|
|
useBroadcastUser()
|
2022-04-25 07:04:44 -04:00
|
|
|
const { t } = useTranslation()
|
|
|
|
const { subscriptions } = useSSOContext()
|
2022-05-16 04:02:17 -04:00
|
|
|
const ssoErrorMessage = getMeta('ol-ssoErrorMessage') as string
|
2022-05-16 04:02:32 -04:00
|
|
|
const projectSyncSuccessMessage = getMeta(
|
|
|
|
'ol-projectSyncSuccessMessage'
|
|
|
|
) as string
|
2022-05-26 05:39:07 -04:00
|
|
|
const [integrationLinkingWidgets] = useState<any[]>(
|
2022-04-27 12:13:42 -04:00
|
|
|
() =>
|
|
|
|
getMeta('integrationLinkingWidgets') ||
|
|
|
|
importOverleafModules('integrationLinkingWidgets')
|
|
|
|
)
|
2022-05-26 05:39:07 -04:00
|
|
|
const [referenceLinkingWidgets] = useState<any[]>(
|
2022-04-27 12:13:42 -04:00
|
|
|
() =>
|
|
|
|
getMeta('referenceLinkingWidgets') ||
|
|
|
|
importOverleafModules('referenceLinkingWidgets')
|
|
|
|
)
|
2023-12-07 09:29:45 -05:00
|
|
|
const [langFeedbackLinkingWidgets] = useState<any[]>(
|
|
|
|
() =>
|
|
|
|
getMeta('langFeedbackLinkingWidgets') ||
|
|
|
|
importOverleafModules('langFeedbackLinkingWidgets')
|
|
|
|
)
|
2022-04-27 12:13:42 -04:00
|
|
|
|
2023-05-17 04:59:51 -04:00
|
|
|
const oauth2ServerComponents = importOverleafModules('oauth2Server') as {
|
|
|
|
import: { default: ElementType }
|
|
|
|
path: string
|
|
|
|
}[]
|
|
|
|
|
2024-02-21 10:22:02 -05:00
|
|
|
const renderSyncSection =
|
|
|
|
getMeta('ol-isSaas') || getMeta('ol-gitBridgeEnabled')
|
|
|
|
|
2023-10-19 04:26:45 -04:00
|
|
|
const showPersonalAccessTokenComponents: boolean =
|
|
|
|
getMeta('ol-showPersonalAccessToken') ||
|
|
|
|
getMeta('ol-optionalPersonalAccessToken')
|
2023-05-17 04:59:51 -04:00
|
|
|
|
2023-10-19 04:26:45 -04:00
|
|
|
const allIntegrationLinkingWidgets = showPersonalAccessTokenComponents
|
2023-05-17 04:59:51 -04:00
|
|
|
? integrationLinkingWidgets.concat(oauth2ServerComponents)
|
|
|
|
: integrationLinkingWidgets
|
|
|
|
|
2023-12-07 09:29:45 -05:00
|
|
|
// currently the only thing that is in the langFeedback section is writefull,
|
|
|
|
// which is behind a split test. we should hide this section if the user is not in the split test
|
|
|
|
// todo: remove split test check, and split test context after gradual rollout is complete
|
2024-04-30 10:58:34 -04:00
|
|
|
const hasWritefullOauthPromotion = useFeatureFlag('writefull-oauth-promotion')
|
2023-12-07 09:29:45 -05:00
|
|
|
|
2023-12-20 12:22:54 -05:00
|
|
|
// even if they arent in the split test, if they have it enabled let them toggle it off
|
|
|
|
const user = getMeta('ol-user')
|
2023-12-07 09:29:45 -05:00
|
|
|
const shouldLoadWritefull =
|
2024-04-30 10:58:34 -04:00
|
|
|
(hasWritefullOauthPromotion || user.writefull?.enabled === true) &&
|
2023-12-07 09:29:45 -05:00
|
|
|
!window.writefull // check if the writefull extension is installed, in which case we dont handle the integration
|
|
|
|
|
|
|
|
const haslangFeedbackLinkingWidgets =
|
|
|
|
langFeedbackLinkingWidgets.length && shouldLoadWritefull
|
2024-02-21 10:22:02 -05:00
|
|
|
const hasIntegrationLinkingSection =
|
|
|
|
renderSyncSection && allIntegrationLinkingWidgets.length
|
2022-04-25 07:04:44 -04:00
|
|
|
const hasReferencesLinkingSection = referenceLinkingWidgets.length
|
2023-07-14 05:12:12 -04:00
|
|
|
|
|
|
|
// Filter out SSO providers that are not allowed to be linked by
|
|
|
|
// managed users. Allow unlinking them if they are already linked.
|
|
|
|
const hideGoogleSSO = getMeta('ol-cannot-link-google-sso')
|
|
|
|
const hideOtherThirdPartySSO = getMeta('ol-cannot-link-other-third-party-sso')
|
|
|
|
|
|
|
|
for (const providerId in subscriptions) {
|
|
|
|
const isLinked = subscriptions[providerId].linked
|
|
|
|
if (providerId === 'google') {
|
|
|
|
if (hideGoogleSSO && !isLinked) {
|
|
|
|
delete subscriptions[providerId]
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
if (hideOtherThirdPartySSO && !isLinked) {
|
|
|
|
delete subscriptions[providerId]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-04-25 07:04:44 -04:00
|
|
|
const hasSSOLinkingSection = Object.keys(subscriptions).length > 0
|
|
|
|
|
|
|
|
if (
|
2023-12-07 09:29:45 -05:00
|
|
|
!haslangFeedbackLinkingWidgets &&
|
2022-04-25 07:04:44 -04:00
|
|
|
!hasIntegrationLinkingSection &&
|
|
|
|
!hasReferencesLinkingSection &&
|
|
|
|
!hasSSOLinkingSection
|
|
|
|
) {
|
|
|
|
return null
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<h3>{t('integrations')}</h3>
|
2022-04-26 11:20:09 -04:00
|
|
|
<p className="small">{t('linked_accounts_explained')}</p>
|
2023-12-07 09:29:45 -05:00
|
|
|
{haslangFeedbackLinkingWidgets ? (
|
|
|
|
<>
|
|
|
|
<h3 id="project-sync" className="text-capitalize">
|
|
|
|
{t('language_feedback')}
|
|
|
|
</h3>
|
|
|
|
<div className="settings-widgets-container">
|
|
|
|
{langFeedbackLinkingWidgets.map(
|
|
|
|
({ import: { default: widget }, path }, widgetIndex) => (
|
|
|
|
<ModuleLinkingWidget
|
|
|
|
key={path}
|
|
|
|
ModuleComponent={widget}
|
|
|
|
isLast={widgetIndex === langFeedbackLinkingWidgets.length - 1}
|
|
|
|
/>
|
|
|
|
)
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</>
|
|
|
|
) : null}
|
2022-04-25 07:04:44 -04:00
|
|
|
{hasIntegrationLinkingSection ? (
|
|
|
|
<>
|
2022-04-26 11:20:09 -04:00
|
|
|
<h3 id="project-sync" className="text-capitalize">
|
2022-05-16 04:02:50 -04:00
|
|
|
{t('project_synchronisation')}
|
2022-04-26 11:20:09 -04:00
|
|
|
</h3>
|
2022-05-16 04:02:32 -04:00
|
|
|
{projectSyncSuccessMessage ? (
|
2024-05-15 10:31:00 -04:00
|
|
|
<OLNotification
|
2024-04-23 06:25:05 -04:00
|
|
|
type="success"
|
|
|
|
content={projectSyncSuccessMessage}
|
|
|
|
/>
|
2022-05-16 04:02:32 -04:00
|
|
|
) : null}
|
2022-04-25 07:04:44 -04:00
|
|
|
<div className="settings-widgets-container">
|
2023-05-17 04:59:51 -04:00
|
|
|
{allIntegrationLinkingWidgets.map(
|
2022-04-25 07:04:44 -04:00
|
|
|
({ import: importObject, path }, widgetIndex) => (
|
|
|
|
<ModuleLinkingWidget
|
|
|
|
key={Object.keys(importObject)[0]}
|
|
|
|
ModuleComponent={Object.values(importObject)[0]}
|
2023-05-17 04:59:51 -04:00
|
|
|
isLast={
|
|
|
|
widgetIndex === allIntegrationLinkingWidgets.length - 1
|
|
|
|
}
|
2022-04-25 07:04:44 -04:00
|
|
|
/>
|
|
|
|
)
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</>
|
|
|
|
) : null}
|
|
|
|
{hasReferencesLinkingSection ? (
|
|
|
|
<>
|
2022-04-26 11:20:09 -04:00
|
|
|
<h3 id="references" className="text-capitalize">
|
2022-05-24 03:47:08 -04:00
|
|
|
{t('reference_managers')}
|
2022-04-26 11:20:09 -04:00
|
|
|
</h3>
|
2022-04-25 07:04:44 -04:00
|
|
|
<div className="settings-widgets-container">
|
|
|
|
{referenceLinkingWidgets.map(
|
|
|
|
({ import: importObject, path }, widgetIndex) => (
|
|
|
|
<ModuleLinkingWidget
|
|
|
|
key={Object.keys(importObject)[0]}
|
|
|
|
ModuleComponent={Object.values(importObject)[0]}
|
|
|
|
isLast={widgetIndex === referenceLinkingWidgets.length - 1}
|
|
|
|
/>
|
|
|
|
)
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</>
|
|
|
|
) : null}
|
|
|
|
{hasSSOLinkingSection ? (
|
|
|
|
<>
|
2022-04-26 11:20:09 -04:00
|
|
|
<h3 id="linked-accounts" className="text-capitalize">
|
|
|
|
{t('linked_accounts')}
|
|
|
|
</h3>
|
2022-05-16 04:02:17 -04:00
|
|
|
{ssoErrorMessage ? (
|
2024-05-15 10:31:00 -04:00
|
|
|
<OLNotification
|
2024-04-23 06:25:05 -04:00
|
|
|
type="error"
|
|
|
|
content={`${t('sso_link_error')}: ${ssoErrorMessage}`}
|
|
|
|
/>
|
2022-05-16 04:02:17 -04:00
|
|
|
) : null}
|
2022-04-25 07:04:44 -04:00
|
|
|
<div className="settings-widgets-container">
|
|
|
|
{Object.values(subscriptions).map(
|
|
|
|
(subscription, subscriptionIndex) => (
|
|
|
|
<SSOLinkingWidgetContainer
|
|
|
|
key={subscription.providerId}
|
|
|
|
subscription={subscription}
|
|
|
|
isLast={
|
|
|
|
subscriptionIndex === Object.keys(subscriptions).length - 1
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
)
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</>
|
|
|
|
) : null}
|
2023-12-07 09:29:45 -05:00
|
|
|
{haslangFeedbackLinkingWidgets ||
|
|
|
|
hasIntegrationLinkingSection ||
|
2022-04-25 07:04:44 -04:00
|
|
|
hasReferencesLinkingSection ||
|
|
|
|
hasSSOLinkingSection ? (
|
|
|
|
<hr />
|
|
|
|
) : null}
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
type LinkingWidgetProps = {
|
|
|
|
ModuleComponent: any
|
|
|
|
isLast: boolean
|
|
|
|
}
|
|
|
|
|
|
|
|
function ModuleLinkingWidget({ ModuleComponent, isLast }: LinkingWidgetProps) {
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<ModuleComponent />
|
|
|
|
{isLast ? null : <hr />}
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
type SSOLinkingWidgetContainerProps = {
|
|
|
|
subscription: SSOSubscription
|
|
|
|
isLast: boolean
|
|
|
|
}
|
|
|
|
|
|
|
|
function SSOLinkingWidgetContainer({
|
|
|
|
subscription,
|
|
|
|
isLast,
|
|
|
|
}: SSOLinkingWidgetContainerProps) {
|
|
|
|
const { t } = useTranslation()
|
|
|
|
const { unlink } = useSSOContext()
|
|
|
|
|
2022-05-26 05:39:07 -04:00
|
|
|
let description = ''
|
2022-04-26 11:20:09 -04:00
|
|
|
switch (subscription.providerId) {
|
|
|
|
case 'collabratec':
|
|
|
|
description = t('linked_collabratec_description')
|
|
|
|
break
|
|
|
|
case 'google':
|
2022-05-24 03:47:08 -04:00
|
|
|
description = `${t('login_with_service', {
|
2022-04-26 11:20:09 -04:00
|
|
|
service: subscription.provider.name,
|
2022-05-24 03:47:08 -04:00
|
|
|
})}.`
|
2022-04-26 11:20:09 -04:00
|
|
|
break
|
|
|
|
case 'orcid':
|
|
|
|
description = t('oauth_orcid_description')
|
|
|
|
break
|
|
|
|
}
|
|
|
|
|
2022-04-25 07:04:44 -04:00
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<SSOLinkingWidget
|
|
|
|
providerId={subscription.providerId}
|
|
|
|
title={subscription.provider.name}
|
2022-04-26 11:20:09 -04:00
|
|
|
description={description}
|
2022-04-25 07:04:44 -04:00
|
|
|
helpPath={subscription.provider.descriptionOptions?.link}
|
|
|
|
linked={subscription.linked}
|
|
|
|
linkPath={subscription.provider.linkPath}
|
|
|
|
onUnlink={() => unlink(subscription.providerId)}
|
|
|
|
/>
|
|
|
|
{isLast ? null : <hr />}
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default LinkingSection
|