Sharable Kedro-Viz UI for AWS, GCP and Azure

cypress/fixtures/mock/deploySuccessResponse.json

@@ -1,4 +1,4 @@
 {
-  "message": "Website deployed on S3",
-  "url": "http://myBucketName.s3-website.us-east-1.amazonaws.com"
+  "message": "Website deployed on AWS",
+  "url": "http://www.example.com"
 }

cypress/tests/ui/flowchart/shareable-urls.cy.js

@@ -10,6 +10,7 @@ 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(
@@ -28,6 +29,7 @@ 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(
@@ -38,6 +40,7 @@ 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();
@@ -49,65 +52,73 @@ describe('Shareable URLs', () => {
     );
   });
 
-  it('verifies that users can click on region dropdown and see all region options #TC-55', () => {
-    const regionCount = 30;
+  it('verifies that users can click on platform dropdown and see all platform options #TC-55', () => {
+    const platformCount = 3;
 
     // 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
     cy.get('.shareable-url-modal .menu-option').should(
       'have.length',
-      regionCount
+      platformCount
     );
   });
 
-  it('verifies that publish button should be disabled when region is not selected and bucket name is empty #TC-56', () => {
-    const selectedRegion = 'Select a region';
+  it('verifies that publish button should be disabled when platform is not selected and bucket name & endpoint name are empty #TC-56', () => {
+    const selectedPlatform = 'Select a hosting platform';
     const primaryButtonNodeText = 'Publish';
 
     // 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(selectedRegion);
-    cy.get('.shareable-url-modal textarea').should('have.value', '');
+    ).contains(selectedPlatform);
+    cy.get('.shareable-url-modal input').should('have.value', '');
     cy.get('.shareable-url-modal__button-wrapper button')
       .contains(primaryButtonNodeText)
       .should('be.disabled');
   });
 
-  it('verifies that publish button should be disabled when a bucket region is selected and bucket name is empty #TC-57', () => {
+  it('verifies that publish button should be disabled when a platform is selected and bucket name is empty #TC-57', () => {
     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()
       .click();
 
     // Assert after action
-    cy.get('.shareable-url-modal textarea').should('have.value', '');
+    cy.get('.shareable-url-modal input').should('have.value', '');
     cy.get('.shareable-url-modal__button-wrapper button')
       .contains(primaryButtonNodeText)
       .should('be.disabled');
   });
 
-  it('verifies that publish button should be enabled when region is selected and bucket name is not empty #TC-58', () => {
+  it('verifies that publish button should be enabled when platform is selected and bucket name & endpoint name are not empty #TC-58', () => {
+    const endpointName = 'http://www.example.com';
     const bucketName = 'myBucketName';
     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()
       .click();
-    cy.get('.shareable-url-modal textarea').type(bucketName);
+    cy.get('.shareable-url-modal [data-test="bucket_name"]').type(bucketName);
+    cy.get('.shareable-url-modal [data-test="endpoint_name"]').type(
+      endpointName
+    );
 
     // Assert after action
     cy.get('.shareable-url-modal__button-wrapper button')
@@ -116,15 +127,20 @@ describe('Shareable URLs', () => {
   });
 
   it('verifies that error message appears with wrong inputs on publish button click #TC-59', () => {
+    const endpointName = 'http://www.example.com';
     const bucketName = 'myBucketName';
     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()
       .click();
-    cy.get('.shareable-url-modal textarea').type(bucketName);
+    cy.get('.shareable-url-modal [data-test="bucket_name"]').type(bucketName);
+    cy.get('.shareable-url-modal [data-test="endpoint_name"]').type(
+      endpointName
+    );
     cy.get('.shareable-url-modal__button-wrapper button')
       .contains(primaryButtonNodeText)
       .click();
@@ -137,6 +153,7 @@ describe('Shareable URLs', () => {
 
   it('verifies that AWS link is generated with correct inputs on publish button click #TC-60', () => {
     const bucketName = 'myBucketName';
+    const endpointName = 'http://www.example.com';
     const primaryButtonNodeText = 'Publish';
 
     // Intercept the network request to mock with a fixture
@@ -149,11 +166,15 @@ 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()
       .click();
-    cy.get('.shareable-url-modal textarea').type(bucketName);
+    cy.get('.shareable-url-modal [data-test="bucket_name"]').type(bucketName);
+    cy.get('.shareable-url-modal [data-test="endpoint_name"]').type(
+      endpointName
+    );
     cy.get('.shareable-url-modal__button-wrapper button')
       .contains(primaryButtonNodeText)
       .click();
@@ -169,8 +190,9 @@ describe('Shareable URLs', () => {
 
   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 = 'Republish';
+    const primaryButtonNodeTextVariant = 'Publish';
     const secondaryButtonNodeText = 'Link Settings';
 
     // Intercept the network request to mock with a fixture
@@ -183,11 +205,15 @@ 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()
       .click();
-    cy.get('.shareable-url-modal textarea').type(bucketName);
+    cy.get('.shareable-url-modal [data-test="bucket_name"]').type(bucketName);
+    cy.get('.shareable-url-modal [data-test="endpoint_name"]').type(
+      endpointName
+    );
     cy.get('.shareable-url-modal__button-wrapper button')
       .contains(primaryButtonNodeText)
       .click();

package/kedro_viz/api/rest/router.py

@@ -20,6 +20,11 @@
     get_selected_pipeline_response,
 )
 
+try:
+    from azure.core.exceptions import ServiceRequestError
+except ImportError:  # pragma: no cover
+    ServiceRequestError = None  # type: ignore
+
 logger = logging.getLogger(__name__)
 
 router = APIRouter(
@@ -68,6 +73,16 @@ async def deploy_kedro_viz(input_values: DeployerConfiguration):
         return JSONResponse(
             status_code=401, content={"message": "Please provide valid credentials"}
         )
+    except (
+        # pylint: disable=catching-non-exception
+        (FileNotFoundError, ServiceRequestError)
+        if ServiceRequestError is not None
+        else FileNotFoundError
+    ) as exc:  # pragma: no cover
+        logger.exception("FileNotFoundError while deploying Kedro Viz : %s ", exc)
+        return JSONResponse(
+            status_code=400, content={"message": "The specified bucket does not exist"}
+        )
     except Exception as exc:  # pragma: no cover
         logger.exception("Deploying Kedro Viz failed: %s ", exc)
         return JSONResponse(status_code=500, content={"message": f"{exc}"})

src/components/experiment-tracking/run-details-modal/run-details-modal.js

@@ -87,6 +87,7 @@ const RunDetailsModal = ({
             defaultValue={valuesToUpdate.title}
             onChange={(value) => onChange('title', value)}
             resetValueTrigger={visible}
+            type="textarea"
             size="large"
           />
         </div>
@@ -100,6 +101,7 @@ const RunDetailsModal = ({
             onChange={(value) => onChange('notes', value)}
             placeholder="Add here"
             resetValueTrigger={visible}
+            type="textarea"
             size="small"
           />
         </div>

src/components/metadata/metadata.js

@@ -25,6 +25,7 @@ import {
 
 import './styles/metadata.scss';
 import MetaDataStats from './metadata-stats';
+import { isRunningLocally } from '../../utils';
 
 /**
  * Shows node meta data
@@ -291,21 +292,23 @@ const MetaData = ({
                   </button>
                 </>
               )}
-              {hasTrackingData && (
-                <button
-                  className="pipeline-metadata__link"
-                  onClick={
-                    isMetricsTrackingDataset
-                      ? toMetricsViewPath
-                      : toExperimentTrackingPath
-                  }
-                >
-                  <ExpandIcon className="pipeline-metadata__link-icon"></ExpandIcon>
-                  <span className="pipeline-metadata__link-text">
-                    Open in Experiment Tracking
-                  </span>
-                </button>
-              )}
+              {isRunningLocally()
+                ? hasTrackingData && (
+                    <button
+                      className="pipeline-metadata__link"
+                      onClick={
+                        isMetricsTrackingDataset
+                          ? toMetricsViewPath
+                          : toExperimentTrackingPath
+                      }
+                    >
+                      <ExpandIcon className="pipeline-metadata__link-icon"></ExpandIcon>
+                      <span className="pipeline-metadata__link-text">
+                        Open in Experiment Tracking
+                      </span>
+                    </button>
+                  )
+                : null}
               {hasPreviewData && (
                 <>
                   <div className="pipeline-metadata__preview">

src/components/settings-modal/settings-modal.js

@@ -16,6 +16,7 @@ import Button from '../ui/button';
 import Modal from '../ui/modal';
 
 import './settings-modal.scss';
+import { isRunningLocally } from '../../utils';
 
 /**
  * Modal to allow users to change the flag settings
@@ -157,25 +158,27 @@ const SettingsModal = ({
                 toggleValue={toggleFlags[value]}
               />
             ))}
-            {isOutdated ? (
-              <div className="pipeline-settings-modal__upgrade-reminder">
-                <span>&#8226; Kedro-Viz {latestVersion} is here! </span>
-                <a
-                  href="https://github.com/kedro-org/kedro-viz/releases"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  View release notes
-                </a>
-              </div>
-            ) : (
-              <div className="pipeline-settings-modal__already-latest">
-                <span>
-                  &#8226; You are on the latest version of Kedro-Viz (
-                  {latestVersion})
-                </span>
-              </div>
-            )}
+            {isRunningLocally() ? (
+              isOutdated ? (
+                <div className="pipeline-settings-modal__upgrade-reminder">
+                  <span>&#8226; Kedro-Viz {latestVersion} is here! </span>
+                  <a
+                    href="https://github.com/kedro-org/kedro-viz/releases"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    View release notes
+                  </a>
+                </div>
+              ) : (
+                <div className="pipeline-settings-modal__already-latest">
+                  <span>
+                    &#8226; You are on the latest version of Kedro-Viz (
+                    {latestVersion})
+                  </span>
+                </div>
+              )
+            ) : null}
           </div>
           <div className="run-details-modal-button-wrapper">
             <Button