yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-10-16 11:18:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Applications minor fixes (#15771)

Browse Source 
* change button icon

* hide uninstall for system apps

* hide popover on clicking on avatar

* show badge count always

* cleanup

* unit tests
This commit is contained in:
Karan Hotchandani 2024-04-03 12:30:10 +05:30 committed by GitHub
parent 72bd411fe5
commit 3bcc908bdf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 281 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-exit.svg Normal file
View File

@ -0,0 +1,11 @@
<svg width="12" height="12" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3259_73448)">
<path d="M5.38242 9.8875H2.52602C1.7093 9.8875 1.04492 9.22297 1.04492 8.40641V1.59047C1.04492 0.77375 1.7093 0.109375 2.52602 0.109375H5.38242C6.19914 0.109375 6.86352 0.77375 6.86352 1.59047V2.81094C6.86352 3.02672 6.68867 3.20156 6.47289 3.20156C6.25711 3.20156 6.08227 3.02672 6.08227 2.81094V1.59047C6.08227 1.20453 5.76836 0.890625 5.38242 0.890625H2.52602C2.14008 0.890625 1.82617 1.20453 1.82617 1.59047V8.40625C1.82617 8.79219 2.14008 9.10609 2.52602 9.10609H5.38242C5.76836 9.10609 6.08227 8.79203 6.08227 8.40625V7.18594C6.08227 6.97016 6.25711 6.79531 6.47289 6.79531C6.68867 6.79531 6.86352 6.97016 6.86352 7.18594V8.40641C6.86352 9.22297 6.19914 9.8875 5.38242 9.8875Z" fill="#0968da" stroke="#0968da" stroke-width="0.5"/>
<path d="M8.64381 6.21015L9.80443 5.30609C9.89943 5.23203 9.95506 5.11828 9.95506 4.99781C9.95506 4.87734 9.89959 4.76359 9.80443 4.68969L8.64381 3.78562C8.47365 3.65297 8.22818 3.68359 8.09568 3.85375C7.96318 4.02406 7.99365 4.26953 8.16381 4.40187L8.4274 4.60719H4.81006C4.59428 4.60719 4.41943 4.78203 4.41943 4.99781C4.41943 5.21359 4.59428 5.38844 4.81006 5.38844H8.42725L8.16381 5.59359C8.0649 5.67062 8.01318 5.78562 8.01318 5.90219C8.01318 5.98609 8.04006 6.07062 8.09568 6.14187C8.22818 6.31219 8.47365 6.3425 8.64381 6.21015Z" fill="#0968da" stroke="#0968da" stroke-width="0.5"/>
</g>
<defs>
<clipPath id="clip0_3259_73448">
<rect width="10" height="10" fill="white" transform="translate(0.5)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

40
openmetadata-ui/src/main/resources/ui/src/components/Settings/Applications/AppDetails/AppDetails.component.tsx
View File

