@finsemble/finsemble-ui 7.0.1 → 7.1.0

package/react/components/sdd/AppEditPage.js

@@ -6,20 +6,24 @@ 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 { 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";
-import { FinsembleSelect } from "../common/FinsembleSelect";
-import { FinsembleLink } from "../common/FinsembleLink";
+import { AppEditPage_DebugToolkit } from "./appEditPage/DebugToolkit";
+import { AppEditPage_SelectConnect } from "./appEditPage/SelectConnect";
+import { AppEditPage_Preloads } from "./appEditPage/Preloads";
+import { AppEditPage_Position } from "./appEditPage/Position";
+import { AppEditPage_Behavior } from "./appEditPage/Behavior";
+import { AppEditPage_Interop } from "./appEditPage/Interop";
+import { AppEditPage_Component } from "./appEditPage/Component";
+import { AppEditPage_Workspace } from "./appEditPage/Workspace";
 const DEFAULT_WINDOW_WIDTH = 1280;
 const DEFAULT_WINDOW_HEIGHT = 600;
 const MINIMUM_WINDOW_WIDTH = 0;
 const MINIMUM_WINDOW_HEIGHT = 0;
+const SELECTABLE_BOOT_PHASE_STAGES = ["preuser", "preuser2", "preuser3", "preuser4", "earlyuser", "user"];
 export const defaultAppData = {
     name: "",
     abstractPosition: 0,
@@ -63,6 +67,10 @@ export const defaultAppData = {
     titlebarType: "injected",
     url: "",
     width: DEFAULT_WINDOW_WIDTH,
+    bootPhase: "preuser",
+    waitForInitialization: true,
+    serviceVisible: false,
+    devConsole: false,
 };
 const convertIntentData = (intentArray) => intentArray.slice(0, -1).map(([name, displayName, contexts]) => {
     return { name, displayName, contexts: contexts.split(",") };
@@ -73,8 +81,8 @@ const appTypeDisplayNameMap = {
     assimilation: "Native",
     citrix: "Virtual",
 };
-export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web", startingWindowURL = "", startingNativePath = "", appData = defaultAppData, validateURL, removeApplicationFn = () => { }, cancelFn = () => { }, submitFn, addApp, isInboundInteropAuthorized, isOutboundInteropAuthorized, preloadAliasList = [], }) => {
-    var _a, _b;
+export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web", startingWindowURL = "", startingNativePath = "", appData = defaultAppData, validateURL, removeApplicationFn = () => { }, cancelFn = () => { }, submitFn, addApp, isInboundInteropAuthorized, isOutboundInteropAuthorized, preloadAliasList = [], appService = false, }) => {
+    var _a;
     const [displayName, setDisplayName] = useState(startingDisplayName);
     const [currentAppType, setCurrentAppType] = useState(startingAppType);
     const [windowURL, setWindowURL] = useState(startingWindowURL);
@@ -117,25 +125,36 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
     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 [intentData, setIntentData] = useState((_a = appData.intents) === null || _a === void 0 ? void 0 : _a.map((intent) => { var _a, _b; return [intent.name, intent.displayName, (_b = (_a = intent.contexts) === null || _a === void 0 ? void 0 : _a.join(", ")) !== null && _b !== void 0 ? _b : ""]; }));
+    const [bootPhase, setBootPhase] = useState(appData.bootPhase);
+    const [waitForInitialization, setWaitForInitialization] = useState(appData.waitForInitialization);
+    const [serviceVisible, setServiceVisible] = useState(appData.serviceVisible);
+    const [devConsole, setDevConsole] = useState(appData.devConsole);
     const isWindowURLValid = validateURL(windowURL);
     const isHeightValid = !(typeof windowHeight !== "number" || windowHeight < MINIMUM_WINDOW_HEIGHT);
     const isWidthValid = !(typeof windowWidth !== "number" || windowWidth < MINIMUM_WINDOW_WIDTH);
     const isValidInput = () => {
+        // Confirm that the app's dimensions and displayName are valid
         if (!isWidthValid || !isHeightValid || displayName === undefined || displayName === "") {
             return false;
         }
+        // App-specific validation checks
         if (currentAppType === "web") {
+            // For web apps, confirm that the URL is valid
             return isWindowURLValid && windowURL.length > 0;
         }
         else if (currentAppType === "Citrix") {
+            // For Citrix, there are no specific confirmations
             return true;
         }
         else {
+            // For native/assimilated, make sure the path is fine
             return !(!nativePath || (nativePath.length === 0 && validateFilename(VALID_APP_EXTENSIONS, nativePath)));
         }
     };
     const disableSubmit = !isValidInput();
     const clickSubmit = () => {
+        // Shouldn't be possible to get in a state where windowWith/windowHeight aren't numbers,
+        // but let's check anyway
         if (!(typeof windowWidth === "number" && typeof windowHeight === "number")) {
             return;
         }
@@ -180,8 +199,13 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
             native_windowSpawnTimeout,
             preloads,
             titlebarType,
+            bootPhase,
+            waitForInitialization,
+            serviceVisible,
+            devConsole,
         });
     };
+    // When we try to use the form/type=submit interaction, it acts like we pressed the back button, rather than the submit button
     const submitOnEnter = (e) => {
         if (e.key !== "Enter") {
             return;
@@ -191,22 +215,11 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
             clickSubmit();
         }
     };
-    const positionButtonOptions = [
-        "Default",
-        "Top Left",
-        "Center Top",
-        "Top Right",
-        "Center Left",
-        "Center",
-        "Center Right",
-        "Bottom Left",
-        "Center Bottom",
-        "Bottom Right",
-    ].map((optionLabel, key) => {
+    const bootPhaseOptions = SELECTABLE_BOOT_PHASE_STAGES.map((optionLabel) => {
         return {
             optionLabel,
             clickHandler: () => {
-                setAbstractPosition(key);
+                setBootPhase(optionLabel);
             },
         };
     });
@@ -237,13 +250,13 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
                             React.createElement("input", { type: "text", id: "app-alias", value: alias, placeholder: "Virtual application name", onKeyDown: submitOnEnter, onChange: (e) => {
                                     setAlias(e.target.value);
                                 } })))),
-                    React.createElement("tr", null,
+                    !appService && (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" && currentAppType !== "Citrix" && (React.createElement("tr", null,
                         React.createElement("td", null,
                             React.createElement("label", { id: "api-access-label" }, "API access")),
@@ -273,7 +286,7 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
                             React.createElement("div", { className: "app-file-input" },
                                 React.createElement(FileInput, { acceptTypes: VALID_APP_EXTENSIONS, shouldUpload: false, value: nativePath, onSetValue: (value) => {
                                         setNativePath(value);
-                                    } }))))),
+                                    }, textEditable: true }))))),
                     currentAppType !== "web" && (React.createElement("tr", null,
                         React.createElement("td", null,
                             React.createElement("label", { htmlFor: "app-arguments" }, "Arguments")),
@@ -283,351 +296,125 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
                                 } })),
                         React.createElement("td", null,
                             React.createElement(Tooltip, null, "If your app expects arguments on startup, specify them here.")))),
