Skip to content

refactor(webapp): Update libraries, modernize Angular control flow, consolidate clipboard base, fix reconnect style loss#1752

Open
Krista House (kristahouse) wants to merge 3 commits intomasterfrom
refactor/web-app-reconnect-flow
Open

refactor(webapp): Update libraries, modernize Angular control flow, consolidate clipboard base, fix reconnect style loss#1752
Krista House (kristahouse) wants to merge 3 commits intomasterfrom
refactor/web-app-reconnect-flow

Conversation

@kristahouse
Copy link
Copy Markdown
Contributor

Angular Template Modernization

Converted all *ngFor structural directives to the new Angular @for control flow syntax across 5 components. Updated tab-view to use trackBySessionId for stable DOM identity on reconnect.

Reconnect Style Preservation Fix

Fixed a bug where :host CSS rules disappeared on the reconnect path. Angular's style reference count was dropping to zero when the old component view was destroyed before the new one was created. DynamicComponentService now creates the new component first, then removes old views, keeping the count at ≥ 1 throughout.

Tab View Type Safety

Replaced currentTabIndex: number | string with a getter/setter pair that always exposes number externally, normalizing PrimeNG's string | number tab value on write. Fixes the currentTabIndex > 0 comparison error.

Clipboard Handling Consolidation

Moved setupClipboardHandling() and clipboardActionButtons from duplicated private implementations in WebClientRdpComponent and WebClientVncComponent into DesktopWebClientBaseComponent. Also fixed a pre-existing null-pointer bug in ARD and VNC where this.formData.autoClipboard was accessed before formData was loaded.

Session Index Guard

Added an early-return guard to setWebSessionCurrentIndex to prevent redundant BehaviorSubject.next() emissions when the index hasn't changed.

Dependency Upgrades

Angular 20.3.520.3.18, Angular CLI/build tools → 20.3.21
TypeScript 5.8.25.9.3
@devolutions/web-ssh-gui 0.6.20.7.0
@devolutions/web-telnet-gui 0.4.00.4.4
@devolutions/terminal-shared 1.4.01.4.1
prismjs 1.29.01.30.0

Biome Cleanup

  • Removed unused imports across web-client-rdp, web-client-ssh, web-client-telnet
  • Removed unused private method setupClipboardHandling from web-client-ard (superseded by base class)
  • Formatting, trailing commas, import ordering

@github-actions
Copy link
Copy Markdown

Let maintainers know that an action is required on their side

  • Add the label release-required Please cut a new release (Devolutions Gateway, Devolutions Agent, Jetsocat, PowerShell module) when you request a maintainer to cut a new release (Devolutions Gateway, Devolutions Agent, Jetsocat, PowerShell module)

  • Add the label release-blocker Follow-up is required before cutting a new release if a follow-up is required before cutting a new release

  • Add the label publish-required Please publish libraries (`Devolutions.Gateway.Utils`, OpenAPI clients, etc) when you request a maintainer to publish libraries (Devolutions.Gateway.Utils, OpenAPI clients, etc.)

  • Add the label publish-blocker Follow-up is required before publishing libraries if a follow-up is required before publishing libraries

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This PR modernizes the Gateway UI webapp by upgrading dependencies, migrating Angular templates to the new control-flow syntax (@if / @for), consolidating shared web-client logic into base components, and addressing a reconnect path issue where Angular component :host styles could be dropped.

