@dexteel/mesf-core 4.7.7 → 4.7.9

package/dist/index.esm.js

@@ -35,6 +35,9 @@ import Popover from '@material-ui/core/Popover';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import FolderIcon from '@material-ui/icons/Folder';
 import InsertDriveFileIcon from '@material-ui/icons/InsertDriveFile';
+import CreateIcon from '@material-ui/icons/Create';
+import DeleteIcon from '@material-ui/icons/Delete';
+import LockIcon from '@material-ui/icons/Lock';
 import { ArrowRight, ChevronLeft, ChevronRight } from '@material-ui/icons';
 import { Line } from 'react-chartjs-2';
 import PersonPinCircleIcon from '@material-ui/icons/PersonPinCircle';
@@ -63,7 +66,6 @@ import { MuiPickersUtilsProvider, KeyboardDatePicker, KeyboardTimePicker } from
 import MomentUtils from '@date-io/moment';
 import InputLabel from '@material-ui/core/InputLabel';
 import DialogContentText$1 from '@material-ui/core/DialogContentText';
-import DeleteIcon from '@material-ui/icons/Delete';
 import EditIcon from '@material-ui/icons/Edit';
 import 'ag-grid-enterprise/styles/ag-grid.css';
 import 'ag-grid-enterprise/styles/ag-theme-balham.min.css';
@@ -1329,7 +1331,8 @@ var DialogTitle = withStyles(styles)(function (props) {
 var DialogContent = withStyles(function (theme) { return ({
     root: {
         padding: theme.spacing(2),
-        minWidth: 600
+        minWidth: 600,
+        overflow: 'hidden'
     }
 }); })(DialogContent$1);
 var DialogActions = withStyles(function (theme) { return ({
@@ -10193,6 +10196,21 @@ var upsertView = function (ViewId, ViewName, isPublic) { return __awaiter(void 0
         }
     });
 }); };
+var deleteView = function (ViewId) { return __awaiter(void 0, void 0, void 0, function () {
+    var apiService, parameters, resp;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                apiService = new MESApiService();
+                parameters = [];
+                parameters.push({ name: "ViewId", value: ViewId });
+                return [4 /*yield*/, apiService.callV2("[mssql2022].[IH_100020].[ih].[DeleteView]", parameters)];
+            case 1:
+                resp = _a.sent();
+                return [2 /*return*/, resp];
+        }
+    });
+}); };
 //viewTags
 var getViewTags = function (ViewId) { return __awaiter(void 0, void 0, void 0, function () {
     var apiService, parameters, resp;
@@ -10247,47 +10265,6 @@ var deleteViewTag = function (ViewId, TagId) { return __awaiter(void 0, void 0,
     });
 }); };
 
