Add options to disable history logging and to pause logging with no cleaning

.stylelintrc

@@ -4,8 +4,7 @@
     "stylelint-no-unsupported-browser-features"
   ],
   "rules": {
-    "indentation": "tab",
-    "max-empty-lines": 2,
+    "selector-class-pattern": null,
     "no-descending-specificity": null,
     "plugin/no-unsupported-browser-features": [
       true,

src/_locales/en/messages.json

@@ -146,6 +146,9 @@
 	"history_searchPlaceholder": {
 		"message": "Search by text"
 	},
+	"history_notification_disabled": {
+		"message": "History recording is disabled, so new entries will not appear. You may change it in <slot id=preferences>preferences</slot>"
+	},
 	"inlineTranslator_showOriginalText": {
 		"message": "Show original text"
 	},
@@ -563,6 +566,15 @@
 	"settings_section_popup": {
 		"message": "Popup"
 	},
+	"settings_section_history": {
+		"message": "History"
+	},
+	"settings_option_history_enable": {
+		"message": "Enable history"
+	},
+	"settings_option_history_enable_desc": {
+		"message": "When enabled, any translation will be recorded to a history page"
+	},
 	"textTranslator_suggestLanguage": {
 		"message": "It looks like that language is"
 	},

src/app/ConfigStorage/ConfigStorage.migrations.ts

@@ -107,6 +107,30 @@ const migrations: Migration[] = [
 			browser.storage.local.set({ [storageName]: updatedConfig });
 		},
 	},
+	{
+		// Add history section
+		version: 6,
+		async migrate() {
+			const storageName = 'appConfig';
+
+			let { [storageName]: actualData } = await browser.storage.local.get(
+				storageName,
+			);
+			if (typeof actualData !== 'object') {
+				actualData = {};
+			}
+
+			const updatedConfig = {
+				...actualData,
+				history: {
+					enabled: true,
+				},
+			};
+
+			// Write data
+			await browser.storage.local.set({ [storageName]: updatedConfig });
+		},
+	},
 ];
 
 export const ConfigStorageMigration = createMigrationTask(migrations);

src/app/ConfigStorage/__test__/ConfigStorage.test.ts

@@ -8,6 +8,7 @@ import { ConfigStorageMigration } from '../ConfigStorage.migrations';
 import configVersion1 from './config-v1.json';
 import configVersion3 from './config-v3.json';
 import configVersion5 from './config-v5.json';
