change: improve config migration UX

surrealdb · Aug 6, 2024 · 82f853a · 82f853a
1 parent 5a4ba9e
commit 82f853a
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 19 deletions.
diff --git a/src/components/App/modals/updater.tsx b/src/components/App/modals/updater.tsx
@@ -1,6 +1,6 @@
 import classes from "../style.module.scss";
 import { relaunch } from "@tauri-apps/plugin-process";
-import { ActionIcon, Box, Dialog, Group, Text } from "@mantine/core";
+import { ActionIcon, Alert, Box, Dialog, Group, Text } from "@mantine/core";
 import { MouseEvent, useState } from "react";
 import { Icon } from "~/components/Icon";
 import { useStable } from "~/hooks/stable";
@@ -66,12 +66,29 @@ export function UpdaterDialog() {
 	});
 
 	const promptUpdate = useConfirmation({
-		title: "New major release",
-		message: "The update you are about to install is a new major version of Surrealist. Are you sure you want to proceed?",
-		confirmText: "Install update",
+		title: "New major version",
+		message: (
+			<>
+				The update you are about to install is a new major version of Surrealist. Are you sure you want to proceed?
+				<Alert
+					mt="xl"
+					color="orange"
+					title="Warning"
+				>
+					An upgrade could result in incompatibility with older versions of SurrealDB.
+				</Alert>
+			</>
+		),
+		confirmText: (
+			<Group gap="xs">
+				Install update
+				<Icon path={iconDownload} />
+			</Group>
+		),
 		confirmProps: { variant: "gradient" },
 		dismissText: "Don't update now",
-		onConfirm: () => installUpdate()
+		onConfirm: () => installUpdate(),
+		onDismiss: () => hideAvailableUpdate(),
 	});
 
 	const handleClick = useStable(() => {

diff --git a/src/providers/Confirmation/index.tsx b/src/providers/Confirmation/index.tsx
@@ -1,16 +1,16 @@
 import { Button, ButtonProps, Group, Text } from "@mantine/core";
 import { Modal } from "@mantine/core";
-import { PropsWithChildren, createContext, useContext, useState } from "react";
+import { PropsWithChildren, ReactNode, createContext, useContext, useState } from "react";
 import { ModalTitle } from "~/components/ModalTitle";
 import { Spacer } from "~/components/Spacer";
 import { useStable } from "~/hooks/stable";
 
 interface ConfirmOptions<T> {
-	title?: string;
-	message: string;
-	dismissText?: string;
+	title?: ReactNode;
+	message: ReactNode;
+	dismissText?: ReactNode;
 	dismissProps?: ButtonProps;
-	confirmText?: string;
+	confirmText?: ReactNode;
 	confirmProps?: ButtonProps;
 	onDismiss?: () => void;
 	onConfirm: (value: T) => void;

diff --git a/src/util/downgrade.tsx b/src/util/downgrade.tsx
@@ -40,27 +40,33 @@ export async function showDowngradeWarningModal() {
 					Your config file was updated by a newer version of Surrealist and is incompatible with this version.
 				</Text>
 				{hasBackup ? (
-					<Alert
-						mt="xl"
-						color="blue"
-					>
-						<Text>
+					<>
+						<Alert
+							mt="xl"
+							color="blue"
+							title="Note"
+						>
 							A backup of your previous configuration file was found. You can restore it by clicking the button below.
 							Note that this will discard any changes you made since the last update.
-						</Text>
+						</Alert>
 						<Button
 							style={{ outline: "none" }}
 							onClick={restoreBackup}
+							fullWidth
 							color="blue"
 							mt="md"
 						>
 							Restore backup
 						</Button>
-					</Alert>
+					</>
 				) : (
-					<Text c="red" mt="xl">
+					<Alert
+						mt="xl"
+						color="red"
+						title="Note"
+					>
 						Please reset your configuration file or update your version of Surrealist to continue.
-					</Text>
+					</Alert>
 				)}
 			</Box>
 		)