yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-09-26 17:34:41 +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 { makeAutoObservable } from 'mobx';
import { ClientAuth, NewUser } from 'Models'; import { ClientAuth, NewUser } from 'Models';
import { import { User } from './generated/entity/teams/user';
EntityReference as UserTeams, import { UserTeam } from './interface/team.interface';
User,
} from './generated/entity/teams/user';
type UserTeam = {
displayName?: string;
} & UserTeams;
class AppState { class AppState {
users: Array<User> = []; 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 * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
declare module 'Models' { declare module 'Models' {
import { TagLabel } from '../generated/type/tagLabel'; import { TagLabel } from '../generated/type/tagLabel';
@ -295,6 +294,7 @@ declare module 'Models' {
users: Array<UserTeam>; users: Array<UserTeam>;
owns: Array<UserTeam>; owns: Array<UserTeam>;
}; };
export type ServiceCollection = { export type ServiceCollection = {
name: string; name: string;
value: string; value: string;

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

@ -24,17 +24,24 @@ import React, {
useState, useState,
} from 'react'; } from 'react';
import MarkdownWithPreview from '../../components/common/editor/MarkdownWithPreview'; 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 = { type FormProp = {
saveData: (value: {}) => void; saveData: (value: CreateTagCategory) => void;
initialData: TagsCategory; initialData: CustomTagCategory;
}; };
type EditorContentRef = { type EditorContentRef = {
getEditorContent: () => string; getEditorContent: () => string;
}; };
const Form: React.FC<FormProp> = forwardRef( const Form: React.FC<FormProp> = forwardRef(
({ saveData, initialData }, ref): JSX.Element => { ({ saveData, initialData }, ref): JSX.Element => {
const [data, setData] = useState<TagsCategory>({ const [data, setData] = useState<CustomTagCategory>({
name: initialData.name, name: initialData.name,
description: initialData.description, description: initialData.description,
categoryType: initialData.categoryType, categoryType: initialData.categoryType,
@ -60,7 +67,7 @@ const Form: React.FC<FormProp> = forwardRef(
useEffect(() => { useEffect(() => {
saveData({ saveData({
...data, ...(data as CreateTagCategory),
}); });
}, [data]); }, [data]);

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

@ -39,19 +39,24 @@ import {
getExplorePathWithSearch, getExplorePathWithSearch,
TITLE_FOR_NON_ADMIN_ACTION, TITLE_FOR_NON_ADMIN_ACTION,
} from '../../constants/constants'; } 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 { isEven } from '../../utils/CommonUtils';
import SVGIcons from '../../utils/SvgUtils'; import SVGIcons from '../../utils/SvgUtils';
import { getTagCategories, getTaglist } from '../../utils/TagsUtils'; import { getTagCategories, getTaglist } from '../../utils/TagsUtils';
import Form from './Form'; import Form from './Form';
import { Tag, TagsCategory } from './tagsTypes'; // import { Tag, TagsCategory } from './tagsTypes';
const TagsPage = () => { const TagsPage = () => {
const [categories, setCategoreis] = useState<Array<TagsCategory>>([]); const [categories, setCategoreis] = useState<Array<TagCategory>>([]);
const [currentCategory, setCurrentCategory] = useState<TagsCategory>(); const [currentCategory, setCurrentCategory] = useState<TagCategory>();
const [isEditCategory, setIsEditCategory] = useState<boolean>(false); const [isEditCategory, setIsEditCategory] = useState<boolean>(false);
const [isAddingCategory, setIsAddingCategory] = useState<boolean>(false); const [isAddingCategory, setIsAddingCategory] = useState<boolean>(false);
const [isEditTag, setIsEditTag] = useState<boolean>(false); const [isEditTag, setIsEditTag] = useState<boolean>(false);
const [isAddingTag, setIsAddingTag] = 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 [error, setError] = useState<string>('');
const [isLoading, setIsLoading] = useState<boolean>(false); 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) => { createTagCategory(data).then((res: AxiosResponse) => {
if (res.data) { if (res.data) {
fetchCategories(); fetchCategories();
@ -117,7 +122,7 @@ const TagsPage = () => {
setIsEditCategory(false); setIsEditCategory(false);
}; };
const createPrimaryTag = (data: TagsCategory) => { const createPrimaryTag = (data: TagCategory) => {
createTag(currentCategory?.name, { createTag(currentCategory?.name, {
name: data.name, name: data.name,
description: data.description, description: data.description,
@ -189,7 +194,7 @@ const TagsPage = () => {
</NonAdminAction> </NonAdminAction>
</div> </div>
{categories && {categories &&
categories.map((category: TagsCategory) => ( categories.map((category: TagCategory) => (
<div <div
className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-mb-3 tw-flex tw-justify-between ${currentCategoryTab( className={`tw-group tw-text-grey-body tw-cursor-pointer tw-text-body tw-mb-3 tw-flex tw-justify-between ${currentCategoryTab(
category.name category.name
@ -318,8 +323,8 @@ const TagsPage = () => {
</tr> </tr>
</thead> </thead>
<tbody className="tw-text-sm" data-testid="table-body"> <tbody className="tw-text-sm" data-testid="table-body">
{currentCategory?.children?.map( {(currentCategory?.children as TagClass[])?.map(
(tag: Tag, index: number) => { (tag: TagClass, index: number) => {
return ( return (
<tr <tr
className={`tableBody-row ${ className={`tableBody-row ${
@ -364,7 +369,7 @@ const TagsPage = () => {
<Link <Link
className="link-text tw-align-middle" className="link-text tw-align-middle"
to={getUsageCountLink( to={getUsageCountLink(
tag.fullyQualifiedName tag.fullyQualifiedName || ''
)}> )}>
{tag.usageCount} {tag.usageCount}
</Link> </Link>
@ -388,11 +393,11 @@ const TagsPage = () => {
editable={ editable={
editTag?.name === tag.name && !isEditTag editTag?.name === tag.name && !isEditTag
} }
selectedTags={tag.associatedTags.map( selectedTags={
(tag) => ({ tag.associatedTags?.map((tag) => ({
tagFQN: tag, tagFQN: tag,
}) })) || []
)} }
tagList={ tagList={
getTaglist(categories) as Array<string> getTaglist(categories) as Array<string>
} }
@ -402,7 +407,7 @@ const TagsPage = () => {
onSelectionChange={(tags) => { onSelectionChange={(tags) => {
handleTagSelection(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"> <button className="tw-opacity-0 tw-ml-1 group-hover:tw-opacity-100 focus:tw-outline-none">
<SVGIcons <SVGIcons
alt="edit" alt="edit"
@ -449,10 +454,10 @@ const TagsPage = () => {
initialData={{ initialData={{
name: '', name: '',
description: '', description: '',
categoryType: 'Descriptive', categoryType: TagCategoryType.Descriptive,
}} }}
onCancel={() => setIsAddingCategory(false)} onCancel={() => setIsAddingCategory(false)}
onSave={(data) => createCategory(data)} onSave={(data) => createCategory(data as TagCategory)}
/> />
)} )}
{isAddingTag && ( {isAddingTag && (
@ -465,7 +470,7 @@ const TagsPage = () => {
categoryType: '', categoryType: '',
}} }}
onCancel={() => setIsAddingTag(false)} onCancel={() => setIsAddingTag(false)}
onSave={(data) => createPrimaryTag(data)} onSave={(data) => createPrimaryTag(data as TagCategory)}
/> />
)} )}
</div> </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 React, { useState } from 'react';
import { Button } from '../../components/buttons/Button/Button'; import { Button } from '../../components/buttons/Button/Button';
import Searchbar from '../../components/common/searchbar/Searchbar'; 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'; import UserCard from './UserCard';
type UserTeam = {
displayName?: string;
} & UserTeams;
type Props = { type Props = {
header: string; header: string;
list: Array<UserTeam>; 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, TITLE_FOR_NON_ADMIN_ACTION,
} from '../../constants/constants'; } from '../../constants/constants';
import { Team } from '../../generated/entity/teams/team'; import { Team } from '../../generated/entity/teams/team';
import { import { User } from '../../generated/entity/teams/user';
EntityReference as UserTeams, import { UserTeam } from '../../interface/team.interface';
User,
} from '../../generated/entity/teams/user';
import { getCountBadge } from '../../utils/CommonUtils'; import { getCountBadge } from '../../utils/CommonUtils';
import SVGIcons from '../../utils/SvgUtils'; import SVGIcons from '../../utils/SvgUtils';
import AddUsersModal from './AddUsersModal'; import AddUsersModal from './AddUsersModal';
import Form from './Form'; import Form from './Form';
import UserCard from './UserCard'; import UserCard from './UserCard';
type UserTeam = {
displayName?: string;
} & UserTeams;
const TeamsPage = () => { const TeamsPage = () => {
const [teams, setTeams] = useState<Array<Team>>([]); const [teams, setTeams] = useState<Array<Team>>([]);
const [currentTeam, setCurrentTeam] = useState<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, LOCALSTORAGE_RECENTLY_VIEWED,
TITLE_FOR_NON_OWNER_ACTION, TITLE_FOR_NON_OWNER_ACTION,
} from '../constants/constants'; } from '../constants/constants';
import { EntityReference as UserTeams } from '../generated/entity/teams/user'; import { UserTeam } from '../interface/team.interface';
import { countBackground } from './styleconstant'; import { countBackground } from './styleconstant';
type UserTeam = {
displayName?: string;
} & UserTeams;
export const arraySorterByKey = ( export const arraySorterByKey = (
key: string, key: string,
sortDescending = false 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 { flatten } from 'lodash';
import { ColumnTags, TableColumn } from 'Models'; import { ColumnTags, TableColumn } from 'Models';
import { getCategory, getTags } from '../axiosAPIs/tagAPI'; 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) => { export const getTagCategories = async (fields?: Array<string> | string) => {
try { try {
let listOfCategories: Array<TagsCategory> = []; let listOfCategories: Array<TagCategory> = [];
const categories = await getTags(fields); const categories = await getTags(fields);
const categoryList = categories.data.data.map((category: TagsCategory) => { const categoryList = categories.data.data.map((category: TagCategory) => {
return { return {
name: category.name, name: category.name,
description: category.description, description: category.description,
@ -16,7 +16,7 @@ export const getTagCategories = async (fields?: Array<string> | string) => {
}); });
if (categoryList.length) { if (categoryList.length) {
let promiseArr: Array<AxiosPromise> = []; let promiseArr: Array<AxiosPromise> = [];
promiseArr = categoryList.map((category: TagsCategory) => { promiseArr = categoryList.map((category: TagCategory) => {
return getCategory(category.name, fields); 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> => { export const getTaglist = (categories: Array<TagCategory>): Array<string> => {
const children = categories.map((category: TagsCategory) => { const children = categories.map((category: TagCategory) => {
return category.children || []; return category.children || [];
}); });
const allChildren = flatten(children); const allChildren = flatten(children);
const tagList = allChildren?.map((tag) => { const tagList = (allChildren as unknown as TagClass[])?.map((tag) => {
return tag?.fullyQualifiedName; return tag?.fullyQualifiedName || '';
}); });
return tagList; return tagList;