yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-08-27 10:26:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix #5837 user profile pic should be displayed wherever we are showing the username (#6580)

Browse Source 
* Fix #5837  user profile pic should be displayed wherever we are showing the username

* Fix unit test

* Addressing review comment

* Fix explore card description.

* Fix unit test

* revert css change

* Fix unit test

* Fix unit test

* Addressing review comment
This commit is contained in:
Sachin Chaurasiya 2022-08-06 14:23:48 +05:30 committed by GitHub
parent 9dacab3970
commit 92ea12dd29
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 123 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
openmetadata-ui/src/main/resources/ui/src/components/common/UserTag/UserTag.component.tsx Normal file
View File

@ -0,0 +1,31 @@
/*
* Copyright 2021 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.
*/
import { Space } from 'antd';
import { isUndefined } from 'lodash';
import React from 'react';
import ProfilePicture from '../ProfilePicture/ProfilePicture';
import { UserTags } from './UserTag.interface';
export const UserTag = ({ id, name }: UserTags) => {
if (isUndefined(id) && isUndefined(name)) {
return null;
}
return (
<Space data-testid="user-tag">
<ProfilePicture id={id} name={name} width="22" />
<span>{name}</span>
</Space>
);
};

16
openmetadata-ui/src/main/resources/ui/src/components/common/UserTag/UserTag.interface.ts Normal file
View File

@ -0,0 +1,16 @@
/*
* Copyright 2021 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.
*/
export interface UserTags {
id: string;
name: string;
}

45
openmetadata-ui/src/main/resources/ui/src/components/common/UserTag/UserTag.test.tsx Normal file
View File

@ -0,0 +1,45 @@
/*
* Copyright 2021 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.
*/
import { render } from '@testing-library/react';
import React from 'react';
import { UserTag } from './UserTag.component';
jest.mock('../ProfilePicture/ProfilePicture', () => {
return jest.fn().mockReturnValue(<div>ProfilePicture</div>);
});
describe('UserTag Component', () => {
it('If valid props being passed to UserTag it should show tag', () => {
const { getByTestId, container } = render(
<UserTag id="test-2176e73" name="test-tag" />
);
const userTag = getByTestId('user-tag');
expect(userTag).toBeInTheDocument();
expect(container).toHaveTextContent('test-tag');
});
it('If inValid props being passed to UserTag it should not show tag', () => {
const { queryByTestId, container } = render(
<UserTag
id={undefined as unknown as string}
name={undefined as unknown as string}
/>
);
expect(queryByTestId('user-tag')).not.toBeInTheDocument();
expect(container).toHaveTextContent('');
});
});

4
openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.test.tsx
View File

@ -21,6 +21,10 @@ import {
import React from 'react';
import DropDownList from './DropDownList';
jest.mock('../common/UserTag/UserTag.component', () => ({
UserTag: jest.fn().mockReturnValue(<div>ProfilePicture</div>),
}));
const dropDownList = [
{
name: 'test 1',

8
openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.tsx
View File

@ -17,6 +17,7 @@ import React, { FunctionComponent, useEffect, useRef, useState } from 'react';
import { useWindowDimensions } from '../../hooks/useWindowDimensions';
import { getCountBadge } from '../../utils/CommonUtils';
import { getTopPosition } from '../../utils/DropDownUtils';
import { UserTag } from '../common/UserTag/UserTag.component';
import Loader from '../Loader/Loader';
import { DropDownListItem, DropDownListProp } from './types';
@ -117,14 +118,15 @@ const DropDownList: FunctionComponent<DropDownListProp> = ({
key={index}
role="menuitem"
onClick={(e) => !item.disabled && onSelect?.(e, item.value)}>
{item.icon}
{/* Spacer if icon is there */}
{item.icon && <span className="tw-p-1" />}
{item.type === 'user' ? (
<UserTag id={item.value as string} name={item.name as string} />
) : (
<p
className={classNames('tw-truncate', widthClass)}
title={item.name as string}>
{item.name}
</p>
)}
</div>
);
};

6
openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignee.less Normal file
View File

@ -0,0 +1,6 @@
.assignee-tag {
display: flex;
align-items: center;
padding: 2px 3px;
margin: 1px 2px;
}

4
openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.test.tsx
View File

@ -50,6 +50,10 @@ const mockProps = {
onChange: jest.fn(),
};
jest.mock('../../../components/common/UserTag/UserTag.component', () => ({
UserTag: jest.fn().mockReturnValue(<div>UserTag</div>),
}));
describe('Test assignees component', () => {
it('Should render the component', async () => {
render(<Assignees {...mockProps} />);

4
openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.tsx
View File

@ -13,7 +13,9 @@
import { Select } from 'antd';
import React, { FC } from 'react';
import { UserTag } from '../../../components/common/UserTag/UserTag.component';
import { Option } from '../TasksPage.interface';
import './Assignee.less';
interface Props {
options: Option[];
@ -55,7 +57,7 @@ const Assignees: FC<Props> = ({ assignees, onSearch, onChange, options }) => {
data-testid="assignee-option"
data-usertype={option.type}
key={option.value}>
{option.label}
<UserTag id={option.value} name={option.label} />
</Option>
))}
</Select>

14
openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TagsTabs.test.tsx
View File

@ -11,7 +11,7 @@
* limitations under the License.
*/
import { fireEvent, render, screen } from '@testing-library/react';
import { render, screen } from '@testing-library/react';
import React from 'react';
import { TagsTabs } from './TagsTabs';
@ -55,16 +55,10 @@ describe('Test Description Tabs Component', () => {
expect(tabs).toHaveLength(tabList.length);
fireEvent.click(tabs[0]);
expect(await screen.findByText('Current')).toBeInTheDocument();
expect(await screen.findByTestId('tags')).toBeInTheDocument();
expect(await screen.findByText('Diff')).toBeInTheDocument();
fireEvent.click(tabs[1]);
expect(await screen.findByTestId('DiffView')).toBeInTheDocument();
fireEvent.click(tabs[2]);
expect(await screen.findByTestId('tagSuggestion')).toBeInTheDocument();
expect(await screen.findByText('New')).toBeInTheDocument();
});
});