feat: Enhance MapCard component to conditionally display footer actions based on report state

Author: delfrrr

cypress/e2e/snowflake-s3/fork.cy.js

@@ -26,7 +26,12 @@ describe('fork', () => {
 
     // change user
     cy.setCookie('dekart-dev-claim-email', 'test2@gmail.com')
-    cy.reload()
+    cy.visit('/')
+    cy.get('span').contains('Shared Maps').click()
+    cy.contains('.dekart-map-card', 'Untitled', { timeout: 20000 }).as('sharedMapCard')
+    cy.get('@sharedMapCard').find('[data-testid="map-card-divider"]').should('not.exist')
+    cy.get('@sharedMapCard').find('[data-testid="map-card-footer-actions"]').should('not.exist')
+    cy.get('@sharedMapCard').click()
 
     // fork report
     cy.get('button#dekart-fork-button').click()

src/client/HomePage.jsx

@@ -385,6 +385,9 @@ function MapCard ({ report, reportFilter, archived, authEnabled }) {
 
   const { previewUrl, previewLoading, previewError, setPreviewLoading, setPreviewError } = useMapPreview(report, isVisible)
   const centerCoordinates = getMapCenterCoordinates(report.mapConfig)
+  const showArchiveAction = reportFilter === 'my'
+  const showEditAction = report.canWrite && !report.archived
+  const showFooterActions = showArchiveAction || showEditAction
 
   const handleEdit = (e) => {
     e.stopPropagation()
@@ -452,23 +455,29 @@ function MapCard ({ report, reportFilter, archived, authEnabled }) {
               {getRelativeTime(modifiedDate)}
             </div>
           </div>
-          <div className={styles.mapCardDivider} />
-          <div className={styles.mapFooterActions}>
-            {reportFilter === 'my' ? <ArchiveReportButton report={report} /> : <span />}
-            {report.canWrite && !report.archived
-              ? (
-                <Button
-                  type='default'
-                  size='small'
-                  icon={<EditOutlined />}
-                  onClick={handleEdit}
-                  className={styles.mapActionButton}
-                  title='Edit'
-                >Edit
-                </Button>
-                )
-              : null}
-          </div>
+          {showFooterActions
+            ? (
+              <>
+                <div className={styles.mapCardDivider} data-testid='map-card-divider' />
+                <div className={styles.mapFooterActions} data-testid='map-card-footer-actions'>
+                  {showArchiveAction ? <ArchiveReportButton report={report} /> : null}
+                  {showEditAction
+                    ? (
+                      <Button
+                        type='default'
+                        size='small'
+                        icon={<EditOutlined />}
+                        onClick={handleEdit}
+                        className={styles.mapActionButton}
+                        title='Edit'
+                      >Edit
+                      </Button>
+                      )
+                    : null}
+                </div>
+              </>
+              )
+            : null}
         </div>
       </div>
     </div>