Rename simple->basic and advanced->expert in the UI. Only show a confirmation dialog on an advanced->simple change if there's a value to lose. (baserow#4337)

Author: picklepete

web-frontend/locales/en.json

@@ -686,13 +686,6 @@
     "categoryDate": "Date",
     "categoryCondition": "Condition"
   },
-  "formulaInputContext": {
-    "useRegularInput": "Use regular input",
-    "useRegularInputModalTitle": "Switch to regular input?",
-    "useAdvancedInputModalTitle": "Switch to advanced input?",
-    "useAdvancedInput": "Use advanced input",
-    "modalMessage": "Switching to a different input mode will clear the current formula. Are you sure you want to continue?"
-  },
   "nodeExplorer": {
     "noResults": "No results found",
     "resetSearch": "Reset search"

web-frontend/modules/core/components/formula/FormulaInputContext.vue

@@ -22,7 +22,7 @@
         @click="toggleMode"
         >{{
           isAdvancedMode
-            ? $t('formulaInputContext.useRegularInput')
+            ? $t('formulaInputContext.useSimpleInput')
             : $t('formulaInputContext.useAdvancedInput')
         }}</ButtonText
       >
@@ -32,7 +32,7 @@
       <h2 class="box__title">
         {{
           isAdvancedMode
-            ? $t('formulaInputContext.useRegularInputModalTitle')
+            ? $t('formulaInputContext.useSimpleInputModalTitle')
             : $t('formulaInputContext.useAdvancedInputModalTitle')
         }}
       </h2>
@@ -46,7 +46,7 @@
           <Button type="danger" size="large" @click="confirmModeChange">
             {{
               isAdvancedMode
-                ? $t('formulaInputContext.useRegularInput')
+                ? $t('formulaInputContext.useSimpleInput')
                 : $t('formulaInputContext.useAdvancedInput')
             }}
           </Button>
@@ -90,6 +90,16 @@ export default {
         return ['advanced', 'simple'].includes(value)
       },
     },
+    /**
+     * Whether the formula input has a formula value set or not.
+     * Used to determine if we need to show a confirmation prompt
+     * or not when the mode changes from advanced to simple.
+     */
+    hasValue: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     allowNodeSelection: {
       type: Boolean,
       required: false,
@@ -170,7 +180,14 @@ export default {
     },
     toggleMode() {
       if (this.mode === 'advanced') {
-        this.showAdvancedModeModal()
+        if (this.hasValue) {
+          // If we have a value then we want the user to confirm
+          // they're happy for the formula to be reset.
+          this.showAdvancedModeModal()
+        } else {
+          // If we have no value then we can safely switch modes.
+          this.$emit('mode-changed', 'simple')
+        }
       } else {
         this.$emit('mode-changed', 'advanced')
       }

web-frontend/modules/core/components/formula/FormulaInputField.vue

@@ -19,6 +19,7 @@
       :node-selected="nodeSelected"
       :loading="loading"
       :mode="mode"
+      :has-value="value.length > 0"
       :allow-node-selection="allowNodeSelection"
       :nodes-hierarchy="nodesHierarchy"
       @node-selected="handleNodeSelected"

web-frontend/modules/core/locales/en.json

@@ -846,10 +846,11 @@
     "operators": "Operators",
     "search": "Search",
     "useRegularInputModalTitle": "Use regular input for this field?",
-    "useRegularInput": "Use regular input",
-    "useAdvancedInput": "Use advanced input",
-    "useAdvancedInputModalTitle": "Use advanced input for this field?",
-    "modalMessage": "Your field’s content will be cleared and it will not be possible to recover it."
+    "useSimpleInput": "Switch to basic mode",
+    "useSimpleInputModalTitle": "Switch to basic mode?",
+    "useAdvancedInput": "Switch to expert mode",
+    "useAdvancedInputModalTitle": "Switch to expert mode?",
+    "modalMessage": "Switching to a different mode will clear the current formula. Are you sure you want to continue?"
   },
   "dataExplorer": {
     "noMatchingNodesText": "No matching results were found.",