Test gitpages workflow

.github/workflows/deploy-gitpage.yml

@@ -0,0 +1,80 @@
+name: Deploy Kedro-Viz to Pages
+
+on:
+  push:
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+env:
+  PYTHON_VERSION: '3.10'
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Python ${{ env.PYTHON_VERSION }}
+        uses: actions/setup-python@v5
+        with:
+          python-version: ${{ env.PYTHON_VERSION }}    
+
+      - name: Cache python packages for Linux
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/pip
+          key: ubuntu-latest-python-3.9            
+
+      - name: Install Kedro and other Python Dependencies
+        uses: "./.github/actions/install_kedro_and_python_dependencies"
+
+      - name: Setup Node.js and Install Dependencies
+        uses: "./.github/actions/install_node_dependencies"
+
+      - name: Build React application
+        run: |-
+          node -v
+          make build
+
+      - name: Install Kedro-Viz development package
+        run: |
+          pip install -e package
+        shell: bash
+
+      - name: Update demo-project build directory with the latest changes
+        run: |
+          cd demo-project
+          if ! (kedro viz build --include-previews |& tee /dev/stderr | grep -i -q "Success!"); then
+            exit 1
+          fi
+        shell: bash
+
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload entire repository
+          path: 'demo-project/build'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

RELEASE.md

