impact-ui 4.0.1-alpha.8 → 4.0.1

package/dist/components/Table/tableFunctions.js

@@ -3,21 +3,23 @@ import { forwardRef, useState, useRef, useEffect, useCallback, useMemo } from "r
 import { useSensors, useSensor, MouseSensor, TouchSensor, DndContext, closestCenter } from "@dnd-kit/core";
 import { SortableContext, arrayMove, useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
+import { PersonUser as PersonUser_default, Globe as Globe_default } from "../../node_modules/@impactsmartsuite/impact-icons/dist/index.js";
 import default_1$1 from "../../node_modules/@mui/icons-material/KeyboardArrowDown.js";
 import default_1$3 from "../../node_modules/@mui/icons-material/KeyboardArrowRight.js";
 import default_1 from "../../node_modules/@mui/icons-material/KeyboardArrowUp.js";
 import default_1$2 from "../../node_modules/@mui/icons-material/Search.js";
 import { getAssetUrl } from "../../utils/assetBase.js";
+import { debounce } from "../../utils/debounce.js";
+import { isViewNameUnique } from "../../utils/helper.js";
+import { Badge } from "../Badge/index.js";
+import { Button } from "../Button/index.js";
 import { Checkbox } from "../Checkbox/index.js";
 import { Input } from "../Input/index.js";
-import { Button } from "../Button/index.js";
 import { Modal } from "../Modal/index.js";
 import { Prompt } from "../Prompt/index.js";
 import { RadioButtonGroup } from "../RadioButtonGroup/index.js";
 import { Select } from "../Select/index.js";
-import { Badge } from "../Badge/index.js";
-import { isViewNameUnique } from "../../utils/helper.js";
-import { debounce } from "../../utils/debounce.js";
+import { useTranslation } from "../../i18n/useTranslation.js";
 import IconButton from "../../node_modules/@mui/material/IconButton/IconButton.js";
 import DragIndicator from "../../node_modules/@mui/icons-material/esm/DragIndicator.js";
 const saveViewIcon = getAssetUrl("icons/saveViewIcon.svg");
@@ -25,6 +27,15 @@ const saveViewEditIcon = getAssetUrl("icons/saveViewEditIcon.svg");
 const saveViewDeleteIcon = getAssetUrl("icons/saveViewDeleteIcon.svg");
 const defaultViewIcon = getAssetUrl("icons/defaultViewIcon.svg");
 const defaultViewActiveIcon = getAssetUrl("icons/defaultViewIconActive.svg");
+const DEFAULT_VIEW_TYPE_ICONS = {
+  global: /* @__PURE__ */ jsx(Globe_default, { height: 16, width: 16 }),
+  personal: /* @__PURE__ */ jsx(PersonUser_default, { height: 16, width: 16 })
+};
+const getViewTypeIcon = (viewType, viewTypeOptions) => {
+  var _a;
+  const customIcon = (_a = viewTypeOptions == null ? void 0 : viewTypeOptions.find((option) => option.value === viewType)) == null ? void 0 : _a.icon;
+  return customIcon || DEFAULT_VIEW_TYPE_ICONS[viewType] || null;
+};
 const onColMenuFreezeClick = (params) => {
   const { pinned } = params.column;
   if (pinned) {
@@ -51,36 +62,37 @@ const sortFunc = (columnData, sortBy, api) => {
   });
 };
 const getMainMenuItems = (params) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
+  const t = ((_a = params == null ? void 0 : params.context) == null ? void 0 : _a.t) || ((k) => k);
   const { onFontSizeChange, onNumberFormatChange } = params;
   const { colDef, pinned, sort, actualWidth } = params.column;
   const columnMenuItems = [];
   columnMenuItems.push(
     {
-      name: "Column Settings",
+      name: t("table.menu.columnSettings"),
       cssClasses: ["settings-main-container"]
     },
     "separator"
   );
   columnMenuItems.push({
-    name: "Sort",
+    name: t("table.menu.sort"),
     subMenu: [
       {
-        name: "Sort A to Z",
+        name: t("table.menu.sortAsc"),
         action: () => {
           sortFunc(params.column, "asc", params);
         },
         checked: sort === "asc"
       },
       {
-        name: "Sort Z to A",
+        name: t("table.menu.sortDesc"),
         checked: sort === "desc",
         action: () => {
           sortFunc(params.column, "desc", params);
         }
       },
       {
-        name: "Reset",
+        name: t("table.menu.reset"),
         action: () => {
           sortFunc(params.column, null, params);
         }
@@ -89,80 +101,80 @@ const getMainMenuItems = (params) => {
     disabled: !(colDef == null ? void 0 : colDef.sortable)
   });
   columnMenuItems.push({
-    name: pinned ? "Unfreeze Column" : "Freeze Column",
+    name: pinned ? t("table.menu.unfreezeColumn") : t("table.menu.freezeColumn"),
     action: () => {
       onColMenuFreezeClick(params);
     }
   });
   columnMenuItems.push({
-    name: "Column width",
+    name: t("table.menu.columnWidth"),
     subMenu: [
       {
-        name: "Auto Adjust",
+        name: t("table.menu.autoAdjust"),
         action: () => {
           onColMenuAutoAdjustClick(params);
         },
         // if extra.width property is not present- column is auto adjusted
-        checked: actualWidth !== ((_a = colDef == null ? void 0 : colDef.extra) == null ? void 0 : _a.width)
+        checked: actualWidth !== ((_b = colDef == null ? void 0 : colDef.extra) == null ? void 0 : _b.width)
       },
       {
-        name: "Custom width",
+        name: t("table.menu.customWidth"),
         action: () => {
           var _a2;
           params.api.setColumnWidth(params.column.colDef, (_a2 = colDef == null ? void 0 : colDef.extra) == null ? void 0 : _a2.width);
         },
         // if extra.width property is present- column has custom width
-        checked: ((_b = colDef == null ? void 0 : colDef.extra) == null ? void 0 : _b.width) === actualWidth,
-        disabled: !((_c = colDef == null ? void 0 : colDef.extra) == null ? void 0 : _c.width)
+        checked: ((_c = colDef == null ? void 0 : colDef.extra) == null ? void 0 : _c.width) === actualWidth,
+        disabled: !((_d = colDef == null ? void 0 : colDef.extra) == null ? void 0 : _d.width)
       }
     ]
   });
   columnMenuItems.push({
-    name: "Wrap Text",
+    name: t("table.menu.wrapText"),
     disabled: true
   });
   columnMenuItems.push(
     {
-      name: "Format",
+      name: t("table.menu.format"),
       cssClasses: ["format-main-container"]
     },
     "separator"
   );
   columnMenuItems.push({
-    name: "Numeric Values",
+    name: t("table.menu.numericValues"),
     subMenu: [
       {
-        name: "Full Number",
+        name: t("table.menu.fullNumber"),
         action: () => onNumberFormatChange("full")
       },
       {
-        name: "In K",
+        name: t("table.menu.inK"),
         action: () => onNumberFormatChange("thousand")
       },
       {
-        name: "In Mn",
+        name: t("table.menu.inMn"),
         action: () => onNumberFormatChange("million")
       },
       {
-        name: "In Bn",
+        name: t("table.menu.inBn"),
         action: () => onNumberFormatChange("billion")
       }
     ],
     disabled: !onFontSizeChange
   });
   columnMenuItems.push({
-    name: "Font Size",
+    name: t("table.menu.fontSize"),
     subMenu: [
       {
-        name: "Small Font",
+        name: t("table.menu.smallFont"),
         action: () => onFontSizeChange("small")
       },
       {
-        name: "Medium Font",
+        name: t("table.menu.mediumFont"),
         action: () => onFontSizeChange("medium")
       },
       {
-        name: "Large Font",
+        name: t("table.menu.largeFont"),
         action: () => onFontSizeChange("large")
       }
     ],
@@ -191,6 +203,7 @@ const SortableColumnItem = ({ column, level, renderFn, dragIconClass, onToggle,
 };
 const Columns = forwardRef((props, ref) => {
   var _a, _b, _c, _d, _e, _f;
+  const { t } = useTranslation();
   const [searchText, setSearchText] = useState("");
   const [collapsedScrollable, setCollapsedScrollable] = useState(false);
   const [collapsedColumn, setCollapsedcolumn] = useState(false);
@@ -226,12 +239,6 @@ const Columns = forwardRef((props, ref) => {
   const isColumnPinnedRef = useRef(false);
   useEffect(() => {
     const views = props.savedViewsOptions ?? [];
-    const options = views.map((view) => ({
-      label: view.viewName,
-      value: view.viewName,
-      disabled: view == null ? void 0 : view.isDisabled
-    }));
-    setCurrentSaveViewOptions(options);
     setSavedViewsOptions(views);
     setFilteredSavedViewsOptions(views);
     setSelectedView(views.filter((view) => view.isActive));
@@ -239,7 +246,40 @@ const Columns = forwardRef((props, ref) => {
       setOpenSaveViewMenu(false);
       setSaveViewSearchText("");
     }
-  }, [props.savedViewsOptions]);
+    const matchingViews = views.filter(
+      (view) => !selectedViewType || view.viewType === selectedViewType
+    );
+    setCurrentSaveViewOptions(
+      views.map((view) => {
+        var _a2;
+        return {
+          label: /* @__PURE__ */ jsxs("div", { className: "save-view-select-option-label", children: [
+            getViewTypeIcon(view.viewType, (_a2 = props.saveViewCustomFilter) == null ? void 0 : _a2.options),
+            /* @__PURE__ */ jsx("span", { children: view.viewName })
+          ] }),
+          value: view.viewName,
+          disabled: view == null ? void 0 : view.isDisabled,
+          viewType: view.viewType,
+          isDefaultView: view.isDefaultView
+        };
+      })
+    );
+    setSelectedSavedView(
+      (prev) => (prev == null ? void 0 : prev.value) && matchingViews.some((view) => view.viewName === prev.value) ? prev : null
+    );
+  }, [props.savedViewsOptions, selectedViewType]);
+  useEffect(() => {
+    if (selectedSavedView == null ? void 0 : selectedSavedView.value) {
+      setInputValue(selectedSavedView.value);
+      setSelectedViewType(selectedSavedView.viewType);
+      setIsDefaultView(!!selectedSavedView.isDefaultView);
+    } else {
+      setInputValue("");
+      setIsDefaultView(false);
+    }
+  }, [selectedSavedView]);
+  const isReplaceViewSelected = !!(selectedSavedView == null ? void 0 : selectedSavedView.value);
+  const isInputValueEmpty = !inputValue.trim();
   const getColumnDefs = useCallback((columns) => {
     return columns.map((column) => {
       if (column.children) {
@@ -261,7 +301,7 @@ const Columns = forwardRef((props, ref) => {
         var _a3;
         const columnState2 = {
           colId: column.colId || column.field || column.headerName,
-          headerName: column.headerName || column.field || "N/A",
+          headerName: column.headerName || column.field || t("table.columns.na"),
           isVisible: !(column == null ? void 0 : column.hide),
           isPinned: column.pinned ? true : false,
           children: ((_a3 = column == null ? void 0 : column.children) == null ? void 0 : _a3.length) > 0 ? getColumnState(column.children) : null,
@@ -809,21 +849,20 @@ const Columns = forwardRef((props, ref) => {
       }
       return;
     }
+    const replaceViewName = selectedSavedView == null ? void 0 : selectedSavedView.value;
+    const isReplacing = isInputValueEmpty && !!replaceViewName;
     const newView = {
-      viewName: inputValue,
+      viewName: isReplacing ? replaceViewName : inputValue,
       viewType: selectedViewType,
       isDefaultView,
       isActive: true
     };
-    setSavedViewsOptions((prev) => [
-      ...prev.map((view) => ({ ...view, isActive: false })),
-      newView
-    ]);
-    setFilteredSavedViewsOptions((prev) => [
-      ...prev.map((view) => ({ ...view, isActive: false })),
-      newView
-    ]);
-    (_b2 = props.handleSaveAndApply) == null ? void 0 : _b2.call(props, newView, selectedSavedView == null ? void 0 : selectedSavedView.value);
+    const applyToViews = (prev) => isReplacing ? prev.map(
+      (view) => view.viewName === replaceViewName && view.viewType === selectedViewType ? { ...view, ...newView } : { ...view, isActive: false }
+    ) : [...prev.map((view) => ({ ...view, isActive: false })), newView];
+    setSavedViewsOptions(applyToViews);
+    setFilteredSavedViewsOptions(applyToViews);
+    (_b2 = props.handleSaveAndApply) == null ? void 0 : _b2.call(props, newView, replaceViewName);
   };
   useEffect(() => {
     var _a2;
@@ -901,17 +940,29 @@ const Columns = forwardRef((props, ref) => {
     );
     setSelectedView(view);
   };
+  const nameConflictExcludeView = isEditView ? editedView : (selectedSavedView == null ? void 0 : selectedSavedView.value) ? {
+    viewName: selectedSavedView.value,
+    viewType: selectedSavedView.viewType
+  } : null;
+  const nameConflict = !props.isSavingViewLoading && !isInputValueEmpty && !isViewNameUnique(
+    inputValue,
+    selectedViewType,
+    isDefaultView,
+    savedViewsOptions,
+    nameConflictExcludeView,
+    props.isViewNameUniqueAcrossTypes
+  );
   return /* @__PURE__ */ jsxs("div", { className: "table-setting-columns-settings", children: [
     props.isSaveViewEnabled && /* @__PURE__ */ jsxs("div", { className: "table-setting-save-view-container", children: [
       savedViewsOptions.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "save-view-icon-title", children: [
         /* @__PURE__ */ jsx("img", { alt: "save-view-icon", src: saveViewIcon }),
-        /* @__PURE__ */ jsx("span", { className: "save-view-title", children: "No views saved yet" })
+        /* @__PURE__ */ jsx("span", { className: "save-view-title", children: t("table.views.none") })
       ] }) : /* @__PURE__ */ jsxs("div", { className: "save-view-container-active-view", children: [
         /* @__PURE__ */ jsx(
           Badge,
           {
             color: "success",
-            label: `${((_b = savedViewsOptions.find((view) => view.isActive)) == null ? void 0 : _b.viewName) || "Not Applicable"}`,
+            label: `${((_b = savedViewsOptions.find((view) => view.isActive)) == null ? void 0 : _b.viewName) || t("table.views.notApplicable")}`,
             variant: "stroke"
           }
         ),
@@ -936,16 +987,16 @@ const Columns = forwardRef((props, ref) => {
           onClick: () => {
             setOpenSaveViewModal(true);
           },
-          children: "Save View"
+          children: t("table.views.saveView")
         }
       )
     ] }),
     openSaveViewMenu && /* @__PURE__ */ jsxs("div", { className: "save-view-menu", children: [
       /* @__PURE__ */ jsxs("div", { className: "save-view-menu-title", children: [
-        /* @__PURE__ */ jsx("span", { children: "Saved views" }),
+        /* @__PURE__ */ jsx("span", { children: t("table.views.savedViews") }),
         /* @__PURE__ */ jsxs("div", { className: "save-view-menu-default-view", children: [
           /* @__PURE__ */ jsx("img", { alt: "default-view-icon", src: defaultViewActiveIcon }),
-          /* @__PURE__ */ jsx("span", { className: "save-view-menu-default-view-text", children: "Default" })
+          /* @__PURE__ */ jsx("span", { className: "save-view-menu-default-view-text", children: t("table.views.default") })
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "save-view-menu-view-type", children: [
@@ -953,7 +1004,7 @@ const Columns = forwardRef((props, ref) => {
           Badge,
           {
             color: selectedBadge === "All" ? "info" : "default",
-            label: "All",
+            label: t("table.views.all"),
             size: "small",
             variant: "stroke",
             onClick: () => {
@@ -965,7 +1016,9 @@ const Columns = forwardRef((props, ref) => {
         (_d = (_c = props.saveViewCustomFilter) == null ? void 0 : _c.options) == null ? void 0 : _d.map((option) => /* @__PURE__ */ jsx(
           Badge,
           {
+            isIcon: true,
             color: selectedBadge === option.value ? "info" : "default",
+            icon: getViewTypeIcon(option.value),
             label: option.label,
             size: "small",
             variant: "stroke",
@@ -982,99 +1035,113 @@ const Columns = forwardRef((props, ref) => {
         Input,
         {
           leftIcon: /* @__PURE__ */ jsx(default_1$2, {}),
-          placeholder: "Search here...",
+          placeholder: t("table.views.searchPlaceholder"),
           value: saveViewSearchText,
           onChange: handleSaveViewSearchChange
         }
       ) }),
-      /* @__PURE__ */ jsx("div", { className: "save-view-menu-view-list-container", children: props.customRenderSaveViewContent ? props.customRenderSaveViewContent : filteredSavedViewsOptions.length > 0 && filteredSavedViewsOptions.map((view, idx) => /* @__PURE__ */ jsxs(
-        "div",
-        {
-          "aria-label": `Saved view ${view.viewName}`,
-          className: `save-view-menu-view-list-item ${view.isActive ? "active" : ""}`,
-          role: "button",
-          tabIndex: idx === 0 ? 0 : -1,
-          onClick: () => {
-            handleSaveViewClick(view);
-          },
-          onKeyDown: (e) => {
-            const current = e.currentTarget;
-            switch (e.key) {
-              case "Enter":
-              case " ":
-                e.preventDefault();
-                handleSaveViewClick(view);
-                break;
-              case "ArrowDown": {
-                e.preventDefault();
-                const next = current.nextElementSibling;
-                if (next) {
-                  next.focus();
+      /* @__PURE__ */ jsx("div", { className: "save-view-menu-view-list-container", children: props.customRenderSaveViewContent ? props.customRenderSaveViewContent : filteredSavedViewsOptions.length > 0 && filteredSavedViewsOptions.map((view, idx) => {
+        var _a2;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "aria-label": t("table.views.savedViewAria", { name: view.viewName }),
+            className: `save-view-menu-view-list-item ${view.isActive ? "active" : ""}`,
+            role: "button",
+            tabIndex: idx === 0 ? 0 : -1,
+            onClick: () => {
+              handleSaveViewClick(view);
+            },
+            onKeyDown: (e) => {
+              const current = e.currentTarget;
+              switch (e.key) {
+                case "Enter":
+                case " ":
+                  e.preventDefault();
+                  handleSaveViewClick(view);
+                  break;
+                case "ArrowDown": {
+                  e.preventDefault();
+                  const next = current.nextElementSibling;
+                  if (next) {
+                    next.focus();
+                  }
+                  break;
                 }
-                break;
-              }
-              case "ArrowUp": {
-                e.preventDefault();
-                const prev = current.previousElementSibling;
-                if (prev) {
-                  prev.focus();
+                case "ArrowUp": {
+                  e.preventDefault();
+                  const prev = current.previousElementSibling;
+                  if (prev) {
+                    prev.focus();
+                  }
+                  break;
                 }
-                break;
               }
-            }
-          },
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "save-view-menu-view-list-item-name", children: view.viewName }),
-            /* @__PURE__ */ jsxs("div", { className: "save-view-menu-view-list-item-actions", children: [
-              (view == null ? void 0 : view.isEditable) && /* @__PURE__ */ jsx(
-                "img",
-                {
-                  alt: "save-view-edit-icon",
-                  src: saveViewEditIcon,
-                  onClick: (e) => {
-                    handleEditView(view, e);
+            },
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: "save-view-menu-view-list-item-name", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: "save-view-menu-view-list-item-type-icon",
+                    title: view.viewType,
+                    children: getViewTypeIcon(view.viewType, (_a2 = props.saveViewCustomFilter) == null ? void 0 : _a2.options)
                   }
-                }
-              ),
-              (view == null ? void 0 : view.isDeletable) && /* @__PURE__ */ jsx(
-                "img",
-                {
-                  alt: "save-view-delete-icon",
-                  src: saveViewDeleteIcon,
-                  onClick: (e) => {
-                    handleDeleteView(view, e);
+                ),
+                /* @__PURE__ */ jsx("span", { className: "save-view-menu-view-list-item-name-text", children: view.viewName })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "save-view-menu-view-list-item-actions", children: [
+                (view == null ? void 0 : view.isEditable) && /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    alt: "save-view-edit-icon",
+                    src: saveViewEditIcon,
+                    onClick: (e) => {
+                      handleEditView(view, e);
+                    }
                   }
-                }
-              ),
-              !(view == null ? void 0 : view.notReqDefaultView) && ((view == null ? void 0 : view.isDefaultView) ? /* @__PURE__ */ jsx(
-                "img",
-                {
-                  alt: "default-view-icon",
-                  className: "default-view-active-icon",
-                  src: defaultViewActiveIcon,
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    e.preventDefault();
-                    props.handleSetDefaultView(view);
+                ),
+                (view == null ? void 0 : view.isDeletable) && /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    alt: "save-view-delete-icon",
+                    src: saveViewDeleteIcon,
+                    onClick: (e) => {
+                      handleDeleteView(view, e);
+                    }
                   }
-                }
-              ) : /* @__PURE__ */ jsx(
-                "img",
-                {
-                  alt: "default-view-icon",
-                  src: defaultViewIcon,
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    e.preventDefault();
-                    props.handleSetDefaultView(view);
+                ),
+                !(view == null ? void 0 : view.notReqDefaultView) && ((view == null ? void 0 : view.isDefaultView) ? /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    alt: "default-view-icon",
+                    className: "default-view-active-icon",
+                    src: defaultViewActiveIcon,
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                      props.handleSetDefaultView(view);
+                    }
                   }
-                }
-              ))
-            ] })
-          ]
-        },
-        view.viewName + idx
-      )) }),
+                ) : /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    alt: "default-view-icon",
+                    src: defaultViewIcon,
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                      props.handleSetDefaultView(view);
+                    }
+                  }
+                ))
+              ] })
+            ]
+          },
+          view.viewName + idx
+        );
+      }) }),
       /* @__PURE__ */ jsx("hr", { className: "save-view-menu-view-list-item-divider" }),
       /* @__PURE__ */ jsxs("div", { className: "save-view-menu-footer", children: [
         /* @__PURE__ */ jsx(
@@ -1086,7 +1153,7 @@ const Columns = forwardRef((props, ref) => {
               setOpenSaveViewMenu(false);
               setFilteredSavedViewsOptions([...savedViewsOptions]);
             },
-            children: "Cancel"
+            children: t("common.cancel")
           }
         ),
         /* @__PURE__ */ jsx(
@@ -1101,7 +1168,7 @@ const Columns = forwardRef((props, ref) => {
               updateColumnState();
               setOpenSaveViewMenu(false);
             },
-            children: "Apply"
+            children: t("common.apply")
           }
         )
       ] })
@@ -1112,20 +1179,23 @@ const Columns = forwardRef((props, ref) => {
         className: "save-view-modal",
         height: "542px",
         open: openSaveViewModal,
-        primaryButtonLabel: props.isSavingViewLoading ? "Saving..." : "Save",
+        primaryButtonLabel: props.isSavingViewLoading ? t("table.views.saving") : t("common.save"),
         primaryButtonProps: {
-          disabled: (inputValue === "" || props.maxSavedViews != null && savedViewsOptions.length >= props.maxSavedViews) && selectedSavedView === null || !isViewNameUnique(inputValue, selectedViewType, isDefaultView, savedViewsOptions) || props.isSavingViewLoading,
+          disabled: (isInputValueEmpty || props.maxSavedViews != null && savedViewsOptions.length >= props.maxSavedViews) && !isReplaceViewSelected || nameConflict || props.isSavingViewLoading,
           loading: props.isSavingViewLoading,
           iconPlacement: "right"
         },
-        secondaryButtonLabel: "Cancel",
-        title: isEditView ? "Edit view" : "Save view",
+        secondaryButtonLabel: t("common.cancel"),
+        title: isEditView ? t("table.views.editView") : t("table.views.saveViewTitle"),
         width: "422px",
         onClose: handleCloseSaveViewModal,
         onPrimaryButtonClick: handleSaveAndApply,
         onSecondaryButtonClick: handleCloseSaveViewModal,
         children: /* @__PURE__ */ jsxs("div", { className: "save-view-modal-children", children: [
-          props.maxSavedViews != null && /* @__PURE__ */ jsx("div", { className: "save-view-modal-children-header", children: /* @__PURE__ */ jsx("span", { className: "save-view-modal-children-header-text", children: `${props.maxSavedViews - savedViewsOptions.length}/${props.maxSavedViews} views remaining` }) }),
+          props.maxSavedViews != null && /* @__PURE__ */ jsx("div", { className: "save-view-modal-children-header", children: /* @__PURE__ */ jsx("span", { className: "save-view-modal-children-header-text", children: t("table.views.remaining", {
+            remaining: props.maxSavedViews - savedViewsOptions.length,
+            max: props.maxSavedViews
+          }) }) }),
           /* @__PURE__ */ jsxs(
             "div",
             {
@@ -1134,8 +1204,13 @@ const Columns = forwardRef((props, ref) => {
                 /* @__PURE__ */ jsx("div", { className: "save-view-modal-children-body-input", children: /* @__PURE__ */ jsx(
                   Input,
                   {
-                    label: "New view name",
-                    placeholder: "Enter here",
+                    helperText: nameConflict ? t("table.views.nameConflict") : "",
+                    isDisabled: isReplaceViewSelected,
+                    isError: nameConflict,
+                    isHelperText: nameConflict,
+                    label: t("table.views.newViewName"),
+                    placeholder: t("table.views.enterHere"),
+                    readOnly: isReplaceViewSelected,
                     value: inputValue,
                     onChange: (e) => {
                       setInputValue(e.target.value);
@@ -1144,10 +1219,11 @@ const Columns = forwardRef((props, ref) => {
                   }
                 ) }),
                 !isEditView && /* @__PURE__ */ jsxs("div", { className: "save-view-modal-children-body-radio-group", children: [
-                  /* @__PURE__ */ jsx("span", { className: "save-view-modal-children-body-radio-group-text", children: "View type" }),
+                  /* @__PURE__ */ jsx("span", { className: "save-view-modal-children-body-radio-group-text", children: t("table.views.viewType") }),
                   /* @__PURE__ */ jsx(
                     RadioButtonGroup,
                     {
+                      isDisabled: isReplaceViewSelected,
                       options: (_f = (_e = props.saveViewCustomFilter) == null ? void 0 : _e.options) == null ? void 0 : _f.filter(
                         (option) => !(option == null ? void 0 : option.notReqInSaveView)
                       ),
@@ -1163,22 +1239,24 @@ const Columns = forwardRef((props, ref) => {
                   Checkbox,
                   {
                     checked: isDefaultView,
-                    label: "Make it default view",
+                    disabled: isReplaceViewSelected,
+                    label: t("table.views.makeDefault"),
                     onChange: () => {
                       setIsDefaultView(!isDefaultView);
                     }
                   }
                 ) }),
-                /* @__PURE__ */ jsx("div", { className: "save-view-modal-children-body-replace-view", children: /* @__PURE__ */ jsx("span", { children: "Or replace with saved view" }) }),
+                /* @__PURE__ */ jsx("div", { className: "save-view-modal-children-body-replace-view", children: /* @__PURE__ */ jsx("span", { children: t("table.views.orReplace") }) }),
                 /* @__PURE__ */ jsx("div", { className: "save-view-modal-children-body-replace-view-select", children: /* @__PURE__ */ jsx(
                   Select,
                   {
+                    isClearable: true,
                     withPortal: true,
                     currentOptions: currentSaveViewOptions,
                     initialOptions: currentSaveViewOptions,
-                    isDisabled: savedViewsOptions.length === 0 || inputValue !== "" || isEditView,
+                    isDisabled: savedViewsOptions.length === 0 || !isInputValueEmpty && !isReplaceViewSelected || isEditView,
                     isOpen,
-                    label: "Replace with",
+                    label: t("table.views.replaceWith"),
                     minWidth: "100%",
                     selectedOptions: selectedSavedView,
                     setCurrentOptions: setCurrentSaveViewOptions,
@@ -1200,13 +1278,13 @@ const Columns = forwardRef((props, ref) => {
           setOpenDeletePrompt(false);
         },
         isOpen: openDeletePrompt,
-        primaryButtonLabel: "Yes,Delete",
+        primaryButtonLabel: t("table.views.deleteConfirm"),
         primaryButtonProps: {
           loading: props.isDeleteViewLoading,
           iconPlacement: "right"
         },
-        secondaryButtonLabel: "Cancel",
-        title: "Delete, Are you sure?",
+        secondaryButtonLabel: t("common.cancel"),
+        title: t("table.views.deleteTitle"),
         variant: "error",
         onPrimaryButtonClick: (e) => {
           var _a2;
@@ -1226,7 +1304,7 @@ const Columns = forwardRef((props, ref) => {
       /* @__PURE__ */ jsx(
         Input,
         {
-          placeholder: "Search",
+          placeholder: t("common.search"),
           rightIcon: /* @__PURE__ */ jsx(default_1$2, {}),
           value: searchText,
           onChange: handleSearchChange
@@ -1245,18 +1323,18 @@ const Columns = forwardRef((props, ref) => {
             onDragEnd: handleDragEnd,
             children: /* @__PURE__ */ jsxs(SortableContext, { items: [...scrollableColumnOrder, ...frozenColumnOrder], children: [
               frozenColumn.length > 0 && !(frozenColumn.length === 1 && frozenColumn[0].headerName === "N/A") && /* @__PURE__ */ jsxs("div", { className: "table-setting-collapse-columns-container", children: [
-                /* @__PURE__ */ jsx("h3", { children: "Frozen columns" }),
+                /* @__PURE__ */ jsx("h3", { children: t("table.columns.frozen") }),
                 /* @__PURE__ */ jsx("div", { className: "table-setting-frozen-columns-list", children: filteredFrozenColumns.map(
                   (column) => column.headerName !== "N/A" && renderFrozencolumn(column)
                 ) })
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "table-setting-scroll-columns-container", children: [
-                /* @__PURE__ */ jsx("h3", { children: "Scrollable Columns" }),
+                /* @__PURE__ */ jsx("h3", { children: t("table.columns.scrollable") }),
                 /* @__PURE__ */ jsxs("div", { className: "table-setting-scroll-main-column-list", children: [
                   /* @__PURE__ */ jsxs("div", { className: "table-setting-scroll-main-column", children: [
                     /* @__PURE__ */ jsx(IconButton, { style: { padding: "0px" }, onClick: toggleScrollableCollapse, children: collapsedScrollable ? /* @__PURE__ */ jsx(default_1$3, {}) : /* @__PURE__ */ jsx(default_1, {}) }),
                     /* @__PURE__ */ jsx(Checkbox, { checked: mainChecked, onChange: onMainCheckboxChange }),
-                    "Main Column"
+                    t("table.columns.main")
                   ] }),
                   /* @__PURE__ */ jsx("div", { className: "table-setting-scroll-inner-column-list", children: !collapsedScrollable && filteredScrollableColumns.map(
                     (column) => column.headerName !== "N/A" && renderScrollColumn(column)