Merge branch 'main' into docs/disable-preview

kedro-org · Jun 11, 2024 · 2e413d3 · 2e413d3
2 parents dd51aaf + 7733896
commit 2e413d3
Show file tree

Hide file tree

Showing 20 changed files with 1,096 additions and 419 deletions.
diff --git a/RELEASE.md b/RELEASE.md
@@ -7,6 +7,11 @@ Please follow the established format:
 -->
 # Next release
 
+## Major features and improvements
+- Display published URLs. (#1907)
+
+## Bug fixes and other changes
+
 # Release 9.1.0
 
 ## Major features and improvements

diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -199,3 +199,39 @@ Cypress.Commands.add('__comparisonMode__', () => {
   cy.get(':nth-child(3) > .runs-list-card__checked').click();
   cy.wait('@compareThreeRuns').its('response.statusCode').should('eq', 200);
 });
+
+/**
+ * Custom command to fillout and submit the hosting shareable URL form
+ */
+Cypress.Commands.add(
+  '__setupAndSubmitShareableUrlForm__',
+  (bucketName, endpointName, primaryButtonNodeText) => {
+    // Intercept the network request to mock with a fixture
+    cy.__interceptRest__(
+      '/api/deploy',
+      'POST',
+      '/mock/deploySuccessResponse.json'
+    ).as('publishRequest');
+
+    // Reload the page to ensure a fresh state
+    cy.reload();
+
+    // Open the deploy modal
+    cy.get('.pipeline-menu-button--deploy').click();
+
+    // Select the first hosting platform from the dropdown
+    cy.get('.shareable-url-modal [data-test=kedro-pipeline-selector]').click();
+    cy.get('.shareable-url-modal .dropdown__options section div').eq(1).click();
+
+    // Fill in the form
+    cy.get('.shareable-url-modal [data-test="bucket_name"]').type(bucketName);
+    cy.get('.shareable-url-modal [data-test="endpoint_name"]').type(
+      endpointName
+    );
+
+    // Submit the form
+    cy.get('.shareable-url-modal__button-wrapper button')
+      .contains(primaryButtonNodeText)
+      .click();
+  }
+);
diff --git a/cypress/tests/ui/flowchart/shareable-urls.cy.js b/cypress/tests/ui/flowchart/shareable-urls.cy.js
@@ -1,5 +1,10 @@
-describe('Shareable URLs', () => {
-  it('verifies that users can open the Deploy Kedro-Viz modal. #TC-52', () => {
+describe('Shareable URLs with empty localStorage', () => {
+  beforeEach(() => {
+    // Clears localStorage before each test
+    cy.clearLocalStorage();
+  });
+
+  it('verifies that users can open the Deploy Kedro-Viz modal if the localStorage is empty. #TC-52', () => {
     // Intercept the network request to mock with a fixture
     cy.__interceptRest__(
       '/api/package-compatibilities',
@@ -10,7 +15,6 @@ describe('Shareable URLs', () => {
     // Action
     cy.reload();
     cy.get('.pipeline-menu-button--deploy').click({ force: true });
-    cy.get('[data-test="disclaimerButton"]').click({ force: true });
 
     // Assert after action
     cy.get('.shareable-url-modal .modal__wrapper').contains(
@@ -39,7 +43,6 @@ describe('Shareable URLs', () => {
   it('verifies that shareable url modal closes on close button click #TC-54', () => {
     // Action
     cy.get('.pipeline-menu-button--deploy').click();
-    cy.get('[data-test="disclaimerButton"]').click();
     cy.get('.shareable-url-modal__button-wrapper button')
       .contains('Cancel')
       .click();
@@ -56,7 +59,6 @@ describe('Shareable URLs', () => {
 
     // Action
     cy.get('.pipeline-menu-button--deploy').click();
-    cy.get('[data-test="disclaimerButton"]').click();
     cy.get('.shareable-url-modal [data-test=kedro-pipeline-selector]').click();
 
     // Assert after action
@@ -72,13 +74,14 @@ describe('Shareable URLs', () => {
 
     // Action
     cy.get('.pipeline-menu-button--deploy').click();
-    cy.get('[data-test="disclaimerButton"]').click();
 
     // Assert after action
     cy.get(
       '.shareable-url-modal [data-test=kedro-pipeline-selector] .dropdown__label span'
     ).contains(selectedPlatform);
-    cy.get('.shareable-url-modal input').should('have.value', '');
+    cy.get(
+      '.shareable-url-modal .shareable-url-modal__input-wrapper input'
+    ).should('have.value', '');
     cy.get('.shareable-url-modal__button-wrapper button')
       .contains(primaryButtonNodeText)
       .should('be.disabled');
@@ -89,14 +92,15 @@ describe('Shareable URLs', () => {
 
     // Action
     cy.get('.pipeline-menu-button--deploy').click();
-    cy.get('[data-test="disclaimerButton"]').click();
     cy.get('.shareable-url-modal [data-test=kedro-pipeline-selector]').click();
     cy.get('.shareable-url-modal .dropdown__options section div')
       .first()
       .click();
 
     // Assert after action
-    cy.get('.shareable-url-modal input').should('have.value', '');
+    cy.get(
+      '.shareable-url-modal .shareable-url-modal__input-wrapper input'
+    ).should('have.value', '');
     cy.get('.shareable-url-modal__button-wrapper button')
       .contains(primaryButtonNodeText)
       .should('be.disabled');
@@ -109,7 +113,6 @@ describe('Shareable URLs', () => {
 
     // Action
     cy.get('.pipeline-menu-button--deploy').click();
-    cy.get('[data-test="disclaimerButton"]').click();
     cy.get('.shareable-url-modal [data-test=kedro-pipeline-selector]').click();
     cy.get('.shareable-url-modal .dropdown__options section div')
       .first()
@@ -131,7 +134,6 @@ describe('Shareable URLs', () => {
     const primaryButtonNodeText = 'Publish';
     // Action
     cy.get('.pipeline-menu-button--deploy').click();
-    cy.get('[data-test="disclaimerButton"]').click();
     cy.get('.shareable-url-modal [data-test=kedro-pipeline-selector]').click();
     cy.get('.shareable-url-modal .dropdown__options section div')
       .first()
@@ -165,7 +167,6 @@ describe('Shareable URLs', () => {
     // Action
     cy.reload();
     cy.get('.pipeline-menu-button--deploy').click();
-    cy.get('[data-test="disclaimerButton"]').click();
     cy.get('.shareable-url-modal [data-test=kedro-pipeline-selector]').click();
     cy.get('.shareable-url-modal .dropdown__options section div')
       .first()
@@ -181,18 +182,14 @@ describe('Shareable URLs', () => {
     // Wait for the POST request to complete and check the mocked response
     cy.wait('@publishRequest').then((interception) => {
       // Assert after action
-      cy.get('.shareable-url-modal__result-url').contains(
-        interception.response.body.url
-      );
+      cy.get('.url-box__result-url').contains(interception.response.body.url);
     });
   });
 
   it('verifies that AWS link is generated with correct inputs on Republish button click #TC-61', () => {
     const bucketName = 'myBucketName';
     const endpointName = 'http://www.example.com';
     const primaryButtonNodeText = 'Publish';
-    const primaryButtonNodeTextVariant = 'Publish';
-    const secondaryButtonNodeText = 'Link Settings';
 
     // Intercept the network request to mock with a fixture
     cy.__interceptRest__(
@@ -204,7 +201,6 @@ describe('Shareable URLs', () => {
     // Action
     cy.reload();
     cy.get('.pipeline-menu-button--deploy').click();
-    cy.get('[data-test="disclaimerButton"]').click();
     cy.get('.shareable-url-modal [data-test=kedro-pipeline-selector]').click();
     cy.get('.shareable-url-modal .dropdown__options section div')
       .first()
@@ -217,23 +213,91 @@ describe('Shareable URLs', () => {
       .contains(primaryButtonNodeText)
       .click();
 
-    // Wait for the POST request to complete
-    cy.wait('@publishRequest');
-
-    // Action
-    cy.get('.shareable-url-modal__button-wrapper button')
-      .contains(secondaryButtonNodeText)
-      .click();
-    cy.get('.shareable-url-modal__button-wrapper button')
-      .contains(primaryButtonNodeTextVariant)
-      .click();
-
     // Wait for the POST request to complete and check the mocked response
     cy.wait('@publishRequest').then((interception) => {
       // Assert after action
-      cy.get('.shareable-url-modal__result-url').contains(
-        interception.response.body.url
+      cy.get('.url-box__result-url').contains(interception.response.body.url);
+    });
+  });
+});
+
+describe('Shareable URLs with valid localStorage', () => {
+  const bucketName = 'myBucketName';
+  const endpointName = 'http://www.example.com';
+  const secondBucketName = 'mySecondBucketName';
+  const secondEndpointName = 'http://www.exampleNumber2.com';
+
+  it('verifies that users can open the Published Content Kedro-Viz modal with valid URL after published it succesfully. #TC-XX', () => {
+    cy.__setupAndSubmitShareableUrlForm__(bucketName, endpointName, 'Publish');
+
+    // Wait for the POST request to complete
+    cy.wait('@publishRequest').then(() => {
+      // Close the modal once it publishes succesfully
+      cy.get('body').click(0, 0);
+
+      // Open the deploy modal again
+      cy.get('.pipeline-menu-button--deploy').click();
+      cy.get('.shareable-url-modal .modal__wrapper').contains(
+        `Publish and Share Kedro-Viz`
       );
+      cy.get('.url-box__result-url').contains(endpointName);
+    });
+  });
+
+  it('verifies that after published to more than one platform, users can open the Published Content Kedro-Viz modal to select on different option. #TC-XX1', () => {
+    const fillFormAndSubmit = (bucketName, endpointName) => {
+      cy.get('.shareable-url-modal [data-test="bucket_name"]').clear();
+      cy.get('.shareable-url-modal [data-test="bucket_name"]').type(bucketName);
+      cy.get('.shareable-url-modal [data-test="endpoint_name"]').clear();
+      cy.get('.shareable-url-modal [data-test="endpoint_name"]').type(
+        endpointName
+      );
+      cy.get('.shareable-url-modal__button-wrapper button')
+        .contains('Publish')
+        .click();
+    };
+
+    const selectHostingPlatform = (index) => {
+      cy.get(
+        '.shareable-url-modal [data-test=kedro-pipeline-selector]'
+      ).click();
+      cy.get('.shareable-url-modal .dropdown__options section div')
+        .eq(index)
+        .click();
+    };
+
+    cy.__setupAndSubmitShareableUrlForm__(bucketName, endpointName, 'Publish');
+
+    // Wait for the POST request to complete
+    cy.wait('@publishRequest').then(() => {
+      // Close the modal once it publishes successfully
+      cy.get('body').click(0, 0);
+      // Open the deploy modal again
+      cy.get('.pipeline-menu-button--deploy').click();
+      cy.get('.shareable-url-modal__published-action button').click();
+
+      // Select the second hosting platform from the dropdown
+      selectHostingPlatform(2);
+
+      // Fill in the form with second option
+      fillFormAndSubmit(secondBucketName, secondEndpointName);
+
+      // Close the modal once it publishes successfully
+      cy.get('body').click(0, 0);
+
+      cy.get('.pipeline-menu-button--deploy').click();
+
+      cy.get(
+        '.shareable-url-modal__published-dropdown-wrapper [data-test=kedro-pipeline-selector]'
+      ).click();
+
+      cy.get(
+        '.shareable-url-modal__published-dropdown-wrapper .dropdown__options section div'
+      )
+        .eq(1)
+        .click();
+
+      cy.get('.url-box__result-url').contains(secondEndpointName);
     });
   });
 });
diff --git a/src/components/icons/info.js b/src/components/icons/info.js
diff --git a/src/components/shareable-url-modal/compatibility-error-view/compatibility-error-view.js b/src/components/shareable-url-modal/compatibility-error-view/compatibility-error-view.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import Button from '../../ui/button';
+
+const CompatibilityErrorView = ({ onClick }) => (
+  <div className="shareable-url-modal__button-wrapper shareable-url-modal__button-wrapper--right">
+    <Button mode="secondary" onClick={onClick} size="small">
+      Cancel
+    </Button>
+    <a
+      href="https://docs.kedro.org/en/latest/visualisation/share_kedro_viz.html"
+      rel="noreferrer"
+      target="_blank"
+    >
+      <Button size="small">View documentation</Button>
+    </a>
+  </div>
+);
+
+export default CompatibilityErrorView;
diff --git a/src/components/shareable-url-modal/error-view/error-view.js b/src/components/shareable-url-modal/error-view/error-view.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import Button from '../../ui/button';
+
+const ErrorView = ({ onClick, responseError }) => (
+  <div className="shareable-url-modal__error">
+    <p>Error message: {responseError}</p>
+    <Button mode="primary" onClick={onClick} size="small">
+      Go back
+    </Button>
+  </div>
+);
+
+export default ErrorView;
diff --git a/src/components/shareable-url-modal/loading-view/loading-view.js b/src/components/shareable-url-modal/loading-view/loading-view.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import LoadingIcon from '../../icons/loading';
+
+const LoadingView = ({ isLoading }) => (
+  <div className="shareable-url-modal__loading">
+    <LoadingIcon visible={isLoading} />
+  </div>
+);
+
+export default LoadingView;