From 5c4ea500335c04acc1c899fb8909cbbc757cd748 Mon Sep 17 00:00:00 2001
From: David <33458145+davidmcpowell@users.noreply.github.com>
Date: Thu, 10 Oct 2024 14:50:50 +0200
Subject: [PATCH] Move divider into overview-file component so that they don't
 render if file doesn't (#20882)

GitOrigin-RevId: fef584609fa06e6313323c27bc6f9ab9b9a6c815
---
 .../components/review-panel-overview-file.tsx | 77 ++++++++++---------
 .../components/review-panel-overview.tsx      |  9 +--
 2 files changed, 42 insertions(+), 44 deletions(-)

diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-overview-file.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-overview-file.tsx
index d20b6e7f7d..15a87548d7 100644
--- a/services/web/frontend/js/features/review-panel-new/components/review-panel-overview-file.tsx
+++ b/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" />
+    </>
   )
 }
diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-overview.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-overview.tsx
index 6248075ded..575419677d 100644
--- a/services/web/frontend/js/features/review-panel-new/components/review-panel-overview.tsx
+++ b/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>