-var LoadViewModal = function (_a) {
-    var open = _a.open, handleClose = _a.handleClose;
-    var _b = useTrendingContext(), _c = _b.state, views = _c.views, viewSelected = _c.viewSelected, _d = _b.actions; _d.setViews; var setViewTags = _d.setViewTags, setViewSelected = _d.setViewSelected;
-    var _e = useState(false), isLoading = _e[0], setIsLoading = _e[1];
-    var _f = useState(''), error = _f[0], setError = _f[1];
-    var handleSelect = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var viewTagsResp;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!viewSelected) return [3 /*break*/, 2];
-                    setIsLoading(true);
-                    return [4 /*yield*/, getViewTags(viewSelected.ViewId)];
-                case 1:
-                    viewTagsResp = _a.sent();
-                    if (viewTagsResp.ok) {
-                        setViewTags(viewTagsResp.data.tables[0].rows);
-                    }
-                    else {
-                        setError(viewTagsResp.message);
-                    }
-                    setIsLoading(false);
-                    handleClose(true);
-                    _a.label = 2;
-                case 2: return [2 /*return*/];
-            }
-        });
-    }); };
-    return (React__default.createElement("div", null,
-        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Tags' },
-            React__default.createElement(MesfModal.Content, null,
-                React__default.createElement(Grid$1, { container: true },
-                    React__default.createElement(Grid$1, { item: true, md: 12 }, views.length ? (React__default.createElement(Autocomplete, { size: 'small', id: "list-of-views", options: views, getOptionLabel: function (option) { return option.ViewName; }, onChange: function (ev, val) { return setViewSelected(val); }, style: { width: "100%" }, renderInput: function (params) { return React__default.createElement(TextField, __assign({}, params, { label: "Views", variant: "outlined" })); } })) :
-                        (React__default.createElement("div", null, "No tag views detected, please add one"))))),
-            React__default.createElement(MesfModal.Actions, null,
-                React__default.createElement("div", { style: { paddingTop: "1rem" } },
-                    React__default.createElement(Button$1, { variant: 'outlined', style: { marginRight: "1rem" }, color: 'secondary', onClick: function () { return handleClose(false); } }, "Cancel"),
-                    React__default.createElement(ButtonWithLoading, { onClick: handleSelect, variant: 'contained', color: 'primary', isLoading: isLoading, style: { marginRight: "1rem" } }, "Apply")))),
-        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
-};
-
 var useTrendingStyles = makeStyles$1(function (theme) { return ({
     datetimePicker: {
         alignItems: "center",
@@ -10364,26 +10341,261 @@ var useTrendingStyles = makeStyles$1(function (theme) { return ({
             }
         },
         color: 'black'
+    },
+    iconContainer: {
+        display: 'flex',
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+        flex: 1
+    },
+    optionContainer: {
+        display: 'flex',
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+        width: '100%'
+    },
+    optionLabel: {
+        flexGrow: 1
+    },
+    inputCustom: {
+        color: 'rgba(0, 0, 0, 0.87)',
+        cursor: 'text',
+        fontSize: '0.7rem',
+        boxSizing: 'border-box',
+        fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+        fontWeight: 400,
+        lineHeight: 1.1876,
+        letterSpacing: '0.00938em',
+        '& .MuiOutlinedInput-input': {
+            padding: '10px 10px'
+        }
     }
 }); });
 
+var DeleteViewModal = function (_a) {
+    var open = _a.open, handleClose = _a.handleClose, view = _a.view;
+    var _b = useState(false), isLoading = _b[0], setIsLoading = _b[1];
+    var _c = useState(''), error = _c[0], setError = _c[1];
+    var handleSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var resp;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsLoading(true);
+                    if (!!isNil$1(view)) return [3 /*break*/, 2];
+                    return [4 /*yield*/, deleteView(view.ViewId)];
+                case 1:
+                    resp = _a.sent();
+                    if (!resp.ok) {
+                        setError(resp.message);
+                    }
+                    else {
+                        handleClose(true);
+                    }
+                    _a.label = 2;
+                case 2:
+                    setIsLoading(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Delete View' },
+            React__default.createElement(Divider, null),
+            React__default.createElement(MesfModal.Content, null, !isNil$1(view) ?
+                (React__default.createElement(Grid$1, { container: true, spacing: 5, style: { padding: "2rem" } },
+                    React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { padding: "10px", width: "100%" } },
+                        React__default.createElement(Typography, null,
+                            "Are yu sure you want to delete ",
+                            React__default.createElement("strong", null, view === null || view === void 0 ? void 0 : view.ViewName),
+                            " ?")))) :
+                (React__default.createElement(Typography, null, "ERROR:  No view detected, please select one"))),
+            React__default.createElement(Divider, null),
+            React__default.createElement(MesfModal.Actions, null,
+                React__default.createElement(Grid$1, { container: true, spacing: 1, style: { display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end' } },
+                    React__default.createElement(Grid$1, { item: true },
+                        React__default.createElement(Button$1, { variant: 'outlined', color: 'secondary', onClick: function () { return handleClose(false); } }, "Cancel")),
+                    React__default.createElement(Grid$1, { item: true }, !isNil$1(view) ?
+                        React__default.createElement(ButtonWithLoading, { variant: 'contained', color: 'secondary', onClick: handleSubmit, isLoading: isLoading }, "Delete")
+                        : (React__default.createElement(Button$1, { variant: 'contained', style: { marginRight: "1rem" }, color: 'primary', onClick: function () { return handleClose(false); } }, "Ok")))))),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
+};
+
+var EditViewModal = function (_a) {
+    var open = _a.open, handleClose = _a.handleClose, view = _a.view;
+    var classes = useTrendingStyles();
+    var _b = useState(''), newName = _b[0], setNewName = _b[1];
+    var _c = useState(true), isPublic = _c[0], setIsPublic = _c[1];
+    var _d = useState(false), isLoading = _d[0], setIsLoading = _d[1];
+    var _e = useState(''), error = _e[0], setError = _e[1];
+    var handleSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var resp;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsLoading(true);
+                    if (!!isNil$1(view)) return [3 /*break*/, 2];
+                    return [4 /*yield*/, upsertView(view.ViewId, newName, isPublic)];
+                case 1:
+                    resp = _a.sent();
+                    if (!resp.ok) {
+                        setError(resp.message);
+                    }
+                    else {
+                        handleClose(true);
+                    }
+                    _a.label = 2;
+                case 2:
+                    setIsLoading(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleChangeInput = function (e) {
+        e.preventDefault();
+        var name = e.target.value;
+        setNewName(name);
+    };
+    var handleCheck = function () { return setIsPublic(!isPublic); };
+    useEffect(function () {
+        if (view) {
+            setIsPublic(view.IsPublic);
+            setNewName(view.ViewName);
+        }
+    }, [view]);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Update View' },
+            React__default.createElement(Divider, null),
+            React__default.createElement(MesfModal.Content, null, !isNil$1(view) ?
+                (React__default.createElement(Grid$1, { container: true, spacing: 5, style: { padding: "2rem" } },
+                    React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { padding: "10px", width: "100%" } },
+                        React__default.createElement(TextField, { required: true, className: classes.inputCustom, id: "viewName", label: "Name", variant: "outlined", onChange: handleChangeInput, value: newName })),
+                    React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { paddingTop: "2rem" }, className: classes.isPublicCheckbox },
+                        React__default.createElement("label", null,
+                            React__default.createElement("input", { type: "checkbox", checked: isPublic, onChange: handleCheck }),
+                            React__default.createElement(Typography, null, "Public"))))) :
+                (React__default.createElement(Typography, null, "ERROR:  No view detected, please select one"))),
+            React__default.createElement(Divider, null),
+            React__default.createElement(MesfModal.Actions, null,
+                React__default.createElement(Grid$1, { container: true, spacing: 1, style: { display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end' } },
+                    React__default.createElement(Grid$1, { item: true },
+                        React__default.createElement(Button$1, { variant: 'outlined', color: 'secondary', onClick: function () { return handleClose(false); } }, "Cancel")),
+                    React__default.createElement(Grid$1, { item: true }, !isNil$1(view) ?
+                        React__default.createElement(ButtonWithLoading, { variant: 'contained', color: 'primary', onClick: handleSubmit, isLoading: isLoading }, "Update")
+                        : (React__default.createElement(Button$1, { variant: 'contained', style: { marginRight: "1rem" }, color: 'primary', onClick: function () { return handleClose(false); } }, "Ok")))))),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
+};
+
+var LoadViewModal = function (_a) {
+    var open = _a.open, handleClose = _a.handleClose, getTagsFromAPI = _a.getTagsFromAPI;
+    var _b = useTrendingContext(), _c = _b.state, views = _c.views, viewSelected = _c.viewSelected, _d = _b.actions; _d.setViews; var setViewTags = _d.setViewTags, setViewSelected = _d.setViewSelected;
+    var classes = useTrendingStyles();
+    var _e = useState(null), viewForDelete = _e[0], setViewForDelete = _e[1];
+    var _f = useState(null), viewForEdit = _f[0], setViewForEdit = _f[1];
+    var _g = useState(false), deleteViewModalOpen = _g[0], setDeleteViewModalOpen = _g[1];
+    var _h = useState(false), editViewModalOpen = _h[0], setEditViewModalOpen = _h[1];
+    var _j = useState(false), allViewsChecked = _j[0], setAllViewsChecked = _j[1];
+    var _k = useState(false), isLoading = _k[0], setIsLoading = _k[1];
+    var _l = useState(''), error = _l[0], setError = _l[1];
+    var handleSelect = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var viewTagsResp;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!viewSelected) return [3 /*break*/, 2];
+                    setIsLoading(true);
+                    return [4 /*yield*/, getViewTags(viewSelected.ViewId)];
+                case 1:
+                    viewTagsResp = _a.sent();
+                    if (viewTagsResp.ok) {
+                        setViewTags(viewTagsResp.data.tables[0].rows);
+                    }
+                    else {
+                        setError(viewTagsResp.message);
+                    }
+                    setIsLoading(false);
+                    handleClose(true);
+                    _a.label = 2;
+                case 2: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleDeleteView = function (view, e) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            e.stopPropagation();
+            setViewForDelete(view);
+            setDeleteViewModalOpen(true);
+            return [2 /*return*/];
+        });
+    }); };
+    var handleEditView = function (view, e) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            setViewForEdit(view);
+            setEditViewModalOpen(true);
+            return [2 /*return*/];
+        });
+    }); };
+    var handleAllViewsCheckbox = function () {
+        setAllViewsChecked(function (prev) { return !prev; });
+    };
+    var privateViews = useMemo(function () {
+        return views.filter(function (v) { return v.IsPublic === false; });
+    }, [views, allViewsChecked]);
+    return (React__default.createElement("div", null,
+        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Views' },
+            React__default.createElement(MesfModal.Content, null,
+                React__default.createElement(Grid$1, { container: true }, views.length ? (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(Grid$1, { item: true, md: 12 },
+                        React__default.createElement("div", { className: classes.isPublicCheckbox, style: { paddingBottom: '1rem' } },
+                            React__default.createElement("label", { htmlFor: "" },
+                                React__default.createElement("input", { type: "checkbox", checked: allViewsChecked, onChange: handleAllViewsCheckbox }),
+                                React__default.createElement(Typography, null, "All Views")))),
+                    React__default.createElement(Grid$1, { item: true, md: 12 },
+                        React__default.createElement(Autocomplete, { size: 'small', id: "list-of-views", options: allViewsChecked ? views : privateViews, getOptionLabel: function (option) { return option.ViewName; }, onChange: function (ev, val) { return setViewSelected(val); }, style: { width: "100%" }, renderOption: function (option) { return (React__default.createElement("div", { className: classes.optionContainer },
+                                React__default.createElement("div", { className: classes.optionLabel }, option.ViewName),
+                                React__default.createElement("div", { className: classes.iconContainer },
+                                    option.IsPublic ? '' :
+                                        React__default.createElement(React__default.Fragment, null,
+                                            React__default.createElement(Tooltip, { title: "Private", arrow: true },
+                                                React__default.createElement(LockIcon, { fontSize: 'small', style: { color: 'black', height: "18px", width: '18px', cursor: 'auto' } }))),
+                                    React__default.createElement(IconButton$1, { onClick: function (e) { return handleEditView(option); } },
+                                        React__default.createElement(CreateIcon, { fontSize: 'small', color: 'primary', style: { height: "18px", width: '18px', cursor: 'pointer' } })),
+                                    React__default.createElement(IconButton$1, { onClick: function (e) { return handleDeleteView(option, e); } },
+                                        React__default.createElement(DeleteIcon, { fontSize: 'small', color: 'secondary', style: { height: "18px", width: '18px', cursor: 'pointer' } }))))); }, renderInput: function (params) { return React__default.createElement(TextField, __assign({}, params, { label: "Views", variant: "outlined" })); } })))) :
+                    (React__default.createElement(Typography, null, "No tag views detected, please add one")))),
+            React__default.createElement(MesfModal.Actions, null,
+                React__default.createElement("div", { style: { paddingTop: "1rem" } },
+                    React__default.createElement(Button$1, { variant: 'outlined', style: { marginRight: "1rem" }, color: 'secondary', onClick: function () { return handleClose(false); } }, "Cancel"),
+                    views.length ? (React__default.createElement(ButtonWithLoading, { onClick: handleSelect, variant: 'contained', color: 'primary', isLoading: isLoading, style: { marginRight: "1rem" } }, "Apply")) : (React__default.createElement(Button$1, { variant: 'contained', style: { marginRight: "1rem" }, color: 'primary', onClick: function () { return handleClose(false); } }, "Ok"))))),
+        React__default.createElement(DeleteViewModal, { open: deleteViewModalOpen, view: viewForDelete, handleClose: function (shouldUpdate) {
+                setDeleteViewModalOpen(false);
+                if (shouldUpdate)
+                    getTagsFromAPI().then(function () { });
+            } }),
+        React__default.createElement(EditViewModal, { open: editViewModalOpen, view: viewForEdit, handleClose: function (shouldUpdate) {
+                setEditViewModalOpen(false);
+                if (shouldUpdate)
+                    getTagsFromAPI().then(function () { });
+            } }),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
+};
+
 var SaveAsViewModal = function (_a) {
     var open = _a.open, handleClose = _a.handleClose;
     var classes = useTrendingStyles();
     var _b = useState(false), isLoading = _b[0], setIsLoading = _b[1];
     var _c = useState(''), error = _c[0], setError = _c[1];
-    var viewTags = useTrendingContext().state.viewTags;
-    var _d = useState(true), isPublic = _d[0], setIsPublic = _d[1];
-    var _e = useState(''), viewName = _e[0], setViewName = _e[1];
+    var _d = useTrendingContext(), _e = _d.state, viewTags = _e.viewTags, views = _e.views, viewSelected = _e.viewSelected, _f = _d.actions, setViewSelected = _f.setViewSelected; _f.setViewTags;
+    var _g = useState(true), isPublic = _g[0], setIsPublic = _g[1];
+    var _h = useState(''), newView = _h[0], setNewView = _h[1];
     var handleCheck = function () { return setIsPublic(!isPublic); };
-    var handleInputChange = function (e) { return setViewName(e.target.value); };
     var handleSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
         var resp, ViewId_1, results;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     setIsLoading(true);
-                    return [4 /*yield*/, upsertView(null, viewName, isPublic)];
+                    return [4 /*yield*/, upsertView(null, newView, isPublic)];
                 case 1:
                     resp = _a.sent();
                     if (!resp.ok) return [3 /*break*/, 3];
@@ -10418,12 +10630,22 @@ var SaveAsViewModal = function (_a) {
         });
     }); };
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Tags' },
+        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Save View As' },
             React__default.createElement(Divider, null),
             React__default.createElement(MesfModal.Content, null,
                 React__default.createElement(Grid$1, { container: true, spacing: 5, style: { padding: "1rem" } },
-                    React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { padding: "10px", width: "100%" } },
-                        React__default.createElement(TextField, { size: 'small', id: "outlined-basic", label: "View Name", variant: "outlined", value: viewName, onChange: handleInputChange, style: { width: "100%" } }))),
+                    React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { padding: "10px", width: "100%" } }, views.length && viewSelected ? (React__default.createElement(Autocomplete, { size: 'small', id: "list-of-views", options: views, defaultValue: viewSelected, getOptionLabel: function (option) { return option.ViewName; }, freeSolo: true, onChange: function (ev, val) {
+                            setViewSelected(val);
+                            if (val) {
+                                setNewView("");
+                            }
+                        }, onInputChange: function (event, newInputValue) {
+                            var isValueInViews = views.some(function (view) { return view.ViewName === newInputValue; });
+                            if (!isValueInViews) {
+                                setNewView(newInputValue);
+                            }
+                        }, style: { width: "100%" }, renderInput: function (params) { return React__default.createElement(TextField, __assign({}, params, { label: "Views", variant: "outlined" })); } })) :
+                        (React__default.createElement("div", null, "No tag views detected, please add one")))),
                 React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { paddingTop: "2rem" }, className: classes.isPublicCheckbox },
                     React__default.createElement("label", null,
                         "Public",
@@ -10570,76 +10792,12 @@ var timeDifference = function (start, end) {
     return "".concat(hours, "h ").concat(remainingMinutes, "m ").concat(remainingSeconds, "s");
 };
 
-var SaveViewModal = function (_a) {
-    var open = _a.open, handleClose = _a.handleClose;
-    var _b = useState(false), isLoading = _b[0], setIsLoading = _b[1];
-    var _c = useState(''), error = _c[0], setError = _c[1];
-    var _d = useTrendingContext().state, viewTags = _d.viewTags, viewSelected = _d.viewSelected;
-    var handleSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var resp, results;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    setIsLoading(true);
-                    if (!(viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId)) return [3 /*break*/, 4];
-                    return [4 /*yield*/, upsertView(viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId, viewSelected.ViewName, viewSelected.IsPublic)];
-                case 1:
-                    resp = _a.sent();
-                    if (!resp.ok) return [3 /*break*/, 3];
-                    return [4 /*yield*/, Promise.allSettled(viewTags.map(function (_a) {
-                            var TagId = _a.TagId, Color = _a.Color, MinScale = _a.MinScale, MaxScale = _a.MaxScale, IsAutoScale = _a.IsAutoScale, IsVisible = _a.IsVisible;
-                            upsertViewTag(viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId, TagId, Color, MinScale, MaxScale, IsVisible, IsAutoScale)
-                                .then(function (r) {
-                                if (!r.ok) {
-                                    setError(r.message);
-                                }
-                            });
-                        }))];
-                case 2:
-                    results = _a.sent();
-                    results.forEach(function (result, index) {
-                        if (result.status === "rejected") {
-                            setError("Tag ".concat(index, " failed with reason: ").concat(result.reason));
-                        }
-                        else {
-                            handleClose(true);
-                        }
-                    });
-                    return [3 /*break*/, 4];
-                case 3:
-                    setError(resp.message);
-                    _a.label = 4;
-                case 4:
-                    setIsLoading(false);
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Tags' },
-            React__default.createElement(Divider, null),
-            React__default.createElement(MesfModal.Content, null,
-                React__default.createElement(Grid$1, { container: true, spacing: 5, style: { padding: "1rem" } },
-                    React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { padding: "10px", width: "100%" } },
-                        React__default.createElement(Typography, null,
-                            "Do you want to save changes on ",
-                            React__default.createElement("strong", null, viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewName),
-                            " ?")))),
-            React__default.createElement(Divider, null),
-            React__default.createElement(MesfModal.Actions, null,
-                React__default.createElement(Grid$1, { container: true, spacing: 1, style: { display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end' } },
-                    React__default.createElement(Grid$1, { item: true },
-                        React__default.createElement(Button$1, { variant: 'outlined', color: 'secondary', onClick: function () { return handleClose(false); } }, "Cancel")),
-                    React__default.createElement(Grid$1, { item: true },
-                        React__default.createElement(ButtonWithLoading, { variant: 'contained', color: 'primary', onClick: handleSubmit, isLoading: isLoading }, "Save"))))),
-        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
-};
-
 var TableComponent = function (_a) {
     var chartData = _a.chartData, cursorData = _a.cursorData, getTagsFromAPI = _a.getTagsFromAPI;
     var classes = useTagsTableStyles();
-    var _b = useTrendingContext(), _c = _b.state, viewTags = _c.viewTags, viewSelected = _c.viewSelected, _d = _b.actions, setViewTags = _d.setViewTags, setGraphShouldUpdate = _d.setGraphShouldUpdate;
+    var _b = useTrendingContext(), _c = _b.state, viewTags = _c.viewTags, viewSelected = _c.viewSelected, _d = _b.actions, setViewTags = _d.setViewTags, setGraphShouldUpdate = _d.setGraphShouldUpdate; _d.setViewSelected;
     var _e = useState(''), error = _e[0], setError = _e[1];
+    var _f = useState(false); _f[0]; var setIsLoading = _f[1];
     var dataTable = useTagsDataTable({ viewTags: viewTags, chartData: chartData, cursorData: cursorData });
     var handleChange = function (tagId, value, property) {
         var newTags = viewTags.map(function (tag) {
@@ -10685,11 +10843,11 @@ var TableComponent = function (_a) {
             handleAutoScaleChange(tagId, checked);
         }
     };
-    var _f = useState(null), selectedRowIndex = _f[0], setSelectedRowIndex = _f[1];
-    var _g = useState(false), addTagModalOpen = _g[0], setAddTagModalOpen = _g[1];
-    var _h = useState(false), saveViewModalOpen = _h[0], setSaveViewModalOpen = _h[1];
+    var _g = useState(null), selectedRowIndex = _g[0], setSelectedRowIndex = _g[1];
+    var _h = useState(false), addTagModalOpen = _h[0], setAddTagModalOpen = _h[1];
     var _j = useState(false), saveAsViewModalOpen = _j[0], setSaveAsViewModalOpen = _j[1];
     var _k = useState(false), loadViewOpen = _k[0], setLoadViewOpen = _k[1];
+    var _l = useState(''), snackbarMessage = _l[0], setSnackbarMessage = _l[1];
     var handleClose = function () { return setAddTagModalOpen(false); };
     var ContextMenu = function (_a) {
         var x = _a.x, y = _a.y, options = _a.options;
@@ -10700,12 +10858,12 @@ var TableComponent = function (_a) {
             React__default.createElement("ul", null, options.map(function (option) { return (React__default.createElement("li", { key: option.id, onClick: option.onClick }, option.label)); }))));
     };
     // Position state for the context menu
-    var _l = useState({ x: 0, y: 0 }), contextMenuPosition = _l[0], setContextMenuPosition = _l[1];
+    var _m = useState({ x: 0, y: 0 }), contextMenuPosition = _m[0], setContextMenuPosition = _m[1];
     var contextMenuOptions = [
         { id: 'delete', label: 'Remove Tag', onClick: function () { return handleDelete(); } },
         { id: 'add', label: 'Add Tag', onClick: function () { return setAddTagModalOpen(true); } },
         { id: 'saveDefault', label: 'Save Default To Tag', onClick: function () { return handleSaveDefaultToTag(); } },
-        { id: 'saveView', label: 'Save View', onClick: function () { setSaveViewModalOpen(true); } },
+        { id: 'saveView', label: 'Save View', onClick: function () { return handleSaveView(); } },
         { id: 'saveViewAs', label: 'Save View as', onClick: function () { return setSaveAsViewModalOpen(true); } },
         { id: 'loadView', label: 'Load View', onClick: function () { return setLoadViewOpen(true); } },
     ];
@@ -10737,6 +10895,53 @@ var TableComponent = function (_a) {
             }
         });
     }); };
