From 92ea12dd297b5983d781030df8bbccd57d07577d Mon Sep 17 00:00:00 2001 From: Sachin Chaurasiya Date: Sat, 6 Aug 2022 14:23:48 +0530 Subject: [PATCH] Fix #5837 user profile pic should be displayed wherever we are showing the username (#6580) * 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 --- .../common/UserTag/UserTag.component.tsx | 31 +++++++++++++ .../common/UserTag/UserTag.interface.ts | 16 +++++++ .../common/UserTag/UserTag.test.tsx | 45 +++++++++++++++++++ .../components/dropdown/DropDownList.test.tsx | 4 ++ .../src/components/dropdown/DropDownList.tsx | 18 ++++---- .../src/pages/TasksPage/shared/Assignee.less | 6 +++ .../pages/TasksPage/shared/Assignees.test.tsx | 4 ++ .../src/pages/TasksPage/shared/Assignees.tsx | 4 +- .../pages/TasksPage/shared/TagsTabs.test.tsx | 14 ++---- 9 files changed, 123 insertions(+), 19 deletions(-) create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/common/UserTag/UserTag.component.tsx create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/common/UserTag/UserTag.interface.ts create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/common/UserTag/UserTag.test.tsx create mode 100644 openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignee.less diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/UserTag/UserTag.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/UserTag/UserTag.component.tsx new file mode 100644 index 00000000000..ac76481a3f3 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/UserTag/UserTag.component.tsx @@ -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 ( + + + {name} + + ); +}; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/UserTag/UserTag.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/common/UserTag/UserTag.interface.ts new file mode 100644 index 00000000000..10b6d63706c --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/UserTag/UserTag.interface.ts @@ -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; +} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/UserTag/UserTag.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/UserTag/UserTag.test.tsx new file mode 100644 index 00000000000..c364afd7a7e --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/UserTag/UserTag.test.tsx @@ -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(
ProfilePicture
); +}); + +describe('UserTag Component', () => { + it('If valid props being passed to UserTag it should show tag', () => { + const { getByTestId, container } = render( + + ); + + 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( + + ); + + expect(queryByTestId('user-tag')).not.toBeInTheDocument(); + expect(container).toHaveTextContent(''); + }); +}); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.test.tsx index 583993cad17..063655c3140 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.test.tsx @@ -21,6 +21,10 @@ import { import React from 'react'; import DropDownList from './DropDownList'; +jest.mock('../common/UserTag/UserTag.component', () => ({ + UserTag: jest.fn().mockReturnValue(
ProfilePicture
), +})); + const dropDownList = [ { name: 'test 1', diff --git a/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.tsx b/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.tsx index ea71c63b3ba..db162165e32 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.tsx @@ -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 = ({ key={index} role="menuitem" onClick={(e) => !item.disabled && onSelect?.(e, item.value)}> - {item.icon} - {/* Spacer if icon is there */} - {item.icon && } -

- {item.name} -

+ {item.type === 'user' ? ( + + ) : ( +

+ {item.name} +

+ )} ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignee.less b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignee.less new file mode 100644 index 00000000000..c39585e1391 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignee.less @@ -0,0 +1,6 @@ +.assignee-tag { + display: flex; + align-items: center; + padding: 2px 3px; + margin: 1px 2px; +} diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.test.tsx index 4663d1738ca..fbc6d908999 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.test.tsx @@ -50,6 +50,10 @@ const mockProps = { onChange: jest.fn(), }; +jest.mock('../../../components/common/UserTag/UserTag.component', () => ({ + UserTag: jest.fn().mockReturnValue(
UserTag
), +})); + describe('Test assignees component', () => { it('Should render the component', async () => { render(); diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.tsx index adf4db95ec1..93d56ebd335 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/Assignees.tsx @@ -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 = ({ assignees, onSearch, onChange, options }) => { data-testid="assignee-option" data-usertype={option.type} key={option.value}> - {option.label} + ))} diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TagsTabs.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TagsTabs.test.tsx index 815f5c42201..d81baa1ca97 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TagsTabs.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TagsTabs.test.tsx @@ -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(); }); });