diff --git a/openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/GlossaryTerms.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/GlossaryTerms.test.tsx
index 85c8f92b5a3..2229b88dfe4 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/GlossaryTerms.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/GlossaryTerms.test.tsx
@@ -42,7 +42,7 @@ jest.mock('../../components/tags-container/tags-container', () => {
return jest.fn().mockReturnValue(<>Tags-container component);
});
-jest.mock('../../components/common/description/DescriptionV1', () => {
+jest.mock('../common/description/DescriptionV1', () => {
return jest.fn().mockReturnValue(<>Description component);
});
@@ -58,6 +58,47 @@ jest.mock('../common/rich-text-editor/RichTextEditorPreviewer', () => {
return jest.fn().mockReturnValue(
RichTextEditorPreviewer
);
});
+jest.mock('antd', () => ({
+ Card: jest
+ .fn()
+ .mockImplementation(({ children, ...props }) => (
+
{children}
+ )),
+ Col: jest
+ .fn()
+ .mockImplementation(({ children, ...props }) => (
+
{children}
+ )),
+ Row: jest
+ .fn()
+ .mockImplementation(({ children, ...props }) => (
+
{children}
+ )),
+ Divider: jest
+ .fn()
+ .mockImplementation(({ children, ...props }) => (
+
{children}
+ )),
+ Typography: {
+ Text: jest.fn().mockImplementation(({ children }) =>
{children}
),
+ },
+ Space: jest
+ .fn()
+ .mockImplementation(({ children, ...props }) => (
+
{children}
+ )),
+ Input: jest
+ .fn()
+ .mockImplementation(({ children, ...props }) => (
+
{children}
+ )),
+ Button: jest
+ .fn()
+ .mockImplementation(({ children, ...props }) => (
+
{children}
+ )),
+}));
+
const mockProps = {
assetData: mockedAssetData,
currentPage: 1,
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/GlossaryTermsV1.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/GlossaryTermsV1.component.tsx
index 14692b8e518..533e0f9763f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/GlossaryTermsV1.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/GlossaryTermsV1.component.tsx
@@ -12,9 +12,27 @@
*/
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+ Button,
+ Card,
+ Col,
+ Divider,
+ Input,
+ Row,
+ Space,
+ Typography,
+} from 'antd';
import { AxiosError } from 'axios';
import classNames from 'classnames';
-import { cloneDeep, includes, isEmpty, isEqual, isUndefined } from 'lodash';
+import {
+ cloneDeep,
+ includes,
+ isEmpty,
+ isEqual,
+ isString,
+ isUndefined,
+ kebabCase,
+} from 'lodash';
import {
EntityTags,
FormattedGlossaryTermData,
@@ -40,8 +58,6 @@ import {
getTagOptionsFromFQN,
} from '../../utils/TagsUtils';
import { showErrorToast } from '../../utils/ToastUtils';
-import { Button } from '../buttons/Button/Button';
-import Card from '../common/Card/Card';
import DescriptionV1 from '../common/description/DescriptionV1';
import NonAdminAction from '../common/non-admin-action/NonAdminAction';
import ProfilePicture from '../common/ProfilePicture/ProfilePicture';
@@ -53,6 +69,7 @@ import TagsContainer from '../tags-container/tags-container';
import TagsViewer from '../tags-viewer/tags-viewer';
import Tags from '../tags/tags';
import AssetsTabs from './tabs/AssetsTabs.component';
+const { Text } = Typography;
type Props = {
assetData: GlossaryTermAssets;
@@ -65,6 +82,13 @@ type Props = {
handleUserRedirection?: (name: string) => void;
};
+type SummaryDetailsProps = {
+ title: string;
+ children: React.ReactElement;
+ setShow?: (value: React.SetStateAction
) => void;
+ data?: FormattedGlossaryTermData[] | TermReference[] | string;
+};
+
const GlossaryTermsV1 = ({
assetData,
isHasAccess,
@@ -292,18 +316,6 @@ const GlossaryTermsV1 = ({
}
};
- const handleRemoveSynonym = (_e: React.MouseEvent, synonym: string) => {
- if (!isUndefined(glossaryTerm.synonyms)) {
- const synonyms = glossaryTerm.synonyms.filter((d) => d !== synonym);
- const updatedGlossaryTerm = {
- ...glossaryTerm,
- synonyms: synonyms,
- };
- setSynonyms(synonyms.join(','));
- handleGlossaryTermUpdate(updatedGlossaryTerm);
- }
- };
-
const handleTagContainerClick = () => {
if (!isTagEditable) {
fetchTags();
@@ -344,33 +356,15 @@ const GlossaryTermsV1 = ({
);
};
- const addButton = (title: string, onClick: () => void) => {
+ const addButton = (onClick: () => void) => {
return (
-
-
- );
- };
-
- const editButton = (onClick: () => void) => {
- return (
-
-
+
+
);
};
@@ -430,46 +424,52 @@ const GlossaryTermsV1 = ({
);
};
- const getSynonyms = (synonyms: string) => {
- return !isEmpty(synonyms) ? (
- synonyms
- .split(',')
- .map((synonym) => (
-
- ))
+ const getSynonyms = (synonymsList: string) => {
+ return !isEmpty(synonymsList) ? (
+ synonymsList.split(',').map((synonym, index) => (
+ <>
+ {index > 0 ? , : null}
+ {synonym}
+
+ ))
) : (
<>
);
};
- const relatedTermActionBtn = () => {
- return relatedTerms.length > 0 ? (
- editButton(() => setShowRelatedTermsModal(true))
- ) : (
- <>
- );
- };
-
- const referenceActionBtn = () => {
- return references.length > 0 ? (
- editButton(() => setIsReferencesEditing(true))
- ) : (
- <>
- );
- };
-
- const summaryTab = () => {
+ const SummaryDetail = ({
+ title,
+ children,
+ setShow,
+ data,
+ ...props
+ }: SummaryDetailsProps) => {
return (
-
-
-
+
+
+ {title}
+
+ {addButton(() => setShow && setShow(true))}
+
+
+ {!isString(data) && !isUndefined(data) && data.length > 0 ? (
+
+ {children}
+
+ ) : (
+ {children}
+ )}
+
+ );
+ };
+
+ const SummaryTab = () => {
+ return (
+
+
+
-
-
-
- {relatedTerms.length > 0 ? (
-
- {relatedTerms.map((d, i) => (
-
- {i > 0 && ,}
+
+
+ <>
+ {relatedTerms.map((d, i) => (
+
+ {i > 0 && ,}
+ {
+ onRelatedTermClick?.(d.fullyQualifiedName);
+ }}>
{
- onRelatedTermClick?.(d.fullyQualifiedName);
- }}>
- 32,
- })}
- title={d?.name as string}>
- {d?.name}
-
+ className={classNames('tw-inline-block tw-truncate', {
+ 'tw-w-52': (d?.name as string).length > 32,
+ })}
+ title={d?.name as string}>
+ {d?.name}
-
- ))}
-
+
+
+ ))}
+
+
+
-
-
- {isSynonymsEditing ? (
-
-
-
-
-
-
-
-
-
-
- {getSynonyms(synonyms)}
-
- )}
-
-
+
+ <>
+ {isSynonymsEditing ? (
+
+
+
+
+
+
+
+ ) : (
+ <>{getSynonyms(synonyms)}
+ )}
+
+
+
-
-
- {references && references.length > 0 ? (
-
- {references.map((d, i) => (
+
+ <>
+ {references &&
+ references.length > 0 &&
+ references.map((d, i) => (
- {i > 0 && ,}
+ {i > 0 && ,}
))}
-
-
-
-
+
+
+
+ Reviewer
+
+ }>
{getReviewerTabData()}
-
-
- {activeTab === 1 && summaryTab()}
+ {activeTab === 1 &&
}
{activeTab === 2 && (
void;
onEntityFieldSelect?: (value: string) => void;
}
-
const DescriptionV1 = ({
owner,
hasEditAccess,
@@ -76,7 +76,12 @@ const DescriptionV1 = ({
className="focus:tw-outline-none tw-text-primary"
data-testid="edit-description"
onClick={onDescriptionEdit}>
-
+
) : (
@@ -85,27 +90,25 @@ const DescriptionV1 = ({
};
return (
-
+
+
+ Description
+ {editButton()}
+
-
-
- {description?.trim() ? (
-
- ) : (
- No description
- )}
-
-
-
+ {description?.trim() ? (
+
+ ) : (
+
No description
+ )}
{isEdit && (
) : null}
-
);
};
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/components/glossary.less b/openmetadata-ui/src/main/resources/ui/src/styles/components/glossary.less
new file mode 100644
index 00000000000..9662b023d2a
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/components/glossary.less
@@ -0,0 +1,52 @@
+/*
+ * 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.
+ */
+
+.glossary-card {
+ box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
+}
+
+.m-r-1 {
+ margin: 1rem 0;
+}
+.p-lr-3 {
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+}
+.left-panel-card {
+ border: 1px rgb(221, 227, 234) solid;
+ border-radius: 4px;
+ box-shadow: 1px 1px 8px rgb(0 0 0 / 6%);
+ height: 100%;
+ .header {
+ padding: 0.5rem 0.75rem;
+ }
+ .ant-card-body {
+ padding: 0px;
+ }
+ .ant-card-head {
+ border-bottom: none;
+ margin-bottom: 0.5rem;
+
+ .ant-card-head-title {
+ font-weight: 600;
+ font-size: 1rem;
+ line-height: 1.5rem;
+ }
+ }
+}
+
+.right-card {
+ .ant-card-head-wrapper {
+ padding: 0.37rem 0.13rem;
+ }
+}
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/index.js b/openmetadata-ui/src/main/resources/ui/src/styles/index.js
index c5dfbd5a961..d62429e607c 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/index.js
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/index.js
@@ -14,6 +14,7 @@
import 'tailwindcss/tailwind.css';
import '../fonts/Inter/Inter-VariableFont_slnt,wght.ttf';
import './antd-master.less';
+import './components/glossary.less';
import './components/step.less';
import './fonts.css';
import './myDataDetailsTemp.css';
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx
index 3e5553d219f..ddc61c01f96 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx
@@ -109,9 +109,11 @@ import IconWorkflows from '../assets/svg/ic-workflows.svg';
import IconChevronDown from '../assets/svg/icon-chevron-down.svg';
import IconCopy from '../assets/svg/icon-copy.svg';
import IconDown from '../assets/svg/icon-down.svg';
+import IcEditPrimary from '../assets/svg/icon-edit-primary.svg';
import IconInfoSecondary from '../assets/svg/icon-info.svg';
import IconKey from '../assets/svg/icon-key.svg';
import IconNotNull from '../assets/svg/icon-notnull.svg';
+import IconPlusPrimaryOutlined from '../assets/svg/icon-plus-primary-outlined.svg';
import IconRoleGrey from '../assets/svg/icon-role-grey.svg';
import IconTour from '../assets/svg/icon-tour.svg';
import IconUnique from '../assets/svg/icon-unique.svg';
@@ -271,6 +273,7 @@ export const Icons = {
TOUR: 'tour',
ICON_PLUS: 'icon-plus',
ICON_PLUS_PRIMERY: 'icon-plus-primary',
+ ICON_PLUS_PRIMARY_OUTLINED: 'icon-plus-primary-outlined',
ICON_MINUS: 'icon-minus',
TAG: 'icon-tag',
TAG_GREY: 'icon-tag-grey',
@@ -333,6 +336,7 @@ export const Icons = {
POLICIES: 'policies',
INFO_SECONDARY: 'info-secondary',
ICON_REMOVE: 'icon-remove',
+ IC_EDIT_PRIMARY: 'ic-edit-primary',
};
const SVGIcons: FunctionComponent
= ({
@@ -971,6 +975,14 @@ const SVGIcons: FunctionComponent = ({
case Icons.ICON_REMOVE:
IconComponent = IconRemove;
+ break;
+ case Icons.IC_EDIT_PRIMARY:
+ IconComponent = IcEditPrimary;
+
+ break;
+ case Icons.ICON_PLUS_PRIMARY_OUTLINED:
+ IconComponent = IconPlusPrimaryOutlined;
+
break;
case Icons.INFO_SECONDARY: