@finsemble/finsemble-ui 6.4.0-beta.1 → 6.5.0

package/react/components/smartDesktopDesigner/AppEditPage.js

@@ -10,10 +10,11 @@ import { AppEditAccess } from "./AppEditAccess";
 import { Tooltip } from "../common/Tooltip";
 import { Accordion } from "../common/Accordion";
 import { Checkbox } from "../common/Checkbox";
-import "../common/css/application-edit-page.css";
-import "../../assets/css/windowTitleBar.css";
 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";
 const DEFAULT_WINDOW_WIDTH = 1280;
 const DEFAULT_WINDOW_HEIGHT = 600;
 const MINIMUM_WINDOW_WIDTH = 0;
@@ -32,11 +33,10 @@ export const defaultAppData = {
     alwaysOnTop: false,
     appArguments: "",
     appType: "WEB",
-    autoConnect: true,
+    autoConnect: false,
     description: "",
     enableAOT: false,
     enableTitleBar: true,
-    grpc: false,
     height: DEFAULT_WINDOW_HEIGHT,
     hideClose: false,
     hideMaximize: false,
@@ -50,6 +50,7 @@ export const defaultAppData = {
     path: "",
     persistPath: true,
     persistURL: true,
+    preloads: [],
     resizable: true,
     rules: [],
     security: "trusted",
@@ -59,7 +60,13 @@ export const defaultAppData = {
     url: "",
     width: DEFAULT_WINDOW_WIDTH,
 };
-export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web", startingWindowURL = "", startingNativePath = "", appData = defaultAppData, validateURL, removeApplicationFn = () => { }, cancelFn = () => { }, submitFn, addApp, isInboundInteropAuthorized, isOutboundInteropAuthorized, }) => {
+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, preloadAliasList = [], }) => {
     var _a, _b;
     const [displayName, setDisplayName] = useState(startingDisplayName);
     const [currentAppType, setCurrentAppType] = useState(startingAppType);
@@ -80,7 +87,6 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
     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);
@@ -92,6 +98,7 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
     const [opacity, setOpacity] = useState(appData.opacity);
     const [persistPath, setPersistPath] = useState(appData.persistPath);
     const [persistURL, setPersistURL] = useState(appData.persistURL);
+    const [preloads, setPreloads] = useState(appData.preloads);
     const [resizable, setResizable] = useState(appData.resizable);
     const [rules, setRules] = useState(appData.rules);
     const [security, setSecurity] = useState(appData.security);
@@ -99,6 +106,7 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
     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);
@@ -123,7 +131,7 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
             height: windowHeight,
             description: componentDescription,
             iconURL,
-            rules,
+            rules: selectConnectTrustAll ? [] : rules,
             intents,
             persistPath,
             persistURL,
@@ -148,10 +156,10 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
             singleton,
             spawnOnStartup,
             launchableByUser,
-            grpc,
             security,
             isEvergreen,
             native_windowSpawnTimeout,
