Merge pull request #4158 from overleaf/ae-rename-file-view

Rename `binary-file` components to `file-view`

GitOrigin-RevId: b960d4e6f154ee1a5847782a1fcb1e4e61159603

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

@@ -887,7 +887,7 @@ const ProjectController = {
                 'new_navigation_ui',
                 user.alphaProgram
               ),
-              showNewBinaryFileUI: shouldDisplayFeature('new_binary_file'),
+              showNewFileViewUI: shouldDisplayFeature('new_file_view'),
               showSymbolPalette: shouldDisplayFeature(
                 'symbol_palette',
                 user.alphaProgram

services/web/app/views/project/editor.pug

@@ -105,8 +105,8 @@ block content
 					.ui-layout-center
 						include ./editor/editor
 
-						if showNewBinaryFileUI
-							include ./editor/binary-file-react
+						if showNewFileViewUI
+							include ./editor/file-view
 						else
 							include ./editor/binary-file
 						include ./editor/history

services/web/app/views/project/editor/file-view.pug

@@ -1,9 +1,9 @@
 div(
-	ng-controller="ReactBinaryFileController"
+	ng-controller="FileViewController"
 	ng-show="ui.view == 'file'"
 	ng-if="openFile"
 )
-	binary-file(
+	file-view(
 		file='file'
 		store-references-keys='storeReferencesKeys'
 	)

services/web/frontend/js/features/file-view/components/file-view-header.js

@@ -31,7 +31,7 @@ function shortenedUrl(url) {
   return url
 }
 
-export default function BinaryFileHeader({ file, storeReferencesKeys }) {
+export default function FileViewHeader({ file, storeReferencesKeys }) {
   const { projectId } = useEditorContext({
     projectId: PropTypes.string.isRequired,
   })
@@ -107,7 +107,7 @@ export default function BinaryFileHeader({ file, storeReferencesKeys }) {
   }, [file, projectId, isMounted, storeReferencesKeys])
 
   return (
-    <div className="binary-file-header">
+    <div>
       {file.linkedFileData && fileInfo}
       {file.linkedFileData &&
         tprLinkedFileInfo.map(({ import: { LinkedFileInfo }, path }) => (
@@ -149,7 +149,7 @@ export default function BinaryFileHeader({ file, storeReferencesKeys }) {
   )
 }
 
-BinaryFileHeader.propTypes = {
+FileViewHeader.propTypes = {
   file: PropTypes.shape({
     id: PropTypes.string,
     name: PropTypes.string,

services/web/frontend/js/features/file-view/components/file-view-image.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { useEditorContext } from '../../../shared/context/editor-context'
 
-export default function BinaryFileImage({ fileName, fileId, onLoad, onError }) {
+export default function FileViewImage({ fileName, fileId, onLoad, onError }) {
   const { projectId } = useEditorContext({
     projectId: PropTypes.string.isRequired,
   })
@@ -18,7 +18,7 @@ export default function BinaryFileImage({ fileName, fileId, onLoad, onError }) {
   )
 }
 
-BinaryFileImage.propTypes = {
+FileViewImage.propTypes = {
   fileName: PropTypes.string.isRequired,
   fileId: PropTypes.string.isRequired,
   onLoad: PropTypes.func.isRequired,

services/web/frontend/js/features/file-view/components/file-view-text.js

@@ -4,7 +4,7 @@ import { useEditorContext } from '../../../shared/context/editor-context'
 
 const MAX_FILE_SIZE = 2 * 1024 * 1024
 
-export default function BinaryFileText({ file, onLoad, onError }) {
+export default function FileViewText({ file, onLoad, onError }) {
   const { projectId } = useEditorContext({
     projectId: PropTypes.string.isRequired,
   })
@@ -65,7 +65,7 @@ export default function BinaryFileText({ file, onLoad, onError }) {
   )
 }
 
-BinaryFileText.propTypes = {
+FileViewText.propTypes = {
   file: PropTypes.shape({ id: PropTypes.string }).isRequired,
   onLoad: PropTypes.func.isRequired,
   onError: PropTypes.func.isRequired,

services/web/frontend/js/features/file-view/components/file-view.js

@@ -2,16 +2,16 @@ import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 
-import BinaryFileHeader from './binary-file-header'
-import BinaryFileImage from './binary-file-image'
-import BinaryFileText from './binary-file-text'
+import FileViewHeader from './file-view-header'
+import FileViewImage from './file-view-image'
+import FileViewText from './file-view-text'
 import Icon from '../../../shared/components/icon'
 
 const imageExtensions = ['png', 'jpg', 'jpeg', 'gif']
 
 const textExtensions = window.ExposedSettings.textExtensions
 
-export default function BinaryFile({ file, storeReferencesKeys }) {
+export default function FileView({ file, storeReferencesKeys }) {
   const [contentLoading, setContentLoading] = useState(true)
   const [hasError, setHasError] = useState(false)
 
@@ -36,9 +36,9 @@ export default function BinaryFile({ file, storeReferencesKeys }) {
 
   const content = (
     <>
-      <BinaryFileHeader file={file} storeReferencesKeys={storeReferencesKeys} />
+      <FileViewHeader file={file} storeReferencesKeys={storeReferencesKeys} />
       {imageExtensions.includes(extension) && (
-        <BinaryFileImage
+        <FileViewImage
           fileName={file.name}
           fileId={file.id}
           onLoad={handleLoading}
@@ -46,7 +46,7 @@ export default function BinaryFile({ file, storeReferencesKeys }) {
         />
       )}
       {textExtensions.includes(extension) && (
-        <BinaryFileText
+        <FileViewText
           file={file}
           onLoad={handleLoading}
           onError={handleError}
@@ -56,9 +56,9 @@ export default function BinaryFile({ file, storeReferencesKeys }) {
   )
 
   return (
-    <div className="binary-file full-size">
+    <div className="file-view full-size">
       {!hasError && content}
-      {!isUnpreviewableFile && contentLoading && <BinaryFileLoadingIndicator />}
+      {!isUnpreviewableFile && contentLoading && <FileViewLoadingIndicator />}
       {(isUnpreviewableFile || hasError) && (
         <p className="no-preview">{t('no_preview_available')}</p>
       )}
@@ -66,10 +66,10 @@ export default function BinaryFile({ file, storeReferencesKeys }) {
   )
 }
 
-function BinaryFileLoadingIndicator() {
+function FileViewLoadingIndicator() {
   const { t } = useTranslation()
   return (
-    <div className="loading-panel loading-panel-binary-files">
+    <div className="loading-panel loading-panel-file-view">
       <span>
         <Icon type="refresh" modifier="spin" />
         &nbsp;&nbsp;{t('loading')}…
@@ -78,7 +78,7 @@ function BinaryFileLoadingIndicator() {
   )
 }
 
-BinaryFile.propTypes = {
+FileView.propTypes = {
   file: PropTypes.shape({
     id: PropTypes.string,
     name: PropTypes.string,

services/web/frontend/js/features/file-view/controllers/file-view-controller.js

@@ -3,10 +3,10 @@ import { react2angular } from 'react2angular'
 import _ from 'lodash'
 
 import { rootContext } from '../../../shared/context/root-context'
-import BinaryFile from '../components/binary-file'
+import FileView from '../components/file-view'
 
 export default App.controller(
-  'ReactBinaryFileController',
+  'FileViewController',
   function ($scope, $rootScope) {
     $scope.file = $scope.openFile
 
@@ -18,6 +18,6 @@ export default App.controller(
 )
 
 App.component(
-  'binaryFile',
-  react2angular(rootContext.use(BinaryFile), ['storeReferencesKeys', 'file'])
+  'fileView',
+  react2angular(rootContext.use(FileView), ['storeReferencesKeys', 'file'])
 )

services/web/frontend/js/ide.js

@@ -35,9 +35,9 @@ import SafariScrollPatcher from './ide/SafariScrollPatcher'
 import { loadServiceWorker } from './ide/pdfng/directives/serviceWorkerManager'
 import './ide/cobranding/CobrandingDataService'
 import './ide/settings/index'
-import './ide/binary-files/index'
 import './ide/chat/index'
 import './ide/clone/index'
+import './ide/file-view/index'
 import './ide/hotkeys/index'
 import './ide/wordcount/index'
 import './ide/directives/layout'

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

@@ -1 +0,0 @@
-import '../../features/binary-file/controllers/binary-file-controller'

services/web/frontend/js/ide/file-view/index.js

@@ -0,0 +1 @@
+import '../../features/file-view/controllers/file-view-controller'

services/web/frontend/stories/file-view.stories.js

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { ContextRoot } from '../js/shared/context/root-context'
-import BinaryFile from '../js/features/binary-file/components/binary-file'
+import FileView from '../js/features/file-view/components/file-view'
 import useFetchMock from './hooks/use-fetch-mock'
 
 const setupFetchMock = fetchMock => {
@@ -26,7 +26,7 @@ const fileData = {
 }
 
 export const FileFromUrl = args => {
-  return <BinaryFile {...args} />
+  return <FileView {...args} />
 }
 FileFromUrl.args = {
   file: {
@@ -39,7 +39,7 @@ FileFromUrl.args = {
 }
 
 export const FileFromProjectWithLinkableProjectId = args => {
-  return <BinaryFile {...args} />
+  return <FileView {...args} />
 }
 FileFromProjectWithLinkableProjectId.args = {
   file: {
@@ -53,7 +53,7 @@ FileFromProjectWithLinkableProjectId.args = {
 }
 
 export const FileFromProjectWithoutLinkableProjectId = args => {
-  return <BinaryFile {...args} />
+  return <FileView {...args} />
 }
 FileFromProjectWithoutLinkableProjectId.args = {
   file: {
@@ -67,7 +67,7 @@ FileFromProjectWithoutLinkableProjectId.args = {
 }
 
 export const FileFromProjectOutputWithLinkableProject = args => {
-  return <BinaryFile {...args} />
+  return <FileView {...args} />
 }
 FileFromProjectOutputWithLinkableProject.args = {
   file: {
@@ -81,7 +81,7 @@ FileFromProjectOutputWithLinkableProject.args = {
 }
 
 export const FileFromProjectOutputWithoutLinkableProjectId = args => {
-  return <BinaryFile {...args} />
+  return <FileView {...args} />
 }
 FileFromProjectOutputWithoutLinkableProjectId.args = {
   file: {
@@ -95,7 +95,7 @@ FileFromProjectOutputWithoutLinkableProjectId.args = {
 }
 
 export const ImageFile = args => {
-  return <BinaryFile {...args} />
+  return <FileView {...args} />
 }
 ImageFile.args = {
   file: {
@@ -111,7 +111,7 @@ ImageFile.args = {
 }
 
 export const ThirdPartyReferenceFile = args => {
-  return <BinaryFile {...args} />
+  return <FileView {...args} />
 }
 
 ThirdPartyReferenceFile.args = {
@@ -125,7 +125,7 @@ ThirdPartyReferenceFile.args = {
 }
 
 export const ThirdPartyReferenceFileWithError = args => {
-  return <BinaryFile {...args} />
+  return <FileView {...args} />
 }
 ThirdPartyReferenceFileWithError.args = {
   file: {
@@ -139,7 +139,7 @@ ThirdPartyReferenceFileWithError.args = {
 }
 
 export const TextFile = args => {
-  return <BinaryFile {...args} />
+  return <FileView {...args} />
 }
 TextFile.args = {
   file: {
@@ -154,7 +154,7 @@ TextFile.args = {
 }
 
 export const UploadedFile = args => {
-  return <BinaryFile {...args} />
+  return <FileView {...args} />
 }
 UploadedFile.args = {
   file: {
@@ -165,8 +165,8 @@ UploadedFile.args = {
 }
 
 export default {
-  title: 'BinaryFile',
-  component: BinaryFile,
+  title: 'FileView',
+  component: FileView,
   args: {
     storeReferencesKeys: () => {},
   },

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

@@ -5,7 +5,7 @@
 @import './editor/pdf.less';
 @import './editor/share.less';
 @import './editor/chat.less';
-@import './editor/binary-file.less';
+@import './editor/file-view.less';
 @import './editor/search.less';
 @import './editor/publish-template.less';
 @import './editor/online-users.less';
@@ -191,7 +191,7 @@
   background-color: #fafafa;
 }
 
-.loading-panel-binary-files {
+.loading-panel-file-view {
   background-color: @gray-lightest;
 }
 

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

@@ -1,3 +1,4 @@
+.file-view,
 .binary-file {
   padding: @line-height-computed / 2;
   background-color: @gray-lightest;

services/web/test/frontend/features/file-view/components/file-view-header.test.js

@@ -9,9 +9,9 @@ import fetchMock from 'fetch-mock'
 import sinon from 'sinon'
 
 import { renderWithEditorContext } from '../../../helpers/render-with-context'
-import BinaryFileHeader from '../../../../../frontend/js/features/binary-file/components/binary-file-header.js'
+import FileViewHeader from '../../../../../frontend/js/features/file-view/components/file-view-header.js'
 
-describe('<BinaryFileHeader/>', function () {
+describe('<FileViewHeader/>', function () {
   const urlFile = {
     name: 'example.tex',
     linkedFileData: {
@@ -57,7 +57,7 @@ describe('<BinaryFileHeader/>', function () {
   describe('header text', function () {
     it('Renders the correct text for a file with the url provider', function () {
       renderWithEditorContext(
-        <BinaryFileHeader file={urlFile} storeReferencesKeys={() => {}} />
+        <FileViewHeader file={urlFile} storeReferencesKeys={() => {}} />
       )
       screen.getByText('Imported from', { exact: false })
       screen.getByText('at 3:24 am Wed, 17th Feb 21', {
@@ -67,7 +67,7 @@ describe('<BinaryFileHeader/>', function () {
 
     it('Renders the correct text for a file with the project_file provider', function () {
       renderWithEditorContext(
-        <BinaryFileHeader file={projectFile} storeReferencesKeys={() => {}} />
+        <FileViewHeader file={projectFile} storeReferencesKeys={() => {}} />
       )
       screen.getByText('Imported from', { exact: false })
       screen.getByText('Another project', { exact: false })
@@ -78,7 +78,7 @@ describe('<BinaryFileHeader/>', function () {
 
     it('Renders the correct text for a file with the project_output_file provider', function () {
       renderWithEditorContext(
-        <BinaryFileHeader
+        <FileViewHeader
           file={projectOutputFile}
           storeReferencesKeys={() => {}}
         />
@@ -101,7 +101,7 @@ describe('<BinaryFileHeader/>', function () {
       )
 
       renderWithEditorContext(
-        <BinaryFileHeader file={projectFile} storeReferencesKeys={() => {}} />
+        <FileViewHeader file={projectFile} storeReferencesKeys={() => {}} />
       )
 
       fireEvent.click(screen.getByRole('button', { name: 'Refresh' }))
@@ -132,7 +132,7 @@ describe('<BinaryFileHeader/>', function () {
       const storeReferencesKeys = sinon.stub()
 
       renderWithEditorContext(
-        <BinaryFileHeader
+        <FileViewHeader
           file={thirdPartyReferenceFile}
           storeReferencesKeys={storeReferencesKeys}
         />
@@ -152,7 +152,7 @@ describe('<BinaryFileHeader/>', function () {
   describe('The download button', function () {
     it('exists', function () {
       renderWithEditorContext(
-        <BinaryFileHeader file={urlFile} storeReferencesKeys={() => {}} />
+        <FileViewHeader file={urlFile} storeReferencesKeys={() => {}} />
       )
 
       screen.getByText('Download', { exact: false })

services/web/test/frontend/features/file-view/components/file-view-image.test.js

@@ -2,9 +2,9 @@ import React from 'react'
 import { screen } from '@testing-library/react'
 
 import { renderWithEditorContext } from '../../../helpers/render-with-context'
-import BinaryFileImage from '../../../../../frontend/js/features/binary-file/components/binary-file-image.js'
+import FileViewImage from '../../../../../frontend/js/features/file-view/components/file-view-image.js'
 
-describe('<BinaryFileImage />', function () {
+describe('<FileViewImage />', function () {
   const file = {
     id: '60097ca20454610027c442a8',
     name: 'file.jpg',
@@ -16,7 +16,7 @@ describe('<BinaryFileImage />', function () {
 
   it('renders an image', function () {
     renderWithEditorContext(
-      <BinaryFileImage
+      <FileViewImage
         fileName={file.name}
         fileId={file.id}
         onError={() => {}}

services/web/test/frontend/features/file-view/components/file-view-text.test.js

@@ -3,9 +3,9 @@ import { screen } from '@testing-library/react'
 import fetchMock from 'fetch-mock'
 
 import { renderWithEditorContext } from '../../../helpers/render-with-context'
-import BinaryFileText from '../../../../../frontend/js/features/binary-file/components/binary-file-text.js'
+import FileViewText from '../../../../../frontend/js/features/file-view/components/file-view-text.js'
 
-describe('<BinaryFileText/>', function () {
+describe('<FileViewText/>', function () {
   const file = {
     name: 'example.tex',
     linkedFileData: {
@@ -32,7 +32,7 @@ describe('<BinaryFileText/>', function () {
     )
 
     renderWithEditorContext(
-      <BinaryFileText file={file} onError={() => {}} onLoad={() => {}} />
+      <FileViewText file={file} onError={() => {}} onLoad={() => {}} />
     )
 
     await screen.findByText('Text file content', { exact: false })

services/web/test/frontend/features/file-view/components/file-view.test.js

@@ -7,9 +7,9 @@ import {
 import fetchMock from 'fetch-mock'
 
 import { renderWithEditorContext } from '../../../helpers/render-with-context'
-import BinaryFile from '../../../../../frontend/js/features/binary-file/components/binary-file.js'
+import FileView from '../../../../../frontend/js/features/file-view/components/file-view.js'
 
-describe('<BinaryFile/>', function () {
+describe('<FileView/>', function () {
   const textFile = {
     name: 'example.tex',
     linkedFileData: {
@@ -37,7 +37,7 @@ describe('<BinaryFile/>', function () {
   describe('for a text file', function () {
     it('shows a loading indicator while the file is loading', async function () {
       renderWithEditorContext(
-        <BinaryFile file={textFile} storeReferencesKeys={() => {}} />
+        <FileView file={textFile} storeReferencesKeys={() => {}} />
       )
 
       await waitForElementToBeRemoved(() =>
@@ -47,7 +47,7 @@ describe('<BinaryFile/>', function () {
 
     it('shows messaging if the text view could not be loaded', async function () {
       renderWithEditorContext(
-        <BinaryFile file={textFile} storeReferencesKeys={() => {}} />
+        <FileView file={textFile} storeReferencesKeys={() => {}} />
       )
 
       await screen.findByText('Sorry, no preview is available', {
@@ -59,7 +59,7 @@ describe('<BinaryFile/>', function () {
   describe('for an image file', function () {
     it('shows a loading indicator while the file is loading', async function () {
       renderWithEditorContext(
-        <BinaryFile file={imageFile} storeReferencesKeys={() => {}} />
+        <FileView file={imageFile} storeReferencesKeys={() => {}} />
       )
 
       screen.getByText('Loading', { exact: false })
@@ -67,7 +67,7 @@ describe('<BinaryFile/>', function () {
 
     it('shows messaging if the image could not be loaded', function () {
       renderWithEditorContext(
-        <BinaryFile file={imageFile} storeReferencesKeys={() => {}} />
+        <FileView file={imageFile} storeReferencesKeys={() => {}} />
       )
 
       // Fake the image request failing as the request is handled by the browser