From 0e6d33aa821c5cc02fd0ed28bca6c5744d3a433d Mon Sep 17 00:00:00 2001
From: Cooldude2606 <25043174+Cooldude2606@users.noreply.github.com>
Date: Tue, 8 Apr 2025 20:34:50 +0100
Subject: [PATCH] Add button to download ctl config (#743)

* Move saveJson to util file

* Add button to download ctl config

* Add icon and tooltip to describe what the button does

---------

Co-authored-by: Danielv123 <danielv@danielv.no>
---
 packages/web_ui/src/components/SiteLayout.tsx | 18 ++++++++++++-
 packages/web_ui/src/components/UsersPage.tsx  | 17 +------------
 packages/web_ui/src/util/save_file.ts         | 25 +++++++++++++++++++
 3 files changed, 43 insertions(+), 17 deletions(-)
 create mode 100644 packages/web_ui/src/util/save_file.ts

diff --git a/packages/web_ui/src/components/SiteLayout.tsx b/packages/web_ui/src/components/SiteLayout.tsx
index bfd9f7e9..f430f801 100644
--- a/packages/web_ui/src/components/SiteLayout.tsx
+++ b/packages/web_ui/src/components/SiteLayout.tsx
@@ -1,6 +1,6 @@
 import React, { Fragment, useContext, useEffect, useState } from "react";
 import { Route, Routes, useNavigate } from "react-router-dom";
-import { Dropdown, Layout, Menu, MenuProps } from "antd";
+import { Button, Dropdown, Layout, Menu, MenuProps, Tooltip } from "antd";
 import UserOutlined from "@ant-design/icons/UserOutlined";
 import webUiPackage from "../../package.json";
 
@@ -10,6 +10,9 @@ import ErrorPage from "./ErrorPage";
 import ControlContext from "./ControlContext";
 import { pages } from "../pages";
 import { DraggingContext } from "../model/is_dragging";
+import { saveJson } from "../util/save_file";
+import { ControlConfig } from "@clusterio/lib";
+import { DownloadOutlined } from "@ant-design/icons";
 
 type MenuItem = Required<MenuProps>["items"][number];
 
@@ -38,6 +41,7 @@ export default function SiteLayout() {
 	let [currentSidebarPath, setCurrentSidebarPath] = useState<string | null>(null);
 	let account = useAccount();
 	let plugins = useContext(ControlContext).plugins;
+	const control = useContext(ControlContext);
 	const [dragging, setDragging] = useState(0);
 
 	function SetSidebar(props: { path: string | null }) {
@@ -51,12 +55,24 @@ export default function SiteLayout() {
 		onClick: ({ key }: { key: string }) => {
 			if (key === "user") {
 				navigate(`/users/${account.name}/view`);
+			} else if (key === "ctlConfig") {
+				const config = new ControlConfig("control", {
+					"control.controller_token": control.connector.token,
+					"control.controller_url": (new URL(webRoot, document.location.href)).href,
+				});
+				saveJson("config-control.json", config.toJSON());
 			} else if (key === "logOut") {
 				account.logOut();
 			}
 		},
 		items: [
 			{ label: account.name, key: "user" },
+			{
+				label: <Tooltip title="Download credentials and configuration file for cli interface">
+					Ctl Config <Button size="small" icon={<DownloadOutlined />} />
+				</Tooltip>,
+				key: "ctlConfig",
+			},
 			{ type: "divider" },
 			{ label: "Log out", danger: true, key: "logOut" },
 		],
diff --git a/packages/web_ui/src/components/UsersPage.tsx b/packages/web_ui/src/components/UsersPage.tsx
index a47f4c79..4a2acbfa 100644
--- a/packages/web_ui/src/components/UsersPage.tsx
+++ b/packages/web_ui/src/components/UsersPage.tsx
@@ -10,6 +10,7 @@ import { useAccount } from "../model/account";
 import ControlContext from "./ControlContext";
 import { notifyErrorHandler } from "../util/notify";
 import { formatDuration } from "../util/time_format";
+import { saveJson } from "../util/save_file";
 import PageHeader from "./PageHeader";
 import PageLayout from "./PageLayout";
 import PluginExtra from "./PluginExtra";
@@ -58,22 +59,6 @@ function CreateUserButton() {
 	</>;
 }
 
-// This is the most common and best supported method
-// For full support we should consider using npm:file-saver
-function saveFile(name: string, blob: Blob) {
-	const a = document.createElement("a");
-	a.href = URL.createObjectURL(blob);
-	a.download = name;
-	a.addEventListener("click", (e) => {
-		setTimeout(() => URL.revokeObjectURL(a.href), 30 * 1000);
-	});
-	a.click();
-};
-
-function saveJson(name: string, json: object) {
-	return saveFile(name, new Blob([JSON.stringify(json, null, 2)], { type: "application/json" }));
-}
-
 type UserBulkActionProps = {
 	setApplyAction(func: () => Promise<void>): void,
 	form: FormInstance,
diff --git a/packages/web_ui/src/util/save_file.ts b/packages/web_ui/src/util/save_file.ts
new file mode 100644
index 00000000..a2cf544c
--- /dev/null
+++ b/packages/web_ui/src/util/save_file.ts
@@ -0,0 +1,25 @@
+
+/**
+ * Downloads a file to the users PC, should only be used following direct user input.
+ * @param name Name of the file to save
+ * @param blob Content to save
+ */
+export function saveFile(name: string, blob: Blob) {
+	// This is the most common and best supported method, for full support we should consider using npm:file-saver
+	const a = document.createElement("a");
+	a.href = URL.createObjectURL(blob);
+	a.download = name;
+	a.addEventListener("click", (e) => {
+		setTimeout(() => URL.revokeObjectURL(a.href), 30 * 1000);
+	});
+	a.click();
+};
+
+/**
+ * Downloads a json file to the users PC
+ * @param name Name of the file to save, should include .json
+ * @param json The object to save as a formated json string
+ */
+export function saveJson(name: string, json: object) {
+	saveFile(name, new Blob([JSON.stringify(json, null, 2)], { type: "application/json" }));
+}