From 40b68ca841ed16cd654c27434aa85b0b6e0a3fd4 Mon Sep 17 00:00:00 2001 From: Ashish Gupta Date: Tue, 28 Feb 2023 20:57:54 +0530 Subject: [PATCH] fix(UI) : Improvements (#10362) * UI Improvements * code optimize --- .../resources/ui/src/assets/svg/metadata.svg | 2 +- .../EntityTable/EntityTable.component.tsx | 60 +++++++------- .../Tag/TagsContainer/tags-container.tsx | 19 ++--- .../common/description/Description.tsx | 80 ++++++++++--------- .../ui/src/locale/languages/en-us.json | 1 + .../ui/src/utils/FeedElementUtils.tsx | 65 ++++++++++----- 6 files changed, 130 insertions(+), 97 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/metadata.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/metadata.svg index d361bf4cdee..fffd1ed2359 100644 --- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/metadata.svg +++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/metadata.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityTable/EntityTable.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/EntityTable/EntityTable.component.tsx index 854a6ec837a..8a9afdfef7a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/EntityTable/EntityTable.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityTable/EntityTable.component.tsx @@ -11,7 +11,7 @@ * limitations under the License. */ -import { Popover, Space, Table, Typography } from 'antd'; +import { Button, Popover, Space, Table, Typography } from 'antd'; import { ColumnsType } from 'antd/lib/table'; import classNames from 'classnames'; import { cloneDeep, isEmpty, isUndefined, lowerCase, toLower } from 'lodash'; @@ -25,6 +25,8 @@ import React, { } from 'react'; import { useTranslation } from 'react-i18next'; import { useHistory } from 'react-router-dom'; +import { ReactComponent as IconEdit } from '../../assets/svg/ic-edit.svg'; +import { ReactComponent as IconRequest } from '../../assets/svg/request-icon.svg'; import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants'; import { EntityField } from '../../constants/Feeds.constants'; import { SettledStatus } from '../../enums/axios.enum'; @@ -43,7 +45,6 @@ import { fetchGlossaryTerms, getGlossaryTermlist, } from '../../utils/GlossaryUtils'; -import SVGIcons, { Icons } from '../../utils/SvgUtils'; import { getDataTypeString, getTableExpandableConfig, @@ -346,9 +347,10 @@ const EntityTable = ({ const hasDescription = Boolean(cell?.description ?? ''); return ( - + ); }; @@ -381,9 +383,10 @@ const EntityTable = ({ : t('label.request-tag-plural'); return ( - + ); }; @@ -441,10 +444,11 @@ const EntityTable = ({ return (
-
+ id={`column-description-${index}`} + size={4}>
{description ? ( @@ -461,16 +465,16 @@ const EntityTable = ({ {hasDescriptionEditAccess && ( <> - + )} {getRequestDescriptionElement(record)} @@ -502,7 +506,7 @@ const EntityTable = ({ ) : null}
-
+
{getFrequentlyJoinedColumns( record?.name, diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainer/tags-container.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainer/tags-container.tsx index cdab33f67b4..4dd4d6e4da8 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainer/tags-container.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainer/tags-container.tsx @@ -12,7 +12,7 @@ */ import { CheckOutlined, CloseOutlined } from '@ant-design/icons'; -import { Select, Space } from 'antd'; +import { Button, Select, Space } from 'antd'; import classNames from 'classnames'; import Tags from 'components/Tag/Tags/tags'; import { isEmpty } from 'lodash'; @@ -28,7 +28,6 @@ import React, { import { FQN_SEPARATOR_CHAR } from '../../../constants/char.constants'; import { TagSource } from '../../../generated/type/tagLabel'; import { withLoader } from '../../../hoc/withLoader'; -import { Button } from '../../buttons/Button/Button'; import { TagsContainerProps } from './tags-container.interface'; const TagsContainer: FunctionComponent = ({ @@ -166,22 +165,20 @@ const TagsContainer: FunctionComponent = ({ + size={4}> diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/description/Description.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/description/Description.tsx index 6abff58fe04..246bd2b3b69 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/description/Description.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/description/Description.tsx @@ -13,11 +13,14 @@ import { Button, Popover, Space, Typography } from 'antd'; import { AxiosError } from 'axios'; -import classNames from 'classnames'; import { t } from 'i18next'; import { isFunction, isUndefined } from 'lodash'; import React, { FC, Fragment } from 'react'; import { useHistory } from 'react-router-dom'; +import { ReactComponent as IconCommentPlus } from '../../../assets/svg/add-chat.svg'; +import { ReactComponent as IconComments } from '../../../assets/svg/comment.svg'; +import { ReactComponent as IconEdit } from '../../../assets/svg/ic-edit.svg'; +import { ReactComponent as IconRequest } from '../../../assets/svg/request-icon.svg'; import { ReactComponent as IconTaskColor } from '../../../assets/svg/Task-ic.svg'; import { EntityField } from '../../../constants/Feeds.constants'; import { EntityType } from '../../../enums/entity.enum'; @@ -25,7 +28,6 @@ import { ThreadType } from '../../../generated/entity/feed/thread'; import { EntityFieldThreads } from '../../../interface/feed.interface'; import { isTaskSupported } from '../../../utils/CommonUtils'; import { getEntityFeedLink } from '../../../utils/EntityUtils'; -import SVGIcons, { Icons } from '../../../utils/SvgUtils'; import { getRequestDescriptionPath, getUpdateDescriptionPath, @@ -90,9 +92,10 @@ const Description: FC = ({ const hasDescription = Boolean(description.trim()); return TASK_ENTITIES.includes(entityType as EntityType) ? ( - + ) : null; }; @@ -120,26 +123,27 @@ const Description: FC = ({ descriptionThread, }: { descriptionThread?: EntityFieldThreads; - }) => { - return !isUndefined(descriptionThread) ? ( - + + + ) : ( {description?.trim() && onThreadLinkSelect ? ( - + + ) : null} ); - }; - const getDescriptionTaskElement = () => { - return !isUndefined(tasks) ? ( + const getDescriptionTaskElement = () => + !isUndefined(tasks) ? ( ) : null; - }; const DescriptionActions = () => { return !isReadOnly ? ( -
+ {hasEditAccess && ( - + + )} {isTaskSupported(entityType as EntityType) ? ( - {' '} {getDescriptionTaskElement()} ) : null} -
+ ) : null; }; return (
-
+
= ({ />
-
+
); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json index cbdce851002..d261eb2a2e2 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json @@ -420,6 +420,7 @@ "lineage-ingestion": "Lineage Ingestion", "lineage-lowercase": "lineage", "list": "List", + "list-entity": "List {{entity}}", "loading": "Loading", "local-config-source": "Local Config Source", "log-plural": "Logs", diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/FeedElementUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/FeedElementUtils.tsx index a076fe9b2d3..e23282e3566 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/FeedElementUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/FeedElementUtils.tsx @@ -11,16 +11,26 @@ * limitations under the License. */ +import { Button, Popover, Space, Typography } from 'antd'; import { t } from 'i18next'; import { isEmpty, isEqual, isUndefined } from 'lodash'; import React, { Fragment } from 'react'; +import { ReactComponent as IconCommentPlus } from '../assets/svg/add-chat.svg'; +import { ReactComponent as IconComments } from '../assets/svg/comment.svg'; +import { ReactComponent as IconTaskColor } from '../assets/svg/Task-ic.svg'; + import { entityUrlMap } from '../constants/Feeds.constants'; import { ThreadType } from '../generated/entity/feed/thread'; import { EntityReference } from '../generated/entity/teams/user'; import { EntityFieldThreads } from '../interface/feed.interface'; import { getEntityFeedLink } from './EntityUtils'; import { getThreadField } from './FeedUtils'; -import SVGIcons, { Icons } from './SvgUtils'; + +const iconsProps = { + height: 16, + name: 'comments', + width: 16, +}; export const getFieldThreadElement = ( columnName: string, @@ -45,9 +55,10 @@ export const getFieldThreadElement = ( const isTaskType = isEqual(threadType, ThreadType.Task); return !isEmpty(threadValue) ? ( - + + + {isTaskType ? ( + + ) : ( + + )} + + + {threadValue.count} + + + + ) : ( {entityType && entityFqn && entityField && flag && !isTaskType ? ( - + + + + ) : null} );