fix: address feedbacks of explore lineage (#12123)

* fix: feedbacks * fix: color feedbacks * fix: query page resizable panel update * fix: task feed card feedbacks * fix: unit tests * fix: spacing issue * address comments --------- Co-authored-by: Chirag Madlani <12962843+chirag-madlani@users.noreply.github.com>
open-metadata · Jun 24, 2023 · 9fcaaaf · 9fcaaaf
1 parent c35d326
commit 9fcaaaf
Show file tree

Hide file tree

Showing 39 changed files with 342 additions and 312 deletions.
diff --git a/...-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/PopoverContent.tsx b/...-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/PopoverContent.tsx
@@ -12,6 +12,7 @@
  */
 
 import { Button, Popover, Space } from 'antd';
+import { ReactComponent as EditIcon } from 'assets/svg/edit-new.svg';
 import { isNil, isUndefined, uniqueId } from 'lodash';
 import React, { FC, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -210,18 +211,13 @@ const PopoverContent: FC<Props> = ({
 
  {editCheck && (
  <Button
- className="p-0"
+ className="p-0 flex-center"
  data-testid="edit-message"
+ icon={<EditIcon width="18px" />}
  size="small"
  type="text"
- onClick={handleEdit}>
- <SVGIcons
- alt="edit"
- icon={Icons.EDIT}
- title={t('label.edit')}
- width="18px"
- />
- </Button>
+ onClick={handleEdit}
+ />
  )}
 
  {deleteButtonCheck ? (

diff --git a/...src/main/resources/ui/src/components/ActivityFeed/TaskFeedCard/TaskFeedCard.component.tsx b/...src/main/resources/ui/src/components/ActivityFeed/TaskFeedCard/TaskFeedCard.component.tsx
@@ -22,8 +22,8 @@ import { isUndefined, noop } from 'lodash';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
+import { getNameFromFQN } from 'utils/CommonUtils';
 import {
- entityDisplayName,
  getEntityFieldDisplay,
  getEntityFQN,
  getEntityType,
@@ -100,7 +100,7 @@ const TaskFeedCard = ({
  data-testid="entitylink"
  to={prepareFeedLink(entityType, entityFQN)}
  onClick={(e) => e.stopPropagation()}>
- {entityDisplayName(entityType, entityFQN)}
+ {getNameFromFQN(entityFQN)}
  </Link>
  </EntityPopOverCard>
  </>

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddGlossary/AddGlossary.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddGlossary/AddGlossary.component.tsx
@@ -17,7 +17,6 @@ import { FormProps, useForm } from 'antd/lib/form/Form';
 import ResizablePanels from 'components/common/ResizablePanels/ResizablePanels';
 import { UserTag } from 'components/common/UserTag/UserTag.component';
 import { UserTagSize } from 'components/common/UserTag/UserTag.interface';
-import PageLayoutV1 from 'components/containers/PageLayoutV1';
 import { ENTITY_NAME_REGEX } from 'constants/regex.constants';
 import { EntityReference } from 'generated/type/entityLineage';
 import { FieldProp, FieldTypes } from 'interface/FormUtils.interface';
@@ -305,4 +304,3 @@ const AddGlossary = ({
 };
 
 export default AddGlossary;
-PageLayoutV1;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AppBar/Appbar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AppBar/Appbar.tsx
@@ -292,7 +292,7 @@ const Appbar: React.FC = (): JSX.Element => {
  {name}
  </Typography.Paragraph>
  </Link>
- <hr className="tw-my-1.5" />
+ <hr className="m-y-sm" />
  {roles.length > 0 ? getUsersRoles(roles, t('label.role-plural')) : null}
  {inheritedRoles.length > 0
  ? getUsersRoles(inheritedRoles, t('label.inherited-role-plural'))
@@ -321,6 +321,7 @@ const Appbar: React.FC = (): JSX.Element => {
  ) : null}
  </div>
  ) : null}
+ <hr className="m-t-sm" />
  </div>
  );
  };
@@ -333,6 +334,12 @@ const Appbar: React.FC = (): JSX.Element => {
  icon: <></>,
  isText: true,
  },
+ {
+ name: t('label.logout'),
+ to: '',
+ disabled: false,
+ method: onLogoutHandler,
+ },
  ];
 
  const searchHandler = (value: string) => {

diff --git a/...in/resources/ui/src/components/DataAssets/DataAssetsHeader/DataAssetsHeader.component.tsx b/...in/resources/ui/src/components/DataAssets/DataAssetsHeader/DataAssetsHeader.component.tsx
@@ -31,7 +31,7 @@ import TierCard from 'components/common/TierCard/TierCard';
 import TitleBreadcrumb from 'components/common/title-breadcrumb/title-breadcrumb.component';
 import EntityHeaderTitle from 'components/Entity/EntityHeaderTitle/EntityHeaderTitle.component';
 import { FQN_SEPARATOR_CHAR } from 'constants/char.constants';
-import { getDashboardDetailsPath } from 'constants/constants';
+import { DE_ACTIVE_COLOR, getDashboardDetailsPath } from 'constants/constants';
 import { NO_PERMISSION_FOR_ACTION } from 'constants/HelperTextUtil';
 import { EntityTabs, EntityType } from 'enums/entity.enum';
 import { Container } from 'generated/entity/data/container';
@@ -474,7 +474,7 @@ export const DataAssetsHeader = ({
  disabled={
  !(permissions.EditAll || permissions.EditTags)
  }
- icon={<EditIcon width="14px" />}
+ icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
  size="small"
  type="text"
  />

diff --git a/...data-ui/src/main/resources/ui/src/components/EntityInfoDrawer/EntityInfoDrawer.style.less b/...data-ui/src/main/resources/ui/src/components/EntityInfoDrawer/EntityInfoDrawer.style.less
@@ -22,7 +22,7 @@
 }
 
 .entity-panel-container {
- margin-top: 48px;
+ margin-top: 60px;
  .ant-drawer-header {
  border-bottom: none;
  padding-bottom: 0 !important;

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/AddPipeLineModal.tsx b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/AddPipeLineModal.tsx
@@ -67,8 +67,8 @@ const AddPipeLineModal = ({
  </Button>,
  ]}
  maskClosable={false}
+ open={showAddPipelineModal}
  title={isUndefined(selectedPipelineId) ? 'Add Pipeline' : 'Edit Pipeline'}
- visible={showAddPipelineModal}
  onCancel={onModalCancel}>
  <Select
  allowClear

diff --git a/...metadata-ui/src/main/resources/ui/src/components/EntityLineage/CustomNodeV1.component.tsx b/...metadata-ui/src/main/resources/ui/src/components/EntityLineage/CustomNodeV1.component.tsx
@@ -103,7 +103,7 @@ const CustomNodeV1 = (props: NodeProps) => {
  updateNodeInternals(id);
  if (!isExpanded) {
  setShowAllColumns(false);
- } else if (Object.values(columns).length < 5) {
+ } else if (!isEmpty(columns) && Object.values(columns).length < 5) {
  setShowAllColumns(true);
  }
  }, [isEditMode, isExpanded, columns]);

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/LineageConfigModal.tsx b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/LineageConfigModal.tsx
@@ -54,8 +54,8 @@ const LineageConfigModal: React.FC<LineageConfigModalProps> = ({
  return (
  <Modal
  maskClosable={false}
+ open={visible}
  title={t('label.lineage-config')}
- visible={visible}
  onCancel={onCancel}
  onOk={form.submit}>
  <Form

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/custom-node.less b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/custom-node.less
@@ -38,15 +38,19 @@
  box-shadow: none;
 }
 
+.lineage-node {
+ border: @global-border;
+ border-radius: 4px;
+}
+
 .react-flow__node-default,
 .react-flow__node-group,
 .react-flow__node-input,
 .react-flow__node-output {
  padding: 0 !important;
- border-color: @border-color !important;
- border-radius: 4px !important;
+ border: none !important;
  box-shadow: none !important;
- background-color: @grey-1 !important;
+ background-color: @white !important;
 }
 
 .react-flow__node-load-more {
@@ -85,7 +89,9 @@
 .react-flow__node-load-more.selectable.selected,
 .react-flow__node-load-more.selectable:focus,
 .react-flow__node-load-more.selectable:focus-visible {
- border-color: @primary-color !important;
+ .lineage-node {
+ border-color: @primary-color !important;
+ }
  .lineage-node-handle {
  border-color: @primary-color;
  }
@@ -96,9 +102,6 @@
  background: @primary-color-hover;
  border-top: 1px solid @border-color;
  }
- .custom-node-header-tracing {
- border: none;
- }
 }
 
 .react-flow__handle.connectable {
@@ -128,8 +131,8 @@
  border-radius: 0;
  border-color: @border-color;
  background: @white;
- top: 0;
- height: 27px;
+ top: 1px;
+ height: 25px;
  transform: none;
  border: none;
  &.react-flow__handle-left {
@@ -144,4 +147,6 @@
  display: flex;
  align-items: center;
  justify-content: center;
+ position: relative;
+ background-color: @white;
 }
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityList/EntityList.tsx b/openmetadata-ui/src/main/resources/ui/src/components/EntityList/EntityList.tsx
@@ -161,7 +161,7 @@ export const EntityListWithV1: FunctionComponent<AntdEntityListProp> = ({
  <>
  <Row className="m-b-xs" justify="space-between">
  <Col>
- <Typography.Text className="right-panel-heading">
+ <Typography.Text className="right-panel-label">
  {headerTextLabel}
  </Typography.Text>
  </Col>

diff --git a/...in/resources/ui/src/components/ExploreV1/ExploreSearchCard/ExploreSearchCard.interface.ts b/...in/resources/ui/src/components/ExploreV1/ExploreSearchCard/ExploreSearchCard.interface.ts
@@ -27,6 +27,5 @@ export interface ExploreSearchCardProps {
  checked?: boolean;
  showCheckboxes?: boolean;
  showTags?: boolean;
- showNameHeader?: boolean;
  openEntityInNewPage?: boolean;
 }
diff --git a/...ui/src/main/resources/ui/src/components/ExploreV1/ExploreSearchCard/ExploreSearchCard.tsx b/...ui/src/main/resources/ui/src/components/ExploreV1/ExploreSearchCard/ExploreSearchCard.tsx
@@ -10,10 +10,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Button, Checkbox, Col, Row, Typography } from 'antd';
+import { Button, Col, Row, Typography } from 'antd';
 import classNames from 'classnames';
 import TitleBreadcrumb from 'components/common/title-breadcrumb/title-breadcrumb.component';
-import { EntityHeader } from 'components/Entity/EntityHeader/EntityHeader.component';
 import TableDataCardBody from 'components/TableDataCardBody/TableDataCardBody';
 import { useTourProvider } from 'components/TourProvider/TourProvider';
 import { FQN_SEPARATOR_CHAR } from 'constants/char.constants';
@@ -48,10 +47,7 @@ const ExploreSearchCard: React.FC<ExploreSearchCardProps> = forwardRef<
  source,
  matches,
  handleSummaryPanelDisplay,
- showCheckboxes,
- checked,
  showTags = true,
- showNameHeader = true,
  openEntityInNewPage,
  },
  ref
@@ -115,72 +111,46 @@ const ExploreSearchCard: React.FC<ExploreSearchCardProps> = forwardRef<
 
  const header = useMemo(() => {
  return (
- <>
- {showNameHeader ? (
- <Row wrap={false}>
- <Col flex="auto">
- <EntityHeader
- titleIsLink
- breadcrumb={breadcrumbs}
- entityData={source}
- entityType={source.entityType as EntityType}
- gutter="large"
- icon={serviceIcon}
- openEntityInNewPage={openEntityInNewPage}
- serviceName={source?.service?.name ?? ''}
- />
- </Col>
- {showCheckboxes && (
- <Col flex="20px">
- <Checkbox checked={checked} className="m-l-auto" />
- </Col>
- )}
- </Row>
- ) : (
- <Row gutter={[8, 8]}>
- <Col span={24}>
- <div className="d-flex gap-2 items-center">
- {serviceIcon}
- <div
- className="entity-breadcrumb"
- data-testid="category-name">
- <TitleBreadcrumb titleLinks={breadcrumbs} />
- </div>
- </div>
- </Col>
- <Col span={24}>
- {isTourOpen ? (
- <Button data-testid={source.fullyQualifiedName} type="link">
- <Typography.Text
- className="text-lg font-medium text-link-color"
- data-testid="entity-header-display-name">
- {stringToHTML(getEntityName(source))}
- </Typography.Text>
- </Button>
- ) : (
- <Link
- className="no-underline"
- data-testid="entity-link"
- target={openEntityInNewPage ? '_blank' : '_self'}
- to={
- source.fullyQualifiedName && source.entityType
- ? getEntityLinkFromType(
- getEncodedFqn(source.fullyQualifiedName),
- source.entityType as EntityType
- )
- : ''
- }>
- <Typography.Text
- className="text-lg font-medium text-link-color"
- data-testid="entity-header-display-name">
- {stringToHTML(getEntityName(source))}
- </Typography.Text>
- </Link>
- )}
- </Col>
- </Row>
- )}
- </>
+ <Row gutter={[8, 8]}>
+ <Col span={24}>
+ <div className="d-flex gap-2 items-center">
+ {serviceIcon}
+ <div className="entity-breadcrumb" data-testid="category-name">
+ <TitleBreadcrumb titleLinks={breadcrumbs} />
+ </div>
+ </div>
+ </Col>
+ <Col span={24}>
+ {isTourOpen ? (
+ <Button data-testid={source.fullyQualifiedName} type="link">
+ <Typography.Text
+ className="text-lg font-medium text-link-color"
+ data-testid="entity-header-display-name">
+ {stringToHTML(getEntityName(source))}
+ </Typography.Text>
+ </Button>
+ ) : (
+ <Link
+ className="no-underline"
+ data-testid="entity-link"
+ target={openEntityInNewPage ? '_blank' : '_self'}
+ to={
+ source.fullyQualifiedName && source.entityType
+ ? getEntityLinkFromType(
+ getEncodedFqn(source.fullyQualifiedName),
+ source.entityType as EntityType
+ )
+ : ''
+ }>
+ <Typography.Text
+ className="text-lg font-medium text-link-color"
+ data-testid="entity-header-display-name">
+ {stringToHTML(getEntityName(source))}
+ </Typography.Text>
+ </Link>
+ )}
+ </Col>
+ </Row>
  );
  }, [breadcrumbs, source]);
 

diff --git a/...adata-ui/src/main/resources/ui/src/components/GlossaryTerms/tabs/AssetsTabs.component.tsx b/...adata-ui/src/main/resources/ui/src/components/GlossaryTerms/tabs/AssetsTabs.component.tsx
@@ -261,7 +261,6 @@ const AssetsTabs = forwardRef(
  handleSummaryPanelDisplay={setSelectedCard}
  id={_id}
  key={index}
- showNameHeader={false}
  showTags={false}
  source={_source}
  />

diff --git a/...ta-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/WhatsNewModal.styles.less b/...ta-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/WhatsNewModal.styles.less
@@ -11,7 +11,7 @@
  * limitations under the License.
  */
 
-@import url('../../../styles/variables.less');
+@import (reference) url('../../../styles/variables.less');
 
 .whats-new-modal {
  .ant-modal-body {
@@ -42,7 +42,7 @@
  width: 338px;
  }
  .ant-card-body {
- background-color: #35198e;
+ background-color: @primary-color;
  border-radius: @border-radius-base;
  }