@finsemble/finsemble-ui 6.3.0 → 6.4.0-beta.2

package/react/components/smartDesktopDesigner/AppEditPage.js

@@ -6,26 +6,111 @@ import React, { useState } from "react";
 import { FileInput } from "../common/FileInput";
 import { Button } from "../common/Button";
 import { validateFilename, VALID_APP_EXTENSIONS } from "../common/file_helpers";
-import "../common/css/application-edit-page.css";
 import { AppEditAccess } from "./AppEditAccess";
+import { Tooltip } from "../common/Tooltip";
+import { Accordion } from "../common/Accordion";
+import { Checkbox } from "../common/Checkbox";
+import { InputTable } from "../common/InputTable";
+import DefaultDropdownButton from "../shared/DefaultDropdownButton";
+import "../common/css/application-edit-page.css";
+import { FinsembleIcon } from "../common/FinsembleIcon";
 const DEFAULT_WINDOW_WIDTH = 1280;
 const DEFAULT_WINDOW_HEIGHT = 600;
 const MINIMUM_WINDOW_WIDTH = 0;
 const MINIMUM_WINDOW_HEIGHT = 0;
-export const AppEditPage = ({ startingDisplayName = "", isSetupWizard = false, isEditMode = true, startingAppType = "web", startingWindowURL = "", startingNativePath = "", startingDescription = "", startingWidth = DEFAULT_WINDOW_WIDTH, startingHeight = DEFAULT_WINDOW_HEIGHT, startingRules = [], validateURL, removeApplicationFn = () => { }, cancelFn = () => { }, submitFn, addApp, isInboundInteropAuthorized, isOutboundInteropAuthorized, }) => {
+export const defaultAppData = {
+    name: "",
+    abstractPosition: 0,
+    addToWorkspace: true,
+    allowAutoArrange: true,
+    allowGrouping: true,
+    allowMinimize: true,
+    allowMaximize: true,
+    allowSnapping: true,
+    allowTabbing: true,
+    allowTiling: true,
+    alwaysOnTop: false,
+    appArguments: "",
+    appType: "WEB",
+    autoConnect: false,
+    description: "",
+    enableAOT: false,
+    enableTitleBar: true,
+    grpc: false,
+    height: DEFAULT_WINDOW_HEIGHT,
+    hideClose: false,
+    hideMaximize: false,
+    hideMinimize: false,
+    iconURL: "",
+    intents: [],
+    isEvergreen: false,
+    launchableByUser: true,
+    native_windowSpawnTimeout: 30,
+    opacity: 1,
+    path: "",
+    persistPath: true,
+    persistURL: true,
+    resizable: true,
+    rules: [],
+    security: "trusted",
+    singleton: false,
+    spawnOnStartup: false,
+    tags: [],
+    url: "",
+    width: DEFAULT_WINDOW_WIDTH,
+};
+const openLink = (url) => {
+    FSBL.Clients.LauncherClient.spawn("", {
+        url,
+        addToWorkspace: false,
+    }, () => { });
+};
+export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web", startingWindowURL = "", startingNativePath = "", appData = defaultAppData, validateURL, removeApplicationFn = () => { }, cancelFn = () => { }, submitFn, addApp, isInboundInteropAuthorized, isOutboundInteropAuthorized, }) => {
+    var _a, _b;
     const [displayName, setDisplayName] = useState(startingDisplayName);
     const [currentAppType, setCurrentAppType] = useState(startingAppType);
     const [windowURL, setWindowURL] = useState(startingWindowURL);
     const [nativePath, setNativePath] = useState(startingNativePath);
-    const [componentDescription, setComponentDescription] = useState(startingDescription);
-    const [windowWidth, setWindowWidth] = useState(startingWidth || DEFAULT_WINDOW_WIDTH);
-    const [windowHeight, setWindowHeight] = useState(startingHeight || DEFAULT_WINDOW_HEIGHT);
-    const [rules, setRules] = useState(startingRules || []);
+    const [abstractPosition, setAbstractPosition] = useState(appData.abstractPosition);
+    const [addToWorkspace, setAddToWorkspace] = useState(appData.addToWorkspace);
+    const [allowAutoArrange, setAllowAutoArrange] = useState(appData.allowAutoArrange);
+    const [allowGrouping, setAllowGrouping] = useState(appData.allowGrouping);
+    const [allowMinimize, setAllowMinimize] = useState(appData.allowMinimize);
+    const [allowMaximize, setAllowMaximize] = useState(appData.allowMaximize);
+    const [allowSnapping, setAllowSnapping] = useState(appData.allowSnapping);
+    const [allowTabbing, setAllowTabbing] = useState(appData.allowTabbing);
+    const [allowTiling, setAllowTiling] = useState(appData.allowTiling);
+    const [aot, setAot] = useState(appData.alwaysOnTop);
+    const [appArguments, setAppArguments] = useState(appData.appArguments);
+    const [autoConnect, setAutoConnect] = useState(appData.autoConnect);
+    const [componentDescription, setComponentDescription] = useState(appData.description);
+    const [enableAOT, setEnableAOT] = useState(appData.enableAOT);
+    const [enableTitleBar, setEnableTitleBar] = useState(appData.enableTitleBar);
+    const [grpc, setGrpc] = useState(appData.grpc);
+    const [hideClose, setHideClose] = useState(appData.hideClose);
+    const [hideMaximize, setHideMaximize] = useState(appData.hideMaximize);
+    const [hideMinimize, setHideMinimize] = useState(appData.hideMinimize);
+    const [iconURL, setIconURL] = useState(appData.iconURL);
+    const [intents, setIntents] = useState(appData.intents);
+    const [isEvergreen, setIsEvergreen] = useState(appData.isEvergreen);
+    const [launchableByUser, setLaunchableByUser] = useState(appData.launchableByUser);
+    const [native_windowSpawnTimeout, setNative_windowSpawnTimeout] = useState(appData.native_windowSpawnTimeout);
+    const [opacity, setOpacity] = useState(appData.opacity);
+    const [persistPath, setPersistPath] = useState(appData.persistPath);
+    const [persistURL, setPersistURL] = useState(appData.persistURL);
+    const [resizable, setResizable] = useState(appData.resizable);
+    const [rules, setRules] = useState(appData.rules);
+    const [security, setSecurity] = useState(appData.security);
+    const [singleton, setSingleton] = useState(appData.singleton);
+    const [spawnOnStartup, setSpawnOnStartup] = useState(appData.spawnOnStartup);
+    const [windowHeight, setWindowHeight] = useState(appData.height || DEFAULT_WINDOW_HEIGHT);
+    const [windowWidth, setWindowWidth] = useState(appData.width || DEFAULT_WINDOW_WIDTH);
+    const [selectConnectTrustAll, setSelectConnectTrustAll] = useState(!Array.isArray(appData.rules) || appData.rules.filter((rule) => "authorize" in rule).length === 0);
     const isWindowURLValid = validateURL(windowURL);
     const isHeightValid = !(typeof windowHeight !== "number" || windowHeight < MINIMUM_WINDOW_HEIGHT);
     const isWidthValid = !(typeof windowWidth !== "number" || windowWidth < MINIMUM_WINDOW_WIDTH);
     const disableSubmit = (currentAppType === "web" && (!isWindowURLValid || windowURL.length === 0)) ||
-        (currentAppType === "native" &&
+        (currentAppType !== "web" &&
             (!nativePath || nativePath.length === 0 || validateFilename(VALID_APP_EXTENSIONS, nativePath))) ||
         displayName === undefined ||
         displayName === "" ||
@@ -40,10 +125,40 @@ export const AppEditPage = ({ startingDisplayName = "", isSetupWizard = false, i
             url: windowURL,
             path: nativePath,
             appType: currentAppType,
+            appArguments: appArguments,
             width: windowWidth,
             height: windowHeight,
             description: componentDescription,
-            rules,
+            iconURL,
+            rules: selectConnectTrustAll ? [] : rules,
+            intents,
+            persistPath,
+            persistURL,
+            addToWorkspace,
+            allowAutoArrange,
+            allowGrouping,
+            allowMinimize,
+            allowMaximize,
+            allowSnapping,
+            allowTabbing,
+            allowTiling,
+            enableAOT,
+            enableTitleBar,
+            hideClose,
+            hideMinimize,
+            hideMaximize,
+            autoConnect,
+            abstractPosition,
+            resizable,
+            alwaysOnTop: aot,
+            opacity,
+            singleton,
+            spawnOnStartup,
+            launchableByUser,
+            grpc,
+            security,
+            isEvergreen,
+            native_windowSpawnTimeout,
         });
     };
     const submitOnEnter = (e) => {
@@ -55,61 +170,435 @@ export const AppEditPage = ({ startingDisplayName = "", isSetupWizard = false, i
             clickSubmit();
         }
     };
+    const positionButtonOptions = [
+        "Default",
+        "Top Left",
+        "Center Top",
+        "Top Right",
+        "Center Left",
+        "Center",
+        "Center Right",
+        "Bottom Left",
+        "Center Bottom",
+        "Bottom Right",
+    ].map((optionLabel, key) => {
+        return {
+            optionLabel,
+            clickHandler: () => {
+                setAbstractPosition(key);
+            },
+        };
+    });
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: "app-edit-field" },
-            React.createElement("label", { htmlFor: "app-name" }, "Name"),
-            React.createElement("input", { type: "text", id: "app-name", value: displayName, placeholder: "Untitled Application", onKeyDown: submitOnEnter, onChange: (e) => {
-                    setDisplayName(e.target.value);
-                } })),
-        isSetupWizard !== true && (React.createElement("div", { className: "app-edit-field" },
-            React.createElement("label", null, "App type"),
-            React.createElement("div", { className: "app-edit-type-field" },
-                React.createElement("div", { className: "app-type-container" },
-                    React.createElement("input", { type: "radio", name: "app-type", id: "app-type-web", value: "web", checked: currentAppType == "web", onKeyDown: submitOnEnter, onChange: (e) => {
-                            setCurrentAppType(e.target.value);
-                        } }),
-                    React.createElement("label", { htmlFor: "app-type-web" }, "Web")),
-                React.createElement("div", { className: "app-type-container" },
-                    React.createElement("input", { type: "radio", name: "app-type", id: "app-type-native", value: "native", checked: currentAppType == "native", onKeyDown: submitOnEnter, onChange: (e) => {
-                            setCurrentAppType(e.target.value);
-                        } }),
-                    React.createElement("label", { htmlFor: "app-type-native" }, "Native"))))),
-        React.createElement("div", { className: "app-edit-field" }, currentAppType === "web" ? (React.createElement(React.Fragment, null,
-            React.createElement("label", { htmlFor: "app-url" }, "Web URL"),
-            React.createElement("input", { type: "text", id: "app-url", placeholder: "https://...", value: windowURL, "aria-invalid": !isWindowURLValid, onKeyDown: submitOnEnter, onChange: (e) => {
-                    setWindowURL(e.target.value);
-                } }))) : (React.createElement(React.Fragment, null,
-            React.createElement("label", null, "File Path"),
-            React.createElement("div", { className: "app-file-input" },
-                React.createElement(FileInput, { acceptTypes: VALID_APP_EXTENSIONS, shouldUpload: false, value: nativePath, onSetValue: (value) => {
-                        setNativePath(value);
-                    } }))))),
-        React.createElement("div", { className: "app-edit-field description" },
-            React.createElement("label", { htmlFor: "app-description" }, "Description"),
-            React.createElement("textarea", { id: "app-description", onChange: (e) => {
-                    setComponentDescription(e.target.value);
-                }, value: componentDescription })),
+            React.createElement("h2", { className: "app-edit-app-name" },
+                iconURL !== "" && iconURL !== undefined && React.createElement("img", { src: iconURL, className: "app-icon" }),
+                displayName)),
+        React.createElement("div", { className: "app-edit-field" },
+            React.createElement("table", { role: "presentation", className: "always-present accordion-edit-block" },
+                React.createElement("tbody", null,
+                    React.createElement("tr", null,
+                        React.createElement("td", { className: "label-col" },
+                            React.createElement("label", null, "Application type")),
+                        React.createElement("td", { className: "content-col" },
+                            React.createElement("div", { className: "app-edit-type-field" }, currentAppType === "web" ? "Web" : "Native"))),
+                    React.createElement("tr", null,
+                        React.createElement("td", null,
+                            React.createElement("label", { htmlFor: "app-name" }, "Name")),
+                        React.createElement("td", null,
+                            React.createElement("input", { type: "text", id: "app-name", value: displayName, placeholder: "Untitled Application", onKeyDown: submitOnEnter, onChange: (e) => {
+                                    setDisplayName(e.target.value);
+                                } }))),
+                    React.createElement("tr", null,
+                        React.createElement("td", null,
+                            React.createElement("label", { htmlFor: "app-icon-url" }, "Icon URL")),
+                        React.createElement("td", null,
+                            React.createElement("input", { type: "text", id: "app-icon-url", value: iconURL, onKeyDown: submitOnEnter, onChange: (e) => {
+                                    setIconURL(e.target.value);
+                                } }))),
+                    currentAppType !== "web" && (React.createElement("tr", null,
+                        React.createElement("td", null,
+                            React.createElement("label", null, "API access")),
+                        React.createElement("td", null,
+                            React.createElement("div", { className: "app-edit-type-field" },
+                                React.createElement("div", { className: "app-type-container" },
+                                    React.createElement("input", { type: "radio", name: "api-access", id: "api-access-yes", value: "native", checked: currentAppType == "native", onKeyDown: submitOnEnter, onChange: (e) => {
+                                            setCurrentAppType(e.target.value);
+                                        } }),
+                                    React.createElement("label", { htmlFor: "api-access-yes" }, "Yes")),
+                                React.createElement("div", { className: "app-type-container" },
+                                    React.createElement("input", { type: "radio", name: "api-access", id: "api-access-no", value: "assimilation", checked: currentAppType == "assimilation", onKeyDown: submitOnEnter, onChange: (e) => {
+                                            setCurrentAppType(e.target.value);
+                                        } }),
+                                    React.createElement("label", { htmlFor: "api-access-no" }, "No")))))),
+                    currentAppType === "web" ? (React.createElement("tr", null,
+                        React.createElement("td", null,
+                            React.createElement("label", { htmlFor: "app-url" }, "App URL")),
+                        React.createElement("td", null,
+                            React.createElement("input", { type: "text", id: "app-url", placeholder: "https://...", value: windowURL, "aria-invalid": !isWindowURLValid, onKeyDown: submitOnEnter, onChange: (e) => {
+                                    setWindowURL(e.target.value);
+                                } })))) : (React.createElement("tr", null,
+                        React.createElement("td", null,
+                            React.createElement("label", null, "File Path")),
+                        React.createElement("td", null,
+                            React.createElement("div", { className: "app-file-input" },
+                                React.createElement(FileInput, { acceptTypes: VALID_APP_EXTENSIONS, shouldUpload: false, value: nativePath, onSetValue: (value) => {
+                                        setNativePath(value);
+                                    } }))))),
+                    currentAppType !== "web" && (React.createElement("tr", null,
+                        React.createElement("td", null,
+                            React.createElement("label", { htmlFor: "app-arguments" }, "Arguments")),
+                        React.createElement("td", null,
+                            React.createElement("input", { type: "text", id: "app-arguments", placeholder: "E.g: mode=a --type b", value: appArguments, onKeyDown: submitOnEnter, onChange: (e) => {
+                                    setAppArguments(e.target.value);
+                                } })),
+                        React.createElement("td", null,
+                            React.createElement(Tooltip, null, "If your app expects arguments on startup, specify them here.")))),
+                    React.createElement("tr", null,
+                        React.createElement("td", null,
+                            React.createElement("label", { htmlFor: "app-description" }, "Description")),
+                        React.createElement("td", { className: "description" },
+                            React.createElement("textarea", { id: "app-description", onChange: (e) => {
+                                    setComponentDescription(e.target.value);
+                                }, value: componentDescription })))))),
         React.createElement("div", { className: "app-edit-field" },
-            React.createElement("label", { htmlFor: "app-size" }, "Default window size"),
-            React.createElement("fieldset", { className: "app-size-fieldset" },
-                React.createElement("div", { className: "app-size-field" },
-                    React.createElement("label", { htmlFor: "app-width" }, "Width"),
-                    React.createElement("input", { className: "app-size-input", type: "text", id: "app-width", value: windowWidth, "aria-invalid": !isWidthValid, onKeyDown: submitOnEnter, onChange: (e) => {
-                            setWindowWidth(parseInt(e.target.value, 10) || "");
-                        } }),
-                    React.createElement("span", { className: "unit" }, "px")),
-                React.createElement("div", { className: "app-size-field" },
-                    React.createElement("label", { htmlFor: "app-height" }, "Height"),
-                    React.createElement("input", { className: "app-size-input", type: "text", id: "app-height", value: windowHeight, "aria-invalid": !isHeightValid, onKeyDown: submitOnEnter, onChange: (e) => {
-                            setWindowHeight(parseInt(e.target.value, 10) || "");
-                        } }),
-                    React.createElement("span", { className: "unit" }, "px")))),
-        React.createElement(AppEditAccess, { appName: displayName, rules: startingRules, onChange: (newRules) => setRules(newRules), isInboundInteropAuthorized: isInboundInteropAuthorized, isOutboundInteropAuthorized: isOutboundInteropAuthorized, addApp: addApp }),
+            React.createElement(Accordion, { id: "config", size: "medium", label: "Optional config settings" },
+                React.createElement(Accordion, { id: "select-connect", label: "SelectConnect", summary: React.createElement(React.Fragment, null,
+                        "Specify trust relationships.",
+                        " ",
+                        React.createElement("a", { href: "", onClick: (e) => {
+                                e.preventDefault();
+                                openLink("https://documentation.finsemble.com/tutorial-ControllingInformationFlow.html");
+                            } }, "Learn more")) },
+                    React.createElement("div", { className: "app-edit-field" },
+                        React.createElement("table", { role: "presentation", className: "accordion-edit-block" },
+                            React.createElement("tbody", null,
+                                React.createElement("tr", null,
+                                    React.createElement("td", { rowSpan: 2, className: "label-col" }, "Interop trust rule"),
+                                    React.createElement("td", { className: "content-col" },
+                                        React.createElement("label", null,
+                                            React.createElement("input", { type: "radio", name: "interop-trust", value: "true", checked: selectConnectTrustAll, onClick: () => {
+                                                    setSelectConnectTrustAll(true);
+                                                } }),
+                                            "Trust all apps"),
+                                        React.createElement("label", null,
+                                            React.createElement("input", { type: "radio", name: "interop-trust", value: "false", checked: !selectConnectTrustAll, onClick: () => {
+                                                    setSelectConnectTrustAll(false);
+                                                } }),
+                                            "Trust selected apps"))),
+                                !selectConnectTrustAll && (React.createElement("tr", null,
+                                    React.createElement("td", null,
+                                        React.createElement(AppEditAccess, { appName: displayName, rules: (_a = appData.rules) !== null && _a !== void 0 ? _a : [], onChange: (newRules) => setRules(newRules), isInboundInteropAuthorized: isInboundInteropAuthorized, isOutboundInteropAuthorized: isOutboundInteropAuthorized, addApp: addApp })))))))),
+                React.createElement(Accordion, { id: "window", label: "Window position and dimensions", summary: "Define the window properties when the app launches." },
+                    React.createElement("div", { className: "app-edit-field" },
+                        React.createElement("table", { role: "presentation", className: "accordion-edit-block" },
+                            React.createElement("tr", null,
+                                React.createElement("td", { className: "label-col" }, "Dimensions"),
+                                React.createElement("td", { className: "content-col" },
+                                    React.createElement("div", { className: "app-size-field" },
+                                        React.createElement("label", { htmlFor: "app-width" }, "Width"),
+                                        React.createElement("input", { className: "app-size-input", type: "text", id: "app-width", value: windowWidth, "aria-invalid": !isWidthValid, onChange: (e) => {
+                                                setWindowWidth(parseInt(e.target.value, 10) || "");
+                                            } }),
+                                        React.createElement("span", { className: "unit" }, "px")),
+                                    React.createElement("div", { className: "app-size-field" },
+                                        React.createElement("label", { htmlFor: "app-height" }, "Height"),
+                                        React.createElement("input", { className: "app-size-input", type: "text", id: "app-height", value: windowHeight, "aria-invalid": !isHeightValid, onChange: (e) => {
+                                                setWindowHeight(parseInt(e.target.value, 10) || "");
+                                            } }),
+                                        React.createElement("span", { className: "unit" }, "px")))),
+                            React.createElement("tr", null,
+                                React.createElement("td", null),
+                                React.createElement("td", { className: "pull-left" },
+                                    React.createElement(Checkbox, { label: "Lock dimensions", checked: !resizable, onClick: () => {
+                                            setResizable(!resizable);
+                                        } }))),
+                            abstractPosition >= 0 && (React.createElement("tr", null,
+                                React.createElement("td", null, "Position"),
+                                React.createElement("td", { className: "position-entry" },
+                                    React.createElement(DefaultDropdownButton, { allowEmpty: false, caretLocation: "right", defaultSelection: positionButtonOptions[abstractPosition], buttonOptions: positionButtonOptions })))),
+                            React.createElement("tr", null,
+                                React.createElement("td", null, "Opacity"),
+                                React.createElement("td", null,
+                                    React.createElement("input", { type: "range", className: "app-edit-range", value: opacity, min: 0, step: 0.01, max: 1, onChange: (e) => {
+                                            setOpacity(Number(e.target.value));
+                                        } }),
+                                    React.createElement("input", { type: "text", value: Math.floor(opacity * 100), onChange: (e) => {
+                                            const num = +e.target.value;
+                                            if (isNaN(num)) {
+                                                return;
+                                            }
+                                            if (num < 0 || num > 100) {
+                                                return;
+                                            }
+                                            setOpacity(num / 100);
+                                        }, style: { maxWidth: "30px" } })))))),
+                React.createElement(Accordion, { id: "window-behavior", label: "Window behavior", summary: "Specify how this window will behave with respect to other windows in the workspace." },
+                    React.createElement("div", { className: "app-edit-field" },
+                        React.createElement("table", { role: "presentation", className: "accordion-edit-block" },
+                            React.createElement("tbody", null,
+                                React.createElement("tr", null,
+                                    React.createElement("td", { className: "label-col", rowSpan: 5 }, "Enable"),
+                                    React.createElement("td", { className: "content-col" },
+                                        React.createElement(Checkbox, { label: "Auto arrange", checked: allowAutoArrange, onClick: () => {
+                                                setAllowAutoArrange(!allowAutoArrange);
+                                            } }))),
+                                React.createElement("tr", null,
+                                    React.createElement("td", null,
+                                        React.createElement(Checkbox, { label: "Grouping", checked: allowGrouping, onClick: () => {
+                                                setAllowGrouping(!allowGrouping);
+                                            } }))),
+                                React.createElement("tr", null,
+                                    React.createElement("td", null,
+                                        React.createElement(Checkbox, { label: "Snapping", checked: allowSnapping, onClick: () => {
+                                                setAllowSnapping(!allowSnapping);
+                                            } }))),
+                                React.createElement("tr", null,
+                                    React.createElement("td", null,
+                                        React.createElement(Checkbox, { label: "Tabs", checked: allowTabbing, onClick: () => {
+                                                setAllowTabbing(!allowTabbing);
+                                            } }))),
+                                React.createElement("tr", null,
+                                    React.createElement("td", null,
+                                        React.createElement(Checkbox, { label: "Tiling", checked: allowTiling, onClick: () => {
+                                                setAllowTiling(!allowTiling);
+                                            } }))),
+                                React.createElement("tr", null,
+                                    React.createElement("td", { style: { width: "120px" } }, "Title bar"),
+                                    React.createElement("td", null,
+                                        React.createElement(Checkbox, { label: "Show title bar", checked: enableTitleBar, onClick: () => {
+                                                setEnableTitleBar(!enableTitleBar);
+                                            } }))),
+                                React.createElement("tr", null,
+                                    React.createElement("td", null,
+                                        React.createElement(FinsembleIcon, { icon: "alwaysOnTop" }),
+                                        " Always on top"),
+                                    React.createElement("td", null,
+                                        React.createElement("label", null,
+                                            React.createElement("input", { type: "radio", name: "alwaysOnTop", checked: aot && !enableAOT, onChange: () => {
+                                                    setAot(true);
+                                                    setEnableAOT(false);
+                                                } }),
+                                            "Enable"),
+                                        React.createElement("label", null,
+                                            React.createElement("input", { type: "radio", name: "alwaysOnTop", checked: !aot && enableAOT, onChange: () => {
+                                                    setAot(false);
+                                                    setEnableAOT(true);
+                                                } }),
+                                            "Show in titlebar"),
+                                        React.createElement("label", { style: { paddingLeft: "13.53px" } },
+                                            React.createElement("input", { type: "radio", name: "alwaysOnTop", checked: !aot && !enableAOT, onChange: () => {
+                                                    setAot(false);
+                                                    setEnableAOT(false);
+                                                } }),
+                                            "Disable"))),
+                                React.createElement("tr", null,
+                                    React.createElement("td", null,
+                                        React.createElement(FinsembleIcon, { icon: "minimize" }),
+                                        " Minimize"),
+                                    React.createElement("td", null,
+                                        React.createElement("label", null,
+                                            React.createElement("input", { type: "radio", checked: allowMinimize && !hideMinimize, onChange: () => {
+                                                    setAllowMinimize(true);
+                                                    setHideMinimize(false);
+                                                } }),
+                                            "Enable"),
+                                        React.createElement("label", null,
+                                            React.createElement("input", { type: "radio", checked: allowMinimize && hideMinimize, onChange: () => {
+                                                    setAllowMinimize(true);
+                                                    setHideMinimize(true);
+                                                } }),
+                                            "Hide from titlebar"),
+                                        React.createElement("label", null,
+                                            React.createElement("input", { type: "radio", checked: !allowMinimize, onChange: () => {
+                                                    setAllowMinimize(false);
+                                                    setHideMinimize(true);
+                                                } }),
+                                            "Disable"))),
+                                React.createElement("tr", null,
+                                    React.createElement("td", null,
+                                        React.createElement(FinsembleIcon, { icon: "maximize" }),
+                                        " Maximize"),
+                                    React.createElement("td", null,
+                                        React.createElement("label", null,
+                                            React.createElement("input", { type: "radio", checked: allowMaximize && !hideMaximize, onChange: () => {
+                                                    setAllowMaximize(true);
+                                                    setHideMaximize(false);
+                                                } }),
+                                            "Enable"),
+                                        React.createElement("label", null,
+                                            React.createElement("input", { type: "radio", checked: allowMaximize && hideMaximize, onChange: () => {
+                                                    setAllowMaximize(true);
+                                                    setHideMaximize(true);
+                                                } }),
+                                            "Hide from titlebar"),
+                                        React.createElement("label", null,
+                                            React.createElement("input", { type: "radio", checked: !allowMaximize, onChange: () => {
+                                                    setAllowMaximize(false);
+                                                    setHideMaximize(true);
+                                                } }),
+                                            "Disable"))),
+                                React.createElement("tr", null,
+                                    React.createElement("td", null,
+                                        React.createElement(FinsembleIcon, { icon: "close" }),
+                                        " Close"),
+                                    React.createElement("td", null,
+                                        React.createElement("label", null,
+                                            React.createElement("input", { type: "radio", checked: !hideClose, onChange: () => {
+                                                    setHideClose(false);
+                                                } }),
+                                            "Enable"),
+                                        React.createElement("label", null,
+                                            React.createElement("input", { type: "radio", checked: hideClose, onChange: () => {
+                                                    setHideClose(true);
+                                                } }),
+                                            "Hide from titlebar"))))))),
+                React.createElement(Accordion, { id: "interop", label: "Interop", summary: "Define how to link an app to communication channels." },
+                    React.createElement("div", { className: "app-edit-field" },
+                        React.createElement("table", { role: "presentation", className: "accordion-edit-block" },
+                            React.createElement("tbody", null,
+                                React.createElement("tr", null,
+                                    React.createElement("td", { className: "label-col" },
+                                        React.createElement("label", { htmlFor: "interop-connection" },
+                                            React.createElement(FinsembleIcon, { icon: "linker" }),
+                                            " Display linker")),
+                                    React.createElement("td", { className: "content-col" },
+                                        React.createElement("fieldset", { className: "interop-connection-fieldset" },
+                                            React.createElement("div", { className: "app-size-field" },
+                                                React.createElement("input", { className: "app-size-input", type: "radio", id: "interop-connection-auto", value: "auto", checked: autoConnect, onChange: () => {
+                                                        setAutoConnect(true);
+                                                    } }),
+                                                React.createElement("label", { htmlFor: "interop-connection-auto" }, "Always")),
+                                            React.createElement("div", { className: "app-size-field" },
+                                                React.createElement("input", { className: "app-size-input", type: "radio", id: "interop-connection-fdc3", value: "fdc3", checked: !autoConnect, onChange: () => {
+                                                        setAutoConnect(false);
+                                                    } }),
+                                                React.createElement("label", { htmlFor: "interop-connection-fdc3" }, "On FDC3 API use")))),
+                                    React.createElement("td", null,
+                                        React.createElement(Tooltip, { type: "info" }, "Show the linker menu if you want the user to manually add your app to a channel.")))))),
+                    React.createElement(InputTable, { tableHeaders: [
+                            React.createElement(React.Fragment, null,
+                                "Name",
+                                React.createElement(Tooltip, null, "The name of the intent to listen for.")),
+                            React.createElement(React.Fragment, null,
+                                "Display name",
+                                React.createElement(Tooltip, null, "The name that appears in the resolver.")),
+                            React.createElement(React.Fragment, null,
+                                "Contexts",
+                                React.createElement(Tooltip, null, "The FDC3 context to listen for.")),
+                        ], startingData: (_b = appData.intents) === null || _b === void 0 ? void 0 : _b.map((intent) => {
+                            var _a;
+                            return [
+                                intent.name,
+                                intent.displayName,
+                                (_a = intent.contexts) === null || _a === void 0 ? void 0 : _a.join(", "),
+                            ];
+                        }), onUpdate: (data) => {
+                            const newIntents = data
+                                .filter((row) => row.join("").length > 0)
+                                .map((row) => {
+                                return {
+                                    name: row[0].trim(),
+                                    displayName: row[1].trim(),
+                                    contexts: row[2].split(",").map((str) => str.trim()),
+                                };
+                            });
+                            setIntents(newIntents);
+                        } })),
+                React.createElement(Accordion, { id: "component", label: "Component behavior", summary: "Specify additional properties for the component." },
+                    React.createElement("div", { className: "app-edit-field" },
+                        React.createElement("table", { role: "presentation", className: "accordion-edit-block" },
+                            React.createElement("tbody", null,
+                                React.createElement("tr", null,
+                                    React.createElement("td", { className: "label-col" }, "Set security"),
+                                    React.createElement("td", { className: "content-col" },
+                                        React.createElement("label", null,
+                                            React.createElement("input", { type: "radio", value: "trusted", checked: security === "trusted", onClick: () => {
+                                                    setSecurity("trusted");
+                                                } }),
+                                            "Trusted"),
+                                        React.createElement("label", null,
+                                            React.createElement("input", { type: "radio", value: "untrusted", checked: security === "untrusted", onClick: () => {
+                                                    setSecurity("untrusted");
+                                                } }),
+                                            "Untrusted"))),
+                                currentAppType === "native" && (React.createElement("tr", null,
+                                    React.createElement("td", null, "Launch timeout"),
+                                    React.createElement("td", null,
+                                        React.createElement("input", { type: "text", value: native_windowSpawnTimeout, onChange: (e) => {
+                                                const num = +e.target.value;
+                                                if (isNaN(num) || num <= 0) {
+                                                    return;
+                                                }
+                                                setNative_windowSpawnTimeout(num);
+                                            } })))),
+                                React.createElement("tr", null,
+                                    React.createElement("td", { rowSpan: 5 }, "Options"),
+                                    React.createElement("td", null,
+                                        React.createElement(Checkbox, { label: "Only one instance", checked: singleton, onClick: () => {
+                                                setSingleton(!singleton);
+                                            } })),
+                                    React.createElement("td", null,
+                                        React.createElement(Tooltip, { type: "info" }, "Don\u2019t allow more than one instance of this component."))),
+                                React.createElement("tr", null,
+                                    React.createElement("td", null,
+                                        React.createElement(Checkbox, { label: "Launch at startup", checked: spawnOnStartup, onClick: () => {
+                                                setSpawnOnStartup(!spawnOnStartup);
+                                            } })),
+                                    React.createElement("td", null,
+                                        React.createElement(Tooltip, { type: "info" }, "The component will automatically get launched when the Finsemble smart desktop starts."))),
+                                React.createElement("tr", null,
+                                    React.createElement("td", null,
+                                        React.createElement(Checkbox, { label: "Include in Apps menu", checked: launchableByUser, onClick: () => {
+                                                setLaunchableByUser(!launchableByUser);
+                                            } })),
+                                    React.createElement("td", null,
+                                        React.createElement(Tooltip, { type: "info" }, "Add the component to the Apps menu on the Finsemble toolbar."))),
+                                currentAppType === "web" && (React.createElement("tr", null,
+                                    React.createElement("td", null,
+                                        React.createElement(Checkbox, { label: "Enable gRPC", checked: grpc, onClick: () => {
+                                                setGrpc(!grpc);
+                                            } })),
+                                    React.createElement("td", null,
+                                        React.createElement(Tooltip, { type: "info" }, "Enable remote procedure calls.")))),
+                                React.createElement("tr", null,
+                                    React.createElement("td", null,
+                                        React.createElement(Checkbox, { label: "Persist across workspaces", checked: isEvergreen, onClick: () => {
+                                                setIsEvergreen(!isEvergreen);
+                                            } })),
+                                    React.createElement("td", null,
+                                        React.createElement(Tooltip, { type: "info" }, "Don\u2019t shut down this app when you leave the workspace. Useful for apps that take a long time to load."))))))),
+                React.createElement(Accordion, { id: "workspace", label: "Workspace", summary: "Define how the app relates to the workspace." },
+                    React.createElement("div", { className: "app-edit-field" },
+                        React.createElement("table", { role: "presentation", className: "accordion-edit-block" },
+                            React.createElement("tbody", null,
+                                React.createElement("tr", null,
+                                    React.createElement("td", { className: "label-col", rowSpan: 2 }, "Options"),
+                                    React.createElement("td", { className: "content-col" },
+                                        React.createElement(Checkbox, { label: "Add to workspace", checked: addToWorkspace, onClick: () => {
+                                                setAddToWorkspace(!addToWorkspace);
+                                            } })),
+                                    React.createElement("td", null,
+                                        React.createElement(Tooltip, { type: "info" }, "Apps are not added to the workspace unless they were opened from the Launcher menu or the resolver. Specify whether you want this app added to the workspace if it\u2019s launched in any other way, such as by a user or another app."))),
+                                currentAppType === "web" ? (React.createElement("tr", null,
+                                    React.createElement("td", null,
+                                        React.createElement(Checkbox, { label: "Persist the location", checked: persistURL, onClick: () => {
+                                                setPersistURL(!persistURL);
+                                            } })),
+                                    React.createElement("td", null,
+                                        React.createElement(Tooltip, { type: "info" }, "Normally, the app will be launched from its default URL. If a user navigated elsewhere, you can specify that you want to preserve that new URL instead.")))) : (React.createElement("tr", null,
+                                    React.createElement("td", null,
+                                        React.createElement(Checkbox, { label: "Persist the location", checked: persistPath, onClick: () => {
+                                                setPersistPath(!persistPath);
+                                            } })),
+                                    React.createElement("td", null,
+                                        React.createElement(Tooltip, { type: "info" }, "Normally, the app will be launched from its default path. If a user changed that path, you can specify that you want to launch the app from that new location.")))))))))),
         React.createElement("div", { className: "app-edit-actions" },
-            React.createElement("div", null, isEditMode && (React.createElement(Button, { fashion: "danger", text: "Remove app", onClick: (e) => {
-                    removeApplicationFn();
-                    e.preventDefault();
-                } }))),
+            React.createElement("div", null,
+                React.createElement(Button, { fashion: "danger", text: "Remove app", onClick: (e) => {
+                        removeApplicationFn();
+                        e.preventDefault();
+                    } })),
             React.createElement("div", { className: "app-actions-right-wrapper" },
                 React.createElement(Button, { fashion: "ghost", text: "Cancel", onClick: cancelFn }),
                 React.createElement(Button, { fashion: "secondary", text: "Save", disabled: disableSubmit, onClick: clickSubmit })))));