Add chevron collapsible table

assets/js/common/Table/CollapsibleTableRow.jsx

@@ -1,5 +1,6 @@
 import React, { Fragment, useState } from 'react';
 import classNames from 'classnames';
+import { EOS_KEYBOARD_ARROW_DOWN } from 'eos-icons-react';
 
 function CollapsibleTableRow({
   columns,
@@ -11,30 +12,39 @@ function CollapsibleTableRow({
   collapsedRowClassName,
 }) {
   const [rowExpanded, toggleRow] = useState(false);
+  const collapsibleRowSpan = collapsibleDetailRenderer ? colSpan + 1 : colSpan;
 
   return (
     <>
-      <tr
-        className={classNames(className, {
-          'cursor-pointer': !!collapsibleDetailRenderer,
-        })}
-        onClick={() => {
-          if (collapsibleDetailRenderer) {
-            toggleRow(!rowExpanded);
-          }
-        }}
-      >
+      <tr className={className}>
+        {collapsibleDetailRenderer && (
+          <td
+            className="pl-4 border-b border-gray-200 bg-white"
+            onClick={() => toggleRow(!rowExpanded)}
+          >
+            <EOS_KEYBOARD_ARROW_DOWN
+              className={classNames(
+                'cursor-pointer self-center fill-gray-500',
+                {
+                  'transform rotate-180': rowExpanded,
+                }
+              )}
+            />
+          </td>
+        )}
         {renderCells(columns, item)}
       </tr>
       {collapsibleDetailRenderer && (
         <tr
           className={classNames(
             collapsedRowClassName,
-            'overflow-y-hidden transition-all ease-in-out duration-600',
-            { visible: rowExpanded, hidden: !rowExpanded }
+            'overflow-y-hidden transition-all ease-in-out duration-600'
           )}
+          hidden={!rowExpanded}
         >
-          <td colSpan={colSpan}>{collapsibleDetailRenderer(item)}</td>
+          <td colSpan={collapsibleRowSpan}>
+            {collapsibleDetailRenderer(item)}
+          </td>
         </tr>
       )}
     </>

assets/js/common/Table/Table.jsx

@@ -78,6 +78,7 @@ function Table({
   const {
     columns,
     collapsibleDetailRenderer = undefined,
+    headerClassName = '',
     rowClassName = '',
     collapsedRowClassName = '',
     pagination,
@@ -197,6 +198,14 @@ function Table({
             <table className="min-w-full leading-normal table-fixed">
               <thead>
                 <tr>
+                  {collapsibleDetailRenderer && (
+                    <th
+                      key="collapsible"
+                      scope="col"
+                      className={classNames('w-6 bg-gray-100', headerClassName)}
+                      aria-label="collapsible"
+                    />
+                  )}
                   {columns.map(
                     ({
                       title,
@@ -214,6 +223,7 @@ function Table({
                               ? 'cursor-pointer hover:text-gray-700 '
                               : ''
                           }px-5 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-100`,
+                          headerClassName,
                           columnClassName
                         )}
                         onClick={handleClick}
@@ -231,7 +241,11 @@ function Table({
               <tbody>
                 {renderedData.length === 0 ? (
                   <EmptyState
-                    colSpan={columns.length}
+                    colSpan={
+                      collapsibleDetailRenderer
+                        ? columns.length + 1
+                        : columns.length
+                    }
                     emptyStateText={emptyStateText}
                   />
                 ) : (

assets/js/common/Table/Table.stories.jsx

@@ -76,6 +76,15 @@ const filteredConfig = {
   ],
 };
 
+const collapsibleConfig = {
+  ...config,
+  collapsibleDetailRenderer: () => (
+    <div className="p-4 bg-gray-100">
+      <p>This is a collapsible row data</p>
+    </div>
+  ),
+};
+
 const data = [
   {
     user: 'Tony Kekw',
@@ -201,6 +210,10 @@ export function WithHeader(args) {
   );
 }
 
+export function WithCollapsibleRow(args) {
+  return <Table config={collapsibleConfig} data={data} {...args} />;
+}
+
 export function Empty() {
   return <Table config={config} data={[]} />;
 }

assets/js/common/Table/Table.test.jsx

@@ -344,4 +344,30 @@ describe('Table component', () => {
       });
     });
   });
+
+  describe('collapsible row', () => {
+    it('should display the collapsed row when chevron is clicked', async () => {
+      const data = tableDataFactory.buildList(1);
+      const content = 'This is a collapsible row data';
+
+      render(
+        <Table
+          config={{
+            ...tableConfig,
+            collapsibleDetailRenderer: () => <p>{content}</p>,
+          }}
+          data={data}
+        />
+      );
+
+      const table = screen.getByRole('table');
+      const collapsibleCell = table.querySelector(
+        'tbody > tr:nth-child(1) > td:nth-child(1)'
+      );
+      expect(screen.queryByText(content)).not.toBeVisible();
+
+      fireEvent.click(collapsibleCell);
+      expect(screen.queryByText(content)).toBeVisible();
+    });
+  });
 });

assets/js/pages/DatabasesOverview/DatabasesOverview.test.jsx

@@ -58,6 +58,11 @@ describe('DatabasesOverview component', () => {
         />
       );
 
+      const table = screen.getByRole('table');
+      await user.click(
+        table.querySelector('tbody tr:nth-child(1) td:nth-child(1)')
+      );
+
       const cleanUpButton = screen.queryByRole('button', { name: 'Clean up' });
       await user.click(cleanUpButton);
       expect(
@@ -92,6 +97,11 @@ describe('DatabasesOverview component', () => {
         />
       );
 
+      const table = screen.getByRole('table');
+      await user.click(
+        table.querySelector('tbody tr:nth-child(1) td:nth-child(1)')
+      );
+
       const cleanUpButton = screen.getByText('Clean up').closest('button');
 
       expect(cleanUpButton).toBeDisabled();

assets/js/pages/ExecutionResults/ExecutionResults.jsx

@@ -31,13 +31,14 @@ const defaultSavedFilters = [];
 
 const resultsTableConfig = {
   usePadding: false,
+  headerClassName: 'bg-gray-50 border-b h-auto',
   rowClassName: 'tn-check-result-row',
   columns: [
     {
       title: 'Id',
       key: 'checkID',
       fontSize: 'text-base',
-      className: 'bg-gray-50 border-b w-1/6 h-auto',
+      className: 'w-1/6',
       render: (checkID, { customized, onClick }) => (
         <div className="flex whitespace-nowrap text-jungle-green-500 justify-between">
           <span
@@ -58,7 +59,6 @@ const resultsTableConfig = {
       title: 'Description',
       key: 'description',
       fontSize: 'text-base',
-      className: 'bg-gray-50 border-b h-auto',
       render: (description) => (
         <ReactMarkdown className="markdown" remarkPlugins={[remarkGfm]}>
           {description}
@@ -69,7 +69,7 @@ const resultsTableConfig = {
       title: 'Result',
       key: 'result',
       fontSize: 'text-base',
-      className: 'bg-gray-50 border-b w-1/6 h-auto',
+      className: 'w-1/6',
       render: (_, { result }) => <HealthIcon health={result} />,
     },
   ],

assets/js/pages/SapSystemsOverviewPage/SapSystemsOverview.test.jsx

@@ -75,28 +75,28 @@ describe('SapSystemsOverviews component', () => {
       const rows = screen.getByRole('table').querySelectorAll('tbody > tr');
       const mainRow = rows[0];
 
-      expect(mainRow.querySelector('td:nth-child(2)')).toHaveTextContent(sid);
-      expect(mainRow.querySelector('td:nth-child(2) > a')).toHaveAttribute(
+      expect(mainRow.querySelector('td:nth-child(3)')).toHaveTextContent(sid);
+      expect(mainRow.querySelector('td:nth-child(3) > a')).toHaveAttribute(
         'href',
         `/sap_systems/${sapSystemID}`
       );
-      expect(mainRow.querySelector('td:nth-child(3)')).toHaveTextContent(
+      expect(mainRow.querySelector('td:nth-child(4)')).toHaveTextContent(
         attachedRdbms
       );
-      expect(mainRow.querySelector('td:nth-child(3) > a')).toHaveAttribute(
+      expect(mainRow.querySelector('td:nth-child(4) > a')).toHaveAttribute(
         'href',
         `/databases/${databaseID}`
       );
-      expect(mainRow.querySelector('td:nth-child(4)')).toHaveTextContent(
+      expect(mainRow.querySelector('td:nth-child(5)')).toHaveTextContent(
         tenant
       );
-      expect(mainRow.querySelector('td:nth-child(5)')).toHaveTextContent(
+      expect(mainRow.querySelector('td:nth-child(6)')).toHaveTextContent(
         sapSystemType
       );
-      expect(mainRow.querySelector('td:nth-child(6)')).toHaveTextContent(
+      expect(mainRow.querySelector('td:nth-child(7)')).toHaveTextContent(
         dbAddress
       );
-      expect(mainRow.querySelector('td:nth-child(7)')).toHaveTextContent(
+      expect(mainRow.querySelector('td:nth-child(8)')).toHaveTextContent(
         'ENSA1'
       );
     });
@@ -137,7 +137,7 @@ describe('SapSystemsOverviews component', () => {
       expectedSapSystemTypes.forEach((expectedType, index) => {
         const rowIndex = index * 2;
         const sapSystemRow = rows[rowIndex];
-        expect(sapSystemRow.querySelector('td:nth-child(5)')).toHaveTextContent(
+        expect(sapSystemRow.querySelector('td:nth-child(6)')).toHaveTextContent(
           expectedType
         );
       });
@@ -175,7 +175,7 @@ describe('SapSystemsOverviews component', () => {
         />
       );
       const rows = screen.getByRole('table').querySelectorAll('tbody > tr');
-      expect(rows[0].querySelector('td:nth-child(5)')).toHaveTextContent(
+      expect(rows[0].querySelector('td:nth-child(6)')).toHaveTextContent(
         expectedSapSystemTypes
       );
     });
@@ -332,6 +332,11 @@ describe('SapSystemsOverviews component', () => {
           />
         );
 
+        const table = screen.getByRole('table');
+        await user.click(
+          table.querySelector('tbody tr:nth-child(1) td:nth-child(1)')
+        );
+
         const cleanUpButton = screen.queryAllByRole('button', {
           name: 'Clean up',
         })[row];
@@ -372,6 +377,11 @@ describe('SapSystemsOverviews component', () => {
         />
       );
 
+      const table = screen.getByRole('table');
+      await user.click(
+        table.querySelector('tbody tr:nth-child(1) td:nth-child(1)')
+      );
+
       const cleanUpButtons = screen.getAllByRole('button', {
         name: 'Clean up',
       });

test/e2e/cypress/e2e/databases_overview.cy.js

@@ -14,7 +14,7 @@ context('Databases Overview', () => {
   describe('Deregistration', () => {
     beforeEach(() => {
       databasesOverviewPage.refresh();
-      databasesOverviewPage.clickHdqDatabaseRow();
+      databasesOverviewPage.expandHdqDatabaseRow();
     });
 
     it(`should not display DB ${databasesOverviewPage.hdqDatabase.sid} after deregistering the primary instance`, () => {
@@ -43,7 +43,7 @@ context('Databases Overview', () => {
 
   describe('Instance deregistration', () => {
     before(() => {
-      databasesOverviewPage.clickHddDatabaseRow();
+      databasesOverviewPage.expandHddDatabaseRow();
     });
 
     beforeEach(() => {

test/e2e/cypress/e2e/sap_systems_overview.cy.js

@@ -98,7 +98,7 @@ context('SAP Systems Overview', () => {
     beforeEach(() => {
       sapSystemsOverviewPage.revertMovedScenario();
       sapSystemsOverviewPage.systemNwdIsVisible();
-      sapSystemsOverviewPage.clickSystemToRemove();
+      sapSystemsOverviewPage.expandSystemToRemove();
     });
 
     it('should move a clustered application instance', () => {
@@ -153,7 +153,7 @@ context('SAP Systems Overview', () => {
     beforeEach(() => {
       sapSystemsOverviewPage.restoreNwdHost();
       sapSystemsOverviewPage.sapSystemNwdIsDisplayed();
-      sapSystemsOverviewPage.clickNwdSapSystem();
+      sapSystemsOverviewPage.expandNwdSapSystem();
     });
 
     it('should mark an instance as absent and restore it as present on received respective discovery messages', () => {

test/e2e/cypress/pageObject/databases_overview_po.js

@@ -36,8 +36,10 @@ const hddDatabase = {
 // Selectors
 
 const hdqDatabaseCell = `tr:contains("${hdqDatabase.sid}")`;
+const hdqDatabaseRowCollapsibleCell = `${hdqDatabaseCell} > td:eq(0)`;
 
 const hddDatabaseCell = `tr:contains("${hddDatabase.sid}")`;
+const hddDatabaseRowCollapsibleCell = `${hddDatabaseCell} > td:eq(0)`;
 
 const databaseInstance1 = `a:contains("${hdqDatabase.instances[0].name}")`;
 const databaseInstance2 = `a:contains("${hdqDatabase.instances[1].name}")`;
@@ -117,9 +119,11 @@ export const cleanUpButtonIsNotDisplayed = () => {
 
 // UI Interactions
 
-export const clickHdqDatabaseRow = () => cy.get(hdqDatabaseCell).click();
+export const expandHdqDatabaseRow = () =>
+  cy.get(hdqDatabaseRowCollapsibleCell).click();
 
-export const clickHddDatabaseRow = () => cy.get(hddDatabaseCell).click();
+export const expandHddDatabaseRow = () =>
+  cy.get(hddDatabaseRowCollapsibleCell).click();
 
 export const clickCleanUpButton = () => {
   const cleanUpButtonSelector = getCleanUpButtonByIdAndInstanceIndex(