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

package/react/components/smartDesktopDesigner/AppEditPage.js

@@ -14,6 +14,7 @@ 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;
@@ -36,7 +37,6 @@ export const defaultAppData = {
     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",
@@ -65,7 +66,7 @@ const openLink = (url) => {
         addToWorkspace: false,
     }, () => { });
 };
-export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web", startingWindowURL = "", startingNativePath = "", appData = defaultAppData, validateURL, removeApplicationFn = () => { }, cancelFn = () => { }, submitFn, addApp, isInboundInteropAuthorized, isOutboundInteropAuthorized, }) => {
+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);
@@ -86,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);
@@ -98,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);
@@ -155,10 +156,10 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
             singleton,
             spawnOnStartup,
             launchableByUser,
-            grpc,
             security,
             isEvergreen,
             native_windowSpawnTimeout,
+            preloads,
         });
     };
     const submitOnEnter = (e) => {
@@ -222,13 +223,13 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
                         React.createElement("td", null,
                             React.createElement("div", { className: "app-edit-type-field" },
                                 React.createElement("div", { className: "app-type-container" },
-                                    React.createElement("input", { type: "radio", name: "api-access", id: "api-access-yes", value: "native", checked: currentAppType == "native", onKeyDown: submitOnEnter, onChange: (e) => {
-                                            setCurrentAppType(e.target.value);
+                                    React.createElement("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: (e) => {
-                                            setCurrentAppType(e.target.value);
+                                    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,
@@ -239,7 +240,7 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
                                     setWindowURL(e.target.value);
                                 } })))) : (React.createElement("tr", null,
                         React.createElement("td", null,
-                            React.createElement("label", null, "File Path")),
+                            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) => {
@@ -277,62 +278,72 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
                                     React.createElement("td", { rowSpan: 2, className: "label-col" }, "Interop trust rule"),
                                     React.createElement("td", { className: "content-col" },
                                         React.createElement("label", null,
-                                            React.createElement("input", { type: "radio", name: "interop-trust", value: "true", checked: selectConnectTrustAll, onClick: () => {
+                                            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, onClick: () => {
+                                            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(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(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("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("tbody", null,
+                                React.createElement("tr", null,
+                                    React.createElement("td", { className: "label-col" }, "Dimensions"),
+                                    React.createElement("td", { className: "content-col" },
+                                        React.createElement("div", { className: "app-size-field" },
+                                            React.createElement("label", { htmlFor: "app-width" }, "Width"),
+                                            React.createElement("input", { className: "app-size-input", type: "text", id: "app-width", value: windowWidth, "aria-invalid": !isWidthValid, onChange: (e) => {
+                                                    setWindowWidth(parseInt(e.target.value, 10) || "");
+                                                } }),
+                                            React.createElement("span", { className: "unit" }, "px")),
+                                        React.createElement("div", { className: "app-size-field" },
+                                            React.createElement("label", { htmlFor: "app-height" }, "Height"),
+                                            React.createElement("input", { className: "app-size-input", type: "text", id: "app-height", value: windowHeight, "aria-invalid": !isHeightValid, onChange: (e) => {
+                                                    setWindowHeight(parseInt(e.target.value, 10) || "");
+                                                } }),
+                                            React.createElement("span", { className: "unit" }, "px")))),
+                                React.createElement("tr", null,
+                                    React.createElement("td", null),
+                                    React.createElement("td", { className: "pull-left" },
+                                        React.createElement(Checkbox, { label: "Lock dimensions", checked: !resizable, onClick: () => {
+                                                setResizable(!resizable);
+                                            } }))),
+                                abstractPosition >= 0 && (React.createElement("tr", null,
+                                    React.createElement("td", null, "Position"),
+                                    React.createElement("td", { className: "position-entry" },
+                                        React.createElement(DefaultDropdownButton, { allowEmpty: false, caretLocation: "right", defaultSelection: positionButtonOptions[abstractPosition], buttonOptions: positionButtonOptions })))),
+                                React.createElement("tr", null,
+                                    React.createElement("td", null, "Opacity"),
+                                    React.createElement("td", null,
+                                        React.createElement("input", { type: "range", className: "app-edit-range", value: opacity, min: 0, step: 0.01, max: 1, onChange: (e) => {
+                                                setOpacity(Number(e.target.value));
                                             } }),
-                                        React.createElement("span", { className: "unit" }, "px")))),
-                            React.createElement("tr", null,
-                                React.createElement("td", null),
-                                React.createElement("td", { className: "pull-left" },
-                                    React.createElement(Checkbox, { label: "Lock dimensions", checked: !resizable, onClick: () => {
-                                            setResizable(!resizable);
-                                        } }))),
-                            abstractPosition >= 0 && (React.createElement("tr", null,
-                                React.createElement("td", null, "Position"),
-                                React.createElement("td", { className: "position-entry" },
-                                    React.createElement(DefaultDropdownButton, { allowEmpty: false, caretLocation: "right", defaultSelection: positionButtonOptions[abstractPosition], buttonOptions: positionButtonOptions })))),
-                            React.createElement("tr", null,
-                                React.createElement("td", null, "Opacity"),
-                                React.createElement("td", null,
-                                    React.createElement("input", { type: "range", className: "app-edit-range", value: opacity, min: 0, step: 0.01, max: 1, onChange: (e) => {
-                                            setOpacity(Number(e.target.value));
-                                        } }),
-                                    React.createElement("input", { type: "text", value: Math.floor(opacity * 100), onChange: (e) => {
-                                            const num = +e.target.value;
-                                            if (isNaN(num)) {
-                                                return;
-                                            }
-                                            if (num < 0 || num > 100) {
-                                                return;
-                                            }
-                                            setOpacity(num / 100);
-                                        }, style: { maxWidth: "30px" } })))))),
+                                        React.createElement("input", { id: "app-opacity", type: "text", value: Math.floor(opacity * 100), onChange: (e) => {
+                                                const num = +e.target.value;
+                                                if (isNaN(num)) {
+                                                    return;
+                                                }
+                                                if (num < 0 || num > 100) {
+                                                    return;
+                                                }
+                                                setOpacity(num / 100);
+                                            }, style: { maxWidth: "30px" } }))))))),
                 React.createElement(Accordion, { id: "window-behavior", label: "Window behavior", summary: "Specify how this window will behave with respect to other windows in the workspace." },
                     React.createElement("div", { className: "app-edit-field" },
                         React.createElement("table", { role: "presentation", className: "accordion-edit-block" },
@@ -398,19 +409,19 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
                                         " Minimize"),
                                     React.createElement("td", null,
                                         React.createElement("label", null,
-                                            React.createElement("input", { type: "radio", checked: allowMinimize && !hideMinimize, onChange: () => {
+                                            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", checked: allowMinimize && hideMinimize, onChange: () => {
+                                            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", checked: !allowMinimize, onChange: () => {
+                                            React.createElement("input", { type: "radio", name: "minimize", checked: !allowMinimize, onChange: () => {
                                                     setAllowMinimize(false);
                                                     setHideMinimize(true);
                                                 } }),
@@ -421,19 +432,19 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
                                         " Maximize"),
                                     React.createElement("td", null,
                                         React.createElement("label", null,
-                                            React.createElement("input", { type: "radio", checked: allowMaximize && !hideMaximize, onChange: () => {
+                                            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", checked: allowMaximize && hideMaximize, onChange: () => {
+                                            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", checked: !allowMaximize, onChange: () => {
+                                            React.createElement("input", { type: "radio", name: "maximize", checked: !allowMaximize, onChange: () => {
                                                     setAllowMaximize(false);
                                                     setHideMaximize(true);
                                                 } }),
@@ -444,12 +455,12 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
                                         " Close"),
                                     React.createElement("td", null,
                                         React.createElement("label", null,
-                                            React.createElement("input", { type: "radio", checked: !hideClose, onChange: () => {
+                                            React.createElement("input", { type: "radio", name: "close", checked: !hideClose, onChange: () => {
                                                     setHideClose(false);
                                                 } }),
                                             "Enable"),
                                         React.createElement("label", null,
-                                            React.createElement("input", { type: "radio", checked: hideClose, onChange: () => {
+                                            React.createElement("input", { type: "radio", name: "close", checked: hideClose, onChange: () => {
                                                     setHideClose(true);
                                                 } }),
                                             "Hide from titlebar"))))))),
@@ -465,12 +476,12 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
                                     React.createElement("td", { className: "content-col" },
                                         React.createElement("fieldset", { className: "interop-connection-fieldset" },
                                             React.createElement("div", { className: "app-size-field" },
-                                                React.createElement("input", { className: "app-size-input", type: "radio", id: "interop-connection-auto", value: "auto", checked: autoConnect, onChange: () => {
+                                                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", id: "interop-connection-fdc3", value: "fdc3", checked: !autoConnect, onChange: () => {
+                                                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")))),
@@ -513,19 +524,19 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
                                     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"))),
                                 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;
@@ -554,13 +565,6 @@ 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."))),
-                                currentAppType === "web" && (React.createElement("tr", null,
-                                    React.createElement("td", null,
-                                        React.createElement(Checkbox, { label: "Enable gRPC", checked: grpc, onClick: () => {
-                                                setGrpc(!grpc);
-                                            } })),
-                                    React.createElement("td", null,
-                                        React.createElement(Tooltip, { type: "info" }, "Enable remote procedure calls.")))),
                                 React.createElement("tr", null,
                                     React.createElement("td", null,
                                         React.createElement(Checkbox, { label: "Persist across workspaces", checked: isEvergreen, onClick: () => {
@@ -581,13 +585,13 @@ export const AppEditPage = ({ startingDisplayName = "", startingAppType = "web",
                                     React.createElement("td", null,
                                         React.createElement(Tooltip, { type: "info" }, "Apps are not added to the workspace unless they were opened from the Launcher menu or the resolver. Specify whether you want this app added to the workspace if it\u2019s launched in any other way, such as by a user or another app."))),
                                 currentAppType === "web" ? (React.createElement("tr", null,
-                                    React.createElement("td", null,
+                                    React.createElement("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" }, "Normally, the app will be launched from its default URL. If a user navigated elsewhere, you can specify that you want to preserve that new URL instead.")))) : (React.createElement("tr", null,
-                                    React.createElement("td", null,
+                                    React.createElement("td", { id: "persist-path" },
                                         React.createElement(Checkbox, { label: "Persist the location", checked: persistPath, onClick: () => {
                                                 setPersistPath(!persistPath);
                                             } })),