feat/add-dynamic-feedback-form-submission

packages/nc-gui/components/FeedbackForm.vue

@@ -1,15 +1,17 @@
 <template>
   <div v-if="!feedbackFormHidden" class="nc-feedback-form-wrapper">
-    <v-icon class="nc-close-icon" large @click="feedbackFormHidden = true"> mdi-close-circle-outline </v-icon>
+    <v-icon class="nc-close-icon" large @click="feedbackFormHidden = true">
+      mdi-close-circle-outline
+    </v-icon>
 
     <iframe
-      src="https://docs.google.com/forms/d/e/1FAIpQLSeTlAfZjszgr53lArz3NvUEnJGOT9JtG9NAU5d0oQwunDS2Pw/viewform?embedded=true"
+      :src="feedbackFormUrl"
       width="100%"
       height="500"
       frameborder="0"
       marginheight="0"
       marginwidth="0"
-      >Loading…
+    >Loading…
     </iframe>
   </div>
   <div v-else />
@@ -21,14 +23,18 @@ export default {
   computed: {
     feedbackFormHidden: {
       get() {
-        return this.$store.state.settings.feedbackFormHidden;
-      },
-      set(val) {
-        this.$store.commit('settings/MutFeedbackFormHidden', val);
+        return this.$store.state.settings.feedbackForm.isShown
       },
+      set(isShown) {
+        this.$store.commit(
+          'settings/MutFeedbackForm', { ...this.$store.state.settings.feedbackForm, isShown })
+      }
     },
-  },
-};
+    feedbackFormUrl() {
+      return this.$store.state.settings.feedbackForm.url
+    }
+  }
+}
 </script>
 
 <style scoped lang="scss">

packages/nc-gui/plugins/projectLoader.js

@@ -80,6 +80,40 @@ export default async({ store, redirect, $axios, $toast, $api, route }) => {
   fetchReleaseInfo().then(() => {
   })
   setInterval(fetchReleaseInfo, 10 * 60 * 1000)
+  handleFeedbackForm({ store, $axios })
+}
+
+const handleFeedbackForm = async({ store, $axios }) => {
+  const fetchFeedbackForm = async() => {
+    try {
+      const { data: feedbackForm } = await $axios.get('/api/v1/feedback_form')
+      const currentFeedbackForm = store.state.settings.feedbackForm
+
+      if (
+        feedbackForm.url !== currentFeedbackForm.url ||
+        feedbackForm.valid_till !== currentFeedbackForm.validTill
+      ) {
+        store.commit('settings/MutFeedbackForm', {
+          url: feedbackForm.url,
+          validTill: feedbackForm.valid_till,
+          createdAt: feedbackForm.created_at,
+          isShown: false
+        })
+      }
+    } catch (e) {
+      // ignore
+    }
+  }
+
+  const lastFeedbackFormExpirationDate = new Date(store.state.settings.feedbackForm.validTill)
+  const isDateValid = date => date instanceof Date && !isNaN(date.getTime())
+
+  if (
+    !isDateValid(lastFeedbackFormExpirationDate) ||
+    Date.now() > lastFeedbackFormExpirationDate.getTime()
+  ) {
+    fetchFeedbackForm()
+  }
 }
 /**
  * @copyright Copyright (c) 2021, Xgene Cloud Ltd

packages/nc-gui/store/settings.js

@@ -39,7 +39,12 @@ export const state = () => ({
   autoApplyFilter: true,
   apiLoading: false,
   includeM2M: false,
-  feedbackFormHidden: false
+  feedbackForm: {
+    // eslint-disable-next-line max-len
+    url: 'https://docs.google.com/forms/d/e/1FAIpQLSeTlAfZjszgr53lArz3NvUEnJGOT9JtG9NAU5d0oQwunDS2Pw/viewform?embedded=true',
+    createdAt: new Date('2020-01-01T00:00:00.000Z'),
+    isShown: false
+  }
 })
 
 export const mutations = {
@@ -52,8 +57,8 @@ export const mutations = {
   MutToggleLogWindow(state, show) {
     state.logWindow = !state.logWindow
   },
-  MutFeedbackFormHidden(state, show) {
-    state.feedbackFormHidden = show
+  MutFeedbackForm(state, feedbackForm) {
+    state.feedbackForm = feedbackForm
   },
   MutScreensaver(state, show) {
     state.screensaver = show

packages/nocodb/src/lib/meta/api/utilApis.ts

@@ -60,6 +60,17 @@ export async function releaseVersion(_req: Request, res: Response) {
   res.json(result);
 }
 
+export async function getFeedbackForm(_req: Request, res: Response) {
+  await axios
+    .get('https://nocodb.com/api/v1/feedback_form')
+    .then((response) => {
+      res.json(response.data);
+    }).catch((e) => {
+      res.status(500).json({ error: e.message });
+    });
+}
+
+
 export async function appHealth(_: Request, res: Response) {
   res.json({
     message: 'OK',
@@ -144,4 +155,5 @@ export default (router) => {
   router.post('/api/v1/db/meta/axiosRequestMake', catchError(axiosRequestMake));
   router.get('/api/v1/version', catchError(releaseVersion));
   router.get('/api/v1/health', catchError(appHealth));
+  router.get('/api/v1/feedback_form', catchError(getFeedbackForm));
 };