Merge pull request #2641 from nocodb/feat/2640-add-dynamic-feedback-form-submission

feat/add-dynamic-feedback-form-submission

packages/nc-gui/components/FeedbackForm.vue

@@ -1,14 +1,8 @@
 <template>
-  <div v-if="!feedbackFormHidden" class="nc-feedback-form-wrapper">
+  <div v-if="!feedbackFormIsHidden" 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="feedbackFormIsHidden = true"> mdi-close-circle-outline </v-icon>
 
-    <iframe
+    <iframe :src="feedbackFormUrl" width="100%" height="500" frameborder="0" marginheight="0" marginwidth="0"
-      src="https://docs.google.com/forms/d/e/1FAIpQLSeTlAfZjszgr53lArz3NvUEnJGOT9JtG9NAU5d0oQwunDS2Pw/viewform?embedded=true"
-      width="100%"
-      height="500"
-      frameborder="0"
-      marginheight="0"
-      marginwidth="0"
       >Loading…
     </iframe>
   </div>
@@ -19,14 +13,17 @@
 export default {
   name: 'FeedbackForm',
   computed: {
-    feedbackFormHidden: {
+    feedbackFormIsHidden: {
       get() {
-        return this.$store.state.settings.feedbackFormHidden;
+        return this.$store.state.settings.feedbackForm.isHidden;
       },
-      set(val) {
+      set(isHidden) {
-        this.$store.commit('settings/MutFeedbackFormHidden', val);
+        this.$store.commit('settings/MutFeedbackForm', { ...this.$store.state.settings.feedbackForm, isHidden });
       },
     },
+    feedbackFormUrl() {
+      return this.$store.state.settings.feedbackForm.url;
+    },
   },
 };
 </script>

packages/nc-gui/plugins/projectLoader.js

@@ -1,3 +1,8 @@
+import dayjs from 'dayjs'
+import duration from 'dayjs/plugin/duration'
+
+dayjs.extend(duration)
+
 export default async({ store, redirect, $axios, $toast, $api, route }) => {
   // if (!route.path || !route.path.startsWith('/nc/')) { await store.dispatch('plugins/pluginPostInstall', 'Branding') }
   if (window.location.search &&
@@ -80,6 +85,36 @@ 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(now) => {
+    try {
+      const { data: feedbackForm } = await $axios.get('/api/v1/feedback_form')
+      const currentFeedbackForm = store.state.settings.feedbackForm
+
+      const isFetchedFormDuplicate = currentFeedbackForm.url === feedbackForm.url
+
+      store.commit('settings/MutFeedbackForm', {
+        url: feedbackForm.url,
+        lastFormPollDate: now.toISOString(),
+        createdAt: feedbackForm.created_at,
+        isHidden: isFetchedFormDuplicate ? currentFeedbackForm.isHidden : false
+      })
+    } catch (e) {
+      // ignore
+    }
+  }
+
+  const isFirstTimePolling = !store.state.settings.feedbackForm.lastFormPollDate
+
+  const now = dayjs()
+  const lastFormPolledDate = dayjs(store.state.settings.feedbackForm.lastFormPollDate)
+
+  if (isFirstTimePolling || (dayjs.duration(now.diff(lastFormPolledDate)).days() > 0)) {
+    fetchFeedbackForm(now)
+  }
 }
 /**
  * @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'),
+    isHidden: false
+  }
 })
 
 export const mutations = {
@@ -52,8 +57,8 @@ export const mutations = {
   MutToggleLogWindow(state, show) {
     state.logWindow = !state.logWindow
   },
-  MutFeedbackFormHidden(state, show) {
+  MutFeedbackForm(state, feedbackForm) {
-    state.feedbackFormHidden = show
+    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 feedbackFormGet(_req: Request, res: Response) {
+  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(feedbackFormGet));
 };