From 02c17571de157ef4cdabb9563891fb7df4e05bc9 Mon Sep 17 00:00:00 2001 From: Youssef Khedher Date: Thu, 7 Oct 2021 11:44:46 +0100 Subject: [PATCH] add info box in project page + make api ui responsive --- .../ApiTokenList/ApiTokenList.styles.ts | 35 ++++++-- .../api-token/ApiTokenList/ApiTokenList.tsx | 84 ++++++++++++------- .../api-token/ApiTokenList/secret.jsx | 22 +---- .../ProjectEnvironment/ProjectEnvironment.tsx | 25 +++++- 4 files changed, 104 insertions(+), 62 deletions(-) diff --git a/frontend/src/component/api-token/ApiTokenList/ApiTokenList.styles.ts b/frontend/src/component/api-token/ApiTokenList/ApiTokenList.styles.ts index 583037a6e4..34bad60801 100644 --- a/frontend/src/component/api-token/ApiTokenList/ApiTokenList.styles.ts +++ b/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' + } } })); diff --git a/frontend/src/component/api-token/ApiTokenList/ApiTokenList.tsx b/frontend/src/component/api-token/ApiTokenList/ApiTokenList.tsx index 1d93351e91..d3e1f4cca9 100644 --- a/frontend/src/component/api-token/ApiTokenList/ApiTokenList.tsx +++ b/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) => { - Created - Username - Type + Created + hideSM + Type - Project - Environment + Project + Environment } /> - Secret - Action + Secret + Token + Actions {tokens.map(item => { return ( - + {formatDateWithLocale( item.createdAt, location.locale )} - + {item.username} - + {item.type} - + {renderProject(item.project)} - + {item.environment} + + Type: {item.type}
+ Env: {item.environment}
+ Project: {renderProject(item.project)} + + } /> - + - - { - setDeleteToken(item); - setShowDelete(true); - } } + + { + copyToken(item.secret) + } } > - - - } /> + + + { + setDeleteToken(item); + setShowDelete(true); + } } + > + + + } /> + ); })} -
) + + ) } return ( diff --git a/frontend/src/component/api-token/ApiTokenList/secret.jsx b/frontend/src/component/api-token/ApiTokenList/secret.jsx index 1bd494438b..03dfabd8e4 100644 --- a/frontend/src/component/api-token/ApiTokenList/secret.jsx +++ b/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 (
- {show ? ( - - ) : ( - ************************************ - )} - - - - + ************************************
); } diff --git a/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx b/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx index a29cb029f8..146f5ec2a6 100644 --- a/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx +++ b/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={ - } + />} > + + Important! In order for your application to ONLY 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. + {' '} + +