improve proxy settings view

+ update proxy settings tests

app/actions/SettingsActions.js

@@ -151,7 +151,9 @@ export function updateStateSettingsChanged(settings, norestart) {
     const networkChange = {
       network: true,
       spvMode: true,
-      daemonStartAdvanced: true
+      daemonStartAdvanced: true,
+      proxyType: true,
+      proxyLocation: true
     };
 
     const newDiffersFromTemp = settingsFields.reduce(

app/components/views/SettingsPage/ConnectivitySettingsTab/ProxySettings/ProxySettings.jsx

@@ -8,6 +8,8 @@ import {
 } from "constants";
 import styles from "./ProxySettings.module.css";
 import { Label, Box } from "../../helpers";
+import { useProxySettings } from "./hooks";
+import { Button } from "pi-ui";
 
 const availableProxyTypes = [
   { name: <T id="settings.proxy.type.none" m="No Proxy" />, value: null },
@@ -17,41 +19,61 @@ const availableProxyTypes = [
   { name: "SOCKS5", value: PROXYTYPE_SOCKS5 }
 ];
 
-const ProxySettings = ({ tempSettings, onChangeTempSettings }) => (
-  <Box className={styles.box}>
-    <div>
-      <Label id="proxy-type-input">
-        <T id="settings.proxy.type" m="Proxy Type" />
-      </Label>
-      <SettingsInput
-        selectWithBigFont
-        className={styles.input}
-        value={tempSettings.proxyType}
-        onChange={(newProxyType) =>
-          onChangeTempSettings({ proxyType: newProxyType.value })
-        }
-        valueKey="value"
-        labelKey="name"
-        ariaLabelledBy="proxy-type-input"
-        options={availableProxyTypes}
-      />
-    </div>
-
-    <div>
-      <Label id="proxy-location">
-        <T id="settings.proxy.location" m="Proxy Location" />
-      </Label>
-      <SettingsTextInput
-        newBiggerFontStyle
-        inputClassNames={styles.settingsTextInput}
-        id="proxyLocationInput"
-        value={tempSettings.proxyLocation}
-        ariaLabelledBy="proxy-location"
-        onChange={(value) => onChangeTempSettings({ proxyLocation: value })}
-      />
-    </div>
-  </Box>
-);
+const ProxySettings = ({ tempSettings, onChangeTempSettings }) => {
+  const {
+    proxyType,
+    proxyLocation,
+    setProxyType,
+    setProxyLocation
+  } = useProxySettings(tempSettings);
+
+  const isProxySettingsChanged =
+    proxyType !== tempSettings.proxyType ||
+    proxyLocation !== tempSettings.proxyLocation;
+
+  return (
+    <Box className={styles.box}>
+      <div>
+        <Label id="proxy-type-input">
+          <T id="settings.proxy.type" m="Proxy Type" />
+        </Label>
+        <SettingsInput
+          selectWithBigFont
+          className={styles.input}
+          value={proxyType}
+          onChange={(newProxyType) => setProxyType(newProxyType.value)}
+          valueKey="value"
+          labelKey="name"
+          ariaLabelledBy="proxy-type-input"
+          options={availableProxyTypes}
+        />
+      </div>
+
+      <div>
+        <Label id="proxy-location">
+          <T id="settings.proxy.location" m="Proxy Location" />
+        </Label>
+        <SettingsTextInput
+          newBiggerFontStyle
+          inputClassNames={styles.settingsTextInput}
+          id="proxyLocationInput"
+          value={proxyLocation}
+          ariaLabelledBy="proxy-location"
+          onChange={(value) => setProxyLocation(value)}
+        />
+      </div>
+
+      {isProxySettingsChanged && (
+        <Button
+          className={styles.submitButton}
+          size="sm"
+          onClick={() => onChangeTempSettings({ proxyType, proxyLocation })}>
+          <T id="settings.proxy.save" m="Save proxy settings" />
+        </Button>
+      )}
+    </Box>
+  );
+};
 
 ProxySettings.propTypes = {
   tempSettings: PropTypes.object.isRequired,

app/components/views/SettingsPage/ConnectivitySettingsTab/ProxySettings/ProxySettings.module.css

@@ -1,15 +1,23 @@
 .box {
   display: grid;
-  grid-gap: 3rem;
+  grid-gap: 1rem 3rem;
   grid-template-columns: repeat(2, 1fr);
 }
 
 .settingsTextInput {
   color: var(--main-dark-blue) !important;
 }
 
+.submitButton {
+  grid-column: 2;
+}
+
 @media screen and (max-width: 768px) {
   .box {
     grid-template-columns: 1fr;
   }
+
+  .submitButton {
+    grid-column: 1;
+  }
 }

app/components/views/SettingsPage/ConnectivitySettingsTab/ProxySettings/hooks.js

@@ -0,0 +1,15 @@
+import { useState } from "react";
+
+export const useProxySettings = (tempSettings) => {
+  const [proxyType, setProxyType] = useState(tempSettings.proxyType);
+  const [proxyLocation, setProxyLocation] = useState(
+    tempSettings.proxyLocation
+  );
+
+  return {
+    proxyType,
+    proxyLocation,
+    setProxyType,
+    setProxyLocation
+  };
+};

test/unit/components/views/SettingsPage/SettingsPage.spec.js

@@ -420,7 +420,6 @@ test.each([
     { daemonStartAdvanced: true },
     true
   ],
-  ["Proxy Type", "HTTP", "PAC", { proxyType: PROXYTYPE_PAC }, false],
   [
     "Locale",
     testDefaultLocaleLabel,
@@ -495,13 +494,6 @@ test.each([
     testSpvConnectValue.join(","),
     { spvConnect: testSpvConnectValue },
     false
-  ],
-  [
-    "Proxy Location",
-    testDefaultProxyLocation,
-    testProxyLocation,
-    { proxyLocation: testProxyLocation },
-    false
   ]
 ])("change '%s' TextInput from '%s' to '%s' expeced %s", testTextFieldInput);
 
@@ -708,3 +700,43 @@ test("update private passphrase is disabled", () => {
   user.click(screen.getByRole("button", { name: "Update Private Passphrase" }));
   expect(screen.queryByText("Change your passphrase")).not.toBeInTheDocument();
 });
+
+test("test proxy settings", async () => {
+  render(<SettingsPage />, { initialState: { settings: testSettings } });
+
+  // set proxy type
+  const inputControl = screen.getByLabelText("Proxy Type");
+  const oldValue = "HTTP";
+  const option = "PAC";
+  const inputValueSpan = getOptionByNameAndType(oldValue, "singleValue");
+  expect(
+    screen.queryByRole("button", {
+      name: "Save proxy settings"
+    })
+  ).not.toBeInTheDocument();
+  expect(inputValueSpan.textContent).toMatch(oldValue);
+  const changeFn = () => {
+    user.click(inputControl);
+    user.click(getOptionByNameAndType(option, "option"));
+  };
+  changeFn();
+
+  // set proxy location
+  const proxyLocationInputControl = screen.getByLabelText("Proxy Location");
+  expect(proxyLocationInputControl.value).toMatch(testDefaultProxyLocation);
+  user.clear(proxyLocationInputControl);
+  user.type(proxyLocationInputControl, testProxyLocation);
+  // press enter
+  fireEvent.keyDown(proxyLocationInputControl, { key: "enter", keyCode: 13 });
+
+  user.click(screen.getByRole("button", { name: "Save proxy settings" }));
+  await wait(() => screen.getByText("Reset required"));
+  user.click(screen.getByRole("button", { name: "Confirm" }));
+
+  await wait(() =>
+    expect(mockSaveSettings).toHaveBeenCalledWith({
+      ...testCurrentSettings,
+      ...{ proxyType: PROXYTYPE_PAC, proxyLocation: testProxyLocation }
+    })
+  );
+});