@finsemble/finsemble-ui 10.0.0-beta.3 → 10.0.0-iocd.2

package/react/components/userPreferences/components/content/Workspaces.js

@@ -1,55 +1,26 @@
 import React from "react";
-import { WorkspaceManagementMenuStore, UserPreferencesStore } from "../../stores/UserPreferencesStore";
-import { FinsembleDnDContext } from "../../../legacyControls/FinsembleDnDContext";
-import { FinsembleDraggable } from "../../../legacyControls/FinsembleDraggable";
-import Checkbox from "../Checkbox";
 import async from "async";
-class WorkspaceEditor extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            value: props.value || "",
-            finished: false,
-        };
-        this.onKeyDown = this.onKeyDown.bind(this);
-        this.onChange = this.onChange.bind(this);
-        this.onBlur = this.onBlur.bind(this);
-        this.onFocus = this.onFocus.bind(this);
-    }
-    onKeyDown(e) {
-        if (e.key === "Escape") {
-            this.setState({ finished: true }, () => {
-                this.props.cancelHandler();
-            });
-        }
-        else if (e.key === "Enter") {
-            function finish(val) {
-                this.props.saveHandler(val);
-            }
-            this.setState({ finished: true }, finish.bind(this, e.target.value));
-        }
-    }
-    onChange(e) {
-        this.setState({
-            value: e.target.value,
-        });
-    }
-    onFocus(e) {
-        e.target.select();
-    }
-    onBlur() {
-        function finish(val) {
-            this.props.saveHandler(val);
-        }
-        this.setState({ finished: true }, finish.bind(this, this.state.value));
-    }
-    render() {
-        return (React.createElement("input", { onFocus: this.onFocus, onBlur: this.onBlur, autoFocus: true, value: this.state.value, className: "workspace-editor", onChange: this.onChange, onKeyDown: this.onKeyDown }));
-    }
-}
+import { camelCase } from "../../../../../common/util";
+import { Actions as WorkspaceManagementMenuActions } from "../../../toolbar/workspaceManagementMenu/stores/workspaceManagementMenuStore";
+import { WorkspaceManagementMenuStore } from "../../stores/UserPreferencesStore";
+import { Checkbox } from "../../../common/Checkbox";
+import { WorkspaceButton } from "../workspaces/WorkspaceButton";
+import WorkspaceComponents from "../workspaces/WorkspaceComponents";
+import WorkspaceItemList from "../workspaces/WorkspaceItemList";
+import { FEAGlobals } from "../../../../../common/Globals";
+import { WORKSPACE } from "../../../../../common/constants";
+const WORKSPACE_PREFERENCES = {
+    PERMANENT_WORKSPACES: "finsemble.servicesConfig.workspace.permanentWorkspaces",
+    PROMPT_USER_ON_DIRTY_WORKSPACE: "finsemble.servicesConfig.workspace.promptUserOnDirtyWorkspace",
+    DISCARD_UNSAVED_CHANGES: "finsemble.servicesConfig.workspace.discardUnsavedChanges",
+    INITIAL_WORKSPACE_PREFERENCE: "finsemble.initialWorkspace",
+};
 export default class Workspaces extends React.Component {
     constructor(props) {
+        var _a, _b, _c;
         super(props);
+        // variable to save the WORKSPACE.WORKSPACE_UPDATED subscriber
+        this.workspaceUpdatedSubscriber = { subscribeID: "", topic: "" };
         this.state = {
             adding: false,
             editing: false,
@@ -59,60 +30,90 @@ export default class Workspaces extends React.Component {
             templateName: "",
             workspaceBeingEdited: "",
             focusedWorkspaceComponentList: [],
-            initialAlwaysOnTop: finsembleWindow.windowOptions.alwaysOnTop,
-            alwaysOnTop: finsembleWindow.windowOptions.alwaysOnTop,
+            initialAlwaysOnTop: (_a = FEAGlobals.finsembleWindow.windowOptions) === null || _a === void 0 ? void 0 : _a.alwaysOnTop,
+            alwaysOnTop: (_b = FEAGlobals.finsembleWindow.windowOptions) === null || _b === void 0 ? void 0 : _b.alwaysOnTop,
+            promptUserOnDirtyWorkspace: true,
+            discardUnsavedChanges: false,
+            permanentWorkspaces: [],
+            activeWorkspace: ((_c = FEAGlobals.FSBL.Clients.WorkspaceClient.activeWorkspace) === null || _c === void 0 ? void 0 : _c.name) || "",
         };
         this.bindCorrectContext();
         this.addListeners();
     }
     resetState() {
+        var _a;
         this.setState({
             adding: false,
             editing: false,
             focusedWorkspace: "",
             templateName: "",
             workspaceBeingEdited: "",
+            activeWorkspace: ((_a = FEAGlobals.FSBL.Clients.WorkspaceClient.activeWorkspace) === null || _a === void 0 ? void 0 : _a.name) || "",
         });
     }
     bindCorrectContext() {
-        let methods = [
-            "deleteWorkspace",
-            "addListeners",
-            "setWorkspaceList",
-            "onDragEnd",
-            "startEditingWorkspace",
-            "renameWorkspace",
-            "cancelEdit",
-            "setWorkspaceToLoadOnStart",
-            "setPreferences",
-            "exportWorkspace",
-            "handleButtonClicks",
-            "getFocusedWorkspaceComponentList",
-            "changePreferencesAlwaysOnTop",
-            "openFileDialog",
-            "preferencesFocused",
-        ];
-        methods.forEach((method) => {
-            this[method] = this[method].bind(this);
-        });
-        window.importWorkspace = this.importWorkspace.bind(this);
+        this.deleteWorkspace = this.deleteWorkspace.bind(this);
+        this.addListeners = this.addListeners.bind(this);
+        this.setWorkspaceList = this.setWorkspaceList.bind(this);
+        this.onDragEnd = this.onDragEnd.bind(this);
+        this.startEditingWorkspace = this.startEditingWorkspace.bind(this);
+        this.renameWorkspace = this.renameWorkspace.bind(this);
+        this.cancelEdit = this.cancelEdit.bind(this);
+        this.setWorkspaceToLoadOnStart = this.setWorkspaceToLoadOnStart.bind(this);
+        this.setUIPreferencesState = this.setUIPreferencesState.bind(this);
+        this.exportWorkspace = this.exportWorkspace.bind(this);
+        this.handleButtonClicks = this.handleButtonClicks.bind(this);
+        this.getFocusedWorkspaceComponentList = this.getFocusedWorkspaceComponentList.bind(this);
+        this.changePreferencesAlwaysOnTop = this.changePreferencesAlwaysOnTop.bind(this);
+        this.openFileDialog = this.openFileDialog.bind(this);
+        this.preferencesFocused = this.preferencesFocused.bind(this);
+        this.setFocusedWorkspace = this.setFocusedWorkspace.bind(this);
+        this.toggleDiscardUnsavedChanges = this.toggleDiscardUnsavedChanges.bind(this);
+        this.togglePromptUserOnDirtyWorkspace = this.togglePromptUserOnDirtyWorkspace.bind(this);
+        this.setPermanentWorkspaces = this.setPermanentWorkspaces.bind(this);
     }
     setWorkspaceList(err, data) {
-        console.log("Set workspacelist", data);
         if (!data)
             return;
         this.setState({
             workspaceList: data.value,
         });
     }
+    setPermanentWorkspaces(err, config) {
+        FEAGlobals.FSBL.Clients.Logger.system.log("Workspaces new permanentWorkspaces config", config);
+        const { permanentWorkspaces } = config.value.workspace;
+        if (permanentWorkspaces && Array.isArray(permanentWorkspaces)) {
+            this.setState({
+                permanentWorkspaces: permanentWorkspaces,
+            });
+        }
+    }
     addListeners() {
-        UserPreferencesStore.addListener({ field: "WorkspaceList" }, this.setWorkspaceList);
+        this.props.addListener({ field: "WorkspaceList" }, this.setWorkspaceList);
+        this.props.addListener({ field: "preferences" }, this.setUIPreferencesState);
+        FEAGlobals.FSBL.Clients.WorkspaceClient.addEventListener("save-complete", this.getFocusedWorkspaceComponentList);
+        // Configuration listeners to update the WSM
+        FEAGlobals.FSBL.Clients.ConfigClient.addListener({ field: WORKSPACE_PREFERENCES.PERMANENT_WORKSPACES }, this.setPermanentWorkspaces);
+        // updates the active workspace
+        this.workspaceUpdatedSubscriber = FEAGlobals.FSBL.Clients.RouterClient.subscribe(WORKSPACE.WORKSPACE_UPDATED, (err, response) => {
+            this.setState({
+                activeWorkspace: response.data.activeWorkspace,
+            });
+        });
     }
+    /**
+     * Sets the windowOptions.alwaysOnTop to the value supplied. The preferences component should
+     * not be always on top when a file dialog is open.
+     * @param {boolean} alwaysOnTop The value to set FEAGlobals.finsembleWindow.options.alwaysOnTop
+     */
     changePreferencesAlwaysOnTop(alwaysOnTop) {
-        if (this.state.initialAlwaysOnTop && FSBL.System.container === "Electron") {
-            FSBL.Clients.WindowClient.setAlwaysOnTop(alwaysOnTop, () => {
+        // The initialAlwaysOnTop check is to prevent making a component be alwaysOnTop when the
+        // client may have set it to alwaysOnTop:false in the config. If that's the case, it should
+        // never set its alwaysOnTop to true and should always remain unchanged
+        if (this.state.initialAlwaysOnTop) {
+            FEAGlobals.FSBL.Clients.WindowClient.setAlwaysOnTop(alwaysOnTop, () => {
                 this.setState({
-                    alwaysOnTop: alwaysOnTop,
+                    alwaysOnTop,
                 });
             });
         }
@@ -125,21 +126,24 @@ export default class Workspaces extends React.Component {
         this.setState({
             workspaceList: workspaces,
         });
-        WorkspaceManagementMenuStore.Dispatcher.dispatch({
+        WorkspaceManagementMenuStore === null || WorkspaceManagementMenuStore === void 0 ? void 0 : WorkspaceManagementMenuStore.Dispatcher.dispatch({
             actionType: "reorderWorkspace",
             data: { oldIndex, newIndex },
         });
     }
+    // returns all the component types of a template definition to display to user for additional info. If multiple components with same type, then instead of listing each
+    // individually, only one entry will be returned with the count in parentheses.
     getComponentTypes(templateObject) {
-        FSBL.Clients.Logger.system.debug("getComponentTypes templateObject", templateObject);
-        var componentType;
-        var componentMap = {};
-        var annotatedComponentList = [];
+        FEAGlobals.FSBL.Clients.Logger.system.debug("getComponentTypes templateObject", templateObject);
+        let componentType;
+        let componentMap = {};
+        let annotatedComponentList = [];
         for (let i = 0; i < templateObject.windows.length; i++) {
-            let windowData = templateObject.windowData[i];
-            FSBL.Clients.Logger.system.debug("getComponentTypes loop", windowData);
+            const windowData = templateObject.windowData[i];
+            FEAGlobals.FSBL.Clients.Logger.system.debug("getComponentTypes loop", windowData);
             componentType = "Unknown Component";
             if (windowData) {
+                // current assimilation doesn't fill in windowData, so in this case use "Unknown Component" for component type
                 componentType = windowData.componentType || windowData.customData.component.type;
             }
             else {
@@ -152,7 +156,7 @@ export default class Workspaces extends React.Component {
                 componentMap[componentType]++;
             }
         }
-        var componentTypes = Object.keys(componentMap);
+        const componentTypes = Object.keys(componentMap);
         for (let i = 0; i < componentTypes.length; i++) {
             let annotatedName = componentTypes[i];
             let identicalCount = componentMap[componentTypes[i]];
@@ -161,15 +165,13 @@ export default class Workspaces extends React.Component {
             }
             annotatedComponentList.push(annotatedName);
         }
-        FSBL.Clients.Logger.system.debug("getComponentTypes", annotatedComponentList);
+        FEAGlobals.FSBL.Clients.Logger.system.debug("getComponentTypes", annotatedComponentList);
         return annotatedComponentList;
     }
     setFocusedWorkspace(workspace) {
         this.setState({
             focusedWorkspace: workspace,
-        }, () => {
-            this.getFocusedWorkspaceComponentList();
-        });
+        }, () => this.getFocusedWorkspaceComponentList());
     }
     cancelEdit() {
         if (this.state.adding) {
@@ -193,15 +195,25 @@ export default class Workspaces extends React.Component {
         }
         if (newName === oldName || newName.trim() === "")
             return this.cancelEdit();
+        let newNameCamelCase = camelCase(newName);
+        if (this.state.workspaceList.some((workspace) => camelCase(workspace.name) === newNameCamelCase)) {
+            let notification = new FEAGlobals.FSBL.Clients.NotificationClient.Notification();
+            notification.source = "Finsemble";
+            notification.title = "Workspace renaming";
+            notification.details = `Sorry, unable to rename workspace to "${newName}". Please use another name.`;
+            FEAGlobals.FSBL.Clients.NotificationClient.notify(notification);
+            return this.cancelEdit();
+        }
         let updatedWorkspaceList = this.state.workspaceList;
         let index = updatedWorkspaceList.findIndex((el) => el.name === oldName);
+        // Set state locally so that the text doesn't change when the input field unmounts.
         if (index !== -1) {
             updatedWorkspaceList[index].name = newName;
             this.setState({
                 workspaceList: updatedWorkspaceList,
             });
         }
-        WorkspaceManagementMenuStore.Dispatcher.dispatch({
+        WorkspaceManagementMenuStore === null || WorkspaceManagementMenuStore === void 0 ? void 0 : WorkspaceManagementMenuStore.Dispatcher.dispatch({
             actionType: "renameWorkspace",
             data: {
                 oldName: oldName,
@@ -222,6 +234,8 @@ export default class Workspaces extends React.Component {
         }
     }
     startEditingWorkspace(e, workspaceName = this.state.focusedWorkspace) {
+        // without preventing this event from reaching the finsemble draggable,
+        // the editor will lose focus and you won't be able to rename your workspaces
         e.stopPropagation();
         this.setState({
             editing: true,
@@ -230,7 +244,7 @@ export default class Workspaces extends React.Component {
         });
     }
     startExportingTemplate() {
-        WorkspaceManagementMenuStore.Dispatcher.dispatch({
+        WorkspaceManagementMenuStore === null || WorkspaceManagementMenuStore === void 0 ? void 0 : WorkspaceManagementMenuStore.Dispatcher.dispatch({
             actionType: "exportWorkspace",
             data: {
                 name: this.state.focusedWorkspace,
@@ -238,7 +252,7 @@ export default class Workspaces extends React.Component {
         });
     }
     startImportingTemplate() {
-        WorkspaceManagementMenuStore.Dispatcher.dispatch({
+        WorkspaceManagementMenuStore === null || WorkspaceManagementMenuStore === void 0 ? void 0 : WorkspaceManagementMenuStore.Dispatcher.dispatch({
             actionType: "importTemplate",
             data: {
                 name: this.state.templateName,
@@ -246,141 +260,205 @@ export default class Workspaces extends React.Component {
         });
     }
     deleteWorkspace(workspaceName = this.state.focusedWorkspace) {
-        let workspaceToRemove = workspaceName;
         this.resetState();
-        WorkspaceManagementMenuStore.Dispatcher.dispatch({
-            actionType: "removeWorkspace",
-            data: {
-                name: workspaceToRemove,
-                hideModalOnClose: false,
-            },
-        });
+        const removeWorkspaceFromList = (wasDeleted) => {
+            if (wasDeleted) {
+                let workspaceListCopy = [...this.state.workspaceList];
+                workspaceListCopy = workspaceListCopy.filter((workspace) => workspace.name !== workspaceName);
+                // If we just removed the workspace configured to be loaded at startup
+                // we need to unset initial workspace preference
+                if (workspaceName === this.state.workspaceToLoadOnStart) {
+                    this.setState({ workspaceToLoadOnStart: null }, () => FEAGlobals.FSBL.Clients.ConfigClient.unsetPreference({
+                        field: WORKSPACE_PREFERENCES.INITIAL_WORKSPACE_PREFERENCE,
+                    }));
+                }
+                this.setState({ workspaceList: workspaceListCopy });
+            }
+        };
+        const data = {
+            name: workspaceName,
+            hideModalOnClose: false,
+        };
+        WorkspaceManagementMenuActions.removeWorkspace(data, removeWorkspaceFromList);
     }
-    setPreferences(err, data) {
-        if (!data && !data.value)
+    setUIPreferencesState(err, data) {
+        var _a;
+        const { value } = data || {};
+        if (!value)
             return;
-        console.log("Set preferences", data.value);
         this.setState({
-            workspaceToLoadOnStart: data.value["finsemble.initialWorkspace"],
-            focusedWorkspace: data.value["finsemble.initialWorkspace"],
+            workspaceToLoadOnStart: data.value[WORKSPACE_PREFERENCES.INITIAL_WORKSPACE_PREFERENCE],
+            focusedWorkspace: data.value[WORKSPACE_PREFERENCES.INITIAL_WORKSPACE_PREFERENCE] || this.state.workspaceList[0].name,
+            promptUserOnDirtyWorkspace: data.value[WORKSPACE_PREFERENCES.PROMPT_USER_ON_DIRTY_WORKSPACE],
+            discardUnsavedChanges: (_a = data.value[WORKSPACE_PREFERENCES.DISCARD_UNSAVED_CHANGES]) !== null && _a !== void 0 ? _a : false,
         });
     }
     componentDidMount() {
-        UserPreferencesStore.addListener({ field: "preferences" }, this.setPreferences);
-        FSBL.Clients.ConfigClient.getPreferences((err, data) => {
-            this.setPreferences(err, { value: data });
+        // load preferences values from config and set component state on mount
+        FEAGlobals.FSBL.Clients.ConfigClient.getMultiple([
+            WORKSPACE_PREFERENCES.PROMPT_USER_ON_DIRTY_WORKSPACE.split("."),
+            WORKSPACE_PREFERENCES.DISCARD_UNSAVED_CHANGES.split("."),
+            WORKSPACE_PREFERENCES.INITIAL_WORKSPACE_PREFERENCE.split("."),
+            WORKSPACE_PREFERENCES.PERMANENT_WORKSPACES.split("."),
+        ], (err, values) => {
+            var _a, _b, _c, _d;
+            if (err) {
+                FEAGlobals.FSBL.Clients.Logger.system.info("componentDidMount.getValues error", err);
+            }
+            if (values) {
+                this.setState({
+                    workspaceToLoadOnStart: values[WORKSPACE_PREFERENCES.INITIAL_WORKSPACE_PREFERENCE],
+                    focusedWorkspace: (_a = values[WORKSPACE_PREFERENCES.INITIAL_WORKSPACE_PREFERENCE]) !== null && _a !== void 0 ? _a : (_b = FEAGlobals.FSBL.Clients.WorkspaceClient.activeWorkspace) === null || _b === void 0 ? void 0 : _b.name,
+                    promptUserOnDirtyWorkspace: values[WORKSPACE_PREFERENCES.PROMPT_USER_ON_DIRTY_WORKSPACE],
+                    discardUnsavedChanges: (_c = values[WORKSPACE_PREFERENCES.DISCARD_UNSAVED_CHANGES]) !== null && _c !== void 0 ? _c : false,
+                    permanentWorkspaces: (_d = values[WORKSPACE_PREFERENCES.PERMANENT_WORKSPACES]) !== null && _d !== void 0 ? _d : [],
+                }, () => this.getFocusedWorkspaceComponentList());
+            }
         });
-        UserPreferencesStore.getValue({ field: "WorkspaceList" }, (err, data) => {
+        this.props.getValue(["WorkspaceList"], (err, data) => {
             if (data && data.length) {
                 this.setState({
                     workspaceList: data,
+                    // set the first workspace from list as focused
+                    focusedWorkspace: data[0].name,
                 });
             }
         });
     }
     componentWillUnmount() {
-        UserPreferencesStore.removeListener({ field: "preferences" }, this.setPreferences);
+        this.props.removeListener({ field: "preferences" }, this.setUIPreferencesState);
+        FEAGlobals.FSBL.Clients.ConfigClient.removeListener({ field: WORKSPACE_PREFERENCES.PERMANENT_WORKSPACES }, this.setPermanentWorkspaces);
+        FEAGlobals.FSBL.Clients.RouterClient.unsubscribe(this.workspaceUpdatedSubscriber);
+    }
+    setPreference(field, value, cb) {
+        FEAGlobals.FSBL.Clients.ConfigClient.setPreference({
+            field,
+            value,
+        }, (err) => {
+            if (err) {
+                console.error(err);
+            }
+            if (cb) {
+                cb();
+            }
+        });
     }
-    setWorkspaceToLoadOnStart(cb = Function.prototype) {
-        let self = this;
+    setWorkspaceToLoadOnStart(eventOrCb) {
         if (!this.state.focusedWorkspace)
             return;
-        function setPreference() {
-            FSBL.Clients.ConfigClient.setPreference({
-                field: "finsemble.initialWorkspace",
-                value: self.state.workspaceToLoadOnStart,
-            }, (err, data) => {
-                if (err) {
-                    console.error(err);
-                }
-                if (typeof cb === "function") {
-                    cb();
-                }
-            });
-        }
         if (this.state.focusedWorkspace === this.state.workspaceToLoadOnStart) {
-            this.setState({ workspaceToLoadOnStart: null }, setPreference);
+            this.setState({ workspaceToLoadOnStart: null }, () => this.setPreference(WORKSPACE_PREFERENCES.INITIAL_WORKSPACE_PREFERENCE, null));
         }
         else {
-            self.setState({
-                workspaceToLoadOnStart: self.state.focusedWorkspace,
-            }, setPreference);
+            this.setState({
+                workspaceToLoadOnStart: this.state.focusedWorkspace,
+            }, () => this.setPreference(WORKSPACE_PREFERENCES.INITIAL_WORKSPACE_PREFERENCE, this.state.focusedWorkspace));
+        }
+        if (typeof eventOrCb === "function") {
+            eventOrCb();
         }
     }
     openFileDialog() {
+        // Set alwaysOnTop to false and add an event listener on the window. When focus is regained
+        // then reset always on top
         this.changePreferencesAlwaysOnTop(false);
-        finsembleWindow.addEventListener("focused", this.preferencesFocused);
+        FEAGlobals.finsembleWindow.addEventListener("focused", this.preferencesFocused);
         let inputElement = document.getElementById("file-input");
-        inputElement.addEventListener("change", this.importWorkspace, false);
-        inputElement.click();
-    }
+        inputElement === null || inputElement === void 0 ? void 0 : inputElement.addEventListener("change", this.importWorkspace, false);
+        inputElement === null || inputElement === void 0 ? void 0 : inputElement.click();
+    }
+    /**
+     * If the event is being listened to, when the preferences component is focused
+     * it will set always on top to true, and remove the event listener
+     *
+     * This is to handle bringing alwaysOnTop back to true when file dialogs are closed
+     * without changes (also handles bringing back to front after exporting)
+     */
     preferencesFocused() {
-        finsembleWindow.removeEventListener("focused", this.preferencesFocused);
+        FEAGlobals.finsembleWindow.removeEventListener("focused", this.preferencesFocused);
         this.changePreferencesAlwaysOnTop(true);
     }
     importWorkspace(evt) {
         let inputElement = document.getElementById("file-input");
-        inputElement.removeEventListener("change", this.importWorkspace);
-        var { files } = evt.target;
+        inputElement === null || inputElement === void 0 ? void 0 : inputElement.removeEventListener("change", this.importWorkspace);
+        const { files } = evt.target; // FileList object
         function loadFile(file, done) {
-            let reader = new FileReader();
+            const reader = new FileReader();
             let fileName = evt.target.value;
+            // When the file info is loaded, we get into here..
             reader.onload = function (e) {
-                fileName = fileName.split("\\");
-                fileName = fileName[fileName.length - 1].replace(".json", "");
-                let workspaceTemplateDefinition = JSON.parse(e.target.result);
-                let templateName = Object.keys(workspaceTemplateDefinition.workspaceTemplates)[0];
-                if (fileName !== templateName) {
-                    workspaceTemplateDefinition.workspaceTemplates[fileName] =
-                        workspaceTemplateDefinition.workspaceTemplates[templateName];
-                    delete workspaceTemplateDefinition.workspaceTemplates[templateName];
-                }
-                workspaceTemplateDefinition.workspaceTemplates[fileName].name = fileName;
-                FSBL.Clients.WorkspaceClient.addWorkspaceDefinition({
-                    workspaceJSONDefinition: workspaceTemplateDefinition.workspaceTemplates,
-                    force: false,
-                }, (err) => {
-                    if (err) {
-                        FSBL.Clients.Logger.info("addWorkspaceTemplateDefinition error", err);
+                var _a;
+                try {
+                    fileName = fileName.split("\\");
+                    fileName = fileName[fileName.length - 1].replace(".json", "");
+                    let workspaceTemplateDefinition = JSON.parse((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.result);
+                    let templateName = Object.keys(workspaceTemplateDefinition.workspaceTemplates)[0];
+                    if (fileName !== templateName) {
+                        // We want the file name to overwrite the name of the workspace that was saved as the template..
+                        workspaceTemplateDefinition.workspaceTemplates[fileName] =
+                            workspaceTemplateDefinition.workspaceTemplates[templateName];
+                        delete workspaceTemplateDefinition.workspaceTemplates[templateName];
                     }
+                    workspaceTemplateDefinition.workspaceTemplates[fileName].name = fileName;
+                    FEAGlobals.FSBL.Clients.WorkspaceClient.import({
+                        workspaceJSONDefinition: workspaceTemplateDefinition.workspaceTemplates,
+                        force: false,
+                    }, (err) => {
+                        if (err) {
+                            FEAGlobals.FSBL.Clients.Logger.system.info("addWorkspaceTemplateDefinition error", err);
+                            FEAGlobals.FSBL.UserNotification.alert("system", "ALWAYS", "FSBL-Workspace-Import-Error", "The workspace can't be imported and it could be corrupt. Check the Central Logger for any errors.");
+                        }
+                        done();
+                    });
+                }
+                catch (error) {
+                    FEAGlobals.FSBL.Clients.Logger.system.error(error);
+                    FEAGlobals.FSBL.UserNotification.alert("system", "ALWAYS", "FSBL-Workspace-Import-Error", "The workspace can't be imported and it could be corrupt. Check the Central Logger for any errors.");
                     done();
-                });
+                }
             };
+            // Read in the image file as a data URL.
             reader.readAsText(file);
         }
         async.each(files, loadFile, () => {
-            inputElement.value = "";
-            FSBL.Clients.Logger.info("Workspaces imported");
+            // Clear out files. so if the user imports the same  file back-to-back, the event will fire.
+            if (inputElement === null || inputElement === void 0 ? void 0 : inputElement.value) {
+                inputElement.value = "";
+            }
+            FEAGlobals.FSBL.Clients.Logger.system.info("Workspaces imported");
         });
     }
     exportWorkspace() {
         if (this.state.focusedWorkspace === "")
             return;
-        var self = this;
-        function doExport() {
-            FSBL.Clients.WorkspaceClient.getWorkspaceDefinition({ workspaceName: self.state.focusedWorkspace }, (err, workspaceDefinition) => {
+        const doExport = () => {
+            FEAGlobals.FSBL.Clients.WorkspaceClient.export({ workspaceName: this.state.focusedWorkspace }, (err, workspaceDefinition) => {
                 if (err) {
-                    FSBL.Clients.Logger.error("getWorkspaceDefinition error", err);
+                    FEAGlobals.FSBL.Clients.Logger.system.error("export error", err);
                 }
                 else {
-                    FSBL.ConfigUtils.promptAndSaveJSONToLocalFile(self.state.focusedWorkspace, {
+                    // We're saving using a routine initially created for templates. The outcome is the same and it probably should have just been "Save to file". This bool is to allow it to save.
+                    FEAGlobals.FSBL.ConfigUtils.promptAndSaveJSONToLocalFile(this.state.focusedWorkspace, {
                         workspaceTemplates: workspaceDefinition,
                     });
                 }
             });
-        }
-        self.changePreferencesAlwaysOnTop(false);
-        finsembleWindow.addEventListener("focused", this.preferencesFocused);
-        FSBL.Clients.ConfigClient.getValue({
-            field: "finsemble.preferences.workspaceService.promptUserOnDirtyWorkspace",
-        }, (err, data) => {
+        };
+        // Set alwaysOnTop to false and add an event listener on the window. When focus is regained
+        // then reset always on top
+        this.changePreferencesAlwaysOnTop(false);
+        FEAGlobals.finsembleWindow.addEventListener("focused", this.preferencesFocused);
+        // If we're autosaving, autosave, then export.
+        FEAGlobals.FSBL.Clients.ConfigClient.get(["finsemble", "preferences", "workspaceService", "promptUserOnDirtyWorkspace"], (err, data) => {
+            var _a, _b, _c, _d;
+            // default to false.
             let PROMPT_ON_SAVE = data === null ? false : data;
             if (!PROMPT_ON_SAVE) {
-                let activeName = FSBL.Clients.WorkspaceClient.activeWorkspace.name;
-                return FSBL.Clients.WorkspaceClient.saveAs({
+                let activeName = ((_d = (_c = (_b = (_a = FEAGlobals.FSBL) === null || _a === void 0 ? void 0 : _a.Clients) === null || _b === void 0 ? void 0 : _b.WorkspaceClient) === null || _c === void 0 ? void 0 : _c.activeWorkspace) === null || _d === void 0 ? void 0 : _d.name) || "";
+                return FEAGlobals.FSBL.Clients.WorkspaceClient.saveAs({
                     name: activeName,
                     force: true,
-                }, (err, response) => {
+                }, () => {
                     doExport();
                 });
             }
@@ -392,25 +470,45 @@ export default class Workspaces extends React.Component {
             e.preventDefault();
         }
     }
-    getFocusedWorkspaceComponentList() {
-        let { workspaceList, focusedWorkspace } = this.state;
+    async getFocusedWorkspaceComponentList() {
+        let { focusedWorkspace } = this.state;
         if (focusedWorkspace === "")
             return [];
-        let workspace = workspaceList.filter((wSpace) => wSpace.name === focusedWorkspace)[0];
-        FSBL.Clients.WorkspaceClient.getWorkspaceDefinition({ workspaceName: focusedWorkspace }, (err, workspaceDefinition) => {
-            let componentTypes = this.getComponentTypes(workspaceDefinition[focusedWorkspace]);
-            this.setState({
-                focusedWorkspaceComponentList: componentTypes,
-            });
+        const workspaceDefinition = (await FEAGlobals.FSBL.Clients.WorkspaceClient.export({ workspaceName: focusedWorkspace }, () => { }));
+        if (workspaceDefinition) {
+            const workspaceComponents = this.getComponentTypes(workspaceDefinition[focusedWorkspace]);
+            if (workspaceComponents) {
+                this.setState({
+                    focusedWorkspaceComponentList: workspaceComponents,
+                });
+            }
+        }
+    }
+    toggleDiscardUnsavedChanges() {
+        const newValue = !this.state.discardUnsavedChanges;
+        this.setState({
+            discardUnsavedChanges: newValue,
+        }, () => this.setPreference(WORKSPACE_PREFERENCES.DISCARD_UNSAVED_CHANGES, newValue));
+    }
+    togglePromptUserOnDirtyWorkspace() {
+        const newValue = !this.state.promptUserOnDirtyWorkspace;
+        this.setState({
+            promptUserOnDirtyWorkspace: newValue,
+            discardUnsavedChanges: newValue ? false : this.state.discardUnsavedChanges,
+        }, () => {
+            this.setPreference(WORKSPACE_PREFERENCES.PROMPT_USER_ON_DIRTY_WORKSPACE, newValue);
+            if (newValue) {
+                this.setPreference(WORKSPACE_PREFERENCES.DISCARD_UNSAVED_CHANGES, false);
+            }
         });
     }
     render() {
-        let deleteButtonClasses = "individual-workspace-action delete-workspace", exportButtonClasses = "action-button workspace-action-button", renameButtonClasses = "individual-workspace-action", addButtonClasses = "positive-action-button action-button workspace-action-button", importButtonClasses = "action-button workspace-action-button", allowAdd = true, allowDelete = true, allowExport = true, allowRename = true, allowImport = true, deleteTooltip = "Delete";
-        if (this.state.focusedWorkspace === FSBL.Clients.WorkspaceClient.activeWorkspace.name) {
+        var _a, _b, _c, _d;
+        let deleteButtonClasses = "individual-workspace-action delete-workspace", renameButtonClasses = "individual-workspace-action", allowDelete = true, allowExport = true, allowRename = true, allowImport = true, deleteTooltip = "Delete";
+        if (this.state.focusedWorkspace === ((_d = (_c = (_b = (_a = FEAGlobals.FSBL) === null || _a === void 0 ? void 0 : _a.Clients) === null || _b === void 0 ? void 0 : _b.WorkspaceClient) === null || _c === void 0 ? void 0 : _c.activeWorkspace) === null || _d === void 0 ? void 0 : _d.name)) {
             deleteButtonClasses = `${deleteButtonClasses} disabled-individual-workspace-action`;
         }
         if (this.state.focusedWorkspace === "") {
-            exportButtonClasses = `${exportButtonClasses} disabled-button`;
             renameButtonClasses = `${renameButtonClasses} disabled-individual-workspace-action`;
             deleteButtonClasses = `${deleteButtonClasses} disabled-individual-workspace-action`;
             deleteTooltip = "No workspace selected";
@@ -420,74 +518,30 @@ export default class Workspaces extends React.Component {
         }
         if (this.state.adding || this.state.editing) {
             renameButtonClasses = `${renameButtonClasses} disabled-button`;
-            addButtonClasses = `${addButtonClasses} disabled-button`;
-            exportButtonClasses = `${exportButtonClasses} disabled-button`;
-            importButtonClasses = `${importButtonClasses} disabled-button`;
             deleteButtonClasses = `${deleteButtonClasses} disabled-button`;
-            allowAdd = false;
             allowDelete = false;
             allowExport = false;
             allowRename = false;
             allowImport = false;
         }
-        let addTooltip = "Add new workspace", importTooltip = "Import workspace from file", exportTooltip = allowExport ? "Export selected workspace" : "No workspace selected", renameTooltip = allowRename ? "Rename" : "Cannot Edit";
-        return (React.createElement("div", null,
+        let importTooltip = "Import workspace from file", exportTooltip = allowExport ? "Export selected workspace" : "No workspace selected", renameTooltip = allowRename ? "Rename" : "Cannot Edit";
+        return (React.createElement("div", { style: { paddingLeft: 10 } },
             React.createElement("input", { style: { display: "none" }, type: "file", id: "file-input" }),
             React.createElement("div", { className: "complex-menu-content-row" },
                 React.createElement("div", { className: "workspace-list-header-row" },
                     React.createElement("div", { className: "content-section-header workspace-list-header" })),
                 React.createElement("div", { className: "content-section-wrapper" },
-                    React.createElement("div", { ref: "WorkspaceList", className: "workspace-list" },
-                        React.createElement(FinsembleDnDContext, { onDragEnd: this.onDragEnd }, this.state.workspaceList.map((workspace, i) => {
-                            let baseClass = "workspace-item";
-                            let classNames = baseClass;
-                            if (FSBL.Clients.WorkspaceClient.activeWorkspace.name === workspace.name) {
-                                classNames = `${classNames} active-workspace`;
-                            }
-                            if (this.state.workspaceToLoadOnStart === workspace.name) {
-                                classNames = `${classNames} auto-start-workspace-item`;
-                            }
-                            if (this.state.focusedWorkspace === workspace.name) {
-                                classNames = `${classNames} focused-workspace-item`;
-                                if (i === 0) {
-                                    classNames = `${classNames} no-top-border`;
-                                }
-                                if (this.state.editing || this.state.adding) {
-                                    classNames = `${classNames} workspace-item-editing`;
-                                    return (React.createElement("div", { key: i, className: classNames },
-                                        React.createElement(WorkspaceEditor, { value: workspace.name, saveHandler: this.state.editing ? this.renameWorkspace : this.addWorkspace, cancelHandler: this.cancelEdit })));
-                                }
-                            }
-                            return (React.createElement(FinsembleDraggable, { onClick: () => this.setFocusedWorkspace(workspace.name), wrapperClass: classNames, draggableId: workspace.name, key: i, index: i },
-                                React.createElement("div", { className: "ff-adp-hamburger" }),
-                                React.createElement("div", { className: "workspace-name", title: workspace.name }, workspace.name),
-                                React.createElement("div", { className: "individual-workspace-actions" },
-                                    workspace.name !== FSBL.Clients.WorkspaceClient.activeWorkspace.name && (React.createElement("div", { title: renameTooltip, className: renameButtonClasses, onMouseDown: this.handleButtonClicks, onClick: allowRename
-                                            ? (e) => {
-                                                this.startEditingWorkspace(e, workspace.name);
-                                            }
-                                            : Function.prototype },
-                                        React.createElement("i", { className: "ff-adp-edit" }))),
-                                    workspace.name !== FSBL.Clients.WorkspaceClient.activeWorkspace.name && (React.createElement("div", { title: deleteTooltip, className: deleteButtonClasses, onMouseDown: this.handleButtonClicks, onClick: allowDelete
-                                            ? () => {
-                                                this.deleteWorkspace(workspace.name);
-                                            }
-                                            : Function.prototype },
-                                        React.createElement("i", { className: "ff-adp-trash-outline" }))))));
-                        }))),
+                    React.createElement(WorkspaceItemList, { onDragEnd: this.onDragEnd, workspaceList: this.state.workspaceList, allowDelete: allowDelete, deleteButtonClasses: deleteButtonClasses, deleteTooltip: deleteTooltip, workspaceToLoadOnStart: this.state.workspaceToLoadOnStart, focusedWorkspace: this.state.focusedWorkspace, editing: this.state.editing, adding: this.state.adding, renameWorkspace: this.renameWorkspace, addWorkspace: this.addWorkspace, cancelEdit: this.cancelEdit, setFocusedWorkspace: this.setFocusedWorkspace, renameTooltip: renameTooltip, renameButtonClasses: renameButtonClasses, allowRename: allowRename, handleButtonClicks: this.handleButtonClicks, startEditingWorkspace: this.startEditingWorkspace, deleteWorkspace: this.deleteWorkspace, permanentWorkspaces: this.state.permanentWorkspaces }),
                     React.createElement("div", { className: "workspace-extras" },
-                        React.createElement("div", { className: "workspace-component-list" },
-                            this.state.focusedWorkspaceComponentList.length > 0 &&
-                                this.state.focusedWorkspaceComponentList.map((cmp, i) => (React.createElement("div", { key: i, className: "workspace-component" }, cmp))),
-                            this.state.focusedWorkspaceComponentList.length === 0 && "No components."),
+                        React.createElement(WorkspaceComponents, { focusedWorkspaceComponentList: this.state.focusedWorkspaceComponentList }),
                         React.createElement("div", { className: "workspace-action-buttons" },
-                            React.createElement("div", { title: importTooltip, className: importButtonClasses, onMouseDown: this.handleButtonClicks, onClick: allowImport ? this.openFileDialog : Function.prototype },
-                                React.createElement("i", { className: "workspace-action-button-icon ff-import" }),
-                                React.createElement("div", null, "Import")),
-                            React.createElement("div", { title: exportTooltip, className: exportButtonClasses, onMouseDown: this.handleButtonClicks, onClick: allowExport ? this.exportWorkspace : Function.prototype },
-                                React.createElement("i", { className: "workspace-action-button-icon ff-export" }),
-                                React.createElement("div", null, "Export"))))),
-                React.createElement(Checkbox, { disabled: !this.state.focusedWorkspace, onClick: this.setWorkspaceToLoadOnStart, checked: this.state.focusedWorkspace === this.state.workspaceToLoadOnStart, label: "Load this workspace on startup." }))));
+                            React.createElement(WorkspaceButton, { title: importTooltip, onMouseDown: this.handleButtonClicks, onClick: allowImport ? this.openFileDialog : () => { }, type: "import" }),
+                            React.createElement(WorkspaceButton, { title: exportTooltip, onMouseDown: this.handleButtonClicks, onClick: allowExport ? this.exportWorkspace : () => { }, type: "export" })))),
+                React.createElement(Checkbox, { disabled: !this.state.focusedWorkspace, onClick: this.setWorkspaceToLoadOnStart, checked: !!this.state.focusedWorkspace && this.state.focusedWorkspace === this.state.workspaceToLoadOnStart, label: "Load this workspace on startup" }),
+                React.createElement(React.Fragment, null, "\u00A0"),
+                React.createElement(Checkbox, { onClick: this.togglePromptUserOnDirtyWorkspace, checked: this.state.promptUserOnDirtyWorkspace, label: "Prompt user to save changes on workspace close" }),
+                React.createElement("span", { className: "indent-5px" },
+                    React.createElement(Checkbox, { disabled: this.state.promptUserOnDirtyWorkspace, onClick: this.toggleDiscardUnsavedChanges, checked: this.state.discardUnsavedChanges, label: "Discard unsaved changes" })))));
     }
 }
 //# sourceMappingURL=Workspaces.js.map