Merge pull request #10348 from overleaf/mj-outline-fixes-redo

[cm6] File outline improvements

GitOrigin-RevId: 9f4859cb35476d4baf0b3e3c2c2cb5d1678fd4a8

services/web/frontend/extracted-translations.json

@@ -438,6 +438,7 @@
   "owner": "",
   "page_current": "",
   "pagination_navigation": "",
+  "partial_outline_warning": "",
   "password": "",
   "password_managed_externally": "",
   "pdf_compile_in_progress_error": "",

services/web/frontend/js/features/outline/components/outline-pane.js

@@ -8,6 +8,7 @@ import Icon from '../../../shared/components/icon'
 import localStorage from '../../../infrastructure/local-storage'
 import withErrorBoundary from '../../../infrastructure/error-boundary'
 import { useProjectContext } from '../../../shared/context/project-context'
+import Tooltip from '../../../shared/components/tooltip'
 
 const OutlinePane = React.memo(function OutlinePane({
   isTexFile,
@@ -17,6 +18,7 @@ const OutlinePane = React.memo(function OutlinePane({
   eventTracking,
   highlightedLine,
   show,
+  isPartial = false,
 }) {
   const { t } = useTranslation()
 
@@ -67,6 +69,20 @@ const OutlinePane = React.memo(function OutlinePane({
             className="outline-caret-icon"
           />
           <h4 className="outline-header-name">{t('file_outline')}</h4>
+          {isPartial && (
+            <Tooltip
+              id="partial-outline"
+              description={t('partial_outline_warning')}
+              overlayProps={{ placement: 'top' }}
+            >
+              <span role="status">
+                <Icon
+                  type="exclamation-triangle"
+                  aria-label={t('partial_outline_warning')}
+                />
+              </span>
+            </Tooltip>
+          )}
         </button>
       </header>
       {expanded && isTexFile ? (
@@ -90,6 +106,7 @@ OutlinePane.propTypes = {
   eventTracking: PropTypes.object.isRequired,
   highlightedLine: PropTypes.number,
   show: PropTypes.bool.isRequired,
+  isPartial: PropTypes.bool,
 }
 
 export default withErrorBoundary(OutlinePane)

services/web/frontend/js/ide/binary-files/BinaryFilesManager.js

@@ -43,6 +43,7 @@ export default BinaryFilesManager = class BinaryFilesManager {
         this.$scope.$apply()
 
         this.$scope.$broadcast('file-view:file-opened')
+        window.dispatchEvent(new Event('file-view:file-opened'))
       },
       0,
       this

services/web/frontend/stories/outline.stories.js

@@ -39,6 +39,11 @@ NonTexFile.args = {
   isTexFile: false,
 }
 
+export const PartialResult = args => <OutlinePane {...args} />
+PartialResult.args = {
+  isPartial: true,
+}
+
 export default {
   title: 'Editor / Outline',
   component: OutlinePane,

services/web/locales/en.json

@@ -76,6 +76,7 @@
   "expand": "Expand",
   "collapse": "Collapse",
   "file_outline": "File outline",
+  "partial_outline_warning": "The File outline is out of date. It will update itself as you edit the document",
   "we_cant_find_any_sections_or_subsections_in_this_file": "We can’t find any sections or subsections in this file",
   "find_out_more_about_the_file_outline": "Find out more about the file outline",
   "invalid_institutional_email": "Your institution’s SSO service returned your email address as __email__, which is at an unexpected domain that we do not recognise as belonging to it. You may be able to change your primary email address via your user profile at your institution to one at your institution’s domain. Please contact your IT department if you have any questions.",

services/web/test/frontend/features/outline/components/outline-pane.test.js

@@ -115,4 +115,35 @@ describe('<OutlinePane />', function () {
     expect(global.localStorage.setItem).to.be.calledWithMatch(/123abc/, 'true')
     expect(onToggle).to.be.calledTwice
   })
+
+  it('shows warning on partial result', function () {
+    render(
+      <OutlinePane
+        isTexFile
+        outline={[]}
+        jumpToLine={jumpToLine}
+        onToggle={onToggle}
+        eventTracking={eventTracking}
+        show
+        isPartial
+      />
+    )
+    expect(screen.queryByRole('status')).to.exist
+  })
+
+  it('shows no warning on non-partial result', function () {
+    render(
+      <OutlinePane
+        isTexFile
+        outline={[]}
+        jumpToLine={jumpToLine}
+        onToggle={onToggle}
+        eventTracking={eventTracking}
+        show
+        isPartial={false}
+      />
+    )
+
+    expect(screen.queryByRole('status')).to.not.exist
+  })
 })