@ -205,24 +205,28 @@ const AppDetails = () => {
},
},
]),
{
label: (
<ManageButtonItemLabel
description={t('message.uninstall-app', {
app: getEntityName(appData),
})}
icon={DeleteIcon}
id="uninstall-button"
name={t('label.uninstall')}
/>
),
key: 'uninstall-button',
onClick: () => {
setShowDeleteModel(true);
setShowActions(false);
setAction(AppAction.UNINSTALL);
},
},
...(appData?.system
? []
: [
{
label: (
<ManageButtonItemLabel
description={t('message.uninstall-app', {
app: getEntityName(appData),
})}
icon={DeleteIcon}
id="uninstall-button"
name={t('label.uninstall')}
/>
),
key: 'uninstall-button',
onClick: () => {
setShowDeleteModel(true);
setShowActions(false);
setAction(AppAction.UNINSTALL);
},
},
]),
];
const onConfigSave = async (data: IChangeEvent) => {

4
openmetadata-ui/src/main/resources/ui/src/components/Suggestions/SuggestionsAlert/suggestions-alert.less
View File

@ -42,3 +42,7 @@
td .suggested-alert-footer {
padding: 4px 12px;
}
.close-suggestion-btn {
gap: 6px;
}

7
openmetadata-ui/src/main/resources/ui/src/components/Suggestions/SuggestionsSlider/SuggestionsSlider.tsx
View File

@ -14,6 +14,7 @@ import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
import { Button, Space, Typography } from 'antd';
import { t } from 'i18next';
import React from 'react';
import { ReactComponent as ExitIcon } from '../../../assets/svg/ic-exit.svg';
import { SuggestionType } from '../../../generated/entity/feed/suggestion';
import AvatarCarousel from '../../common/AvatarCarousel/AvatarCarousel';
import { useSuggestionsContext } from '../SuggestionsProvider/SuggestionsProvider';
@ -35,7 +36,7 @@ const SuggestionsSlider = () => {
</Typography.Text>
<AvatarCarousel />
{selectedUserSuggestions.length > 0 && (
<Space className="slider-btn-container m-l-xss">
<Space className="slider-btn-container m-l-xs">
<Button
ghost
className="text-xs text-primary font-medium"
@ -68,11 +69,11 @@ const SuggestionsSlider = () => {
</Button>
<Button
ghost
className="text-xs text-primary font-medium"
className="text-xs text-primary font-medium close-suggestion-btn flex-center"
data-testid="close-suggestion"
icon={<CloseOutlined />}
type="primary"
onClick={() => onUpdateActiveUser()}>
<ExitIcon />
{t('label.close')}
</Button>
</Space>

55
openmetadata-ui/src/main/resources/ui/src/components/common/AvatarCarousel/AvatarCarousel.test.tsx
View File

@ -14,22 +14,30 @@ import { render, screen } from '@testing-library/react';
import React from 'react';
import AvatarCarousel from './AvatarCarousel';
const suggestions = [
{
id: '1',
description: 'Test suggestion',
createdBy: { id: '1', name: 'Avatar 1', type: 'user' },
entityLink: '<#E::table::sample_data.ecommerce_db.shopify.dim_address>',
},
{
id: '2',
description: 'Test suggestion',
createdBy: { id: '2', name: 'Avatar 2', type: 'user' },
entityLink: '<#E::table::sample_data.ecommerce_db.shopify.dim_address>',
},
];
const suggByUser = new Map([
['Avatar 1', [suggestions[0]]],
['Avatar 2', [suggestions[1]]],
]);
jest.mock('../../Suggestions/SuggestionsProvider/SuggestionsProvider', () => ({
useSuggestionsContext: jest.fn().mockImplementation(() => ({
suggestions: [
{
id: '1',
description: 'Test suggestion',
createdBy: { id: '1', name: 'Avatar 1', type: 'user' },
entityLink: '<#E::table::sample_data.ecommerce_db.shopify.dim_address>',
},
{
id: '2',
description: 'Test suggestion',
createdBy: { id: '2', name: 'Avatar 2', type: 'user' },
entityLink: '<#E::table::sample_data.ecommerce_db.shopify.dim_address>',
},
],
suggestions: suggestions,
suggestionsByUser: suggByUser,
allSuggestionsUsers: [
{ id: '1', name: 'Avatar 1', type: 'user' },
{ id: '2', name: 'Avatar 2', type: 'user' },
@ -51,22 +59,9 @@ jest.mock('../ProfilePicture/ProfilePicture', () =>
);
jest.mock('../../../rest/suggestionsAPI', () => ({
getSuggestionsList: jest.fn().mockImplementation(() =>
Promise.resolve([
{
id: '1',
description: 'Test suggestion',
createdBy: { id: '1', name: 'Avatar 1', type: 'user' },
entityLink: '<#E::table::sample_data.ecommerce_db.shopify.dim_address>',
},
{
id: '2',
description: 'Test suggestion',
createdBy: { id: '1', name: 'Avatar 2', type: 'user' },
entityLink: '<#E::table::sample_data.ecommerce_db.shopify.dim_address>',
},
])
),
getSuggestionsList: jest
.fn()
.mockImplementation(() => Promise.resolve(suggestions)),
}));
describe('AvatarCarousel', () => {

56
openmetadata-ui/src/main/resources/ui/src/components/common/AvatarCarousel/AvatarCarousel.tsx
View File

@ -11,12 +11,16 @@
* limitations under the License.
*/
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { Badge, Button, Carousel } from 'antd';
import classNames from 'classnames';
import React, { useCallback, useEffect, useState } from 'react';
import { Button, Carousel } from 'antd';
import React, {
RefObject,
useCallback,
useEffect,
useRef,
useState,
} from 'react';
import { useSuggestionsContext } from '../../Suggestions/SuggestionsProvider/SuggestionsProvider';
import UserPopOverCard from '../PopOverCard/UserPopOverCard';
import ProfilePicture from '../ProfilePicture/ProfilePicture';
import AvatarCarouselItem from '../AvatarCarouselItem/AvatarCarouselItem';
import './avatar-carousel.less';
interface AvatarCarouselProps {
@ -30,6 +34,7 @@ const AvatarCarousel = ({ showArrows = false }: AvatarCarouselProps) => {
selectedUserSuggestions,
} = useSuggestionsContext();
const [currentSlide, setCurrentSlide] = useState(-1);
const avatarBtnRefs = useRef<RefObject<HTMLButtonElement>[]>([]);
const prevSlide = useCallback(() => {
setCurrentSlide((prev) => (prev === 0 ? avatarList.length - 1 : prev - 1));
@ -39,10 +44,17 @@ const AvatarCarousel = ({ showArrows = false }: AvatarCarouselProps) => {
setCurrentSlide((prev) => (prev === avatarList.length - 1 ? 0 : prev + 1));
}, [avatarList]);
const handleMouseOut = useCallback(() => {
avatarBtnRefs.current.forEach((ref: any) => {
ref.current?.dispatchEvent(new MouseEvent('mouseout', { bubbles: true }));
});
}, [avatarBtnRefs]);
const onProfileClick = useCallback(
(index: number) => {
const activeUser = avatarList[index];
onUpdateActiveUser(activeUser);
handleMouseOut();
},
[avatarList]
);
@ -75,30 +87,16 @@ const AvatarCarousel = ({ showArrows = false }: AvatarCarouselProps) => {
afterChange={(current) => setCurrentSlide(current)}
dots={false}
slidesToShow={avatarList.length < 3 ? avatarList.length : 3}>
{avatarList.map((avatar, index) => {
const isActive = currentSlide === index;
const button = (
<Button
className={classNames('p-0 m-r-xss avatar-item', {
active: isActive,
})}
shape="circle"
onClick={() => setCurrentSlide(index)}>
<ProfilePicture name={avatar.name ?? ''} width="28" />
</Button>
);
return (
<UserPopOverCard key={avatar.id} userName={avatar?.name ?? ''}>
{isActive ? ( // Show Badge only for active item
<Badge count={selectedUserSuggestions.length}>{button}</Badge>
) : (
button
)}
</UserPopOverCard>
);
})}
{avatarList.map((avatar, index) => (
<AvatarCarouselItem
avatar={avatar}
avatarBtnRefs={avatarBtnRefs}
index={index}
isActive={currentSlide === index}
key={avatar.id}
onAvatarClick={setCurrentSlide}
/>
))}
</Carousel>
{showArrows && (

2
openmetadata-ui/src/main/resources/ui/src/components/common/AvatarCarousel/avatar-carousel.less
View File

@ -29,7 +29,7 @@
.avatar-carousel-container {
.slick-slide {
width: 32px !important;
width: 28px !important;
}
.slick-list {
overflow: visible !important;

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

@ -0,0 +1,119 @@
/*
* Copyright 2024 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 { EntityReference } from '../../../generated/entity/type';
import AvatarCarouselItem from './AvatarCarouselItem';
const suggestions = [
{
id: '1',
description: 'Test suggestion',
createdBy: { id: '1', name: 'Avatar 1', type: 'user' },
entityLink: '<#E::table::sample_data.ecommerce_db.shopify.dim_address>',
},
{
id: '2',
description: 'Test suggestion',
createdBy: { id: '2', name: 'Avatar 2', type: 'user' },
entityLink: '<#E::table::sample_data.ecommerce_db.shopify.dim_address>',
},
];
const suggByUser = new Map([
['Avatar 1', [suggestions[0]]],
['Avatar 2', [suggestions[1]]],
]);
jest.mock('../../Suggestions/SuggestionsProvider/SuggestionsProvider', () => ({
useSuggestionsContext: jest.fn().mockImplementation(() => ({
suggestions: suggestions,
suggestionsByUser: suggByUser,
allSuggestionsUsers: [
{ id: '1', name: 'Avatar 1', type: 'user' },
{ id: '2', name: 'Avatar 2', type: 'user' },
],
acceptRejectSuggestion: jest.fn(),
selectedUserSuggestions: [],
onUpdateActiveUser: jest.fn(),
})),
__esModule: true,
default: 'SuggestionsProvider',
}));
jest.mock('../../../rest/suggestionsAPI', () => ({
getSuggestionsList: jest
.fn()
.mockImplementation(() => Promise.resolve(suggestions)),
}));
describe('AvatarCarouselItem', () => {
const avatar: EntityReference = {
id: '1',
name: 'Test Avatar',
type: 'user',
};
const index = 0;
const onAvatarClick = jest.fn();
const avatarBtnRefs = { current: [] };
const isActive = false;
it('renders AvatarCarouselItem with ProfilePicture component', () => {
const { getByTestId } = render(
<AvatarCarouselItem
avatar={avatar}
avatarBtnRefs={avatarBtnRefs}
index={index}
isActive={isActive}
onAvatarClick={onAvatarClick}
/>
);
expect(
getByTestId(`avatar-carousel-item-${avatar.id}`)
).toBeInTheDocument();
});
it('calls onAvatarClick function when clicked', () => {
const { getByTestId } = render(
<AvatarCarouselItem
avatar={avatar}
avatarBtnRefs={avatarBtnRefs}
index={index}
isActive={isActive}
onAvatarClick={onAvatarClick}
/>
);
const button = getByTestId(`avatar-carousel-item-${avatar.id}`);
button.click();
expect(onAvatarClick).toHaveBeenCalledWith(index);
});
it('sets isActive class when isActive is true', () => {
const { getByTestId } = render(
<AvatarCarouselItem
isActive
avatar={avatar}
avatarBtnRefs={avatarBtnRefs}
index={index}
onAvatarClick={onAvatarClick}
/>
);
expect(getByTestId(`avatar-carousel-item-${avatar.id}`)).toHaveClass(
'active'
);
});
});

68
openmetadata-ui/src/main/resources/ui/src/components/common/AvatarCarouselItem/AvatarCarouselItem.tsx Normal file
View File

@ -0,0 +1,68 @@
/*
* Copyright 2024 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 { Badge, Button } from 'antd';
import classNames from 'classnames';
import React, { RefObject, useCallback, useRef } from 'react';
import { EntityReference } from '../../../generated/entity/type';
import { useSuggestionsContext } from '../../Suggestions/SuggestionsProvider/SuggestionsProvider';
import UserPopOverCard from '../PopOverCard/UserPopOverCard';
import ProfilePicture from '../ProfilePicture/ProfilePicture';
interface AvatarCarouselItemProps {
avatar: EntityReference;
index: number;
onAvatarClick: (index: number) => void;
avatarBtnRefs: React.MutableRefObject<RefObject<HTMLButtonElement>[]>;
isActive: boolean;
}
const AvatarCarouselItem = ({
avatar,
index,
avatarBtnRefs,
onAvatarClick,
isActive,
}: AvatarCarouselItemProps) => {
const { suggestionsByUser } = useSuggestionsContext();
const buttonRef = useRef(null);
avatarBtnRefs.current[index] = buttonRef;
const getUserSuggestionsCount = useCallback(
(userName: string) => {
return suggestionsByUser.get(userName) ?? [];
},
[suggestionsByUser]
);
const button = (
<Button
className={classNames('p-0 m-r-xss avatar-item', {
active: isActive,
})}
data-testid={`avatar-carousel-item-${avatar.id}`}
ref={buttonRef}
shape="circle"
onClick={() => onAvatarClick(index)}>
<ProfilePicture name={avatar.name ?? ''} width="28" />
</Button>
);
return (
<UserPopOverCard key={avatar.id} userName={avatar?.name ?? ''}>
<Badge count={getUserSuggestionsCount(avatar?.name ?? '').length}>
{button}
</Badge>
</UserPopOverCard>
);
};
export default AvatarCarouselItem;