chore(ui): update types with respective libs instead hardcoded (#5848)

adding contenthash for chunks to avoid cache issue

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

@@ -16,9 +16,8 @@
     "@auth0/auth0-react": "^1.9.0",
     "@azure/msal-browser": "^2.22.0",
     "@azure/msal-react": "^1.3.0",
-    "@deuex-solutions/react-tour": "^1.2.3",
+    "@deuex-solutions/react-tour": "^1.2.5",
-    "@deuex-solutions/redoc": "2.0.0-rc.33",
+    "@deuex-solutions/redoc": "2.0.0-rc.34",
-    "@fortawesome/fontawesome-free": "^6.0.0",
     "@fortawesome/fontawesome-svg-core": "^1.3.0",
     "@fortawesome/free-solid-svg-icons": "^6.0.0",
     "@fortawesome/react-fontawesome": "^0.1.17",
@@ -31,10 +30,6 @@
     "antlr4": "4.9.2",
     "autoprefixer": "^9.8.6",
     "axios": "^0.21.1",
-    "babel-plugin-named-asset-import": "^0.3.6",
-    "bootstrap": "^4.5.2",
-    "buffer": "^6.0.3",
-    "builtin-status-codes": "^3.0.0",
     "codemirror": "^5.62.3",
     "cookie-storage": "^6.1.0",
     "core-js": "^3.10.1",
@@ -50,7 +45,6 @@
     "https-browserify": "^1.0.0",
     "ieee754": "^1.2.1",
     "immutable": "^4.0.0-rc.14",
-    "jquery": "^3.5.0",
     "jwt-decode": "^3.1.2",
     "markdown-draft-js": "^2.3.0",
     "mobx": "6.0.1",
@@ -58,7 +52,6 @@
     "moment": "^2.29.1",
     "oidc-client": "^1.11.5",
     "path-browserify": "^1.0.1",
-    "popper.js": "1.16.1",
     "postcss": "^8.3.2",
     "process": "^0.11.10",
     "prop-types": "^15.7.2",
@@ -71,7 +64,6 @@
     "react-context-mutex": "^2.0.0",
     "react-copy-to-clipboard": "^5.0.4",
     "react-dom": "^16.14.0",
-    "react-draft-wysiwyg": "^1.14.7",
     "react-error-boundary": "^3.1.4",
     "react-flow-renderer": "^10.3.6",
     "react-google-login": "^5.2.2",
@@ -88,8 +80,6 @@
     "recharts": "^1.8.5",
     "rehype-raw": "^6.1.1",
     "remark-gfm": "^3.0.1",
-    "resolve": "1.15.0",
-    "resolve-url-loader": "3.1.1",
     "slick-carousel": "^1.8.1",
     "socket.io-client": "^4.5.1",
     "stream-http": "^3.2.0",
@@ -149,6 +139,8 @@
     "@testing-library/user-event": "^7.1.2",
     "@types/classnames": "^2.3.1",
     "@types/codemirror": "^0.0.104",
+    "@types/dagre": "^0.7.47",
+    "@types/diff": "^5.0.2",
     "@types/jest": "^26.0.23",
     "@types/lodash": "^4.14.167",
     "@types/node": "^15.6.1",
@@ -160,7 +152,9 @@
     "@types/react-table": "^7.7.10",
     "@types/react-test-renderer": "^17.0.0",
     "@types/reactjs-localstorage": "^1.0.0",
+    "@types/recharts": "^1.8.23",
     "@types/testing-library__jest-dom": "^5.9.5",
+    "@types/turndown": "^5.0.1",
     "@typescript-eslint/eslint-plugin": "^2.10.0",
     "@typescript-eslint/parser": "^2.10.0",
     "babel-eslint": "^10.1.0",

openmetadata-ui/src/main/resources/ui/src/components/DashboardVersion/DashboardVersion.component.tsx

@@ -28,6 +28,7 @@ import {
   getDiffValue,
   getTagsDiff,
 } from '../../utils/EntityVersionUtils';
+import { TagLabelWithStatus } from '../../utils/EntityVersionUtils.interface';
 import SVGIcons from '../../utils/SvgUtils';
 import Description from '../common/description/Description';
 import EntityPageInfo from '../common/entityPageInfo/EntityPageInfo';
@@ -181,13 +182,12 @@ const DashboardVersion: FC<DashboardVersionProp> = ({
         '[]'
     );
     const flag: { [x: string]: boolean } = {};
-    const uniqueTags: Array<TagLabel & { added: boolean; removed: boolean }> =
+    const uniqueTags: Array<TagLabelWithStatus> = [];
-      [];
 
     [
       ...(getTagsDiff(oldTags, newTags) ?? []),
       ...(currentVersionData.tags ?? []),
-    ].forEach((elem: TagLabel & { added: boolean; removed: boolean }) => {
+    ].forEach((elem: TagLabelWithStatus) => {
       if (!flag[elem.tagFQN as string]) {
         flag[elem.tagFQN as string] = true;
         uniqueTags.push(elem);

openmetadata-ui/src/main/resources/ui/src/components/DatasetVersion/DatasetVersion.component.tsx

@@ -33,6 +33,7 @@ import {
   getDiffValue,
   getTagsDiff,
 } from '../../utils/EntityVersionUtils';
+import { TagLabelWithStatus } from '../../utils/EntityVersionUtils.interface';
 import Description from '../common/description/Description';
 import EntityPageInfo from '../common/entityPageInfo/EntityPageInfo';
 import TabsPane from '../common/TabsPane/TabsPane';
@@ -229,12 +230,10 @@ const DatasetVersion: React.FC<DatasetVersionProp> = ({
         arr?.forEach((i) => {
           if (isEqual(i.name, changedColName)) {
             const flag: { [x: string]: boolean } = {};
-            const uniqueTags: Array<
+            const uniqueTags: Array<TagLabelWithStatus> = [];
-              TagLabel & { added: boolean; removed: boolean }
-            > = [];
             const tagsDiff = getTagsDiff(oldTags, newTags);
-            [...tagsDiff, ...(i.tags as Array<TagLabel>)].forEach(
+            [...tagsDiff, ...(i.tags as Array<TagLabelWithStatus>)].forEach(
-              (elem: TagLabel & { added: boolean; removed: boolean }) => {
+              (elem: TagLabelWithStatus) => {
                 if (!flag[elem.tagFQN as string]) {
                   flag[elem.tagFQN as string] = true;
                   uniqueTags.push(elem);
@@ -332,13 +331,12 @@ const DatasetVersion: React.FC<DatasetVersionProp> = ({
         '[]'
     );
     const flag: { [x: string]: boolean } = {};
-    const uniqueTags: Array<TagLabel & { added: boolean; removed: boolean }> =
+    const uniqueTags: Array<TagLabelWithStatus> = [];
-      [];
 
     [
       ...(getTagsDiff(oldTags, newTags) ?? []),
       ...(currentVersionData.tags ?? []),
-    ].forEach((elem: TagLabel & { added: boolean; removed: boolean }) => {
+    ].forEach((elem: TagLabelWithStatus) => {
       if (!flag[elem.tagFQN as string]) {
         flag[elem.tagFQN as string] = true;
         uniqueTags.push(elem);

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

@@ -31,7 +31,7 @@ type Props = {
 
 const FeaturesCarousel = ({ data }: Props) => {
   const [isDataChange, setIsDataChange] = useState(false);
-  const sliderRef = useRef<typeof Slider | null>(null);
+  const sliderRef = useRef<Slider | null>(null);
 
   const settings = {
     dots: true,

openmetadata-ui/src/main/resources/ui/src/components/PipelineVersion/PipelineVersion.component.tsx

@@ -28,6 +28,7 @@ import {
   getDiffValue,
   getTagsDiff,
 } from '../../utils/EntityVersionUtils';
+import { TagLabelWithStatus } from '../../utils/EntityVersionUtils.interface';
 import SVGIcons from '../../utils/SvgUtils';
 import Description from '../common/description/Description';
 import EntityPageInfo from '../common/entityPageInfo/EntityPageInfo';
@@ -181,13 +182,12 @@ const PipelineVersion: FC<PipelineVersionProp> = ({
         '[]'
     );
     const flag: { [x: string]: boolean } = {};
-    const uniqueTags: Array<TagLabel & { added: boolean; removed: boolean }> =
+    const uniqueTags: Array<TagLabelWithStatus> = [];
-      [];
 
     [
       ...(getTagsDiff(oldTags, newTags) ?? []),
       ...(currentVersionData.tags ?? []),
-    ].forEach((elem: TagLabel & { added: boolean; removed: boolean }) => {
+    ].forEach((elem: TagLabelWithStatus) => {
       if (!flag[elem.tagFQN as string]) {
         flag[elem.tagFQN as string] = true;
         uniqueTags.push(elem);

openmetadata-ui/src/main/resources/ui/src/components/TopicVersion/TopicVersion.component.tsx

@@ -26,6 +26,7 @@ import {
   getDiffValue,
   getTagsDiff,
 } from '../../utils/EntityVersionUtils';
+import { TagLabelWithStatus } from '../../utils/EntityVersionUtils.interface';
 import { bytesToSize } from '../../utils/StringsUtils';
 import Description from '../common/description/Description';
 import EntityPageInfo from '../common/entityPageInfo/EntityPageInfo';
@@ -205,13 +206,12 @@ const TopicVersion: FC<TopicVersionProp> = ({
         '[]'
     );
     const flag: { [x: string]: boolean } = {};
-    const uniqueTags: Array<TagLabel & { added: boolean; removed: boolean }> =
+    const uniqueTags: Array<TagLabelWithStatus> = [];
-      [];
 
     [
       ...(getTagsDiff(oldTags, newTags) ?? []),
       ...(currentVersionData.tags ?? []),
-    ].forEach((elem: TagLabel & { added: boolean; removed: boolean }) => {
+    ].forEach((elem: TagLabelWithStatus) => {
       if (!flag[elem.tagFQN as string]) {
         flag[elem.tagFQN as string] = true;
         uniqueTags.push(elem);

openmetadata-ui/src/main/resources/ui/src/components/tour/Tour.tsx

@@ -11,9 +11,8 @@
  *  limitations under the License.
  */
 
-import ReactTutorial from '@deuex-solutions/react-tour';
+import ReactTutorial, { TourSteps } from '@deuex-solutions/react-tour';
 import { observer } from 'mobx-react';
-import { TourSteps } from 'Models';
 import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { useTour } from '../../hooks/useTour';

openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts

@@ -512,15 +512,6 @@ declare module 'Models' {
     profileName?: string;
   };
 
-  export type TourSteps = {
-    content?: string | React.ReactNode;
-    actionType?: string;
-    position?: string | number[];
-    selector?: string;
-    userTypeText?: string;
-    waitTimer?: number;
-  };
-
   export interface FormErrorData {
     [key: string]: string | undefined;
   }
@@ -603,11 +594,6 @@ declare module 'Models' {
     readonly value: string;
   }
 
-  export interface Diff {
-    removed: boolean;
-    added: boolean;
-    value: string;
-  }
   export interface ScrollHandle {
     left: boolean;
     right: boolean;

openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/DescriptionTabs.tsx

@@ -12,8 +12,9 @@
  */
 
 import { Tabs } from 'antd';
+import { Change } from 'diff';
 import { isEqual } from 'lodash';
-import { Diff, EditorContentRef } from 'Models';
+import { EditorContentRef } from 'Models';
 import React, { useState } from 'react';
 import RichTextEditor from '../../../components/common/rich-text-editor/RichTextEditor';
 import RichTextEditorPreviewer from '../../../components/common/rich-text-editor/RichTextEditorPreviewer';
@@ -37,7 +38,7 @@ export const DescriptionTabs = ({
 }: Props) => {
   const { TabPane } = Tabs;
 
-  const [diffs, setDiffs] = useState<Diff[]>([]);
+  const [diffs, setDiffs] = useState<Change[]>([]);
   const [activeTab, setActiveTab] = useState<string>('3');
 
   const onTabChange = (key: string) => {

openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/DiffView.tsx

@@ -12,15 +12,15 @@
  */
 
 import classNames from 'classnames';
+import { Change } from 'diff';
 import { uniqueId } from 'lodash';
-import { Diff } from 'Models';
 import React from 'react';
 
 export const DiffView = ({
   diffArr,
   className,
 }: {
-  diffArr: Diff[];
+  diffArr: Change[];
   className?: string;
 }) => {
   const elements = diffArr.map((diff) => {

openmetadata-ui/src/main/resources/ui/src/react-app-env.d.ts

@@ -13,19 +13,7 @@
 
 /* eslint-disable */
 /// <reference types="react-scripts" />
-declare module 'classnames';
-declare module 'draft-js';
-declare module 'react-draft-wysiwyg';
-declare module 'markdown-draft-js';
-declare module 'react-codemirror2';
-declare module 'react-slick';
-declare module 'slick-carousel';
 declare module 'react-table';
-declare module 'recharts';
-declare module 'diff';
-declare module '@deuex-solutions/react-tour';
-declare module 'dagre';
-declare module 'turndown';
 declare module 'quilljs-markdown';
 declare module 'quill-mention';
 declare module 'quill-emoji';

openmetadata-ui/src/main/resources/ui/src/utils/EntityVersionUtils.interface.ts

@@ -0,0 +1,19 @@
+/*
+ *  Copyright 2022 Collate
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+import { TagLabel } from '../generated/type/tagLabel';
+
+export interface TagLabelWithStatus extends TagLabel {
+  added: boolean | undefined;
+  removed: boolean | undefined;
+}

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

@@ -12,7 +12,7 @@
  */
 
 import classNames from 'classnames';
-import { diffArrays, diffWordsWithSpace } from 'diff';
+import { ArrayChange, diffArrays, diffWordsWithSpace } from 'diff';
 import { isEmpty, isUndefined, uniqueId } from 'lodash';
 import React, { Fragment } from 'react';
 import ReactDOMServer from 'react-dom/server';
@@ -35,6 +35,7 @@ import {
 } from '../generated/entity/services/databaseService';
 import { TagLabel } from '../generated/type/tagLabel';
 import { getEntityName } from './CommonUtils';
+import { TagLabelWithStatus } from './EntityVersionUtils.interface';
 import { isValidJSONString } from './StringsUtils';
 import { getEntityLink } from './TableUtils';
 
@@ -183,17 +184,16 @@ export const getTagsDiff = (
   oldTagList: Array<TagLabel>,
   newTagList: Array<TagLabel>
 ) => {
-  const tagDiff = diffArrays(oldTagList, newTagList);
+  const tagDiff = diffArrays<TagLabel, TagLabel>(oldTagList, newTagList);
   const result = tagDiff
-
+    .map((part: ArrayChange<TagLabel>) =>
-    .map((part: any) =>
       (part.value as Array<TagLabel>).map((tag) => ({
         ...tag,
         added: part.added,
         removed: part.removed,
       }))
     )
-    ?.flat(Infinity);
+    ?.flat(Infinity) as Array<TagLabelWithStatus>;
 
   return result;
 };

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

@@ -12,9 +12,8 @@
  */
 
 import { AxiosError, AxiosResponse } from 'axios';
-import { diffWordsWithSpace } from 'diff';
+import { Change, diffWordsWithSpace } from 'diff';
 import { isEqual, isUndefined } from 'lodash';
-import { Diff } from 'Models';
 import { getDashboardByFqn } from '../axiosAPIs/dashboardAPI';
 import { getUserSuggestions } from '../axiosAPIs/miscAPI';
 import { getPipelineByFqn } from '../axiosAPIs/pipelineAPI';
@@ -95,7 +94,7 @@ export const getTaskDetailPath = (taskId: string) => {
 export const getDescriptionDiff = (
   oldValue: string,
   newValue: string
-): Diff[] => {
+): Change[] => {
   return diffWordsWithSpace(oldValue, newValue);
 };
 
@@ -107,7 +106,7 @@ export const fetchOptions = (
     .then((res: AxiosResponse) => {
       const hits = res.data.suggest['metadata-suggest'][0]['options'];
       // eslint-disable-next-line
-      const suggestOptions = hits.map((hit: any) => ({
+            const suggestOptions = hits.map((hit: any) => ({
         label: hit._source.name ?? hit._source.display_name,
         value: hit._id,
         type: hit._source.entityType,

openmetadata-ui/src/main/resources/ui/webpack.config.prod.js

@@ -34,7 +34,7 @@ module.exports = {
   output: {
     path: outputPath,
     filename: 'openmetadata.bundle.js',
-    chunkFilename: '[name].js',
+    chunkFilename: '[name].[contenthash].js',
     publicPath: '/', // Ensures bundle is served from absolute path as opposed to relative
   },