Mobile: Plugins: Show information page before enabling plugin support (#10348)

.eslintignore

@@ -604,6 +604,7 @@ packages/app-mobile/components/screens/ConfigScreen/SettingItem.js
 packages/app-mobile/components/screens/ConfigScreen/SettingsButton.js
 packages/app-mobile/components/screens/ConfigScreen/SettingsToggle.js
 packages/app-mobile/components/screens/ConfigScreen/configScreenStyles.js
+packages/app-mobile/components/screens/ConfigScreen/plugins/EnablePluginSupportPage.js
 packages/app-mobile/components/screens/ConfigScreen/plugins/PluginBox/ActionButton.js
 packages/app-mobile/components/screens/ConfigScreen/plugins/PluginBox/PluginInfoButton.js
 packages/app-mobile/components/screens/ConfigScreen/plugins/PluginBox/index.js

.gitignore

@@ -584,6 +584,7 @@ packages/app-mobile/components/screens/ConfigScreen/SettingItem.js
 packages/app-mobile/components/screens/ConfigScreen/SettingsButton.js
 packages/app-mobile/components/screens/ConfigScreen/SettingsToggle.js
 packages/app-mobile/components/screens/ConfigScreen/configScreenStyles.js
+packages/app-mobile/components/screens/ConfigScreen/plugins/EnablePluginSupportPage.js
 packages/app-mobile/components/screens/ConfigScreen/plugins/PluginBox/ActionButton.js
 packages/app-mobile/components/screens/ConfigScreen/plugins/PluginBox/PluginInfoButton.js
 packages/app-mobile/components/screens/ConfigScreen/plugins/PluginBox/index.js

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

@@ -32,6 +32,7 @@ import PluginStates, { getSearchText as getPluginStatesSearchText } from './plug
 import PluginUploadButton, { canInstallPluginsFromFile, buttonLabel as pluginUploadButtonSearchText } from './plugins/PluginUploadButton';
 import NoteImportButton, { importButtonDefaultTitle, importButtonDescription } from './NoteExportSection/NoteImportButton';
 import SectionDescription from './SectionDescription';
+import EnablePluginSupportPage from './plugins/EnablePluginSupportPage';
 import getPackageInfo from '../../../utils/getPackageInfo';
 import versionInfo from '@joplin/lib/versionInfo';
 
@@ -483,29 +484,44 @@ class ConfigScreenComponent extends BaseScreenComponent<ConfigScreenProps, Confi
 				shared.updateSettingValue(this, pluginStatesKey, value);
 			};
 
