chore(ui): fix what's new features with collate flag (#20826)

* chore(ui): support collate only feature list

* update type for base function

* support new images with dynamic approach

* update type

openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/FeaturesCarousel.interface.ts

@@ -16,6 +16,7 @@ export type CarousalData = {
   description: string;
   isImage: boolean;
   path: string;
+  isCollate?: boolean;
 };
 
 export type FeaturesCarouselProps = {

openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/FeaturesCarousel.tsx

@@ -14,6 +14,7 @@
 import { Carousel } from 'antd';
 import { uniqueId } from 'lodash';
 import React from 'react';
+import collateIcon from '../../../assets/svg/ic-collate.svg';
 import RichTextEditorPreviewerV1 from '../../common/RichTextEditor/RichTextEditorPreviewerV1';
 import { FeaturesCarouselProps } from './FeaturesCarousel.interface';
 
@@ -23,7 +24,14 @@ const FeaturesCarousel = ({ data }: FeaturesCarouselProps) => {
       <Carousel autoplay dots autoplaySpeed={3000} easing="ease-in-out">
         {data.map((d) => (
           <div className="p-x-xss" key={uniqueId()}>
-            <p className="text-sm font-medium mb-2">{d.title}</p>
+            <div className="d-flex gap-2 align-center">
+              <p className="text-sm font-medium mb-2">{d.title}</p>
+              {d.isCollate && (
+                <a href="https://www.getcollate.io/">
+                  <img alt="collate" src={collateIcon} />
+                </a>
+              )}
+            </div>
             <div className="text-sm m-b-xs">
               <RichTextEditorPreviewerV1
                 enableSeeMoreVariant={false}

openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/whatsNewData.ts

@@ -1558,6 +1558,7 @@ With OpenMetadata AutoPilot, you can get all of your metadata with just one clic
       },
       {
         title: `Accelerating Onboarding New Services with AI Agents`,
+        isCollate: true,
         description: `At Collate, we're taking the AutoPilot experience one step further by adding AI Agents to the mix. Based on the information extracted from the Metadata Agents, Collate AI Agents will automatically generate tiers, descriptions, and Data Quality tests:
 
 1.  The Tier Agent analyzes your table usage and lineage to determine the **business criticality** of each asset in your organization.
@@ -1635,6 +1636,7 @@ Combined with the improvements around Search Relevancy, Customizable UI for Pers
       },
       {
         title: 'Activating your Metadata in Collate with Reverse Metadata',
+        isCollate: true,
         description: `Thanks to Collate's collaboration and automation features, it's simple to add tags, descriptions, and owners to all your assets. But how can we ensure this metadata is seen and used by the source systems as well?
 
 Reverse Metadata is a new application that will allow you to send descriptions, tags, and owners collected in Collate back into the source! You can configure which assets you want to listen for changes, and updates will be **propagated in real time!**
@@ -1656,12 +1658,11 @@ We were already shipping our Docker images with Python 3.10, so this change shou
       ['Expanded Connector Ecosystem and Diversity']: `OpenMetadata's ingestion framework contains 90+ native connectors. These connectors are the foundation of the platform and bring in all the metadata your team needs: technical metadata, lineage, usage, profiling, etc.
 
 We bring new connectors in each release, continuously expanding our coverage. This time, Release 1.7 comes with four new connectors:
+1.  **Opensearch**: Bringing your index metadata into OpenMetadata.
+2.  **Cassandra**: Ingesting from the NoSQL Distributed Database.
+3.  **Cockroach DB**: The cloud native distributed SQL Database.
 
-1.  Opensearch: Bringing your index metadata into OpenMetadata.
-2.  Cassandra: Ingesting from the NoSQL Distributed Database.
-3.  Cockroach DB: The cloud native distributed SQL Database.
-
-And in Collate, we are bringing a new Pipeline connector: Wherescape.`,
+And in Collate, we are bringing a new Pipeline connector: **Wherescape**.`,
     },
   },
 ];

openmetadata-ui/src/main/resources/ui/src/constants/Login.constants.ts

@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 
+import { kebabCase, map } from 'lodash';
 import loginClassBase from './LoginClassBase';
 
 const {
@@ -19,6 +20,7 @@ const {
   governance,
   dataInsightPlural,
   dataCollaboration,
+  ...rest
 } = loginClassBase.carouselImages();
 
 export const LOGIN_SLIDE = [
@@ -37,11 +39,19 @@ export const LOGIN_SLIDE = [
     image: governance,
     descriptionKey: 'assess-data-reliability-with-data-profiler-lineage',
   },
-  {
-    title: 'data-insight-plural',
-    image: dataInsightPlural,
-    descriptionKey: 'fosters-collaboration-among-producers-and-consumers',
-  },
+  ...(dataInsightPlural
+    ? [
+        {
+          title: 'data-insight-plural',
+          image: dataInsightPlural,
+          descriptionKey: 'fosters-collaboration-among-producers-and-consumers',
+        },
+      ]
+    : map(rest, (item, key) => ({
+        title: kebabCase(key),
+        image: item,
+        descriptionKey: kebabCase(key) + '-description',
+      }))),
   {
     title: 'data-collaboration',
     image: dataCollaboration,

openmetadata-ui/src/main/resources/ui/src/constants/LoginClassBase.ts

@@ -18,7 +18,7 @@ import insightImg from '../assets/img/login-screen/data-insights.png';
 import dataQualityImg from '../assets/img/login-screen/data-quality.png';
 
 class LoginClassBase {
-  public carouselImages() {
+  public carouselImages(): Record<string, string> {
     return {
       dataDiscovery: discoveryImg,
       dataQuality: dataQualityImg,