Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-05-31 01:16:01 +02:00
Code Issues Projects Releases Wiki Activity

refactor: port tokens list to react-table (#1026)

Browse Source 
* refactor: extract ApiTokenDocs component

* refactor: extract CreateApiTokenButton component

* refactor: extract RemoveApiTokenButton component

* refactor: extract CopyApiTokenButton component

* refactor: port tokens list to react-table

* refactor: remove unused imports

* fix: api token table default sort order

* fix: updates to table of api tokens

* fix: add highlighting when searching

Co-authored-by: Tymoteusz Czech <tymek+gpg@getunleash.ai>
Co-authored-by: Nuno Góis <github@nunogois.com>
This commit is contained in:
olav 2022-05-27 09:48:01 +02:00 committed by GitHub
parent 504a4af274
commit 25c25c9206
17 changed files with 423 additions and 415 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx
View File

@ -1,11 +1,10 @@
import { useMemo } from 'react';
import { Table, TableBody, TableCell, TableRow } from 'component/common/Table';
import { useMemo, useState, useCallback } from 'react';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { PageContent } from 'component/common/PageContent/PageContent';
import useAddons from 'hooks/api/getters/useAddons/useAddons';
import useToast from 'hooks/useToast';
import useAddonsApi from 'hooks/api/actions/useAddonsApi/useAddonsApi';
import { useState, useCallback } from 'react';
import { IAddon } from 'interfaces/addons';
import { Dialogue } from 'component/common/Dialogue/Dialogue';
import { formatUnknownError } from 'utils/formatUnknownError';

27
frontend/src/component/admin/apiToken/ApiTokenDocs/ApiTokenDocs.tsx Normal file
View File

@ -0,0 +1,27 @@
import { Alert } from '@mui/material';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
export const ApiTokenDocs = () => {
const { uiConfig } = useUiConfig();
return (
<Alert severity="info">
<p>
Read the{' '}
<a
href="https://docs.getunleash.io/docs"
target="_blank"
rel="noreferrer"
>
Getting started guide
</a>{' '}
to learn how to connect to the Unleash API from your application
or programmatically. Please note it can take up to 1 minute
before a new API key is activated.
</p>
<br />
<strong>API URL: </strong>{' '}
<pre style={{ display: 'inline' }}>{uiConfig.unleashUrl}/api/</pre>
</Alert>
);
};

2
frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.tsx
View File

@ -7,7 +7,7 @@ import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
import Input from 'component/common/Input/Input';
import { useStyles } from './ApiTokenForm.styles';
import { SelectProjectInput } from './SelectProjectInput/SelectProjectInput';
import { ApiTokenFormErrorType } from '../hooks/useApiTokenForm';
import { ApiTokenFormErrorType } from 'component/admin/apiToken/ApiTokenForm/useApiTokenForm';
interface IApiTokenFormProps {
username: string;
type: string;

0
frontend/src/component/admin/apiToken/hooks/useApiTokenForm.ts → frontend/src/component/admin/apiToken/ApiTokenForm/useApiTokenForm.ts
View File

45
frontend/src/component/admin/apiToken/ApiTokenList/ApiTokenList.styles.ts
View File

@ -1,45 +0,0 @@
import { makeStyles } from 'tss-react/mui';
export const useStyles = makeStyles()(theme => ({
tableRow: {
'&:hover': {
backgroundColor: theme.palette.grey[200],
},
},
container: {
display: 'flex',
flexWrap: 'wrap',
[theme.breakpoints.down('sm')]: {
justifyContent: 'center',
},
},
center: {
textAlign: 'center',
},
actionsContainer: {
textAlign: 'center',
display: 'flex-inline',
flexWrap: 'nowrap',
},
hideSM: {
[theme.breakpoints.down('md')]: {
display: 'none',
},
},
hideMD: {
[theme.breakpoints.down('lg')]: {
display: 'none',
},
},
hideXS: {
[theme.breakpoints.down('sm')]: {
display: 'none',
},
},
token: {
textAlign: 'left',
[theme.breakpoints.up('sm')]: {
display: 'none',
},
},
}));

264
frontend/src/component/admin/apiToken/ApiTokenList/ApiTokenList.tsx
View File

@ -1,264 +0,0 @@
import { useContext, useState } from 'react';
import {
Box,
IconButton,
Table,
TableBody,
TableCell,
TableHead,
TableRow,
Tooltip,
} from '@mui/material';
import AccessContext from 'contexts/AccessContext';
import useToast from 'hooks/useToast';
import useLoading from 'hooks/useLoading';
import useApiTokens from 'hooks/api/getters/useApiTokens/useApiTokens';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import useApiTokensApi from 'hooks/api/actions/useApiTokensApi/useApiTokensApi';
import ApiError from 'component/common/ApiError/ApiError';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { DELETE_API_TOKEN } from 'component/providers/AccessProvider/permissions';
import { Delete, FileCopy } from '@mui/icons-material';
import { Dialogue } from 'component/common/Dialogue/Dialogue';
import copy from 'copy-to-clipboard';
import { useLocationSettings } from 'hooks/useLocationSettings';
import { formatDateYMD } from 'utils/formatDate';
import { ProjectsList } from './ProjectsList/ProjectsList';
import { useStyles } from './ApiTokenList.styles';
interface IApiToken {
createdAt: Date;
username: string;
secret: string;
type: string;
project?: string;
projects?: string | string[];
environment: string;
}
export const ApiTokenList = () => {
const { classes: styles } = useStyles();
const { hasAccess } = useContext(AccessContext);
const { uiConfig } = useUiConfig();
const [showDelete, setShowDelete] = useState(false);
const [delToken, setDeleteToken] = useState<IApiToken>();
const { locationSettings } = useLocationSettings();
const { setToastData } = useToast();
const { tokens, loading, refetch, error } = useApiTokens();
const { deleteToken } = useApiTokensApi();
const ref = useLoading(loading);
const renderError = () => {
return <ApiError onClick={refetch} text="Error fetching api tokens" />;
};
const copyToken = (value: string) => {
if (copy(value)) {
setToastData({
type: 'success',
title: 'Token copied',
text: `Token is copied to clipboard`,
});
}
};
const onDeleteToken = async () => {
if (delToken) {
await deleteToken(delToken.secret);
}
setDeleteToken(undefined);
setShowDelete(false);
refetch();
setToastData({
type: 'success',
title: 'Deleted successfully',
text: 'Successfully deleted API token.',
});
};
const renderApiTokens = (tokens: IApiToken[]) => {
return (
<Table size="small">
<TableHead>
<TableRow>
<TableCell className={styles.hideSM}>Created</TableCell>
<TableCell className={styles.hideSM}>
Username
</TableCell>
<TableCell
className={`${styles.center} ${styles.hideXS}`}
>
Type
</TableCell>
<ConditionallyRender
condition={uiConfig.flags.E}
show={
<>
<TableCell
className={`${styles.center} ${styles.hideXS}`}
>
Projects
</TableCell>
<TableCell
className={`${styles.center} ${styles.hideXS}`}
>
Environment
</TableCell>
</>
}
/>
<TableCell className={styles.hideMD}>Secret</TableCell>
<TableCell className={styles.token}>Token</TableCell>
<TableCell className={styles.actionsContainer}>
Actions
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{tokens.map(item => {
return (
<TableRow
key={item.secret}
className={styles.tableRow}
>
<TableCell
align="left"
className={styles.hideSM}
>
{formatDateYMD(
item.createdAt,
locationSettings.locale
)}
</TableCell>
<TableCell
align="left"
className={styles.hideSM}
>
{item.username}
</TableCell>
<TableCell
className={`${styles.center} ${styles.hideXS}`}
>
{item.type}
</TableCell>
<ConditionallyRender
condition={uiConfig.flags.E}
show={
<>
<TableCell
className={`${styles.center} ${styles.hideXS}`}
>
<ProjectsList
project={item.project}
projects={item.projects}
/>
</TableCell>
<TableCell
className={`${styles.center} ${styles.hideXS}`}
>
{item.environment}
</TableCell>
<TableCell className={styles.token}>
<b>Type:</b> {item.type}
<br />
<b>Env:</b> {item.environment}
<br />
<b>Projects:</b>{' '}
<ProjectsList
project={item.project}
projects={item.projects}
/>
</TableCell>
</>
}
elseShow={
<>
<TableCell className={styles.token}>
<b>Type:</b> {item.type}
<br />
<b>Username:</b> {item.username}
</TableCell>
</>
}
/>
<TableCell className={styles.hideMD}>
<Box
component="span"
display="inline-block"
width="250px"
>
************************************
</Box>
</TableCell>
<TableCell className={styles.actionsContainer}>
<Tooltip title="Copy token" arrow>
<IconButton
onClick={() => {
copyToken(item.secret);
}}
size="large"
>
<FileCopy />
</IconButton>
</Tooltip>
<ConditionallyRender
condition={hasAccess(DELETE_API_TOKEN)}
show={
<Tooltip title="Delete token" arrow>
<IconButton
onClick={() => {
setDeleteToken(item);
setShowDelete(true);
}}
size="large"
>
<Delete />
</IconButton>
</Tooltip>
}
/>
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
);
};
return (
<div ref={ref}>
<ConditionallyRender condition={error} show={renderError()} />
<div className={styles.container}>
<ConditionallyRender
condition={tokens.length < 1 && !loading}
show={<div>No API tokens available.</div>}
elseShow={renderApiTokens(tokens)}
/>
</div>
<Dialogue
open={showDelete}
onClick={onDeleteToken}
onClose={() => {
setShowDelete(false);
setDeleteToken(undefined);
}}
title="Confirm deletion"
>
<div>
Are you sure you want to delete the following API token?
<br />
<ul>
<li>
<strong>username</strong>:{' '}
<code>{delToken?.username}</code>
</li>
<li>
<strong>type</strong>: <code>{delToken?.type}</code>
</li>
</ul>
</div>
</Dialogue>
</div>
);
};

7
frontend/src/component/admin/apiToken/ApiTokenPage/ApiTokenPage.styles.ts
View File

@ -1,7 +0,0 @@
import { makeStyles } from 'tss-react/mui';
export const useStyles = makeStyles()(theme => ({
infoBoxContainer: {
marginBottom: 40,
},
}));

73
frontend/src/component/admin/apiToken/ApiTokenPage/ApiTokenPage.tsx
View File

@ -1,77 +1,18 @@
import { useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button } from '@mui/material';
import AccessContext from 'contexts/AccessContext';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { PageContent } from 'component/common/PageContent/PageContent';
import { PageHeader } from 'component/common/PageHeader/PageHeader';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import {
CREATE_API_TOKEN,
READ_API_TOKEN,
} from 'component/providers/AccessProvider/permissions';
import { useStyles } from './ApiTokenPage.styles';
import { CREATE_API_TOKEN_BUTTON } from 'utils/testIds';
import { Alert } from '@mui/material';
import { ApiTokenList } from 'component/admin/apiToken/ApiTokenList/ApiTokenList';
import { READ_API_TOKEN } from 'component/providers/AccessProvider/permissions';
import { AdminAlert } from 'component/common/AdminAlert/AdminAlert';
import { ApiTokenTable } from 'component/admin/apiToken/ApiTokenTable/ApiTokenTable';
export const ApiTokenPage = () => {
const { classes: styles } = useStyles();
const { hasAccess } = useContext(AccessContext);
const { uiConfig } = useUiConfig();
const navigate = useNavigate();
return (
<PageContent
header={
<PageHeader
title="API Access"
actions={
<ConditionallyRender
condition={hasAccess(CREATE_API_TOKEN)}
show={
<Button
variant="contained"
color="primary"
onClick={() =>
navigate('/admin/api/create-token')
}
data-testid={CREATE_API_TOKEN_BUTTON}
>
New API token
</Button>
}
/>
}
/>
}
>
<Alert severity="info" className={styles.infoBoxContainer}>
<p>
Read the{' '}
<a
href="https://docs.getunleash.io/docs"
target="_blank"
rel="noreferrer"
>
Getting started guide
</a>{' '}
to learn how to connect to the Unleash API from your
application or programmatically. Please note it can take up
to 1 minute before a new API key is activated.
</p>
<br />
<strong>API URL: </strong>{' '}
<pre style={{ display: 'inline' }}>
{uiConfig.unleashUrl}/api/
</pre>
</Alert>
<ConditionallyRender
condition={hasAccess(READ_API_TOKEN)}
show={() => <ApiTokenList />}
elseShow={() => <AdminAlert />}
/>
</PageContent>
<ConditionallyRender
condition={hasAccess(READ_API_TOKEN)}
show={() => <ApiTokenTable />}
elseShow={() => <AdminAlert />}
/>
);
};

219
frontend/src/component/admin/apiToken/ApiTokenTable/ApiTokenTable.tsx Normal file
View File

@ -0,0 +1,219 @@
import { useApiTokens } from 'hooks/api/getters/useApiTokens/useApiTokens';
import { useTable, useGlobalFilter, useSortBy } from 'react-table';
import { PageContent } from 'component/common/PageContent/PageContent';
import {
SortableTableHeader,
TableSearch,
TableCell,
TablePlaceholder,
} from 'component/common/Table';
import { Table, TableBody, Box, TableRow, useMediaQuery } from '@mui/material';
import { PageHeader } from 'component/common/PageHeader/PageHeader';
import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
import { ApiTokenDocs } from 'component/admin/apiToken/ApiTokenDocs/ApiTokenDocs';
import { CreateApiTokenButton } from 'component/admin/apiToken/CreateApiTokenButton/CreateApiTokenButton';
import { IconCell } from 'component/common/Table/cells/IconCell/IconCell';
import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
import { Key } from '@mui/icons-material';
import { ActionCell } from 'component/common/Table/cells/ActionCell/ActionCell';
import { CopyApiTokenButton } from 'component/admin/apiToken/CopyApiTokenButton/CopyApiTokenButton';
import { RemoveApiTokenButton } from 'component/admin/apiToken/RemoveApiTokenButton/RemoveApiTokenButton';
import { DateCell } from 'component/common/Table/cells/DateCell/DateCell';
import { sortTypes } from 'utils/sortTypes';
import { useEffect, useMemo } from 'react';
import theme from 'themes/theme';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { ProjectsList } from 'component/admin/apiToken/ProjectsList/ProjectsList';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell';
export const ApiTokenTable = () => {
const { tokens } = useApiTokens();
const hiddenColumns = useHiddenColumns();
const initialState = useMemo(() => ({ sortBy: [{ id: 'createdAt' }] }), []);
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
state: { globalFilter },
setGlobalFilter,
setHiddenColumns,
} = useTable(
{
columns: COLUMNS as any,
data: tokens as any,
initialState,
sortTypes,
disableSortRemove: true,
},
useGlobalFilter,
useSortBy
);
useEffect(() => {
setHiddenColumns(hiddenColumns);
}, [setHiddenColumns, hiddenColumns]);
const headerSearch = (
<TableSearch initialValue={globalFilter} onChange={setGlobalFilter} />
);
const headerActions = (
<>
{headerSearch}
<PageHeader.Divider />
<CreateApiTokenButton />
</>
);
if (!tokens.length) {
return null;
}
return (
<PageContent
header={
<PageHeader
title={`API access (${rows.length})`}
actions={headerActions}
/>
}
>
<Box sx={{ mb: 4 }}>
<ApiTokenDocs />
</Box>
<SearchHighlightProvider value={globalFilter}>
<Table {...getTableProps()}>
<SortableTableHeader headerGroups={headerGroups as any} />
<TableBody {...getTableBodyProps()}>
{rows.map(row => {
prepareRow(row);
return (
<TableRow hover {...row.getRowProps()}>
{row.cells.map(cell => (
<TableCell {...cell.getCellProps()}>
{cell.render('Cell')}
</TableCell>
))}
</TableRow>
);
})}
</TableBody>
</Table>
</SearchHighlightProvider>
<ConditionallyRender
condition={rows.length === 0}
show={
<ConditionallyRender
condition={globalFilter?.length > 0}
show={
<TablePlaceholder>
No tokens found matching &ldquo;
{globalFilter}
&rdquo;
</TablePlaceholder>
}
elseShow={
<TablePlaceholder>
No tokens available. Get started by adding one.
</TablePlaceholder>
}
/>
}
/>
</PageContent>
);
};
const useHiddenColumns = (): string[] => {
const { uiConfig } = useUiConfig();
const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
const isMediumScreen = useMediaQuery(theme.breakpoints.down('md'));
return useMemo(() => {
const hidden: string[] = [];
if (!uiConfig.flags.E) {
hidden.push('projects');
hidden.push('environment');
}
if (isMediumScreen) {
hidden.push('Icon');
hidden.push('createdAt');
}
if (isSmallScreen) {
hidden.push('username');
}
return hidden;
}, [uiConfig, isSmallScreen, isMediumScreen]);
};
const COLUMNS = [
{
id: 'Icon',
width: '1%',
Cell: () => <IconCell icon={<Key color="disabled" />} />,
disableSortBy: true,
disableGlobalFilter: true,
},
{
Header: 'Username',
accessor: 'username',
Cell: HighlightCell,
width: '60%',
},
{
Header: 'Type',
accessor: 'type',
Cell: ({ value }: { value: string }) => (
<HighlightCell value={value.toUpperCase()} />
),
minWidth: 100,
},
{
Header: 'Project',
accessor: 'project',
Cell: (props: any) => (
<TextCell>
<ProjectsList
project={props.row.original.project}
projects={props.row.original.projects}
/>
</TextCell>
),
minWidth: 120,
},
{
Header: 'Environment',
accessor: 'environment',
Cell: HighlightCell,
minWidth: 120,
},
{
Header: 'Created',
accessor: 'createdAt',
Cell: DateCell,
minWidth: 150,
disableGlobalFilter: true,
},
{
Header: 'Actions',
id: 'Actions',
align: 'center',
width: '1%',
disableSortBy: true,
disableGlobalFilter: true,
Cell: (props: any) => (
<ActionCell>
<CopyApiTokenButton token={props.row.original} />
<RemoveApiTokenButton token={props.row.original} />
</ActionCell>
),
},
];

30
frontend/src/component/admin/apiToken/CopyApiTokenButton/CopyApiTokenButton.tsx Normal file
View File

@ -0,0 +1,30 @@
import { IconButton, Tooltip } from '@mui/material';
import { IApiToken } from 'hooks/api/getters/useApiTokens/useApiTokens';
import useToast from 'hooks/useToast';
import copy from 'copy-to-clipboard';
import { FileCopy } from '@mui/icons-material';
interface ICopyApiTokenButtonProps {
token: IApiToken;
}
export const CopyApiTokenButton = ({ token }: ICopyApiTokenButtonProps) => {
const { setToastData } = useToast();
const copyToken = (value: string) => {
if (copy(value)) {
setToastData({
type: 'success',
title: `Token copied to clipboard`,
});
}
};
return (
<Tooltip title="Copy token" arrow>
<IconButton onClick={() => copyToken(token.secret)} size="large">
<FileCopy />
</IconButton>
</Tooltip>
);
};

2
frontend/src/component/admin/apiToken/CreateApiToken/CreateApiToken.tsx
View File

@ -5,7 +5,7 @@ import { CreateButton } from 'component/common/CreateButton/CreateButton';
import useApiTokensApi from 'hooks/api/actions/useApiTokensApi/useApiTokensApi';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import useToast from 'hooks/useToast';
import { useApiTokenForm } from '../hooks/useApiTokenForm';
import { useApiTokenForm } from 'component/admin/apiToken/ApiTokenForm/useApiTokenForm';
import { ADMIN } from 'component/providers/AccessProvider/permissions';
import { ConfirmToken } from '../ConfirmToken/ConfirmToken';
import { useState } from 'react';

21
frontend/src/component/admin/apiToken/CreateApiTokenButton/CreateApiTokenButton.tsx Normal file
View File

@ -0,0 +1,21 @@
import ResponsiveButton from 'component/common/ResponsiveButton/ResponsiveButton';
import { CREATE_API_TOKEN } from 'component/providers/AccessProvider/permissions';
import { CREATE_API_TOKEN_BUTTON } from 'utils/testIds';
import { useNavigate } from 'react-router-dom';
import { Add } from '@mui/icons-material';
export const CreateApiTokenButton = () => {
const navigate = useNavigate();
return (
<ResponsiveButton
Icon={Add}
onClick={() => navigate('/admin/api/create-token')}
data-testid={CREATE_API_TOKEN_BUTTON}
permission={CREATE_API_TOKEN}
maxWidth="700px"
>
New API token
</ResponsiveButton>
);
};

2
frontend/src/component/admin/apiToken/ApiTokenList/ProjectsList/ProjectsList.test.tsx → frontend/src/component/admin/apiToken/ProjectsList/ProjectsList.test.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import { render } from 'utils/testRenderer';
import { screen } from '@testing-library/react';
import { ProjectsList } from './ProjectsList';
import { ProjectsList } from 'component/admin/apiToken/ProjectsList/ProjectsList';
describe('ProjectsList', () => {
it('should prioritize new "projects" array over deprecated "project"', async () => {

16
frontend/src/component/admin/apiToken/ApiTokenList/ProjectsList/ProjectsList.tsx → frontend/src/component/admin/apiToken/ProjectsList/ProjectsList.tsx
View File

@ -1,4 +1,6 @@
import React, { Fragment, VFC } from 'react';
import { Highlighter } from 'component/common/Highlighter/Highlighter';
import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
import { Fragment, VFC } from 'react';
import { Link } from 'react-router-dom';
interface IProjectsListProps {
@ -10,6 +12,8 @@ export const ProjectsList: VFC<IProjectsListProps> = ({
projects,
project,
}) => {
const { searchQuery } = useSearchHighlightContext();
let fields: string[] =
projects && Array.isArray(projects)
? projects
@ -18,7 +22,7 @@ export const ProjectsList: VFC<IProjectsListProps> = ({
: [];
if (fields.length === 0) {
return <>*</>;
return <Highlighter search={searchQuery}>*</Highlighter>;
}
return (
@ -27,9 +31,13 @@ export const ProjectsList: VFC<IProjectsListProps> = ({
<Fragment key={item}>
{index > 0 && ', '}
{!item || item === '*' ? (
'*'
<Highlighter search={searchQuery}>*</Highlighter>
) : (
<Link to={`/projects/${item}`}>{item}</Link>
<Link to={`/projects/${item}`}>
<Highlighter search={searchQuery}>
{item}
</Highlighter>
</Link>
)}
</Fragment>
))}

70
frontend/src/component/admin/apiToken/RemoveApiTokenButton/RemoveApiTokenButton.tsx Normal file
View File

@ -0,0 +1,70 @@
import { DELETE_API_TOKEN } from 'component/providers/AccessProvider/permissions';
import { Delete } from '@mui/icons-material';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { IconButton, Tooltip } from '@mui/material';
import {
IApiToken,
useApiTokens,
} from 'hooks/api/getters/useApiTokens/useApiTokens';
import AccessContext from 'contexts/AccessContext';
import { useContext, useState } from 'react';
import { Dialogue } from 'component/common/Dialogue/Dialogue';
import useToast from 'hooks/useToast';
import useApiTokensApi from 'hooks/api/actions/useApiTokensApi/useApiTokensApi';
interface IRemoveApiTokenButtonProps {
token: IApiToken;
}
export const RemoveApiTokenButton = ({ token }: IRemoveApiTokenButtonProps) => {
const { hasAccess } = useContext(AccessContext);
const { deleteToken } = useApiTokensApi();
const [open, setOpen] = useState(false);
const { setToastData } = useToast();
const { refetch } = useApiTokens();
const onRemove = async () => {
await deleteToken(token.secret);
setOpen(false);
refetch();
setToastData({
type: 'success',
title: 'API token removed',
});
};
return (
<>
<ConditionallyRender
condition={hasAccess(DELETE_API_TOKEN)}
show={
<Tooltip title="Delete token" arrow>
<IconButton onClick={() => setOpen(true)} size="large">
<Delete />
</IconButton>
</Tooltip>
}
/>
<Dialogue
open={open}
onClick={onRemove}
onClose={() => setOpen(false)}
title="Confirm deletion"
>
<div>
Are you sure you want to delete the following API token?
<br />
<ul>
<li>
<strong>username</strong>:{' '}
<code>{token.username}</code>
</li>
<li>
<strong>type</strong>: <code>{token.type}</code>
</li>
</ul>
</div>
</Dialogue>
</>
);
};

50
frontend/src/hooks/api/getters/useApiTokens/useApiTokens.ts
View File

@ -1,36 +1,40 @@
import useSWR, { mutate, SWRConfiguration } from 'swr';
import { useState, useEffect } from 'react';
import useSWR, { SWRConfiguration } from 'swr';
import { useCallback, useMemo } from 'react';
import { formatApiPath } from 'utils/formatPath';
import handleErrorResponses from '../httpErrorResponseHandler';
const useApiTokens = (options: SWRConfiguration = {}) => {
const fetcher = async () => {
const path = formatApiPath(`api/admin/api-tokens`);
const res = await fetch(path, {
method: 'GET',
}).then(handleErrorResponses('Api tokens'));
return res.json();
};
export interface IApiToken {
createdAt: Date;
username: string;
secret: string;
type: string;
project?: string;
projects?: string | string[];
environment: string;
}
const KEY = `api/admin/api-tokens`;
export const useApiTokens = (options: SWRConfiguration = {}) => {
const path = formatApiPath(`api/admin/api-tokens`);
const { data, error, mutate } = useSWR<IApiToken[]>(path, fetcher, options);
const { data, error } = useSWR(KEY, fetcher, options);
const [loading, setLoading] = useState(!error && !data);
const tokens = useMemo(() => {
return data ?? [];
}, [data]);
const refetch = () => {
mutate(KEY);
};
useEffect(() => {
setLoading(!error && !data);
}, [data, error]);
const refetch = useCallback(() => {
mutate().catch(console.warn);
}, [mutate]);
return {
tokens: data?.tokens || [],
tokens,
error,
loading,
loading: !error && !data,
refetch,
};
};
export default useApiTokens;
const fetcher = async (path: string): Promise<IApiToken[]> => {
const res = await fetch(path).then(handleErrorResponses('Api tokens'));
const data = await res.json();
return data.tokens;
};

7
frontend/src/hooks/api/getters/useUiConfig/useUiConfig.ts
View File

@ -3,6 +3,7 @@ import { formatApiPath } from 'utils/formatPath';
import { defaultValue } from './defaultValue';
import { IUiConfig } from 'interfaces/uiConfig';
import handleErrorResponses from '../httpErrorResponseHandler';
import { useMemo } from 'react';
const REQUEST_KEY = 'api/admin/ui-config';
@ -33,8 +34,12 @@ const useUiConfig = (options: SWRConfiguration = {}) => {
return true;
};
const uiConfig = useMemo(() => {
return { ...defaultValue, ...data };
}, [data]);
return {
uiConfig: { ...defaultValue, ...data },
uiConfig,
loading: !error && !data,
error,
refetch,