Clean up update dialog UI and fix desktop external links (Stirling-Tools#6727)

Author: Frooodle

.github/aur/stirling-pdf-desktop/PKGBUILD

@@ -1,6 +1,6 @@
 # Maintainer: Stirling PDF Inc <contact@stirlingpdf.com>
 pkgname=stirling-pdf-desktop
-pkgver=2.12.0
+pkgver=2.13.0
 pkgrel=1
 pkgdesc="Locally hosted, web-based PDF manipulation tool (Tauri desktop app, official Stirling PDF Inc build)"
 arch=('x86_64')

.github/aur/stirling-pdf-server-bin/PKGBUILD

@@ -1,6 +1,6 @@
 # Maintainer: Stirling PDF Inc <contact@stirlingpdf.com>
 pkgname=stirling-pdf-server-bin
-pkgver=2.12.0
+pkgver=2.13.0
 pkgrel=1
 pkgdesc="Locally hosted, web-based PDF manipulation tool (server JAR, prebuilt)"
 arch=('any')

build.gradle

@@ -78,7 +78,7 @@ springBoot {
 
 allprojects {
     group = 'stirling.software'
-    version = '2.12.0'
+    version = '2.13.0'
 
     configurations.configureEach {
         exclude group: "org.springframework.boot", module: "spring-boot-starter-tomcat"

frontend/editor/public/locales/en-US/translation.toml

@@ -7712,8 +7712,6 @@ allReleases = "All Releases"
 breaking = "Breaking"
 breakingChanges = "Breaking Changes"
 breakingChangesDefault = "This version contains breaking changes."
-breakingChangesDetected = "Breaking Changes Detected"
-breakingChangesMessage = "Some versions contain breaking changes. Please review the migration guides below before updating."
 close = "Close"
 closeModal = "Close update modal"
 current = "Current Version"

frontend/editor/src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "Stirling-PDF",
-  "version": "2.12.0",
+  "version": "2.13.0",
   "identifier": "stirling.pdf.dev",
   "build": {
     "frontendDist": "../dist",

frontend/editor/src/core/components/shared/UpdateModal.tsx

@@ -24,6 +24,7 @@ import {
   MachineInfo,
 } from "@app/services/updateService";
 import { Z_INDEX_OVER_CONFIG_MODAL } from "@app/styles/zIndex";
+import { openExternal } from "@app/platform/openExternal";
 import WarningAmberIcon from "@mui/icons-material/WarningAmber";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import DownloadIcon from "@mui/icons-material/Download";
@@ -36,6 +37,19 @@ import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import ExpandLessIcon from "@mui/icons-material/ExpandLess";
 
+/**
+ * Best-effort Tauri detection without importing `@tauri-apps/api` into the
+ * core bundle (which must stay runnable on plain web). Tauri v2 injects
+ * `__TAURI_INTERNALS__` before any user code runs. Mirrors UpdateStartupPopup.
+ */
+function isRunningInTauri(): boolean {
+  if (typeof window === "undefined") return false;
+  return (
+    typeof (window as unknown as { __TAURI_INTERNALS__?: unknown })
+      .__TAURI_INTERNALS__ !== "undefined"
+  );
+}
+
 export type DesktopInstallState =
   | "idle"
   | "downloading"
@@ -197,6 +211,20 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
     onClose();
   };
 
+  // External links (release notes, migration guides, download fallback) use
+  // real anchors so they open a new tab on web. Inside Tauri the webview traps
+  // target="_blank", so on desktop we intercept and hand the URL to the OS
+  // browser via the platform seam. stopPropagation keeps links nested in the
+  // clickable version-history rows from toggling the row.
+  const handleExternalLink =
+    (url: string) => (e: React.MouseEvent<HTMLElement>) => {
+      e.stopPropagation();
+      if (isRunningInTauri()) {
+        e.preventDefault();
+        void openExternal(url);
+      }
+    };
+
   // Sort versions newest first, skip the latest (already shown in header)
   const sortedVersions = fullUpdateInfo?.new_versions
     ? [...fullUpdateInfo.new_versions].sort((a, b) =>
@@ -323,11 +351,25 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
             </Group>
           </Box>
 
-          {/* Priority badge + recommendation — compact single line */}
+          {/* Priority badge + recommendation — compact single line. When the
+              update contains breaking changes we surface a compact inline
+              chip here rather than a separate full-width orange banner; the
+              specific per-version detail lives in Version History below. */}
           <Group gap="sm" align="center" px={4}>
             <Badge color={priorityColor} variant="filled" size="lg" radius="sm">
               {getPriorityLabel(updateSummary.max_priority)}
             </Badge>
+            {updateSummary.any_breaking && (
+              <Badge
+                color="orange"
+                variant="light"
+                size="lg"
+                radius="sm"
+                leftSection={<WarningAmberIcon style={{ fontSize: 14 }} />}
+              >
+                {t("update.breaking", "Breaking")}
+              </Badge>
+            )}
             <Text size="sm" c="dimmed" style={{ flex: 1 }}>
               {updateSummary.recommended_action ||
                 t(
@@ -362,6 +404,7 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
                   href={WINDOWS_INSTALL_DOCS_URL}
                   target="_blank"
                   rel="noopener noreferrer"
+                  onClick={handleExternalLink(WINDOWS_INSTALL_DOCS_URL)}
                 >
                   {t(
                     "desktopUpdate.blocked.docsLink",
@@ -402,6 +445,9 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
                   component="a"
                   href={`https://github.com/Stirling-Tools/Stirling-PDF/releases/tag/v${updateSummary.latest_version}`}
                   target="_blank"
+                  onClick={handleExternalLink(
+                    `https://github.com/Stirling-Tools/Stirling-PDF/releases/tag/v${updateSummary.latest_version}`,
+                  )}
                   c="blue"
                   style={{
                     textDecoration: "none",
@@ -418,6 +464,9 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
                   component="a"
                   href="https://github.com/Stirling-Tools/Stirling-PDF/releases"
                   target="_blank"
+                  onClick={handleExternalLink(
+                    "https://github.com/Stirling-Tools/Stirling-PDF/releases",
+                  )}
                   c="dimmed"
                   style={{
                     textDecoration: "none",
@@ -433,25 +482,6 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
             </Group>
           </Box>
 
-          {/* Breaking changes */}
-          {updateSummary.any_breaking && (
-            <Alert
-              variant="light"
-              color="orange"
-              radius="md"
-              icon={<WarningAmberIcon style={{ fontSize: 18 }} />}
-              title={t(
-                "update.breakingChangesDetected",
-                "Breaking Changes Detected",
-              )}
-            >
-              {t(
-                "update.breakingChangesMessage",
-                "Some versions contain breaking changes. Please review the migration guides below before updating.",
-              )}
-            </Alert>
-          )}
-
           {/* Migration guides */}
           {updateSummary.migration_guides &&
             updateSummary.migration_guides.length > 0 && (
@@ -505,6 +535,7 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
                           component="a"
                           href={guide.url}
                           target="_blank"
+                          onClick={handleExternalLink(guide.url)}
                           variant="default"
                           size="xs"
                           rightSection={
@@ -603,7 +634,9 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
                             variant="subtle"
                             size="xs"
                             px={6}
-                            onClick={(e) => e.stopPropagation()}
+                            onClick={handleExternalLink(
+                              `https://github.com/Stirling-Tools/Stirling-PDF/releases/tag/v${version.version}`,
+                            )}
                             rightSection={
                               <OpenInNewIcon style={{ fontSize: 11 }} />
                             }
@@ -673,6 +706,10 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
                                       version.compatibility.migration_guide_url
                                     }
                                     target="_blank"
+                                    onClick={handleExternalLink(
+                                      version.compatibility
+                                        .migration_guide_url ?? "",
+                                    )}
                                     variant="light"
                                     color="orange"
                                     size="xs"
@@ -844,6 +881,7 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
                       component="a"
                       href={downloadUrl}
                       target="_blank"
+                      onClick={handleExternalLink(downloadUrl)}
                       variant="default"
                       radius="md"
                       size="md"
@@ -884,6 +922,7 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
                 component="a"
                 href={downloadUrl}
                 target="_blank"
+                onClick={handleExternalLink(downloadUrl)}
                 color="blue"
                 radius="md"
                 size="lg"

frontend/editor/src/core/components/shared/config/configSections/GeneralSection.tsx

@@ -14,7 +14,6 @@ import {
   ActionIcon,
   Button,
   Badge,
-  Alert,
 } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { usePreferences } from "@app/contexts/PreferencesContext";
@@ -459,26 +458,6 @@ const GeneralSection: React.FC<GeneralSectionProps> = ({
                 />
               </Stack>
             )}
-
-            {updateSummary?.any_breaking && (
-              <Alert
-                color="orange"
-                title={t(
-                  "update.breakingChangesDetected",
-                  "Breaking Changes Detected",
-                )}
-                styles={{
-                  title: { fontWeight: 600 },
-                }}
-              >
-                <Text size="sm">
-                  {t(
-                    "update.breakingChangesMessage",
-                    "Some versions contain breaking changes. Please review the migration guides before updating.",
-                  )}
-                </Text>
-              </Alert>
-            )}
           </Stack>
         </Paper>
       )}

frontend/editor/src/core/platform/openExternal.ts

@@ -0,0 +1,12 @@
+/**
+ * core/web implementation of the @app/platform/openExternal seam.
+ *
+ * The OSS / self-hosted web build runs in a normal browser, so an external URL
+ * just opens in a new tab. The desktop (Tauri) and saas leaves shadow this with
+ * their own platform/openExternal.ts. This lives in core/ so the seam also
+ * resolves for the core and proprietary build variants - whose `@app/*` maps to
+ * src/core - since shared components (e.g. UpdateModal) import it.
+ */
+export const openExternal = async (url: string): Promise<void> => {
+  window.open(url, "_blank", "noopener,noreferrer");
+};

frontend/editor/src/core/testing/serverExperienceSimulations.ts

@@ -38,7 +38,7 @@ const FREE_LICENSE_INFO: LicenseInfo = {
 
 const BASE_NO_LOGIN_CONFIG: AppConfig = {
   enableAnalytics: true,
-  appVersion: "2.12.0",
+  appVersion: "2.13.0",
   serverCertificateEnabled: false,
   enableAlphaFunctionality: false,
   serverPort: 8080,

frontend/editor/src/proprietary/testing/serverExperienceSimulations.ts

@@ -48,7 +48,7 @@ const FREE_LICENSE_INFO: LicenseInfo = {
 
 const BASE_NO_LOGIN_CONFIG: AppConfig = {
   enableAnalytics: true,
-  appVersion: "2.12.0",
+  appVersion: "2.13.0",
   serverCertificateEnabled: false,
   enableAlphaFunctionality: false,
   enableDesktopInstallSlide: true,