From a24281d1102512291ce46adcf4db4e4335f80b79 Mon Sep 17 00:00:00 2001
From: Harshit Shah <dinkushah169@gmail.com>
Date: Thu, 21 Aug 2025 09:12:09 +0530
Subject: [PATCH] Update asset types in curated assets list (#22976)

* Update asset types in curated assets list

* add knowledge page in asset type list
---
 .../ActivityFeedcardNew.component.tsx         |   2 +-
 .../Widgets/KPIWidget/KPILegend/KPILegend.tsx | 103 +++++++++---------
 .../KPIWidget/KPILegend/kpi-legend.less       | 101 +++++++++++++----
 .../src/constants/AdvancedSearch.constants.ts |   2 +
 .../resources/ui/src/utils/EntityUtils.tsx    |   1 +
 5 files changed, 136 insertions(+), 73 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardNew/ActivityFeedcardNew.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardNew/ActivityFeedcardNew.component.tsx
index 21f60ef384f..95f22177249 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardNew/ActivityFeedcardNew.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardNew/ActivityFeedcardNew.component.tsx
@@ -245,7 +245,7 @@ const ActivityFeedCardNew = ({
               {/* Horizontal line connecting popover to end of container */}
               <div className="horizontal-line " />
 
-              <div className="d-flex flex-col w-full">
+              <div className="d-flex flex-col w-full min-w-0 overflow-hidden">
                 <div className="d-flex flex-col align-start">
                   <div
                     className={classNames(
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/KPIWidget/KPILegend/KPILegend.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/KPIWidget/KPILegend/KPILegend.tsx
index 2e2210603a0..29e23302bb8 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/KPIWidget/KPILegend/KPILegend.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/KPIWidget/KPILegend/KPILegend.tsx
@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 import { InfoCircleOutlined, WarningOutlined } from '@ant-design/icons';
-import { Col, Progress, Row, Tooltip, Typography } from 'antd';
+import { Progress, Tooltip, Typography } from 'antd';
 import { toNumber } from 'lodash';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -37,7 +37,7 @@ const KPILegend: React.FC<KPILegendProps> = ({
 
   const GoalCompleted = () => {
     return (
-      <div className="goal-completed-container d-flex items-center gap-1">
+      <div className="goal-completed-container">
         <CheckIcon />
         <Typography.Text>{t('label.goal-completed')}</Typography.Text>
       </div>
@@ -46,7 +46,7 @@ const KPILegend: React.FC<KPILegendProps> = ({
 
   const GoalMissed = () => {
     return (
-      <div className="goal-missed-container d-flex items-center gap-1">
+      <div className="goal-missed-container">
         <WarningOutlined />
         <Typography.Text>{t('label.goal-missed')}</Typography.Text>
       </div>
@@ -74,59 +74,58 @@ const KPILegend: React.FC<KPILegendProps> = ({
 
         if (isFullSize) {
           return (
-            <div className="kpi-full-legend p-xs m-b-sm" key={key}>
-              <Row className="items-center" gutter={8}>
-                <Col span={24}>
-                  <div className="d-flex justify-between">
-                    <Typography.Text
-                      className="kpi-legend-title"
-                      ellipsis={{ tooltip: true }}>
-                      {resultData.displayName}
-                    </Typography.Text>
+            <div className="kpi-full-legend" key={key}>
+              <div className="kpi-legend-header">
+                <Typography.Text
+                  className="kpi-legend-title"
+                  ellipsis={{ tooltip: true }}>
+                  {resultData.displayName}
+                </Typography.Text>
 
-                    {daysLeft <= 0 || isTargetMet ? (
-                      <Tooltip
-                        placement="bottom"
-                        title={getKpiResultFeedback(
-                          daysLeft,
-                          Boolean(isTargetMet)
-                        )}
-                        trigger="hover">
-                        <InfoCircleOutlined className="kpi-legend-info-icon" />
-                      </Tooltip>
-                    ) : null}
-                  </div>
+                {daysLeft <= 0 || isTargetMet ? (
+                  <Tooltip
+                    placement="bottom"
+                    title={getKpiResultFeedback(daysLeft, Boolean(isTargetMet))}
+                    trigger="hover">
+                    <InfoCircleOutlined className="kpi-legend-info-icon" />
+                  </Tooltip>
+                ) : null}
+              </div>
 
-                  <Progress
-                    percent={Number(currentProgress)}
-                    showInfo={false}
-                    size="small"
-                    strokeColor={color}
-                    strokeWidth={4}
-                  />
+              <Progress
+                percent={Number(currentProgress)}
+                showInfo={false}
+                size="small"
+                strokeColor={color}
+                strokeWidth={4}
+              />
 
-                  <div className="d-flex justify-between m-t-xxs">
-                    <Typography.Text className="text-xss kpi-legend-value">
-                      {current.toFixed(0)}
-                      {suffix}
+              <div className="kpi-legend-bottom-row">
+                <div className="kpi-legend-value-section">
+                  <Typography.Text className="text-xss kpi-legend-value">
+                    {current.toFixed(0)}
+                    {suffix}
+                  </Typography.Text>
+                </div>
+                <div className="kpi-legend-center-section">
+                  {isTargetMet ? (
+                    <GoalCompleted />
+                  ) : isTargetMissed ? (
+                    <GoalMissed />
+                  ) : (
+                    <Typography.Text className="text-xss font-semibold kpi-legend-days-left text-center">
+                      {daysLeft <= 0 ? 0 : daysLeft}{' '}
+                      {t('label.days-left').toUpperCase()}
                     </Typography.Text>
-                    {isTargetMet ? (
-                      <GoalCompleted />
-                    ) : isTargetMissed ? (
-                      <GoalMissed />
-                    ) : (
-                      <Typography.Text className="text-xss font-semibold kpi-legend-days-left">
-                        {daysLeft <= 0 ? 0 : daysLeft}{' '}
-                        {t('label.days-left').toUpperCase()}
-                      </Typography.Text>
-                    )}
-                    <Typography.Text className="text-xss kpi-legend-value">
-                      {target.toFixed(0)}
-                      {suffix}
-                    </Typography.Text>
-                  </div>
-                </Col>
-              </Row>
+                  )}
+                </div>
+                <div className="kpi-legend-value-section">
+                  <Typography.Text className="text-xss kpi-legend-value">
+                    {target.toFixed(0)}
+                    {suffix}
+                  </Typography.Text>
+                </div>
+              </div>
             </div>
           );
         }
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/KPIWidget/KPILegend/kpi-legend.less b/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/KPIWidget/KPILegend/kpi-legend.less
index 6852afcc790..cf071fd972a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/KPIWidget/KPILegend/kpi-legend.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/KPIWidget/KPILegend/kpi-legend.less
@@ -14,10 +14,13 @@
 @import (reference) url('../../../../../styles/variables.less');
 
 .kpi-legend {
-  border: 1px solid @grey-15;
   border-radius: @border-rad-sm;
-  overflow-y: auto;
+  border: 1px solid @grey-15;
+  display: flex;
+  flex-direction: column;
+  gap: @size-xs;
   max-height: 350px;
+  overflow-y: auto;
 
   .legend-dot {
     border-radius: 50%;
@@ -26,19 +29,28 @@
   }
 
   .kpi-full-legend {
-    min-width: 235px;
-    background-color: @purple-4;
-    border: 1px solid @grey-16;
-    border-radius: @border-rad-sm;
     background-color: @grey-26;
+    border-radius: @border-rad-sm;
+    border: 1px solid @grey-16;
+    display: flex;
+    flex-direction: column;
+    gap: @size-xxs;
+    margin-bottom: @size-xs;
+    min-width: 0;
+    padding: @size-xs;
+    width: 100%;
   }
 
   .kpi-legend-title {
     color: @grey-700;
+    flex: 1;
     font-size: @size-sm;
-    line-height: 1.2;
     font-weight: @font-regular;
-    max-width: 180px;
+    line-height: 1.2;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   .kpi-legend-info-icon {
@@ -60,41 +72,90 @@
   }
 
   .goal-completed-container {
-    padding: @size-xxs @size-xs;
-    border-radius: @border-rad-xs;
+    align-items: center;
     background-color: @green-9;
+    border-radius: @border-rad-xs;
+    display: flex;
+    flex-shrink: 1;
     font-size: 10px;
-    max-width: 115px;
+    gap: @size-xxs;
+    min-width: 0;
+    padding: @size-xxs @size-xs;
+    width: fit-content;
 
     .ant-typography {
       color: @green-10;
-      margin-left: @size-xxs;
+      margin: 0;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
     svg {
-      width: @size-sm;
-      height: @size-sm;
       color: @green-10;
+      flex-shrink: 0;
+      height: @size-sm;
+      width: @size-sm;
     }
   }
 
   .goal-missed-container {
-    padding: @size-xxs @size-xs;
-    border-radius: @border-rad-xs;
+    align-items: center;
     background-color: @yellow-10;
+    border-radius: @border-rad-xs;
     color: @yellow-11;
+    display: flex;
+    flex-shrink: 1;
     font-size: 10px;
-    max-width: 100px;
+    gap: @size-xxs;
+    min-width: 0;
+    padding: @size-xxs @size-xs;
+    width: fit-content;
 
     .ant-typography {
       color: @yellow-11;
-      margin-left: @size-xxs;
+      margin: 0;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
     svg {
-      width: @size-sm;
-      height: @size-sm;
       color: @yellow-11;
+      flex-shrink: 0;
+      height: @size-sm;
+      width: @size-sm;
     }
   }
+
+  .kpi-legend-header {
+    align-items: center;
+    display: flex;
+    gap: @size-xs;
+    justify-content: space-between;
+    min-width: 0;
+  }
+
+  .kpi-legend-bottom-row {
+    align-items: center;
+    display: flex;
+    gap: @size-xxs;
+    justify-content: space-between;
+    min-width: 0;
+  }
+
+  .kpi-legend-center-section {
+    align-items: center;
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    min-width: 0;
+  }
+
+  .kpi-legend-value-section {
+    flex-shrink: 0;
+    min-width: fit-content;
+  }
 }
diff --git a/openmetadata-ui/src/main/resources/ui/src/constants/AdvancedSearch.constants.ts b/openmetadata-ui/src/main/resources/ui/src/constants/AdvancedSearch.constants.ts
index a6f63a9a7dc..c39ee5fb458 100644
--- a/openmetadata-ui/src/main/resources/ui/src/constants/AdvancedSearch.constants.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/constants/AdvancedSearch.constants.ts
@@ -338,7 +338,9 @@ export const CURATED_ASSETS_LIST = [
   EntityType.DASHBOARD_DATA_MODEL,
   EntityType.DATABASE,
   EntityType.DATABASE_SCHEMA,
+  EntityType.DATA_PRODUCT,
   EntityType.GLOSSARY_TERM,
+  EntityType.KNOWLEDGE_PAGE,
   EntityType.METRIC,
   EntityType.MLMODEL,
   EntityType.PIPELINE,
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx
index 609e2157fd0..f50de789ca3 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx
@@ -2452,6 +2452,7 @@ export const getEntityNameLabel = (entityName?: string) => {
     apiCollection: t('label.api-collection'),
     apiEndpoint: t('label.api-endpoint'),
     metric: t('label.metric'),
+    page: t('label.knowledge-page'),
   };
 
   return (