Merge pull request #704 from Unleash/fix/api-token-copy

refactor: use copy library and add explicit export
Unleash · Feb 15, 2022 · c76ed5c · c76ed5c
2 parents 60a610d + def7dbf
commit c76ed5c
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 47 deletions.
diff --git 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<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;
diff --git a/frontend/src/component/admin/api-token/ConfirmToken/ConfirmToken.tsx b/frontend/src/component/admin/api-token/ConfirmToken/ConfirmToken.tsx
@@ -1,15 +1,15 @@
 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;
     closeConfirm: () => void;
     token: string;
 }
 
-const ConfirmToken = ({
+export const ConfirmToken = ({
     open,
     closeConfirm,
     token,
@@ -31,5 +31,3 @@ const ConfirmToken = ({
         </Dialogue>
     );
 };
-
-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
@@ -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 (
         <div
@@ -48,11 +38,9 @@ const UserToken = ({ token }: IUserTokenProps) => {
             }}
         >
             {token}
-            <IconButton onClick={handleCopy}>
+            <IconButton onClick={copyToken}>
                 <CopyIcon />
             </IconButton>
         </div>
     );
 };
-
-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
@@ -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;
diff --git a/frontend/src/component/admin/api/index.js b/frontend/src/component/admin/api/index.js
@@ -1,4 +1,4 @@
-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
@@ -25,7 +25,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';