+    var handleSaveView = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var resp, results;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsLoading(true);
+                    if (!(viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId)) return [3 /*break*/, 4];
+                    return [4 /*yield*/, upsertView(viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId, viewSelected.ViewName, viewSelected.IsPublic)];
+                case 1:
+                    resp = _a.sent();
+                    if (!resp.ok) return [3 /*break*/, 3];
+                    return [4 /*yield*/, Promise.allSettled(viewTags.map(function (_a) {
+                            var TagId = _a.TagId, Color = _a.Color, MinScale = _a.MinScale, MaxScale = _a.MaxScale, IsAutoScale = _a.IsAutoScale, IsVisible = _a.IsVisible;
+                            upsertViewTag(viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewId, TagId, Color, MinScale, MaxScale, IsVisible, IsAutoScale)
+                                .then(function (r) {
+                                if (!r.ok) {
+                                    setError(r.message);
+                                }
+                            });
+                        }))];
+                case 2:
+                    results = _a.sent();
+                    results.forEach(function (result, index) {
+                        if (result.status === "rejected") {
+                            setError("Tag ".concat(index, " failed with reason: ").concat(result.reason));
+                        }
+                        else {
+                            setSelectedRowIndex(null);
+                            setSnackbarMessage('View saved successfully');
+                        }
+                    });
+                    return [3 /*break*/, 4];
+                case 3:
+                    setError(resp.message);
+                    _a.label = 4;
+                case 4:
+                    setIsLoading(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleCloseSnackbar = function (event, reason) {
+        if (reason === 'clickaway') {
+            return;
+        }
+        setSnackbarMessage('');
+    };
     useEffect(function () {
         var handleGlobalClick = function (e) {
             if (selectedRowIndex !== null) {
@@ -10933,20 +11138,17 @@ var TableComponent = function (_a) {
                                 React__default.createElement(Button$1, { onClick: function () { return setLoadViewOpen(true); }, variant: 'outlined', color: 'primary' }, " Load view"))))))),
             selectedRowIndex !== null && (React__default.createElement(ContextMenu, { x: contextMenuPosition.x, y: contextMenuPosition.y, options: contextMenuOptions })),
             React__default.createElement(AddTagModal, { open: addTagModalOpen, handleClose: handleClose, onTagSelect: handleTagSelect }),
