mirror of
https://github.com/Unleash/unleash.git
synced 2025-07-26 13:48:33 +02:00
fix: SA UI/UX improvements and fixes (#2875)
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.   
This commit is contained in:
parent
eb7e82dff2
commit
7f3ec5acb8
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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>
|
||||
|
@ -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);
|
||||
}}
|
||||
/>
|
||||
|
Loading…
Reference in New Issue
Block a user