diff --git a/RELEASE.md b/RELEASE.md index 97d67b7052..00465c525d 100644 --- a/RELEASE.md +++ b/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 diff --git a/cypress/support/commands.js b/cypress/support/commands.js index 169fc93cc8..d1580155a0 100644 --- a/cypress/support/commands.js +++ b/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)); + } + }); } }); diff --git a/cypress/tests/ui/flowchart/banners.cy.js b/cypress/tests/ui/flowchart/banners.cy.js index b7a66b4f54..0910fe2d68 100644 --- a/cypress/tests/ui/flowchart/banners.cy.js +++ b/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 diff --git a/cypress/tests/ui/flowchart/shareable-urls.cy.js b/cypress/tests/ui/flowchart/shareable-urls.cy.js index 776e745ffc..ec39a6a94a 100644 --- a/cypress/tests/ui/flowchart/shareable-urls.cy.js +++ b/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 diff --git a/cypress/tests/ui/toolbar/global-toolbar.cy.js b/cypress/tests/ui/toolbar/global-toolbar.cy.js index 64971aa1d7..f492e535b8 100644 --- a/cypress/tests/ui/toolbar/global-toolbar.cy.js +++ b/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 }); diff --git a/package-lock.json b/package-lock.json index 9de9baa9a4..1f27a03a84 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,7 +6,7 @@ "packages": { "": { "name": "@quantumblack/kedro-viz", - "version": "9.2.0", + "version": "10.1.0", "dependencies": { "@apollo/client": "^3.5.6", "@emotion/react": "^11.10.6", @@ -34816,4 +34816,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/components/deprecation-banner/deprecation-banner.js b/src/components/deprecation-banner/deprecation-banner.js new file mode 100644 index 0000000000..2613aa6bb6 --- /dev/null +++ b/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) => ( + + {text} + + ); + + return ( + +
+

+ We have decided to deprecate experiment tracking feature from + Kedro-Viz version 11.0.0 +

+ +

+ Find out more from{' '} + {renderLink( + 'https://kedro.org/blog/deprecate-experiment-tracking-kedro-viz', + 'this blog post' + )} + . +

+ +

+ 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' + )} + . +

+ +

+ If you have any further feedback for us, feel free to share your + thoughts below. +

+
+ +
+ + +
+
+ ); +}; diff --git a/src/components/deprecation-banner/deprecation-banner.scss b/src/components/deprecation-banner/deprecation-banner.scss new file mode 100644 index 0000000000..22146d0c49 --- /dev/null +++ b/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; + } +} diff --git a/src/components/wrapper/wrapper.js b/src/components/wrapper/wrapper.js index 37f289fe0f..8b49abf0ab 100644 --- a/src/components/wrapper/wrapper.js +++ b/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() ? : null} + {versionData && (