Create Project API Token sidebar (#3057)

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>

frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.tsx

@@ -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>

frontend/src/component/admin/apiToken/ApiTokenForm/useApiTokenForm.ts

@@ -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>();

frontend/src/component/admin/apiToken/ApiTokenTable/ApiTokenTable.tsx

@@ -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>
     );
 };

frontend/src/component/admin/apiToken/ApiTokenTable/ProjectApiTokenCreate.tsx

@@ -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>
+    );
+};

frontend/src/component/admin/apiToken/CreateApiToken/CreateApiToken.tsx

@@ -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}

frontend/src/component/admin/apiToken/CreateApiTokenButton/CreateApiTokenButton.tsx

@@ -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"