fix: envrionments should give understandable error if not possible to… (#433)

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

frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx

@@ -120,10 +120,8 @@ const FeatureToggleListNew = ({
                                     )}
                                     align="center"
                                 >
-                                    <span data-loading>
+                                    <span data-loading className={styles.envName} >
-                                        {env.name === ':global:'
+                                       {env.name}
-                                            ? 'Status'
-                                            : env.name}
                                     </span>
                                 </TableCell>
                             );

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

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: <ProjectEnvironment projectId={id}  />,
             path: `${basePath}/environments`,
             name: 'environments',
-            disabled: !uiConfig.flags.E
         },
         {
             title: 'Settings',

frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx

@@ -138,10 +138,6 @@ const ProjectEnvironmentList = ({ projectId }: ProjectEnvironmentListProps) => {
     );
 
     const renderEnvironments = () => {
-        if (!uiConfig.flags.E) {
-            return <p>Feature not enabled.</p>;
-        }
-
         return (
             <FormGroup>
                 {envs.map(env => (
@@ -167,45 +163,53 @@ const ProjectEnvironmentList = ({ projectId }: ProjectEnvironmentListProps) => {
             <PageContent
                 headerContent={
                     <HeaderTitle
-                        title={`Configure environments for "${project?.name}"`}
+                        title={`Configure environments for "${project?.name}" project`}
                     />}
             >
-                        <Alert severity="info">
+                <ConditionallyRender condition={uiConfig.flags.E} show={
-                        <b>Important!</b> In order for your application to retrieve feature toggle activation strategies for a specific environment, the application<br/> must use an environment-specific API key. You can look up the environment-specific API keys {' '}
+                    <div className={styles.container}>
-                        <Link
+                        <ConditionallyRender condition={error} show={renderError()} />
-                            to='/admin/api'
+                        <Alert severity="info" style={{marginBottom: '20px'}}>
-                        >
+                            <b>Important!</b> In order for your application to retrieve configured activation strategies for a specific environment, 
-                            here.
+                            the application<br/> must use an environment specific API key. You can look up the environment-specific API keys {' '}
-                        </Link>{' '}
+                            <Link
-                        <br/>
+                                to='/admin/api'
-                        <br/>
+                            >
-                        Your administrator can configure an environment-specific API key and add it to your SDK if you can't find it on the list.
+                                here.
-                        If you are an administrator you can create a new API key {' '}
+                            </Link>
-                        <Link
+                            <br/>
-                            to='/admin/api'
+                            <br/>
-                        >
+                            Your administrator can configure an environment-specific API key to be used in the SDK.
-                            here.
+                            If you are an administrator you can {' '}
-                        </Link>{' '}
+                            <Link
+                                to='/admin/api'
+                            >
+                                create a new API key.
+                            </Link>
+                        </Alert>
+                        <ConditionallyRender
+                            condition={environments.length < 1 && !loading}
+                            show={<div>No environments available.</div>}
+                            elseShow={renderEnvironments()}
+                        />
+                        <EnvironmentDisableConfirm
+                            env={selectedEnv}
+                            open={!!selectedEnv}
+                            handleDisableEnvironment={handleDisableEnvironment}
+                            handleCancelDisableEnvironment={
+                                handleCancelDisableEnvironment
+                            }
+                            confirmName={confirmName}
+                            setConfirmName={setConfirmName}
+                        />
+                    </div>
+                    
+                } elseShow={
+                    <Alert security="success">
+                        This feature has not been Unleashed for you yet. 
                     </Alert>
-                    <br/>
+                } />
-                <ConditionallyRender condition={error} show={renderError()} />
+                
-                <div className={styles.container}>
-                    <ConditionallyRender
-                        condition={environments.length < 1 && !loading}
-                        show={<div>No environments available.</div>}
-                        elseShow={renderEnvironments()}
-                    />
-                </div>
-                <EnvironmentDisableConfirm
-                    env={selectedEnv}
-                    open={!!selectedEnv}
-                    handleDisableEnvironment={handleDisableEnvironment}
-                    handleCancelDisableEnvironment={
-                        handleCancelDisableEnvironment
-                    }
-                    confirmName={confirmName}
-                    setConfirmName={setConfirmName}
-                />
                 {toast}
             </PageContent>
         </div>

frontend/src/component/project/form-project-component.tsx

@@ -107,16 +107,16 @@ const ProjectFormComponent = (props: ProjectFormComponentProps) => {
             <PageContent
                 headerContent={
                     <HeaderTitle
-                        title={`${submitText} Project`}
+                        title={`${submitText} ${project?.name} project`}
                     />
                 }
             >
                 
                 <ConditionallyRender condition={isOss()} show={
                     <Alert data-loading severity="error">
-                        Creating and updating projects requires a paid version of Unleash. 
+                        {submitText} project requires a paid version of Unleash. 
-                        Check out <a href="https://www.getunleash.io" target="_blank" rel="noreferrer">getunleash.io</a> 
+                        Check out <a href="https://www.getunleash.io" target="_blank" rel="noreferrer">getunleash.io</a>{' '}
-                        to find out more.
+                        to learn more.
                     </Alert>
                 } elseShow={
                     <>

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

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) {

frontend/src/store/api-helper.js

@@ -27,8 +27,8 @@ export class AuthenticationError extends Error {
 }
 
 export class ForbiddenError extends Error {
-    constructor(statusCode, body) {
+    constructor(statusCode, body = {}) {
-        super('You cannot perform this action');
+        super(body.details?.length > 0 ? body.details[0].message : 'You cannot perform this action');
         this.name = 'ForbiddenError';
         this.statusCode = statusCode;
         this.body = body;