Feature/update lite banner (#2196)

* update content for lite banner Signed-off-by: Huong Nguyen <huongg1409@gmail> * use new logo and copy Signed-off-by: Huong Nguyen <huongg1409@gmail> * updat release note Signed-off-by: Huong Nguyen <huongg1409@gmail> * update cy test Signed-off-by: Huong Nguyen <huongg1409@gmail> * update final copy Signed-off-by: Huong Nguyen <huongg1409@gmail> --------- Signed-off-by: Huong Nguyen <huongg1409@gmail> Co-authored-by: Huong Nguyen <huongg1409@gmail>
kedro-org · Nov 20, 2024 · dc5912d · dc5912d
1 parent e91d156
commit dc5912d
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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 && <MetaData />}
         {showBanner(BANNER_KEYS.LITE) && (
           <Banner
-            icon={<AlertIcon />}
+            icon={<InfoBannerIcon />}
             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
diff --git 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',
   },