[STEPH QA ONLY] Feature/update lite banner

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)
 
 

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")

src/components/flowchart-wrapper/flowchart-wrapper.js

@@ -19,7 +19,7 @@
 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';
@@ -315,7 +315,7 @@
     saveLocalStorage(localStorageBannerStatus, { [bannerKey]: false });
   };
 
   const showBanner = (bannerKey) => {
     const bannerStatus = loadLocalStorage(localStorageBannerStatus);
     const shouldShowBanner =
       displayBanner[bannerKey] &&
@@ -340,18 +340,18 @@
       <div className="kedro-pipeline">
         {displaySidebar && <Sidebar />}
         {displayMetadataPanel && <MetaData />}
-        {showBanner(BANNER_KEYS.LITE) && (
-          <Banner
-            icon={<AlertIcon />}
-            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) && ( */}
+        <Banner
+          icon={<InfoBannerIcon />}
+          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')}
+        />
+        {/* )} */}
         <div className="pipeline-wrapper">
           <PipelineWarning />
           <FlowChart />

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',
   },