From 5f479fb1c63ca3696ac167388643fcff8108fba7 Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Mon, 27 Dec 2021 22:12:52 +0530
Subject: [PATCH] Adding feed data for column changes. (#1929)

* Adding feed data for column changes.

* Fixed FQN issue for lineage API call.

* Minor fix.
---
 .../components/MyData/MyData.component.tsx    |  3 ++-
 .../DatasetDetailsPage.component.tsx          | 13 ++++++++--
 .../ui/src/utils/EntityVersionUtils.tsx       | 26 +++++++++++++++----
 3 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx
index e3439268c73..e529642754e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx
@@ -69,6 +69,7 @@ const MyData: React.FC<MyDataProps> = ({
             className="tw-underline"
             data-testid="feeds"
             size="custom"
+            tag="button"
             theme="primary"
             variant="link"
             onClick={() => setFieldListVisible((visible) => !visible)}>
@@ -171,7 +172,7 @@ const MyData: React.FC<MyDataProps> = ({
       .map((d) => {
         return (
           d.changeDescriptions
-            .filter(
+            ?.filter(
               (c) =>
                 c.fieldsAdded?.length ||
                 c.fieldsDeleted?.length ||
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DatasetDetailsPage/DatasetDetailsPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DatasetDetailsPage/DatasetDetailsPage.component.tsx
index 0fa2e1cdd82..731e7eb745e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/DatasetDetailsPage/DatasetDetailsPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/DatasetDetailsPage/DatasetDetailsPage.component.tsx
@@ -89,7 +89,7 @@ const DatasetDetailsPage: FunctionComponent = () => {
   });
   const [tableProfile, setTableProfile] = useState<Table['tableProfile']>([]);
   const [tableDetails, setTableDetails] = useState<Table>({} as Table);
-  const { datasetFQN: tableFQN, tab } = useParams() as Record<string, string>;
+  const { datasetFQN, tab } = useParams() as Record<string, string>;
   const [activeTab, setActiveTab] = useState<number>(getCurrentDatasetTab(tab));
   const [entityLineage, setEntityLineage] = useState<EntityLineage>(
     {} as EntityLineage
@@ -104,6 +104,9 @@ const DatasetDetailsPage: FunctionComponent = () => {
     id: undefined,
     state: false,
   });
+  const [tableFQN, setTableFQN] = useState<string>(
+    getPartialNameFromFQN(datasetFQN, ['service', 'database', 'table'], '.')
+  );
 
   const activeTabHandler = (tabValue: number) => {
     const currentTabIndex = tabValue - 1;
@@ -221,7 +224,7 @@ const DatasetDetailsPage: FunctionComponent = () => {
   useEffect(() => {
     setIsLoading(true);
     getTableDetailsByFQN(
-      getPartialNameFromFQN(tableFQN, ['service', 'database', 'table'], '.'),
+      tableFQN,
       'columns, usageSummary, followers, joins, tags, owner, sampleData, tableProfile, dataModel'
     )
       .then((res: AxiosResponse) => {
@@ -302,6 +305,12 @@ const DatasetDetailsPage: FunctionComponent = () => {
     setActiveTab(getCurrentDatasetTab(tab));
   }, [tableFQN]);
 
+  useEffect(() => {
+    setTableFQN(
+      getPartialNameFromFQN(datasetFQN, ['service', 'database', 'table'], '.')
+    );
+  }, [datasetFQN]);
+
   return (
     <>
       {isLoading || isLineageLoading ? (
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/EntityVersionUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/EntityVersionUtils.tsx
index 74178c075bd..2083436df7c 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/EntityVersionUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/EntityVersionUtils.tsx
@@ -22,6 +22,7 @@ import rehypeRaw from 'rehype-raw';
 import gfm from 'remark-gfm';
 import { DESCRIPTIONLENGTH, getTeamDetailsPath } from '../constants/constants';
 import { ChangeType } from '../enums/entity.enum';
+import { Column } from '../generated/entity/data/table';
 import {
   ChangeDescription,
   FieldChange,
@@ -192,17 +193,17 @@ export const getPreposition = (type: ChangeType) => {
 
 const getColumnName = (column: string) => {
   const name = column.split('.');
-  return name.slice(1, name.length - 1).join('.');
+  const length = name.length;
+  return name
+    .slice(length > 1 ? 1 : 0, length > 1 ? length - 1 : length)
+    .join('.');
 };
 
 const getLinkWithColumn = (column: string, eFqn: string, eType: string) => {
-  const name = column.split('.');
   return (
     <Link
       className="tw-pl-1"
-      to={`${getEntityLink(eType, eFqn)}.${name
-        .slice(1, name.length - 1)
-        .join('.')}`}>
+      to={`${getEntityLink(eType, eFqn)}.${getColumnName(column)}`}>
       {getColumnName(column)}
     </Link>
   );
@@ -301,6 +302,21 @@ export const feedSummaryFromatter = (
           </p>
         );
 
+        break;
+      } else if (fieldChange?.name === 'columns') {
+        const length = value?.length ?? 0;
+        summary = (
+          <p key={uniqueId()}>
+            {`${type} ${fieldChange?.name}`}{' '}
+            {value?.map((column: Column, i: number) => (
+              <span key={uniqueId()}>
+                {getLinkWithColumn(column.name, entityFQN, entityType)}{' '}
+                {i !== length - 1 ? ', ' : ''}
+              </span>
+            ))}
+          </p>
+        );
+
         break;
       } else {
         summary = (