Merge pull request #1334 from happymvp/feature/767-accept_language

Feature/767 accept language

.gitignore

@@ -1 +1,2 @@
 .DS_Store
+.idea

desktop-app/src/main/main.ts

@@ -11,7 +11,6 @@
 import path from 'path';
 import { app, BrowserWindow, shell, screen, ipcMain } from 'electron';
 import { setupTitlebar } from 'custom-electron-titlebar/main';
-import { useState } from 'react';
 import cli from './cli';
 import { PROTOCOL } from '../common/constants';
 import MenuBuilder from './menu';

desktop-app/src/main/web-permissions/index.ts

@@ -1,5 +1,6 @@
 import { BrowserWindow, session } from 'electron';
 import PermissionsManager, { PERMISSION_STATE } from './PermissionsManager';
+import store from '../../store';
 
 // eslint-disable-next-line import/prefer-default-export
 export const WebPermissionHandlers = (mainWindow: BrowserWindow) => {
@@ -25,6 +26,18 @@ export const WebPermissionHandlers = (mainWindow: BrowserWindow) => {
           return status === PERMISSION_STATE.GRANTED;
         }
       );
+
+      session.defaultSession.webRequest.onBeforeSendHeaders(
+        {
+          urls: ['<all_urls>'],
+        },
+        (details, callback) => {
+          details.requestHeaders['Accept-Language'] = store.get(
+            'userPreferences.webRequestHeaderAcceptLanguage'
+          );
+          callback({ requestHeaders: details.requestHeaders });
+        }
+      );
     },
   };
 };

desktop-app/src/renderer/components/FileUploader/FileUploader.test.tsx

@@ -1,4 +1,4 @@
-import { render, fireEvent, waitFor } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { FileUploader, FileUploaderProps } from './FileUploader';
 import { useFileUpload } from './hooks';

desktop-app/src/renderer/components/ToolBar/Menu/Flyout/Settings/SettingsContent.test.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+
+import { render, fireEvent } from '@testing-library/react';
+
+import { SettingsContent } from './SettingsContent';
+
+const mockOnClose = jest.fn();
+
+describe('SettingsContentHeader', () => {
+  const renderComponent = () =>
+    render(<SettingsContent onClose={mockOnClose} />);
+
+  it('Accept-Language is saved to store', () => {
+    const { getByTestId } = renderComponent();
+
+    const acceptLanguageInput = getByTestId('settings-accept_language-input');
+    const screenshotLocationInput = getByTestId(
+      'settings-screenshot_location-input'
+    );
+    const saveButton = getByTestId('settings-save-button');
+
+    fireEvent.change(acceptLanguageInput, { target: { value: 'cz-Cz' } });
+    fireEvent.change(screenshotLocationInput, {
+      target: { value: './path/location' },
+    });
+    fireEvent.click(saveButton);
+
+    expect(window.electron.store.set).toHaveBeenNthCalledWith(
+      1,
+      'userPreferences.screenshot.saveLocation',
+      './path/location'
+    );
+    expect(window.electron.store.set).toHaveBeenNthCalledWith(
+      2,
+      'userPreferences.customTitlebar',
+      undefined
+    );
+    expect(window.electron.store.set).toHaveBeenNthCalledWith(
+      3,
+      'userPreferences.webRequestHeaderAcceptLanguage',
+      'cz-Cz'
+    );
+
+    expect(mockOnClose).toHaveBeenCalled();
+  });
+});

desktop-app/src/renderer/components/ToolBar/Menu/Flyout/Settings/SettingsContent.tsx

@@ -2,6 +2,7 @@ import { useId, useState } from 'react';
 
 import Button from 'renderer/components/Button';
 import Toggle from 'renderer/components/Toggle';
+import { SettingsContentHeaders } from './SettingsContentHeaders';
 
 interface Props {
   onClose: () => void;
@@ -16,6 +17,13 @@ export const SettingsContent = ({ onClose }: Props) => {
     window.electron.store.get('userPreferences.customTitlebar')
   );
 
+  const [webRequestHeaderAcceptLanguage, setWebRequestHeaderAcceptLanguage] =
+    useState<string>(
+      window.electron.store.get(
+        'userPreferences.webRequestHeaderAcceptLanguage'
+      )
+    );
+
   const onSave = () => {
     if (screenshotSaveLocation === '' || screenshotSaveLocation == null) {
       // eslint-disable-next-line no-alert
@@ -32,6 +40,11 @@ export const SettingsContent = ({ onClose }: Props) => {
       enableCustomTitlebar
     );
 
+    window.electron.store.set(
+      'userPreferences.webRequestHeaderAcceptLanguage',
+      webRequestHeaderAcceptLanguage
+    );
+
     onClose();
   };
 
@@ -43,6 +56,7 @@ export const SettingsContent = ({ onClose }: Props) => {
           <label htmlFor={id} className="flex flex-col">
             Location
             <input
+              data-testid="settings-screenshot_location-input"
               type="text"
               id={id}
               className="mt-2 rounded-md border border-gray-300 px-4 py-2 text-base focus-visible:outline-gray-400 dark:border-gray-500 dark:bg-slate-900"
@@ -56,7 +70,12 @@ export const SettingsContent = ({ onClose }: Props) => {
         </div>
       </div>
 
-      {(navigator as any).userAgentData.platform === 'Windows' && (
+      <SettingsContentHeaders
+        acceptLanguage={webRequestHeaderAcceptLanguage}
+        setAcceptLanguage={setWebRequestHeaderAcceptLanguage}
+      />
+
+      {(navigator as any)?.userAgentData?.platform === 'Windows' && (
         <>
           <h2>Preferences</h2>
           <div className="my-4 flex flex-col space-y-4 text-sm">
@@ -82,6 +101,7 @@ export const SettingsContent = ({ onClose }: Props) => {
       )}
 
       <Button
+        data-testid="settings-save-button"
         className="mt-6 px-5 py-1"
         onClick={onSave}
         isPrimary

desktop-app/src/renderer/components/ToolBar/Menu/Flyout/Settings/SettingsContentHeaders.tsx

@@ -0,0 +1,38 @@
+import { FC, useId } from 'react';
+
+interface ISettingsContentHeaders {
+  acceptLanguage: string;
+  setAcceptLanguage: (arg0: string) => void;
+}
+
+export const SettingsContentHeaders: FC<ISettingsContentHeaders> = ({
+  acceptLanguage = '',
+  setAcceptLanguage,
+}) => {
+  const id = useId();
+
+  return (
+    <>
+      <h2>Request Headers</h2>
+      <div className="my-4 flex flex-col space-y-4 text-sm">
+        <div className="flex flex-col space-y-2">
+          <label htmlFor={id} className="flex flex-col">
+            Accept-Language
+            <input
+              data-testid="settings-accept_language-input"
+              type="text"
+              id={id}
+              placeholder="example: en-US"
+              className="mt-2 rounded-md border border-gray-300 px-4 py-2 text-base focus-visible:outline-gray-400 dark:border-gray-500 dark:bg-slate-900"
+              value={acceptLanguage}
+              onChange={(e) => setAcceptLanguage(e.target.value)}
+            />
+          </label>
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            HTTP request Accept-Language parameter
+          </p>
+        </div>
+      </div>
+    </>
+  );
+};

desktop-app/src/store/index.ts

@@ -134,6 +134,10 @@ const schema = {
   userPreferences: {
     type: 'object',
     properties: {
+      webRequestHeaderAcceptLanguage: {
+        type: 'string',
+        default: 'us-US',
+      },
       allowInsecureSSLConnections: {
         type: 'boolean',
         default: false,