@finsemble/finsemble-ui 6.6.1 → 7.0.0-beta.3

package/react/components/sdd/AppEditPage.js

@@ -15,6 +15,7 @@ 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";
 const DEFAULT_WINDOW_WIDTH = 1280;
 const DEFAULT_WINDOW_HEIGHT = 600;
 const MINIMUM_WINDOW_WIDTH = 0;
@@ -23,6 +24,7 @@ export const defaultAppData = {
     name: "",
     abstractPosition: 0,
     addToWorkspace: true,
+    alias: "",
     allowAutoArrange: true,
     allowGrouping: true,
     allowMinimize: true,
@@ -35,6 +37,7 @@ export const defaultAppData = {
     appType: "WEB",
     autoConnect: false,
     description: "",
+    enableAffinity: true,
     enableAOT: false,
     enableTitleBar: true,
     height: DEFAULT_WINDOW_HEIGHT,
@@ -57,14 +60,18 @@ export const defaultAppData = {
     singleton: false,
     spawnOnStartup: false,
     tags: [],
+    titlebarType: "injected",
     url: "",
     width: DEFAULT_WINDOW_WIDTH,
 };
-const openLink = (url) => {
-    FSBL.Clients.LauncherClient.spawn("", {
-        url,
-        addToWorkspace: false,
-    }, () => { });
+const convertIntentData = (intentArray) => intentArray.slice(0, -1).map(([name, displayName, contexts]) => {
+    return { name, displayName, contexts: contexts.split(",") };
+});
+const appTypeDisplayNameMap = {
+    web: "Web",
+    native: "Native",
+    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;
@@ -74,6 +81,8 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
     const [nativePath, setNativePath] = useState(startingNativePath);
     const [abstractPosition, setAbstractPosition] = useState(appData.abstractPosition);
     const [addToWorkspace, setAddToWorkspace] = useState(appData.addToWorkspace);
+    const [enableAffinity, setEnableAffinity] = useState(appData.enableAffinity);
+    const [alias, setAlias] = useState(appData.alias);
     const [allowAutoArrange, setAllowAutoArrange] = useState(appData.allowAutoArrange);
     const [allowGrouping, setAllowGrouping] = useState(appData.allowGrouping);
     const [allowMinimize, setAllowMinimize] = useState(appData.allowMinimize);
@@ -91,7 +100,6 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
     const [hideMaximize, setHideMaximize] = useState(appData.hideMaximize);
     const [hideMinimize, setHideMinimize] = useState(appData.hideMinimize);
     const [iconURL, setIconURL] = useState(appData.iconURL);
-    const [intents, setIntents] = useState(appData.intents);
     const [isEvergreen, setIsEvergreen] = useState(appData.isEvergreen);
     const [launchableByUser, setLaunchableByUser] = useState(appData.launchableByUser);
     const [native_windowSpawnTimeout, setNative_windowSpawnTimeout] = useState(appData.native_windowSpawnTimeout);
@@ -104,19 +112,29 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
     const [security, setSecurity] = useState(appData.security);
     const [singleton, setSingleton] = useState(appData.singleton);
     const [spawnOnStartup, setSpawnOnStartup] = useState(appData.spawnOnStartup);
+    const [titlebarType, setTitlebarType] = useState(appData.titlebarType);
     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 [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 isWindowURLValid = validateURL(windowURL);
     const isHeightValid = !(typeof windowHeight !== "number" || windowHeight < MINIMUM_WINDOW_HEIGHT);
     const isWidthValid = !(typeof windowWidth !== "number" || windowWidth < MINIMUM_WINDOW_WIDTH);
-    const disableSubmit = (currentAppType === "web" && (!isWindowURLValid || windowURL.length === 0)) ||
-        (currentAppType !== "web" &&
-            (!nativePath || nativePath.length === 0 || validateFilename(VALID_APP_EXTENSIONS, nativePath))) ||
-        displayName === undefined ||
-        displayName === "" ||
-        !isWidthValid ||
-        !isHeightValid;
+    const isValidInput = () => {
+        if (!isWidthValid || !isHeightValid || displayName === undefined || displayName === "") {
+            return false;
+        }
+        if (currentAppType === "web") {
+            return isWindowURLValid && windowURL.length > 0;
+        }
+        else if (currentAppType === "Citrix") {
+            return true;
+        }
+        else {
+            return !(!nativePath || (nativePath.length === 0 && validateFilename(VALID_APP_EXTENSIONS, nativePath)));
+        }
+    };
+    const disableSubmit = !isValidInput();
     const clickSubmit = () => {
         if (!(typeof windowWidth === "number" && typeof windowHeight === "number")) {
             return;
@@ -132,10 +150,11 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
             description: componentDescription,
             iconURL,
             rules: selectConnectTrustAll ? [] : rules,
-            intents,
+            intents: convertIntentData(intentData),
             persistPath,
             persistURL,
             addToWorkspace,
+            alias,
             allowAutoArrange,
             allowGrouping,
             allowMinimize,
@@ -160,6 +179,7 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
             isEvergreen,
             native_windowSpawnTimeout,
             preloads,
+            titlebarType,
         });
     };
     const submitOnEnter = (e) => {
@@ -200,9 +220,9 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
                 React.createElement("tbody", null,
                     React.createElement("tr", null,
                         React.createElement("td", { className: "label-col" },
-                            React.createElement("label", null, "Application type")),
+                            React.createElement("label", null, "App type")),
                         React.createElement("td", { className: "content-col" },
-                            React.createElement("div", { className: "app-edit-type-field" }, currentAppType === "web" ? "Web" : "Native"))),
+                            React.createElement("div", { className: "app-edit-type-field" }, appTypeDisplayNameMap[currentAppType.toLowerCase()]))),
                     React.createElement("tr", null,
                         React.createElement("td", null,
                             React.createElement("label", { htmlFor: "app-name" }, "Name")),
@@ -210,6 +230,13 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
                             React.createElement("input", { type: "text", id: "app-name", value: displayName, placeholder: "Untitled Application", onKeyDown: submitOnEnter, onChange: (e) => {
                                     setDisplayName(e.target.value);
                                 } }))),
+                    currentAppType === "Citrix" && (React.createElement("tr", null,
+                        React.createElement("td", null,
+                            React.createElement("label", { htmlFor: "app-alias" }, "Virtual app name")),
+                        React.createElement("td", null,
+                            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,
                         React.createElement("td", null,
                             React.createElement("label", { htmlFor: "app-icon-url" }, "Icon URL")),
@@ -217,28 +244,29 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
                             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,
+                    currentAppType !== "web" && currentAppType !== "Citrix" && (React.createElement("tr", null,
                         React.createElement("td", null,
-                            React.createElement("label", null, "API access")),
+                            React.createElement("label", { id: "api-access-label" }, "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("input", { type: "checkbox", name: "api-access", checked: currentAppType === "native", onKeyDown: (e) => {
+                                        if (e.key === " ") {
+                                            setCurrentAppType(currentAppType === "native" ? "assimilation" : "native");
+                                        }
+                                        else {
+                                            submitOnEnter(e);
+                                        }
+                                    }, onChange: () => {
+                                        setCurrentAppType(currentAppType === "native" ? "assimilation" : "native");
+                                    } }))))),
+                    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,
+                                } })))),
+                    (currentAppType === "native" || currentAppType === "assimilation") && (React.createElement("tr", null,
                         React.createElement("td", null,
                             React.createElement("label", null, "File path")),
                         React.createElement("td", null,
@@ -264,39 +292,33 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
                                 }, 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: React.createElement(React.Fragment, null,
+                currentAppType !== "assimilation" && (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(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" }, "Interop trust rule"),
+                                    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", value: "true", checked: selectConnectTrustAll, onChange: () => {
+                                            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);
                                                 } }),
-                                            "Trust all apps"),
+                                            React.createElement("span", { id: "interop-label-all" }, "Trust all apps")),
                                         React.createElement("label", null,
-                                            React.createElement("input", { type: "radio", name: "interop-trust", value: "false", checked: !selectConnectTrustAll, onChange: () => {
+                                            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);
                                                 } }),