+            preloads,
         });
     };
     const submitOnEnter = (e) => {
@@ -183,92 +191,139 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
         };
     });
     return (React.createElement(React.Fragment, null,
-        React.createElement("h2", { className: "app-edit-app-name" },
-            iconURL !== "" && React.createElement("img", { src: iconURL, className: "app-icon" }),
-            displayName),
         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);
-                } })),
+            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("label", { htmlFor: "app-icon-url" }, "Icon URL"),
-            React.createElement("input", { type: "text", id: "app-icon-url", value: iconURL, onKeyDown: submitOnEnter, onChange: (e) => {
-                    setIconURL(e.target.value);
-                } })),
-        React.createElement("div", { className: "app-edit-field" },
-            React.createElement("label", null, "Application 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 != "web", onKeyDown: submitOnEnter, onChange: (e) => {
-                            setCurrentAppType(e.target.value);
-                        } }),
-                    React.createElement("label", { htmlFor: "app-type-native" }, "Native"))),
-            React.createElement(Tooltip, { type: "info" }, "Tool tip")),
-        currentAppType !== "web" && (React.createElement("div", { className: "app-edit-field" },
-            React.createElement("label", null, "API access"),
-            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"))),
-            React.createElement(Tooltip, { type: "info" }, "Tool tip"))),
-        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);
-                    } }))))),
-        currentAppType !== "web" && (React.createElement("div", { className: "app-edit-field" },
-            React.createElement("label", { htmlFor: "app-arguments" }, "Arguments"),
-            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("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("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: () => {
+                                            setCurrentAppType("native");
+                                        } }),
+                                    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: () => {
+                                            setCurrentAppType("assimilation");
+                                        } }),
+                                    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(Accordion, { id: "config", size: "medium", label: "Optional config settings" },
-                React.createElement(Accordion, { id: "select-connect", label: "SelectConnect", summary: "Description goes here in this spot right here to help people understand." },
-                    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", summary: "Description goes here in this spot right here to help people understand." },
+                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", null, "Dimensions"),
+                                    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, onChange: () => {
+                                                    setSelectConnectTrustAll(true);
+                                                } }),
+                                            "Trust all apps"),
+                                        React.createElement("label", null,
+                                            React.createElement("input", { type: "radio", name: "interop-trust", value: "false", checked: !selectConnectTrustAll, onChange: () => {
+                                                    setSelectConnectTrustAll(false);
+                                                } }),
+                                            "Trust selected apps"))),
+                                !selectConnectTrustAll && (React.createElement("tr", null,
                                     React.createElement("td", null,
-                                        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, onChange: (e) => {
-                                                        setWindowWidth(parseInt(e.target.value, 10) || "");
-                                                    } })),
-                                            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(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: "preloads", label: "Preloads" },
+                    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(Tooltip, { type: "info" }, "Tool tip"))),
+                                        React.createElement(FinsembleSelect, { options: preloadAliasList, selected: appData.preloads, updateCallback: (selectedValues) => {
+                                                setPreloads(selectedValues);
+                                            } }))))))),
+                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" },
@@ -279,7 +334,7 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
                                         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) => {
+                                        React.createElement("input", { id: "app-opacity", type: "text", value: Math.floor(opacity * 100), onChange: (e) => {
                                                 const num = +e.target.value;
                                                 if (isNaN(num)) {
                                                     return;
@@ -288,92 +343,206 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
                                                     return;
                                                 }
                                                 setOpacity(num / 100);
-                                            }, style: { maxWidth: "30px" } })),
+                                            }, 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(Tooltip, { type: "info" }, "Tool tip"))),
+                                        React.createElement(Checkbox, { label: "Grouping", checked: allowGrouping, onClick: () => {
+                                                setAllowGrouping(!allowGrouping);
+                                            } }))),
                                 React.createElement("tr", null,
-                                    React.createElement("td", null, "Options"),
                                     React.createElement("td", null,
-                                        React.createElement(Checkbox, { label: "Lock dimensions", checked: !resizable, onClick: () => {
-                                                setResizable(!resizable);
-                                            } })),
+                                        React.createElement(Checkbox, { label: "Snapping", checked: allowSnapping, onClick: () => {
+                                                setAllowSnapping(!allowSnapping);
+                                            } }))),
+                                React.createElement("tr", null,
                                     React.createElement("td", null,
-                                        React.createElement(Tooltip, { type: "info" }, "Tool tip"))))))),
-                React.createElement(Accordion, { id: "interop", label: "Interop", summary: "Description goes here in this spot right here to help people understand." },
+                                        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", name: "minimize", checked: allowMinimize && !hideMinimize, onChange: () => {
+                                                    setAllowMinimize(true);
+                                                    setHideMinimize(false);
+                                                } }),
+                                            "Enable"),
+                                        React.createElement("label", null,
+                                            React.createElement("input", { type: "radio", name: "minimize", checked: allowMinimize && hideMinimize, onChange: () => {
+                                                    setAllowMinimize(true);
+                                                    setHideMinimize(true);
+                                                } }),
+                                            "Hide from titlebar"),
+                                        React.createElement("label", null,
+                                            React.createElement("input", { type: "radio", name: "minimize", 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", name: "maximize", checked: allowMaximize && !hideMaximize, onChange: () => {
+                                                    setAllowMaximize(true);
+                                                    setHideMaximize(false);
+                                                } }),
+                                            "Enable"),
+                                        React.createElement("label", null,
+                                            React.createElement("input", { type: "radio", name: "maximize", checked: allowMaximize && hideMaximize, onChange: () => {
+                                                    setAllowMaximize(true);
+                                                    setHideMaximize(true);
+                                                } }),
+                                            "Hide from titlebar"),
+                                        React.createElement("label", null,
+                                            React.createElement("input", { type: "radio", name: "maximize", 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", name: "close", checked: !hideClose, onChange: () => {
+                                                    setHideClose(false);
+                                                } }),
+                                            "Enable"),
+                                        React.createElement("label", null,
+                                            React.createElement("input", { type: "radio", name: "close", 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("label", { htmlFor: "interop-connection" }, "Display linker menu"),
-                        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(Tooltip, { type: "info" }, "Tool tip"))),
+                        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", name: "linker", 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", name: "linker", 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,
-                                "Contexts",
-                                React.createElement(Tooltip, null, "Tooltip")),
+                                "Name",
+                                React.createElement(Tooltip, null, "The name of the intent to listen for.")),
                             React.createElement(React.Fragment, null,
                                 "Display name",
-                                React.createElement(Tooltip, null, "Tooltip")),
+                                React.createElement(Tooltip, null, "The name that appears in the resolver.")),
                             React.createElement(React.Fragment, null,
-                                "Name",
-                                React.createElement(Tooltip, null, "Tooltip")),
+                                "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 [
-                                (_a = intent.contexts) === null || _a === void 0 ? void 0 : _a.join(", "),
-                                intent.displayName,
                                 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 {
-                                    contexts: row[0].split(",").map((str) => str.trim()),
+                                    name: row[0].trim(),
                                     displayName: row[1].trim(),
-                                    name: row[2].trim(),
+                                    contexts: row[2].split(",").map((str) => str.trim()),
                                 };
                             });
                             setIntents(newIntents);
                         } })),
