add info box in project page + make api ui responsive

frontend/src/component/api-token/ApiTokenList/ApiTokenList.styles.ts

@@ -12,16 +12,33 @@ export const useStyles = makeStyles(theme => ({
         maxWidth: '400px',
         marginBottom: '1rem',
     },
-    cardLink: {
-        color: 'inherit',
-        textDecoration: 'none',
-        border: 'none',
-        padding: '0',
-        background: 'transparent',
-        fontFamily: theme.typography.fontFamily,
-        pointer: 'cursor',
-    },
     center: {
         textAlign: 'center'
+    },
+    actionsContainer: {
+        textAlign: 'center',
+        display: 'flex-inline',
+        flexWrap: 'nowrap'
+    },
+    hideSM:{
+        [theme.breakpoints.down('sm')]: { 
+            display: 'none'
+    }
+    },
+    hideMD:{
+        [theme.breakpoints.down('md')]: { 
+            display: 'none'
+    }
+    },
+    hideXS:{
+        [theme.breakpoints.down('xs')]: { 
+            display: 'none'
+    }
+    },
+    token:{
+        textAlign: 'left',
+        [theme.breakpoints.up('sm')]: { 
+            display: 'none'
+    }
     }
 }));

frontend/src/component/api-token/ApiTokenList/ApiTokenList.tsx

@@ -1,6 +1,6 @@
 import { useContext, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { Button, IconButton, Table, TableBody, TableCell, TableHead, TableRow } from '@material-ui/core';
+import { Button, IconButton, Table, TableBody, TableCell, TableHead, TableRow, } from '@material-ui/core';
 import AccessContext from '../../../contexts/AccessContext';
 import useToast from '../../../hooks/useToast';
 import useLoading from '../../../hooks/useLoading';
@@ -15,7 +15,7 @@ import { CREATE_API_TOKEN, DELETE_API_TOKEN } from '../../AccessProvider/permiss
 import { useStyles } from './ApiTokenList.styles';
 import { formatDateWithLocale } from '../../common/util';
 import Secret from './secret';
-import { Delete } from '@material-ui/icons';
+import { Delete, FileCopy } from '@material-ui/icons';
 import ApiTokenCreate from '../ApiTokenCreate/ApiTokenCreate';
 import Dialogue from '../../common/Dialogue';
 
@@ -73,6 +73,14 @@ const ApiTokenList = ({ location }: IApiTokenList) => {
             text: 'Successfully created API token.',
         });
     }
