Make NamedProxyForm more composable

2 files changed, 11 insertions, 10 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/EditApiAccessMethod.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/EditApiAccessMethod.tsx
index f3c55965d8..4dbdf309b1 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/EditApiAccessMethod.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/EditApiAccessMethod.tsx
@@ -21,7 +21,7 @@ import { BackAction } from './KeyboardNavigation';
 import { Layout, SettingsContainer, SettingsContent, SettingsNavigationScrollbars } from './Layout';
 import { ModalAlert, ModalAlertType } from './Modal';
 import { NavigationContainer } from './NavigationContainer';
-import { NamedProxyForm } from './ProxyForm';
+import { NamedProxyForm, ProxyFormButtons, ProxyFormInner, ProxyFormNameField } from './ProxyForm';
 import SettingsHeader, { HeaderSubTitle, HeaderTitle } from './SettingsHeader';
 
 export function EditApiAccessMethod() {
@@ -108,7 +108,11 @@ function AccessMethodForm() {
                 {id !== undefined && method === undefined ? (
                   <span>Failed to open method</span>
                 ) : (
-                  <NamedProxyForm proxy={method} onSave={onSave} onCancel={pop} />
+                  <NamedProxyForm proxy={method} onSave={onSave} onCancel={pop}>
+                    <ProxyFormNameField />
+                    <ProxyFormInner />
+                    <ProxyFormButtons />
+                  </NamedProxyForm>
                 )}
 
                 <TestingDialog
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ProxyForm.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ProxyForm.tsx
index c800e3bfff..58b43dfc98 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ProxyForm.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ProxyForm.tsx
@@ -104,12 +104,13 @@ const namedProxyFormContext = React.createContext<NamedProxyFormContext>({
 
 interface NamedProxyFormContainerProps
   extends Omit<ProxyFormContextProviderProps, 'proxy' | 'onSave'> {
+  children?: React.ReactNode;
   proxy?: NamedCustomProxy;
   onSave: (proxy: NamedCustomProxy) => void;
 }
 
 export function NamedProxyForm(props: NamedProxyFormContainerProps) {
-  const { onSave, ...otherProps } = props;
+  const { children, onSave, ...otherProps } = props;
 
   const [name, setName] = useState<string>(props.proxy?.name ?? '');
 
@@ -127,11 +128,7 @@ export function NamedProxyForm(props: NamedProxyFormContainerProps) {
   return (
     <namedProxyFormContext.Provider value={nameContextValue}>
       <ProxyFormContextProvider {...otherProps} onSave={save}>
-        <SettingsForm>
-          <ProxyFormNameField />
-          <ProxyFormInner />
-          <ProxyFormButtons />
-        </SettingsForm>
+        <SettingsForm>{children}</SettingsForm>
       </ProxyFormContextProvider>
     </namedProxyFormContext.Provider>
   );
@@ -141,7 +138,7 @@ type ProxyFormNameFieldProps = {
   inputProps?: Partial<SettingsTextInputProps>;
 };
 
-function ProxyFormNameField(props: ProxyFormNameFieldProps) {
+export function ProxyFormNameField(props: ProxyFormNameFieldProps) {
   const { name, setName } = useContext(namedProxyFormContext);
 
   return (
@@ -184,7 +181,7 @@ export function ProxyFormButtons() {
   );
 }
 
-function ProxyFormInner() {
+export function ProxyFormInner() {
   const { proxy, setProxy } = useContext(proxyFormContext);
 
   // Available custom proxies