Merge pull request #14597 from overleaf/jdt-remove-hist-actionf-from-faded

Remove compare button on faded

GitOrigin-RevId: 64b3d2b19416eee3a00ba43cbbf95d7473d376c2

services/web/frontend/js/features/history/components/change-list/all-history-list.tsx

@@ -126,7 +126,7 @@ function AllHistoryList() {
       <div className="history-all-versions-container">
         <div ref={bottomRef} className="history-versions-bottom" />
         {visibleUpdates.map((update, index) => {
-          const selected = isVersionSelected(
+          const selectionState = isVersionSelected(
             selection,
             update.fromV,
             update.toV
@@ -144,8 +144,8 @@ function AllHistoryList() {
           const selectable =
             !faded &&
             (selection.comparing ||
-              selected === 'aboveSelected' ||
+              selectionState === 'aboveSelected' ||
-              selected === 'belowSelected')
+              selectionState === 'belowSelected')
 
           const hasTutorialOverlay =
             index === firstUnselectedIndex && showTutorial
@@ -157,7 +157,7 @@ function AllHistoryList() {
               faded={faded}
               showDivider={showDivider}
               setSelection={setSelection}
-              selected={selected}
+              selectionState={selectionState}
               currentUserId={currentUserId}
               selectable={selectable}
               projectId={projectId}

services/web/frontend/js/features/history/components/change-list/dropdown/compare-version-dropdown-content.tsx

@@ -28,7 +28,7 @@ function CompareVersionDropdownContentAllHistory({
       <DropdownOption>
         <CompareItems
           updateRange={updateRange}
-          selected="aboveSelected"
+          selectionState="aboveSelected"
           text={t('history_compare_up_to_this_version')}
           closeDropdown={closeDropdown}
         />
@@ -36,7 +36,7 @@ function CompareVersionDropdownContentAllHistory({
       <DropdownOption>
         <CompareItems
           updateRange={updateRange}
-          selected="belowSelected"
+          selectionState="belowSelected"
           text={t('history_compare_from_this_version')}
           closeDropdown={closeDropdown}
         />
@@ -72,7 +72,7 @@ function CompareVersionDropdownContentLabelsList({
             fromVTimestamp: versionTimestamp,
             toVTimestamp: versionTimestamp,
           }}
-          selected="aboveSelected"
+          selectionState="aboveSelected"
           text={t('history_compare_up_to_this_version')}
           closeDropdown={closeDropdownLabels}
         />
@@ -85,7 +85,7 @@ function CompareVersionDropdownContentLabelsList({
             fromVTimestamp: versionTimestamp,
             toVTimestamp: versionTimestamp,
           }}
-          selected="belowSelected"
+          selectionState="belowSelected"
           text={t('history_compare_from_this_version')}
           closeDropdown={closeDropdownLabels}
         />

services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/compare-items.tsx

@@ -7,14 +7,14 @@ import { ItemSelectionState } from '../../../../utils/history-details'
 
 type CompareItemsProps = {
   updateRange: UpdateRange
-  selected: ItemSelectionState
+  selectionState: ItemSelectionState
   text?: string
   closeDropdown: () => void
 }
 
 function CompareItems({
   updateRange,
-  selected,
+  selectionState,
   text,
   closeDropdown,
 }: CompareItemsProps) {
@@ -27,7 +27,7 @@ function CompareItems({
 
   return (
     <>
-      {selected === 'belowSelected' ? (
+      {selectionState === 'belowSelected' ? (
         <Compare
           comparisonRange={{
             fromV: updateRange.fromV,
@@ -46,7 +46,7 @@ function CompareItems({
           }
         />
       ) : null}
-      {selected === 'aboveSelected' ? (
+      {selectionState === 'aboveSelected' ? (
         <Compare
           comparisonRange={{
             fromV: selRange.fromV,

services/web/frontend/js/features/history/components/change-list/history-version-details.tsx

@@ -7,14 +7,14 @@ import { ItemSelectionState } from '../../utils/history-details'
 type HistoryVersionDetailsProps = {
   children: ReactNode
   updateRange: UpdateRange
-  selected: ItemSelectionState
+  selectionState: ItemSelectionState
   selectable: boolean
   setSelection: HistoryContextValue['setSelection']
 }
 
 function HistoryVersionDetails({
   children,
-  selected,
+  selectionState,
   updateRange,
   selectable,
   setSelection,
@@ -37,14 +37,14 @@ function HistoryVersionDetails({
     <div
       className={classnames('history-version-details clearfix', {
         'history-version-selected':
-          selected === 'upperSelected' ||
+          selectionState === 'upperSelected' ||
-          selected === 'lowerSelected' ||
+          selectionState === 'lowerSelected' ||
-          selected === 'selected',
+          selectionState === 'selected',
-        'history-version-within-selected': selected === 'withinSelected',
+        'history-version-within-selected': selectionState === 'withinSelected',
         'history-version-selectable': selectable,
       })}
       data-testid="history-version-details"
-      data-selected={selected}
+      data-selected={selectionState}
       onClick={selectable ? handleSelect : undefined}
     >
       {children}

services/web/frontend/js/features/history/components/change-list/history-version.tsx

@@ -40,7 +40,7 @@ type HistoryVersionProps = {
   selectable: boolean
   faded: boolean
   showDivider: boolean
-  selected: ItemSelectionState
+  selectionState: ItemSelectionState
   setSelection: HistoryContextValue['setSelection']
   dropdownOpen: boolean
   dropdownActive: boolean
@@ -59,7 +59,7 @@ function HistoryVersion({
   selectable,
   faded,
   showDivider,
-  selected,
+  selectionState,
   setSelection,
   dropdownOpen,
   dropdownActive,
@@ -186,7 +186,8 @@ function HistoryVersion({
           className={classNames({
             'history-version-divider-container': true,
             'version-element-within-selected ':
-              selected === 'withinSelected' || selected === 'lowerSelected',
+              selectionState === 'withinSelected' ||
+              selectionState === 'lowerSelected',
           })}
         >
           <hr className="history-version-divider" />
@@ -196,7 +197,8 @@ function HistoryVersion({
         <div
           className={classNames({
             'version-element-within-selected ':
-              selected === 'withinSelected' || selected === 'lowerSelected',
+              selectionState === 'withinSelected' ||
+              selectionState === 'lowerSelected',
           })}
         >
           <time className="history-version-day">
@@ -211,7 +213,7 @@ function HistoryVersion({
         })}
       >
         <HistoryVersionDetails
-          selected={selected}
+          selectionState={selectionState}
           setSelection={setSelection}
           updateRange={updateRangeForUpdate(update)}
           selectable={selectable}
@@ -238,16 +240,16 @@ function HistoryVersion({
             </HistoryDropdown>
           )}
 
-          {selected !== 'selected' ? (
+          {selectionState !== 'selected' && !faded ? (
             <div
               data-testid="compare-icon-version"
               className="pull-right"
               ref={iconRef}
             >
-              {selected !== 'withinSelected' ? (
+              {selectionState !== 'withinSelected' ? (
                 <CompareItems
                   updateRange={updateRange}
-                  selected={selected}
+                  selectionState={selectionState}
                   closeDropdown={closeDropdown}
                 />
               ) : (

services/web/frontend/js/features/history/components/change-list/label-list-item.tsx

@@ -21,7 +21,7 @@ type LabelListItemProps = {
   labels: LoadedLabel[]
   currentUserId: string
   projectId: string
-  selected: ItemSelectionState
+  selectionState: ItemSelectionState
   selectable: boolean
   setSelection: HistoryContextValue['setSelection']
   dropdownOpen: boolean
@@ -37,7 +37,7 @@ function LabelListItem({
   labels,
   currentUserId,
   projectId,
-  selected,
+  selectionState,
   selectable,
   setSelection,
   dropdownOpen,
@@ -79,7 +79,7 @@ function LabelListItem({
     <HistoryVersionDetails
       key={version}
       updateRange={updateRange}
-      selected={selected}
+      selectionState={selectionState}
       selectable={selectable}
       setSelection={setSelection}
     >
@@ -96,12 +96,12 @@ function LabelListItem({
           />
         ) : null}
       </HistoryDropdown>
-      {selected !== 'selected' ? (
+      {selectionState !== 'selected' ? (
         <div data-testid="compare-icon-version" className="pull-right">
-          {selected !== 'withinSelected' ? (
+          {selectionState !== 'withinSelected' ? (
             <CompareItems
               updateRange={updateRange}
-              selected={selected}
+              selectionState={selectionState}
               closeDropdown={closeDropdown}
             />
           ) : (

services/web/frontend/js/features/history/components/change-list/labels-list.tsx

@@ -20,7 +20,7 @@ function LabelsList() {
   return (
     <>
       {versionWithLabels.map(({ version, labels }) => {
-        const selected = isVersionSelected(selection, version)
+        const selectionState = isVersionSelected(selection, version)
         const dropdownActive =
           version === activeDropdownItem.item &&
           activeDropdownItem.whichDropDown === 'moreOptions'
@@ -35,8 +35,8 @@ function LabelsList() {
             version={version}
             currentUserId={currentUserId}
             projectId={projectId}
-            selected={selected}
+            selectionState={selectionState}
-            selectable={selected !== 'selected'}
+            selectable={selectionState !== 'selected'}
             setSelection={setSelection}
             dropdownOpen={activeDropdownItem.isOpened && dropdownActive}
             dropdownActive={dropdownActive}

services/web/frontend/stories/history/history-version.stories.tsx

@@ -60,7 +60,7 @@ export default {
     comparing: false,
     faded: false,
     showDivider: false,
-    selected: false,
+    selectionState: false,
     setSelection: () => {},
     dropdownOpen: false,
     dropdownActive: false,

services/web/frontend/stories/history/label-version.stories.tsx

@@ -41,7 +41,7 @@ export default {
     currentUserId: '1',
     projectId: '123',
     comparing: false,
-    selected: false,
+    selectionState: false,
     selectable: false,
     setSelection: () => {},
     dropdownOpen: false,