From b93da39b5c6764b00157ee59d35a414f08b7253f Mon Sep 17 00:00:00 2001
From: Aleksandra Sikora <aleksandra@hasura.io>
Date: Thu, 20 Aug 2020 16:32:45 +0200
Subject: [PATCH] console: fix `remove column` test (#5622)

---
 console/cypress/integration/data/modify/spec.ts    | 14 +++++++++++---
 .../Services/Data/TableModify/PrimaryKeyEditor.js  |  8 ++++++--
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/console/cypress/integration/data/modify/spec.ts b/console/cypress/integration/data/modify/spec.ts
index bdb0477dc6279..6fea244502abb 100644
--- a/console/cypress/integration/data/modify/spec.ts
+++ b/console/cypress/integration/data/modify/spec.ts
@@ -214,12 +214,20 @@ export const passModifyPkey = () => {
   cy.get(getElementFromAlias('modify-table-edit-pks')).click();
   cy.get(getElementFromAlias('primary-key-select-1')).select('1');
   cy.get(getElementFromAlias('modify-table-pks-save')).click();
+  cy.get(getElementFromAlias('pk-config-text')).within(() => {
+    cy.get('b').contains(getColName(0));
+    cy.get('b').contains('id');
+  });
   cy.wait(5000);
-  // TODO
-  // test disappearance expect
-  // (cy.get(getElementFromAlias('modify-table-column-1-remove'))).not.to.exist;
+
   cy.get(getElementFromAlias('remove-pk-column-1')).click();
   cy.get(getElementFromAlias('modify-table-pks-save')).click();
+  cy.get(getElementFromAlias('pk-config-text')).within(() => {
+    cy.get('b').contains('id');
+  });
+  cy.get(getElementFromAlias('pk-config-text')).within(() => {
+    cy.get('b').should('not.contain', getColName(0));
+  });
   cy.get(getElementFromAlias('modify-table-close-pks')).click();
   cy.wait(3000);
 };
diff --git a/console/src/components/Services/Data/TableModify/PrimaryKeyEditor.js b/console/src/components/Services/Data/TableModify/PrimaryKeyEditor.js
index 4ab8a5a95d590..08ecaf74012c3 100644
--- a/console/src/components/Services/Data/TableModify/PrimaryKeyEditor.js
+++ b/console/src/components/Services/Data/TableModify/PrimaryKeyEditor.js
@@ -55,7 +55,9 @@ const PrimaryKeyEditor = ({
   );
 
   // label next to the button when the editor is expanded
-  const pkEditorExpandedLabel = () => <div>{pkConfigText}</div>;
+  const pkEditorExpandedLabel = () => (
+    <div data-test="pk-config-text">{pkConfigText}</div>
+  );
 
   // expanded editor content
   const pkEditorExpanded = () => (
@@ -95,7 +97,9 @@ const PrimaryKeyEditor = ({
     );
   };
 
-  useEffect(setPkEditState, [columns]);
+  useEffect(() => {
+    setPkEditState();
+  }, [columns.length]);
 
   // remove
   const onRemove = () => {