diff --git a/frontend/src/component/admin/apiToken/ApiTokenDocs/ApiTokenDocs.tsx b/frontend/src/component/admin/apiToken/ApiTokenDocs/ApiTokenDocs.tsx index a6b94e2550d1..bff550cb7bb8 100644 --- a/frontend/src/component/admin/apiToken/ApiTokenDocs/ApiTokenDocs.tsx +++ b/frontend/src/component/admin/apiToken/ApiTokenDocs/ApiTokenDocs.tsx @@ -1,8 +1,33 @@ -import { Alert } from '@mui/material'; +import { Alert, Box, IconButton, styled, Tooltip } from '@mui/material'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; +import CopyIcon from '@mui/icons-material/FileCopy'; +import copy from 'copy-to-clipboard'; +import useToast from 'hooks/useToast'; + +const GridContainer = styled('div')(({ theme }) => ({ + display: 'grid', + gridTemplateColumns: 'auto auto 1fr', + gridAutoRows: 'min-content', + alignItems: 'center', + gap: theme.spacing(1), + marginTop: theme.spacing(1.5), +})); +const GridItem = Box; export const ApiTokenDocs = () => { const { uiConfig } = useUiConfig(); + const { setToastData } = useToast(); + + const onCopyToClipboard = (url: string) => () => { + copy(url); + setToastData({ + type: 'success', + title: 'Copied to clipboard', + }); + }; + + const clientApiUrl = `${uiConfig.unleashUrl}/api/`; + const frontendApiUrl = `${uiConfig.unleashUrl}/api/frontend`; return ( @@ -19,9 +44,40 @@ export const ApiTokenDocs = () => { up to 1 minute before a new API key is activated.

-
- API URL: {' '} -
{uiConfig.unleashUrl}/api/
+ + + CLIENT API URL: + + +
{clientApiUrl}
+
+ + + + + + + + + FRONTEND API URL: + + +
{frontendApiUrl}
+
+ + + + + + + +
); };