-                                            "Trust selected apps"))),
+                                            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: (_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", summary: React.createElement(React.Fragment, 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("a", { href: "", onClick: (e) => {
-                                e.preventDefault();
-                                openLink("https://documentation.finsemble.com/tutorial-Preloads.html");
-                            } }, "Learn more")) },
+                        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,
@@ -304,8 +326,8 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
                                     React.createElement("td", null,
                                         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." },
+                                            } })))))))),
+                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,
@@ -335,12 +357,12 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
                                     React.createElement("td", { className: "position-entry" },
                                         React.createElement(DefaultDropdownButton, { allowEmpty: false, caretLocation: "right", defaultSelection: positionButtonOptions[abstractPosition], buttonOptions: positionButtonOptions })))),
                                 React.createElement("tr", null,
-                                    React.createElement("td", null, "Opacity"),
+                                    React.createElement("td", { id: "opacity-label" }, "Opacity"),
                                     React.createElement("td", null,
-                                        React.createElement("input", { type: "range", className: "app-edit-range", value: opacity, min: 0, step: 0.01, max: 1, onChange: (e) => {
+                                        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", value: Math.floor(opacity * 100), onChange: (e) => {
+                                        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;
@@ -349,8 +371,8 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
                                                     return;
                                                 }
                                                 setOpacity(num / 100);
-                                            }, style: { maxWidth: "30px" } }))))))),
-                React.createElement(Accordion, { id: "window-behavior", label: "Window behavior", summary: "Specify how this window will behave with respect to other windows in the workspace." },
+                                            }, 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,
@@ -383,114 +405,122 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
                                 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: () => {
+                                        React.createElement(Checkbox, { label: "Enable title bar", checked: enableTitleBar, onClick: () => {
                                                 setEnableTitleBar(!enableTitleBar);
                                             } }))),
