Reduce review panel calls to Trans (#17385)

GitOrigin-RevId: fdc7b3c2cd2506c810a785462fcd120a3a05da78

services/web/frontend/js/features/source-editor/components/review-panel/editor-widgets/toggle-widget.tsx

@@ -3,6 +3,7 @@ import { useReviewPanelUpdaterFnsContext } from '../../../context/review-panel/r
 import { useCodeMirrorStateContext } from '../../codemirror-editor'
 import { EditorView } from '@codemirror/view'
 import classnames from 'classnames'
+import { memo } from 'react'
 
 function ToggleWidget() {
   const { toggleReviewPanel } = useReviewPanelUpdaterFnsContext()
@@ -16,12 +17,16 @@ function ToggleWidget() {
       })}
       onClick={toggleReviewPanel}
     >
-      <Trans
+      <TrackChangesOn />
-        i18nKey="track_changes_is_on"
-        components={{ strong: <strong /> }}
-      />
     </button>
   )
 }
 
+const TrackChangesOn = memo(() => {
+  return (
+    <Trans i18nKey="track_changes_is_on" components={{ strong: <strong /> }} />
+  )
+})
+TrackChangesOn.displayName = 'TrackChangesOn'
+
 export default ToggleWidget

services/web/frontend/js/features/source-editor/components/review-panel/review-panel.tsx

@@ -6,57 +6,64 @@ import { useCodeMirrorViewContext } from '../codemirror-editor'
 import { useReviewPanelValueContext } from '../../context/review-panel/review-panel-context'
 import { isCurrentFileView } from '../../utils/sub-view'
 import { useLayoutContext } from '@/shared/context/layout-context'
-import { useIdeContext } from '@/shared/context/ide-context'
 import classnames from 'classnames'
 import { lazy, memo } from 'react'
 import getMeta from '@/utils/meta'
+import { SubView } from '../../../../../../types/review-panel/review-panel'
+
+const isReactIde: boolean = getMeta('ol-idePageReact')
 
 type ReviewPanelViewProps = {
   parentDomNode: Element
 }
 
 function ReviewPanelView({ parentDomNode }: ReviewPanelViewProps) {
-  const { subView, loadingThreads, layoutToLeft } = useReviewPanelValueContext()
+  const { subView } = useReviewPanelValueContext()
-  const { reviewPanelOpen, miniReviewPanelVisible } = useLayoutContext()
-  const { isReactIde } = useIdeContext()
-
-  const content = (
-    <>
-      <EditorWidgets />
-      {isCurrentFileView(subView) ? (
-        <CurrentFileContainer />
-      ) : (
-        <OverviewContainer />
-      )}
-    </>
-  )
 
   return ReactDOM.createPortal(
     isReactIde ? (
-      <div
+      <ReviewPanelContainer />
-        className={classnames('review-panel-wrapper', {
-          'rp-state-current-file': subView === 'cur_file',
-          'rp-state-current-file-expanded':
-            subView === 'cur_file' && reviewPanelOpen,
-          'rp-state-current-file-mini':
-            subView === 'cur_file' && !reviewPanelOpen,
-          'rp-state-overview': subView === 'overview',
-          'rp-size-mini': miniReviewPanelVisible,
-          'rp-size-expanded': reviewPanelOpen,
-          'rp-layout-left': layoutToLeft,
-          'rp-loading-threads': loadingThreads,
-        })}
-      >
-        {content}
-      </div>
     ) : (
-      content
+      <ReviewPanelContent subView={subView} />
     ),
     parentDomNode
   )
 }
 
-const isReactIde: boolean = getMeta('ol-idePageReact')
+const ReviewPanelContainer = memo(() => {
+  const { subView, loadingThreads, layoutToLeft } = useReviewPanelValueContext()
+  const { reviewPanelOpen, miniReviewPanelVisible } = useLayoutContext()
+
+  const className = classnames('review-panel-wrapper', {
+    'rp-state-current-file': subView === 'cur_file',
+    'rp-state-current-file-expanded': subView === 'cur_file' && reviewPanelOpen,
+    'rp-state-current-file-mini': subView === 'cur_file' && !reviewPanelOpen,
+    'rp-state-overview': subView === 'overview',
+    'rp-size-mini': miniReviewPanelVisible,
+    'rp-size-expanded': reviewPanelOpen,
+    'rp-layout-left': layoutToLeft,
+    'rp-loading-threads': loadingThreads,
+  })
+
+  return (
+    <div className={className}>
+      <ReviewPanelContent subView={subView} />
+    </div>
+  )
+})
+ReviewPanelContainer.displayName = 'ReviewPanelContainer'
+
+const ReviewPanelContent = memo<{ subView: SubView }>(({ subView }) => (
+  <>
+    <EditorWidgets />
+    {isCurrentFileView(subView) ? (
+      <CurrentFileContainer />
+    ) : (
+      <OverviewContainer />
+    )}
+  </>
+))
+ReviewPanelContent.displayName = 'ReviewPanelContent'
 
 const ReviewPanelProvider = lazy(() =>
   isReactIde

services/web/frontend/js/features/source-editor/components/review-panel/toolbar/toggle-menu.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { memo, useState } from 'react'
 import { Trans } from 'react-i18next'
 import Icon from '../../../../../shared/components/icon'
 import TrackChangesMenu from '@/features/source-editor/components/review-panel/toolbar/track-changes-menu'
@@ -47,17 +47,7 @@ function ToggleMenu() {
           className="review-panel-toolbar-collapse-button"
           onClick={handleToggleFullTCStateCollapse}
         >
-          {wantTrackChanges ? (
+          {wantTrackChanges ? <TrackChangesOn /> : <TrackChangesOff />}
-            <Trans
-              i18nKey="track_changes_is_on"
-              components={{ strong: <strong /> }}
-            />
-          ) : (
-            <Trans
-              i18nKey="track_changes_is_off"
-              components={{ strong: <strong /> }}
-            />
-          )}
           <span
             className={classnames('rp-tc-state-collapse', {
               'rp-tc-state-collapse-on': shouldCollapse,
@@ -75,4 +65,16 @@ function ToggleMenu() {
   )
 }
 
-export default ToggleMenu
+const TrackChangesOn = memo(() => {
+  return (
+    <Trans i18nKey="track_changes_is_on" components={{ strong: <strong /> }} />
+  )
+})
+TrackChangesOn.displayName = 'TrackChangesOn'
+
+const TrackChangesOff = memo(() => (
+  <Trans i18nKey="track_changes_is_off" components={{ strong: <strong /> }} />
+))
+TrackChangesOff.displayName = 'TrackChangesOff'
+
+export default memo(ToggleMenu)