From 9b6f5cd1983549323a7b2b253d55d402151e9e0b Mon Sep 17 00:00:00 2001 From: andreas-unleash Date: Wed, 29 Mar 2023 10:33:14 +0300 Subject: [PATCH] fix: make api tokens ui consistent and remove check for deprecated envs. (#3410) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR removes the check for deprecated environments when validating api token environment. Unifies global and project level tokens allow selection of deprecated environments when creating an api token Adds 'deprecated' to the EnvironmentSelector when appropriate ## About the changes Closes # ### Important files ## Discussion points Signed-off-by: andreas-unleash --- .../EnvironmentSelector.tsx | 21 ++++++------------- .../CreateApiToken/CreateApiToken.tsx | 3 --- .../CreateProjectApiTokenForm.tsx | 18 +--------------- src/lib/types/models/api-token.ts | 6 ------ src/test/e2e/api/admin/api-token.e2e.test.ts | 6 +++--- 5 files changed, 10 insertions(+), 44 deletions(-) diff --git a/frontend/src/component/admin/apiToken/ApiTokenForm/EnvironmentSelector/EnvironmentSelector.tsx b/frontend/src/component/admin/apiToken/ApiTokenForm/EnvironmentSelector/EnvironmentSelector.tsx index 7447f4e005..f77a6048e1 100644 --- a/frontend/src/component/admin/apiToken/ApiTokenForm/EnvironmentSelector/EnvironmentSelector.tsx +++ b/frontend/src/component/admin/apiToken/ApiTokenForm/EnvironmentSelector/EnvironmentSelector.tsx @@ -5,38 +5,29 @@ import { StyledInputDescription, StyledSelectInput, } from '../ApiTokenForm.styles'; -import { - IEnvironment, - IProjectEnvironment, -} from '../../../../../interfaces/environments'; +import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments'; interface IEnvironmentSelectorProps { type: string; environment?: string; - environments: IProjectEnvironment[] | IEnvironment[]; setEnvironment: React.Dispatch>; } export const EnvironmentSelector = ({ type, environment, setEnvironment, - environments, }: IEnvironmentSelectorProps) => { - const isProjectEnv = ( - environment: IEnvironment | IProjectEnvironment - ): environment is IProjectEnvironment => { - return 'projectVisible' in environment; - }; + const { environments } = useEnvironments(); const selectableEnvs = type === TokenType.ADMIN ? [{ key: '*', label: 'ALL' }] : environments.map(environment => ({ key: environment.name, - label: environment.name, + label: `${environment.name.concat( + !environment.enabled ? ' - deprecated' : '' + )}`, title: environment.name, - disabled: isProjectEnv(environment) - ? !environment.projectVisible - : !environment.enabled, + disabled: false, })); return ( diff --git a/frontend/src/component/admin/apiToken/CreateApiToken/CreateApiToken.tsx b/frontend/src/component/admin/apiToken/CreateApiToken/CreateApiToken.tsx index a31e5ff07f..e4f13fd8d4 100644 --- a/frontend/src/component/admin/apiToken/CreateApiToken/CreateApiToken.tsx +++ b/frontend/src/component/admin/apiToken/CreateApiToken/CreateApiToken.tsx @@ -18,7 +18,6 @@ import { TokenInfo } from '../ApiTokenForm/TokenInfo/TokenInfo'; import { TokenTypeSelector } from '../ApiTokenForm/TokenTypeSelector/TokenTypeSelector'; import { ProjectSelector } from '../ApiTokenForm/ProjectSelector/ProjectSelector'; import { EnvironmentSelector } from '../ApiTokenForm/EnvironmentSelector/EnvironmentSelector'; -import { useEnvironments } from '../../../../hooks/api/getters/useEnvironments/useEnvironments'; const pageTitle = 'Create API token'; interface ICreateApiTokenProps { @@ -30,7 +29,6 @@ export const CreateApiToken = ({ modal = false }: ICreateApiTokenProps) => { const navigate = useNavigate(); const [showConfirm, setShowConfirm] = useState(false); const [token, setToken] = useState(''); - const { environments } = useEnvironments(); const { getApiTokenPayload, @@ -127,7 +125,6 @@ export const CreateApiToken = ({ modal = false }: ICreateApiTokenProps) => { /> diff --git a/frontend/src/component/project/Project/ProjectSettings/ProjectApiAccess/CreateProjectApiTokenForm.tsx b/frontend/src/component/project/Project/ProjectSettings/ProjectApiAccess/CreateProjectApiTokenForm.tsx index 8c26b792f3..92594f236a 100644 --- a/frontend/src/component/project/Project/ProjectSettings/ProjectApiAccess/CreateProjectApiTokenForm.tsx +++ b/frontend/src/component/project/Project/ProjectSettings/ProjectApiAccess/CreateProjectApiTokenForm.tsx @@ -1,4 +1,4 @@ -import { useMemo, useState } from 'react'; +import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import FormTemplate from 'component/common/FormTemplate/FormTemplate'; @@ -21,9 +21,6 @@ import { TokenTypeSelector } from 'component/admin/apiToken/ApiTokenForm/TokenTy import { ConfirmToken } from 'component/admin/apiToken/ConfirmToken/ConfirmToken'; import { useProjectApiTokens } from 'hooks/api/getters/useProjectApiTokens/useProjectApiTokens'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; -import { useProjectEnvironments } from '../../../../../hooks/api/getters/useProjectEnvironments/useProjectEnvironments'; -import { IProjectEnvironment } from '../../../../../interfaces/environments'; -import useProject from '../../../../../hooks/api/getters/useProject/useProject'; const pageTitle = 'Create project API token'; @@ -52,19 +49,7 @@ export const CreateProjectApiTokenForm = () => { useProjectApiTokensApi(); const { refetch: refetchProjectTokens } = useProjectApiTokens(projectId); const { trackEvent } = usePlausibleTracker(); - const { environments } = useProjectEnvironments(projectId); - const { project } = useProject(projectId); - const projectEnvironments = useMemo( - () => - environments.map(environment => ({ - ...environment, - projectVisible: project?.environments.includes( - environment.name - ), - })), - [environments, project?.environments] - ); usePageTitle(pageTitle); const PATH = `api/admin/project/${projectId}/api-tokens`; @@ -146,7 +131,6 @@ export const CreateProjectApiTokenForm = () => { type={type} environment={environment} setEnvironment={setEnvironment} - environments={projectEnvironments} /> { .expect(400); }); -test('should not create token for disabled environment', async () => { +test('should create token for disabled environment', async () => { await db.stores.environmentStore.create({ name: 'disabledEnvironment', type: 'production', @@ -347,5 +347,5 @@ test('should not create token for disabled environment', async () => { environment: 'disabledEnvironment', }) .set('Content-Type', 'application/json') - .expect(400); + .expect(201); });