From d9caadfcf5e32a635fb8d0e7a97ffbc393c4272d Mon Sep 17 00:00:00 2001
From: Oscar Reyes <oscar-rreyes1@hotmail.com>
Date: Tue, 5 Sep 2023 21:18:45 -0600
Subject: [PATCH] fix(cypress): fixing AllowButton detachment from DOM

---
 web/cypress/e2e/TestRunDetail/Outputs.spec.ts    | 10 +++++-----
 web/src/components/AllowButton/AllowButton.tsx   |  9 ++++++---
 web/src/components/TestSpecForm/TestSpecForm.tsx |  1 +
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/web/cypress/e2e/TestRunDetail/Outputs.spec.ts b/web/cypress/e2e/TestRunDetail/Outputs.spec.ts
index 095aaef240..aed1f4880a 100644
--- a/web/cypress/e2e/TestRunDetail/Outputs.spec.ts
+++ b/web/cypress/e2e/TestRunDetail/Outputs.spec.ts
@@ -14,7 +14,7 @@ describe('Outputs', () => {
 
     // Save output
     cy.wait('@getSelect');
-    cy.get('[data-cy=output-save-button]').click({force: true});
+    cy.get('[data-cy=output-save-button]').click();
     cy.get('[data-cy=output-pending-tag]').should('have.length', 1);
 
     // Add new output from scratch
@@ -27,7 +27,7 @@ describe('Outputs', () => {
       cy.get('[data-cy=expression-editor] [contenteditable=true]').type('attr:http.status_code');
     });
     cy.wait('@getSelect');
-    cy.get('[data-cy=output-save-button]').click({force: true});
+    cy.get('[data-cy=output-save-button]').click();
     cy.get('[data-cy=output-pending-tag]').should('have.length', 2);
 
     // Publish and run
@@ -53,7 +53,7 @@ describe('Outputs', () => {
 
     // Save output
     cy.wait('@getSelect');
-    cy.get('[data-cy=output-save-button]').click({force: true});
+    cy.get('[data-cy=output-save-button]').click();
     cy.get('[data-cy=output-pending-tag]').should('have.length', 1);
 
     // Add new output from scratch
@@ -66,7 +66,7 @@ describe('Outputs', () => {
       cy.get('[data-cy=expression-editor] [contenteditable=true]').type('attr:http.status_code');
     });
     cy.wait('@getSelect');
-    cy.get('[data-cy=output-save-button]').click({force: true});
+    cy.get('[data-cy=output-save-button]').click();
     cy.get('[data-cy=output-pending-tag]').should('have.length', 2);
 
     // Delete output
@@ -96,7 +96,7 @@ describe('Outputs', () => {
 
     // Save output
     cy.wait('@getSelect');
-    cy.get('[data-cy=output-save-button]').click({force: true});
+    cy.get('[data-cy=output-save-button]').click();
     cy.get('[data-cy=output-pending-tag]').should('have.length', 1);
 
     // Revert
diff --git a/web/src/components/AllowButton/AllowButton.tsx b/web/src/components/AllowButton/AllowButton.tsx
index 8e145b9d80..c5c93134c4 100644
--- a/web/src/components/AllowButton/AllowButton.tsx
+++ b/web/src/components/AllowButton/AllowButton.tsx
@@ -9,9 +9,12 @@ const AllowButton = ({operation, ...props}: IProps) => {
   const {getIsAllowed} = useCustomization();
   const isAllowed = getIsAllowed(operation);
 
-  return (
-    <Tooltip title={!isAllowed ? 'You are not allowed to perform this operation' : ''}>
-      <Button {...props} disabled={!isAllowed || props.disabled} />
+  // the tooltip unmounts and remounts the children, detaching it from the DOM
+  return isAllowed ? (
+    <Button {...props} disabled={props.disabled} />
+  ) : (
+    <Tooltip title="You are not allowed to perform this operation">
+      <Button {...props} disabled />
     </Tooltip>
   );
 };
diff --git a/web/src/components/TestSpecForm/TestSpecForm.tsx b/web/src/components/TestSpecForm/TestSpecForm.tsx
index 5c9d9ecb1c..61649a9876 100644
--- a/web/src/components/TestSpecForm/TestSpecForm.tsx
+++ b/web/src/components/TestSpecForm/TestSpecForm.tsx
@@ -190,6 +190,7 @@ const TestSpecForm = ({
             type="primary"
             disabled={!isValid}
             onClick={form.submit}
+            htmlType="submit"
             data-cy="assertion-form-submit-button"
           >
             Save Test Spec