Make Kedro-Viz shareable via a hosted URL

.gitignore

@@ -21,7 +21,7 @@ kedro-viz.tgz
 # e2e testing
 cypress/videos
 cypress/screenshots
-cypress/downloads/ 
+cypress/downloads/
 
 # production
 build/
@@ -65,4 +65,3 @@ coverage.xml
 
 # Kedro
 *.log
-

RELEASE.md

@@ -8,17 +8,16 @@ Please follow the established format:
 
 # Release 6.6.0
 
-## Bug fixes and other changes
-
-- Fix for Kedro Viz Connection Error. (#1507)
-- Fix display of modular pipeline nodes that are associated with tags. (#1542)
-- Remove GraphQL subscription. (#1554)
+## Major features and improvements
 
-# Release 6.5.1
+- Make Kedro-Viz shareable via a hosted URL. (#1487)
 
 ## Bug fixes and other changes
 
 - Updated dependencies to ensure compatibility with Vite and Next.js environments; combine CSS into a single file when used as a React component. (#1510)
+- Fix for Kedro Viz Connection Error. (#1507)
+- Fix display of modular pipeline nodes that are associated with tags. (#1542)
+- Remove GraphQL subscription. (#1554)
 
 # Release 6.5.0
 

cypress/fixtures/mock/deploySuccessResponse.json

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

cypress/fixtures/mock/package-compatibilities-compatible.json

@@ -0,0 +1,5 @@
+{
+  "package_name": "fsspec",
+  "package_version": "2023.9.1",
+  "is_compatible": true
+}

cypress/fixtures/mock/package-compatibilities-incompatible.json

@@ -0,0 +1,5 @@
+{
+  "package_name": "fsspec",
+  "package_version": "2023.8.1",
+  "is_compatible": false
+}

cypress/tests/ui/flowchart/menu.cy.js

@@ -3,10 +3,12 @@
 import { prettifyName } from '../../../../src/utils';
 
 describe('Flowchart Menu', () => {
-  it('verifies that users can select a section of the flowchart, through the drop down. #TC-16', () => {
+  it('verifies that users can select a section of the flowchart through the drop down. #TC-16', () => {
     // Alias
     cy.intercept('GET', '/api/pipelines/*').as('pipelineRequest');
-    cy.get(':nth-child(2) > .menu-option__content > span').as('menuOption');
+    cy.get('.pipeline-list :nth-child(2) > .menu-option__content > span').as(
+      'menuOption'
+    );
 
     let menuOptionValue;
 
@@ -17,7 +19,7 @@ describe('Flowchart Menu', () => {
       });
 
     // Action
-    cy.get('[data-test="kedro-pipeline-selector"]').click();
+    cy.get('.pipeline-list [data-test="kedro-pipeline-selector"]').click();
     cy.get('@menuOption').click({ force: true });
 
     // Assert after action

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

@@ -0,0 +1,217 @@
+describe('Shareable URLs', () => {
+  it('verifies that users can open the Deploy Kedro-Viz modal. #TC-52', () => {
+    // Intercept the network request to mock with a fixture
+    cy.__interceptRest__(
+      '/api/package-compatibilities',
+      'GET',
+      '/mock/package-compatibilities-compatible.json'
+    );
+
+    // Action
+    cy.reload();
+    cy.get('.pipeline-menu-button--deploy').click({ force: true });
+
+    // Assert after action
+    cy.get('.shareable-url-modal .modal__wrapper').contains(
+      `Publish and Share Kedro-Viz`
+    );
+  });
+
+  it("shows an incompatible message given the user's fsspec package version is outdated. #TC-53", () => {
+    // Intercept the network request to mock with a fixture
+    cy.__interceptRest__(
+      '/api/package-compatibilities',
+      'GET',
+      '/mock/package-compatibilities-incompatible.json'
+    );
+
+    // Action
+    cy.reload();
+    cy.get('.pipeline-menu-button--deploy').click({ force: true });
+
+    // Assert after action
+    cy.get('.shareable-url-modal .modal__wrapper').contains(
+      `Publishing Kedro-Viz is only supported with fsspec>=2023.9.0. You are currently on version 2023.8.1.`
+    );
+  });
+
+  it('verifies that shareable url modal closes on close button click #TC-54', () => {
+    // Action
+    cy.get('.pipeline-menu-button--deploy').click();
+    cy.get('.shareable-url-modal__button-wrapper button')
+      .contains('Cancel')
+      .click();
+
+    // Assert after action
+    cy.get('.modal.shareable-url-modal').should(
+      'not.have.class',
+      'modal--visible'
+    );
+  });
+
+  it('verifies that users can click on region dropdown and see all region options #TC-55', () => {
+    const regionCount = 30;
+
+    // Action
+    cy.get('.pipeline-menu-button--deploy').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
+    );
+  });
+
+  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';
+    const primaryButtonNodeText = 'Publish';
+
+    // Action
+    cy.get('.pipeline-menu-button--deploy').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', '');
+    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', () => {
+    const primaryButtonNodeText = 'Publish';
+
+    // Action
+    cy.get('.pipeline-menu-button--deploy').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__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', () => {
+    const bucketName = 'myBucketName';
+    const primaryButtonNodeText = 'Publish';
+
+    // Action
+    cy.get('.pipeline-menu-button--deploy').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);
+
+    // Assert after action
+    cy.get('.shareable-url-modal__button-wrapper button')
+      .contains(primaryButtonNodeText)
+      .should('be.enabled');
+  });
+
+  it('verifies that error message appears with wrong inputs on publish button click #TC-59', () => {
+    const bucketName = 'myBucketName';
+    const primaryButtonNodeText = 'Publish';
+    const errorButtonNodeText = 'Go back';
+
+    // Action
+    cy.get('.pipeline-menu-button--deploy').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__button-wrapper button')
+      .contains(primaryButtonNodeText)
+      .click();
+
+    // Assert after action
+    cy.get('.shareable-url-modal .modal__wrapper').contains(
+      'Something went wrong. Please try again later.'
+    );
+    cy.get('.shareable-url-modal__error button').contains(errorButtonNodeText);
+  });
+
+  it('verifies that AWS link is generated with correct inputs on publish button click #TC-60', () => {
+    const bucketName = 'myBucketName';
+    const primaryButtonNodeText = 'Publish';
+
+    // Intercept the network request to mock with a fixture
+    cy.__interceptRest__(
+      '/api/deploy',
+      'POST',
+      '/mock/deploySuccessResponse.json'
+    ).as('publishRequest');
+
+    // Action
+    cy.reload();
+    cy.get('.pipeline-menu-button--deploy').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__button-wrapper button')
+      .contains(primaryButtonNodeText)
+      .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
+      );
+    });
+  });
+
+  it('verifies that AWS link is generated with correct inputs on Republish button click #TC-61', () => {
+    const bucketName = 'myBucketName';
+    const primaryButtonNodeText = 'Publish';
+    const primaryButtonNodeTextVariant = 'Republish';
+    const secondaryButtonNodeText = 'Link Settings';
+
+    // Intercept the network request to mock with a fixture
+    cy.__interceptRest__(
+      '/api/deploy',
+      'POST',
+      '/mock/deploySuccessResponse.json'
+    ).as('publishRequest');
+
+    // Action
+    cy.reload();
+    cy.get('.pipeline-menu-button--deploy').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__button-wrapper button')
+      .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
+      );
+    });
+  });
+});

package/features/environment.py

@@ -46,8 +46,8 @@ def before_scenario(context, scenario):
 
     if (
         kedro_version
-        and kedro_version <= Version.parse("0.18.0")
-        and sys.version_info >= (3, 9)
+        and kedro_version <= Version.parse("0.18.12")
+        and sys.version_info >= (3, 11)
     ):
         print(
             (

package/features/viz.feature

@@ -3,7 +3,7 @@ Feature: Viz plugin in new project
         Given I have prepared a config file with example code
 
     Scenario: Execute viz with the earliest Kedro version that it supports 
-        Given I have installed kedro version "0.17.5"
+        Given I have installed kedro version "0.18.2"
         And I have run a non-interactive kedro new with pandas-iris starter
         And I have installed the project's requirements
         When I execute the kedro viz command

package/kedro_viz/api/rest/router.py

@@ -63,9 +63,7 @@ async def deploy_kedro_viz(input_values: S3DeployerConfiguration):
         )
     except Exception as exc:  # pragma: no cover
         logger.exception("Deploying Kedro Viz failed: %s ", exc)
-        return JSONResponse(
-            status_code=500, content={"message": "Failed to deploy Kedro Viz"}
-        )
+        return JSONResponse(status_code=500, content={"message": f"{exc}"})
 
 
 @router.get(

package/kedro_viz/integrations/deployment/s3_deployer.py

@@ -3,14 +3,17 @@
 
 import json
 import logging
+import tempfile
 from datetime import datetime
 from pathlib import Path
 
 import fsspec
+from jinja2 import Environment, FileSystemLoader
 from semver import VersionInfo
 
 from kedro_viz import __version__
 from kedro_viz.api.rest.responses import save_api_responses_to_fs
+from kedro_viz.integrations.kedro import telemetry as kedro_telemetry
 
 _HTML_DIR = Path(__file__).parent.parent.parent.absolute() / "html"
 _METADATA_PATH = "api/deploy-viz-metadata"
@@ -48,11 +51,41 @@ def _upload_api_responses(self):
         """Upload API responses to S3."""
         save_api_responses_to_fs(self._bucket_path)
 
+    def _ingest_heap_analytics(self):
+        """Ingest heap analytics to index file in the build folder."""
+        project_path = Path.cwd().absolute()
+        heap_app_id = kedro_telemetry.get_heap_app_id(project_path)
+        heap_user_identity = kedro_telemetry.get_heap_identity()
+        should_add_telemetry = bool(heap_app_id) and bool(heap_user_identity)
+        html_content = (_HTML_DIR / "index.html").read_text(encoding="utf-8")
+        injected_head_content = []
+
+        env = Environment(loader=FileSystemLoader(_HTML_DIR))
+
+        if should_add_telemetry:
+            logger.debug("Ingesting heap analytics.")
+            telemetry_content = env.get_template("telemetry.html").render(
+                heap_app_id=heap_app_id, heap_user_identity=heap_user_identity
+            )
+            injected_head_content.append(telemetry_content)
+
+        injected_head_content.append("</head>")
+        html_content = html_content.replace("</head>", "\n".join(injected_head_content))
+
+        with tempfile.TemporaryDirectory() as temp_dir:
+            temp_file_path = f"{temp_dir}/index.html"
+
+            with open(temp_file_path, "w", encoding="utf-8") as temp_index_file:
+                temp_index_file.write(html_content)
+
+            self._remote_fs.put(temp_file_path, f"{self._bucket_path}/")
+
     def _upload_static_files(self, html_dir: Path):
         """Upload static HTML files to S3."""
         logger.debug("Uploading static html files to %s.", self._bucket_path)
         try:
             self._remote_fs.put(f"{str(html_dir)}/*", self._bucket_path, recursive=True)
+            self._ingest_heap_analytics()
         except Exception as exc:  # pragma: no cover
             logger.exception("Upload failed: %s ", exc)
             raise exc

package/requirements.txt

@@ -3,7 +3,7 @@ packaging~=23.0
 kedro>=0.17.5
 ipython>=7.0.0, <9.0
 fastapi>=0.73.0, <0.96.0
-fsspec>=2021.4, <2024.1 
+fsspec[s3]>=2021.4, <2024.1 
 aiofiles==22.1.0
 uvicorn[standard]~=0.22.0
 watchgod~=0.8.2