Move divider into overview-file component so that they don't render if file doesn't (#20882)

GitOrigin-RevId: fef584609fa06e6313323c27bc6f9ab9b9a6c815

services/web/frontend/js/features/review-panel-new/components/review-panel-overview-file.tsx

@@ -59,44 +59,47 @@ export const ReviewPanelOverviewFile: FC<{
   }
 
   return (
-    <div>
-      <Button
-        bsClass="review-panel-overview-file-header"
-        bsStyle={null}
-        onClick={toggleCollapsed}
-      >
-        <MaterialIcon
-          type={collapsed ? 'keyboard_arrow_right' : 'keyboard_arrow_down'}
-        />
-        {doc.doc.name}
-        <div className="review-panel-overview-file-entry-count">
-          {numEntries}
-        </div>
-      </Button>
+    <>
+      <div>
+        <Button
+          bsClass="review-panel-overview-file-header"
+          bsStyle={null}
+          onClick={toggleCollapsed}
+        >
+          <MaterialIcon
+            type={collapsed ? 'keyboard_arrow_right' : 'keyboard_arrow_down'}
+          />
+          {doc.doc.name}
+          <div className="review-panel-overview-file-entry-count">
+            {numEntries}
+          </div>
+        </Button>
 
-      {!collapsed && (
-        <div className="review-panel-overview-file-entries">
-          {changes.map(change => (
-            <ReviewPanelChange
-              key={change.id}
-              change={change}
-              aggregate={aggregates.get(change.id)}
-              editable={false}
-              docId={doc.doc.id}
-              hoverRanges={false}
-            />
-          ))}
+        {!collapsed && (
+          <div className="review-panel-overview-file-entries">
+            {changes.map(change => (
+              <ReviewPanelChange
+                key={change.id}
+                change={change}
+                aggregate={aggregates.get(change.id)}
+                editable={false}
+                docId={doc.doc.id}
+                hoverRanges={false}
+              />
+            ))}
 
-          {unresolvedComments.map(comment => (
-            <ReviewPanelComment
-              key={comment.id}
-              comment={comment}
-              docId={doc.doc.id}
-              hoverRanges={false}
-            />
-          ))}
-        </div>
-      )}
-    </div>
+            {unresolvedComments.map(comment => (
+              <ReviewPanelComment
+                key={comment.id}
+                comment={comment}
+                docId={doc.doc.id}
+                hoverRanges={false}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+      <div className="review-panel-overfile-divider" />
+    </>
   )
 }

services/web/frontend/js/features/review-panel-new/components/review-panel-overview.tsx

@@ -1,4 +1,4 @@
-import { FC, Fragment, useMemo } from 'react'
+import { FC, useMemo } from 'react'
 import { useFileTreeData } from '@/shared/context/file-tree-data-context'
 import { Ranges, useRangesContext } from '../context/ranges-context'
 import { useTranslation } from 'react-i18next'
@@ -58,12 +58,7 @@ export const ReviewPanelOverview: FC = () => {
           {docs.map(doc => {
             const ranges = rangesForDocs.get(doc.doc.id)
             return (
-              ranges && (
-                <Fragment key={doc.doc.id}>
-                  <ReviewPanelOverviewFile doc={doc} ranges={ranges} />
-                  <div className="review-panel-overfile-divider" />
-                </Fragment>
-              )
+              ranges && <ReviewPanelOverviewFile doc={doc} ranges={ranges} />
             )
           })}
         </div>