refactor: use copy library and add explicit export

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<IApiToken>();
-    const { locationSettings } = useLocationSettings()
+    const { locationSettings } = useLocationSettings();
     const { setToastData } = useToast();
     const { tokens, loading, refetch, error } = useApiTokens();
     const { deleteToken } = useApiTokensApi();
@@ -315,5 +315,3 @@ const ApiTokenList = () => {
         </div>
     );
 };
-
-export default ApiTokenList;

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 = ({
         </Dialogue>
     );
 };
-
-export default ConfirmToken;

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(() => {
+    const copyToken = () => {
+        if (copy(token)) {
             setToastData({
                 type: 'success',
                 title: 'Token copied',
                 text: `Token is copied to clipboard`,
             });
-                })
-                .catch(() => {
-                    setError();
-                });
-        } catch (e) {
-            setError();
-        }
-    };
-
-    const setError = () =>
+        } else
             setToastData({
                 type: 'error',
                 title: 'Could not copy token',
             });
+    };
 
     return (
         <div
@@ -48,11 +38,9 @@ const UserToken = ({ token }: IUserTokenProps) => {
             }}
         >
             {token}
-            <IconButton onClick={handleCopy}>
+            <IconButton onClick={copyToken}>
                 <CopyIcon />
             </IconButton>
         </div>
     );
 };
-
-export default UserToken;

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}
             >
-                <PermissionButton
-                    permission={ADMIN}
-                    type="submit"
-                >
+                <PermissionButton permission={ADMIN} type="submit">
                     Create token
                 </PermissionButton>
             </ApiTokenForm>
@@ -110,5 +107,3 @@ const CreateApiToken = () => {
         </FormTemplate>
     );
 };
-
-export default CreateApiToken;

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';

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';