fix the data product being rendered in tables (#21313)

2025-10-10 16:25:37 +00:00 · 2025-05-20 18:23:47 +05:30 · 2025-05-20 18:23:47 +05:30 · 778d0927aa
commit 778d0927aa
parent b2d854b796
18 changed files with 74 additions and 12 deletions
--- a/openmetadata-ui/src/main/resources/ui/src/components/APIEndpoint/APIEndpointVersion/APIEndpointVersion.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/APIEndpoint/APIEndpointVersion/APIEndpointVersion.tsx
@ -134,6 +134,7 @@ const APIEndpointVersion: FC<APIEndpointVersionProp> = ({
              flex="220px">
              <Space className="w-full" direction="vertical" size="large">
                <DataProductsContainer
+                  newLook
                  activeDomain={domain}
                  dataProducts={currentVersionData?.dataProducts ?? []}
                  hasPermission={false}
--- a/openmetadata-ui/src/main/resources/ui/src/components/Container/ContainerVersion/ContainerVersion.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Container/ContainerVersion/ContainerVersion.component.tsx
@ -178,6 +178,7 @@ const ContainerVersion: React.FC<ContainerVersionProp> = ({
              flex="220px">
              <Space className="w-full" direction="vertical" size="large">
                <DataProductsContainer
+                  newLook
                  activeDomain={domain}
                  dataProducts={dataProducts ?? []}
                  hasPermission={false}
--- a/openmetadata-ui/src/main/resources/ui/src/components/Dashboard/DashboardVersion/DashboardVersion.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Dashboard/DashboardVersion/DashboardVersion.component.tsx
@ -207,6 +207,7 @@ const DashboardVersion: FC<DashboardVersionProp> = ({
              flex="220px">
              <Space className="w-full" direction="vertical" size="large">
                <DataProductsContainer
+                  newLook
                  activeDomain={domain}
                  dataProducts={dataProducts ?? []}
                  hasPermission={false}
--- a/openmetadata-ui/src/main/resources/ui/src/components/Dashboard/DataModel/DataModelVersion/DataModelVersion.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Dashboard/DataModel/DataModelVersion/DataModelVersion.component.tsx
@ -165,6 +165,7 @@ const DataModelVersion: FC<DataModelVersionProp> = ({
              flex="220px">
              <Space className="w-full" direction="vertical" size="large">
                <DataProductsContainer
+                  newLook
                  activeDomain={domain}
                  dataProducts={dataProducts ?? []}
                  hasPermission={false}
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/CommonWidgets/CommonWidgets.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/CommonWidgets/CommonWidgets.tsx
@ -266,6 +266,7 @@ export const CommonWidgets = ({
  const dataProductsWidget = useMemo(() => {
    return (
      <DataProductsContainer
+        newLook
        activeDomain={domain as EntityReference}
        dataProducts={dataProducts ?? []}
        hasPermission={editDataProductPermission}
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataProducts/DataProductsContainer/DataProductsContainer.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataProducts/DataProductsContainer/DataProductsContainer.component.tsx
@ -18,6 +18,7 @@ import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 import { ReactComponent as DataProductIcon } from '../../../assets/svg/ic-data-product.svg';
 import { NO_DATA_PLACEHOLDER } from '../../../constants/constants';
+import { TAG_CONSTANT, TAG_START_WITH } from '../../../constants/Tag.constants';
 import { EntityType } from '../../../enums/entity.enum';
 import { DataProduct } from '../../../generated/entity/domains/dataProduct';
 import { EntityReference } from '../../../generated/entity/type';
@ -29,6 +30,7 @@ import {
  EditIconButton,
  PlusIconButton,
 } from '../../common/IconButtons/EditIconButton';
+import TagsV1 from '../../Tag/TagsV1/TagsV1.component';
 import DataProductsSelectList from '../DataProductsSelectList/DataProductsSelectList';
 interface DataProductsContainerProps {
  showHeader?: boolean;
@ -36,6 +38,7 @@ interface DataProductsContainerProps {
  dataProducts: EntityReference[];
  activeDomain?: EntityReference;
  onSave?: (dataProducts: DataProduct[]) => Promise<void>;
+  newLook?: boolean;
 }

 const DataProductsContainer = ({
@ -44,6 +47,7 @@ const DataProductsContainer = ({
  dataProducts,
  activeDomain,
  onSave,
+  newLook = false,
 }: DataProductsContainerProps) => {
  const { t } = useTranslation();
  const history = useHistory();
@ -172,25 +176,66 @@ const DataProductsContainer = ({
    );
  }, [showHeader, dataProducts, hasPermission, showAddTagButton]);

+  const addTagButton = useMemo(
+    () =>
+      showAddTagButton ? (
+        <Col
+          className="m-t-xss"
+          data-testid="add-data-product"
+          onClick={handleAddClick}>
+          <TagsV1 startWith={TAG_START_WITH.PLUS} tag={TAG_CONSTANT} />
+        </Col>
+      ) : null,
+    [showAddTagButton]
+  );
+
+  const renderer = useMemo(() => {
+    if (isEditMode) {
+      return autoCompleteFormSelectContainer;
+    }
+
+    if (newLook && isEmpty(renderDataProducts)) {
+      return null;
+    }
+
+    return (
+      <Row data-testid="data-products-list">
+        <Col className="flex flex-wrap gap-2">
+          {!newLook && addTagButton}
+          {renderDataProducts}
+        </Col>
+      </Row>
+    );
+  }, [
+    newLook,
+    isEditMode,
+    addTagButton,
+    renderDataProducts,
+    autoCompleteFormSelectContainer,
+  ]);
+
  const cardProps = useMemo(() => {
    return {
      title: header,
    };
  }, [header, showAddTagButton, isEditMode]);

+  if (newLook) {
+    return (
+      <ExpandableCard
+        cardProps={cardProps}
+        dataTestId="data-products-container"
+        isExpandDisabled={isEmpty(dataProducts)}>
+        {renderer}
+      </ExpandableCard>
+    );
+  }
+
  return (
-    <ExpandableCard
-      cardProps={cardProps}
-      dataTestId="data-products-container"
-      isExpandDisabled={isEmpty(dataProducts)}>
-      {isEditMode ? (
-        autoCompleteFormSelectContainer
-      ) : isEmpty(renderDataProducts) ? null : (
-        <Row data-testid="data-products-list">
-          <Col className="flex flex-wrap gap-2">{renderDataProducts}</Col>
-        </Row>
-      )}
-    </ExpandableCard>
+    <div className="w-full" data-testid="data-products-container">
+      {header}
+      {renderer}
+    </div>
  );
 };

--- a/openmetadata-ui/src/main/resources/ui/src/components/Database/StoredProcedureVersion/StoredProcedureVersion.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Database/StoredProcedureVersion/StoredProcedureVersion.component.tsx
@ -130,6 +130,7 @@ const StoredProcedureVersion = ({
              flex="220px">
              <Space className="w-full" direction="vertical" size="large">
                <DataProductsContainer
+                  newLook
                  activeDomain={domain}
                  dataProducts={dataProducts ?? []}
                  hasPermission={false}
--- a/openmetadata-ui/src/main/resources/ui/src/components/Database/TableVersion/TableVersion.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Database/TableVersion/TableVersion.component.tsx
@ -181,6 +181,7 @@ const TableVersion: React.FC<TableVersionProp> = ({
              flex="220px">
              <Space className="w-full" direction="vertical" size="large">
                <DataProductsContainer
+                  newLook
                  activeDomain={domain}
                  dataProducts={dataProducts ?? []}
                  hasPermission={false}
--- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityRightPanel/EntityRightPanel.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityRightPanel/EntityRightPanel.tsx
@ -80,6 +80,7 @@ const EntityRightPanel = <T extends ExtentionEntitiesKeys>({
        {showDataProductContainer && (
          <div data-testid="KnowledgePanel.DataProducts">
            <DataProductsContainer
+              newLook
              activeDomain={domain}
              dataProducts={dataProducts}
              hasPermission={editDataProductPermission ?? false}
--- a/openmetadata-ui/src/main/resources/ui/src/components/Metric/MetricVersion/MetricVersion.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Metric/MetricVersion/MetricVersion.tsx
@ -136,6 +136,7 @@ const MetricVersion: FC<MetricVersionProp> = ({
              flex="220px">
              <Space className="w-full" direction="vertical" size="large">
                <DataProductsContainer
+                  newLook
                  activeDomain={domain}
                  dataProducts={currentVersionData?.dataProducts ?? []}
                  hasPermission={false}
--- a/openmetadata-ui/src/main/resources/ui/src/components/MlModel/MlModelVersion/MlModelVersion.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MlModel/MlModelVersion/MlModelVersion.component.tsx
@ -288,6 +288,7 @@ const MlModelVersion: FC<MlModelVersionProp> = ({
              flex="220px">
              <Space className="w-full" direction="vertical" size="large">
                <DataProductsContainer
+                  newLook
                  activeDomain={domain}
                  dataProducts={dataProducts ?? []}
                  hasPermission={false}
--- a/openmetadata-ui/src/main/resources/ui/src/components/Pipeline/PipelineVersion/PipelineVersion.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Pipeline/PipelineVersion/PipelineVersion.component.tsx
@ -217,6 +217,7 @@ const PipelineVersion: FC<PipelineVersionProp> = ({
              flex="220px">
              <Space className="w-full" direction="vertical" size="large">
                <DataProductsContainer
+                  newLook
                  activeDomain={domain}
                  dataProducts={dataProducts ?? []}
                  hasPermission={false}
--- a/openmetadata-ui/src/main/resources/ui/src/components/SearchIndexVersion/SearchIndexVersion.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/SearchIndexVersion/SearchIndexVersion.tsx
@ -159,6 +159,7 @@ const SearchIndexVersion: React.FC<SearchIndexVersionProps> = ({
              flex="220px">
              <Space className="w-full" direction="vertical" size="large">
                <DataProductsContainer
+                  newLook
                  activeDomain={domain}
                  dataProducts={dataProducts ?? []}
                  hasPermission={false}
--- a/openmetadata-ui/src/main/resources/ui/src/components/Topic/TopicVersion/TopicVersion.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Topic/TopicVersion/TopicVersion.component.tsx
@ -152,6 +152,7 @@ const TopicVersion: FC<TopicVersionProp> = ({
              flex="220px">
              <Space className="w-full" direction="vertical" size="large">
                <DataProductsContainer
+                  newLook
                  activeDomain={domain}
                  dataProducts={dataProducts ?? []}
                  hasPermission={false}
--- a/openmetadata-ui/src/main/resources/ui/src/pages/APICollectionPage/APICollectionVersionPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/APICollectionPage/APICollectionVersionPage.tsx
@ -298,6 +298,7 @@ const APICollectionVersionPage = () => {
              flex="220px">
              <Space className="w-full" direction="vertical" size="large">
                <DataProductsContainer
+                  newLook
                  activeDomain={domain}
                  dataProducts={currentVersionData?.dataProducts ?? []}
                  hasPermission={false}
--- a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaVersionPage/DatabaseSchemaVersionPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaVersionPage/DatabaseSchemaVersionPage.tsx
@ -268,6 +268,7 @@ function DatabaseSchemaVersionPage() {
              flex="220px">
              <Space className="w-full" direction="vertical" size="large">
                <DataProductsContainer
+                  newLook
                  activeDomain={domain}
                  dataProducts={currentVersionData.dataProducts ?? []}
                  hasPermission={false}
--- a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseVersionPage/DatabaseVersionPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseVersionPage/DatabaseVersionPage.tsx
@ -215,6 +215,7 @@ function DatabaseVersionPage() {
              flex="220px">
              <Space className="w-full" direction="vertical" size="large">
                <DataProductsContainer
+                  newLook
                  activeDomain={domain}
                  dataProducts={currentVersionData.dataProducts ?? []}
                  hasPermission={false}
--- a/openmetadata-ui/src/main/resources/ui/src/utils/GenericWidget/GenericWidgetUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/GenericWidget/GenericWidgetUtils.tsx
@ -125,6 +125,7 @@ export const WIDGET_COMPONENTS = {
  ),
  [DetailPageWidgetKeys.DATA_PRODUCTS]: () => (
    <DataProductsContainer
+      newLook
      dataProducts={tableClassBase.getDummyData().dataProducts ?? []}
      hasPermission={false}
      showHeader={false}