T347865: Ask for feedback before deleting a wikibase instance. (#801)

* Fix Settings panel position on the page

* Added the "confirm delete" modal with fedback questions

* Fix lint errors

* Use v-dialog for the delete card

* Modify delete card to be like on figma

* Fix spacing between components on the confirm delete card

* Fix bug on delete reason checkboxes

Author: rosalieper

src/components/Pages/ManageWiki/Cards/ConfirmDelete.vue

@@ -0,0 +1,105 @@
+<template>
+  <v-dialog v-model="open_dialog" width="auto" persistent>
+    <v-card>
+      <v-card-title>
+        Confirm Deletion
+      </v-card-title>
+      <v-card-text class="align-start pb-4">
+        Before you delete your Wikibase instance, <br/>
+        please let us know the reason for your deletion.<br/>
+        Please select all that apply.
+      </v-card-text>
+      <div class="px-4 pb-2">
+        <v-checkbox
+          class="ma-0" hide-details
+          label="Was only used for Testing"
+          v-model="deletion_reasons"
+          value="Was only used for testing"
+        />
+        <v-checkbox
+          class="ma-0"
+          hide-details
+          label="Lacking essential
+          functionality"
+          v-model="deletion_reasons"
+          value="Lacking essential functionality"
+        />
+        <v-checkbox
+          class="ma-0"
+          hide-details
+          label="Too complex to work with"
+          v-model="deletion_reasons"
+          value="Too complex to work with"
+        />
+        <v-checkbox
+          class="ma-0"
+          hide-details
+          label="Other reasons (please specify)"
+          v-model="deletion_reasons"
+          value="Other Reason"
+        />
+      </div>
+        <div class="px-4 align-self-stretch align-start">
+          <p class="ma-0">Please elaborate:</p>
+          <v-text-field
+            class="ma-0"
+            outlined
+            dense
+            hide-details
+            v-model="inputReason"
+            placeholder="e.g. ran out of space to create new wiki"
+          ></v-text-field>
+        </div>
+      <v-card-actions class="justify-end">
+        <v-btn
+          text
+          @click='close'
+        >Cancel</v-btn>
+        <v-btn
+          text
+          @click="doDelete"
+          variant="light"
+          class="red--text"
+        >Delete Wikibase</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+<script>
+export default {
+  name: 'ConfirmDelete',
+  props: [
+    'wikiId'
+  ],
+  data () {
+    return {
+      deletion_reasons: [],
+      open_dialog: true,
+      inputReason: ''
+    }
+  },
+  methods: {
+    doDelete () {
+      const wiki = this.wikiId
+      const deletionReasons = this.deletion_reasons
+
+      if (deletionReasons.includes('Other Reason')) {
+        deletionReasons[deletionReasons.indexOf('Other Reason')] = this.inputReason
+      }
+      this.$store
+        .dispatch('deleteWiki', { wiki, deletionReasons })
+        .then(() => this.$router.push('/dashboard'))
+        .catch(err => {
+          console.log(err.response)
+          alert('Something went wrong.')
+          this.$router.push('/dashboard')
+        })
+    },
+    close () {
+      this.$emit('close')
+    }
+  }
+}
+</script>
+<style>
+</style>

src/components/Pages/ManageWiki/Cards/Delete.vue

@@ -1,44 +1,28 @@
 <template>
-  <v-card color="#fad1d0">
-    <v-card-title>Delete Site</v-card-title>
-    <v-card-text>
-      Selecting Confirm Deletion will permanently delete the selected Wikibase instance.<br>
-      All data associated with this instance will be purged permanently in 30 days.<br>
-      <br>
-      The domain will <strong>not</strong> be available for reuse.
-    </v-card-text>
-    <v-card-actions>
-      <v-btn v-if="!expandDelete" @click="expandDelete = true" color="red">Delete site</v-btn>
-      <v-btn v-if="expandDelete" @click="expandDelete = false" color="blue">Cancel deletion</v-btn>
-      <v-btn v-if="expandDelete" @click="doDelete" color="red">Confirm deletion</v-btn>
-    </v-card-actions>
+  <v-card class="pa-4" color="#fad1d0">
+    <p class="text-h5 ma-0">Delete Wikibase Instance</p>
+    <p class="text-sm-body-2">
+      Selecting Confirm Deletion will permanently delete the selected Wikibase instance. All data associated <br/>
+      with this instance will be purged permanently in 30 days. The domain will <strong>not</strong> be available for reuse.
+    </p>
+    <v-btn @click="expandDelete = true" color="red" class="text-sm-button white--text">Delete site</v-btn>
+    <ConfirmDelete v-if="expandDelete" :wiki-id=this.wikiId @close="expandDelete=false"/>
   </v-card>
 </template>
 
 <script>
+import ConfirmDelete from '@/components/Pages/ManageWiki/Cards/ConfirmDelete.vue'
+
 export default {
   name: 'Delete',
+  components: { ConfirmDelete },
   props: [
     'wikiId'
   ],
   data () {
     return {
       expandDelete: false
     }
-  },
-  methods: {
-    doDelete () {
-      const wiki = this.wikiId
-
-      this.$store
-        .dispatch('deleteWiki', { wiki })
-        .then(() => this.$router.push('/dashboard'))
-        .catch(err => {
-          console.log(err.response)
-          alert('Something went wrong.')
-          this.$router.push('/dashboard')
-        })
-    }
   }
 }
 </script>

src/components/Pages/ManageWiki/Cards/QuestyCaptcha.vue

@@ -13,7 +13,7 @@
         :disabled="waitForToggleUpdate"
       />
     </v-col>
-    <v-expansion-panels v-model="panel">
+    <v-expansion-panels class="settings-panel" v-model="panel">
       <v-expansion-panel>
         <v-expansion-panel-header>
           <strong>SETTINGS</strong>
@@ -227,6 +227,9 @@ export default {
   padding-bottom: 0;
   padding-top: 0;
 }
+.settings-panel {
+  position: static;
+}
 .answer-input-field {
   margin-right: 33px !important;
 }