Allow users to provide feedback via Google Form after site is deployed (#88)

* Allow users to provide feedback via Google Form after site is deployed

* WIP

* Tests for deploy button

* Check ZIP path

* Fix Typescript errors

Author: audiodude

docker-compose-dev.yml

@@ -3,7 +3,7 @@ version: '3.8'
 services:
   rainfall-db-dev:
     image: mariadb:latest
-    container_name: mariadb
+    container_name: rainfall-mariadb
     environment:
       MYSQL_ROOT_PASSWORD: rainfall-dev-db
       MYSQL_DATABASE: rainfall_dev

rainfall-frontend/cypress/e2e/edit_site.cy.ts

@@ -83,6 +83,10 @@ describe('Edit Site test', () => {
           cy.get('#new-release-button').should('be.disabled');
         });
 
+        it('starts with the deploy button disabled', () => {
+          cy.get('#deploy-site-button').should('be.disabled');
+        });
+
         describe('when a release is added', () => {
           beforeEach(() => {
             cy.intercept('POST', 'api/v1/release', {
@@ -217,7 +221,7 @@ describe('Edit Site test', () => {
           cy.get('#preview-site-button').should('not.be.disabled');
         });
 
-        describe.only('when the preview button is clicked', () => {
+        describe('when the preview button is clicked', () => {
           let calledPreview = false;
           beforeEach(() => {
             cy.intercept('POST', 'api/v1/preview/06547ed8-206f-7d3d-8000-20ab423e0bb9', (req) => {
@@ -247,6 +251,11 @@ describe('Edit Site test', () => {
             cy.wrap(calledPreview).should('eq', true);
           });
 
+          it('enables the deploy button', () => {
+            cy.wait('@preview-site');
+            cy.get('#deploy-site-button').should('not.be.disabled');
+          });
+
           it('shows a loading message', () => {
             cy.get('.preview-load').find('.loader').should('be.visible');
             cy.get('.preview-load').should('not.contain', 'Open preview in new window');
@@ -264,6 +273,14 @@ describe('Edit Site test', () => {
               .should('not.be.empty')
               .and('contain', '/preview');
           });
+
+          it('has the right URL for the deploy ZIP link', () => {
+            cy.wait('@preview-site');
+            cy.get('#deploy-zip-button')
+              .should('have.attr', 'href')
+              .should('not.be.empty')
+              .and('contain', '/zip');
+          });
         });
 
         describe('and the delete button is successfully pressed for one of the files', () => {

rainfall-frontend/src/components/DeployButton.vue

@@ -14,13 +14,18 @@ export default {
   mounted() {
     initFlowbite();
   },
+  methods: {
+    gotoFeedbackPage() {
+      this.$router.push('/feedback');
+    },
+  },
 };
 </script>
 
 <template>
   <div class="mt-4 block text-center md:text-left md:flex md:items-center">
     <button
-      id="dropdownDefaultButton"
+      id="deploy-site-button"
       :disabled="!readyForDeploy"
       data-dropdown-toggle="dropdown"
       class="inline-flex items-center justify-center cursor-pointer w-10/12 md:w-48 p-4 md:py-2 text-xl md:text-base disabled:cursor-auto bg-blue-600 text-grey-200 disabled:bg-blue-400 disabled:text-white hover:bg-blue-800 disabled:hover:bg-blue-400 focus:ring-4 focus:outline-none focus:ring-blue-300 font-semibold text-gray-100 hover:text-white px-4 border border-blue-500 rounded hover:border-transparent disabled:hover:border-blue-500"
@@ -62,7 +67,9 @@ export default {
         </li>
         <li>
           <a
+            id="deploy-zip-button"
             :href="downloadUrl"
+            @click="gotoFeedbackPage()"
             class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
             >Download .ZIP</a
           >

rainfall-frontend/src/components/Feedback.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <h1 class="text-gray-900 dark:text-white text-2xl md:text-2xl font-extrabold mb-2">
+      Thank you for using Rainfall!
+    </h1>
+    <p class="mt-4 w-full md:w-3/4">
+      This project has been coded, deployed and is run by a single person (<a
+        class="text-blue-500 hover:underline"
+        href="https://travisbriggs.com"
+        >Travis Briggs</a
+      >). I'm so glad you have taken the time to use it. If you have a few minutes, any feedback you
+      could provide at the following form would really help me understand who is using the site and
+      what they are using it for. It will help me make Rainfall better and more useful for everyone.
+      Thanks!
+    </p>
+    <a
+      href="https://docs.google.com/forms/d/e/1FAIpQLSca4myLs9S0kw1DTA5MOB2OGUDP27f6qaTBELT2oDXjAEyUHw/viewform?usp=header"
+      target="_blank"
+      class="block cursor-pointer mx-auto md:mx-0 text-center mt-4 w-10/12 md:w-48 p-4 md:py-2 text-xl md:text-base bg-blue-600 text-grey-200 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-semibold text-gray-100 hover:text-white px-4 border border-blue-500 rounded hover:border-transparent"
+    >
+      Provide feedback
+    </a>
+  </div>
+</template>

rainfall-frontend/src/router/index.ts

@@ -7,6 +7,7 @@ import NotFoundView from '../views/NotFoundView.vue';
 import EditSiteView from '../views/EditSiteView.vue';
 import EditReleaseView from '@/views/EditReleaseView.vue';
 import DeployNetlifyView from '@/views/DeployNetlifyView.vue';
+import FeedbackView from '@/views/FeedbackView.vue';
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -39,6 +40,7 @@ const router = createRouter({
     { path: '/mastodon', name: 'mastodonLogin', component: MastodonLoginView },
     { path: '/deploy/:site_id/netlify', name: 'deployNetlify', component: DeployNetlifyView },
 
+    { path: '/feedback', name: 'feedback', component: FeedbackView },
     // 404 page
     { path: '/:pathMatch(.*)*', name: 'notfound', component: NotFoundView },
   ],

rainfall-frontend/src/views/DeployNetlifyView.vue

@@ -3,8 +3,10 @@ import { mapStores } from 'pinia';
 import { useUserStore } from '@/stores/user';
 import { getCsrf } from '@/helpers/cookie';
 import { type Site } from '@/types/site';
+import Feedback from '@/components/Feedback.vue';
 
 export default {
+  components: { Feedback },
   data(): {
     site: null | Site;
     sitesError: string;
@@ -42,9 +44,15 @@ export default {
     hasNetlifyToken(): boolean {
       return !!this.userStore.user?.integration?.has_netlify_token;
     },
+    doneDeploying(): boolean {
+      return !!this.site && !!this.site.netlify_url && !this.deploying;
+    },
     ...mapStores(useUserStore),
   },
   methods: {
+    gotoFeedbackPage() {
+      this.$router.push('/feedback');
+    },
     getCsrf() {
       return getCsrf();
     },
@@ -174,7 +182,7 @@ export default {
           <span class="sr-only">Deploying your site...</span>
         </div>
         <div
-          v-if="site && site.netlify_url && !deploying"
+          v-if="doneDeploying && site"
           id="netlify-deploy-result"
           class="ml-4 mt-1 md:mt-0 text-sm text-center md:text-left md:leading-[2.5rem]"
         >
@@ -185,5 +193,6 @@ export default {
         </div>
       </div>
     </div>
+    <Feedback v-if="doneDeploying" class="mt-8" />
   </div>
 </template>

rainfall-frontend/src/views/FeedbackView.vue

@@ -0,0 +1,27 @@
+<script lang="ts">
+import { mapStores } from 'pinia';
+import { useUserStore } from '@/stores/user';
+import Feedback from '@/components/Feedback.vue';
+
+export default {
+  components: { Feedback },
+  async mounted() {
+    await this.userStore.loadUser();
+    const user = this.userStore.user;
+    if (!user) {
+      this.$router.replace('/');
+      return;
+    }
+    if (!user.is_welcomed) {
+      this.$router.replace('/welcome');
+    }
+  },
+  computed: {
+    ...mapStores(useUserStore),
+  },
+};
+</script>
+
+<template>
+  <Feedback></Feedback>
+</template>