Merge pull request #12256 from ToolJet/feat/unset-variables

feat: added method for unsetting all page and global variables

frontend/src/AppBuilder/CodeBuilder/utils.js

@@ -74,6 +74,7 @@ export function getSuggestionKeys(refState) {
     'setVariable',
     'getVariable',
     'unSetVariable',
+    'unsetAllVariables',
     'showAlert',
     'logout',
     'showModal',
@@ -85,6 +86,7 @@ export function getSuggestionKeys(refState) {
     'setPageVariable',
     'getPageVariable',
     'unsetPageVariable',
+    'unsetAllPageVariables',
     'switchPage',
   ];
 

frontend/src/AppBuilder/_stores/slices/eventsSlice.js

@@ -690,6 +690,12 @@ export const createEventsSlice = (set, get) => ({
             return getVariable(key);
           }
 
+          case 'unset-all-custom-variables': {
+            const { unsetAllVariables } = get();
+            unsetAllVariables();
+            return Promise.resolve();
+          }
+
           case 'unset-custom-variable': {
             const { unsetVariable } = get();
             const key = getResolvedValue(event.key, customVariables);
@@ -746,6 +752,12 @@ export const createEventsSlice = (set, get) => ({
             return getPageVariable(key);
           }
 
+          case 'unset-all-page-variables': {
+            const { unsetAllPageVariables } = get();
+            unsetAllPageVariables();
+            return Promise.resolve();
+          }
+
           case 'unset-page-variable': {
             const { unsetPageVariable } = get();
             const key = getResolvedValue(event.key, customVariables);
@@ -953,6 +965,13 @@ export const createEventsSlice = (set, get) => ({
         }
       };
 
+      const unsetAllVariables = () => {
+        const event = {
+          actionId: 'unset-all-custom-variables',
+        };
+        return executeAction(event, mode, {});
+      };
+
       const unSetVariable = (key = '') => {
         if (key) {
           const event = {
@@ -1066,6 +1085,13 @@ export const createEventsSlice = (set, get) => ({
         return executeAction(event, mode, {});
       };
 
+      const unsetAllPageVariables = () => {
+        const event = {
+          actionId: 'unset-all-page-variables',
+        };
+        return executeAction(event, mode, {});
+      };
+
       const unsetPageVariable = (key = '') => {
         const event = {
           actionId: 'unset-page-variable',
@@ -1133,6 +1159,7 @@ export const createEventsSlice = (set, get) => ({
         runQuery,
         setVariable,
         getVariable,
+        unsetAllVariables,
         unSetVariable,
         showAlert,
         logout,
@@ -1144,6 +1171,7 @@ export const createEventsSlice = (set, get) => ({
         generateFile,
         setPageVariable,
         getPageVariable,
+        unsetAllPageVariables,
         unsetPageVariable,
         switchPage,
         logInfo,

frontend/src/AppBuilder/_stores/slices/resolvedSlice.js

@@ -140,6 +140,21 @@ export const createResolvedSlice = (set, get) => ({
     get().updateDependencyValues(`variables.${key}`);
   },
 
+  unsetAllVariables: (moduleId = 'canvas') => {
+    const variables = get().resolvedStore.modules[moduleId].exposedValues.variables;
+    set(
+      (state) => {
+        state.resolvedStore.modules[moduleId].exposedValues.variables = {};
+      },
+      false,
+      'unsetAllVariables'
+    );
+    Object.keys(variables).forEach((key) => {
+      get().removeNode(`variables.${key}`);
+      get().updateDependencyValues(`variables.${key}`);
+    });
+  },
+
   // page.variables
   setPageVariable: (key, value, moduleId = 'canvas') => {
     set(
@@ -167,6 +182,21 @@ export const createResolvedSlice = (set, get) => ({
     get().updateDependencyValues(`page.variables.${key}`);
   },
 
+  unsetAllPageVariables: (moduleId = 'canvas') => {
+    const pageVariables = get().resolvedStore.modules[moduleId].exposedValues.page.variables;
+    set(
+      (state) => {
+        state.resolvedStore.modules[moduleId].exposedValues.page.variables = {};
+      },
+      false,
+      'unsetAllPageVariables'
+    );
+    Object.keys(pageVariables).forEach((key) => {
+      get().removeNode(`page.variables.${key}`);
+      get().updateDependencyValues(`page.variables.${key}`);
+    });
+  },
+
   setResolvedQuery: (queryId, details, moduleId = 'canvas') => {
     set(
       (state) => {

frontend/src/AppBuilder/_stores/utils.js

@@ -473,6 +473,7 @@ export function createReferencesLookup(currentState, forQueryParams = false, ini
   const actions = [
     'runQuery',
     'setVariable',
+    'unsetAllVariables',
     'unSetVariable',
     'showAlert',
     'logout',
@@ -483,6 +484,7 @@ export function createReferencesLookup(currentState, forQueryParams = false, ini
     'goToApp',
     'generateFile',
     'setPageVariable',
+    'unsetAllPageVariables',
     'unsetPageVariable',
     'switchPage',
     'logInfo',

frontend/src/Editor/ActionTypes.js

@@ -78,6 +78,10 @@ export const ActionTypes = [
       { name: 'value', type: 'code', default: '' },
     ],
   },
+  {
+    name: 'Unset all variables',
+    id: 'unset-all-custom-variables',
+  },
   {
     name: 'Unset variable',
     id: 'unset-custom-variable',
@@ -96,6 +100,10 @@ export const ActionTypes = [
       { name: 'value', type: 'code', default: '' },
     ],
   },
+  {
+    name: 'Unset all page variables',
+    id: 'unset-all-page-variables',
+  },
   {
     name: 'Unset page variable',
     id: 'unset-page-variable',
@@ -104,6 +112,7 @@ export const ActionTypes = [
       { name: 'value', type: 'code', default: '' },
     ],
   },
+
   {
     name: 'Control component',
     id: 'control-component',