+    const copyToken = (value: string) => {
+        navigator.clipboard.writeText(value);
+        setToastData({
+            type: 'success',
+            show: true,
+            text: `Token is copied to clipboard`,
+        });
+    };
 
     const onDeleteToken = async () => {
         if(delToken) {
@@ -101,65 +109,81 @@ const ApiTokenList = ({ location }: IApiTokenList) => {
             <Table size="small">
                 <TableHead>
                     <TableRow>
-                        <TableCell>Created</TableCell>
+                        <TableCell className={styles.hideSM}>Created</TableCell>
-                        <TableCell>Username</TableCell>
+                        <TableCell className={styles.hideSM}>hideSM</TableCell>
-                        <TableCell className={styles.center}>Type</TableCell>
+                        <TableCell className={`${styles.center} ${styles.hideXS}`}>Type</TableCell>
                         <ConditionallyRender condition={uiConfig.flags.E} show={<>
-                            <TableCell className={styles.center}>Project</TableCell>
+                            <TableCell className={`${styles.center} ${styles.hideXS}`}>Project</TableCell>
-                            <TableCell className={styles.center}>Environment</TableCell>
+                            <TableCell className={`${styles.center} ${styles.hideXS}`}>Environment</TableCell>
                         </>} />
-                        <TableCell>Secret</TableCell>
+                        <TableCell className={styles.hideMD}>Secret</TableCell>
-                        <TableCell align="right">Action</TableCell>
+                        <TableCell className={styles.token}>Token</TableCell>
+                        <TableCell className={styles.actionsContainer}>Actions</TableCell>
                     </TableRow>
                 </TableHead>
                 <TableBody>
                     {tokens.map(item => {
                         return (
                             <TableRow key={item.secret}>
-                                <TableCell align="left">
+                                <TableCell align="left" className={styles.hideSM}>
                                     {formatDateWithLocale(
                                         item.createdAt,
                                         location.locale
                                     )}
                                 </TableCell>
-                                <TableCell align="left">
+                                <TableCell align="left" className={styles.hideSM}>
                                     {item.username}
                                 </TableCell>
-                                <TableCell className={styles.center}>
+                                <TableCell className={`${styles.center} ${styles.hideXS}`}>
                                     {item.type}
                                 </TableCell>
                                 <ConditionallyRender condition={uiConfig.flags.E} show={<>
-                                    <TableCell className={styles.center}>
+                                    <TableCell className={`${styles.center} ${styles.hideXS}`}>
                                         {renderProject(item.project)}
                                     </TableCell>
-                                    <TableCell className={styles.center}>
+                                    <TableCell className={`${styles.center} ${styles.hideXS}`}>
                                         {item.environment}
                                     </TableCell>
+                                    <TableCell className={styles.token}>
+                                        <b>Type:</b> {item.type}<br/>
+                                        <b>Env:</b> {item.environment}<br/>
+                                        <b>Project:</b> {renderProject(item.project)}
+                                    </TableCell>
+
                                 </>} />
 
-                                <TableCell>
+                                <TableCell className={styles.hideMD}>
                                     <Secret value={item.secret} />
                                 </TableCell>
-                                <ConditionallyRender
+                                <TableCell
-                                    condition={hasAccess(DELETE_API_TOKEN)}
+                                    className={styles.actionsContainer}
-                                    show={<TableCell
+                                >
-                                        width="20"
+                                    <IconButton
-                                        style={{ textAlign: 'right' }}
+                                        onClick={() => {
-                                    >
+                                            copyToken(item.secret)
-                                        <IconButton
+                                        } }
-                                            onClick={() => {
-                                                setDeleteToken(item);
-                                                setShowDelete(true);
-                                            } }
                                         >
-                                            <Delete />
+                                            <FileCopy />
-                                        </IconButton>
+                                    </IconButton>
-                                    </TableCell>} />
+                                    <ConditionallyRender
+                                        condition={hasAccess(DELETE_API_TOKEN)}
+                                        show={
+                                            <IconButton
+                                                onClick={() => {
+                                                    setDeleteToken(item);
+                                                    setShowDelete(true);
+                                                } }
+                                            >
+                                                <Delete />
+                                            </IconButton>
+                                    } />
+                                </TableCell>
                             </TableRow>
                         );
                     })}
                 </TableBody>
-            </Table>)
+            </Table>
+        )
     }
 
     return (

frontend/src/component/api-token/ApiTokenList/secret.jsx

@@ -1,29 +1,9 @@
-import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { IconButton } from '@material-ui/core';
-import { Visibility } from '@material-ui/icons';
 function Secret({ value }) {
-    const [show, setShow] = useState(false);
-    const toggle = evt => {
-        evt.preventDefault();
-        setShow(!show);
-    };
 
     return (
         <div>
-            {show ? (
+           <span style={{ width: '250px', display: 'inline-block' }}>************************************</span>
-                <input readOnly value={value} style={{ width: '250px' }} />
-            ) : (
-                <span style={{ width: '250px', display: 'inline-block' }}>************************************</span>
-            )}
-
-            <IconButton
-                aria-label="Show token"
-                onClick={toggle}
-                title="Show token"
-            >
-                <Visibility style={{ marginLeft: '5px', fontSize: '1.2em' }} />
-            </IconButton>
         </div>
     );
 }

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

@@ -16,6 +16,9 @@ import useProject from '../../../hooks/api/getters/useProject/useProject';
 import { FormControlLabel, FormGroup, Switch } from '@material-ui/core';
 import useProjectApi from '../../../hooks/api/actions/useProjectApi/useProjectApi';
 import EnvironmentDisableConfirm from './EnvironmentDisableConfirm/EnvironmentDisableConfirm';
+import { Link } from 'react-router-dom';
+import { Alert } from '@material-ui/lab';
+
 
 export interface ProjectEnvironment {
     name: string;
@@ -42,6 +45,7 @@ const ProjectEnvironmentList = ({projectId}: ProjectEnvironmentListProps) => {
     const ref = useLoading(loading);
     const styles = useStyles();
 
+
     const refetch = () => {
         refetchEnvs();
         refetchProject();
@@ -132,9 +136,26 @@ const ProjectEnvironmentList = ({projectId}: ProjectEnvironmentListProps) => {
                 headerContent={
                     <HeaderTitle
                         title={`Configure environments for "${project?.name}"`}
-                    />
+                    />}
-                }
             >
+                        <Alert severity="info">
+                        <b>Important!</b> In order for your application to ONLY 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 {' '}
+                        <Link
+                            to='/admin/api'
+                        >
+                            here.
+                        </Link>{' '}
+                        <br/>
+                        <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.
+                        If you are an administrator you can create a new API key {' '}
+                        <Link
+                            to='/admin/api'
+                        >
+                            here.
+                        </Link>{' '}
+                    </Alert>
+                    <br/>
                 <ConditionallyRender condition={error} show={renderError()} />
                 <div className={styles.container}>
                     <ConditionallyRender