From 1058b4049c9746413d196658d6369cae86b52819 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivar=20Conradi=20=C3=98sthus?= Date: Thu, 14 Oct 2021 19:58:57 +0200 Subject: [PATCH] =?UTF-8?q?fix:=20envrionments=20should=20give=20understan?= =?UTF-8?q?dable=20error=20if=20not=20possible=20to=E2=80=A6=20(#433)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../FeatureToggleListNew.styles.ts | 9 +- .../FeatureToggleListNew.tsx | 6 +- .../FeatureToggleListNewItem.tsx | 2 +- .../src/component/project/Project/Project.tsx | 3 - .../ProjectEnvironment/ProjectEnvironment.tsx | 84 ++++++++++--------- .../project/form-project-component.tsx | 8 +- .../actions/useAdminUsersApi/errorHandlers.ts | 4 +- .../src/hooks/api/actions/useApi/useApi.ts | 4 +- frontend/src/store/api-helper.js | 4 +- 9 files changed, 67 insertions(+), 57 deletions(-) diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts index 53747c340e..a4a7530d51 100644 --- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts +++ b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts @@ -21,7 +21,7 @@ export const useStyles = makeStyles(theme => ({ paddingLeft: '10px', }, tableCellEnv: { - width: '20px', + width: '90px', [theme.breakpoints.down('sm')]: { display: 'none', }, @@ -33,4 +33,11 @@ export const useStyles = makeStyles(theme => ({ display: 'none', }, }, + envName: { + display: 'inline-block', + width: '90px', + textOverflow: 'ellipsis', + overflow: 'hidden', + whiteSpace: 'nowrap', + } })); diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx index 0c1900a93a..1e24cfc698 100644 --- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx +++ b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx @@ -120,10 +120,8 @@ const FeatureToggleListNew = ({ )} align="center" > - - {env.name === ':global:' - ? 'Status' - : env.name} + + {env.name} ); diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx index 77e264448f..33f0296f1d 100644 --- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx +++ b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx @@ -63,7 +63,7 @@ const FeatureToggleListNewItem = ({ setToastData({ show: true, type: 'error', - text: e.toString(), + text: e.message, }); }); }; diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx index 3474dd56c5..b97e04c4f0 100644 --- a/frontend/src/component/project/Project/Project.tsx +++ b/frontend/src/component/project/Project/Project.tsx @@ -2,7 +2,6 @@ import { useHistory, useParams } from 'react-router'; import { useCommonStyles } from '../../../common.styles'; import useProject from '../../../hooks/api/getters/useProject/useProject'; import useLoading from '../../../hooks/useLoading'; -import useUiConfig from '../../../hooks/api/getters/useUiConfig/useUiConfig'; import ApiError from '../../common/ApiError/ApiError'; import ConditionallyRender from '../../common/ConditionallyRender'; import { useStyles } from './Project.styles'; @@ -23,7 +22,6 @@ const Project = () => { const { id, activeTab } = useParams<{ id: string, activeTab: string }>(); const params = useQueryParams(); const { project, error, loading, refetch } = useProject(id); - const { uiConfig } = useUiConfig(); const ref = useLoading(loading); const { toast, setToastData } = useToast(); const commonStyles = useCommonStyles(); @@ -57,7 +55,6 @@ const Project = () => { component: , path: `${basePath}/environments`, name: 'environments', - disabled: !uiConfig.flags.E }, { title: 'Settings', diff --git a/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx b/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx index 1570066c59..fc067e8cee 100644 --- a/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx +++ b/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx @@ -138,10 +138,6 @@ const ProjectEnvironmentList = ({ projectId }: ProjectEnvironmentListProps) => { ); const renderEnvironments = () => { - if (!uiConfig.flags.E) { - return

Feature not enabled.

; - } - return ( {envs.map(env => ( @@ -167,45 +163,53 @@ const ProjectEnvironmentList = ({ projectId }: ProjectEnvironmentListProps) => { } > - - Important! In order for your application to retrieve feature toggle activation strategies for a specific environment, the application
must use an environment-specific API key. You can look up the environment-specific API keys {' '} - - here. - {' '} -
-
- Your administrator can configure an environment-specific API key and add it to your SDK if you can't find it on the list. - If you are an administrator you can create a new API key {' '} - - here. - {' '} + + + + Important! In order for your application to retrieve configured activation strategies for a specific environment, + the application
must use an environment specific API key. You can look up the environment-specific API keys {' '} + + here. + +
+
+ Your administrator can configure an environment-specific API key to be used in the SDK. + If you are an administrator you can {' '} + + create a new API key. + + + No environments available.} + elseShow={renderEnvironments()} + /> + + + + } elseShow={ + + This feature has not been Unleashed for you yet. -
- -
- No environments available.
} - elseShow={renderEnvironments()} - /> - - + } /> + {toast} diff --git a/frontend/src/component/project/form-project-component.tsx b/frontend/src/component/project/form-project-component.tsx index e84d012725..4909e92136 100644 --- a/frontend/src/component/project/form-project-component.tsx +++ b/frontend/src/component/project/form-project-component.tsx @@ -107,16 +107,16 @@ const ProjectFormComponent = (props: ProjectFormComponentProps) => { } > - Creating and updating projects requires a paid version of Unleash. - Check out getunleash.io - to find out more. + {submitText} project requires a paid version of Unleash. + Check out getunleash.io{' '} + to learn more. } elseShow={ <> diff --git a/frontend/src/hooks/api/actions/useAdminUsersApi/errorHandlers.ts b/frontend/src/hooks/api/actions/useAdminUsersApi/errorHandlers.ts index 9fd4a38963..f7b157eb14 100644 --- a/frontend/src/hooks/api/actions/useAdminUsersApi/errorHandlers.ts +++ b/frontend/src/hooks/api/actions/useAdminUsersApi/errorHandlers.ts @@ -66,9 +66,11 @@ export const handleForbidden = async ( if (res) { const data = await res.json(); + const message = data.isJoi ? data.details[0].message : data[0].msg; + setErrors(prev => ({ ...prev, - [requestId]: data[0].msg, + [requestId]: message, })); } diff --git a/frontend/src/hooks/api/actions/useApi/useApi.ts b/frontend/src/hooks/api/actions/useApi/useApi.ts index 2d3844457e..06ce23277e 100644 --- a/frontend/src/hooks/api/actions/useApi/useApi.ts +++ b/frontend/src/hooks/api/actions/useApi/useApi.ts @@ -153,12 +153,14 @@ const useAPI = ({ } if (propagateErrors) { - throw new ForbiddenError(res.status); + const response = await res.json(); + throw new ForbiddenError(res.status, response); } } if (res.status > 399) { const response = await res.json(); + if (response?.details?.length > 0) { const error = response.details[0]; if (propagateErrors) { diff --git a/frontend/src/store/api-helper.js b/frontend/src/store/api-helper.js index 9cf0a1e8ad..89d4a17603 100644 --- a/frontend/src/store/api-helper.js +++ b/frontend/src/store/api-helper.js @@ -27,8 +27,8 @@ export class AuthenticationError extends Error { } export class ForbiddenError extends Error { - constructor(statusCode, body) { - super('You cannot perform this action'); + constructor(statusCode, body = {}) { + super(body.details?.length > 0 ? body.details[0].message : 'You cannot perform this action'); this.name = 'ForbiddenError'; this.statusCode = statusCode; this.body = body;