From 4c31689c86955721098addf990eadec836ccec0d Mon Sep 17 00:00:00 2001 From: Huong Nguyen Date: Tue, 19 Nov 2024 12:29:45 +0000 Subject: [PATCH 1/6] update content for lite banner Signed-off-by: Huong Nguyen --- src/components/flowchart-wrapper/flowchart-wrapper.js | 4 ++-- src/components/ui/banner/banner.scss | 6 +++--- src/config.js | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/flowchart-wrapper/flowchart-wrapper.js b/src/components/flowchart-wrapper/flowchart-wrapper.js index 73fec5327..211143314 100644 --- a/src/components/flowchart-wrapper/flowchart-wrapper.js +++ b/src/components/flowchart-wrapper/flowchart-wrapper.js @@ -19,7 +19,7 @@ import ExportModal from '../export-modal'; import FlowChart from '../flowchart'; import PipelineWarning from '../pipeline-warning'; import LoadingIcon from '../icons/loading'; -import AlertIcon from '../icons/alert'; +import InfoIcon from '../icons/info'; import MetaData from '../metadata'; import MetadataModal from '../metadata-modal'; import ShareableUrlMetadata from '../shareable-url-modal/shareable-url-metadata'; @@ -342,7 +342,7 @@ export const FlowChartWrapper = ({ {displayMetadataPanel && } {showBanner(BANNER_KEYS.LITE) && ( } + icon={} message={{ title: BANNER_METADATA.liteModeWarning.title, body: BANNER_METADATA.liteModeWarning.body, diff --git a/src/components/ui/banner/banner.scss b/src/components/ui/banner/banner.scss index 2bfd914b9..8bbe8d15d 100755 --- a/src/components/ui/banner/banner.scss +++ b/src/components/ui/banner/banner.scss @@ -41,12 +41,12 @@ // Icon styling .banner-icon { - margin-right: 12px; + margin-top: 8px; display: flex; & svg { - width: 24px; - height: 24px; + width: 32px; + height: 32px; } } diff --git a/src/config.js b/src/config.js index 6bdaa8a1a..90708bcac 100644 --- a/src/config.js +++ b/src/config.js @@ -212,7 +212,7 @@ export const NODE_TYPES = { export const BANNER_METADATA = { liteModeWarning: { title: 'Missing dependencies', - body: 'For the best experience with full functionality, please install the missing Kedro project dependencies.', + body: 'Some features might be disabled in --lite mode due to missing dependencies', docsLink: 'https://docs.kedro.org/projects/kedro-viz/en/latest/kedro-viz_visualisation.html#visualise-a-kedro-project-without-installing-project-dependencies', }, From 29b9badb2198422bcf58c1ae9dda35b129706a33 Mon Sep 17 00:00:00 2001 From: Huong Nguyen Date: Tue, 19 Nov 2024 14:29:27 +0000 Subject: [PATCH 2/6] use new logo and copy Signed-off-by: Huong Nguyen --- .../flowchart-wrapper/flowchart-wrapper.js | 4 ++-- src/components/icons/info-banner.js | 12 ++++++++++++ src/components/ui/banner/banner.scss | 6 +++--- src/config.js | 2 +- 4 files changed, 18 insertions(+), 6 deletions(-) create mode 100644 src/components/icons/info-banner.js diff --git a/src/components/flowchart-wrapper/flowchart-wrapper.js b/src/components/flowchart-wrapper/flowchart-wrapper.js index 211143314..f6f5bfc16 100644 --- a/src/components/flowchart-wrapper/flowchart-wrapper.js +++ b/src/components/flowchart-wrapper/flowchart-wrapper.js @@ -19,7 +19,7 @@ import ExportModal from '../export-modal'; import FlowChart from '../flowchart'; import PipelineWarning from '../pipeline-warning'; import LoadingIcon from '../icons/loading'; -import InfoIcon from '../icons/info'; +import InfoBannerIcon from '../icons/info-banner'; import MetaData from '../metadata'; import MetadataModal from '../metadata-modal'; import ShareableUrlMetadata from '../shareable-url-modal/shareable-url-metadata'; @@ -342,7 +342,7 @@ export const FlowChartWrapper = ({ {displayMetadataPanel && } {showBanner(BANNER_KEYS.LITE) && ( } + icon={} message={{ title: BANNER_METADATA.liteModeWarning.title, body: BANNER_METADATA.liteModeWarning.body, diff --git a/src/components/icons/info-banner.js b/src/components/icons/info-banner.js new file mode 100644 index 000000000..d0eb20b2d --- /dev/null +++ b/src/components/icons/info-banner.js @@ -0,0 +1,12 @@ +import React from 'react'; + +const InfoBannerIcon = ({ className }) => ( + + + +); + +export default InfoBannerIcon; diff --git a/src/components/ui/banner/banner.scss b/src/components/ui/banner/banner.scss index 8bbe8d15d..2bfd914b9 100755 --- a/src/components/ui/banner/banner.scss +++ b/src/components/ui/banner/banner.scss @@ -41,12 +41,12 @@ // Icon styling .banner-icon { - margin-top: 8px; + margin-right: 12px; display: flex; & svg { - width: 32px; - height: 32px; + width: 24px; + height: 24px; } } diff --git a/src/config.js b/src/config.js index 90708bcac..ef8d6ca30 100644 --- a/src/config.js +++ b/src/config.js @@ -211,7 +211,7 @@ export const NODE_TYPES = { export const BANNER_METADATA = { liteModeWarning: { - title: 'Missing dependencies', + title: 'Lite mode enabled', body: 'Some features might be disabled in --lite mode due to missing dependencies', docsLink: 'https://docs.kedro.org/projects/kedro-viz/en/latest/kedro-viz_visualisation.html#visualise-a-kedro-project-without-installing-project-dependencies', From a85046963b816665c689ccdf3b1b411fab621dbe Mon Sep 17 00:00:00 2001 From: Huong Nguyen Date: Tue, 19 Nov 2024 14:32:04 +0000 Subject: [PATCH 3/6] updat release note Signed-off-by: Huong Nguyen --- RELEASE.md | 1 + 1 file changed, 1 insertion(+) diff --git a/RELEASE.md b/RELEASE.md index 61cb49bf9..fd17b785a 100644 --- a/RELEASE.md +++ b/RELEASE.md @@ -24,6 +24,7 @@ Please follow the established format: - Refactor `DatasetStatsHook` to avoid showing error when dataset doesn't have file size info (#2174) - Fix 404 error when accessing the experiment tracking page on the demo site (#2179) - Add check for port availability before starting Kedro Viz to prevent unintended browser redirects when the port is already in use (#2176) +- Update kedro-viz lite banner icon and message. (#2196) # Release 10.0.0 From 431d1bc21409bf2be133904ed5b1e799031d92ac Mon Sep 17 00:00:00 2001 From: Huong Nguyen Date: Tue, 19 Nov 2024 15:56:50 +0000 Subject: [PATCH 4/6] update cy test Signed-off-by: Huong Nguyen --- cypress/tests/ui/flowchart/banners.cy.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/cypress/tests/ui/flowchart/banners.cy.js b/cypress/tests/ui/flowchart/banners.cy.js index bdeb20bb4..b7a66b4f5 100644 --- a/cypress/tests/ui/flowchart/banners.cy.js +++ b/cypress/tests/ui/flowchart/banners.cy.js @@ -17,8 +17,8 @@ describe('Banners in Kedro-Viz', () => { // Assert after action cy.get('[data-test="flowchart-wrapper--lite-banner"]').should('exist'); - cy.get('.banner-message-body').should('contains.text', 'please install the missing Kedro project dependencies') - cy.get('.banner-message-title').should('contains.text', 'Missing dependencies') + cy.get('.banner-message-body').should('contains.text', 'Some features might be disabled in --lite mode due to missing dependencies') + cy.get('.banner-message-title').should('contains.text', 'Lite mode enabled') // Test Learn more link cy.get(".banner a") From d4e5e39bae19d440dcf583f81988acfb2305b2bf Mon Sep 17 00:00:00 2001 From: Huong Nguyen Date: Wed, 20 Nov 2024 09:53:07 +0000 Subject: [PATCH 5/6] update final copy Signed-off-by: Huong Nguyen --- src/config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/config.js b/src/config.js index ef8d6ca30..acf070c72 100644 --- a/src/config.js +++ b/src/config.js @@ -212,7 +212,7 @@ export const NODE_TYPES = { export const BANNER_METADATA = { liteModeWarning: { title: 'Lite mode enabled', - body: 'Some features might be disabled in --lite mode due to missing dependencies', + body: 'Some features might be disabled in --lite mode due to missing dependencies. You can find more information about lite mode in our docs.', docsLink: 'https://docs.kedro.org/projects/kedro-viz/en/latest/kedro-viz_visualisation.html#visualise-a-kedro-project-without-installing-project-dependencies', }, From 62ad9132cf0ffa537f6b026a96686e02324c5f9b Mon Sep 17 00:00:00 2001 From: Huong Nguyen Date: Wed, 20 Nov 2024 15:20:40 +0000 Subject: [PATCH 6/6] for steps testing purpose Signed-off-by: Huong Nguyen --- .../flowchart-wrapper/flowchart-wrapper.js | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/flowchart-wrapper/flowchart-wrapper.js b/src/components/flowchart-wrapper/flowchart-wrapper.js index f6f5bfc16..df1cb4a11 100644 --- a/src/components/flowchart-wrapper/flowchart-wrapper.js +++ b/src/components/flowchart-wrapper/flowchart-wrapper.js @@ -340,18 +340,18 @@ export const FlowChartWrapper = ({
{displaySidebar && } {displayMetadataPanel && } - {showBanner(BANNER_KEYS.LITE) && ( - } - message={{ - title: BANNER_METADATA.liteModeWarning.title, - body: BANNER_METADATA.liteModeWarning.body, - }} - btnUrl={BANNER_METADATA.liteModeWarning.docsLink} - onClose={() => handleBannerClose(BANNER_KEYS.LITE)} - dataTest={getDataTestAttribute('flowchart-wrapper', 'lite-banner')} - /> - )} + {/* {showBanner(BANNER_KEYS.LITE) && ( */} + } + message={{ + title: BANNER_METADATA.liteModeWarning.title, + body: BANNER_METADATA.liteModeWarning.body, + }} + btnUrl={BANNER_METADATA.liteModeWarning.docsLink} + onClose={() => handleBannerClose(BANNER_KEYS.LITE)} + dataTest={getDataTestAttribute('flowchart-wrapper', 'lite-banner')} + /> + {/* )} */}