yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-09-25 17:04:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Json to ts for tags page (#678)

Browse Source 
* setup profile-setting page and retreat form page

* fixed userTeams type releted issue

* type change for tags page

* removed unwanted comment and centralized UserTeams type

* used UserTeam type wherever it required
This commit is contained in:
Shailesh Parmar 2021-10-06 12:41:53 +05:30 committed by GitHub
parent 5794174fb4
commit d33325d21c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 59 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
catalog-rest-service/src/main/resources/ui/src/AppState.ts
View File

@ -17,14 +17,8 @@
import { makeAutoObservable } from 'mobx';
import { ClientAuth, NewUser } from 'Models';
import {
EntityReference as UserTeams,
User,
} from './generated/entity/teams/user';
type UserTeam = {
displayName?: string;
} & UserTeams;
import { User } from './generated/entity/teams/user';
import { UserTeam } from './interface/team.interface';
class AppState {
users: Array<User> = [];

5
catalog-rest-service/src/main/resources/ui/src/interface/team.interface.ts Normal file
View File

@ -0,0 +1,5 @@
import { EntityReference as UserTeams } from '../generated/entity/teams/user';
export interface UserTeam extends UserTeams {
displayName?: string;
}

2
catalog-rest-service/src/main/resources/ui/src/interface/types.d.ts vendored
View File

@ -14,7 +14,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
declare module 'Models' {
import { TagLabel } from '../generated/type/tagLabel';
@ -295,6 +294,7 @@ declare module 'Models' {
users: Array<UserTeam>;
owns: Array<UserTeam>;
};
export type ServiceCollection = {
name: string;
value: string;

25
catalog-rest-service/src/main/resources/ui/src/pages/tags/Form.tsx
View File

@ -24,17 +24,24 @@ import React, {
useState,
} from 'react';
import MarkdownWithPreview from '../../components/common/editor/MarkdownWithPreview';
import { TagsCategory } from './tagsTypes';
import { CreateTagCategory } from '../../generated/api/tags/createTagCategory';
type CustomTagCategory = {
categoryType: string;
description: CreateTagCategory['description'];
name: CreateTagCategory['name'];
};
type FormProp = {
saveData: (value: {}) => void;
initialData: TagsCategory;
saveData: (value: CreateTagCategory) => void;
initialData: CustomTagCategory;
};
type EditorContentRef = {
getEditorContent: () => string;
};
const Form: React.FC<FormProp> = forwardRef(
({ saveData, initialData }, ref): JSX.Element => {
const [data, setData] = useState<TagsCategory>({
const [data, setData] = useState<CustomTagCategory>({
name: initialData.name,
description: initialData.description,
categoryType: initialData.categoryType,
@ -60,7 +67,7 @@ const Form: React.FC<FormProp> = forwardRef(
useEffect(() => {
saveData({
...data,
...(data as CreateTagCategory),
});
}, [data]);
@ -75,8 +82,8 @@ const Form: React.FC<FormProp> = forwardRef(
</label>
<select
required
className="tw-text-sm tw-appearance-none tw-border tw-border-main
tw-rounded tw-w-full tw-py-2 tw-px-3 tw-text-grey-body tw-leading-tight
className="tw-text-sm tw-appearance-none tw-border tw-border-main
tw-rounded tw-w-full tw-py-2 tw-px-3 tw-text-grey-body tw-leading-tight
focus:tw-outline-none focus:tw-border-focus hover:tw-border-hover tw-h-10 tw-bg-white"
name="categoryType"
value={data.categoryType}
@ -91,8 +98,8 @@ const Form: React.FC<FormProp> = forwardRef(
<input
required
autoComplete="off"
className="tw-text-sm tw-appearance-none tw-border tw-border-main
tw-rounded tw-w-full tw-py-2 tw-px-3 tw-text-grey-body tw-leading-tight
className="tw-text-sm tw-appearance-none tw-border tw-border-main
tw-rounded tw-w-full tw-py-2 tw-px-3 tw-text-grey-body tw-leading-tight
focus:tw-outline-none focus:tw-border-focus hover:tw-border-hover tw-h-10"
name="name"
placeholder="Name"

41
catalog-rest-service/src/main/resources/ui/src/pages/tags/index.tsx
View File

@ -39,19 +39,24 @@ import {
getExplorePathWithSearch,
TITLE_FOR_NON_ADMIN_ACTION,
} from '../../constants/constants';
import {
CreateTagCategory,
TagCategoryType,
} from '../../generated/api/tags/createTagCategory';
import { TagCategory, TagClass } from '../../generated/entity/tags/tagCategory';
import { isEven } from '../../utils/CommonUtils';
import SVGIcons from '../../utils/SvgUtils';
import { getTagCategories, getTaglist } from '../../utils/TagsUtils';
import Form from './Form';
import { Tag, TagsCategory } from './tagsTypes';
// import { Tag, TagsCategory } from './tagsTypes';
const TagsPage = () => {
const [categories, setCategoreis] = useState<Array<TagsCategory>>([]);
const [currentCategory, setCurrentCategory] = useState<TagsCategory>();
const [categories, setCategoreis] = useState<Array<TagCategory>>([]);
const [currentCategory, setCurrentCategory] = useState<TagCategory>();
const [isEditCategory, setIsEditCategory] = useState<boolean>(false);
const [isAddingCategory, setIsAddingCategory] = useState<boolean>(false);
const [isEditTag, setIsEditTag] = useState<boolean>(false);
const [isAddingTag, setIsAddingTag] = useState<boolean>(false);
const [editTag, setEditTag] = useState<Tag>();
const [editTag, setEditTag] = useState<TagClass>();
const [error, setError] = useState<string>('');
const [isLoading, setIsLoading] = useState<boolean>(false);
@ -95,7 +100,7 @@ const TagsPage = () => {
}
};
const createCategory = (data: TagsCategory) => {
const createCategory = (data: CreateTagCategory) => {
createTagCategory(data).then((res: AxiosResponse) => {
if (res.data) {
fetchCategories();
@ -117,7 +122,7 @@ const TagsPage = () => {
setIsEditCategory(false);
};
const createPrimaryTag = (data: TagsCategory) => {
const createPrimaryTag = (data: TagCategory) => {
createTag(currentCategory?.name, {
name: data.name,
description: data.description,
@ -189,7 +194,7 @@ const TagsPage = () => {
</NonAdminAction>
</div>
{categories &&
categories.map((category: TagsCategory) => (
categories.map((category: TagCategory) => (
<div
className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-mb-3 tw-flex tw-justify-between ${currentCategoryTab(
category.name
@ -318,8 +323,8 @@ const TagsPage = () => {
</tr>
</thead>
<tbody className="tw-text-sm" data-testid="table-body">
{currentCategory?.children?.map(
(tag: Tag, index: number) => {
{(currentCategory?.children as TagClass[])?.map(
(tag: TagClass, index: number) => {
return (
<tr
className={`tableBody-row ${
@ -364,7 +369,7 @@ const TagsPage = () => {
<Link
className="link-text tw-align-middle"
to={getUsageCountLink(
tag.fullyQualifiedName
tag.fullyQualifiedName || ''
)}>
{tag.usageCount}
</Link>
@ -388,11 +393,11 @@ const TagsPage = () => {
editable={
editTag?.name === tag.name && !isEditTag
}
selectedTags={tag.associatedTags.map(
(tag) => ({
selectedTags={
tag.associatedTags?.map((tag) => ({
tagFQN: tag,
})
)}
})) || []
}
tagList={
getTaglist(categories) as Array<string>
}
@ -402,7 +407,7 @@ const TagsPage = () => {
onSelectionChange={(tags) => {
handleTagSelection(tags);
}}>
{tag.associatedTags.length ? (
{tag.associatedTags?.length ? (
<button className="tw-opacity-0 tw-ml-1 group-hover:tw-opacity-100 focus:tw-outline-none">
<SVGIcons
alt="edit"
@ -449,10 +454,10 @@ const TagsPage = () => {
initialData={{
name: '',
description: '',
categoryType: 'Descriptive',
categoryType: TagCategoryType.Descriptive,
}}
onCancel={() => setIsAddingCategory(false)}
onSave={(data) => createCategory(data)}
onSave={(data) => createCategory(data as TagCategory)}
/>
)}
{isAddingTag && (
@ -465,7 +470,7 @@ const TagsPage = () => {
categoryType: '',
}}
onCancel={() => setIsAddingTag(false)}
onSave={(data) => createPrimaryTag(data)}
onSave={(data) => createPrimaryTag(data as TagCategory)}
/>
)}
</div>

6
catalog-rest-service/src/main/resources/ui/src/pages/teams/AddUsersModal.tsx
View File

@ -1,13 +1,9 @@
import React, { useState } from 'react';
import { Button } from '../../components/buttons/Button/Button';
import Searchbar from '../../components/common/searchbar/Searchbar';
import { EntityReference as UserTeams } from '../../generated/entity/teams/user';
import { UserTeam } from '../../interface/team.interface';
import UserCard from './UserCard';
type UserTeam = {
displayName?: string;
} & UserTeams;
type Props = {
header: string;
list: Array<UserTeam>;

10
catalog-rest-service/src/main/resources/ui/src/pages/teams/index.tsx
View File

@ -40,20 +40,14 @@ import {
TITLE_FOR_NON_ADMIN_ACTION,
} from '../../constants/constants';
import { Team } from '../../generated/entity/teams/team';
import {
EntityReference as UserTeams,
User,
} from '../../generated/entity/teams/user';
import { User } from '../../generated/entity/teams/user';
import { UserTeam } from '../../interface/team.interface';
import { getCountBadge } from '../../utils/CommonUtils';
import SVGIcons from '../../utils/SvgUtils';
import AddUsersModal from './AddUsersModal';
import Form from './Form';
import UserCard from './UserCard';
type UserTeam = {
displayName?: string;
} & UserTeams;
const TeamsPage = () => {
const [teams, setTeams] = useState<Array<Team>>([]);
const [currentTeam, setCurrentTeam] = useState<Team>();

6
catalog-rest-service/src/main/resources/ui/src/utils/CommonUtils.tsx
View File

@ -7,13 +7,9 @@ import {
LOCALSTORAGE_RECENTLY_VIEWED,
TITLE_FOR_NON_OWNER_ACTION,
} from '../constants/constants';
import { EntityReference as UserTeams } from '../generated/entity/teams/user';
import { UserTeam } from '../interface/team.interface';
import { countBackground } from './styleconstant';
type UserTeam = {
displayName?: string;
} & UserTeams;
export const arraySorterByKey = (
key: string,
sortDescending = false

16
catalog-rest-service/src/main/resources/ui/src/utils/TagsUtils.ts
View File

@ -2,13 +2,13 @@ import { AxiosError, AxiosPromise, AxiosResponse } from 'axios';
import { flatten } from 'lodash';
import { ColumnTags, TableColumn } from 'Models';
import { getCategory, getTags } from '../axiosAPIs/tagAPI';
import { TagsCategory } from '../pages/tags/tagsTypes';
import { TagCategory, TagClass } from '../generated/entity/tags/tagCategory';
export const getTagCategories = async (fields?: Array<string> | string) => {
try {
let listOfCategories: Array<TagsCategory> = [];
let listOfCategories: Array<TagCategory> = [];
const categories = await getTags(fields);
const categoryList = categories.data.data.map((category: TagsCategory) => {
const categoryList = categories.data.data.map((category: TagCategory) => {
return {
name: category.name,
description: category.description,
@ -16,7 +16,7 @@ export const getTagCategories = async (fields?: Array<string> | string) => {
});
if (categoryList.length) {
let promiseArr: Array<AxiosPromise> = [];
promiseArr = categoryList.map((category: TagsCategory) => {
promiseArr = categoryList.map((category: TagCategory) => {
return getCategory(category.name, fields);
});
@ -40,13 +40,13 @@ export const getTagCategories = async (fields?: Array<string> | string) => {
}
};
export const getTaglist = (categories: Array<TagsCategory>): Array<string> => {
const children = categories.map((category: TagsCategory) => {
export const getTaglist = (categories: Array<TagCategory>): Array<string> => {
const children = categories.map((category: TagCategory) => {
return category.children || [];
});
const allChildren = flatten(children);
const tagList = allChildren?.map((tag) => {
return tag?.fullyQualifiedName;
const tagList = (allChildren as unknown as TagClass[])?.map((tag) => {
return tag?.fullyQualifiedName || '';
});
return tagList;