From 37b245d461958ced261210506a5301fa697ee205 Mon Sep 17 00:00:00 2001 From: Sudhanva-Nadiger <93595710+Sudhanva-Nadiger@users.noreply.github.com> Date: Wed, 26 Jul 2023 18:30:06 +0530 Subject: [PATCH] Feat: add copy to clipboard button in "about" mattermost page (#7134) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: add copy to clip board button in about page * add intl format text * make suggested changes. - fix: wrap copyToClipBoard function in useCallBack - remove annonymous function onPress, provide function pointer - make code readable in copyToClipBoard function * formatting * small fix * change copy to clipboard position - created a custom button eith icon and text - usd button theme color * button styling * divider color * use predefined btn element * Add e2e test for copy info button * feat: refactor the styles for thin lines - fix: change touchable opacity to view - add margin top to footer text * change icon size to 15 * remove unnecessary view * add config to dependency of callback * suggeste changes on onClick func * modified en.json file after running i18-extract * Improve translations * Address feedback * Fix non updated default messages --------- Co-authored-by: Daniel Espino García --- app/screens/settings/about/about.tsx | 89 ++++++++++++++++++---------- assets/base/i18n/en.json | 17 ++++-- detox/e2e/support/ui/screen/about.ts | 2 + detox/e2e/test/account/about.e2e.ts | 2 + 4 files changed, 73 insertions(+), 37 deletions(-) diff --git a/app/screens/settings/about/about.tsx b/app/screens/settings/about/about.tsx index 6eb9d8579..964067e52 100644 --- a/app/screens/settings/about/about.tsx +++ b/app/screens/settings/about/about.tsx @@ -1,21 +1,23 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. +import Clipboard from '@react-native-clipboard/clipboard'; import React, {useCallback, useMemo} from 'react'; import {useIntl} from 'react-intl'; import {Alert, Text, View} from 'react-native'; import DeviceInfo from 'react-native-device-info'; import Config from '@assets/config.json'; +import Button from '@components/button'; import CompassIcon from '@components/compass_icon'; import FormattedText from '@components/formatted_text'; import SettingContainer from '@components/settings/container'; -import SettingSeparator from '@components/settings/separator'; import AboutLinks from '@constants/about_links'; import {useTheme} from '@context/theme'; import useAndroidHardwareBackHandler from '@hooks/android_back_handler'; import {t} from '@i18n'; import {popTopScreen} from '@screens/navigation'; +import {buttonBackgroundStyle, buttonTextStyle} from '@utils/buttonStyles'; import {preventDoubleTap} from '@utils/tap'; import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; import {typography} from '@utils/typography'; @@ -80,7 +82,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { footerText: { color: changeOpacity(theme.centerChannelColor, 0.64), ...typography('Body', 50), - marginBottom: 10, + marginVertical: 10, }, copyrightText: { marginBottom: 0, @@ -92,6 +94,17 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { group: { flexDirection: 'row', }, + copyInfoButtonContainer: { + width: 120, + marginTop: 10, + position: 'relative', + }, + thinLine: { + height: 0.2, + backgroundColor: changeOpacity(theme.centerChannelColor, 0.2), + alignSelf: 'stretch', + marginVertical: 20, + }, }; }); @@ -146,31 +159,31 @@ const About = ({componentId, config, license}: AboutProps) => { const buildNumber = config.BuildNumber; const version = config.Version; - let id = t('settings.about.server.version.value'); - let defaultMessage = '{version} (Build {number})'; - let values: {version: string; number?: string} = { - version, - number: buildNumber, - }; - if (buildNumber === version) { - id = t('settings.about.serverVersionNoBuild'); - defaultMessage = '{version}'; - values = { - version, - number: undefined, - }; + return version; } - return { - id, defaultMessage, values, - }; - }, [config]); + return intl.formatMessage({id: 'settings.about.server.version.value', defaultMessage: '{version} (Build {buildNumber})'}, {version, buildNumber}); + }, [config, intl]); useAndroidHardwareBackHandler(componentId, () => { popTopScreen(componentId); }); + const copyToClipboard = useCallback( + () => { + const appVersion = intl.formatMessage({id: 'settings.about.app.version', defaultMessage: 'App Version: {version} (Build {number})'}, {version: DeviceInfo.getVersion(), number: DeviceInfo.getBuildNumber()}); + const buildNumber = config.BuildNumber; + const version = config.Version; + const server = buildNumber === version ? intl.formatMessage({id: 'settings.about.server.version.noBuild', defaultMessage: 'Server Version: {version}'}, {version}) : intl.formatMessage({id: 'settings.about.server.version', defaultMessage: 'Server Version: {version} (Build {buildNumber})'}, {version, buildNumber}); + const database = intl.formatMessage({id: 'settings.about.database', defaultMessage: 'Database: {driverName}'}, {driverName: config.SQLDriverName}); + const databaseSchemaVersion = intl.formatMessage({id: 'settings.about.database.schema', defaultMessage: 'Database Schema Version: {version}'}, {version: config.SchemaVersion}); + const copiedString = `${appVersion}\n${server}\n${database}\n${databaseSchemaVersion}`; + Clipboard.setString(copiedString); + }, + [intl, config], + ); + return ( @@ -185,21 +198,24 @@ const About = ({componentId, config, license}: AboutProps) => { license={license} /> - + + - {intl.formatMessage({id: 'settings.about.version', defaultMessage: 'App Version:'})} + {intl.formatMessage({id: 'settings.about.app.version.title', defaultMessage: 'App Version:'})} - {intl.formatMessage({id: 'settings.about.build', defaultMessage: '{version} (Build {number})'}, + {intl.formatMessage({id: 'settings.about.app.version.value', defaultMessage: '{version} (Build {number})'}, {version: DeviceInfo.getVersion(), number: DeviceInfo.getBuildNumber()})} @@ -208,13 +224,13 @@ const About = ({componentId, config, license}: AboutProps) => { style={styles.leftHeading} testID='about.server_version.title' > - {intl.formatMessage({id: 'settings.about.server.version.desc', defaultMessage: 'Server Version:'})} + {intl.formatMessage({id: 'settings.about.server.version.title', defaultMessage: 'Server Version:'})} - {intl.formatMessage({id: serverVersion.id, defaultMessage: serverVersion.defaultMessage}, serverVersion.values)} + {serverVersion} @@ -222,13 +238,13 @@ const About = ({componentId, config, license}: AboutProps) => { style={styles.leftHeading} testID='about.database.title' > - {intl.formatMessage({id: 'settings.about.database', defaultMessage: 'Database:'})} + {intl.formatMessage({id: 'settings.about.database.title', defaultMessage: 'Database:'})} - {intl.formatMessage({id: 'settings.about.database.value', defaultMessage: `${config.SQLDriverName}`})} + {config.SQLDriverName} @@ -236,18 +252,26 @@ const About = ({componentId, config, license}: AboutProps) => { style={styles.leftHeading} testID='about.database_schema_version.title' > - {intl.formatMessage({id: 'settings.about.database.schema', defaultMessage: 'Database Schema Version:'})} + {intl.formatMessage({id: 'settings.about.database.schema.title', defaultMessage: 'Database Schema Version:'})} - {intl.formatMessage({ - id: 'settings.about.database.schema.value', - defaultMessage: `${config.SchemaVersion}`, - })} + {config.SchemaVersion} +