From 99ab4ed67a314879c14c627bad4221cea7676d8d Mon Sep 17 00:00:00 2001 From: Youssef Date: Fri, 11 Feb 2022 15:15:17 +0100 Subject: [PATCH] refactor: use copy library and add explicit export --- .../api-token/ApiTokenList/ApiTokenList.tsx | 8 ++-- .../api-token/ConfirmToken/ConfirmToken.tsx | 6 +-- .../ConfirmToken/UserToken/UserToken.tsx | 44 +++++++------------ .../CreateApiToken/CreateApiToken.tsx | 11 ++--- frontend/src/component/admin/api/index.js | 2 +- frontend/src/component/menu/routes.js | 2 +- 6 files changed, 26 insertions(+), 47 deletions(-) diff --git a/frontend/src/component/admin/api-token/ApiTokenList/ApiTokenList.tsx b/frontend/src/component/admin/api-token/ApiTokenList/ApiTokenList.tsx index 79c93923a4de..7e97a831b1e3 100644 --- a/frontend/src/component/admin/api-token/ApiTokenList/ApiTokenList.tsx +++ b/frontend/src/component/admin/api-token/ApiTokenList/ApiTokenList.tsx @@ -31,7 +31,7 @@ import Dialogue from '../../../common/Dialogue'; import { CREATE_API_TOKEN_BUTTON } from '../../../../testIds'; import { Alert } from '@material-ui/lab'; import copy from 'copy-to-clipboard'; -import { useLocationSettings } from "../../../../hooks/useLocationSettings"; +import { useLocationSettings } from '../../../../hooks/useLocationSettings'; interface IApiToken { createdAt: Date; @@ -42,13 +42,13 @@ interface IApiToken { environment: string; } -const ApiTokenList = () => { +export const ApiTokenList = () => { const styles = useStyles(); const { hasAccess } = useContext(AccessContext); const { uiConfig } = useUiConfig(); const [showDelete, setShowDelete] = useState(false); const [delToken, setDeleteToken] = useState(); - const { locationSettings } = useLocationSettings() + const { locationSettings } = useLocationSettings(); const { setToastData } = useToast(); const { tokens, loading, refetch, error } = useApiTokens(); const { deleteToken } = useApiTokensApi(); @@ -315,5 +315,3 @@ const ApiTokenList = () => { ); }; - -export default ApiTokenList; diff --git a/frontend/src/component/admin/api-token/ConfirmToken/ConfirmToken.tsx b/frontend/src/component/admin/api-token/ConfirmToken/ConfirmToken.tsx index 56414c698b50..500c074bbb25 100644 --- a/frontend/src/component/admin/api-token/ConfirmToken/ConfirmToken.tsx +++ b/frontend/src/component/admin/api-token/ConfirmToken/ConfirmToken.tsx @@ -1,7 +1,7 @@ import { Typography } from '@material-ui/core'; import { useCommonStyles } from '../../../../common.styles'; import Dialogue from '../../../common/Dialogue'; -import UserToken from './UserToken/UserToken'; +import { UserToken } from './UserToken/UserToken'; interface IConfirmUserLink { open: boolean; @@ -9,7 +9,7 @@ interface IConfirmUserLink { token: string; } -const ConfirmToken = ({ +export const ConfirmToken = ({ open, closeConfirm, token, @@ -31,5 +31,3 @@ const ConfirmToken = ({ ); }; - -export default ConfirmToken; diff --git a/frontend/src/component/admin/api-token/ConfirmToken/UserToken/UserToken.tsx b/frontend/src/component/admin/api-token/ConfirmToken/UserToken/UserToken.tsx index d818dc136c50..80de357f6fc3 100644 --- a/frontend/src/component/admin/api-token/ConfirmToken/UserToken/UserToken.tsx +++ b/frontend/src/component/admin/api-token/ConfirmToken/UserToken/UserToken.tsx @@ -1,38 +1,28 @@ import { IconButton } from '@material-ui/core'; import CopyIcon from '@material-ui/icons/FileCopy'; +import copy from 'copy-to-clipboard'; import useToast from '../../../../../hooks/useToast'; interface IUserTokenProps { token: string; } -const UserToken = ({ token }: IUserTokenProps) => { +export const UserToken = ({ token }: IUserTokenProps) => { const { setToastData } = useToast(); - - const handleCopy = () => { - try { - return navigator.clipboard - .writeText(token) - .then(() => { - setToastData({ - type: 'success', - title: 'Token copied', - text: `Token is copied to clipboard`, - }); - }) - .catch(() => { - setError(); - }); - } catch (e) { - setError(); - } - }; - const setError = () => - setToastData({ - type: 'error', - title: 'Could not copy token', - }); + const copyToken = () => { + if (copy(token)) { + setToastData({ + type: 'success', + title: 'Token copied', + text: `Token is copied to clipboard`, + }); + } else + setToastData({ + type: 'error', + title: 'Could not copy token', + }); + }; return (
{ }} > {token} - +
); }; - -export default UserToken; diff --git a/frontend/src/component/admin/api-token/CreateApiToken/CreateApiToken.tsx b/frontend/src/component/admin/api-token/CreateApiToken/CreateApiToken.tsx index b100bf166814..85f2ff0e0e91 100644 --- a/frontend/src/component/admin/api-token/CreateApiToken/CreateApiToken.tsx +++ b/frontend/src/component/admin/api-token/CreateApiToken/CreateApiToken.tsx @@ -7,11 +7,11 @@ import useToast from '../../../../hooks/useToast'; import useApiTokensApi from '../../../../hooks/api/actions/useApiTokensApi/useApiTokensApi'; import PermissionButton from '../../../common/PermissionButton/PermissionButton'; import { ADMIN } from '../../../providers/AccessProvider/permissions'; -import ConfirmToken from '../ConfirmToken/ConfirmToken'; +import { ConfirmToken } from '../ConfirmToken/ConfirmToken'; import { useState } from 'react'; import { scrollToTop } from '../../../common/util'; -const CreateApiToken = () => { +export const CreateApiToken = () => { const { setToastApiError } = useToast(); const { uiConfig } = useUiConfig(); const history = useHistory(); @@ -95,10 +95,7 @@ const CreateApiToken = () => { mode="Create" clearErrors={clearErrors} > - + Create token @@ -110,5 +107,3 @@ const CreateApiToken = () => { ); }; - -export default CreateApiToken; diff --git a/frontend/src/component/admin/api/index.js b/frontend/src/component/admin/api/index.js index 0cc902332c55..e66c6f590901 100644 --- a/frontend/src/component/admin/api/index.js +++ b/frontend/src/component/admin/api/index.js @@ -1,5 +1,5 @@ import PropTypes from 'prop-types'; -import ApiTokenList from '../api-token/ApiTokenList/ApiTokenList'; +import { ApiTokenList } from '../api-token/ApiTokenList/ApiTokenList'; import AdminMenu from '../menu/AdminMenu'; import ConditionallyRender from '../../common/ConditionallyRender'; import AccessContext from '../../../contexts/AccessContext'; diff --git a/frontend/src/component/menu/routes.js b/frontend/src/component/menu/routes.js index 618a6dd74fc6..fbc8cd01baa8 100644 --- a/frontend/src/component/menu/routes.js +++ b/frontend/src/component/menu/routes.js @@ -27,7 +27,7 @@ import CreateProjectRole from '../admin/project-roles/CreateProjectRole/CreatePr import EditProjectRole from '../admin/project-roles/EditProjectRole/EditProjectRole'; import CreateUser from '../admin/users/CreateUser/CreateUser'; import EditUser from '../admin/users/EditUser/EditUser'; -import CreateApiToken from '../admin/api-token/CreateApiToken/CreateApiToken'; +import { CreateApiToken } from '../admin/api-token/CreateApiToken/CreateApiToken'; import CreateEnvironment from '../environments/CreateEnvironment/CreateEnvironment'; import EditEnvironment from '../environments/EditEnvironment/EditEnvironment'; import CreateContext from '../context/CreateContext/CreateContext';