diff --git a/RELEASE.md b/RELEASE.md index a1dd9159f..48e1dba5e 100644 --- a/RELEASE.md +++ b/RELEASE.md @@ -25,6 +25,7 @@ Please follow the established format: - Refactor `node-list-tree` component. (#2193) - 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) - Include Kedro Viz version in telemetry.. (#2194) 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") diff --git a/src/components/flowchart-wrapper/flowchart-wrapper.js b/src/components/flowchart-wrapper/flowchart-wrapper.js index 73fec5327..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 AlertIcon from '../icons/alert'; +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/config.js b/src/config.js index daa602385..492eb466e 100644 --- a/src/config.js +++ b/src/config.js @@ -214,8 +214,8 @@ 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.', + title: 'Lite mode enabled', + 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', },