Remove unused code and translation keys (#7140)

GitOrigin-RevId: 15ce5d22a40ebe56cae76c78703c1547f2ab0552

services/web/frontend/extracted-translations.json

@@ -47,7 +47,6 @@
   "collapse": "",
   "commit": "",
   "common": "",
-  "compile_error_description": "",
   "compile_error_entry_description": "",
   "compile_larger_projects": "",
   "compile_mode": "",
@@ -93,7 +92,6 @@
   "files_cannot_include_invalid_characters": "",
   "find_out_more_about_the_file_outline": "",
   "find_the_symbols_you_need_with_premium": "",
-  "first_error_popup_label": "",
   "fold_line": "",
   "following_paths_conflict": "",
   "free_accounts_have_timeout_upgrade_to_increase": "",
@@ -131,7 +129,6 @@
   "go_page": "",
   "go_prev_page": "",
   "go_to_code_location_in_pdf": "",
-  "go_to_error_location": "",
   "go_to_pdf_location_in_code": "",
   "have_an_extra_backup": "",
   "headers": "",
@@ -196,7 +193,6 @@
   "log_viewer_error": "",
   "logs_and_output_files": "",
   "logs_pane_info_message": "",
-  "logs_pane_info_message_popup": "",
   "main_file_not_found": "",
   "make_private": "",
   "manage_files_from_your_dropbox_folder": "",
@@ -210,12 +206,8 @@
   "mendeley_reference_loading_error_forbidden": "",
   "mendeley_sync_description": "",
   "menu": "",
-  "n_errors": "",
-  "n_errors_plural": "",
   "n_items": "",
   "n_items_plural": "",
-  "n_warnings": "",
-  "n_warnings_plural": "",
   "navigate_log_source": "",
   "navigation": "",
   "need_to_upgrade_for_more_collabs": "",
@@ -306,20 +298,10 @@
   "review": "",
   "revoke": "",
   "revoke_invite": "",
-  "run_syntax_check_now": "",
   "search": "",
-  "search_all": "",
   "search_bib_files": "",
-  "search_close": "",
-  "search_command_all": "",
-  "search_command_find": "",
-  "search_command_go": "",
-  "search_command_go_to_line": "",
-  "search_command_replace": "",
-  "search_current_match": "",
   "search_match_case": "",
   "search_next": "",
-  "search_on_line": "",
   "search_previous": "",
   "search_references": "",
   "search_regexp": "",
@@ -371,7 +353,6 @@
   "to_add_more_collaborators": "",
   "to_change_access_permissions": "",
   "toggle_compile_options_menu": "",
-  "toggle_output_files_list": "",
   "too_many_attempts": "",
   "too_many_files_uploaded_throttled_short_period": "",
   "too_many_requests": "",
@@ -394,22 +375,15 @@
   "upload": "",
   "url_to_fetch_the_file_from": "",
   "use_your_own_machine": "",
-  "validation_issue_description": "",
   "validation_issue_entry_description": "",
-  "view_error": "",
-  "view_error_plural": "",
   "view_logs": "",
   "view_pdf": "",
-  "view_warning": "",
-  "view_warning_plural": "",
   "we_cant_find_any_sections_or_subsections_in_this_file": "",
   "with_premium_subscription_you_also_get": "",
   "word_count": "",
   "work_offline": "",
   "work_with_non_overleaf_users": "",
   "your_message": "",
-  "your_project_has_an_error": "",
-  "your_project_has_an_error_plural": "",
   "zotero_groups_loading_error": "",
   "zotero_is_premium": "",
   "zotero_reference_loading_error": "",

services/web/frontend/js/features/pdf-preview/components/pdf-download-button.js

@@ -1,50 +0,0 @@
-import { useTranslation } from 'react-i18next'
-import { Button, Dropdown } from 'react-bootstrap'
-import Icon from '../../../shared/components/icon'
-import ControlledDropdown from '../../../shared/components/controlled-dropdown'
-import PdfFileList from './pdf-file-list'
-import { memo } from 'react'
-import { useCompileContext } from '../../../shared/context/compile-context'
-
-function PdfDownloadButton() {
-  const { compiling, pdfDownloadUrl, fileList } = useCompileContext()
-
-  const { t } = useTranslation()
-
-  const disabled = compiling || !pdfDownloadUrl
-
-  return (
-    <ControlledDropdown
-      id="pdf-download-dropdown"
-      className="toolbar-item"
-      disabled={disabled}
-    >
-      <Button
-        bsSize="xsmall"
-        bsStyle="info"
-        disabled={compiling || !pdfDownloadUrl}
-        download
-        href={pdfDownloadUrl || '#'}
-      >
-        <Icon type="download" fw />
-        <span className="toolbar-text toolbar-hide-medium toolbar-hide-small">
-          {t('download_pdf')}
-        </span>
-      </Button>
-
-      <Dropdown.Toggle
-        bsSize="xsmall"
-        bsStyle="info"
-        className="dropdown-toggle"
-        aria-label={t('toggle_output_files_list')}
-        disabled={!fileList}
-      />
-
-      <Dropdown.Menu id="download-dropdown-list">
-        <PdfFileList fileList={fileList} />
-      </Dropdown.Menu>
-    </ControlledDropdown>
-  )
-}
-
-export default memo(PdfDownloadButton)

services/web/frontend/js/features/pdf-preview/components/pdf-logs-button-content.js

@@ -1,67 +0,0 @@
-import { useTranslation } from 'react-i18next'
-import Icon from '../../../shared/components/icon'
-import PropTypes from 'prop-types'
-import { memo } from 'react'
-
-export function PdfLogsButtonContent({
-  showLogs,
-  logEntries,
-  codeCheckFailed,
-}) {
-  const { t } = useTranslation()
-
-  if (showLogs) {
-    return (
-      <>
-        <Icon type="file-pdf-o" />
-        <span className="toolbar-text toolbar-hide-small">{t('view_pdf')}</span>
-      </>
-    )
-  }
-
-  if (codeCheckFailed) {
-    return (
-      <>
-        <Icon type="exclamation-triangle" />
-        <span className="toolbar-text toolbar-hide-small">
-          {t('code_check_failed')}
-        </span>
-      </>
-    )
-  }
-
-  const count = logEntries?.errors?.length || logEntries?.warnings?.length
-
-  if (!count) {
-    return (
-      <>
-        <Icon type="file-text-o" />
-        <span className="toolbar-text toolbar-hide-small">
-          {t('view_logs')}
-        </span>
-      </>
-    )
-  }
-
-  return (
-    <>
-      <Icon type="file-text-o" />
-      <span className="btn-toggle-logs-label toolbar-text toolbar-hide-small">
-        {logEntries.errors?.length
-          ? t('your_project_has_an_error', { count })
-          : t('view_warning', { count })}
-        <span className="sr-hidden">
-          {count > 1 && ` (${count > 99 ? '99+' : count})`}
-        </span>
-      </span>
-    </>
-  )
-}
-
-PdfLogsButtonContent.propTypes = {
-  codeCheckFailed: PropTypes.bool,
-  showLogs: PropTypes.bool,
-  logEntries: PropTypes.object,
-}
-
-export default memo(PdfLogsButtonContent)

services/web/frontend/js/features/pdf-preview/components/pdf-logs-button.js

@@ -1,60 +0,0 @@
-import { memo, useCallback, useMemo } from 'react'
-import { Button } from 'react-bootstrap'
-import { PdfLogsButtonContent } from './pdf-logs-button-content'
-import { sendMBOnce } from '../../../infrastructure/event-tracking'
-import { useCompileContext } from '../../../shared/context/compile-context'
-
-function PdfLogsButton() {
-  const { codeCheckFailed, error, logEntries, showLogs, setShowLogs } =
-    useCompileContext()
-
-  const buttonStyle = useMemo(() => {
-    if (showLogs) {
-      return 'default'
-    }
-
-    if (codeCheckFailed) {
-      return 'danger'
-    }
-
-    if (logEntries) {
-      if (logEntries.errors?.length) {
-        return 'danger'
-      }
-
-      if (logEntries.warnings?.length) {
-        return 'warning'
-      }
-    }
-
-    return 'default'
-  }, [codeCheckFailed, logEntries, showLogs])
-
-  const handleClick = useCallback(() => {
-    setShowLogs(value => {
-      if (!value) {
-        sendMBOnce('ide-open-logs-once')
-      }
-
-      return !value
-    })
-  }, [setShowLogs])
-
-  return (
-    <Button
-      bsSize="xsmall"
-      bsStyle={buttonStyle}
-      disabled={Boolean(error)}
-      className="btn-toggle-logs toolbar-item"
-      onClick={handleClick}
-    >
-      <PdfLogsButtonContent
-        showLogs={showLogs}
-        logEntries={logEntries}
-        codeCheckFailed={codeCheckFailed}
-      />
-    </Button>
-  )
-}
-
-export default memo(PdfLogsButton)

services/web/frontend/js/features/pdf-preview/components/pdf-preview-pane.js

@@ -4,13 +4,8 @@ import PdfLogsViewer from './pdf-logs-viewer'
 import PdfViewer from './pdf-viewer'
 import LoadingSpinner from '../../../shared/components/loading-spinner'
 import PdfHybridPreviewToolbar from './pdf-preview-hybrid-toolbar'
-import PdfPreviewToolbar from './pdf-preview-toolbar'
 import { useCompileContext } from '../../../shared/context/compile-context'
 
-const newPreviewToolbar = new URLSearchParams(window.location.search).has(
-  'new_preview_toolbar'
-)
-
 function PdfPreviewPane() {
   const { pdfUrl } = useCompileContext()
   const classes = classNames('pdf', 'full-size', {
@@ -18,7 +13,7 @@ function PdfPreviewPane() {
   })
   return (
     <div className={classes}>
-      {newPreviewToolbar ? <PdfPreviewToolbar /> : <PdfHybridPreviewToolbar />}
+      <PdfHybridPreviewToolbar />
       <Suspense fallback={<LoadingPreview />}>
         <div className="pdf-viewer">
           <PdfViewer />

services/web/frontend/js/features/pdf-preview/components/pdf-preview-toolbar.js

@@ -1,32 +0,0 @@
-import PdfCompileButton from './pdf-compile-button'
-import PdfDownloadButton from './pdf-download-button'
-import PdfLogsButton from './pdf-logs-button'
-import PdfExpandButton from './pdf-expand-button'
-import { ButtonToolbar } from 'react-bootstrap'
-import { memo, useState } from 'react'
-import useToolbarBreakpoint from '../hooks/use-toolbar-breakpoint'
-
-const isPreview = new URLSearchParams(window.location.search).get('preview')
-
-function PdfPreviewToolbar() {
-  const [element, setElement] = useState()
-
-  const toolbarClasses = useToolbarBreakpoint(element)
-
-  return (
-    <div ref={element => setElement(element)}>
-      <ButtonToolbar className={toolbarClasses}>
-        <div className="toolbar-pdf-left">
-          <PdfCompileButton />
-          <PdfDownloadButton />
-        </div>
-        <div className="toolbar-pdf-right">
-          <PdfLogsButton />
-          {!isPreview && <PdfExpandButton />}
-        </div>
-      </ButtonToolbar>
-    </div>
-  )
-}
-
-export default memo(PdfPreviewToolbar)

services/web/frontend/js/features/pdf-preview/hooks/use-toolbar-breakpoint.js

@@ -1,71 +0,0 @@
-import { useEffect, useLayoutEffect, useMemo, useState } from 'react'
-import classnames from 'classnames'
-
-const measureContentWidth = element =>
-  [...element.querySelectorAll('button')].reduce(
-    (output, item) => output + item.scrollWidth,
-    0
-  )
-
-export default function useToolbarBreakpoint(element) {
-  const [breakpoint, setBreakpoint] = useState(2)
-  const [recalculate, setRecalculate] = useState(true)
-
-  const [resizeObserver] = useState(() => {
-    if ('ResizeObserver' in window) {
-      return new ResizeObserver(() => {
-        setBreakpoint(2)
-        setRecalculate(true)
-      })
-    }
-  })
-
-  const [mutationObserver] = useState(
-    () =>
-      new MutationObserver(() => {
-        setBreakpoint(2)
-        setRecalculate(true)
-      })
-  )
-
-  useEffect(() => {
-    if (element && mutationObserver && resizeObserver) {
-      resizeObserver.observe(element)
-
-      mutationObserver.observe(element, {
-        childList: true,
-        subtree: true,
-        characterData: true,
-      })
-
-      return () => {
-        mutationObserver.disconnect()
-        resizeObserver.disconnect()
-      }
-    }
-  }, [element, mutationObserver, resizeObserver])
-
-  useLayoutEffect(() => {
-    if (recalculate && element && breakpoint) {
-      const contentWidth = measureContentWidth(element) + 150 // NOTE: remove this constant?
-
-      if (contentWidth > element.clientWidth) {
-        setBreakpoint(value => value - 1)
-      } else {
-        setRecalculate(false)
-      }
-    }
-  }, [element, breakpoint, recalculate])
-
-  return useMemo(
-    () =>
-      classnames({
-        toolbar: true,
-        'toolbar-pdf': true,
-        'toolbar-large': breakpoint === 2,
-        'toolbar-medium': breakpoint === 1,
-        'toolbar-small': breakpoint === 0,
-      }),
-    [breakpoint]
-  )
-}

services/web/frontend/stories/pdf-preview.stories.js

@@ -5,7 +5,6 @@ import { setupContext } from './fixtures/context'
 import { Button } from 'react-bootstrap'
 import PdfPreviewPane from '../js/features/pdf-preview/components/pdf-preview-pane'
 import PdfPreview from '../js/features/pdf-preview/components/pdf-preview'
-import PdfPreviewToolbar from '../js/features/pdf-preview/components/pdf-preview-toolbar'
 import PdfFileList from '../js/features/pdf-preview/components/pdf-file-list'
 import { buildFileList } from '../js/features/pdf-preview/util/file-list'
 import PdfLogsViewer from '../js/features/pdf-preview/components/pdf-logs-viewer'
@@ -30,7 +29,6 @@ export default {
   title: 'PDF Preview',
   component: PdfPreview,
   subcomponents: {
-    PdfPreviewToolbar,
     PdfPreviewHybridToolbar,
     PdfFileList,
     PdfPreviewError,
@@ -330,20 +328,6 @@ export const DisplayError = () => {
   )
 }
 
-export const Toolbar = () => {
-  useFetchMock(fetchMock => {
-    mockCompile(fetchMock, 500)
-    mockBuildFile(fetchMock)
-  })
-
-  return withContextRoot(
-    <div className="pdf">
-      <PdfPreviewToolbar />
-    </div>,
-    scope
-  )
-}
-
 export const HybridToolbar = () => {
   useFetchMock(fetchMock => {
     mockCompile(fetchMock, 500)