Feat/add deprecation et (#2248)

Fixes #2238, to add a deprecation warning banner to the Kedro-Viz experiment tracking page

RELEASE.md

@@ -16,6 +16,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)
 - Fix inconsistent function inspection for decorated functions. (#2246)
+- 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,4 @@
 describe('Banners in Kedro-Viz', () => {
-  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,96 @@
+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://kedro.org/blog/deprecate-experiment-tracking-kedro-viz',
+            'this blog post'
+          )}
+          .
+        </p>
+
+        <p className="deprecation-banner-modal__secondary-text">
+          Our documentation explains{' '}
+          {renderLink(
+            'https://docs.kedro.org/en/stable/integrations/mlflow.html',
+            'how to continue using Kedro with MLflow for experiment tracking '
+          )}
+          and{' '}
+          {renderLink(
+            'https://docs.kedro.org/projects/kedro-viz/en/latest/migrate_experiment_tracking.html',
+            'how to migrate a Kedro project accordingly'
+          )}
+          .
+        </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,