feat: Add copy button on code view (#8244)

* feat: Add copy button on code view

* docs: Update localization file

* Update app/screens/code/index.tsx

Co-authored-by: Rahim Rahman <rahim.rahman@mattermost.com>

* refactor: Update deps array

---------

Co-authored-by: Rahim Rahman <rahim.rahman@mattermost.com>

app/constants/snack_bar.ts

@@ -6,6 +6,7 @@ import keyMirror from '@utils/key_mirror';
 
 export const SNACK_BAR_TYPE = keyMirror({
     ADD_CHANNEL_MEMBERS: null,
+    CODE_COPIED: null,
     FAVORITE_CHANNEL: null,
     FOLLOW_THREAD: null,
     INFO_COPIED: null,
@@ -41,6 +42,12 @@ export const SNACK_BAR_CONFIG: Record<string, SnackBarConfig> = {
         iconName: 'check',
         canUndo: false,
     },
+    CODE_COPIED: {
+        id: t('snack.bar.code.copied'),
+        defaultMessage: 'Code copied to clipboard',
+        iconName: 'content-copy',
+        canUndo: false,
+    },
     FAVORITE_CHANNEL: {
         id: t('snack.bar.favorited.channel'),
         defaultMessage: 'This channel was favorited',

app/screens/code/index.tsx

@@ -2,13 +2,19 @@
 // See LICENSE.txt for license information.
 
 import {useManagedConfig} from '@mattermost/react-native-emm';
-import React from 'react';
+import Clipboard from '@react-native-clipboard/clipboard';
+import React, {useCallback, useEffect} from 'react';
 import {StyleSheet, type TextStyle} from 'react-native';
 import {SafeAreaView, type Edge} from 'react-native-safe-area-context';
 
+import CompassIcon from '@app/components/compass_icon';
+import {SNACK_BAR_TYPE} from '@app/constants/snack_bar';
+import {useTheme} from '@app/context/theme';
+import useNavButtonPressed from '@app/hooks/navigation_button_pressed';
+import {showSnackBar} from '@app/utils/snack_bar';
 import SyntaxHiglight from '@components/syntax_highlight';
 import useAndroidHardwareBackHandler from '@hooks/android_back_handler';
-import {popTopScreen} from '@screens/navigation';
+import {popTopScreen, setButtons} from '@screens/navigation';
 
 import type {AvailableScreens} from '@typings/screens/navigation';
 
@@ -19,6 +25,8 @@ type Props = {
     textStyle: TextStyle;
 }
 
+const COPY_CODE_BUTTON = 'copy-code';
+
 const edges: Edge[] = ['left', 'right'];
 
 const styles = StyleSheet.create({
@@ -26,9 +34,32 @@ const styles = StyleSheet.create({
 });
 
 const Code = ({code, componentId, language, textStyle}: Props) => {
+    const theme = useTheme();
     const managedConfig = useManagedConfig<ManagedConfig>();
     useAndroidHardwareBackHandler(componentId, popTopScreen);
 
+    const copyToClipboard = useCallback(() => {
+        if (!code) {
+            return;
+        }
+
+        Clipboard.setString(code);
+        showSnackBar({barType: SNACK_BAR_TYPE.CODE_COPIED, sourceScreen: componentId});
+    }, [code, componentId]);
+
+    useNavButtonPressed(COPY_CODE_BUTTON, componentId, copyToClipboard, [componentId, copyToClipboard]);
+
+    useEffect(() => {
+        setButtons(componentId, {
+            rightButtons: [
+                {
+                    id: COPY_CODE_BUTTON,
+                    icon: CompassIcon.getImageSourceSync('content-copy', 24, theme.centerChannelColor),
+                },
+            ],
+        });
+    }, [theme.centerChannelColor, componentId]);
+
     return (
         <SafeAreaView
             edges={edges}

assets/base/i18n/en.json

@@ -1091,6 +1091,7 @@
   "skintone_selector.tooltip.title": "Choose your default skin tone",
   "smobile.search.recent_title": "Recent searches in {teamName}",
   "snack.bar.channel.members.added": "{numMembers, number} {numMembers, plural, one {member} other {members}} added",
+  "snack.bar.code.copied": "Code copied to clipboard",
   "snack.bar.favorited.channel": "This channel was favorited",
   "snack.bar.following.thread": "Thread followed",
   "snack.bar.info.copied": "Info copied to clipboard",