Fix: Tags editor issues (#3362)

This commit is contained in:
darth-coder00 2022-03-11 00:03:56 +05:30 committed by GitHub
parent d7ec9e4ded
commit 08bf0344a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 48 additions and 19 deletions

View File

@ -25,7 +25,11 @@ import { Operation } from '../../generated/entity/policies/policy';
import { LabelType, State } from '../../generated/type/tagLabel';
import UserCard from '../../pages/teams/UserCard';
import SVGIcons from '../../utils/SvgUtils';
import { getTagCategories, getTaglist } from '../../utils/TagsUtils';
import {
getTagCategories,
getTaglist,
getTagOptionsFromFQN,
} from '../../utils/TagsUtils';
import { Button } from '../buttons/Button/Button';
import Avatar from '../common/avatar/Avatar';
import Description from '../common/description/Description';
@ -299,7 +303,7 @@ const GlossaryDetails = ({ isHasAccess, glossary, updateGlossary }: props) => {
selectedTags={getSelectedTags()}
showTags={false}
size="small"
tagList={tagList}
tagList={getTagOptionsFromFQN(tagList)}
type="label"
onCancel={() => {
handleTagSelection();

View File

@ -31,7 +31,11 @@ import {
import { LabelType, State } from '../../generated/type/tagLabel';
import UserCard from '../../pages/teams/UserCard';
import SVGIcons from '../../utils/SvgUtils';
import { getTagCategories, getTaglist } from '../../utils/TagsUtils';
import {
getTagCategories,
getTaglist,
getTagOptionsFromFQN,
} from '../../utils/TagsUtils';
import { Button } from '../buttons/Button/Button';
import Description from '../common/description/Description';
import NonAdminAction from '../common/non-admin-action/NonAdminAction';
@ -72,7 +76,7 @@ const GlossaryTermsV1 = ({
glossaryTerm.synonyms?.join(',') || ''
);
const [references, setReferences] = useState(glossaryTerm.references || []);
const [reviewer, setReviewer] = useState<Array<FormatedUsersData>>([]);
const [reviewer, setReviewer] = useState<Array<FormattedUsersData>>([]);
const [relatedTerms, setRelatedTerms] = useState<FormattedGlossaryTermData[]>(
[]
);
@ -99,7 +103,7 @@ const GlossaryTermsV1 = ({
setShowRelatedTermsModal(false);
};
const handleRelatedTermsSave = (terms: Array<FormatedGlossaryTermData>) => {
const handleRelatedTermsSave = (terms: Array<FormattedGlossaryTermData>) => {
if (!isEqual(terms, relatedTerms)) {
let updatedGlossaryTerm = cloneDeep(glossaryTerm);
const oldTerms = terms.filter((d) => includes(relatedTerms, d));
@ -288,7 +292,7 @@ const GlossaryTermsV1 = ({
useEffect(() => {
if (glossaryTerm.relatedTerms?.length) {
setRelatedTerms(glossaryTerm.relatedTerms as FormatedGlossaryTermData[]);
setRelatedTerms(glossaryTerm.relatedTerms as FormattedGlossaryTermData[]);
}
}, [glossaryTerm.relatedTerms]);
@ -555,7 +559,7 @@ const GlossaryTermsV1 = ({
selectedTags={getSelectedTags()}
showTags={false}
size="small"
tagList={tagList}
tagList={getTagOptionsFromFQN(tagList)}
type="label"
onCancel={() => {
handleTagSelection();

View File

@ -12,12 +12,12 @@
*/
import classNames from 'classnames';
import { FormatedGlossaryTermData } from 'Models';
import { FormattedGlossaryTermData } from 'Models';
import React, { ReactNode } from 'react';
import RichTextEditorPreviewer from '../../common/rich-text-editor/RichTextEditorPreviewer';
type Props = {
data?: FormatedGlossaryTermData[];
data?: FormattedGlossaryTermData[];
addButton?: ReactNode;
};

View File

@ -12,7 +12,6 @@
*/
import React from 'react';
import { TagOption } from 'Models';
export enum DropDownType {
LINK = 'link',
@ -22,7 +21,7 @@ export enum DropDownType {
export type DropDownListItem = {
name: string | React.ReactElement;
value?: string | TagOption;
value?: string;
group?: string;
to?: string;
disabled?: boolean;

View File

@ -20,7 +20,7 @@ export type TagsContainerProps = {
editable?: boolean;
dropDownHorzPosRight?: boolean;
selectedTags: Array<EntityTags>;
tagList: Array<TagOption>;
tagList: Array<TagOption | string>;
type?: TagProps['type'];
showTags?: boolean;
onSelectionChange: (selectedTags: Array<EntityTags>) => void;

View File

@ -13,7 +13,7 @@
import classNames from 'classnames';
import { isNull } from 'lodash';
import { EntityTags } from 'Models';
import { EntityTags, TagOption } from 'Models';
import React, { FunctionComponent, useEffect, useRef, useState } from 'react';
import { withLoader } from '../../hoc/withLoader';
import { Button } from '../buttons/Button/Button';
@ -70,7 +70,7 @@ const TagsContainer: FunctionComponent<TagsContainerProps> = ({
}, [newTag]);
const getTagList = () => {
const newTags = tagList
const newTags = (tagList as TagOption[])
.filter((tag) => {
return !tags.some((selectedTag) => selectedTag.tagFQN === tag.fqn);
})
@ -93,7 +93,9 @@ const TagsContainer: FunctionComponent<TagsContainerProps> = ({
event.stopPropagation();
if (selectedTag) {
setTags((arrTags) => {
const source = tagList.find((tag) => tag.fqn === selectedTag)?.source;
const source = (tagList as TagOption[]).find(
(tag) => tag.fqn === selectedTag
)?.source;
return [...arrTags, { tagFQN: selectedTag, source }];
});

View File

@ -31,6 +31,7 @@ const Tags: FunctionComponent<TagProps> = ({
const baseStyle = tagStyles.base;
const layoutStyles = tagStyles[type];
const textBaseStyle = tagStyles.text.base;
const textLayoutStyles = tagStyles.text[type] || tagStyles.text.default;
const textEditStyles = editable ? tagStyles.text.editable : '';
const getTagString = (tag: string) => {
@ -42,7 +43,12 @@ const Tags: FunctionComponent<TagProps> = ({
<span
className={classNames(baseStyle, layoutStyles, className)}
data-testid="tags">
<span className={classNames(textBaseStyle, textEditStyles)}>
<span
className={classNames(
textBaseStyle,
textLayoutStyles,
textEditStyles
)}>
{`${startWith}${tag}`}
</span>
{editable && isRemovable && (

View File

@ -54,7 +54,11 @@ import {
isUrlFriendlyName,
} from '../../utils/CommonUtils';
import SVGIcons from '../../utils/SvgUtils';
import { getTagCategories, getTaglist } from '../../utils/TagsUtils';
import {
getTagCategories,
getTaglist,
getTagOptionsFromFQN,
} from '../../utils/TagsUtils';
import Form from './Form';
// import { Tag, TagsCategory } from './tagsTypes';
const TagsPage = () => {
@ -73,9 +77,11 @@ const TagsPage = () => {
const [errorDataTag, setErrorDataTag] = useState<FormErrorData>();
const getTags = useCallback(() => {
return getTaglist(categories).filter(
const filteredTags = getTaglist(categories).filter(
(tag) => editTag?.fullyQualifiedName !== tag
);
return getTagOptionsFromFQN(filteredTags);
}, [currentCategory, editTag]);
const fetchCategories = () => {

View File

@ -13,7 +13,7 @@
import { AxiosError, AxiosPromise, AxiosResponse } from 'axios';
import { flatten } from 'lodash';
import { EntityTags, TableColumn } from 'Models';
import { EntityTags, TableColumn, TagOption } from 'Models';
import { getCategory, getTags } from '../axiosAPIs/tagAPI';
import { TagCategory, TagClass } from '../generated/entity/tags/tagCategory';
@ -86,3 +86,11 @@ export const getTableTags = (
return uniqueTags;
};
export const getTagOptionsFromFQN = (
tagFQNs: Array<string>
): Array<TagOption> => {
return tagFQNs.map((tag) => {
return { fqn: tag, source: 'Tag' };
});
};