Merge branch 'main' into imagesupdationfordataquality

openmetadata-ui/pom.xml

@@ -177,19 +177,6 @@
                   <directory>src/main/resources/ui/dist</directory>
                   <filtering>true</filtering>
                 </resource>
-                <resource>
-                  <directory>src/main/resources/ui</directory>
-                  <targetPath>${project.build.outputDirectory}/openmetadata-ui/</targetPath>
-                  <excludes>
-                    <exclude>dist/**</exclude>
-                    <exclude>node_modules/**</exclude>
-                    <exclude>webpack/**</exclude>
-                    <exclude>*tsconfig.tsbuildinfo</exclude>
-                  </excludes>
-                  <includes>
-                    <include>**</include>
-                  </includes>
-                </resource>
               </resources>
             </configuration>
           </execution>

openmetadata-ui/src/main/resources/ui/.vscode/settings.json

@@ -4,9 +4,9 @@
   "editor.formatOnSave": true,
 
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true, // eslint --fix on save
-    "source.fixAll.stylelint": true, // stylelint --fix on save
-    "source.organizeImports": true // Organize imports on save
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit",
+    "source.organizeImports": "explicit"
   },
 
   // Indentations purely based on linters and file formatters, not based on existing occurrences

openmetadata-ui/src/main/resources/ui/package.json

@@ -12,8 +12,8 @@
     "directory": "openmetadata-ui/src/main/resources/ui"
   },
   "scripts": {
-    "start": "NODE_ENV=development BABEL_ENV=development webpack serve --config ./webpack.config.dev.js --env development",
-    "build": "NODE_ENV=production BABEL_ENV=production webpack --config ./webpack.config.prod.js --env production",
+    "start": "webpack serve --config ./webpack.config.dev.js --env development",
+    "build": "webpack --config ./webpack.config.prod.js --env production",
     "postinstall": "yarn run build-check",
     "preinstall": "cd ../../../../.. && yarn install --frozen-lockfile",
     "pre-commit": "lint-staged --concurrent false",
@@ -71,7 +71,6 @@
     "@tiptap/starter-kit": "^2.3.0",
     "@tiptap/suggestion": "^2.3.0",
     "@toast-ui/react-editor": "^3.1.8",
-    "@types/turndown": "^5.0.4",
     "@windmillcode/quill-emoji": "^2.0.1000",
     "analytics": "^0.8.1",
     "antd": "4.24.0",
@@ -95,7 +94,6 @@
     "jwt-decode": "^3.1.2",
     "katex": "^0.16.10",
     "less": "^4.1.3",
-    "less-loader": "^11.0.0",
     "lodash": "^4.17.21",
     "luxon": "^3.2.1",
     "oidc-client": "^1.11.5",
@@ -182,6 +180,7 @@
     "@types/recharts": "^1.8.23",
     "@types/showdown": "^2.0.0",
     "@types/testing-library__jest-dom": "^5.9.5",
+    "@types/turndown": "^5.0.4",
     "@types/use-analytics": "^0.0.0",
     "@typescript-eslint/eslint-plugin": "4.31.0",
     "@typescript-eslint/parser": "4.31.0",
@@ -192,7 +191,6 @@
     "copy-webpack-plugin": "^7.0.0",
     "css-loader": "^6.7.2",
     "dotenv": "^16.0.0",
-    "dotenv-webpack": "^8.1.0",
     "eslint": "7.32.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-plugin-i18next": "^6.0.0-2",
@@ -203,7 +201,6 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "7.36.1",
     "eslint-plugin-react-hooks": "4.2.0",
-    "eslint-webpack-plugin": "^3.2.0",
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "6.5.0",
     "fs-extra": "^10.1.0",
@@ -212,16 +209,14 @@
     "i18next-json-sync": "^3.1.2",
     "jest": "^26.6.3",
     "jest-sonar-reporter": "^2.0.0",
+    "less-loader": "^11.0.0",
     "license-check-and-add": "^4.0.5",
     "lint-staged": "^10.3.0",
-    "mini-css-extract-plugin": "^2.7.0",
     "organize-imports-cli": "^0.10.0",
     "pinst": "^3.0.0",
     "postcss-loader": "^6.1.0",
     "prettier": "^2.1.2",
     "react-test-renderer": "^16.14.0",
-    "sass": "^1.39.0",
-    "sass-loader": "^12.1.0",
     "style-loader": "^3.3.1",
     "sync-i18n": "^0.0.20",
     "ts-jest": "^26.4.4",
@@ -230,10 +225,8 @@
     "typescript": "^4.2.4",
     "url-loader": "^4.1.1",
     "webpack": "5.94.0",
-    "webpack-bundle-analyzer": "4.5.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "4.15.2",
-    "webpackbar": "5.0.2"
+    "webpack-dev-server": "4.15.2"
   },
   "resolutions": {
     "history": "4.5.1",

openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Lineage.spec.ts

@@ -10,7 +10,7 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import test from '@playwright/test';
+import test, { expect } from '@playwright/test';
 import { get } from 'lodash';
 import { ApiEndpointClass } from '../../support/entity/ApiEndpointClass';
 import { ContainerClass } from '../../support/entity/ContainerClass';
@@ -280,3 +280,85 @@ test('Verify column lineage between table and api endpoint', async ({
 
   await afterAction();
 });
+
+test('Verify function data in edge drawer', async ({ browser }) => {
+  const { page } = await createNewPage(browser);
+  const { apiContext, afterAction } = await getApiContext(page);
+  const table1 = new TableClass();
+  const table2 = new TableClass();
+
+  try {
+    await table1.create(apiContext);
+    await table2.create(apiContext);
+    const sourceTableFqn = get(table1, 'entityResponseData.fullyQualifiedName');
+    const sourceColName = `${sourceTableFqn}.${get(
+      table1,
+      'entityResponseData.columns[0].name'
+    )}`;
+
+    const targetTableFqn = get(table2, 'entityResponseData.fullyQualifiedName');
+    const targetColName = `${targetTableFqn}.${get(
+      table2,
+      'entityResponseData.columns[0].name'
+    )}`;
+
+    await addPipelineBetweenNodes(page, table1, table2);
+    await activateColumnLayer(page);
+    await addColumnLineage(page, sourceColName, targetColName);
+
+    const lineageReq = page.waitForResponse('/api/v1/lineage/getLineage?*');
+    await page.reload();
+    const lineageRes = await lineageReq;
+    const jsonRes = await lineageRes.json();
+    const edge = jsonRes.edges[0];
+    const columnData = edge.columns[0];
+
+    const newEdge = {
+      edge: {
+        fromEntity: {
+          id: edge.fromEntity.id,
+          type: edge.fromEntity.type,
+        },
+        toEntity: {
+          id: edge.toEntity.id,
+          type: edge.toEntity.type,
+        },
+        lineageDetails: {
+          columnsLineage: [
+            {
+              fromColumns: [columnData.fromColumns[0]],
+              function: 'count',
+              toColumn: columnData.toColumn,
+            },
+          ],
+          description: 'test',
+        },
+      },
+    };
+    await apiContext.put(`/api/v1/lineage`, {
+      data: newEdge,
+    });
+    const lineageReq1 = page.waitForResponse('/api/v1/lineage/getLineage?*');
+    await page.reload();
+    await lineageReq1;
+
+    await activateColumnLayer(page);
+    await page
+      .locator(
+        `[data-testid="column-edge-${btoa(sourceColName)}-${btoa(
+          targetColName
+        )}"]`
+      )
+      .dispatchEvent('click');
+
+    await page.locator('.edge-info-drawer').isVisible();
+
+    await expect(await page.locator('[data-testid="Function"]')).toContainText(
+      'count'
+    );
+  } finally {
+    await table1.delete(apiContext);
+    await table2.delete(apiContext);
+    await afterAction();
+  }
+});

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityInfoDrawer/EdgeInfoDrawer.component.tsx

@@ -27,6 +27,7 @@ import { EntityType } from '../../../enums/entity.enum';
 import { Source } from '../../../generated/type/entityLineage';
 import { getNameFromFQN } from '../../../utils/CommonUtils';
 import {
+  getColumnFunctionValue,
   getColumnSourceTargetHandles,
   getLineageDetailsObject,
 } from '../../../utils/EntityLineageUtils';
@@ -66,6 +67,7 @@ const EdgeInfoDrawer = ({
     const { source, target, data } = edge;
     const { sourceHandle, targetHandle } = getColumnSourceTargetHandles(edge);
     const { pipeline, pipelineEntityType } = data?.edge ?? {};
+    const isColumnLineage = sourceHandle && targetHandle;
 
     let sourceData: Node | undefined, targetData: Node | undefined;
     nodes.forEach((node) => {
@@ -121,7 +123,13 @@ const EdgeInfoDrawer = ({
       },
       functionInfo: {
         key: t('label.function'),
-        value: data.columnFunctionValue,
+        value: isColumnLineage
+          ? getColumnFunctionValue(
+              data?.edge?.columns ?? [],
+              sourceHandle ?? '',
+              targetHandle ?? ''
+            )
+          : undefined,
       },
     });
     setIsLoading(false);

openmetadata-ui/src/main/resources/ui/src/hooks/useCustomLocation/useCustomLocation.test.ts

@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 import { renderHook } from '@testing-library/react-hooks';
+import process from 'process';
 import { useLocation } from 'react-router-dom';
 import useCustomLocation from './useCustomLocation';
 

openmetadata-ui/src/main/resources/ui/src/hooks/useCustomLocation/useCustomLocation.ts

@@ -10,6 +10,7 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
+import process from 'process';
 import { useLocation } from 'react-router-dom';
 
 const useCustomLocation = (): ReturnType<typeof useLocation> => {

openmetadata-ui/src/main/resources/ui/src/index.tsx

@@ -14,7 +14,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
-import './styles/index.js';
+import './styles/index';
 
 ReactDOM.render(
   <React.StrictMode>

openmetadata-ui/src/main/resources/ui/src/utils/AuthProvider.util.ts

@@ -20,6 +20,7 @@ import { CookieStorage } from 'cookie-storage';
 import jwtDecode, { JwtPayload } from 'jwt-decode';
 import { first, get, isEmpty, isNil } from 'lodash';
 import { WebStorageStateStore } from 'oidc-client';
+import process from 'process';
 import {
   AuthenticationConfigurationWithScope,
   OidcUser,

openmetadata-ui/src/main/resources/ui/src/utils/EntityLineageUtils.test.tsx

@@ -16,7 +16,7 @@ import { EdgeTypeEnum } from '../components/Entity/EntityLineage/EntityLineage.i
 import { EdgeDetails } from '../components/Lineage/Lineage.interface';
 import { SourceType } from '../components/SearchedData/SearchedData.interface';
 import { EntityType } from '../enums/entity.enum';
-import { AddLineage } from '../generated/api/lineage/addLineage';
+import { AddLineage, ColumnLineage } from '../generated/api/lineage/addLineage';
 import {
   MOCK_CHILD_MAP,
   MOCK_LINEAGE_DATA_NEW,
@@ -29,6 +29,7 @@ import {
   createNewEdge,
   getAllTracedEdges,
   getChildMap,
+  getColumnFunctionValue,
   getColumnLineageData,
   getColumnSourceTargetHandles,
   getConnectedNodesEdges,
@@ -608,4 +609,74 @@ describe('Test EntityLineageUtils utility', () => {
       expect(result.childrenHeading).toEqual('label.column-plural');
     });
   });
+
+  describe('getColumnFunctionValue', () => {
+    it('should return the correct function value when a matching column is found', () => {
+      const columns = [
+        {
+          toColumn: 'targetColumn',
+          fromColumns: ['sourceColumn'],
+          function: 'SUM',
+        },
+        {
+          toColumn: 'anotherTargetColumn',
+          fromColumns: ['anotherSourceColumn'],
+          function: 'AVG',
+        },
+      ];
+      const sourceFqn = 'sourceColumn';
+      const targetFqn = 'targetColumn';
+
+      const result = getColumnFunctionValue(columns, sourceFqn, targetFqn);
+
+      expect(result).toBe('SUM');
+    });
+
+    it('should return undefined when no matching column is found', () => {
+      const columns = [
+        {
+          toColumn: 'targetColumn',
+          fromColumns: ['sourceColumn'],
+          function: 'SUM',
+        },
+        {
+          toColumn: 'anotherTargetColumn',
+          fromColumns: ['anotherSourceColumn'],
+          function: 'AVG',
+        },
+      ];
+      const sourceFqn = 'nonExistentSourceColumn';
+      const targetFqn = 'nonExistentTargetColumn';
+
+      const result = getColumnFunctionValue(columns, sourceFqn, targetFqn);
+
+      expect(result).toBeUndefined();
+    });
+
+    it('should return undefined when columns array is empty', () => {
+      const columns: ColumnLineage[] = [];
+      const sourceFqn = 'sourceColumn';
+      const targetFqn = 'targetColumn';
+
+      const result = getColumnFunctionValue(columns, sourceFqn, targetFqn);
+
+      expect(result).toBeUndefined();
+    });
+
+    it('should return undefined when fromColumns is undefined', () => {
+      const columns = [
+        {
+          toColumn: 'targetColumn',
+          fromColumns: undefined,
+          function: 'SUM',
+        },
+      ];
+      const sourceFqn = 'sourceColumn';
+      const targetFqn = 'targetColumn';
+
+      const result = getColumnFunctionValue(columns, sourceFqn, targetFqn);
+
+      expect(result).toBeUndefined();
+    });
+  });
 });

openmetadata-ui/src/main/resources/ui/src/utils/EntityLineageUtils.tsx

@@ -1390,3 +1390,15 @@ export const getPaginatedChildMap = (
 
   return { nodes, edges };
 };
+
+export const getColumnFunctionValue = (
+  columns: ColumnLineage[],
+  sourceFqn: string,
+  targetFqn: string
+) => {
+  const column = columns.find(
+    (col) => col.toColumn === targetFqn && col.fromColumns?.includes(sourceFqn)
+  );
+
+  return column?.function;
+};

openmetadata-ui/src/main/resources/ui/src/utils/HistoryUtils.ts

@@ -12,6 +12,7 @@
  */
 
 import { createBrowserHistory } from 'history';
+import process from 'process';
 
 const subPath = process.env.APP_SUB_PATH ?? '';
 

openmetadata-ui/src/main/resources/ui/src/utils/RouterUtils.ts

@@ -13,6 +13,7 @@
 
 import { isUndefined } from 'lodash';
 import { ServiceTypes } from 'Models';
+import process from 'process';
 import {
   getServiceDetailsPath,
   IN_PAGE_SEARCH_ROUTES,