From 3cc513b0538c4b15c4d4a9087807d996e487f5e5 Mon Sep 17 00:00:00 2001
From: Stefano Ricci <1219739+SteRiccio@users.noreply.github.com>
Date: Fri, 30 Aug 2024 12:56:47 +0200
Subject: [PATCH] Fixed records list edit/view selected button style (#3542)

* Fixed records list edit/view selected record button style

* code cleanup

---------

Co-authored-by: Stefano Ricci <SteRiccio@users.noreply.github.com>
Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
---
 core/i18n/resources/en/common.js              |  1 +
 webapp/store/user/hooks.js                    |  2 +-
 webapp/style/formBase.scss                    |  8 -------
 .../Data/Records/HeaderLeft/HeaderLeft.js     | 23 +++++++++++++++----
 4 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/core/i18n/resources/en/common.js b/core/i18n/resources/en/common.js
index 386d2185c1..52880255b8 100644
--- a/core/i18n/resources/en/common.js
+++ b/core/i18n/resources/en/common.js
@@ -790,6 +790,7 @@ Merge cannot be performed.`,
       noSelection:
         'Please make your selection using the left side panel or select an existing query from "Manage queries"',
     },
+    viewSelectedRecord: 'View selected record',
   },
 
   mapView: {
diff --git a/webapp/store/user/hooks.js b/webapp/store/user/hooks.js
index f776163104..4702435b8e 100644
--- a/webapp/store/user/hooks.js
+++ b/webapp/store/user/hooks.js
@@ -41,7 +41,7 @@ export const useAuthCanEditRecords = (records) => {
   const user = useUser()
   return records.length > 0 && records.every((record) => _canEditRecord({ user, surveyInfo, record }))
 }
-export const useAuthCanEditRecord = (record) => useAuthCanEditRecords([record])
+export const useAuthCanEditRecord = (record) => useAuthCanEditRecords(record ? [record] : [])
 export const useAuthCanDeleteRecords = (records) => useAuthCanEditRecords(records)
 export const useAuthCanDeleteRecord = (record) => useAuthCanDeleteRecords([record])
 export const useAuthCanCleanseRecords = () => Authorizer.canCleanseRecords(useUser(), useSurveyInfo())
diff --git a/webapp/style/formBase.scss b/webapp/style/formBase.scss
index 80d2839a29..baefac2414 100644
--- a/webapp/style/formBase.scss
+++ b/webapp/style/formBase.scss
@@ -59,14 +59,6 @@ button,
   background-color: white;
   transition: 0.2s all;
 
-  &:hover {
-    background-color: $blueLightFocus;
-
-    &:not([aria-disabled='true']) {
-      cursor: pointer;
-    }
-  }
-
   &.active {
     background-color: $blueLightActive;
 
diff --git a/webapp/views/App/views/Data/Records/HeaderLeft/HeaderLeft.js b/webapp/views/App/views/Data/Records/HeaderLeft/HeaderLeft.js
index dcf7b78eb8..cdf7f829c7 100644
--- a/webapp/views/App/views/Data/Records/HeaderLeft/HeaderLeft.js
+++ b/webapp/views/App/views/Data/Records/HeaderLeft/HeaderLeft.js
@@ -14,10 +14,11 @@ import { RecordActions, useRecord } from '@webapp/store/ui/record'
 
 import { TestId } from '@webapp/utils/testId'
 
-import { Button, ButtonDelete, ButtonDownload, ButtonIconEdit } from '@webapp/components'
+import { Button, ButtonDelete, ButtonDownload, ButtonIconEdit, ButtonIconView } from '@webapp/components'
 import { useConfirmAsync } from '@webapp/components/hooks'
 import {
   useAuthCanDeleteRecords,
+  useAuthCanEditRecord,
   useAuthCanExportRecords,
   useAuthCanExportRecordsList,
   useAuthCanUpdateRecordsStep,
@@ -69,6 +70,7 @@ const HeaderLeft = ({ handleSearch, navigateToRecord, onRecordsUpdate, search, s
 
   const selectedItemsCount = selectedItems.length
   const selectedRecordsUuids = selectedItems.map((selectedItem) => selectedItem.uuid)
+  const canEditSelectedItem = useAuthCanEditRecord(selectedItems[0]) && selectedItems.length === 1
 
   const [state, setState] = useState({
     recordsCloneModalOpen: false,
@@ -206,10 +208,21 @@ const HeaderLeft = ({ handleSearch, navigateToRecord, onRecordsUpdate, search, s
             />
           )}
           {
-            // Edit selected record
-            selectedItemsCount === 1 && (
-              <ButtonIconEdit onClick={onSelectedRecordClick} title="dataView.editSelectedRecord" />
-            )
+            // View/Edit selected record
+            selectedItemsCount === 1 &&
+              (canEditSelectedItem ? (
+                <ButtonIconEdit
+                  onClick={onSelectedRecordClick}
+                  title="dataView.editSelectedRecord"
+                  variant="contained"
+                />
+              ) : (
+                <ButtonIconView
+                  onClick={onSelectedRecordClick}
+                  title="dataView.viewSelectedRecord"
+                  variant="contained"
+                />
+              ))
           }
           {canCloneRecords && (
             <Button