Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity

Create Project API Token sidebar (#3057)

Browse Source 
Signed-off-by: andreas-unleash <andreas@getunleash.ai>

Create Project API Token sidebar

<!-- Thanks for creating a PR! To make it easier for reviewers and
everyone else to understand what your changes relate to, please add some
relevant content to the headings below. Feel free to ignore or delete
sections that you don't think are relevant. Thank you! ❤️ -->

## About the changes
<!-- Describe the changes introduced. What are they and why are they
being introduced? Feel free to also add screenshots or steps to view the
changes if they're visual. -->

<!-- Does it close an issue? Multiple? -->
Closes #
[1-633](https://linear.app/unleash/issue/1-633/add-api-key-creation-screen-into-project)

<!-- (For internal contributors): Does it relate to an issue on public
roadmap? -->
<!--
Relates to [roadmap](https://github.com/orgs/Unleash/projects/10) item:
#
-->

### Important files
<!-- PRs can contain a lot of changes, but not all changes are equally
important. Where should a reviewer start looking to get an overview of
the changes? Are any files particularly important? -->


## Discussion points
<!-- Anything about the PR you'd like to discuss before it gets merged?
Got any questions or doubts? -->

---------

Signed-off-by: andreas-unleash <andreas@getunleash.ai>
This commit is contained in:
andreas-unleash 2023-02-07 15:10:26 +02:00 committed by GitHub
parent d14072ff74
commit a2ce8455de
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 86 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -36,6 +36,7 @@ interface IApiTokenFormProps {
errors: { [key: string]: string };
mode: 'Create' | 'Edit';
clearErrors: (error?: ApiTokenFormErrorType) => void;
disableProjectSelection?: boolean;
}
const StyledContainer = styled('div')(() => ({
@ -84,6 +85,7 @@ const ApiTokenForm: React.FC<IApiTokenFormProps> = ({
username,
type,
projects,
disableProjectSelection = false,
environment,
setUsername,
setTokenType,
@ -205,17 +207,21 @@ const ApiTokenForm: React.FC<IApiTokenFormProps> = ({
))}
</RadioGroup>
</FormControl>
<StyledInputDescription>
Which project do you want to give access to?
</StyledInputDescription>
<SelectProjectInput
disabled={type === TokenType.ADMIN}
options={selectableProjects}
defaultValue={projects}
onChange={setProjects}
error={errors?.projects}
onFocus={() => clearErrors('projects')}
/>
{!Boolean(disableProjectSelection) && (
<>
<StyledInputDescription>
Which project do you want to give access to?
</StyledInputDescription>
<SelectProjectInput
disabled={type === TokenType.ADMIN}
options={selectableProjects}
defaultValue={projects}
onChange={setProjects}
error={errors?.projects}
onFocus={() => clearErrors('projects')}
/>
</>
)}
<StyledInputDescription>
Which environment should the token have access to?
</StyledInputDescription>

7
frontend/src/component/admin/apiToken/ApiTokenForm/useApiTokenForm.ts
View File

@ -3,14 +3,15 @@ import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironmen
import { IApiTokenCreate } from 'hooks/api/actions/useApiTokensApi/useApiTokensApi';
export type ApiTokenFormErrorType = 'username' | 'projects';
export const useApiTokenForm = () => {
export const useApiTokenForm = (project?: string) => {
const { environments } = useEnvironments();
const initialEnvironment = environments?.find(e => e.enabled)?.name;
const [username, setUsername] = useState('');
const [type, setType] = useState('CLIENT');
const [projects, setProjects] = useState<string[]>(['*']);
const [projects, setProjects] = useState<string[]>([
project ? project : '*',
]);
const [memorizedProjects, setMemorizedProjects] =
useState<string[]>(projects);
const [environment, setEnvironment] = useState<string>();

17
frontend/src/component/admin/apiToken/ApiTokenTable/ApiTokenTable.tsx
View File

@ -1,12 +1,12 @@
import { useApiTokens } from 'hooks/api/getters/useApiTokens/useApiTokens';
import { useTable, useGlobalFilter, useSortBy } from 'react-table';
import { useGlobalFilter, useSortBy, useTable } from 'react-table';
import { PageContent } from 'component/common/PageContent/PageContent';
import {
SortableTableHeader,
TableCell,
TablePlaceholder,
} from 'component/common/Table';
import { Table, TableBody, Box, TableRow, useMediaQuery } from '@mui/material';
import { Box, Table, TableBody, 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';
@ -26,6 +26,8 @@ import { HighlightCell } from 'component/common/Table/cells/HighlightCell/Highli
import { Search } from 'component/common/Search/Search';
import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';
import { TimeAgoCell } from 'component/common/Table/cells/TimeAgoCell/TimeAgoCell';
import { Route, Routes } from 'react-router-dom';
import { ProjectApiTokenCreate } from './ProjectApiTokenCreate';
const hiddenColumnsSmall = ['Icon', 'createdAt'];
const hiddenColumnsCompact = ['Icon', 'project', 'seenAt'];
@ -176,6 +178,17 @@ export const ApiTokenTable = ({
/>
}
/>
<ConditionallyRender
condition={Boolean(filterForProject)}
show={
<Routes>
<Route
path="create"
element={<ProjectApiTokenCreate />}
/>
</Routes>
}
/>
</PageContent>
);
};

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

@ -0,0 +1,29 @@
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
import useProjectAccess from 'hooks/api/getters/useProjectAccess/useProjectAccess';
import { useAccess } from 'hooks/api/getters/useAccess/useAccess';
import { GO_BACK } from 'constants/navigate';
import { CreateApiToken } from '../CreateApiToken/CreateApiToken';
import { SidebarModal } from 'component/common/SidebarModal/SidebarModal';
import { useNavigate } from 'react-router-dom';
export const ProjectApiTokenCreate = () => {
const projectId = useRequiredPathParam('projectId');
const navigate = useNavigate();
const { access } = useProjectAccess(projectId);
const { users, serviceAccounts, groups } = useAccess();
if (!access || !users || !serviceAccounts || !groups) {
return null;
}
return (
<SidebarModal
open
onClose={() => navigate(GO_BACK)}
label={`Create API token`}
>
<CreateApiToken modal={true} project={projectId} />
</SidebarModal>
);
};

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

@ -13,10 +13,18 @@ import { scrollToTop } from 'component/common/util';
import { formatUnknownError } from 'utils/formatUnknownError';
import { usePageTitle } from 'hooks/usePageTitle';
import { GO_BACK } from 'constants/navigate';
import { useApiTokens } from '../../../../hooks/api/getters/useApiTokens/useApiTokens';
const pageTitle = 'Create API token';
export const CreateApiToken = () => {
interface ICreateApiTokenProps {
modal?: boolean;
project?: string;
}
export const CreateApiToken = ({
modal = false,
project,
}: ICreateApiTokenProps) => {
const { setToastApiError } = useToast();
const { uiConfig } = useUiConfig();
const navigate = useNavigate();
@ -36,9 +44,10 @@ export const CreateApiToken = () => {
isValid,
errors,
clearErrors,
} = useApiTokenForm();
} = useApiTokenForm(project);
const { createToken, loading } = useApiTokensApi();
const { refetch } = useApiTokens();
usePageTitle(pageTitle);
@ -63,7 +72,8 @@ export const CreateApiToken = () => {
const closeConfirm = () => {
setShowConfirm(false);
navigate('/admin/api');
refetch();
navigate(GO_BACK);
};
const formatApiCode = () => {
@ -83,6 +93,7 @@ export const CreateApiToken = () => {
<FormTemplate
loading={loading}
title={pageTitle}
modal={modal}
description="Unleash SDKs use API tokens to authenticate to the Unleash API. Client SDKs need a token with 'client privileges', which allows them to fetch feature toggle configurations and post usage metrics."
documentationLink="https://docs.getunleash.io/reference/api-tokens-and-client-keys"
documentationLinkLabel="API tokens documentation"
@ -91,6 +102,7 @@ export const CreateApiToken = () => {
<ApiTokenForm
username={username}
type={type}
disableProjectSelection={Boolean(project)}
projects={projects}
environment={environment}
setEnvironment={setEnvironment}

7
frontend/src/component/admin/apiToken/CreateApiTokenButton/CreateApiTokenButton.tsx
View File

@ -3,14 +3,19 @@ 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';
import { useOptionalPathParam } from 'hooks/useOptionalPathParam';
export const CreateApiTokenButton = () => {
const navigate = useNavigate();
const project = useOptionalPathParam('projectId');
const to = Boolean(project) ? 'create' : '/admin/api/create-token';
return (
<ResponsiveButton
Icon={Add}
onClick={() => navigate('/admin/api/create-token')}
onClick={() => navigate(to)}
data-testid={CREATE_API_TOKEN_BUTTON}
permission={CREATE_API_TOKEN}
maxWidth="700px"