console: misc bug fixes (#4669, #4673, #4682, #4826, #5016, #4877 ) (#…

…5108) * console: fix checkbox for forwarding client headers in actions (close #4595) (#4669) * console: fix bulk selected rows state in data browser (close #4654) (#4673) * console: fix displaying boolean values in Edit Row tab (#4682) * console: fix regression in editing permissions manually (fix #4683) (#4826) * console: fix "Cannot read property 'foldable'" runtime error in `Browse Rows` page (fix #4907) (#5016) * console: fix enum tables reload data button UI (close #4647) (#4877)
hasura · Jun 16, 2020 · ece895f · ece895f
1 parent e91e30d
commit ece895f
Show file tree

Hide file tree

Showing 21 changed files with 516 additions and 345 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -85,6 +85,7 @@ The `internal` field for action errors is improved with more debug information.
 `response` and `error` fields instead of just `webhook_response` field.
 
 Before:
+
 ```json
 {
   "errors": [
@@ -105,7 +106,9 @@ Before:
   ]
 }
 ```
+
 After:
+
 ```json
 {
   "errors": [
@@ -169,6 +172,7 @@ ENV vars can now be read from .env file present at the project root directory. A
 ```
 hasura console --envfile production.env
 ```
+
 The above command will read ENV vars from `production.env` file present at the project root directory.
 
 (close #4129) (#4454)

diff --git a/console/cypress/integration/data/insert-browse/spec.js b/console/cypress/integration/data/insert-browse/spec.js
@@ -58,12 +58,10 @@ const clickSaveOrInsert = (firstIndex, currentIndex) => {
 const checkQuerySuccess = () => {
   // Expect only 4 rows i.e. expect fifth element to not exist
   cy.get('[role=gridcell]').contains('filter-text');
-  cy.get('[role=row]')
-    .eq(2)
-    .should('not.exist');
+  cy.get('[role=row]').eq(2).should('not.exist');
 };
 
-const checkOrder = order => {
+const checkOrder = (order) => {
   // Utility function to get right element
 
   const curElement = cy.get('[role=row]');
@@ -188,11 +186,7 @@ export const passBIInsert20Rows = () => {
       );
       cy.get(getElementFromAlias(`typed-input-${textIndex}`))
         .type('{selectall}{del}')
-        .type(
-          Math.random()
-            .toString(36)
-            .substring(7)
-        );
+        .type(Math.random().toString(36).substring(7));
       cy.get(
         getElementFromAlias(`typed-input-default-${textIndex + 1}`)
       ).check();
@@ -246,7 +240,7 @@ export const checkPagination = () => {
   cy.get('.-totalPages').contains('5');
 };
 
-export const passBISort = order => {
+export const passBISort = (order) => {
   // Scroll to top TODO responsive is messy
   cy.wait(7000);
   // cy.scrollTo('top');
@@ -277,9 +271,7 @@ export const passBIFilterQueryEq = () => {
   // Select operator as `eq`
   cy.get(getElementFromAlias('filter-op-0')).select('$eq');
   // Type value as "filter-text"
-  cy.get("input[placeholder='-- value --']")
-    .last()
-    .type('filter-text');
+  cy.get("input[placeholder='-- value --']").last().type('filter-text');
   // Run query
   cy.get(getElementFromAlias('run-query')).click();
   cy.wait(2000);
@@ -302,9 +294,7 @@ export const deleteBITestTable = () => {
   // Click on delete
   cy.get(getElementFromAlias('delete-table')).click();
   // Confirm
-  cy.window()
-    .its('prompt')
-    .should('be.called');
+  cy.window().its('prompt').should('be.called');
   cy.wait(7000);
   // Match the URL
   cy.url().should('eq', `${baseUrl}/data/schema/public`);
@@ -318,9 +308,7 @@ export const deleteBITestTable = () => {
   // Click on delete
   cy.get(getElementFromAlias('delete-table')).click();
   // Confirm
-  cy.window()
-    .its('prompt')
-    .should('be.called');
+  cy.window().its('prompt').should('be.called');
   cy.wait(7000);
   // Match the URL
   cy.url().should('eq', `${baseUrl}/data/schema/public`);
@@ -334,9 +322,7 @@ export const deleteBITestTable = () => {
   // Click on delete
   cy.get(getElementFromAlias('delete-table')).click();
   // Confirm
-  cy.window()
-    .its('prompt')
-    .should('be.called');
+  cy.window().its('prompt').should('be.called');
   cy.wait(7000);
 
   // Match the URL
@@ -469,9 +455,7 @@ export const checkViewRelationship = () => {
   // Add relationship
   cy.get(getElementFromAlias('table-relationships')).click();
   cy.get(getElementFromAlias('obj-rel-add-0')).click();
-  cy.get(getElementFromAlias('suggested-rel-name'))
-    .clear()
-    .type('someRel');
+  cy.get(getElementFromAlias('suggested-rel-name')).clear().type('someRel');
   cy.get(getElementFromAlias('obj-rel-save-0')).click();
   cy.wait(2000);
   // Insert a row
@@ -481,27 +465,58 @@ export const checkViewRelationship = () => {
   cy.wait(1000);
   cy.get(getElementFromAlias('table-browse-rows')).click();
   cy.wait(1000);
-  cy.get('a')
-    .contains('View')
-    .first()
-    .click();
-  cy.wait(1000);
-  cy.get('a')
-    .contains('Close')
-    .first()
-    .click();
+  cy.get('.rt-table').within(() => {
+    cy.get('a').contains('View').click();
+    cy.wait(1000);
+  });
+  cy.get('a').contains('Close').first().click();
 };
 
 export const passDeleteRow = () => {
   cy.get(getElementFromAlias('table-browse-rows')).click();
   cy.wait(5000);
+  cy.get(getElementFromAlias('table-browse-rows')).contains('21');
   cy.get(getElementFromAlias('row-delete-button-0')).click();
-  cy.on('window:confirm', str => {
+  cy.on('window:confirm', (str) => {
     expect(
       str.indexOf('This will permanently delete this row from this table') !==
         -1
     ).to.be.true;
   });
+  cy.get(getElementFromAlias('table-browse-rows')).contains('20');
   // cy.get('.notification-error');
   cy.wait(14000);
 };
+
+export const passBulkDeleteRows = () => {
+  cy.get(getElementFromAlias('table-browse-rows')).click();
+  cy.wait(5000);
+  cy.get(getElementFromAlias('table-browse-rows')).contains('20');
+  cy.get(getElementFromAlias('row-checkbox-0')).click();
+  cy.get(getElementFromAlias('row-checkbox-1')).click();
+  cy.get(getElementFromAlias('bulk-delete')).click();
+  cy.wait(1000);
+  cy.on('window:confirm', (str) => {
+    expect(
+      str.indexOf('This will permanently delete rows from this table') !== -1
+    ).to.be.true;
+  });
+  cy.get(getElementFromAlias('table-browse-rows')).contains('18');
+  cy.wait(14000);
+};
+
+export const passBulkDeleteAllRows = () => {
+  cy.get(getElementFromAlias('table-browse-rows')).click();
+  cy.wait(5000);
+  cy.get(getElementFromAlias('table-browse-rows')).contains('18');
+  cy.get(getElementFromAlias('select-all-rows')).click();
+  cy.get(getElementFromAlias('bulk-delete')).click();
+  cy.wait(1000);
+  cy.on('window:confirm', (str) => {
+    expect(
+      str.indexOf('This will permanently delete rows from this table') !== -1
+    ).to.be.true;
+  });
+  cy.get(getElementFromAlias('table-browse-rows')).contains('(8)');
+  cy.wait(14000);
+};
diff --git a/console/cypress/integration/data/insert-browse/test.js b/console/cypress/integration/data/insert-browse/test.js
@@ -20,6 +20,8 @@ import {
   passCloneButton,
   checkViewRelationship,
   passDeleteRow,
+  passBulkDeleteRows,
+  passBulkDeleteAllRows,
 } from './spec';
 
 import { setMetaData } from '../../validators/validators';
@@ -51,6 +53,8 @@ export const runInsertBrowseTests = () => {
     it('Check edit button', passEditButton);
     it('Check for clone clear', passCloneButton);
     it('Delete the row', passDeleteRow);
+    it('Bulk delete rows', passBulkDeleteRows);
+    it('Bulk delete all rows', passBulkDeleteAllRows);
     it('Check view relationship', checkViewRelationship);
     it('Delete test table', deleteBITestTable);
   });

diff --git a/console/src/components/Common/TableCommon/foldableTable/index.jsx b/console/src/components/Common/TableCommon/foldableTable/index.jsx
@@ -194,7 +194,7 @@ export default ReactTable => {
     };
 
     applyFoldableForColumns = columns => {
-      return columns.map((col, index) => {
+      return columns.filter(Boolean).map((col, index) => {
         if (!col.foldable) return col;
 
         //If col don't have id then generate id based on index

diff --git a/console/src/components/Common/Tooltip/Tooltip.js b/console/src/components/Common/Tooltip/Tooltip.js
diff --git a/console/src/components/Common/Tooltip/Tooltip.tsx b/console/src/components/Common/Tooltip/Tooltip.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
+import Tooltip from 'react-bootstrap/lib/Tooltip';
+import styles from './Tooltip.scss';
+
+const tooltipGen = (message: string) => {
+  return <Tooltip id={message}>{message}</Tooltip>;
+};
+export interface TooltipProps extends React.ComponentProps<'i'> {
+  message: string;
+  placement?: 'right' | 'left' | 'top' | 'bottom';
+  className?: string;
+  tooltipStyle?: string;
+}
+
+const ToolTip: React.FC<TooltipProps> = ({
+  message,
+  placement = 'right',
+  tooltipStyle = '',
+  children,
+}) => (
+  <OverlayTrigger placement={placement} overlay={tooltipGen(message)}>
+    {children || (
+      <i
+        className={`fa fa-info-circle ${styles.tooltipIcon} ${tooltipStyle}`}
+        aria-hidden="true"
+      />
+    )}
+  </OverlayTrigger>
+);
+
+export default ToolTip;
diff --git a/console/src/components/Services/Actions/Add/Add.js b/console/src/components/Services/Actions/Add/Add.js
@@ -40,8 +40,8 @@ const AddAction = ({
     };
   }, []);
 
-  const handlerOnChange = e => dispatch(setActionHandler(e.target.value));
-  const kindOnChange = k => dispatch(setActionKind(k));
+  const handlerOnChange = (e) => dispatch(setActionHandler(e.target.value));
+  const kindOnChange = (k) => dispatch(setActionKind(k));
 
   const {
     sdl: typesDefinitionSdl,
@@ -59,12 +59,11 @@ const AddAction = ({
     dispatch(createAction());
   };
 
-  const setHeaders = hs => {
+  const setHeaders = (hs) => {
     dispatch(dispatchNewHeaders(hs));
   };
 
-  const toggleForwardClientHeaders = e => {
-    e.preventDefault();
+  const toggleForwardClientHeaders = () => {
     dispatch(toggleFCH());
   };
 

diff --git a/console/src/components/Services/Actions/Common/components/HeaderConfEditor.js b/console/src/components/Services/Actions/Common/components/HeaderConfEditor.js
@@ -32,15 +32,12 @@ const HandlerEditor = ({
         />
       </h2>
       <div className={`${styles.add_mar_bottom_mid}`}>
-        <label
-          className={`${styles.add_mar_right} ${styles.cursorPointer}`}
-          onClick={toggleForwardClientHeaders}
-        >
+        <label className={`${styles.add_mar_right} ${styles.cursorPointer}`}>
           <input
             type="checkbox"
             checked={forwardClientHeaders}
-            readOnly
-            className={`${styles.add_mar_right_small}`}
+            onChange={toggleForwardClientHeaders}
+            className={`${styles.add_mar_right_small} ${styles.cursorPointer}`}
           />
           Forward client headers to webhook
         </label>

diff --git a/console/src/components/Services/Actions/Modify/ActionEditor.js b/console/src/components/Services/Actions/Modify/ActionEditor.js
@@ -51,8 +51,8 @@ const ActionEditor = ({
   };
   React.useEffect(init, [currentAction]);
 
-  const handlerOnChange = e => dispatch(setActionHandler(e.target.value));
-  const kindOnChange = k => dispatch(setActionKind(k));
+  const handlerOnChange = (e) => dispatch(setActionHandler(e.target.value));
+  const kindOnChange = (k) => dispatch(setActionKind(k));
 
   const actionDefinitionOnChange = (value, error, timer, ast) => {
     dispatch(setActionDefinition(value, error, timer, ast));
@@ -70,12 +70,11 @@ const ActionEditor = ({
     dispatch(deleteAction(currentAction));
   };
 
-  const setHeaders = hs => {
+  const setHeaders = (hs) => {
     dispatch(dispatchNewHeaders(hs));
   };
 
-  const toggleForwardClientHeaders = e => {
-    e.preventDefault();
+  const toggleForwardClientHeaders = () => {
     dispatch(toggleFCH());
   };
 

diff --git a/console/src/components/Services/Data/Common/Components/ReloadEnumValuesButton.js b/console/src/components/Services/Data/Common/Components/ReloadEnumValuesButton.js