Adapt review panel header with new reviewer role (#22291)

* Adapt review panel header with new reviewer role

* Remove duplicate css property

* Update position-items

GitOrigin-RevId: a2e8dac0c1d90e6d5b3f13769909cddd69b5db14

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

@@ -6,6 +6,7 @@ import MaterialIcon from '@/shared/components/material-icon'
 import { useLayoutContext } from '@/shared/context/layout-context'
 import SplitTestBadge from '@/shared/components/split-test-badge'
 import { useTranslation } from 'react-i18next'
+import { useFeatureFlag } from '@/shared/context/split-test-context'
 
 const ReviewPanelHeader: FC = () => {
   const [trackChangesMenuExpanded, setTrackChangesMenuExpanded] =
@@ -13,6 +14,8 @@ const ReviewPanelHeader: FC = () => {
   const { setReviewPanelOpen } = useLayoutContext()
   const { t } = useTranslation()
 
+  const enableReviewerRole = useFeatureFlag('reviewer-role')
+
   return (
     <div className="review-panel-header">
       <div className="review-panel-heading">
@@ -25,6 +28,7 @@ const ReviewPanelHeader: FC = () => {
             />
           </span>
         </div>
+        {enableReviewerRole && <ReviewPanelResolvedThreadsButton />}
         <button
           type="button"
           className="btn review-panel-close-button"
@@ -33,13 +37,15 @@ const ReviewPanelHeader: FC = () => {
           <MaterialIcon type="close" />
         </button>
       </div>
-      <div className="review-panel-tools">
-        <ReviewPanelResolvedThreadsButton />
-        <ReviewPanelTrackChangesMenuButton
-          menuExpanded={trackChangesMenuExpanded}
-          setMenuExpanded={setTrackChangesMenuExpanded}
-        />
-      </div>
+      {!enableReviewerRole && (
+        <div className="review-panel-tools">
+          <ReviewPanelResolvedThreadsButton />
+          <ReviewPanelTrackChangesMenuButton
+            menuExpanded={trackChangesMenuExpanded}
+            setMenuExpanded={setTrackChangesMenuExpanded}
+          />
+        </div>
+      )}
 
       {trackChangesMenuExpanded && <ReviewPanelTrackChangesMenu />}
     </div>

services/web/frontend/js/features/review-panel-new/components/review-panel-resolved-threads-button.tsx

@@ -7,12 +7,15 @@ import { ReviewPanelResolvedThreadsMenu } from './review-panel-resolved-threads-
 import { useTranslation } from 'react-i18next'
 import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
 import MaterialIcon from '@/shared/components/material-icon'
+import { useFeatureFlag } from '@/shared/context/split-test-context'
 
 export const ReviewPanelResolvedThreadsButton: FC = () => {
   const [expanded, setExpanded] = useState(false)
   const buttonRef = useRef<HTMLButtonElement>(null)
   const { t } = useTranslation()
 
+  const enableReviewerRole = useFeatureFlag('reviewer-role')
+
   return (
     <>
       <OLTooltip
@@ -21,7 +24,11 @@ export const ReviewPanelResolvedThreadsButton: FC = () => {
         description={t('resolved_comments')}
       >
         <button
-          className="resolved-comments-toggle"
+          className={
+            enableReviewerRole
+              ? 'review-panel-resolved-comments-toggle-reviewer-role'
+              : 'review-panel-resolved-comments-toggle'
+          }
           ref={buttonRef}
           onClick={() => setExpanded(true)}
         >

services/web/frontend/js/features/review-panel-new/hooks/use-review-panel-styles.ts

@@ -1,9 +1,14 @@
 import { CSSProperties, useCallback, useEffect, useState } from 'react'
 import { useCodeMirrorViewContext } from '@/features/source-editor/components/codemirror-context'
+import { useFeatureFlag } from '@/shared/context/split-test-context'
 
 export const useReviewPanelStyles = (mini: boolean) => {
   const view = useCodeMirrorViewContext()
-  const [styles, setStyles] = useState<CSSProperties>()
+  const enableReviewerRole = useFeatureFlag('reviewer-role')
+
+  const [styles, setStyles] = useState<CSSProperties>({
+    '--review-panel-header-height': enableReviewerRole ? '36px' : '69px',
+  } as CSSProperties)
 
   const updateScrollDomVariables = useCallback((element: HTMLDivElement) => {
     const { top, bottom } = element.getBoundingClientRect()

services/web/frontend/js/features/review-panel-new/utils/position-items.ts

@@ -1,6 +1,7 @@
+import { isSplitTestEnabled } from '@/utils/splitTestUtils'
 import { debounce } from 'lodash'
 
-const COLLAPSED_HEADER_HEIGHT = 75
+const COLLAPSED_HEADER_HEIGHT = isSplitTestEnabled('reviewer-role') ? 42 : 75
 const OFFSET_FOR_ENTRIES_ABOVE = 70
 const GAP_BETWEEN_ENTRIES = 4
 

services/web/frontend/stylesheets/app/editor/review-panel-new.less

@@ -1,6 +1,4 @@
 .review-panel-new {
-  @review-panel-header-height: 69px;
-
   &.review-panel-container {
     height: 100%;
     flex-shrink: 0;
@@ -149,7 +147,7 @@
     position: sticky;
     top: 0;
     width: var(--review-panel-width);
-    height: @review-panel-header-height;
+    height: var(--review-panel-header-height);
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -163,7 +161,7 @@
   .rp-tc-state {
     background-color: white;
     max-height: calc(
-      100vh - var(--review-panel-top) - @review-panel-header-height
+      100vh - var(--review-panel-top) - var(--review-panel-header-height)
     );
     overflow-y: auto;
   }
@@ -178,10 +176,40 @@
     flex-basis: 32px;
   }
 
-  .resolved-comments-toggle {
+  .review-panel-resolved-comments-toggle {
+    background-color: @gray-lightest;
+    font-size: 14px;
+    color: lighten(@rp-type-blue, 25%);
+    border: solid 1px @rp-border-grey;
+    border-radius: 3px;
+    padding: 0 4px;
+    height: 22px;
+    width: 22px;
+    line-height: 1.4;
     display: flex;
     align-items: center;
     justify-content: center;
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      color: @rp-type-blue;
+    }
+  }
+
+  .review-panel-resolved-comments-toggle-reviewer-role {
+    display: flex;
+    align-items: center;
+    border: none;
+    background-color: transparent;
+    color: @content-primary;
+    padding: 2px;
+    border-radius: 100%;
+
+    &:hover,
+    &:focus {
+      background-color: @neutral-20;
+    }
   }
 
   .track-changes-indicator-circle {
@@ -207,15 +235,17 @@
 
   .review-panel-heading {
     display: flex;
-    justify-content: space-between;
     align-items: center;
     padding: 6px 4px;
+    gap: 2px;
 
     .review-panel-label {
       font-family: Lato, sans-serif;
       font-size: @font-size-02;
       font-weight: bold;
       margin: 0;
+      flex: 1;
+      text-align: start;
     }
 
     .review-panel-split-test-badge {
@@ -447,7 +477,7 @@
   .review-panel-overview {
     padding: 4px;
     position: absolute;
-    top: @review-panel-header-height;
+    top: var(--review-panel-header-height);
     bottom: 59px;
     width: 100%;
     overflow: auto;
@@ -563,7 +593,9 @@
     }
 
     &.upwards {
-      top: calc(var(--review-panel-top) + @review-panel-header-height + 16px);
+      top: calc(
+        var(--review-panel-top) + var(--review-panel-header-height) + 16px
+      );
     }
   }
 

services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss

@@ -1,6 +1,6 @@
-.review-panel-new {
-  $review-panel-header-height: 69px;
+@use 'sass:color';
 
+.review-panel-new {
   &.review-panel-container {
     height: 100%;
     flex-shrink: 0;
@@ -158,7 +158,7 @@
     position: sticky;
     top: 0;
     width: var(--review-panel-width);
-    height: $review-panel-header-height;
+    height: var(--review-panel-header-height);
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -172,7 +172,7 @@
   .rp-tc-state {
     background-color: var(--white);
     max-height: calc(
-      100vh - var(--review-panel-top) - $review-panel-header-height
+      100vh - var(--review-panel-top) - var(--review-panel-header-height)
     );
     overflow-y: auto;
   }
@@ -187,10 +187,40 @@
     flex-basis: 32px;
   }
 
-  .resolved-comments-toggle {
+  .review-panel-resolved-comments-toggle {
+    background-color: var(--bg-light-secondary);
+    font-size: var(--font-size-02);
+    color: color.adjust($rp-type-blue, $lightness: 25%);
+    border: solid 1px var(--rp-border-grey);
+    border-radius: var(--border-radius-base);
+    padding: 0;
+    height: 22px;
+    width: 22px;
+    line-height: 1.4;
     display: flex;
     align-items: center;
     justify-content: center;
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      color: $rp-type-blue;
+    }
+  }
+
+  .review-panel-resolved-comments-toggle-reviewer-role {
+    display: flex;
+    align-items: center;
+    border: none;
+    background-color: transparent;
+    color: var(--content-primary);
+    padding: var(--spacing-01);
+    border-radius: 100%;
+
+    &:hover,
+    &:focus {
+      background-color: var(--neutral-20);
+    }
   }
 
   .track-changes-indicator-circle {
@@ -216,14 +246,16 @@
 
   .review-panel-heading {
     display: flex;
-    justify-content: space-between;
     align-items: center;
     padding: var(--spacing-03) var(--spacing-02);
+    gap: 2px;
 
     .review-panel-label {
       font-size: var(--font-size-02);
       font-weight: bold;
       margin: 0;
+      flex: 1;
+      text-align: start;
     }
 
     .review-panel-split-test-badge {
@@ -452,7 +484,7 @@
   .review-panel-overview {
     padding: var(--spacing-02);
     position: absolute;
-    top: $review-panel-header-height;
+    top: var(--review-panel-header-height);
     bottom: 59px;
     width: 100%;
     overflow: auto;
@@ -568,7 +600,9 @@
     }
 
     &.upwards {
-      top: calc(var(--review-panel-top) + $review-panel-header-height + 16px);
+      top: calc(
+        var(--review-panel-top) + var(--review-panel-header-height) + 16px
+      );
     }
   }