Merge pull request #7750 from overleaf/ta-settings-fixes-2

[SettingsPage] Small Fixes 2

GitOrigin-RevId: fe29b5a97cac4e92f6458e2359569d6c080b626b

services/web/frontend/extracted-translations.json

@@ -223,6 +223,7 @@
   "link_to_zotero": "",
   "linked_accounts": "",
   "linked_accounts_explained": "",
+  "linked_collabratec_description": "",
   "linked_file": "",
   "loading": "",
   "loading_recent_github_commits": "",
@@ -233,6 +234,7 @@
   "log_entry_maximum_entries_title": "",
   "log_hint_extra_info": "",
   "log_viewer_error": "",
+  "login_with_service": "",
   "logs_and_output_files": "",
   "logs_pane_info_message": "",
   "main_file_not_found": "",
@@ -279,6 +281,7 @@
   "no_search_results": "",
   "no_symbols_found": "",
   "normal": "",
+  "oauth_orcid_description": "",
   "of": "",
   "off": "",
   "official": "",
@@ -345,6 +348,7 @@
   "reconnect": "",
   "redirect_to_editor": "",
   "reference_error_relink_hint": "",
+  "reference_sync": "",
   "references_search_hint": "",
   "refresh": "",
   "refresh_page_after_linking_dropbox": "",
@@ -411,6 +415,7 @@
   "submit_title": "",
   "subscription_admins_cannot_be_deleted": "",
   "sure_you_want_to_delete": "",
+  "sync_dropbox_github": "",
   "sync_project_to_github_explanation": "",
   "sync_to_dropbox": "",
   "sync_to_github": "",

services/web/frontend/js/features/settings/components/linking-section.tsx

@@ -27,10 +27,12 @@ function LinkingSection() {
   return (
     <>
       <h3>{t('integrations')}</h3>
-      <p>{t('linked_accounts_explained')}</p>
+      <p className="small">{t('linked_accounts_explained')}</p>
       {hasIntegrationLinkingSection ? (
         <>
-          <h3 className="text-capitalize">{t('sync_dropbox_github')}</h3>
+          <h3 id="project-sync" className="text-capitalize">
+            {t('sync_dropbox_github')}
+          </h3>
           <div className="settings-widgets-container">
             {integrationLinkingWidgets.map(
               ({ import: importObject, path }, widgetIndex) => (
@@ -46,7 +48,9 @@ function LinkingSection() {
       ) : null}
       {hasReferencesLinkingSection ? (
         <>
-          <h3 className="text-capitalize">{t('reference_sync')}</h3>
+          <h3 id="references" className="text-capitalize">
+            {t('reference_sync')}
+          </h3>
           <div className="settings-widgets-container">
             {referenceLinkingWidgets.map(
               ({ import: importObject, path }, widgetIndex) => (
@@ -62,7 +66,9 @@ function LinkingSection() {
       ) : null}
       {hasSSOLinkingSection ? (
         <>
-          <h3 className="text-capitalize">{t('linked_accounts')}</h3>
+          <h3 id="linked-accounts" className="text-capitalize">
+            {t('linked_accounts')}
+          </h3>
           <div className="settings-widgets-container">
             {Object.values(subscriptions).map(
               (subscription, subscriptionIndex) => (
@@ -113,15 +119,28 @@ function SSOLinkingWidgetContainer({
   const { t } = useTranslation()
   const { unlink } = useSSOContext()
 
+  let description = null
+  switch (subscription.providerId) {
+    case 'collabratec':
+      description = t('linked_collabratec_description')
+      break
+    case 'google':
+    case 'twitter':
+      description = t('login_with_service', {
+        service: subscription.provider.name,
+      })
+      break
+    case 'orcid':
+      description = t('oauth_orcid_description')
+      break
+  }
+
   return (
     <>
       <SSOLinkingWidget
         providerId={subscription.providerId}
         title={subscription.provider.name}
-        description={t(
-          subscription.provider.descriptionKey,
-          subscription.provider.descriptionOptions
-        )}
+        description={description}
         helpPath={subscription.provider.descriptionOptions?.link}
         linked={subscription.linked}
         linkPath={subscription.provider.linkPath}

services/web/frontend/js/features/settings/components/linking/integration-widget.tsx

@@ -53,7 +53,7 @@ export function IntegrationLinkingWidget({
             <span className="label label-info">{t('premium_feature')}</span>
           )}
         </div>
-        <p>
+        <p className="small">
           {description}{' '}
           <a href={helpPath} target="_blank" rel="noreferrer">
             {t('learn_more')}
@@ -64,7 +64,7 @@ export function IntegrationLinkingWidget({
       <div>
         <ActionButton
           hasFeature={hasFeature}
-          upgradePath="user/subscription/plans"
+          upgradePath="/user/subscription/plans"
           linked={linked}
           handleUnlinkClick={handleUnlinkClick}
           linkPath={linkPath}

services/web/frontend/js/features/settings/components/linking/sso-widget.tsx

@@ -63,7 +63,7 @@ export function SSOLinkingWidget({
         <div className="title-row">
           <h4>{title}</h4>
         </div>
-        <p>
+        <p className="small">
           {description?.replace(/<[^>]+>/g, '')}{' '}
           {helpPath ? (
             <a href={helpPath} target="_blank" rel="noreferrer">
@@ -77,7 +77,7 @@ export function SSOLinkingWidget({
         <ActionButton
           unlinkRequestInflight={unlinkRequestInflight}
           accountIsLinked={linked}
-          linkPath={linkPath}
+          linkPath={`${linkPath}?intent=link`}
           onUnlinkClick={handleUnlinkClick}
         />
       </div>

services/web/frontend/stylesheets/app/account-settings.less

@@ -137,7 +137,7 @@ tbody > tr.affiliations-table-warning-row > td {
   border: 1px solid @gray-lighter;
 
   hr {
-    margin: 15px 10px;
+    margin: 0 10px;
   }
 }
 

services/web/test/frontend/features/settings/components/linking/integration-widget.test.tsx

@@ -25,7 +25,7 @@ describe('<IntegrationLinkingWidgetTest/>', function () {
     it('should render a link to upgrade the account', function () {
       expect(
         screen.getByRole('link', { name: 'Upgrade' }).getAttribute('href')
-      ).to.equal('user/subscription/plans')
+      ).to.equal('/user/subscription/plans')
     })
   })
 

services/web/test/frontend/features/settings/components/linking/sso-widget.test.tsx

@@ -9,7 +9,7 @@ describe('<SSOLinkingWidget />', function () {
     title: 'integration',
     description: 'integration description',
     helpPath: '/help/integration',
-    linkPath: 'integration/link',
+    linkPath: '/integration/link',
     onUnlink: () => Promise.resolve(),
   }
 
@@ -27,7 +27,7 @@ describe('<SSOLinkingWidget />', function () {
       render(<SSOLinkingWidget {...defaultProps} linked={false} />)
       expect(
         screen.getByRole('link', { name: 'Link' }).getAttribute('href')
-      ).to.equal('integration/link')
+      ).to.equal('/integration/link?intent=link')
     })
   })