[web] Git Bridge modal with Personal Access Token (#13058)

* [web] Git Bridge modal with Personal Access Token

* [web] Added `git-bridge-modal-tokens` unit tests

GitOrigin-RevId: 854ce83bba91b9d97afa950d49ce18f62970fb5b

services/web/frontend/extracted-translations.json

@@ -349,7 +349,12 @@
   "git_authentication_token": "",
   "git_authentication_token_create_modal_info_1": "",
   "git_authentication_token_create_modal_info_2": "",
+  "git_bridge_modal_click_generate": "",
   "git_bridge_modal_description": "",
+  "git_bridge_modal_enter_authentication_token": "",
+  "git_bridge_modal_see_once": "",
+  "git_bridge_modal_tokens_description": "",
+  "git_bridge_modal_use_previous_token": "",
   "git_integration": "",
   "git_integration_info": "",
   "github_commit_message_placeholder": "",
@@ -381,6 +386,7 @@
   "go_prev_page": "",
   "go_to_code_location_in_pdf": "",
   "go_to_pdf_location_in_code": "",
+  "go_to_settings": "",
   "group_plan_tooltip": "",
   "group_plan_with_name_tooltip": "",
   "group_subscription": "",

services/web/frontend/stories/git-bridge-modal.stories.js

@@ -1,5 +1,7 @@
 import importOverleafModules from '../macros/import-overleaf-module.macro'
 import { ScopeDecorator } from './decorators/scope'
+import GitBridgeModalTokens from '../../modules/git-bridge/frontend/js/components/git-bridge-modal-tokens'
+import useFetchMock from './hooks/use-fetch-mock'
 
 const [
   {
@@ -7,12 +9,19 @@ const [
   },
 ] = importOverleafModules('gitBridge')
 
-export const GitBridgeUrlModal = args => <GitBridgeModal {...args} />
+function renderModal(args, newModal = false) {
+  window.metaAttributesCache = new Map()
+  window.metaAttributesCache.set('ol-showPersonalAccessToken', newModal)
+  window.metaAttributesCache.set('ol-personalAccessTokens', [])
+  return <GitBridgeModal {...args} />
+}
+
+export const GitBridgeUrlModal = args => renderModal(args)
 GitBridgeUrlModal.args = {
   type: 'show_url',
 }
 
-export const CollaboratorModal = args => <GitBridgeModal {...args} />
+export const CollaboratorModal = args => renderModal(args)
 CollaboratorModal.args = {
   type: 'collaborator',
 }
@@ -23,12 +32,58 @@ export const TeaserModal = args => {
   //   fetchMock.post('express:/event/:key', 202)
   // })
 
-  return <GitBridgeModal {...args} />
+  return renderModal(args)
 }
 TeaserModal.args = {
   type: 'teaser',
 }
 
+export const AccessTokensWithNoTokens = args => {
+  useFetchMock(fetchMock =>
+    fetchMock.get('/oauth/personal-access-tokens', [], { delay: 500 })
+  )
+  useFetchMock(fetchMock =>
+    fetchMock.post(
+      '/oauth/personal-access-tokens',
+      {
+        accessToken: 'olp_2fvP3amgiJRJk2JWP6nxZqGHKRVwMvcgo9mk',
+      },
+      { delay: 1000 }
+    )
+  )
+  return renderModal(args, true)
+}
+
+export const AccessTokensWithTokens = args => {
+  useFetchMock(fetchMock =>
+    fetchMock.get('/oauth/personal-access-tokens', [{}], { delay: 500 })
+  )
+  return <GitBridgeModalTokens {...args} />
+}
+
+export const AccessTokensGetTokensError = args => {
+  useFetchMock(fetchMock =>
+    fetchMock.get(
+      '/oauth/personal-access-tokens',
+      { status: 403 },
+      { delay: 1000 }
+    )
+  )
+  return <GitBridgeModalTokens {...args} />
+}
+
+export const AccessTokensCreateTokensError = args => {
+  useFetchMock(fetchMock => fetchMock.get('/oauth/personal-access-tokens', []))
+  useFetchMock(fetchMock =>
+    fetchMock.post(
+      '/oauth/personal-access-tokens',
+      { status: 403 },
+      { delay: 1000 }
+    )
+  )
+  return <GitBridgeModalTokens {...args} />
+}
+
 export default {
   title: 'Editor / Modals / Git Bridge',
   component: GitBridgeModal,

services/web/locales/en.json

@@ -606,7 +606,12 @@
   "git_authentication_token": "Git authentication token",
   "git_authentication_token_create_modal_info_1": "This is your Git authentication token. You should enter this when prompted for a password.",
   "git_authentication_token_create_modal_info_2": "<0>You will only see this authentication token once so please copy it and keep it safe</0>. For full instructions on using authentication tokens, visit our <1>help page</1>.",
+  "git_bridge_modal_click_generate": "Click Generate token to generate your authentication token now. Or do this later in your Account Settings.",
   "git_bridge_modal_description": "You can <code>git</code> <code>clone</code> your project using the link displayed below.",
+  "git_bridge_modal_enter_authentication_token": "When prompted for a password, enter your new authentication token:",
+  "git_bridge_modal_see_once": "You’ll only see this token once. To delete it or generate a new one, visit Account Settings. For detailed instructions and troubleshooting, read our <0>help page</0>.",
+  "git_bridge_modal_tokens_description": "To git clone your project you’ll need the link below and a Git authentication token.",
+  "git_bridge_modal_use_previous_token": "If you’re prompted for a password, you can use a previously generated Git authentication token. Or you can generate a new one in Account Settings. For more support, read our <0>help page</0>.",
   "git_integration": "Git Integration",
   "git_integration_info": "With Git integration, you can clone your Overleaf projects with Git. For full instructions on how to do this, read <0>our help page</0>.",
   "git_integration_lowercase": "Git integration",
@@ -649,6 +654,7 @@
   "go_to_account_settings": "Go to Account Settings",
   "go_to_code_location_in_pdf": "Go to code location in PDF",
   "go_to_pdf_location_in_code": "Go to PDF location in code (Tip: double click on the PDF for best results)",
+  "go_to_settings": "Go to settings",
   "group_admins_get_access_to": "Group admins get access to",
   "group_admins_get_access_to_info": "Special features available only on group plans.",
   "group_full": "This group is already full",

services/web/test/frontend/helpers/editor-providers.js

@@ -72,7 +72,7 @@ export function EditorProviders({
   },
 }) {
   window.user = user || window.user
-  window.gitBridgePublicBaseUrl = 'git.overleaf.test'
+  window.gitBridgePublicBaseUrl = 'https://git.overleaf.test'
   window.project_id = projectId != null ? projectId : window.project_id
   window.isRestrictedTokenMember = isRestrictedTokenMember