-			addSettingComponent(
-				<PluginStates
-					key={'plugin-states'}
-					styles={this.styles()}
-					themeId={this.props.themeId}
-					pluginSettings={settings[pluginStatesKey]}
-
-					updatePluginStates={updatePluginStates}
-					shouldShowBasedOnSearchQuery={this.state.searching ? matchesSearchQuery : null}
-				/>,
-				getPluginStatesSearchText(),
-			);
-
-			if (canInstallPluginsFromFile()) {
+			if (settings['plugins.pluginSupportEnabled']) {
 				addSettingComponent(
-					<PluginUploadButton
-						key='plugins-install-from-file'
+					<PluginStates
+						key={'plugin-states'}
+						styles={this.styles()}
+						themeId={this.props.themeId}
 						pluginSettings={settings[pluginStatesKey]}
+
 						updatePluginStates={updatePluginStates}
+						shouldShowBasedOnSearchQuery={this.state.searching ? matchesSearchQuery : null}
 					/>,
-					pluginUploadButtonSearchText(),
+					getPluginStatesSearchText(),
+				);
+
+				if (canInstallPluginsFromFile()) {
+					addSettingComponent(
+						<PluginUploadButton
+							key='plugins-install-from-file'
+							pluginSettings={settings[pluginStatesKey]}
+							updatePluginStates={updatePluginStates}
+						/>,
+						pluginUploadButtonSearchText(),
+					);
+				}
+			} else {
+				const enablePluginSupport = () => {
+					shared.updateSettingValue(this, 'plugins.pluginSupportEnabled', true);
+				};
+				addSettingComponent(
+					<EnablePluginSupportPage
+						key='plugin-support-disabled-screen'
+						themeId={this.props.themeId}
+						onEnablePluginSupport={enablePluginSupport}
+					/>,
+					['plugins', _('Plugins')],
 				);
 			}
+
 		}
 
 		if (section.name === 'sync') {

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

@@ -0,0 +1,137 @@
+import { _ } from '@joplin/lib/locale';
+import { themeStyle } from '../../../global-style';
+import * as React from 'react';
+import { useMemo } from 'react';
+import { Linking, View, StyleSheet, ViewStyle, TextStyle } from 'react-native';
+import { Button, Card, Divider, Icon, List, Text } from 'react-native-paper';
+
+interface Props {
+	themeId: number;
+	onEnablePluginSupport: ()=> void;
+}
+
+const onLearnMorePress = () => {
+	void Linking.openURL('https://joplinapp.org/help/apps/plugins');
+};
+
+const useStyles = (themeId: number) => {
+	return useMemo(() => {
+		const theme = themeStyle(themeId);
+		const basePrecautionCard: ViewStyle = {
+			margin: theme.margin,
+		};
+
+		const baseTitleStyle: TextStyle = {
+			fontWeight: 'bold',
+			color: theme.color,
+			fontSize: theme.fontSize,
+		};
+
+		const styles = StyleSheet.create({
+			descriptionText: {
+				padding: theme.margin,
+				paddingTop: 0,
+			},
+			firstPrecautionCard: {
+				...basePrecautionCard,
+			},
+			precautionCard: {
+				...basePrecautionCard,
+				marginTop: 0,
+			},
+			cardContent: {
+				paddingTop: theme.itemMarginTop,
+				paddingBottom: theme.itemMarginBottom,
+			},
+			title: baseTitleStyle,
+			header: {
+				...baseTitleStyle,
+				margin: theme.margin,
+				marginBottom: 0,
+			},
+			actionButton: {
+				borderRadius: 10,
+				marginLeft: theme.marginLeft * 2,
+				marginRight: theme.marginRight * 2,
+				marginBottom: theme.margin,
+			},
+		});
+
+		const themeOverride = {
+			secondaryButton: {
+				colors: {
+					primary: theme.color4,
+					outline: theme.color4,
+				},
+			},
+			primaryButton: {
+				colors: {
+					primary: theme.color4,
+					onPrimary: theme.backgroundColor4,
+				},
+			},
+			card: {
+				colors: {
+					outline: theme.codeBorderColor,
+				},
+			},
+		};
+
+		return { styles, themeOverride };
+	}, [themeId]);
+};
+
+const EnablePluginSupportPage: React.FC<Props> = props => {
+	const { styles, themeOverride } = useStyles(props.themeId);
+
+	let isFirstCard = true;
+	const renderCard = (icon: string, title: string, description: string) => {
+		const style = isFirstCard ? styles.firstPrecautionCard : styles.precautionCard;
+		isFirstCard = false;
+		return (
+			<Card
+				mode='outlined'
+				style={style}
+				contentStyle={styles.cardContent}
+				theme={themeOverride.card}
+			>
+				<Card.Title
+					title={title}
+					titleStyle={styles.title}
+					subtitle={description}
+					subtitleNumberOfLines={4}
+					left={(props) => <Icon {...props} source={icon}/>}
+				/>
+			</Card>
+		);
+	};
+
+	return (
+		<View>
+			<List.Section
+				title={_('What are plugins?')}
+				titleStyle={styles.title}
+			>
+				<Text style={styles.descriptionText}>{_('Plugins extend Joplin with features that are not present by default. Plugins can extend Joplin\'s editor, viewer, and more.')}</Text>
+			</List.Section>
+			<Divider/>
+			<List.Section
+				title={_('Plugin security')}
+				titleStyle={styles.title}
+			>
+				<Text style={styles.descriptionText}>{_('Like any software you install, plugins can potentially cause security issues or data loss.')}</Text>
+			</List.Section>
+			<Divider/>
+			<Text variant='titleMedium' style={styles.header}>{_('Here\'s what we do to make plugins safer:')}</Text>
+			{renderCard('crown', _('Recommended plugins'), _('We mark plugins developed by trusted Joplin community members as "recommended".'))}
+			{renderCard('source-branch-check', _('Open Source'), _('Most plugins have source code available for review on the plugin website.'))}
+			{renderCard('flag-remove', _('Report system'), _('We have a system for reporting and removing problematic plugins.'))}
+			<View>
+				<Button style={styles.actionButton} theme={themeOverride.secondaryButton} onPress={onLearnMorePress}>{_('Learn more')}</Button>
+				<Button style={styles.actionButton} theme={themeOverride.primaryButton} mode='contained' onPress={props.onEnablePluginSupport}>{_('Enable plugin support')}</Button>
+			</View>
+		</View>
+	);
+};
+
+export default EnablePluginSupportPage;

packages/app-mobile/plugins/PluginRunner/PluginRunner.ts

@@ -61,6 +61,11 @@ export default class PluginRunner extends BasePluginRunner {
 	public override async stop(plugin: Plugin) {
 		logger.info('Stopping plugin with id', plugin.id);
 
+		if (!this.webviewRef.current) {
+			logger.debug('WebView already unloaded. Plugin already stopped. ID: ', plugin.id);
+			return;
+		}
+
 		this.webviewRef.current.injectJS(`
 			pluginBackgroundPage.stopPlugin(${JSON.stringify(plugin.id)});
 		`);

packages/app-mobile/plugins/PluginRunner/PluginRunnerWebView.tsx

@@ -1,7 +1,7 @@
 
 import * as React from 'react';
 import ExtendedWebView, { WebViewControl } from '../../components/ExtendedWebView';
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import shim from '@joplin/lib/shim';
 import PluginRunner from './PluginRunner';
 import loadPlugins from '../loadPlugins';
@@ -39,9 +39,25 @@ const usePlugins = (
 	}, [pluginRunner, store, webviewLoaded, pluginSettings]);
 };
 
+const useUnloadPluginsOnGlobalDisable = (
+	pluginStates: PluginStates,
+	pluginSupportEnabled: boolean,
+) => {
+	const pluginStatesRef = useRef(pluginStates);
+	pluginStatesRef.current = pluginStates;
+	useAsyncEffect(async event => {
+		if (!pluginSupportEnabled && Object.keys(pluginStatesRef.current).length) {
+			for (const pluginId in pluginStatesRef.current) {
+				await PluginService.instance().unloadPlugin(pluginId);
+				if (event.cancelled) return;
+			}
+		}
+	}, [pluginSupportEnabled]);
+};
 
 interface Props {
 	serializedPluginSettings: SerializedPluginSettings;
+	pluginSupportEnabled: boolean;
 	pluginStates: PluginStates;
 	pluginHtmlContents: PluginHtmlContents;
 	themeId: number;
@@ -63,6 +79,7 @@ const PluginRunnerWebViewComponent: React.FC<Props> = props => {
 
 	const pluginSettings = usePluginSettings(props.serializedPluginSettings);
 	usePlugins(pluginRunner, webviewLoaded, pluginSettings);
+	useUnloadPluginsOnGlobalDisable(props.pluginStates, props.pluginSupportEnabled);
 
 	const onLoadStart = useCallback(() => {
 		// Handles the case where the webview reloads (e.g. due to an error or performance
@@ -76,12 +93,18 @@ const PluginRunnerWebViewComponent: React.FC<Props> = props => {
 	}, []);
 
 
+	// To avoid increasing startup time/memory usage on devices with no plugins, don't
+	// load the webview if unnecessary.
+	// Note that we intentionally load the webview even if all plugins are disabled.
+	const loadWebView = Object.values(pluginSettings).length > 0 && props.pluginSupportEnabled;
+	useEffect(() => {
+		if (!loadWebView) {
+			setLoaded(false);
+		}
+	}, [loadWebView]);
+
 	const renderWebView = () => {
-		// To avoid increasing startup time/memory usage on devices with no plugins, don't
-		// load the webview if unnecessary.
-		// Note that we intentionally load the webview even if all plugins are disabled.
-		const hasPlugins = Object.values(pluginSettings).length > 0;
-		if (!hasPlugins) {
+		if (!loadWebView) {
 			return null;
 		}
 
@@ -138,6 +161,7 @@ const PluginRunnerWebViewComponent: React.FC<Props> = props => {
 export default connect((state: AppState) => {
 	const result: Props = {
 		serializedPluginSettings: state.settings['plugins.states'],
+		pluginSupportEnabled: state.settings['plugins.pluginSupportEnabled'],
 		pluginStates: state.pluginService.plugins,
 		pluginHtmlContents: state.pluginService.pluginHtmlContents,
 		themeId: state.settings.theme,

packages/app-mobile/root.tsx

@@ -1186,7 +1186,14 @@ class AppComponent extends React.Component {
 					...paperTheme.colors,
 					onPrimaryContainer: theme.color5,
 					primaryContainer: theme.backgroundColor5,
+
 					primary: theme.color,
+					onPrimary: theme.backgroundColor,
+
+					background: theme.backgroundColor,
+
+					surface: theme.backgroundColor,
+					onSurface: theme.color,
 
 					secondaryContainer: theme.raisedBackgroundColor,
 					onSecondaryContainer: theme.raisedColor,

packages/lib/models/Setting.ts

@@ -1216,10 +1216,10 @@ class Setting extends BaseModel {
 				section: 'plugins',
 				public: true,
 				appTypes: [AppType.Mobile],
-				show: (_settings) => {
+				show: (settings) => {
 					// Hide on iOS due to App Store guidelines. See
 					// https://github.com/laurent22/joplin/pull/10086 for details.
-					return shim.mobilePlatform() !== 'ios';
+					return shim.mobilePlatform() !== 'ios' && settings['plugins.pluginSupportEnabled'];
 				},
 				needRestart: true,
 				advanced: true,
@@ -1228,6 +1228,19 @@ class Setting extends BaseModel {
 				description: () => _('Allows debugging mobile plugins. See %s for details.', 'https://https://joplinapp.org/help/api/references/mobile_plugin_debugging/'),
 			},
 
+			'plugins.pluginSupportEnabled': {
+				value: false,
+				public: true,
+				autoSave: true,
+				section: 'plugins',
+				advanced: true,
+				type: SettingItemType.Bool,
+				appTypes: [AppType.Mobile],
+				label: () => _('Enable plugin support'),
+				// On mobile, we have a screen that manages this setting when it's disabled.
+				show: (settings) => settings['plugins.pluginSupportEnabled'],
+			},
+
 			'plugins.devPluginPaths': {
 				value: '',
 				type: SettingItemType.String,