-                                React.createElement("tr", null,
+                                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", checked: aot && !enableAOT, onChange: () => {
+                                            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);
                                                 } }),
-                                            "Enable"),
+                                            React.createElement("span", { id: "aot-label-enable" }, "Enable")),
                                         React.createElement("label", null,
-                                            React.createElement("input", { type: "radio", name: "alwaysOnTop", checked: !aot && enableAOT, onChange: () => {
+                                            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);
                                                 } }),
-                                            "Show in titlebar"),
+                                            React.createElement("span", { id: "aot-label-show" }, "Show in titlebar")),
                                         React.createElement("label", { style: { paddingLeft: "13.53px" } },
-                                            React.createElement("input", { type: "radio", name: "alwaysOnTop", checked: !aot && !enableAOT, onChange: () => {
+                                            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);
                                                 } }),
-                                            "Disable"))),
+                                            React.createElement("span", { id: "aot-label-disable" }, "Disable")))),
                                 React.createElement("tr", null,
-                                    React.createElement("td", 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", checked: allowMinimize && !hideMinimize, onChange: () => {
+                                            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);
                                                 } }),
-                                            "Enable"),
+                                            React.createElement("span", { id: "minimize-label-0" }, "Enable")),
                                         React.createElement("label", null,
-                                            React.createElement("input", { type: "radio", name: "minimize", checked: allowMinimize && hideMinimize, onChange: () => {
+                                            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);
                                                 } }),
-                                            "Hide from titlebar"),
+                                            React.createElement("span", { id: "minimize-label-1" }, "Hide from titlebar")),
                                         React.createElement("label", null,
-                                            React.createElement("input", { type: "radio", name: "minimize", checked: !allowMinimize, onChange: () => {
+                                            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);
                                                 } }),
-                                            "Disable"))),
+                                            React.createElement("span", { id: "minimize-label-2" }, "Disable")))),
                                 React.createElement("tr", null,
-                                    React.createElement("td", 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", checked: allowMaximize && !hideMaximize, onChange: () => {
+                                            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);
                                                 } }),
