Merge pull request #11653 from overleaf/ds-documentation-btn-on-editor

Adding documentation button on the editor

GitOrigin-RevId: e03fd7b931eb0fe7273e6e9d0185c81c384df916

services/web/app/src/Features/Project/ProjectController.js

@@ -1051,6 +1051,21 @@ const ProjectController = {
             }
           )
         },
+        editorDocumentationButton(cb) {
+          SplitTestHandler.getAssignment(
+            req,
+            res,
+            'documentation-on-editor',
+            (error, assignment) => {
+              // do not fail editor load if assignment fails
+              if (error) {
+                cb(null, { variant: 'default' })
+              } else {
+                cb(null, assignment)
+              }
+            }
+          )
+        },
         richTextAssignment(cb) {
           SplitTestHandler.getAssignment(
             req,

services/web/app/views/project/editor/file-tree-react.pug

@@ -1,38 +1,42 @@
-aside.editor-sidebar.full-size(
-	ng-show="ui.view != 'history'"
-	vertical-resizable-panes="outline-resizer"
-	vertical-resizable-panes-toggled-externally-on="outline-toggled"
-	vertical-resizable-panes-default-size="350"
-	vertical-resizable-panes-min-size="32"
-	vertical-resizable-panes-max-size="'75%'"
-	vertical-resizable-panes-resize-on="left-pane-resize-all"
-)
+aside.editor-sidebar.full-size
 
-	.file-tree(
-		ng-controller="ReactFileTreeController"
-		vertical-resizable-top
+	.resizable-side-bar(
+		ng-show="ui.view != 'history'"
+		vertical-resizable-panes="outline-resizer"
+		vertical-resizable-panes-toggled-externally-on="outline-toggled"
+		vertical-resizable-panes-default-size="350"
+		vertical-resizable-panes-min-size="32"
+		vertical-resizable-panes-max-size="'75%'"
+		vertical-resizable-panes-resize-on="left-pane-resize-all"
 	)
-		file-tree-root(
-			on-select="onSelect"
-			on-init="onInit"
-			is-connected="isConnected"
-			ref-providers="refProviders"
-			reindex-references="reindexReferences"
-			set-ref-provider-enabled="setRefProviderEnabled"
-			set-started-free-trial="setStartedFreeTrial"
+
+		.file-tree(
+			ng-controller="ReactFileTreeController"
+			vertical-resizable-top
 		)
+			file-tree-root(
+				on-select="onSelect"
+				on-init="onInit"
+				is-connected="isConnected"
+				ref-providers="refProviders"
+				reindex-references="reindexReferences"
+				set-ref-provider-enabled="setRefProviderEnabled"
+				set-started-free-trial="setStartedFreeTrial"
+			)
 
-	.outline-container(
-		vertical-resizable-bottom
-		ng-controller="OutlineController"
-	)
-		outline-pane(
-			is-tex-file="isTexFile"
-			outline="outline"
-			project-id="project_id"
-			jump-to-line="jumpToLine"
-			on-toggle="onToggle"
-			event-tracking="eventTracking"
-			highlighted-line="highlightedLine"
-			show="show"
+		.outline-container(
+			vertical-resizable-bottom
+			ng-controller="OutlineController"
 		)
+			outline-pane(
+				is-tex-file="isTexFile"
+				outline="outline"
+				project-id="project_id"
+				jump-to-line="jumpToLine"
+				on-toggle="onToggle"
+				event-tracking="eventTracking"
+				highlighted-line="highlightedLine"
+				show="show"
+			)
+
+	documentation-button

services/web/app/views/project/editor/left-menu.pug

@@ -238,7 +238,12 @@ aside#left-menu.full-size(
 			)
 		if showSupport
 			li
-				a(href='/learn', target="_blank")
+				a(
+					href='/learn', target="_blank"
+					event-tracking="left-menu-documentation-click "
+					event-tracking-mb="true"
+					event-tracking-trigger="click"
+				)
 					i.fa.fa-book.fa-fw
 					|    #{translate('documentation')}
 			li

services/web/frontend/js/features/outline/components/documentation-button.tsx

@@ -0,0 +1,70 @@
+import { useState } from 'react'
+import Icon from '../../../shared/components/icon'
+import { useSplitTestContext } from '../../../shared/context/split-test-context'
+import { sendMB } from '../../../infrastructure/event-tracking'
+import PropTypes from 'prop-types'
+import { Button } from 'react-bootstrap'
+
+function DocumentationButton() {
+  const { splitTestVariants } = useSplitTestContext({
+    splitTestVariants: PropTypes.object,
+  })
+  const documentationButtonVariant =
+    splitTestVariants['documentation-on-editor']
+
+  let documentationButtonText = ''
+
+  if (documentationButtonVariant === 'latex-help')
+    documentationButtonText = 'LaTeX help'
+  else if (documentationButtonVariant === 'documentation')
+    documentationButtonText = 'Documentation'
+  else if (documentationButtonVariant === 'help-guides')
+    documentationButtonText = 'Help guides'
+  const [showDocumentationButton, setShowDocumentationButton] = useState(
+    !(documentationButtonVariant === 'default')
+  )
+
+  function handleCloseClick() {
+    sendMB('file-tree-documentation-dismiss ')
+
+    setShowDocumentationButton(false)
+  }
+
+  function handleDocumentationLinkClick() {
+    sendMB('file-tree-documentation-click')
+  }
+  return (
+    <div className="outline-pane">
+      {showDocumentationButton ? (
+        <header className="outline-footer">
+          <div className="outline-header-expand-collapse-btn documentation-btn">
+            <a
+              href="/learn"
+              target="_blank"
+              rel="noreferrer"
+              className="documentation-link"
+              onClick={handleDocumentationLinkClick}
+            >
+              <Icon
+                type="question-circle"
+                className="outline-caret-icon"
+                style={{ color: 'white' }}
+              />
+              <h4 className="outline-header-name">{documentationButtonText}</h4>
+            </a>
+            <Button bsStyle="link">
+              <Icon
+                style={{ color: 'white' }}
+                type="times"
+                onClick={handleCloseClick}
+                className="outline-caret-icon"
+              />
+            </Button>
+          </div>
+        </header>
+      ) : null}
+    </div>
+  )
+}
+
+export default DocumentationButton

services/web/frontend/js/features/outline/controllers/documentation-button-controller.js

@@ -0,0 +1,9 @@
+import { react2angular } from 'react2angular'
+import DocumentationButton from '../components/documentation-button'
+import { rootContext } from '../../../../../frontend/js/shared/context/root-context'
+import App from '../../../../../frontend/js/base'
+
+App.component(
+  'documentationButton',
+  react2angular(rootContext.use(DocumentationButton), [])
+)

services/web/frontend/js/ide.js

@@ -66,6 +66,7 @@ import './features/share-project-modal/controllers/react-share-project-modal-con
 import './features/source-editor/controllers/editor-switch-controller'
 import './features/source-editor/controllers/cm6-switch-away-survey-controller'
 import './features/source-editor/controllers/grammarly-warning-controller'
+import './features/outline/controllers/documentation-button-controller'
 import { cleanupServiceWorker } from './utils/service-worker-cleanup'
 import { reportCM6Perf } from './infrastructure/cm6-performance'
 import { reportAcePerf } from './ide/editor/ace-performance'

services/web/frontend/stylesheets/app/editor/file-tree.less

@@ -14,6 +14,10 @@
   background-color: @file-tree-bg;
 }
 
+.resizable-side-bar {
+  flex-grow: 1;
+}
+
 .file-tree {
   display: flex !important; // To work around jQuery layout's inline styles
   flex-direction: column;

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

@@ -15,6 +15,20 @@
   opacity: 0.5;
 }
 
+.documentation-btn.outline-header-expand-collapse-btn {
+  justify-content: space-between;
+  padding-right: 0;
+}
+
+.documentation-btn .btn {
+  padding-right: 0;
+}
+
+.documentation-link {
+  display: flex;
+  margin-left: 0.5em;
+}
+
 .outline-header {
   .toolbar-small-mixin;
   .toolbar-alt-mixin;
@@ -23,6 +37,14 @@
   border-bottom: 1px solid @toolbar-border-color;
   border-top: 1px solid @toolbar-border-color;
 }
+.outline-footer {
+  .toolbar-small-mixin;
+  .toolbar-alt-mixin;
+  display: flex;
+  flex-shrink: 0;
+  border-bottom: 1px solid @toolbar-border-color;
+  border-top: 1px solid @toolbar-border-color;
+}
 
 .outline-header-expand-collapse-btn {
   display: flex;