Skip to content

Feat/native proxy settings#32804

Open
tim2zg wants to merge 8 commits intoelement-hq:developfrom
tim2zg:feat/native-proxy-settings
Open

Feat/native proxy settings#32804
tim2zg wants to merge 8 commits intoelement-hq:developfrom
tim2zg:feat/native-proxy-settings

Conversation

@tim2zg
Copy link
Copy Markdown

@tim2zg tim2zg commented Mar 14, 2026

Checklist

This is the UI part of this PR on desktop: element-hq/element-desktop#2827

@tim2zg tim2zg requested a review from a team as a code owner March 14, 2026 22:47
@tim2zg tim2zg requested review from Half-Shot and dbkr March 14, 2026 22:47
@github-actions github-actions Bot added the Z-Community-PR Issue is solved by a community member's PR label Mar 14, 2026
Copy link
Copy Markdown
Member

@Half-Shot Half-Shot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey, thanks for the contribution! Unfortunately you've caught us in the mid-transition phase to MVVM so the changes are going to need a small shuffle. I think basically this involves moving the component to shared-components, and building up a view model for interfacing with Settings.

The other bits of the code are looking good, thanks for a good start

Comment thread apps/web/src/@types/global.d.ts Outdated
| "userDownloadCompleted"
| "userDownloadAction"
| "openDesktopCapturerSourcePicker"
| "open_proxy_settings"
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should probably follow the same casing

Suggested change
| "open_proxy_settings"
| "openProxySettings"

private renderProxySection(): ReactNode {
if (!window.electron) return null;

const config = SettingsStore.getValue("desktopProxyConfig") || { mode: "system" };
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should { mode: "system" } just be a default value of desktopProxyConfig? It does support defaults

}

private renderProxySection(): ReactNode {
if (!window.electron) return null;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should use the Platform code for this. E.g. exposing a supportsProxyConfiguration() like https://github.com/vector-im/riot-web/blob/da5a30ba7130f763f9b324bb1e2c68377cf728bb/apps/web/src/BasePlatform.ts#L162-L169.

And then it's just a case of PlatformPeg.get().supportsProxyConfiguration() which is a bit more generic than checking if electron is exposed.

* @param props - The component props.
* @param props.onFinished - Callback invoked when the modal is closed or settings are saved.
*/
export const NetworkProxyModal: React.FC<Props> = ({ onFinished }) => {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey! So we're moving to a MVVM based approach for all new code in Element Web and unfortunately you've made the critical mistake of reading our existing code. https://github.com/element-hq/element-web/blob/develop/docs/MVVM.md. Essentially I'd port the logic of this component into a NetworkProxyViewModel and the view rendering to a NeworkProxyView in shared-components.

The nice upshot of this is that you can then design the modal quite nicely in storybook without having to run a full desktop client.

const update = (patch: Partial<ProxyConfig>): void => setConfig((prev) => ({ ...prev, ...patch }));

return (
<FocusLock
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So I think here you can just use BaseDialog, with the above suggestion about view models, I'd do:

export const NetworkProxyModal: React.FC<Props> = ({ onFinished }) => {
  const vm = new NetworkProxyViewModel();
  return <BaseDialog {...}>
      <NetworkProxyModalView vm={vm} />
  </BaseDialog>
}

Comment thread apps/web/src/i18n/strings/de_DE.json Outdated
"cameras": "Kameras",
"cancel": "Abbrechen",
"capabilities": "Funktionen",
"configuration": "Konfiguration",
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah yeah, another one of our footguns. We don't accept translations directly into the codebase even if you know the translations, it has to go via Localazy unless it's en_EN.json.

},
"desktopProxyConfig": {
supportedLevels: [SettingLevel.PLATFORM],
default: { mode: "system" } as ProxyConfig,
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't need an as?

@CLAassistant
Copy link
Copy Markdown

CLAassistant commented Mar 17, 2026

CLA assistant check
All committers have signed the CLA.

@tim2zg tim2zg force-pushed the feat/native-proxy-settings branch 2 times, most recently from e1d52f8 to c5a662f Compare March 17, 2026 10:59
@Half-Shot Half-Shot self-requested a review March 17, 2026 11:00
- Ported modal logic to NetworkProxyViewModel and view to NetworkProxyView in shared-components
- Implemented real logic for supportsProxyConfiguration in ElectronPlatform
- Renamed open_proxy_settings to openProxySettings for consistent casing
- Removed German translations (to be handled via Localazy)
- Registered desktopProxyConfig in SettingsStore
- Simplified NetworkProxyModal by utilizing the new MVVM components and BaseDialog
@tim2zg tim2zg force-pushed the feat/native-proxy-settings branch from c5a662f to ea1bb74 Compare March 17, 2026 14:33
@tim2zg
Copy link
Copy Markdown
Author

tim2zg commented Mar 17, 2026

Thank you for the feedback and guidance.
I'm still getting familiar with the React/MVVM, so please let me know if there are any further refinements / or corrections needed.

tim2zg and others added 5 commits March 22, 2026 10:53
- Added Network Proxy link to AuthFooter for pre-login configuration
- Ensured proxy settings survive logout
- Improved proxy rule generation for HTTPS support
- Cleaned up MVVM implementation and translations
- Ported all desktop-side proxy fixes to apps/desktop
- Verified MVVM migration and auth footer entry
- Ensured consistent IPC naming and platform abstraction
- Fixed duplicate imports and globalThis usage in electron-main
@Half-Shot Half-Shot added the T-Feature Request to add a new feature which does not exist right now label Apr 27, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

T-Feature Request to add a new feature which does not exist right now Z-Community-PR Issue is solved by a community member's PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants