chore(rna): remove copy button from SetupTOTP (#3018)

aws-amplify · Nov 20, 2022 · ad433da · ad433da
1 parent 0ff6cbc
commit ad433da
Show file tree

Hide file tree

Showing 10 changed files with 22 additions and 559 deletions.
diff --git a/examples/react-native/ios/Podfile.lock b/examples/react-native/ios/Podfile.lock
@@ -361,8 +361,6 @@ PODS:
     - React-Core
   - RNCAsyncStorage (1.17.10):
     - React-Core
-  - RNCClipboard (1.11.1):
-    - React-Core
   - RNCPicker (2.4.8):
     - React-Core
   - SocketRocket (0.6.0)
@@ -430,7 +428,6 @@ DEPENDENCIES:
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - RNAWSCognito (from `../node_modules/amazon-cognito-identity-js`)
   - "RNCAsyncStorage (from `../../../node_modules/@react-native-async-storage/async-storage`)"
-  - "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)"
   - "RNCPicker (from `../node_modules/@react-native-picker/picker`)"
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
@@ -523,8 +520,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/amazon-cognito-identity-js"
   RNCAsyncStorage:
     :path: "../../../node_modules/@react-native-async-storage/async-storage"
-  RNCClipboard:
-    :path: "../node_modules/@react-native-clipboard/clipboard"
   RNCPicker:
     :path: "../node_modules/@react-native-picker/picker"
   Yoga:
@@ -579,7 +574,6 @@ SPEC CHECKSUMS:
   ReactCommon: bf2888a826ceedf54b99ad1b6182d1bc4a8a3984
   RNAWSCognito: 9554c635fc9bfdc86d5d40084c792c318c9706bf
   RNCAsyncStorage: 0c357f3156fcb16c8589ede67cc036330b6698ca
-  RNCClipboard: 2834e1c4af68697089cdd455ee4a4cdd198fa7dd
   RNCPicker: 0bf8ef8f7800524f32d2bb2a8bcadd53eda0ecd1
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
   Yoga: 17cd9a50243093b547c1e539c749928dd68152da

diff --git a/examples/react-native/metro.config.js b/examples/react-native/metro.config.js
@@ -103,10 +103,6 @@ config.resolver.extraNodeModules = {
   '@xstate/react': path.resolve(__dirname, 'node_modules/@xstate/react'),
 
   // depedendencies with native modules
-  '@react-native-clipboard/clipboard': path.resolve(
-    __dirname,
-    'node_modules/@react-native-clipboard/clipboard'
-  ),
   '@react-native-picker/picker': path.resolve(
     __dirname,
     'node_modules/@react-native-picker/picker'

diff --git a/examples/react-native/package.json b/examples/react-native/package.json
@@ -17,7 +17,6 @@
     "@aws-amplify/ui-react-core": "*",
     "@aws-amplify/ui-react-native": "*",
     "@react-native-async-storage/async-storage": "^1.17.5",
-    "@react-native-clipboard/clipboard": "^1.11.1",
     "@react-native-community/netinfo": "^8.3.0",
     "@react-native-picker/picker": "^2.4.8",
     "@xstate/react": "3.0.0",

diff --git a/packages/react-native/package.json b/packages/react-native/package.json
@@ -19,7 +19,6 @@
     "@babel/cli": "^7.17.10",
     "@babel/core": "^7.17.10",
     "@babel/preset-env": "^7.17.10",
-    "@react-native-clipboard/clipboard": "^1.11.1",
     "@react-native-picker/picker": "^2.4.8",
     "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/react-native": "^11.1.0",

diff --git a/packages/react-native/src/Authenticator/Defaults/SetupTOTP/SetupTOTP.tsx b/packages/react-native/src/Authenticator/Defaults/SetupTOTP/SetupTOTP.tsx
@@ -1,12 +1,10 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { Text, View } from 'react-native';
-import Clipboard from '@react-native-clipboard/clipboard';
+import { Text } from 'react-native';
 
 import { Logger } from 'aws-amplify';
 import { authenticatorTextUtil } from '@aws-amplify/ui';
 
-import { icons } from '../../../assets';
-import { Button, ErrorMessage, IconButton } from '../../../primitives';
+import { Button, ErrorMessage } from '../../../primitives';
 
 import {
   DefaultFooter,
@@ -53,44 +51,27 @@ const SetupTOTP: DefaultSetupTOTPComponent = ({
   const [secretKey, setSecretKey] = useState<string | null>(null);
 
   const getSecretKey = useCallback(async () => {
-    if (secretKey) {
-      return;
-    }
     try {
       const newSecretKey = await getTotpSecretCode();
       setSecretKey(newSecretKey);
     } catch (error) {
       logger.error(error);
     }
-  }, [getTotpSecretCode, secretKey]);
+  }, [getTotpSecretCode]);
 
   useEffect(() => {
     if (!secretKey) {
       getSecretKey();
     }
   }, [getSecretKey, secretKey]);
 
-  const copyText = () => {
-    if (secretKey) {
-      Clipboard.setString(secretKey);
-    }
-  };
-
   return (
     <>
       <Header>{getSetupTOTPText()}</Header>
       {secretKey ? (
-        <View style={styles.secretKeyContainer}>
-          <Text style={styles.secretKeyText}>{secretKey}</Text>
-          <IconButton
-            color="teal"
-            iconStyle={styles.copyIcon}
-            onPress={copyText}
-            size={24}
-            source={icons.copy}
-            testID="amplify__copy-text-button"
-          />
-        </View>
+        <Text selectable style={styles.secretKeyText}>
+          {secretKey}
+        </Text>
       ) : null}
       <FormFields fields={fieldsWithHandlers} isPending={isPending} />
       {error ? <ErrorMessage>{error}</ErrorMessage> : null}

diff --git a/packages/react-native/src/Authenticator/Defaults/SetupTOTP/__tests__/SetupTOTP.spec.tsx b/packages/react-native/src/Authenticator/Defaults/SetupTOTP/__tests__/SetupTOTP.spec.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { fireEvent, render, waitFor } from '@testing-library/react-native';
-import Clipboard from '@react-native-clipboard/clipboard';
 import { authenticatorTextUtil } from '@aws-amplify/ui';
 
 import { SetupTOTP } from '..';
@@ -36,7 +35,6 @@ const {
   getSetupTOTPText,
 } = authenticatorTextUtil;
 
-const clipboardSetStringSpy = jest.spyOn(Clipboard, 'setString');
 const SECRET_KEY = 'secretKey';
 const mockGetTotpSecretCode = jest.fn().mockResolvedValue(SECRET_KEY);
 
@@ -80,7 +78,7 @@ describe('SetupTOTP', () => {
     });
   });
 
-  it('renders correct text based on isPending', async () => {
+  it('shows the correct submit button based on isPending', async () => {
     const { queryByText } = render(<SetupTOTP {...props} isPending />);
 
     await waitFor(() => {
@@ -89,29 +87,21 @@ describe('SetupTOTP', () => {
     });
   });
 
-  it('renders as expected with secret code', async () => {
-    const { toJSON, getByTestId, queryByText } = render(
+  it('handles secret code generation as expected', async () => {
+    const { queryByText, rerender } = render(
       <SetupTOTP {...props} getTotpSecretCode={mockGetTotpSecretCode} />
     );
-    await waitFor(() => {
-      expect(toJSON()).toMatchSnapshot();
-
+    await waitFor(async () => {
+      expect(mockGetTotpSecretCode).toHaveBeenCalledTimes(1);
       expect(queryByText(SECRET_KEY)).toBeDefined();
-      expect(getByTestId('amplify__copy-text-button')).toBeDefined();
-    });
-  });
-
-  it('calls clipboard setString on copy button press', async () => {
-    const { getByTestId } = render(
-      <SetupTOTP {...props} getTotpSecretCode={mockGetTotpSecretCode} />
-    );
-
-    await waitFor(() => {
-      const copyTextButton = getByTestId('amplify__copy-text-button');
-
-      expect(copyTextButton).toBeDefined();
-      fireEvent(copyTextButton, 'press');
-      expect(clipboardSetStringSpy).toHaveBeenCalledTimes(1);
+      expect(queryByText(SECRET_KEY)?.props.selectable).toBe(true);
+
+      rerender(
+        <SetupTOTP {...props} getTotpSecretCode={mockGetTotpSecretCode} />
+      );
+      await waitFor(() => {
+        expect(mockGetTotpSecretCode).toHaveBeenCalledTimes(1);
+      });
     });
   });
 });