-                                            "Enable"),
+                                            React.createElement("span", { id: "maximize-label-3" }, "Enable")),
                                         React.createElement("label", null,
-                                            React.createElement("input", { type: "radio", name: "maximize", checked: allowMaximize && hideMaximize, onChange: () => {
+                                            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);
                                                 } }),
-                                            "Hide from titlebar"),
+                                            React.createElement("span", { id: "maximize-label-4" }, "Hide from titlebar")),
                                         React.createElement("label", null,
-                                            React.createElement("input", { type: "radio", name: "maximize", checked: !allowMaximize, onChange: () => {
+                                            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);
                                                 } }),
-                                            "Disable"))),
+                                            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", checked: !hideClose, onChange: () => {
+                                            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);
                                                 } }),
-                                            "Enable"),
+                                            React.createElement("span", { id: "close-label-enable" }, "Enable")),
                                         React.createElement("label", null,
-                                            React.createElement("input", { type: "radio", name: "close", checked: hideClose, onChange: () => {
+                                            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);
                                                 } }),
-                                            "Hide from titlebar"))))))),
-                React.createElement(Accordion, { id: "interop", label: "Interop", summary: "Define how to link an app to communication channels." },
+                                            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", { htmlFor: "interop-connection" },
+                                        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", id: "interop-connection-auto", value: "auto", checked: autoConnect, onChange: () => {
+                                                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", { htmlFor: "interop-connection-auto" }, "Always")),
+                                                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", id: "interop-connection-fdc3", value: "fdc3", checked: !autoConnect, onChange: () => {
+                                                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", { htmlFor: "interop-connection-fdc3" }, "On FDC3 API use")))),
+                                                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: [
@@ -503,42 +533,24 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
                             React.createElement(React.Fragment, null,
                                 "Contexts",
                                 React.createElement(Tooltip, null, "The FDC3 context to listen for.")),
-                        ], startingData: (_b = appData.intents) === null || _b === void 0 ? void 0 : _b.map((intent) => {
-                            var _a;
-                            return [
-                                intent.name,
-                                intent.displayName,
-                                (_a = intent.contexts) === null || _a === void 0 ? void 0 : _a.join(", "),
-                            ];
-                        }), onUpdate: (data) => {
-                            const newIntents = data
-                                .filter((row) => row.join("").length > 0)
-                                .map((row) => {
-                                return {
-                                    name: row[0].trim(),
-                                    displayName: row[1].trim(),
-                                    contexts: row[2].split(",").map((str) => str.trim()),
-                                };
-                            });
-                            setIntents(newIntents);
-                        } })),
+                        ], 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" }, "Set security"),
+                                    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", value: "trusted", checked: security === "trusted", onChange: () => {
+                                            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");
                                                 } }),
-                                            "Trusted"),
+                                            React.createElement("span", { id: "security-label-trusted" }, "Trusted")),
                                         React.createElement("label", null,
-                                            React.createElement("input", { type: "radio", name: "security", value: "untrusted", checked: security === "untrusted", onChange: () => {
+                                            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");
                                                 } }),
-                                            "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,
@@ -550,7 +562,7 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
                                                 setNative_windowSpawnTimeout(num);
                                             } })))),
                                 React.createElement("tr", null,
-                                    React.createElement("td", { rowSpan: 5 }, "Options"),
+                                    React.createElement("td", { rowSpan: 6 }, "Options"),
                                     React.createElement("td", null,
                                         React.createElement(Checkbox, { label: "Only one instance", checked: singleton, onClick: () => {
                                                 setSingleton(!singleton);
@@ -571,14 +583,27 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
                                             } })),
                                     React.createElement("td", null,
                                         React.createElement(Tooltip, { type: "info" }, "Add the component to the Apps menu on the Finsemble toolbar."))),
-                                React.createElement("tr", null,
+                                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(Accordion, { id: "workspace", label: "Workspace", summary: "Define how the app relates to the workspace." },
+                                        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,
@@ -592,17 +617,17 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
                                         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 location", checked: persistURL, onClick: () => {
+                                        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 location", checked: persistPath, onClick: () => {
+                                        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.")))))))))),
+                                        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) => {