Mobile: Mark plugin support as in beta (#10585)

.eslintignore

@@ -515,6 +515,7 @@ packages/app-mobile/commands/scrollToHash.js
 packages/app-mobile/commands/util/goToNote.js
 packages/app-mobile/components/ActionButton.js
 packages/app-mobile/components/BackButtonDialogBox.js
+packages/app-mobile/components/BetaChip.js
 packages/app-mobile/components/CameraView.js
 packages/app-mobile/components/DismissibleDialog.js
 packages/app-mobile/components/Dropdown.test.js

.gitignore

@@ -494,6 +494,7 @@ packages/app-mobile/commands/scrollToHash.js
 packages/app-mobile/commands/util/goToNote.js
 packages/app-mobile/components/ActionButton.js
 packages/app-mobile/components/BackButtonDialogBox.js
+packages/app-mobile/components/BetaChip.js
 packages/app-mobile/components/CameraView.js
 packages/app-mobile/components/DismissibleDialog.js
 packages/app-mobile/components/Dropdown.test.js

packages/app-mobile/components/BetaChip.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { themeStyle } from './global-style';
+import { useMemo } from 'react';
+import { _ } from '@joplin/lib/locale';
+import { connect } from 'react-redux';
+import { AppState } from '../utils/types';
+
+interface Props {
+	themeId: number;
+	size: number;
+}
+
+const useStyles = (themeId: number, size: number) => {
+	return useMemo(() => {
+		const theme = themeStyle(themeId);
+
+		return StyleSheet.create({
+			container: {
+				borderColor: theme.color4,
+				color: theme.color4,
+				fontSize: size,
+				opacity: 0.8,
+				borderRadius: 12,
+				borderWidth: 1,
+				padding: 4,
+				flexGrow: 0,
+				textAlign: 'center',
+				textAlignVertical: 'center',
+			},
+		});
+	}, [themeId, size]);
+};
+
+const BetaChip: React.FC<Props> = props => {
+	const styles = useStyles(props.themeId, props.size);
+	return <View><Text style={styles.container}>{_('Beta')}</Text></View>;
+};
+
+export default connect((state: AppState) => ({ themeId: state.settings.theme }))(BetaChip);

packages/app-mobile/components/screens/ConfigScreen/SectionSelector.tsx

@@ -8,6 +8,7 @@ import { settingsSections } from '@joplin/lib/components/shared/config/config-sh
 import Icon from '../../Icon';
 import { _ } from '@joplin/lib/locale';
 import { TouchableRipple } from 'react-native-paper';
+import BetaChip from '../../BetaChip';
 
 interface Props {
 	styles: ConfigScreenStyles;
@@ -46,6 +47,9 @@ const SectionSelector: FunctionComponent<Props> = props => {
 			/>
 		) : null;
 
+		const isBeta = item.name === 'plugins';
+		const betaChip = isBeta ? <BetaChip size={10}/> : null;
+
 		return (
 			<TouchableRipple
 				key={section.name}
@@ -62,12 +66,16 @@ const SectionSelector: FunctionComponent<Props> = props => {
 						style={styles.sidebarIcon}
 					/>
 					<View style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
+						<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
 							<Text
 								numberOfLines={1}
 								style={titleStyle}
 							>
 								{label}
 							</Text>
+
+							{betaChip}
+						</View>
 						<Text
 							style={styles.sidebarButtonDescriptionText}
 							numberOfLines={1}

packages/app-mobile/components/screens/ConfigScreen/plugins/PluginStates.tsx

@@ -12,6 +12,7 @@ import useRepoApi from './utils/useRepoApi';
 import RepositoryApi from '@joplin/lib/services/plugins/RepositoryApi';
 import PluginInfoModal from './PluginInfoModal';
 import usePluginCallbacks from './utils/usePluginCallbacks';
+import BetaChip from '../../../BetaChip';
 
 interface Props {
 	themeId: number;
@@ -196,6 +197,11 @@ const PluginStates: React.FC<Props> = props => {
 	return (
 		<View>
 			{renderRepoApiStatus()}
+			<Banner visible={true} elevation={0} icon={() => <BetaChip size={13}/>}>
+				<Text>Plugin support on mobile is still in beta. Plugins may cause performance issues. Some have only partial support for Joplin mobile.</Text>
+			</Banner>
+			<Divider/>
+
 			<List.AccordionGroup>
 				<InstalledItemWrapper
 					title={_('Installed plugins')}