-                React.createElement(Accordion, { id: "component", label: "Component", summary: "Description goes here in this spot right here to help people understand." },
+                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", null, "Set security"),
-                                    React.createElement("td", 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: () => {
+                                            React.createElement("input", { type: "radio", name: "security", value: "trusted", checked: security === "trusted", onChange: () => {
                                                     setSecurity("trusted");
                                                 } }),
                                             "Trusted"),
                                         React.createElement("label", null,
-                                            React.createElement("input", { type: "radio", value: "untrusted", checked: security === "untrusted", onClick: () => {
+                                            React.createElement("input", { type: "radio", name: "security", value: "untrusted", checked: security === "untrusted", onChange: () => {
                                                     setSecurity("untrusted");
                                                 } }),
-                                            "Untrusted")),
-                                    React.createElement("td", null,
-                                        React.createElement(Tooltip, { type: "info" }, "Tool tip"))),
+                                            "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) => {
+                                        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("td", null,
-                                        React.createElement(Tooltip, { type: "info" }, "Tool tip")))),
+                                            } })))),
                                 React.createElement("tr", null,
                                     React.createElement("td", { rowSpan: 5 }, "Options"),
                                     React.createElement("td", null,
@@ -381,153 +550,53 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
                                                 setSingleton(!singleton);
                                             } })),
                                     React.createElement("td", null,
-                                        React.createElement(Tooltip, { type: "info" }, "Tool tip"))),
+                                        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" }, "Tool tip"))),
+                                        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" }, "Tool tip"))),
-                                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" }, "Tool tip")))),
+                                        React.createElement(Tooltip, { type: "info" }, "Add the component to the Apps menu on the Finsemble toolbar."))),
                                 React.createElement("tr", null,
                                     React.createElement("td", null,
-                                        React.createElement(Checkbox, { label: "Evergreen", checked: isEvergreen, onClick: () => {
+                                        React.createElement(Checkbox, { label: "Persist across workspaces", checked: isEvergreen, onClick: () => {
                                                 setIsEvergreen(!isEvergreen);
                                             } })),
                                     React.createElement("td", null,
-                                        React.createElement(Tooltip, { type: "info" }, "Tool tip"))))))),
-                React.createElement(Accordion, { id: "window-management", label: "Window management", summary: "Description goes here in this spot right here to help people understand." },
-                    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: 5 }, "Enable"),
-                                    React.createElement("td", null,
-                                        React.createElement(Checkbox, { label: "Auto arrange", checked: allowAutoArrange, onClick: () => {
-                                                setAllowAutoArrange(!allowAutoArrange);
-                                            } })),
-                                    React.createElement("td", null,
-                                        React.createElement(Tooltip, { type: "info" }, "Tool tip"))),
-                                React.createElement("tr", null,
-                                    React.createElement("td", null,
-                                        React.createElement(Checkbox, { label: "Grouping", checked: allowGrouping, onClick: () => {
-                                                setAllowGrouping(!allowGrouping);
-                                            } })),
-                                    React.createElement("td", null,
-                                        React.createElement(Tooltip, { type: "info" }, "Tool tip"))),
-                                React.createElement("tr", null,
-                                    React.createElement("td", null,
-                                        React.createElement(Checkbox, { label: "Snapping", checked: allowSnapping, onClick: () => {
-                                                setAllowSnapping(!allowSnapping);
-                                            } })),
-                                    React.createElement("td", null,
-                                        React.createElement(Tooltip, { type: "info" }, "Tool tip"))),
-                                React.createElement("tr", null,
-                                    React.createElement("td", null,
-                                        React.createElement(Checkbox, { label: "Tabs", checked: allowTabbing, onClick: () => {
-                                                setAllowTabbing(!allowTabbing);
-                                            } })),
-                                    React.createElement("td", null,
-                                        React.createElement(Tooltip, { type: "info" }, "Tool tip"))),
-                                React.createElement("tr", null,
-                                    React.createElement("td", null,
-                                        React.createElement(Checkbox, { label: "Tiling", checked: allowTiling, onClick: () => {
-                                                setAllowTiling(!allowTiling);
-                                            } })),
-                                    React.createElement("td", null,
-                                        React.createElement(Tooltip, { type: "info" }, "Tool tip"))),
-                                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);
-                                            } })),
-                                    React.createElement("td", null,
-                                        React.createElement(Tooltip, { type: "info" }, "Tool tip"))),
-                                enableTitleBar && (React.createElement("tr", null,
-                                    React.createElement("td", null, "Show/hide icons"),
-                                    React.createElement("td", null,
-                                        React.createElement("div", { style: { width: "90px", paddingLeft: "10px" } },
-                                            React.createElement("div", { className: "fsbl-header-right" },
-                                                !aot && (React.createElement("div", { id: "fsbl-always-on-top", className: `fsbl-icon fsbl-always-on-top ${enableAOT ? "titleBarButton-enabled" : "titleBarButton-disabled"}`, title: "Always On Top", tabIndex: 0, role: "button", onClick: () => {
-                                                        setEnableAOT(!enableAOT);
-                                                    } },
-                                                    React.createElement("i", { className: "ff-always-on-top" }))),
-                                                allowMinimize && (React.createElement("div", { id: "fsbl-window-minimize", className: `fsbl-icon fsbl-minimize ${!hideMinimize ? "titleBarButton-enabled" : "titleBarButton-disabled"}`, title: "Minimize", tabIndex: 0, role: "button", onClick: () => {
-                                                        setHideMinimize(!hideMinimize);
-                                                    } },
-                                                    React.createElement("i", { className: "ff-minimize" }))),
-                                                allowMaximize && (React.createElement("div", { className: `fsbl-icon fsbl-maximize window-max ${!hideMaximize ? "titleBarButton-enabled" : "titleBarButton-disabled"}`, title: "Maximize", tabIndex: 0, role: "button", onClick: () => {
-                                                        setHideMaximize(!hideMaximize);
-                                                    } },
-                                                    React.createElement("i", { className: "ff-maximize" }))),
-                                                React.createElement("div", { className: `fsbl-icon fsbl-close ${!hideClose ? "titleBarButton-enabled" : "titleBarButton-disabled"}`, title: "Close", tabIndex: 0, role: "button", onClick: () => {
-                                                        setHideClose(!hideClose);
-                                                    } },
-                                                    React.createElement("i", { className: "ff-close" }))))),
-                                    React.createElement("td", null,
-                                        React.createElement(Tooltip, { type: "info" }, "Tool tip")))),
-                                React.createElement("tr", null,
-                                    React.createElement("td", { rowSpan: 3 }, "Icons functionality"),
-                                    React.createElement("td", null,
-                                        React.createElement(Checkbox, { label: "Always on top", checked: aot, onClick: () => {
-                                                setAot(!aot);
-                                            } })),
-                                    React.createElement("td", null,
-                                        React.createElement(Tooltip, { type: "info" }, "Tool tip"))),
-                                React.createElement("tr", null,
-                                    React.createElement("td", null,
-                                        React.createElement(Checkbox, { label: "Minimize", checked: allowMinimize, onClick: () => {
-                                                setAllowMinimize(!allowMinimize);
-                                            } })),
-                                    React.createElement("td", null,
-                                        React.createElement(Tooltip, { type: "info" }, "Tool tip"))),
-                                React.createElement("tr", null,
-                                    React.createElement("td", null,
-                                        React.createElement(Checkbox, { label: "Maximize", checked: allowMaximize, onClick: () => {
-                                                setAllowMaximize(!allowMaximize);
-                                            } })),
-                                    React.createElement("td", null,
-                                        React.createElement(Tooltip, { type: "info" }, "Tool tip"))))))),
-                React.createElement(Accordion, { id: "workspace", label: "Workspace", summary: "Description goes here in this spot right here to help people understand." },
+                                        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", { rowSpan: 2 }, "Options"),
-                                    React.createElement("td", 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" }, "Tool tip"))),
+                                        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 URL", checked: persistURL, onClick: () => {
+                                    React.createElement("td", { id: "persist-url" },
+                                        React.createElement(Checkbox, { label: "Persist the location", checked: persistURL, onClick: () => {
                                                 setPersistURL(!persistURL);
                                             } })),
                                     React.createElement("td", null,
-                                        React.createElement(Tooltip, { type: "info" }, "Tool tip")))) : (React.createElement("tr", null,
-                                    React.createElement("td", null,
-                                        React.createElement(Checkbox, { label: "Persist path", checked: persistPath, onClick: () => {
+                                        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 location", checked: persistPath, onClick: () => {
                                                 setPersistPath(!persistPath);
                                             } })),
                                     React.createElement("td", null,
-                                        React.createElement(Tooltip, { type: "info" }, "Tool tip")))))))))),
+                                        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,
                 React.createElement(Button, { fashion: "danger", text: "Remove app", onClick: (e) => {