Create KnowledgeEquityCreateWikiWizardStep Card (#1108)

Create a new `KnowledgeEquityCreateWikiWizardStep` card that is displayed as part of the "Create Wiki Wizard" if the user selects the option to keep their wiki on a permanent basis

Bug: T419210
Co-authored-by: Thomas Arrow <thomas.arrow@wikimedia.de>

Author: outdooracorn

src/components/Cards/CreateWiki.vue

@@ -29,6 +29,17 @@
       :error="error"
       v-model="stepThree"
       @previous-step="goToStep(2)"
+      @next-step="goToStep(4)"
+      @submit="createWiki"
+    />
+
+    <KnowledgeEquityCreateWikiWizardStep
+      v-show="step === 4"
+      v-model="stepFour"
+      :title="title"
+      :inFlight="inFlight"
+      :error="error"
+      @previous-step="goToStep(3)"
       @submit="createWiki"
     />
   </v-form>
@@ -39,13 +50,15 @@ import config from '~/config'
 import SiteDetailsCreateWikiWizardStep from './SiteDetailsCreateWikiWizardStep.vue'
 import AudienceAndPurposeWizardStep from './AudienceAndPurposeWizardStep.vue'
 import TemporalityCreateWikiWizardStep from './TemporalityCreateWikiWizardStep.vue'
+import KnowledgeEquityCreateWikiWizardStep from './KnowledgeEquityCreateWikiWizardStep.vue'
 
 export default {
   name: 'CreateWiki',
   components: {
     SiteDetailsCreateWikiWizardStep,
     AudienceAndPurposeWizardStep,
-    TemporalityCreateWikiWizardStep
+    TemporalityCreateWikiWizardStep,
+    KnowledgeEquityCreateWikiWizardStep
   },
   props: [
     'title'
@@ -74,6 +87,10 @@ export default {
         temporality: '',
         otherTemporality: ''
       },
+      stepFour: {
+        selectedOption: '',
+        freeTextResponse: ''
+      },
       hasError: false,
       error: [],
       inFlight: false,
@@ -119,24 +136,30 @@ export default {
         domainToSubmit = this.stepOne.domain
       }
 
-      const profileJSObject = {
+      const profileObject = {
         purpose: this.stepTwo.purpose,
         ...(this.stepTwo.otherPurpose && { purpose_other: this.stepTwo.otherPurpose }),
         ...(this.stepTwo.audience && { audience: this.stepTwo.audience }),
         ...(this.stepTwo.otherAudience && { audience_other: this.stepTwo.otherAudience }),
         temporality: this.stepThree.temporality,
         ...(this.stepThree.otherTemporality && { temporality_other: this.stepThree.otherTemporality })
       }
-      const profileJsonString = JSON.stringify(profileJSObject)
 
-      this.$api.createWiki(
-        {
-          domain: domainToSubmit,
-          sitename: this.stepOne.sitename,
-          username: this.stepOne.username,
-          profile: profileJsonString
+      const requestBody = {
+        domain: domainToSubmit,
+        sitename: this.stepOne.sitename,
+        username: this.stepOne.username,
+        profile: JSON.stringify(profileObject)
+      }
+
+      if (this.stepThree.temporality === 'permanent' && this.stepFour.selectedOption) {
+        requestBody.knowledgeEquityResponse = {
+          selectedOption: this.stepFour.selectedOption,
+          freeTextResponse: this.stepFour.freeTextResponse
         }
-      )
+      }
+
+      this.$api.createWiki(requestBody)
         .then(wikiDetails => this.createSuccess(wikiDetails))
         .catch(errors => this.createFail(errors))
     },

src/components/Cards/KnowledgeEquityCreateWikiWizardStep.vue

@@ -0,0 +1,102 @@
+<template>
+  <v-card class="elevation-12">
+    <v-toolbar dark color="primary">
+      <v-toolbar-title>{{ title }}</v-toolbar-title>
+    </v-toolbar>
+
+    <v-card-text>
+      <v-form ref="form">
+        <div class="text-body-1">
+          We want to
+          <a href="https://meta.wikimedia.org/wiki/Strategy/Wikimedia_movement/2017#Our_strategic_direction:_Service_and_Equity" target="_blank">
+            support knowledge equity</a>
+          in the Wikibase ecosystem and to understand who currently sees their Wikibase contributing towards it.
+          We welcome open responses and any additional feedback via our <a href="/contact" target="_blank">contact form</a>
+          in addition to the options provided below.
+        </div>
+        <v-radio-group
+          label="Do you believe that this Wikibase contributes positively to knowledge equity in the Wikibase ecosystem in any way?"
+          v-model="value.selectedOption"
+          :error-messages="error"
+          :rules="[() => !!value.selectedOption || 'Please select an option.']"
+        >
+          <template v-slot:label>
+            <h3>Do you believe that this Wikibase contributes positively to knowledge equity in the Wikibase ecosystem in any way?</h3>
+          </template>
+          <v-radio value="yes" label="Yes, I believe it does"/>
+          <v-radio value="no" label="No, I don't believe it does"/>
+          <v-radio value="unsure" label="I'm not sure"/>
+          <v-radio value="unsaid" label="I prefer not to say"/>
+        </v-radio-group>
+
+        <v-textarea
+          class="mb-2"
+          outlined
+          placeholder="If you’d like, please tell us in what way(s). For example, through the knowledge it contributes and/or the people holding and sharing it."
+          counter="3000"
+          v-model="value.freeTextResponse"
+          :rules="[() => value.freeTextResponse.length <= 3000 || 'Text must be 3000 characters or less.' ]"
+        />
+        <v-alert
+          outlined
+          text
+          type="warning"
+          icon="mdi-alert-outline"
+        >
+          Please avoid sharing any personal or sensitive information. This information will be visible to WMDE employees and external members of the
+          <a href="https://www.mediawiki.org/wiki/Wikibase/Wikibase.cloud/Hosting_policy_draft_v0.1#4.7_Review_Committee" target="_blank">review committee</a>.
+        </v-alert>
+      </v-form>
+    </v-card-text>
+
+    <v-card-actions>
+      <v-btn
+        type="button"
+        :disabled="inFlight"
+        @click="previousStep"
+      >
+        &lt; Previous
+      </v-btn>
+      <v-btn
+        type="button"
+        color="primary"
+        :disabled="inFlight"
+        @click="submitForm"
+      >
+        Create Wiki
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: 'KnowledgeEquityCreateWikiWizardStep',
+  props: {
+    title: String,
+    inFlight: Boolean,
+    value: Object,
+    error: Array
+  },
+  methods: {
+    previousStep () {
+      this.$emit('previous-step')
+    },
+    submitForm () {
+      if (this.$refs.form.validate() === false) {
+        return
+      }
+
+      this.$emit('submit')
+    }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+.v-card__actions {
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+}
+</style>

src/components/Cards/TemporalityCreateWikiWizardStep.vue

@@ -81,9 +81,9 @@
         type="button"
         color="primary"
         :disabled="inFlight"
-        @click="submitWholeForm"
+        @click="primaryBtnAction"
       >
-        Create Wiki
+        {{primaryBtnLabel}}
       </v-btn>
     </v-card-actions>
   </v-card>
@@ -98,26 +98,39 @@ export default {
     value: Object,
     error: Array
   },
+  computed: {
+    primaryBtnLabel () {
+      if (this.value.temporality === 'permanent') {
+        return 'Next >'
+      } else {
+        return 'Create Wiki'
+      }
+    }
+  },
   methods: {
-    previousStep () {
+    primaryBtnAction () {
       if (this.value.temporality !== 'other') {
         this.value.otherTemporality = undefined
       }
 
-      this.$emit('previous-step')
+      if (this.$refs.inputForm.validate() === false) {
+        return
+      }
+
+      if (this.value.temporality === 'permanent') {
+        this.$emit('next-step')
+      } else {
+        this.$emit('submit')
+      }
     },
-    submitWholeForm () {
+    previousStep () {
       if (this.value.temporality !== 'other') {
         this.value.otherTemporality = undefined
       }
 
-      this.$refs.inputForm.validate()
-      if (this.$refs.inputForm.validate() === true) {
-        this.$emit('submit')
-      }
+      this.$emit('previous-step')
     }
   }
-
 }
 </script>