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 <[email protected]> Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
openforis · Aug 30, 2024 · 3cc513b · 3cc513b
1 parent 10e1137
commit 3cc513b
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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