-            React__default.createElement(SaveViewModal, { open: saveViewModalOpen, handleClose: function (shouldUpdate) {
-                    setSaveViewModalOpen(false);
-                    if (shouldUpdate)
-                        getTagsFromAPI().then(function () { });
-                } }),
             React__default.createElement(SaveAsViewModal, { open: saveAsViewModalOpen, handleClose: function (shouldUpdate) {
                     setSaveAsViewModalOpen(false);
                     if (shouldUpdate)
-                        getTagsFromAPI().then(function () { });
+                        getTagsFromAPI(true).then(function () { });
                 } }),
-            React__default.createElement(LoadViewModal, { open: loadViewOpen, handleClose: function (shouldUpdate) {
+            React__default.createElement(LoadViewModal, { open: loadViewOpen, getTagsFromAPI: getTagsFromAPI, handleClose: function (shouldUpdate) {
                     setLoadViewOpen(false);
                 } })),
-        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } }),
+        React__default.createElement(Snackbar$1, { open: !!snackbarMessage, autoHideDuration: 800, onClose: handleCloseSnackbar },
+            React__default.createElement(Alert$3, { onClose: handleCloseSnackbar, severity: "success" }, snackbarMessage))));
 };
 
 var formatDateTimeToString = function (date) {
@@ -11551,41 +11753,44 @@ var Trending = function (_a) {
 var TrendingsPage = function (props) {
     var _a = useState(''), error = _a[0], setError = _a[1];
     var _b = useTrendingContext(), viewSelected = _b.state.viewSelected, _c = _b.actions, setViews = _c.setViews, setViewTags = _c.setViewTags, setViewSelected = _c.setViewSelected;
-    var getTagsFromAPI = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var viewsResp, lastCreated, viewTagsResp;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, getViews(null)];
-                case 1:
-                    viewsResp = _a.sent();
-                    if (!viewsResp.ok) return [3 /*break*/, 3];
-                    setViews(viewsResp.data.tables[0].rows);
-                    lastCreated = void 0;
-                    if (!viewSelected) {
-                        lastCreated = viewsResp.data.tables[0].rows.reduce(function (prev, current) { return (prev.ViewId > current.ViewId) ? prev : current; });
-                        //viewSelected
-                        setViewSelected(lastCreated);
-                    }
-                    else {
-                        lastCreated = viewSelected;
-                    }
-                    return [4 /*yield*/, getViewTags(lastCreated.ViewId)];
-                case 2:
-                    viewTagsResp = _a.sent();
-                    if (viewTagsResp.ok) {
-                        setViewTags(viewTagsResp.data.tables[0].rows);
-                    }
-                    else {
-                        setError(viewTagsResp.message);
-                    }
-                    return [3 /*break*/, 4];
-                case 3:
-                    setError(viewsResp.message);
-                    _a.label = 4;
-                case 4: return [2 /*return*/];
-            }
+    var getTagsFromAPI = function (forceReload) {
+        if (forceReload === void 0) { forceReload = false; }
+        return __awaiter(void 0, void 0, void 0, function () {
+            var viewsResp, lastCreated, viewTagsResp;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, getViews(null)];
+                    case 1:
+                        viewsResp = _a.sent();
+                        if (!viewsResp.ok) return [3 /*break*/, 3];
+                        setViews(viewsResp.data.tables[0].rows);
+                        lastCreated = void 0;
+                        if (!viewSelected || forceReload) {
+                            lastCreated = viewsResp.data.tables[0].rows.reduce(function (prev, current) { return (prev.ViewId > current.ViewId) ? prev : current; });
+                            //viewSelected
+                            setViewSelected(lastCreated);
+                        }
+                        else {
+                            lastCreated = viewSelected;
+                        }
+                        return [4 /*yield*/, getViewTags(lastCreated.ViewId)];
+                    case 2:
+                        viewTagsResp = _a.sent();
+                        if (viewTagsResp.ok) {
+                            setViewTags(viewTagsResp.data.tables[0].rows);
+                        }
+                        else {
+                            setError(viewTagsResp.message);
+                        }
+                        return [3 /*break*/, 4];
+                    case 3:
+                        setError(viewsResp.message);
+                        _a.label = 4;
+                    case 4: return [2 /*return*/];
+                }
+            });
         });
-    }); };
+    };
     useEffect(function () {
         getTagsFromAPI();
     }, []);