feat: add information message when editing formula cell

packages/nc-gui/components/project/spreadsheet/components/virtualCell/FormulaCell.vue

@@ -1,6 +1,11 @@
 <template>
+  <div>
     <v-tooltip
-    v-if="column && column.colOptions&& column.colOptions.error"
+      v-if="
+        column
+          &&
+          column.colOptions&&
+          column.colOptions.error"
       bottom
       color="error"
     >
@@ -9,10 +14,17 @@
       </template>
       <span class=" font-weight-bold">{{ column.colOptions.error }}</span>
     </v-tooltip>
-  <div v-else-if="urls" v-html="urls" />
+    <div class="formula-cell-wrapper" @dblclick="showEditFormulaWarningMessage">
+      <div v-if="urls" v-html="urls" />
       <div v-else>
         {{ result }}
       </div>
+      <div v-if="showEditFormulaWarning == true" class="edit-warning">
+        <!-- TODO: i18n -->
+        Warning: Formula fields should be configured in the field menu dropdown.
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -21,6 +33,9 @@ import dayjs from 'dayjs'
 export default {
   name: 'FormulaCell',
   props: { column: Object, row: Object, client: String },
+  data: () => ({
+    showEditFormulaWarning: false
+  }),
   computed: {
     result() {
       if (this.client === 'pg') {
@@ -53,11 +68,25 @@ export default {
       return val.replace(/((?:-?(?:[1-9][0-9]*)?[0-9]{4})-(?:1[0-2]|0[1-9])-(?:3[01]|0[1-9]|[12][0-9])T(?:2[0-3]|[01][0-9]):(?:[0-5][0-9]):(?:[0-5][0-9])(?:\.[0-9]+)?(?:Z|[+-](?:2[0-3]|[01][0-9]):[0-5][0-9]))/g, (i, v) => {
         return dayjs(v).format('YYYY-MM-DD HH:mm')
       })
+    },
+    showEditFormulaWarningMessage() {
+      this.showEditFormulaWarning = true
+      setTimeout(() => {
+        this.showEditFormulaWarning = false
+      }, 3000)
     }
   }
 }
 </script>
 
-<style scoped>/**/
+<style scoped>
+  .formula-cell-wrapper {
+    padding: 10px;
+  }
 
+  .edit-warning {
+    text-align: left;
+    margin-top: 10px;
+    color: #E65100;
+  }
 </style>