chore: Resolve serialization console errors. Add data source logo int…

…o linage. (#1483)
opendatadiscovery · Oct 25, 2023 · 518e4ea · 518e4ea
1 parent fab9d11
commit 518e4ea
Show file tree

Hide file tree

Showing 19 changed files with 294 additions and 103 deletions.
diff --git a/odd-platform-ui/package.json b/odd-platform-ui/package.json
@@ -41,7 +41,7 @@
   "dependencies": {
     "@hookform/error-message": "^2.0.1",
     "@mui/lab": "5.0.0-alpha.139",
-    "@mui/material": "^5.14.4",
+    "@mui/material": "^5.14.14",
     "@mui/system": "^5.14.4",
     "@mui/x-date-pickers": "^5.0.20",
     "@reduxjs/toolkit": "^1.9.5",
@@ -79,7 +79,7 @@
     "react-infinite-scroll-component": "^6.1.0",
     "react-multi-date-picker": "^3.3.4",
     "react-redux": "^8.1.2",
-    "react-router-dom": "^6.14.2",
+    "react-router-dom": "^6.17.0",
     "react-truncate-markup": "^5.1.2",
     "styled-components": "^5.3.11",
     "use-debounce": "^9.0.4",

diff --git a/odd-platform-ui/pnpm-lock.yaml b/odd-platform-ui/pnpm-lock.yaml
diff --git a/odd-platform-ui/src/components/Alerts/AlertsList/AlertItem/AlertItem.tsx b/odd-platform-ui/src/components/Alerts/AlertsList/AlertItem/AlertItem.tsx
@@ -131,7 +131,7 @@ const AlertItem: React.FC<AlertItemProps> = ({
         )}
       </Grid>
       <Grid sx={{ mt: 0.5 }} container flexWrap='nowrap'>
-        <Grid container flexWrap='nowrap' lg={8}>
+        <Grid container item flexWrap='nowrap' lg={8}>
           <Grid container flexDirection='column'>
             <Typography variant='h4'>{alertTitlesMap.get(type)}</Typography>
             <Grid container flexWrap='nowrap' alignItems='center' sx={{ mt: 0.5 }}>
@@ -151,7 +151,7 @@ const AlertItem: React.FC<AlertItemProps> = ({
             </Grid>
           </Grid>
         </Grid>
-        <S.Wrapper container lg={4} $alignItems='flex-start'>
+        <S.Wrapper container item lg={4} $alignItems='flex-start'>
           {resolvedInfo}
           <AlertStatusItem status={alertStatus} />
           <Grid display='flex' flexDirection='column' alignItems='center' sx={{ ml: 2 }}>

diff --git a/odd-platform-ui/src/components/App.tsx b/odd-platform-ui/src/components/App.tsx
@@ -60,9 +60,7 @@ const App: React.FC = () => {
         <AppSuspenseWrapper>
           <Routes>
             <Route path={basePath} element={<Overview />} />
-            <Route path={getNonExactPath(SearchRoutes.search)} element={<Search />}>
-              <Route path={SearchRoutes.searchIdParam} />
-            </Route>
+            <Route path={getNonExactPath(SearchRoutes.search)} element={<Search />} />
             <Route
               path={getNonExactPath(ManagementRoutesEnum.management)}
               element={<Management />}
@@ -75,31 +73,20 @@ const App: React.FC = () => {
             <Route
               path={getNonExactPath(TermsRoutes.termSearch)}
               element={<TermSearch />}
-            >
-              <Route path={TermsRoutes.termSearchIdParam} />
-            </Route>
-            <Route path={getNonExactPath(AlertsRoutes.alerts)} element={<Alerts />}>
-              <Route path={AlertsRoutes.alertsViewTypeParam} />
-            </Route>
+            />
+            <Route path={getNonExactPath(AlertsRoutes.alerts)} element={<Alerts />} />
             <Route
               path={getNonExactPath(ActivityRoutes.activity)}
               element={<Activity />}
             />
-
             <Route path={getNonExactPath(TermsRoutes.terms)} element={<TermDetails />}>
-              <Route path={getNonExactParamPath(TermsRoutes.termIdParam)}>
-                <Route path={TermsRoutes.termsViewTypeParam} />
-              </Route>
+              <Route path={getNonExactParamPath(TermsRoutes.termIdParam)} />
             </Route>
             <Route
               path={getNonExactPath(DataEntityRoutes.dataentities)}
               element={<DataEntityDetails />}
             >
-              <Route path={getNonExactParamPath(DataEntityRoutes.dataEntityIdParam)}>
-                <Route
-                  path={getNonExactParamPath(DataEntityRoutes.dataEntityViewTypeParam)}
-                />
-              </Route>
+              <Route path={getNonExactParamPath(DataEntityRoutes.dataEntityIdParam)} />
             </Route>
             <Route
               path={getNonExactPath(DirectoryRoutesEnum.directory)}

diff --git a/...m-ui/src/components/DataEntityDetails/DataEntityDetailsRoutes/DataEntityDetailsRoutes.tsx b/...m-ui/src/components/DataEntityDetails/DataEntityDetailsRoutes/DataEntityDetailsRoutes.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { lazy } from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 import { AppSuspenseWrapper, RestrictedRoute } from 'components/shared/elements';
 import { WithPermissionsProvider } from 'components/shared/contexts';
@@ -7,24 +7,20 @@ import { useAppParams, useAppPaths } from 'lib/hooks';
 import { useAppSelector } from 'redux/lib/hooks';
 import { getIsEntityStatusDeleted, getResourcePermissions } from 'redux/selectors';
 
-const Overview = React.lazy(() => import('../Overview/Overview'));
-const DatasetStructure = React.lazy(() => import('../DatasetStructure/DatasetStructure'));
-const Lineage = React.lazy(() => import('../Lineage/Lineage'));
-const TestReport = React.lazy(() => import('../TestReport/TestReport'));
-const TestReportDetails = React.lazy(
+const Overview = lazy(() => import('../Overview/Overview'));
+const DatasetStructure = lazy(() => import('../DatasetStructure/DatasetStructure'));
+const Lineage = lazy(() => import('../Lineage/Lineage'));
+const TestReport = lazy(() => import('../TestReport/TestReport'));
+const TestReportDetails = lazy(
   () => import('../TestReport/TestReportDetails/TestReportDetails')
 );
-const DataEntityAlerts = React.lazy(() => import('../DataEntityAlerts/DataEntityAlerts'));
-const QualityTestHistory = React.lazy(
+const DataEntityAlerts = lazy(() => import('../DataEntityAlerts/DataEntityAlerts'));
+const QualityTestHistory = lazy(
   () => import('../QualityTestRunsHistory/TestRunsHistory')
 );
-const DataEntityActivity = React.lazy(
-  () => import('../DataEntityActivity/DataEntityActivity')
-);
-const DataCollaboration = React.lazy(
-  () => import('../DataCollaboration/DataCollaboration')
-);
-const LinkedItemsList = React.lazy(() => import('../LinkedItemsList/LinkedItemsList'));
+const DataEntityActivity = lazy(() => import('../DataEntityActivity/DataEntityActivity'));
+const DataCollaboration = lazy(() => import('../DataCollaboration/DataCollaboration'));
+const LinkedItemsList = lazy(() => import('../LinkedItemsList/LinkedItemsList'));
 
 const DataEntityDetailsRoutes: React.FC = () => {
   const { DataEntityRoutes, getNonExactParamPath } = useAppPaths();
@@ -39,6 +35,7 @@ const DataEntityDetailsRoutes: React.FC = () => {
     <AppSuspenseWrapper>
       <Routes>
         <Route path={DataEntityRoutes.dataEntityViewTypeParam}>
+          <Route path='' element={<Navigate to={DataEntityRoutes.overview} />} />
           <Route path={DataEntityRoutes.overview} element={<Overview />} />
           <Route
             path={getNonExactParamPath(DataEntityRoutes.structure)}
@@ -128,7 +125,6 @@ const DataEntityDetailsRoutes: React.FC = () => {
           >
             <Route path={DataEntityRoutes.messageIdParam} />
           </Route>
-          <Route path='' element={<Navigate to={DataEntityRoutes.overview} />} />
         </Route>
       </Routes>
     </AppSuspenseWrapper>

diff --git a/...tStructureOverview/DatasetStructureView/DatasetStructureHeader/DatasetStructureHeader.tsx b/...tStructureOverview/DatasetStructureView/DatasetStructureHeader/DatasetStructureHeader.tsx
@@ -109,6 +109,7 @@ const DatasetStructureHeader: FC = () => {
         justifyContent='flex-end'
       >
         <Input
+          name='search'
           variant='search-m'
           placeholder={t('Search')}
           sx={{ minWidth: '250px', mr: 1 }}
@@ -118,6 +119,7 @@ const DatasetStructureHeader: FC = () => {
           handleSearchClick={onSearchClick}
         />
         <AppSelect
+          name='select-revision'
           defaultValue={versionId}
           value={versionId}
           onChange={handleRevisionChange}

diff --git a/...tityDetails/Lineage/HierarchyLineage/ZoomableLineage/LineageGraph/Node/Info/InfoStyles.ts b/...tityDetails/Lineage/HierarchyLineage/ZoomableLineage/LineageGraph/Node/Info/InfoStyles.ts
@@ -2,11 +2,6 @@ import styled from 'styled-components';
 
 export const Attribute = styled('text')(({ theme }) => ({
   fill: theme.palette.common.black,
-  fontSize: theme.typography.body1.fontSize,
-  fontWeight: theme.typography.body1.fontWeight,
-  lineHeight: theme.typography.body1.lineHeight,
-  width: '168px',
-  overflow: 'hidden',
 }));
 
 export const AttributeLabel = styled('tspan')(({ theme }) => ({

diff --git a/...nts/DataEntityDetails/Lineage/HierarchyLineage/ZoomableLineage/LineageGraph/Node/Node.tsx b/...nts/DataEntityDetails/Lineage/HierarchyLineage/ZoomableLineage/LineageGraph/Node/Node.tsx
@@ -6,6 +6,7 @@ import type { TreeNodeDatum } from 'redux/interfaces/graph';
 import { DataEntityClassNameEnum } from 'generated-sources';
 import { type StreamType } from 'redux/interfaces';
 import { useAppPaths, useQueryParams } from 'lib/hooks';
+import { DatasourceLogo } from 'components/shared/elements';
 import type { NodeSize } from '../../../lineageLib/interfaces';
 import { getHighLightedLinks } from '../../../lineageLib/helpers';
 import NodeTitle from './NodeTitle/NodeTitle';
@@ -144,6 +145,16 @@ const Node = React.memo<NodeProps>(
             oddrn={node.data.oddrn}
             streamType={streamType}
           />
+          {node.data.dataSource?.oddrn ? (
+            <DatasourceLogo
+              svg
+              name={node.data.dataSource?.oddrn}
+              width={24}
+              height={24}
+              x={nodeSize.size.contentWidth}
+              y={nodeSize.content.title.y}
+            />
+          ) : null}
           <Classes nodeSize={nodeSize} entityClasses={node.data.entityClasses} />
           <rect
             width={nodeSize.content.loadMore.layer.width}

diff --git a/...etails/Lineage/HierarchyLineage/ZoomableLineage/LineageGraph/Node/NodeTitle/NodeTitle.tsx b/...etails/Lineage/HierarchyLineage/ZoomableLineage/LineageGraph/Node/NodeTitle/NodeTitle.tsx
@@ -4,8 +4,8 @@ import type { NodeSize } from 'components/DataEntityDetails/Lineage/HierarchyLin
 import * as S from 'components/DataEntityDetails/Lineage/HierarchyLineage/ZoomableLineage/LineageGraph/Node/NodeTitle/NodeTitleStyles';
 
 interface NodeTitleProps {
-  externalName: string | undefined;
-  internalName: string | undefined;
+  externalName?: string;
+  internalName?: string;
   handleTitleClick: () => void;
   nodeSize: NodeSize;
   fullNames: boolean;
@@ -16,14 +16,14 @@ const NodeTitle = React.memo<NodeTitleProps>(
     <Group top={nodeSize.content.title.y} left={nodeSize.content.title.x}>
       {externalName ? (
         <>
-          <title>{internalName || externalName}</title>
+          <title>{internalName ?? externalName}</title>
           <S.Title
             onClick={handleTitleClick}
             width={nodeSize.content.title.width}
             height={nodeSize.content.title.height}
           >
             <S.TitleWrapper $fullNames={fullNames}>
-              {internalName || externalName}
+              {internalName ?? externalName}
             </S.TitleWrapper>
           </S.Title>
         </>

diff --git a/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewStats/OverviewStats.tsx b/odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewStats/OverviewStats.tsx
@@ -69,7 +69,7 @@ const OverviewStats: React.FC = () => {
               />
             );
           case DataEntityClassNameEnum.ENTITY_GROUP:
-            return <OverviewEntityGroupItems />;
+            return <OverviewEntityGroupItems key={entityClass.id} />;
           default:
             return null;
         }

diff --git a/...src/components/shared/elements/Activity/ActivityFilterItems/SingleFilter/SingleFilter.tsx b/...src/components/shared/elements/Activity/ActivityFilterItems/SingleFilter/SingleFilter.tsx
@@ -53,7 +53,7 @@ const SingleFilter = <OptionType extends DataSource | Namespace | ActivityEventT
           sx={{ mt: 2 }}
           label={name}
           id={`filter-${filterName}`}
-          value={queryParams[filterName] || defaultOption}
+          value={queryParams[filterName] ?? defaultOption}
           dataQAId={dataQA}
         >
           <AppMenuItem value='All' onClick={handleFilterSelect(defaultOption)}>

diff --git a/odd-platform-ui/src/components/shared/elements/AppSelect/AppSelect.tsx b/odd-platform-ui/src/components/shared/elements/AppSelect/AppSelect.tsx
@@ -14,24 +14,28 @@ interface AppSelectProps extends SelectProps {
 
 const AppSelect: React.FC<AppSelectProps> = React.forwardRef(
   (
-    { size = 'medium', fullWidth = true, label, maxMenuHeight, dataQAId, ...props },
+    { id, size = 'medium', fullWidth = true, label, maxMenuHeight, dataQAId, ...props },
     ref
   ) => (
     <Grid
       sx={props.containerSx || { mt: label ? 2 : 0, width: fullWidth ? '100%' : 'auto' }}
     >
-      {label && <S.SelectLabel id='select-label-id'>{label}</S.SelectLabel>}
+      {label && (
+        <S.SelectLabel id={`${id}-label`} htmlFor={id}>
+          {label}
+        </S.SelectLabel>
+      )}
       <S.AppSelect
         {...props}
         $size={size}
         $isLabeled={!!label}
         variant='outlined'
         fullWidth={fullWidth}
-        labelId='select-label-id'
+        labelId={`${id}-label`}
         IconComponent={DropdownIcon}
         notched
         ref={ref}
-        inputProps={{ ...props.inputProps, 'data-qa': dataQAId }}
+        inputProps={{ ...props.inputProps, 'data-qa': dataQAId, id }}
         MenuProps={{
           anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
           transformOrigin: { vertical: 'top', horizontal: 'left' },

diff --git a/odd-platform-ui/src/components/shared/elements/AppToolbar/AppToolbar.tsx b/odd-platform-ui/src/components/shared/elements/AppToolbar/AppToolbar.tsx
@@ -87,7 +87,7 @@ const AppToolbar: FC = () => {
         </S.ContentContainer>
       </S.Container>
       <AppMenu
-        PaperProps={{ sx: { width: '240px' } }}
+        slotProps={{ paper: { sx: { width: '240px' } } }}
         anchorEl={anchorEl}
         anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
         id={menuId}

diff --git a/odd-platform-ui/src/components/shared/elements/DatasourceLogo/DatasourceLogo.tsx b/odd-platform-ui/src/components/shared/elements/DatasourceLogo/DatasourceLogo.tsx
@@ -1,16 +1,17 @@
-import React, { type FC } from 'react';
+import React, { type FC, type SVGProps } from 'react';
 import styled from 'styled-components';
 import { type DatasourceName, DatasourceNames } from 'lib/interfaces';
 import { parseDatasourceName } from './helpers';
 
 type BackgroundColor = 'tertiary' | 'default' | 'transparent';
 
-interface DatasourceLogoProps {
+interface DatasourceLogoProps extends SVGProps<SVGRectElement> {
   name: DatasourceName | string;
   width?: number;
   padding?: number;
   rounded?: boolean;
   backgroundColor?: BackgroundColor;
+  svg?: boolean;
 }
 
 export const Container = styled('div')<{
@@ -32,12 +33,23 @@ const DatasourceLogo: FC<DatasourceLogoProps> = ({
   padding,
   rounded,
   backgroundColor = 'tertiary',
+  svg,
+  ...props
 }) => {
   const parsedName = parseDatasourceName(name);
   const isNameExists = DatasourceNames.includes(parsedName);
   const src = isNameExists ? `/imgs/${parsedName}.png` : `/imgs/default.png`;
 
-  return (
+  return svg ? (
+    <>
+      <defs>
+        <filter id='logo'>
+          <feImage xlinkHref={src} />
+        </filter>
+      </defs>
+      <rect filter='url(#logo)' width={width} {...props} />
+    </>
+  ) : (
     <Container $padding={padding} $rounded={rounded} $backgroundColor={backgroundColor}>
       <img width={width} src={src} alt={`${parsedName} logo`} />
     </Container>

diff --git a/odd-platform-ui/src/components/shared/elements/TagItem/TagItem.tsx b/odd-platform-ui/src/components/shared/elements/TagItem/TagItem.tsx
@@ -41,7 +41,7 @@ const TagItem: FC<TagItemProps> = ({
     {systemTag && <SystemIcon />}
     {label}
     {!isUndefined(count) && (
-      <Typography ml={0.5} variant='subtitle1'>
+      <Typography ml={0.5} variant='subtitle1' component='span'>
         {count}
       </Typography>
     )}

diff --git a/odd-platform-ui/src/lib/hooks/api/dataEntity.ts b/odd-platform-ui/src/lib/hooks/api/dataEntity.ts
@@ -124,10 +124,10 @@ export function useGetDataEntityGroupItems({
 
       const totalItems = response.pageInfo.total;
       const totalPageCount = Math.ceil(totalItems / size);
-      let nextPage;
+      let nextPage = pageParam;
 
       if (pageParam < totalPageCount) {
-        nextPage = pageParam + 1;
+        nextPage += 1;
       }
 
       return {

diff --git a/odd-platform-ui/src/redux/store/index.ts b/odd-platform-ui/src/redux/store/index.ts
@@ -4,8 +4,26 @@ import { unauthenticatedMiddleware } from 'redux/lib/unauthenticatedMiddleware';
 import rootReducer from 'redux/slices';
 
 const serializableCheck: SerializableStateInvariantMiddlewareOptions = {
-  ignoredPaths: [/token/],
-  ignoredActionPaths: [/token/],
+  ignoredPaths: [
+    /token/,
+    /lastIngestedAt/,
+    /sourceCreatedAt/,
+    /sourceUpdatedAt/,
+    /createdAt/,
+    /updatedAt/,
+    /startTime/,
+    /endTime/,
+  ],
+  ignoredActionPaths: [
+    /token/,
+    /lastIngestedAt/,
+    /sourceCreatedAt/,
+    /sourceUpdatedAt/,
+    /createdAt/,
+    /updatedAt/,
+    /startTime/,
+    /endTime/,
+  ],
 };
 export const store = configureStore({
   reducer: rootReducer,