Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-26 13:48:33 +02:00
Code Issues Projects Releases Wiki Activity

fix: SA UI/UX improvements and fixes (#2875)

Browse Source 
https://linear.app/unleash/issue/2-559/check-if-uiux-and-overall-design-looks-correct

We're happy with the overall design and behaviour for a first iteration,
only identified these small changes for now.


![image](https://user-images.githubusercontent.com/14320932/211798037-7b6a74c5-fbc9-434a-a848-9efd00094a9c.png)


![image](https://user-images.githubusercontent.com/14320932/211798093-44db9330-f767-4790-964a-e94f8cf3ed87.png)


![image](https://user-images.githubusercontent.com/14320932/211798148-9a1ddb5a-5564-47f4-aeed-2857ac186896.png)
This commit is contained in:
Nuno Góis 2023-01-11 15:08:50 +00:00 committed by GitHub
parent eb7e82dff2
commit 7f3ec5acb8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 50 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountDeleteDialog/ServiceAccountDeleteDialog.tsx
View File

@ -25,6 +25,13 @@ export const ServiceAccountDeleteDialog = ({
setOpen,
onConfirm,
}: IServiceAccountDeleteDialogProps) => {
const deleteMessage = (
<>
You are about to delete service account:{' '}
<strong>{serviceAccount?.name}</strong>
</>
);
return (
<Dialogue
title="Delete service account?"
@ -36,15 +43,16 @@ export const ServiceAccountDeleteDialog = ({
setOpen(false);
}}
>
<Alert severity="error">
Deleting this service account may break any existing
implementations currently using it.
</Alert>
<ConditionallyRender
condition={Boolean(serviceAccount?.tokens.length)}
show={
<>
<StyledLabel>Service account tokens</StyledLabel>
<Alert severity="error">
Deleting this service account may break any existing
implementations currently using it.
</Alert>
<StyledLabel>{deleteMessage}</StyledLabel>
<StyledLabel>Service account tokens:</StyledLabel>
<StyledTableContainer>
<ServiceAccountTokens
serviceAccount={serviceAccount!}
@ -53,11 +61,8 @@ export const ServiceAccountDeleteDialog = ({
</StyledTableContainer>
</>
}
elseShow={<p>{deleteMessage}</p>}
/>
<StyledLabel>
You are about to delete service account:{' '}
<strong>{serviceAccount?.name}</strong>
</StyledLabel>
</Dialogue>
);
};

19
frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountTokensCell/ServiceAccountTokensCell.tsx
View File

@ -5,6 +5,7 @@ import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
import { Highlighter } from 'component/common/Highlighter/Highlighter';
import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
import { IServiceAccount } from 'interfaces/service-account';
import { LinkCell } from 'component/common/Table/cells/LinkCell/LinkCell';
const StyledItem = styled(Typography)(({ theme }) => ({
fontSize: theme.fontSizes.smallerBody,
@ -17,27 +18,27 @@ const StyledLink = styled(Link, {
}));
interface IServiceAccountTokensCellProps {
row: {
original: IServiceAccount;
};
serviceAccount: IServiceAccount;
value: string;
onCreateToken: () => void;
}
export const ServiceAccountTokensCell: VFC<IServiceAccountTokensCellProps> = ({
row,
serviceAccount,
value,
onCreateToken,
}) => {
const { searchQuery } = useSearchHighlightContext();
if (!row.original.tokens || row.original.tokens.length === 0)
return <TextCell />;
if (!serviceAccount.tokens || serviceAccount.tokens.length === 0)
return <LinkCell title="Create token" onClick={onCreateToken} />;
return (
<TextCell>
<HtmlTooltip
title={
<>
{row.original.tokens?.map(({ id, description }) => (
{serviceAccount.tokens?.map(({ id, description }) => (
<StyledItem key={id}>
<Highlighter search={searchQuery}>
{description}
@ -54,9 +55,9 @@ export const ServiceAccountTokensCell: VFC<IServiceAccountTokensCellProps> = ({
value.toLowerCase().includes(searchQuery.toLowerCase())
}
>
{row.original.tokens?.length === 1
{serviceAccount.tokens?.length === 1
? '1 token'
: `${row.original.tokens?.length} tokens`}
: `${serviceAccount.tokens?.length} tokens`}
</StyledLink>
</HtmlTooltip>
</TextCell>

34
frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountsTable.tsx
View File

@ -65,9 +65,9 @@ export const ServiceAccountsTable = () => {
{
Header: 'Avatar',
accessor: 'imageUrl',
Cell: ({ row: { original: user } }: any) => (
Cell: ({ row: { original: serviceAccount } }: any) => (
<TextCell>
<UserAvatar user={user} />
<UserAvatar user={serviceAccount} />
</TextCell>
),
disableSortBy: true,
@ -78,8 +78,11 @@ export const ServiceAccountsTable = () => {
Header: 'Name',
accessor: (row: any) => row.name || '',
minWidth: 200,
Cell: ({ row: { original: user } }: any) => (
<HighlightCell value={user.name} subtitle={user.username} />
Cell: ({ row: { original: serviceAccount } }: any) => (
<HighlightCell
value={serviceAccount.name}
subtitle={serviceAccount.username}
/>
),
searchable: true,
},
@ -98,7 +101,22 @@ export const ServiceAccountsTable = () => {
row.tokens
?.map(({ description }) => description)
.join('\n') || '',
Cell: ServiceAccountTokensCell,
Cell: ({
row: { original: serviceAccount },
value,
}: {
row: { original: IServiceAccount };
value: string;
}) => (
<ServiceAccountTokensCell
serviceAccount={serviceAccount}
value={value}
onCreateToken={() => {
setSelectedServiceAccount(serviceAccount);
setModalOpen(true);
}}
/>
),
searchable: true,
},
{
@ -126,14 +144,14 @@ export const ServiceAccountsTable = () => {
Header: 'Actions',
id: 'Actions',
align: 'center',
Cell: ({ row: { original: user } }: any) => (
Cell: ({ row: { original: serviceAccount } }: any) => (
<ServiceAccountsActionsCell
onEdit={() => {
setSelectedServiceAccount(user);
setSelectedServiceAccount(serviceAccount);
setModalOpen(true);
}}
onDelete={() => {
setSelectedServiceAccount(user);
setSelectedServiceAccount(serviceAccount);
setDeleteOpen(true);
}}
/>