-                    React.createElement("tr", null,
+                    !appService && (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 })))))),
+                                }, value: componentDescription })))),
+                    appService && (React.createElement("tr", null,
+                        React.createElement("td", null,
+                            React.createElement("label", { htmlFor: "bootPhase" }, "Boot phase")),
+                        React.createElement("td", null,
+                            React.createElement(DefaultDropdownButton, { allowEmpty: false, caretLocation: "right", defaultSelection: bootPhaseOptions.find((opt) => opt.optionLabel === bootPhase), buttonOptions: bootPhaseOptions })))),
+                    appService && (React.createElement("tr", null,
+                        React.createElement("td", null,
+                            React.createElement("label", { htmlFor: "initialization" }, "Wait for initialization")),
+                        React.createElement("td", null,
+                            React.createElement(Checkbox, { checked: waitForInitialization, label: "Wait for initialization", showLabel: false, onClick: () => {
+                                    setWaitForInitialization(!waitForInitialization);
+                                } }))))))),
+        appService && (React.createElement(AppEditPage_DebugToolkit, Object.assign({}, {
+            serviceVisible,
+            setServiceVisible,
+            devConsole,
+            setDevConsole,
+        }))),
         React.createElement("div", { className: "app-edit-field" },
             React.createElement(Accordion, { id: "config", size: "medium", label: "Optional config settings" },
-                currentAppType !== "assimilation" && (React.createElement(Accordion, { id: "select-connect", label: "SelectConnect", summary: React.createElement(React.Fragment, null,
-                        "Specify trust relationships.",
-                        " ",
-                        React.createElement(FinsembleLink, { url: "https://documentation.finsemble.com/tutorial-ControllingInformationFlow.html", text: "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", id: "interop-label" }, "Interop trust rule"),
-                                    React.createElement("td", { className: "content-col" },
-                                        React.createElement("label", null,
-                                            React.createElement("input", { type: "radio", name: "interop-trust", "aria-labelledby": "interop-label interop-label-all", value: "true", "aria-posinset": 1, "aria-setsize": 2, checked: selectConnectTrustAll, onChange: () => {
-                                                    setSelectConnectTrustAll(true);
-                                                } }),
-                                            React.createElement("span", { id: "interop-label-all" }, "Trust all apps")),
-                                        React.createElement("label", null,
-                                            React.createElement("input", { type: "radio", name: "interop-trust", "aria-labelledby": "interop-label interop-label-selected", value: "false", "aria-posinset": 2, "aria-setsize": 2, checked: !selectConnectTrustAll, onChange: () => {
-                                                    setSelectConnectTrustAll(false);
-                                                } }),
-                                            React.createElement("span", { id: "interop-label-selected" }, "Trust selected apps")))),
-                                !selectConnectTrustAll && (React.createElement("tr", null,
-                                    React.createElement("td", null,
-                                        React.createElement(AppEditAccess, { appName: displayName, rules: (_b = appData.rules) !== null && _b !== void 0 ? _b : [], onChange: (newRules) => setRules(newRules), isInboundInteropAuthorized: isInboundInteropAuthorized, isOutboundInteropAuthorized: isOutboundInteropAuthorized, addApp: addApp }))))))))),
-                currentAppType === "web" && (React.createElement(Accordion, { id: "preloads", label: "Preloads", summary: React.createElement(React.Fragment, null,
-                        "Add functionality by running a script that is loaded into an app window before the actual content of the window is loaded.",
-                        " ",
-                        React.createElement(FinsembleLink, { url: "https://documentation.finsemble.com/tutorial-Preloads.html", text: "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", null,
-                                        React.createElement(FinsembleSelect, { options: preloadAliasList, selected: appData.preloads, updateCallback: (selectedValues) => {
-                                                setPreloads(selectedValues);
-                                            } })))))))),
-                currentAppType !== "Citrix" && (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("tbody", null,
-                                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", { id: "opacity-label" }, "Opacity"),
-                                    React.createElement("td", null,
-                                        React.createElement("input", { type: "range", className: "app-edit-range", "aria-labelledby": "opacity-label", value: opacity, min: 0, step: 0.01, max: 1, onChange: (e) => {
-                                                setOpacity(Number(e.target.value));
-                                            } }),
-                                        React.createElement("input", { id: "app-opacity", type: "text", "aria-labelledby": "opacity-label", 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" } })))))))),
-                currentAppType === "web" && (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: "Enable title bar", checked: enableTitleBar, onClick: () => {
-                                                setEnableTitleBar(!enableTitleBar);
-                                            } }))),
-                                enableTitleBar && (React.createElement("tr", null,
-                                    React.createElement("td", null),
-                                    React.createElement("td", null,
-                                        React.createElement(Checkbox, { label: "Inject title bar into app container", checked: titlebarType === "injected", onClick: () => {
-                                                setTitlebarType(titlebarType === "injected" ? "browserview" : "injected");
-                                            } })),
-                                    React.createElement("td", null,
-                                        React.createElement(Tooltip, null, "Injected title bars share the same process as the associated app. This can make the titlebar more performant for lightweight apps, but may slow down heavier apps.")))),
-                                React.createElement("tr", null,
-                                    React.createElement("td", { id: "aot-label" },
-                                        React.createElement(FinsembleIcon, { icon: "alwaysOnTop" }),
-                                        " Always on top"),
-                                    React.createElement("td", null,
-                                        React.createElement("label", null,
-                                            React.createElement("input", { type: "radio", name: "alwaysOnTop", "aria-labelledby": "aot-label aot-label-enable", checked: aot && !enableAOT, "aria-posinset": 1, "aria-setsize": 3, onChange: () => {
-                                                    setAot(true);
-                                                    setEnableAOT(false);
-                                                } }),
-                                            React.createElement("span", { id: "aot-label-enable" }, "Enable")),
-                                        React.createElement("label", null,
-                                            React.createElement("input", { type: "radio", name: "alwaysOnTop", "aria-labelledby": "aot-label aot-label-show", checked: !aot && enableAOT, "aria-posinset": 2, "aria-setsize": 3, onChange: () => {
-                                                    setAot(false);
-                                                    setEnableAOT(true);
-                                                } }),
-                                            React.createElement("span", { id: "aot-label-show" }, "Show in titlebar")),
-                                        React.createElement("label", { style: { paddingLeft: "13.53px" } },
-                                            React.createElement("input", { type: "radio", name: "alwaysOnTop", "aria-labelledby": "aot-label aot-label-disable", checked: !aot && !enableAOT, "aria-posinset": 3, "aria-setsize": 3, onChange: () => {
-                                                    setAot(false);
-                                                    setEnableAOT(false);
-                                                } }),
-                                            React.createElement("span", { id: "aot-label-disable" }, "Disable")))),
-                                React.createElement("tr", null,
-                                    React.createElement("td", { id: "minimize-label" },
-                                        React.createElement(FinsembleIcon, { icon: "minimize" }),
-                                        " Minimize"),
-                                    React.createElement("td", null,
-                                        React.createElement("label", null,
-                                            React.createElement("input", { type: "radio", name: "minimize", "aria-labelledby": "minimize-label minimize-label-0", checked: allowMinimize && !hideMinimize, "aria-posinset": 1, "aria-setsize": 3, onChange: () => {
-                                                    setAllowMinimize(true);
-                                                    setHideMinimize(false);
-                                                } }),
-                                            React.createElement("span", { id: "minimize-label-0" }, "Enable")),
-                                        React.createElement("label", null,
-                                            React.createElement("input", { type: "radio", name: "minimize", "aria-labelledby": "minimize-label minimize-label-1", checked: allowMinimize && hideMinimize, "aria-posinset": 2, "aria-setsize": 3, onChange: () => {
-                                                    setAllowMinimize(true);
-                                                    setHideMinimize(true);
-                                                } }),
-                                            React.createElement("span", { id: "minimize-label-1" }, "Hide from titlebar")),
-                                        React.createElement("label", null,
-                                            React.createElement("input", { type: "radio", name: "minimize", "aria-labelledby": "minimize-label minimize-label-2", checked: !allowMinimize, "aria-posinset": 3, "aria-setsize": 3, onChange: () => {
-                                                    setAllowMinimize(false);
-                                                    setHideMinimize(true);
-                                                } }),
-                                            React.createElement("span", { id: "minimize-label-2" }, "Disable")))),
-                                React.createElement("tr", null,
-                                    React.createElement("td", { id: "maximize-label" },
-                                        React.createElement(FinsembleIcon, { icon: "maximize" }),
-                                        " Maximize"),
-                                    React.createElement("td", null,
-                                        React.createElement("label", null,
-                                            React.createElement("input", { type: "radio", name: "maximize", "aria-labelledby": "maximize-label maximize-label-3", checked: allowMaximize && !hideMaximize, "aria-posinset": 1, "aria-setsize": 3, onChange: () => {
-                                                    setAllowMaximize(true);
-                                                    setHideMaximize(false);
-                                                } }),
-                                            React.createElement("span", { id: "maximize-label-3" }, "Enable")),
-                                        React.createElement("label", null,
-                                            React.createElement("input", { type: "radio", name: "maximize", "aria-labelledby": "maximize-label maximize-label-4", checked: allowMaximize && hideMaximize, "aria-posinset": 2, "aria-setsize": 3, onChange: () => {
-                                                    setAllowMaximize(true);
-                                                    setHideMaximize(true);
-                                                } }),
-                                            React.createElement("span", { id: "maximize-label-4" }, "Hide from titlebar")),
-                                        React.createElement("label", null,
-                                            React.createElement("input", { type: "radio", name: "maximize", "aria-labelledby": "maximize-label maximize-label-5", checked: !allowMaximize, "aria-posinset": 3, "aria-setsize": 3, onChange: () => {
-                                                    setAllowMaximize(false);
-                                                    setHideMaximize(true);
-                                                } }),
-                                            React.createElement("span", { id: "maximize-label-5" }, "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", name: "close", "aria-labelledby": "close-label close-label-enable", checked: !hideClose, "aria-posinset": 1, "aria-setsize": 2, onChange: () => {
-                                                    setHideClose(false);
-                                                } }),
-                                            React.createElement("span", { id: "close-label-enable" }, "Enable")),
-                                        React.createElement("label", null,
-                                            React.createElement("input", { type: "radio", name: "close", "aria-labelledby": "close-label close-label-hide", checked: hideClose, "aria-posinset": 2, "aria-setsize": 2, onChange: () => {
-                                                    setHideClose(true);
-                                                } }),
-                                            React.createElement("span", { id: "close-label-hide" }, "Hide from titlebar"))))))))),
-                currentAppType !== "assimilation" && (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", { id: "linker-label" },
-                                            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", name: "linker", "aria-labelledby": "linker-label linker-label-always", id: "interop-connection-auto", value: "auto", "aria-posinset": 1, "aria-setsize": 2, checked: autoConnect, onChange: () => {
-                                                        setAutoConnect(true);
-                                                    } }),
-                                                React.createElement("label", { id: "linker-label-always" }, "Always")),
-                                            React.createElement("div", { className: "app-size-field" },
-                                                React.createElement("input", { className: "app-size-input", type: "radio", name: "linker", "aria-labelledby": "linker-label linker-label-fdc3", id: "interop-connection-fdc3", value: "fdc3", "aria-posinset": 2, "aria-setsize": 2, checked: !autoConnect, onChange: () => {
-                                                        setAutoConnect(false);
-                                                    } }),
-                                                React.createElement("label", { id: "linker-label-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.")),
-                        ], data: intentData, setData: setIntentData }))),
-                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", id: "security-label" }, "Set security"),
-                                    React.createElement("td", { className: "content-col" },
-                                        React.createElement("label", null,
-                                            React.createElement("input", { type: "radio", name: "security", "aria-labelledby": "security-label security-label-trusted", value: "trusted", "aria-posinset": 1, "aria-setsize": 2, checked: security === "trusted", onChange: () => {
-                                                    setSecurity("trusted");
-                                                } }),
-                                            React.createElement("span", { id: "security-label-trusted" }, "Trusted")),
-                                        React.createElement("label", null,
-                                            React.createElement("input", { type: "radio", name: "security", "aria-labelledby": "security-label security-label-untrusted", value: "untrusted", "aria-posinset": 2, "aria-setsize": 2, checked: security === "untrusted", onChange: () => {
-                                                    setSecurity("untrusted");
-                                                } }),
-                                            React.createElement("span", { id: "security-label-untrusted" }, "Untrusted")))),
-                                currentAppType === "native" && (React.createElement("tr", null,
-                                    React.createElement("td", null, "Launch timeout"),
-                                    React.createElement("td", null,
-                                        React.createElement("input", { type: "text", id: "launch-timeout", 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: 6 }, "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 !== "Citrix" && (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("tr", null,
-                                    React.createElement("td", { style: { paddingBottom: "0px" } },
-                                        React.createElement(Checkbox, { label: "Process affinity", checked: enableAffinity, onClick: () => {
-                                                setEnableAffinity(!enableAffinity);
-                                            } })),
-                                    React.createElement("td", { style: { paddingBottom: "0px" } },
-                                        React.createElement(Tooltip, { type: "info" }, "Group the render processes of your app with render processes of other windows to reduce the combined memory usage of all the grouped apps. Disable the grouping if your app requires significant CPU resources."))),
-                                React.createElement("tr", null,
-                                    React.createElement("td", null,
-                                        "More about",
-                                        " ",
-                                        React.createElement(FinsembleLink, { text: "affinity and process management", url: "https://documentation.finsemble.com/tutorial-processManagement.html" }),
-                                        ".")))))),
-                currentAppType !== "Citrix" && (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", { id: "persist-url" },
-                                        React.createElement(Checkbox, { label: "Persist the URL", 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", { id: "persist-path" },
-                                        React.createElement(Checkbox, { label: "Persist the path", 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."))))))))))),
+                currentAppType !== "assimilation" && (React.createElement(AppEditPage_SelectConnect, Object.assign({ rules: appData.rules }, {
+                    selectConnectTrustAll,
+                    setSelectConnectTrustAll,
+                    displayName,
+                    setRules,
+                    isInboundInteropAuthorized,
+                    isOutboundInteropAuthorized,
+                    addApp,
+                }))),
+                currentAppType === "web" && (React.createElement(AppEditPage_Preloads, Object.assign({ preloads: appData.preloads }, {
+                    preloadAliasList,
+                    appData,
+                    setPreloads,
+                }))),
+                currentAppType !== "Citrix" && !appService && (React.createElement(AppEditPage_Position, Object.assign({}, {
+                    isWidthValid,
+                    windowWidth,
+                    setWindowHeight,
+                    isHeightValid,
+                    windowHeight,
+                    setWindowWidth,
+                    resizable,
+                    setResizable,
+                    abstractPosition,
+                    setAbstractPosition,
+                    opacity,
+                    setOpacity,
+                }))),
+                currentAppType === "web" && !appService && (React.createElement(AppEditPage_Behavior, Object.assign({}, {
+                    allowAutoArrange,
+                    setAllowAutoArrange,
+                    allowGrouping,
+                    setAllowGrouping,
+                    allowSnapping,
+                    setAllowSnapping,
+                    allowTabbing,
+                    setAllowTabbing,
+                    allowTiling,
+                    setAllowTiling,
+                    enableTitleBar,
+                    setEnableTitleBar,
+                    titlebarType,
+                    setTitlebarType,
+                    aot,
+                    setAot,
+                    enableAOT,
+                    setEnableAOT,
+                    allowMinimize,
+                    setAllowMinimize,
+                    hideMinimize,
+                    setHideMinimize,
+                    allowMaximize,
+                    setAllowMaximize,
+                    hideMaximize,
+                    setHideMaximize,
+                    hideClose,
+                    setHideClose,
+                }))),
+                currentAppType !== "assimilation" && (React.createElement(AppEditPage_Interop, Object.assign({}, {
+                    appService,
+                    autoConnect,
+                    setAutoConnect,
+                    intentData,
+                    setIntentData,
+                }))),
+                React.createElement(AppEditPage_Component, Object.assign({}, {
+                    currentAppType,
+                    security,
+                    setSecurity,
+                    native_windowSpawnTimeout,
+                    setNative_windowSpawnTimeout,
+                    appService,
+                    singleton,
+                    setSingleton,
+                    spawnOnStartup,
+                    setSpawnOnStartup,
+                    launchableByUser,
+                    setLaunchableByUser,
+                    isEvergreen,
+                    setIsEvergreen,
+                    enableAffinity,
+                    setEnableAffinity,
+                })),
+                currentAppType !== "Citrix" && !appService && (React.createElement(AppEditPage_Workspace, Object.assign({}, {
+                    currentAppType,
+                    addToWorkspace,
+                    setAddToWorkspace,
+                    persistURL,
+                    setPersistURL,
+                    persistPath,
+                    setPersistPath,
+                }))))),
         React.createElement("div", { className: "app-edit-actions" },
             React.createElement("div", null,
                 React.createElement(Button, { fashion: "danger", text: "Remove app", onClick: (e) => {