[web] Rename "Revert file" to "Restore this version" (#19069)

* rename revert file to restore file

* rename file/function name

* rename split test

* fix formatting

* do not rename split test name

* fix typo

GitOrigin-RevId: e4e2eae622a270b3b6483348f441ddd424623f81

services/web/frontend/extracted-translations.json

@@ -1101,19 +1101,18 @@
   "resolved_comments": "",
   "restore": "",
   "restore_file": "",
+  "restore_file_confirmation_message": "",
+  "restore_file_confirmation_title": "",
+  "restore_file_error_message": "",
+  "restore_file_error_title": "",
+  "restore_file_version": "",
   "restoring": "",
   "resync_completed": "",
   "resync_message": "",
   "resync_project_history": "",
   "retry_test": "",
   "reverse_x_sort_order": "",
-  "revert_file": "",
-  "revert_file_confirmation_message": "",
-  "revert_file_confirmation_title": "",
-  "revert_file_error_message": "",
-  "revert_file_error_title": "",
   "revert_pending_plan_change": "",
-  "reverting": "",
   "review": "",
   "review_your_peers_work": "",
   "revoke": "",

services/web/frontend/js/features/history/components/diff-view/modals/restore-file-confirm-modal.tsx

@@ -3,19 +3,19 @@ import { useMemo } from 'react'
 import { Button, Modal } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 
-type RevertFileConfirmModalProps = {
+type RestoreFileConfirmModalProps = {
   show: boolean
   timestamp: number
   onConfirm: () => void
   onHide: () => void
 }
 
-export function RevertFileConfirmModal({
+export function RestoreFileConfirmModal({
   show,
   timestamp,
   onConfirm,
   onHide,
-}: RevertFileConfirmModalProps) {
+}: RestoreFileConfirmModalProps) {
   const { t } = useTranslation()
   const date = useMemo(() => formatTime(timestamp, 'Do MMMM'), [timestamp])
   const time = useMemo(() => formatTime(timestamp, 'h:mm a'), [timestamp])
@@ -23,10 +23,10 @@ export function RevertFileConfirmModal({
   return (
     <Modal show={show} onHide={onHide}>
       <Modal.Header closeButton>
-        <Modal.Title>{t('revert_file_confirmation_title')}</Modal.Title>
+        <Modal.Title>{t('restore_file_confirmation_title')}</Modal.Title>
       </Modal.Header>
       <Modal.Body>
-        {t('revert_file_confirmation_message', { date, time })}
+        {t('restore_file_confirmation_message', { date, time })}
       </Modal.Body>
       <Modal.Footer>
         <Button bsStyle={null} className="btn-secondary" onClick={onHide}>

services/web/frontend/js/features/history/components/diff-view/modals/restore-file-error-modal.tsx

@@ -1,7 +1,7 @@
 import { Button, Modal } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 
-export function RevertFileErrorModal({
+export function RestoreFileErrorModal({
   resetErrorBoundary,
 }: {
   resetErrorBoundary: VoidFunction
@@ -11,9 +11,9 @@ export function RevertFileErrorModal({
   return (
     <Modal show onHide={resetErrorBoundary}>
       <Modal.Header closeButton>
-        <Modal.Title>{t('revert_file_error_title')}</Modal.Title>
+        <Modal.Title>{t('restore_file_error_title')}</Modal.Title>
       </Modal.Header>
-      <Modal.Body>{t('revert_file_error_message')}</Modal.Body>
+      <Modal.Body>{t('restore_file_error_message')}</Modal.Body>
       <Modal.Footer>
         <Button
           bsStyle={null}

services/web/frontend/js/features/history/components/diff-view/toolbar/toolbar-restore-file-to-version-button.tsx

@@ -1,21 +1,21 @@
 import { Button } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import type { HistoryContextValue } from '../../../context/types/history-context-value'
-import { useRevertSelectedFile } from '@/features/history/context/hooks/use-revert-selected-file'
 import withErrorBoundary from '@/infrastructure/error-boundary'
-import { RevertFileConfirmModal } from '../modals/revert-file-confirm-modal'
+import { RestoreFileConfirmModal } from '../modals/restore-file-confirm-modal'
 import { useState } from 'react'
-import { RevertFileErrorModal } from '../modals/revert-file-error-modal'
+import { RestoreFileErrorModal } from '../modals/restore-file-error-modal'
+import { useRestoreSelectedFile } from '@/features/history/context/hooks/use-restore-selected-file'
 
 type ToolbarRevertingFileButtonProps = {
   selection: HistoryContextValue['selection']
 }
 
-function ToolbarRevertFileButton({
+function ToolbarRestoreFileToVersionButton({
   selection,
 }: ToolbarRevertingFileButtonProps) {
   const { t } = useTranslation()
-  const { revertSelectedFile, isLoading } = useRevertSelectedFile()
+  const { restoreSelectedFile, isLoading } = useRestoreSelectedFile()
   const [showConfirmModal, setShowConfirmModal] = useState(false)
 
   if (!selection.updateRange || !selection.selectedFile) {
@@ -24,26 +24,29 @@ function ToolbarRevertFileButton({
 
   return (
     <>
-      <RevertFileConfirmModal
+      <RestoreFileConfirmModal
         show={showConfirmModal}
         timestamp={selection.updateRange.toVTimestamp}
         onConfirm={() => {
           setShowConfirmModal(false)
-          revertSelectedFile(selection)
+          restoreSelectedFile(selection)
         }}
         onHide={() => setShowConfirmModal(false)}
       />
       <Button
-        className="btn-secondary history-react-toolbar-revert-file-button"
+        className="btn-secondary"
         bsSize="xs"
         bsStyle={null}
         onClick={() => setShowConfirmModal(true)}
         disabled={isLoading}
       >
-        {isLoading ? `${t('reverting')}…` : t('revert_file')}
+        {isLoading ? `${t('restoring')}…` : t('restore_file_version')}
       </Button>
     </>
   )
 }
 
-export default withErrorBoundary(ToolbarRevertFileButton, RevertFileErrorModal)
+export default withErrorBoundary(
+  ToolbarRestoreFileToVersionButton,
+  RestoreFileErrorModal
+)

services/web/frontend/js/features/history/components/diff-view/toolbar/toolbar.tsx

@@ -5,7 +5,7 @@ import ToolbarDatetime from './toolbar-datetime'
 import ToolbarFileInfo from './toolbar-file-info'
 import ToolbarRestoreFileButton from './toolbar-restore-file-button'
 import { isFileRemoved } from '../../../utils/file-diff'
-import ToolbarRevertFileButton from './toolbar-revert-file-button'
+import ToolbarRestoreFileToVersionButton from './toolbar-restore-file-to-version-button'
 import { useFeatureFlag } from '@/shared/context/split-test-context'
 
 type ToolbarProps = {
@@ -14,14 +14,15 @@ type ToolbarProps = {
 }
 
 export default function Toolbar({ diff, selection }: ToolbarProps) {
-  const hasRevertFile = useFeatureFlag('revert-file')
+  const hasRestoreFileToVersion = useFeatureFlag('revert-file')
 
-  const showRevertFileButton = hasRevertFile && selection.selectedFile
+  const showRestoreFileToVersionButton =
+    hasRestoreFileToVersion && selection.selectedFile
 
   const showRestoreFileButton =
     selection.selectedFile &&
     isFileRemoved(selection.selectedFile) &&
-    !showRevertFileButton
+    !showRestoreFileToVersionButton
 
   return (
     <div className="history-react-toolbar">
@@ -32,8 +33,8 @@ export default function Toolbar({ diff, selection }: ToolbarProps) {
       {showRestoreFileButton ? (
         <ToolbarRestoreFileButton selection={selection} />
       ) : null}
-      {showRevertFileButton ? (
-        <ToolbarRevertFileButton selection={selection} />
+      {showRestoreFileToVersionButton ? (
+        <ToolbarRestoreFileToVersionButton selection={selection} />
       ) : null}
     </div>
   )

services/web/frontend/js/features/history/context/hooks/use-restore-selected-file.ts

@@ -1,6 +1,6 @@
 import { useIdeContext } from '../../../../shared/context/ide-context'
 import { useLayoutContext } from '../../../../shared/context/layout-context'
-import { revertFile } from '../../services/api'
+import { restoreFileToVersion } from '../../services/api'
 import { isFileRemoved } from '../../utils/file-diff'
 import { useHistoryContext } from '../history-context'
 import type { HistoryContextValue } from '../types/history-context-value'
@@ -8,33 +8,33 @@ import { useErrorHandler } from 'react-error-boundary'
 import { useFileTreeData } from '@/shared/context/file-tree-data-context'
 import { findInTree } from '@/features/file-tree/util/find-in-tree'
 import { useCallback, useEffect, useState } from 'react'
-import { RevertFileResponse } from '@/features/history/services/types/revert-file'
+import { RestoreFileResponse } from '../../services/types/restore-file'
 
-const REVERT_FILE_TIMEOUT = 3000
+const RESTORE_FILE_TIMEOUT = 3000
 
-type RevertState =
+type RestoreState =
   | 'idle'
-  | 'reverting'
+  | 'restoring'
   | 'waitingForFileTree'
   | 'complete'
   | 'error'
   | 'timedOut'
 
-export function useRevertSelectedFile() {
+export function useRestoreSelectedFile() {
   const { projectId } = useHistoryContext()
   const ide = useIdeContext()
   const { setView } = useLayoutContext()
   const handleError = useErrorHandler()
   const { fileTreeData } = useFileTreeData()
-  const [state, setState] = useState<RevertState>('idle')
-  const [revertedFileMetadata, setRevertedFileMetadata] =
-    useState<RevertFileResponse | null>(null)
+  const [state, setState] = useState<RestoreState>('idle')
+  const [restoredFileMetadata, setRestoredFileMetadata] =
+    useState<RestoreFileResponse | null>(null)
 
-  const isLoading = state === 'reverting' || state === 'waitingForFileTree'
+  const isLoading = state === 'restoring' || state === 'waitingForFileTree'
 
   useEffect(() => {
-    if (state === 'waitingForFileTree' && revertedFileMetadata) {
-      const result = findInTree(fileTreeData, revertedFileMetadata.id)
+    if (state === 'waitingForFileTree' && restoredFileMetadata) {
+      const result = findInTree(fileTreeData, restoredFileMetadata.id)
       if (result) {
         setState('complete')
         const { _id: id } = result.entity
@@ -42,7 +42,7 @@ export function useRevertSelectedFile() {
 
         // Once Angular is gone, these can be replaced with calls to context
         // methods
-        if (revertedFileMetadata.type === 'doc') {
+        if (restoredFileMetadata.type === 'doc') {
           ide.editorManager.openDocId(id)
         } else {
           ide.binaryFilesManager.openFileWithId(id)
@@ -52,7 +52,7 @@ export function useRevertSelectedFile() {
   }, [
     state,
     fileTreeData,
-    revertedFileMetadata,
+    restoredFileMetadata,
     ide.editorManager,
     ide.binaryFilesManager,
     setView,
@@ -63,7 +63,7 @@ export function useRevertSelectedFile() {
       const timer = window.setTimeout(() => {
         setState('timedOut')
         handleError(new Error('timed out'))
-      }, REVERT_FILE_TIMEOUT)
+      }, RESTORE_FILE_TIMEOUT)
 
       return () => {
         window.clearTimeout(timer)
@@ -71,7 +71,7 @@ export function useRevertSelectedFile() {
     }
   }, [handleError, state])
 
-  const revertSelectedFile = useCallback(
+  const restoreSelectedFile = useCallback(
     (selection: HistoryContextValue['selection']) => {
       const { selectedFile, files } = selection
 
@@ -84,11 +84,11 @@ export function useRevertSelectedFile() {
           if (!toVersion) {
             return
           }
-          setState('reverting')
+          setState('restoring')
 
-          revertFile(projectId, file.pathname, toVersion).then(
-            (data: RevertFileResponse) => {
-              setRevertedFileMetadata(data)
+          restoreFileToVersion(projectId, file.pathname, toVersion).then(
+            (data: RestoreFileResponse) => {
+              setRestoredFileMetadata(data)
               setState('waitingForFileTree')
             },
             error => {
@@ -102,5 +102,5 @@ export function useRevertSelectedFile() {
     [handleError, projectId]
   )
 
-  return { revertSelectedFile, isLoading }
+  return { restoreSelectedFile, isLoading }
 }

services/web/frontend/js/features/history/services/api.ts

@@ -8,7 +8,6 @@ import { FetchUpdatesResponse } from './types/update'
 import { Label } from './types/label'
 import { DocDiffResponse } from './types/doc'
 import { RestoreFileResponse } from './types/restore-file'
-import { RevertFileResponse } from './types/revert-file'
 
 const BATCH_SIZE = 10
 
@@ -96,12 +95,12 @@ export function restoreFile(projectId: string, selectedFile: FileRemoved) {
   })
 }
 
-export function revertFile(
+export function restoreFileToVersion(
   projectId: string,
   pathname: string,
   version: number
 ) {
-  return postJSON<RevertFileResponse>(`/project/${projectId}/revert_file`, {
+  return postJSON<RestoreFileResponse>(`/project/${projectId}/revert_file`, {
     body: {
       version,
       pathname,

services/web/frontend/js/features/history/services/types/revert-file.ts

@@ -1,4 +0,0 @@
-export type RevertFileResponse = {
-  id: string
-  type: 'doc' | 'file'
-}

services/web/locales/en.json

@@ -1616,6 +1616,11 @@
   "resolved_comments": "Resolved comments",
   "restore": "Restore",
   "restore_file": "Restore file",
+  "restore_file_confirmation_message": "Your current file will restore to the version from __date__ at __time__.",
+  "restore_file_confirmation_title": "Restore this version?",
+  "restore_file_error_message": "There was a problem restoring the file version. Please try again in a few moments. If the problem continues please contact us.",
+  "restore_file_error_title": "Restore File Error",
+  "restore_file_version": "Restore this version",
   "restoring": "Restoring",
   "restricted": "Restricted",
   "restricted_no_permission": "Restricted, sorry you don’t have permission to load this page.",
@@ -1625,13 +1630,7 @@
   "retry_test": "Retry test",
   "return_to_login_page": "Return to Login page",
   "reverse_x_sort_order": "Reverse __x__ sort order",
-  "revert_file": "Revert file",
-  "revert_file_confirmation_message": "Your current file will revert to the version from __date__ at __time__.",
-  "revert_file_confirmation_title": "Restore this version?",
-  "revert_file_error_message": "There was a problem reverting the file version. Please try again in a few moments. If the problem continues please contact us.",
-  "revert_file_error_title": "Revert File Error",
   "revert_pending_plan_change": "Revert scheduled plan change",
-  "reverting": "Reverting",
   "review": "Review",
   "review_your_peers_work": "Review your peers’ work",
   "revoke": "Revoke",