Improve UX with bulk edit in record app (#2359)

* remove bulk edit if user can't add/link related entities for a related table and there are no rows
* Disabled bulk edit when the user can add/link and there are no rows

src/components/record/related-table-actions.tsx

@@ -699,6 +699,23 @@ const RelatedTableActions = ({
       </span>
     );
   };
+
+  const renderBulkEditBtnTooltip = () => {
+    if (relatedModel.recordsetState.page?.length < 1) {
+      return(
+        <span>
+          Unable to edit {currentTable} records until some are created.
+        </span>
+      )
+    }
+
+    return(
+      <span>
+        Edit this page of {currentTable} records related to this {mainTable}.
+      </span>
+    )
+  }
+
   /*
     * This function is to render each button. We call the renderButton function with button text,
     * inner element classname and boolean flag to show tertiary class(for the dropdown buttons) or not
@@ -715,8 +732,12 @@ const RelatedTableActions = ({
         {relatedModel.isPureBinary && relatedModel.canDelete &&  renderButton('Unlink records', false)}
 
         {allowCustomModeRelated(relatedModel) && renderCustomModeBtn()}
-
-        {relatedModel.canEdit && renderButton('Bulk Edit', false)}
+        {/* 
+          * if user can edit, also check for create permission
+          *   - if they can't create, allow edit if there are some rows set
+          *   - disable button if can create but no rows
+          */}
+        {relatedModel.canEdit && (relatedModel.canCreate || relatedModel.recordsetState.page?.length > 0) && renderButton('Bulk Edit', false)}
 
         {renderButton('Explore', false)}
       </div>
@@ -754,21 +775,20 @@ const RelatedTableActions = ({
           </ChaiseTooltip>
         );
       case 'Bulk Edit':
+        const disableBulkEdit = relatedModel.recordsetState.page?.length < 1;
         return (
           <ChaiseTooltip
             placement='top'
-            tooltip={
-              <span>
-                Edit this page of {currentTable} records related to this {mainTable}.
-              </span>
-            }
+            tooltip={renderBulkEditBtnTooltip()}
           >
             <a
-            className={`chaise-btn bulk-edit-link ${
-              tertiary ? 'chaise-btn-tertiary dropdown-button' : 'chaise-btn-secondary'
-            }`}
+              className={`chaise-btn bulk-edit-link
+                ${tertiary ? ' chaise-btn-tertiary dropdown-button' : ' chaise-btn-secondary'}
+                ${disableBulkEdit ? ' disabled': ''}`
+              }
               href={editLink}
               onClick={onBulkEdit}
+              aria-disabled={disableBulkEdit}
             >
               <span className='chaise-btn-icon fa fa-pencil'></span>
               <span>Bulk Edit</span>

test/e2e/specs/all-features-confirmation/record/presentation.spec.js

@@ -280,6 +280,18 @@ describe('View existing record,', function() {
                 expect(chaisePage.recordPage.getRelatedTables().count()).not.toBe(testParams.no_related_data.tables_order.length, "The full set of related tables were not properly hidden");
             })
         });
+
+        it('should have "booking" related table with bulk edit disabled when no rows', () => {
+            const btn = chaisePage.recordPage.getBulkEditLink('booking', true);
+
+            expect(btn.isPresent()).toBeTruthy();
+            expect(btn.getAttribute('class')).toContain('disabled', 'Bulk edit is not disabled');
+        });
+
+        it('should have "accommodation_collections" related table with bulk edit removed when the user cannot create and there are no rows present', () => {
+            const btn = chaisePage.recordPage.getBulkEditLink('accommodation_collections', true);
+            expect(btn.isPresent()).not.toBeTruthy();
+        });
     });
 
     describe("For side panel table of contents in Record App", function() {