@@ -15,6 +15,7 @@ Please follow the established format:
 
 - Fix kedro viz `--load-file` to run from any directory without requiring a Kedro project. (#2206)
 - Improved modular pipeline expand/collapse logic for better state synchronisation. (#2225)
+- Add deprecation warning for Experiment Tracking removal. (#2248)
 
 # Release 10.1.0
 

cypress/support/commands.js

@@ -1,5 +1,6 @@
 // Add any reusable custom commands here
 import { join } from 'path';
+import { localStorageETDeprecationBannerSeen } from '../../src/config';
 
 /**
  * Custom command for intercepting network requests using fixtures for GraphQL
@@ -167,11 +168,19 @@ Cypress.Commands.add('__conditionalVisit__', () => {
     cy.__interceptGql__('getRunData');
     cy.__interceptGql__('getMetricPlotData');
 
-    cy.visit('/experiment-tracking');
+    cy.visit('/experiment-tracking', {
+      onBeforeLoad(win) {
+        win.localStorage.setItem(localStorageETDeprecationBannerSeen, JSON.stringify(true));
+      }
+    });
 
     cy.wait(['@getRunsList', '@getRunData', '@getMetricPlotData']);
   } else {
-    cy.visit('/');
+    cy.visit('/', {
+      onBeforeLoad(win) {
+        win.localStorage.setItem(localStorageETDeprecationBannerSeen, JSON.stringify(true));
+      }
+    });
   }
 });
 

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

@@ -1,8 +1,8 @@
 describe('Banners in Kedro-Viz', () => {
-  beforeEach(() => {
-    // Clears localStorage before each test
-    cy.clearLocalStorage();
-  });
+  // beforeEach(() => {
+  //   // Clears localStorage before each test
+  //   cy.clearLocalStorage();
+  // });
 
   it("shows a missing dependencies banner in viz lite mode if the kedro project dependencies are not installed.", () => {
     // Intercept the network request to mock with a fixture

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

@@ -1,8 +1,4 @@
 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

cypress/tests/ui/toolbar/global-toolbar.cy.js

@@ -1,10 +1,15 @@
 // All E2E Tests Related to global-toolbar goes here.
 
 import { prettifyName, stripNamespace } from '../../../../src/utils';
+import { localStorageETDeprecationBannerSeen } from '../../../../src/config';
 
 describe('Global Toolbar', () => {
   before(() => {
-    cy.visit('/'); // Visit the application
+    cy.visit('/', {
+      onBeforeLoad(win) {
+        win.localStorage.setItem(localStorageETDeprecationBannerSeen, JSON.stringify(true));
+      }
+    });
     cy.enablePrettyNames(); // Enable pretty names using the custom command
   });
 

src/components/deprecation-banner/deprecation-banner.js

@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import Modal from '../ui/modal';
+import Button from '../ui/button';
+import { localStorageETDeprecationBannerSeen } from '../../config';
+
+import './deprecation-banner.scss';
+
+export const DeprecationBanner = () => {
+  const visible = !window.localStorage.getItem(
+    localStorageETDeprecationBannerSeen
+  );
+  const [showModal, setShowModal] = useState(visible);
+
+  const handleAcknowledgeAndDismiss = () => {
+    window.localStorage.setItem(localStorageETDeprecationBannerSeen, true);
+    setShowModal(false);
+  };
+
+  const handleProvideFeedbackClick = () => {
+    window.open('https://github.com/kedro-org/kedro-viz/issues/2247', '_blank');
+  };
+
+  const renderLink = (url, text) => (
+    <a
+      href={url}
+      className="deprecation-banner-modal__link"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {text}
+    </a>
+  );
+
+  return (
+    <Modal
+      className="deprecation-banner-modal"
+      title="Experiment tracking will be disabled soon."
+      visible={showModal}
+    >
+      <div className="deprecation-banner-modal__message-wrapper">
+        <p>
+          We have decided to deprecate experiment tracking feature from
+          Kedro-Viz version 11.0.0
+        </p>
+
+        <p className="deprecation-banner-modal__secondary-text">
+          Find out more from{' '}
+          {renderLink('https://example.com/blog-post', 'this blog post')}.
+        </p>
+
+        <p className="deprecation-banner-modal__secondary-text">
+          Our documentation explains{' '}
+          {renderLink(
+            'https://google.com',
+            'how to continue using Kedro with MLflow for experiment tracking'
+          )}
+          , and{' '}
+          {renderLink(
+            'https://google.com',
+            'how to migrate a Kedro project to use them'
+          )}
+          .
+        </p>
+
+        <p className="deprecation-banner-modal__secondary-text">
+          If you have any further feedback for us, feel free to share your
+          thoughts below.
+        </p>
+      </div>
+
+      <div className="deprecation-banner-modal__button-wrapper">
+        <Button
+          mode="secondary"
+          onClick={handleProvideFeedbackClick}
+          size="small"
+          className="deprecation-banner-modal__provide-feedback-btn"
+          dataTest="deprecation-banner-modal__provide-feedback-btn"
+        >
+          Provide feedback
+        </Button>
+        <Button
+          size="small"
+          onClick={handleAcknowledgeAndDismiss}
+          className="deprecation-banner-modal--acknowledge-and-dismiss-btn"
+          dataTest="deprecation-banner-modal--acknowledge-and-dismiss-btn"
+        >
+          Acknowledge and dismiss
+        </Button>
+      </div>
+    </Modal>
+  );
+};

src/components/deprecation-banner/deprecation-banner.scss

@@ -0,0 +1,84 @@
+@use '../../styles/variables' as variables;
+
+$modal-height: 416px;
+$modal-margin: 48px;
+$modal-width: 446px;
+$text-margin: 24px;
+
+.kui-theme--light {
+  --secondary-text-color: #{variables.$black-500};
+  --primary-button-background: #{variables.$black-900};
+  --primary-button-text-color: #{variables.$white-0};
+}
+
+.kui-theme--dark {
+  --secondary-text-color: #{variables.$white-900};
+  --primary-button-background: #{variables.$white-0};
+  --primary-button-text-color: #{variables.$black-900};
+}
+
+.deprecation-banner-modal {
+  .modal__content {
+    max-width: calc(#{$modal-width} + 2 * #{$modal-margin});
+  }
+
+  .modal__wrapper {
+    width: $modal-width;
+    padding: 0;
+    margin: $modal-margin;
+  }
+
+  .modal__title {
+    text-align: left;
+    margin-bottom: 0;
+  }
+
+  .deprecation-banner-modal__message-wrapper {
+    p {
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px;
+      margin-bottom: 0;
+      margin-top: $text-margin;
+      text-align: left;
+    }
+
+    .deprecation-banner-modal__secondary-text {
+      color: var(--secondary-text-color);
+    }
+  }
+
+  .deprecation-banner-modal__button-wrapper {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    margin-top: $modal-margin;
+    width: 100%;
+
+    .button__btn--secondary {
+      padding-left: 0;
+      text-decoration: underline;
+      text-underline-offset: 3px;
+
+      &:hover::after {
+        background-color: transparent;
+      }
+    }
+
+    .button__btn--primary {
+      border-color: var(--primary-button-background);
+
+      &:hover {
+        background-color: var(--primary-button-background);
+        color: var(--primary-button-text-color);
+      }
+    }
+  }
+
+  .deprecation-banner-modal__link {
+    color: var(--secondary-text-color);
+    text-decoration: underline;
+    text-underline-offset: 3px;
+  }
+}

src/components/wrapper/wrapper.js

@@ -15,6 +15,7 @@ import ExperimentWrapper from '../experiment-wrapper';
 import SettingsModal from '../settings-modal';
 import UpdateReminder from '../update-reminder';
 import ShareableUrlModal from '../shareable-url-modal';
+import { DeprecationBanner } from '../deprecation-banner/deprecation-banner';
 
 import './wrapper.scss';
 
@@ -53,6 +54,7 @@ export const Wrapper = ({ displayGlobalNavigation, theme }) => {
               latestVersion={latestVersion}
             />
             {isRunningLocally() ? <ShareableUrlModal /> : null}
+            <DeprecationBanner />
             {versionData && (
               <UpdateReminder
                 isOutdated={isOutdated}

src/config.js

@@ -7,6 +7,8 @@ export const localStorageRunsMetadata = 'KedroViz-runs-metadata';
 export const localStorageShareableUrl = 'KedroViz-shareable-url';
 export const localStorageFeedbackSeen = 'KedroViz-feedback-seen';
 export const localStorageBannerStatus = 'KedroViz-banners';
+export const localStorageETDeprecationBannerSeen =
+  'KedroViz-ET-deprecation-banner-seen';
 
 export const linkToFlowchartInitialVal = {
   fromURL: null,