+import configVersion6 from './config-v6.json';
 
 describe('config migrations', () => {
 	beforeAll(clearAllMocks);
@@ -46,7 +47,7 @@ describe('config migrations', () => {
 describe('use config', () => {
 	beforeAll(clearAllMocks);
 
-	const latestConfigObject = configVersion5 as AppConfigType;
+	const latestConfigObject = configVersion6 as AppConfigType;
 
 	test('config storage set/get', async () => {
 		const configStorage = new ConfigStorage(latestConfigObject);

src/app/ConfigStorage/__test__/config-v6.json

@@ -0,0 +1,74 @@
+{
+	"language": "en",
+	"translatorModule": "GoogleTranslator",
+	"ttsModule": "google",
+	"appIcon": "auto",
+	"scheduler": {
+		"useCache": true,
+		"translateRetryAttemptLimit": 2,
+		"isAllowDirectTranslateBadChunks": true,
+		"directTranslateLength": null,
+		"translatePoolDelay": 300,
+		"chunkSizeForInstantTranslate": null
+	},
+	"cache": {
+		"ignoreCase": true
+	},
+	"selectTranslator": {
+		"enabled": true,
+		"disableWhileTranslatePage": false,
+		"mode": "quickTranslate",
+		"zIndex": 999999,
+		"rememberDirection": false,
+		"modifiers": [],
+		"strictSelection": false,
+		"detectedLangFirst": true,
+		"timeoutForHideButton": 3000,
+		"focusOnTranslateButton": false,
+		"showOnceForSelection": true,
+		"showOriginalText": true,
+		"isUseAutoForDetectLang": true
+	},
+	"pageTranslator": {
+		"ignoredTags": [
+			"meta",
+			"link",
+			"script",
+			"noscript",
+			"style",
+			"code",
+			"pre",
+			"textarea"
+		],
+		"translatableAttributes": [
+			"title",
+			"alt",
+			"placeholder",
+			"label",
+			"aria-label",
+			"value"
+		],
+		"lazyTranslate": true,
+		"detectLanguageByContent": true,
+		"originalTextPopup": false,
+		"enableContextMenu": false,
+		"toggleTranslationHotkey": null
+	},
+	"textTranslator": {
+		"rememberText": true,
+		"spellCheck": true,
+		"suggestLanguage": true,
+		"suggestLanguageAlways": true
+	},
+	"popup": {
+		"rememberLastTab": true
+	},
+	"history": {
+		"enabled": true
+	},
+	"popupTab": {
+		"pageTranslator": {
+			"showCounters": true
+		}
+	}
+}

src/components/primitives/Notification/Notification.bundle/universal.ts

@@ -0,0 +1,14 @@
+import { compose, composeU, ExtractProps } from 'react-elegant-ui/lib/compose';
+
+import { withModNotificationTypeDefault } from '../_type/Notification_type_default';
+import { Notification as BaseNotification } from '../Notification';
+
+export const Notification = compose(composeU(withModNotificationTypeDefault))(
+	BaseNotification,
+);
+
+Notification.defaultProps = {
+	type: 'default',
+};
+
+export type INotificationProps = ExtractProps<typeof Notification>;

src/components/primitives/Notification/Notification.css

@@ -0,0 +1,4 @@
+.Notification {
+	padding: 1.4rem 1rem;
+	border-radius: 6px;
+}

src/components/primitives/Notification/Notification.tsx

@@ -0,0 +1,15 @@
+import React, { FC, ReactNode } from 'react';
+import { cn } from '@bem-react/classname';
+
+import './Notification.css';
+
+export const cnNotification = cn('Notification');
+
+export type INotificationProps = {
+	children: ReactNode;
+	className?: string;
+};
+
+export const Notification: FC<INotificationProps> = ({ children, className }) => {
+	return <div className={cnNotification({}, [className])}>{children}</div>;
+};

src/components/primitives/Notification/_type/Notification_type_default.css

@@ -0,0 +1,3 @@
+.Notification_type_default {
+	background-color: #eee;
+}

src/components/primitives/Notification/_type/Notification_type_default.tsx

@@ -0,0 +1,14 @@
+import { withClassnameHOC } from 'react-elegant-ui/esm/lib/compose';
+
+import { cnNotification, INotificationProps } from '../Notification';
+
+import './Notification_type_default.css';
+
+export interface NotificationTypeDefault {
+	type?: 'default';
+}
+
+export const withModNotificationTypeDefault = withClassnameHOC<
+	NotificationTypeDefault,
+	INotificationProps
+>(cnNotification(), { type: 'default' });

src/config.ts

@@ -65,6 +65,9 @@ export const defaultConfig: AppConfigType = {
 	popup: {
 		rememberLastTab: true,
 	},
+	history: {
+		enabled: true,
+	},
 	popupTab: {
 		pageTranslator: {
 			showCounters: true,

src/lib/language.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentType, ReactNode } from 'react';
+import React, { ComponentType, FC, ReactNode } from 'react';
 import browser from 'webextension-polyfill';
 import { isLanguageCodeISO639v1 } from '@translate-tools/core/languages';
 
@@ -101,3 +101,12 @@ export const detectLanguage = async (text: string, reliableOnly = false) => {
 };
 
 export const isValidLanguage = (language: string) => isLanguageCodeISO639v1(language);
+
+export const buildLink =
+	(url: string): FC =>
+		({ children }) =>
+			(
+				<a href={url} target="_blank" rel="noopener">
+					{children}
+				</a>
+			);

src/pages/history/layout/HistoryPage.tsx

@@ -1,8 +1,9 @@
-import React, { FC, useCallback, useLayoutEffect, useState } from 'react';
+import React, { FC, useCallback, useEffect, useLayoutEffect, useState } from 'react';
 import { isEqual } from 'lodash';
 import { cn } from '@bem-react/classname';
 
 import { Page } from '../../../components/layouts/Page/Page';
+import { getConfig } from '../../../requests/backend/getConfig';
 import { ITranslationHistoryEntryWithKey } from '../../../requests/backend/history/data';
 import { getTranslationHistoryEntries } from '../../../requests/backend/history/getHistoryEntries';
 
@@ -36,13 +37,21 @@ export const HistoryPage: FC = () => {
 		});
 	}, []);
 
+	const [isHistoryEnabled, setIsHistoryEnabled] = useState<null | boolean>(null);
+	useEffect(() => {
+		getConfig().then((config) => {
+			setIsHistoryEnabled(config.history.enabled);
+		});
+	}, []);
+
 	// Wait render nested components with new props
 	const [isLoaded, setIsLoaded] = useState(false);
 	useLayoutEffect(() => {
-		if (translations !== null) {
-			setIsLoaded(true);
-		}
-	}, [translations]);
+		if (isHistoryEnabled === null) return;
+		if (translations === null) return;
+
+		setIsLoaded(true);
+	}, [translations, isHistoryEnabled]);
 
 	return (
 		<Page loading={!isLoaded} renderWhileLoading>
@@ -52,6 +61,7 @@ export const HistoryPage: FC = () => {
 						translations: translations || [],
 						hasMoreTranslations,
 						requestTranslations,
+						isHistoryEnabled: Boolean(isHistoryEnabled),
 					}}
 				/>
 			</div>

src/pages/history/layout/TranslationsHistory/TranslationsHistory.tsx

@@ -9,12 +9,13 @@ import { LayoutFlow } from '../../../../components/layouts/LayoutFlow/LayoutFlow
 import { TranslationCard } from '../../../../components/layouts/TranslationCard/TranslationCard';
 import { Button } from '../../../../components/primitives/Button/Button.bundle/universal';
 import { Icon } from '../../../../components/primitives/Icon/Icon.bundle/desktop';
+import { Notification } from '../../../../components/primitives/Notification/Notification.bundle/universal';
 import { Textinput } from '../../../../components/primitives/Textinput/Textinput.bundle/desktop';
 import { useConcurrentTTS } from '../../../../lib/hooks/useConcurrentTTS';
 import { useConfirm } from '../../../../lib/hooks/useConfirm';
 import { useDebouncedInput } from '../../../../lib/hooks/useDebouncedInput';
 import { useKeyboardModifiers } from '../../../../lib/hooks/useKeyboardModifiers';
-import { getMessage } from '../../../../lib/language';
+import { buildLink, getLocalizedNode, getMessage } from '../../../../lib/language';
 import { clearTranslationHistory } from '../../../../requests/backend/history/clearTranslationHistory';
 import {
 	ITranslationHistoryEntryWithKey,
@@ -34,13 +35,15 @@ export type TranslationsHistoryProps = {
 	translations: ITranslationHistoryEntryWithKey[];
 	hasMoreTranslations: boolean;
 	requestTranslations: TranslationsHistoryFetcher;
+	isHistoryEnabled: boolean;
 };
 
 const TRANSLATIONS_PER_PAGE = 100;
 export const TranslationsHistory: FC<TranslationsHistoryProps> = ({
 	translations,
 	hasMoreTranslations,
 	requestTranslations,
+	isHistoryEnabled,
 }) => {
 	const searchInput = useDebouncedInput('');
 	const search = searchInput.debouncedValue;
@@ -254,6 +257,16 @@ export const TranslationsHistory: FC<TranslationsHistoryProps> = ({
 	return (
 		<div className={cnTranslationsHistory()}>
 			<LayoutFlow indent="xl">
+				{!isHistoryEnabled && (
+					<Notification type="default">
+						{getLocalizedNode({
+							messageName: 'history_notification_disabled',
+							slots: {
+								preferences: buildLink(`/pages/options/options.html`),
+							},
+						})}
+					</Notification>
+				)}
 				<Textinput
 					hasClear
 					className={cnTranslationsHistory('Search')}

src/pages/options/layout/OptionsPage.utils/generateTree.tsx

@@ -1,7 +1,7 @@
-import React, { FC } from 'react';
 import { getLanguageCodesISO639 } from '@translate-tools/core/languages';
 
 import {
+	buildLink,
 	getLanguageNameByCode,
 	getLocalizedNode,
 	getMessage,
@@ -22,30 +22,6 @@ type Options = {
 	toggleTTSModulesWindow: () => void;
 };
 
-// TODO: make helper for build options
-
-// option({
-// 	type: 'Checkbox',
-// 	path: 'selectTranslator.showOriginalText',
-// 	withText: true,
-// 	withDescription: true,
-// })
-
-// checkbox({
-// 	path: 'selectTranslator.showOriginalText',
-// 	withText: true,
-// 	withDescription: true,
-// })
-
-const buildLink =
-	(url: string): FC =>
-		({ children }) =>
-			(
-				<a href={url} target="_blank" rel="noopener">
-					{children}
-				</a>
-			);
-
 /**
  * Generate config tree for render with `OptionsTree`
  */
@@ -582,5 +558,19 @@ export const generateTree = ({
 				},
 			],
 		},
+
+		{
+			title: getMessage('settings_section_history'),
+			groupContent: [
+				{
+					description: getMessage('settings_option_history_enable_desc'),
+					path: 'history.enabled',
+					optionContent: {
+						type: 'Checkbox',
+						text: getMessage('settings_option_history_enable'),
+					},
+				},
+			],
+		},
 	];
 };