Changes:

  • Migrated multiple Angular templates from *ngIf/*ngFor to @if/@for and improved tab stability with a session-id-based tracking strategy.
  • Refactored web-client components by introducing shared base classes (terminal + desktop) and consolidating clipboard/session-termination handling.
  • Updated various tooling/config formatting and upgraded Angular/CLI/TypeScript and related dependencies.

Reviewed changes

Copilot reviewed 69 out of 70 changed files in this pull request and generated 7 comments.

Show a summary per file
File Description
webapp/tools/recording-player-tester/vite.config.ts Import ordering/formatting cleanup.
webapp/tools/recording-player-tester/tailwind.config.js Tailwind config formatting normalization.
webapp/tools/recording-player-tester/src/main.ts React render formatting cleanup.
webapp/tools/recording-player-tester/src/index.css Quote style normalization for import.
webapp/tools/recording-player-tester/src/context/RecordingPlayerContext.tsx Import ordering and component signature formatting.
webapp/tools/recording-player-tester/src/components/RightPanel.tsx Import ordering cleanup.
webapp/tools/recording-player-tester/src/components/LeftPanel.tsx Import ordering cleanup.
webapp/tools/recording-player-tester/src/App.tsx Import ordering cleanup.
webapp/packages/shadow-player/vite.config.ts Import ordering cleanup.
webapp/packages/shadow-player/src/websocket.ts Import ordering cleanup.
webapp/packages/shadow-player/src/streamer.ts Minor refactor + formatting; attribute handling adjustment.
webapp/packages/shadow-player/src/streamer.css Transition formatting for readability.
webapp/packages/shadow-player/src/sourceBuffer.ts Logging formatting/trailing comma cleanup.
webapp/packages/multi-video-player/src/video-player/single-video-seek-bar.ts Whitespace formatting cleanup.
webapp/packages/multi-video-player/src/video-player/player.ts Promise callback formatting cleanup.
webapp/packages/multi-video-player/src/style.css @font-face src formatting for readability.
webapp/packages/multi-video-player/src/live-streamer.ts Signature formatting + map callback formatting cleanup.
webapp/packages/multi-video-player/src/index.ts Export ordering cleanup.
webapp/packages/multi-video-player/src/gateway-api.ts Minor formatting + header object formatting cleanup.
webapp/packages/multi-video-player/server.js Import consolidation/formatting cleanup.
webapp/apps/gateway-ui/src/client/app/shared/services/web-session.service.ts Added guard to prevent redundant tab-index emissions; reconnect style-preservation notes.
webapp/apps/gateway-ui/src/client/app/shared/services/dynamic-component.service.ts Changed dynamic creation order (create new first, then remove old views) to preserve :host styles.
webapp/apps/gateway-ui/src/client/app/shared/models/component-status.model.ts Added optional terminationMessage for reconnect form messaging.
webapp/apps/gateway-ui/src/client/app/shared/components/tab-view/tab-view.component.ts Normalized tab index typing + introduced session-id tracking helper for stable identity.
webapp/apps/gateway-ui/src/client/app/shared/components/tab-view/tab-view.component.scss Flex/layout updates for PrimeNG Tabs panels to prevent overflow issues.
webapp/apps/gateway-ui/src/client/app/shared/components/tab-view/tab-view.component.html Migrated to @for and updated Tabs wiring (tablist + panels).
webapp/apps/gateway-ui/src/client/app/shared/components/session-toolbar/session-toolbar.component.html Migrated toolbar loops to @for.
webapp/apps/gateway-ui/src/client/app/shared/components/main-panel/main-panel.component.scss Layout/flex adjustments (replace 100vh usage with flex container).
webapp/apps/gateway-ui/src/client/app/shared/components/gateway-alert-message/gateway-alert-message.component.html Migrated conditional rendering to @if.
webapp/apps/gateway-ui/src/client/app/shared/components/dynamic-tab/dynamic-tab.component.ts Added reconnect-form swap logic and session update handling.
webapp/apps/gateway-ui/src/client/app/shared/components/dynamic-tab/dynamic-tab.component.scss Added host flex/background styling.
webapp/apps/gateway-ui/src/client/app/shared/bases/terminal-web-client-base.component.ts New base class consolidating terminal session lifecycle/error handling.
webapp/apps/gateway-ui/src/client/app/shared/bases/desktop-web-client-base.component.ts New base class consolidating desktop clipboard + iron error handling.
webapp/apps/gateway-ui/src/client/app/shared/bases/base-web-client.component.ts Added shared termination message type + helper for WS URL construction.
webapp/apps/gateway-ui/src/client/app/modules/web-client/vnc/web-client-vnc.component.ts Adopted desktop base class; consolidated clipboard/error helpers; null-safe clipboard config usage.
webapp/apps/gateway-ui/src/client/app/modules/web-client/vnc/web-client-vnc.component.scss Updated flex/layout rules and overlay anchoring.
webapp/apps/gateway-ui/src/client/app/modules/web-client/vnc/web-client-vnc.component.html Migrated loading block to @if and removed inline reconnect-form rendering.
webapp/apps/gateway-ui/src/client/app/modules/web-client/telnet/web-client-telnet.component.ts Adopted terminal base class; updated connect call and session ended handling.
webapp/apps/gateway-ui/src/client/app/modules/web-client/telnet/web-client-telnet.component.scss Layout adjustments for overlay/containers.
webapp/apps/gateway-ui/src/client/app/modules/web-client/telnet/web-client-telnet.component.html Migrated loading block to @if and removed inline reconnect-form rendering.
webapp/apps/gateway-ui/src/client/app/modules/web-client/ssh/web-client-ssh.component.ts Adopted terminal base class; refactored connection error handling paths.
webapp/apps/gateway-ui/src/client/app/modules/web-client/ssh/web-client-ssh.component.scss Layout adjustments for overlay/containers.
webapp/apps/gateway-ui/src/client/app/modules/web-client/ssh/web-client-ssh.component.html Migrated loading block to @if and removed inline reconnect-form rendering.
webapp/apps/gateway-ui/src/client/app/modules/web-client/rdp/web-client-rdp.component.ts Adopted desktop base class; consolidated clipboard/error helpers; Blink heuristic reuse.
webapp/apps/gateway-ui/src/client/app/modules/web-client/rdp/web-client-rdp.component.scss Updated flex/layout and overlay anchoring.
webapp/apps/gateway-ui/src/client/app/modules/web-client/rdp/web-client-rdp.component.html Migrated loading block to @if and removed inline reconnect-form rendering.
webapp/apps/gateway-ui/src/client/app/modules/web-client/net-scan/net-scan.component.scss Host layout tweak (display: flex).
webapp/apps/gateway-ui/src/client/app/modules/web-client/net-scan/net-scan.component.html Migrated to @if/@for control flow.
webapp/apps/gateway-ui/src/client/app/modules/web-client/form/web-client-form.component.ts Ensured termination message is displayed when dynamically created; null-safe message normalization.
webapp/apps/gateway-ui/src/client/app/modules/web-client/form/web-client-form.component.scss Updated message styling and form layout for flex container behavior.
webapp/apps/gateway-ui/src/client/app/modules/web-client/form/web-client-form.component.html Migrated to @if/@for and replaced p-messages list rendering.
webapp/apps/gateway-ui/src/client/app/modules/web-client/form/form-controls/username-control/username-control.component.html Migrated required helper text to @if.
webapp/apps/gateway-ui/src/client/app/modules/web-client/form/form-controls/screen-size-control/screen-size-control.component.html Migrated custom-size controls and helper text to @if.
webapp/apps/gateway-ui/src/client/app/modules/web-client/form/form-controls/password-control/password-control.component.html Migrated required helper text to @if.
webapp/apps/gateway-ui/src/client/app/modules/web-client/form/form-controls/kdc-url-control/kdc-url-control.component.html Migrated validation helper text to @if.
webapp/apps/gateway-ui/src/client/app/modules/web-client/form/form-controls/file-control/file-control.component.html Migrated file validation helper text to @if.
webapp/apps/gateway-ui/src/client/app/modules/web-client/form/form-components/vnc/vnc-form.component.html Migrated “More Settings” and conditional fields to @if.
webapp/apps/gateway-ui/src/client/app/modules/web-client/form/form-components/rdp/rdp-form.component.html Migrated “More Settings” and auto-clipboard conditional to @if.
webapp/apps/gateway-ui/src/client/app/modules/web-client/form/form-components/ard/ard-form.component.html Migrated “More Settings” and auto-clipboard conditional to @if.
webapp/apps/gateway-ui/src/client/app/modules/web-client/ard/web-client-ard.component.ts Adopted desktop base class; consolidated clipboard/error helpers; null-safe clipboard config usage.
webapp/apps/gateway-ui/src/client/app/modules/web-client/ard/web-client-ard.component.scss Updated flex/layout and overlay anchoring.
webapp/apps/gateway-ui/src/client/app/modules/web-client/ard/web-client-ard.component.html Migrated loading block to @if and removed inline reconnect-form rendering.
webapp/apps/gateway-ui/src/client/app/modules/login/login.component.html Migrated to @if/@for and updated message rendering.
webapp/apps/gateway-ui/src/client/app/modules/base/menu/menu-list-item/menu-list-item.component.html Migrated conditional icon to @if.
webapp/apps/gateway-ui/src/client/app/modules/base/menu/menu-list-active-sessions/menu-list-active-sessions.component.html Migrated sessions list to @for and icon to @if.
webapp/apps/gateway-ui/src/client/app/modules/base/menu/menu-group-list-item/menu-group-list-item.component.html Migrated to @if blocks for header/body and accordion elements.
webapp/apps/gateway-ui/src/client/app/modules/base/menu/app-menu.component.html Migrated multiple conditional/loop sections to @if/@for.
webapp/apps/gateway-ui/src/client/app/app.component.html Migrated loading indicator to @if.
webapp/apps/gateway-ui/package.json Dependency upgrades (Angular/CLI/TS + related packages) and minor version pinning changes.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 49 out of 52 changed files in this pull request and generated 5 comments.


💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copy link
Copy Markdown
Member

@CBenoit Benoît Cortier (CBenoit) left a comment

Choose a reason for hiding this comment

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

LGTM

@kristahouse Krista House (kristahouse) force-pushed the refactor/web-app-reconnect-flow branch from 0e4dee2 to 8428527 Compare April 14, 2026 17:39
@CBenoit
Copy link
Copy Markdown
Member

Hi Krista House (@kristahouse)

Is it ready to be merged?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

3 participants