React Git Bridge Modal (#3757)

* git-bridge-modal react component and stories
* added react git-bridge-modal to angular tree

GitOrigin-RevId: cf883b776a9ddc7975977534dc453ece4b3ec431

services/web/frontend/extracted-translations.json

@@ -1,7 +1,9 @@
 {
+  "access_your_projects_with_git": "",
   "account_settings": "",
   "anyone_with_link_can_edit": "",
   "anyone_with_link_can_view": "",
+  "ask_proj_owner_to_upgrade_for_git_bridge": "",
   "ask_proj_owner_to_upgrade_for_longer_compiles": "",
   "auto_compile": "",
   "autocompile_disabled": "",
@@ -22,11 +24,13 @@
   "change_project_owner": "",
   "chat": "",
   "clear_cached_files": "",
+  "clone_with_git": "",
   "close": "",
   "clsi_maintenance": "",
   "clsi_unavailable": "",
   "code_check_failed": "",
   "code_check_failed_explanation": "",
+  "collaborate_online_and_offline": "",
   "collabs_per_proj": "",
   "collapse": "",
   "common": "",
@@ -45,6 +49,7 @@
   "creating": "",
   "delete": "",
   "deleting": "",
+  "demonstrating_git_integration": "",
   "dismiss": "",
   "dismiss_error_popup": "",
   "done": "",
@@ -67,6 +72,8 @@
   "full_doc_history": "",
   "full_screen": "",
   "generic_something_went_wrong": "",
+  "get_collaborative_benefits": "",
+  "git_bridge_modal_description": "",
   "give_feedback": "",
   "go_to_error_location": "",
   "headers": "",
@@ -166,6 +173,7 @@
   "start_free_trial": "",
   "stop_compile": "",
   "stop_on_validation_error": "",
+  "store_your_work": "",
   "sure_you_want_to_delete": "",
   "sync_to_dropbox": "",
   "sync_to_github": "",
@@ -181,11 +189,13 @@
   "too_many_requests": "",
   "too_recently_compiled": "",
   "total_words": "",
+  "try_it_for_free": "",
   "turn_off_link_sharing": "",
   "turn_on_link_sharing": "",
   "unlimited_projects": "",
   "upgrade_for_longer_compiles": "",
   "upload": "",
+  "use_your_own_machine": "",
   "validation_issue_description": "",
   "validation_issue_entry_description": "",
   "view_all_errors": "",

services/web/frontend/js/shared/context/application-context.js

@@ -10,15 +10,18 @@ ApplicationContext.Provider.propTypes = {
       id: PropTypes.string.isRequired
     }),
     exposedSettings: PropTypes.shape({
+      appName: PropTypes.string.isRequired,
       enableSubscriptions: PropTypes.bool
-    })
+    }),
+    gitBridgePublicBaseUrl: PropTypes.string.isRequired
   })
 }
 
 export function ApplicationProvider({ children }) {
   const applicationContextValue = {
     user: window.user,
-    exposedSettings: ExposedSettings
+    exposedSettings: ExposedSettings,
+    gitBridgePublicBaseUrl: window.gitBridgePublicBaseUrl
   }
   return (
     <ApplicationContext.Provider value={applicationContextValue}>

services/web/frontend/stories/fixtures/context.js

@@ -24,4 +24,6 @@ export function setupContext() {
       removeListener: sinon.stub()
     }
   }
+  window.ExposedSettings = window.ExposedSettings || {}
+  window.ExposedSettings.gitBridgePublicBaseUrl = 'https://git.stories.com'
 }

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

@@ -0,0 +1,48 @@
+import React from 'react'
+import { ContextRoot } from '../js/shared/context/root-context'
+import { setupContext } from './fixtures/context'
+import importOverleafModules from '../macros/import-overleaf-module.macro'
+
+const [
+  {
+    import: { default: GitBridgeModal }
+  }
+] = importOverleafModules('gitBridge')
+
+setupContext()
+
+export const GitBridgeUrlModal = args => <GitBridgeModal {...args} />
+GitBridgeUrlModal.args = {
+  type: 'show_url'
+}
+
+export const CollaboratorModal = args => <GitBridgeModal {...args} />
+CollaboratorModal.args = {
+  type: 'collaborator'
+}
+
+export const TeaserModal = args => <GitBridgeModal {...args} />
+TeaserModal.args = {
+  type: 'teaser'
+}
+
+export default {
+  title: 'Modals / Git Bridge Modal',
+  component: GitBridgeModal,
+  args: {
+    show: true
+  },
+  argTypes: {
+    handleHide: { action: 'handleHide' },
+    startFreeTrial: { action: 'startFreeTrial' }
+  },
+  decorators: [
+    Story => (
+      <>
+        <ContextRoot ide={window._ide} settings={{}}>
+          <Story />
+        </ContextRoot>
+      </>
+    )
+  ]
+}

services/web/frontend/stylesheets/app/editor.less

@@ -623,6 +623,10 @@ CodeMirror
   text-align: center;
 }
 
+.teaser-refresh-label {
+  text-align: center;
+}
+
 .teaser-img,
 .dropbox-teaser-img {
   .img-responsive;

services/web/locales/en.json

@@ -454,6 +454,11 @@
   "tagline_student_monthly": "Great for a single term",
   "all_premium_features": "All premium features",
   "sync_dropbox_github": "Sync with Dropbox and GitHub",
+  "demonstrating_git_integration": "Demonstrating Git integration",
+  "collaborate_online_and_offline": "Collaborate online and offline, using your own workflow",
+  "get_collaborative_benefits": "Get the collaborative benefits from __appName__, even if you prefer to work offline",
+  "use_your_own_machine": "Use your own machine, with your own setup",
+  "store_your_work": "Store your work on your own infrastructure",
   "track_changes": "Track changes",
   "tooltip_hide_pdf": "Click to hide the PDF",
   "tooltip_show_pdf": "Click to show the PDF",

services/web/test/frontend/helpers/render-with-context.js

@@ -12,6 +12,7 @@ export function renderWithEditorContext(
 ) {
   window.user = user || window.user
   window.ExposedSettings.appName = 'test'
+  window.gitBridgePublicBaseUrl = 'git.overleaf.test'
   window.project_id = projectId != null ? projectId : window.project_id
   window._ide = {
     $scope: {