[CSV] Export whole collection via Kourou (#983)

Adds to the CSV export prompt a copy-pastable no-brainer Kourou command allowing to export the whole collection.

src/components/Data/Documents/Common/ExportCSVModal.vue

@@ -0,0 +1,96 @@
+<template>
+  <b-modal
+    :id="modalId"
+    ok-title="OK, only export visible elements"
+    size="lg"
+    @ok="$emit('ok')"
+  >
+    <p>
+      Please, be aware that the documents that will be exported, are ONLY the
+      ones that are currently displayed and NOT the whole collection.
+    </p>
+    <b-card no-body class="mb-1">
+      <b-card-header header-tag="header" class="p-1" role="tab">
+        <b-button block v-b-toggle.accordion-1 variant="link"
+          >Learn how to export ALL the documents in the collection</b-button
+        >
+      </b-card-header>
+      <b-collapse id="accordion-1" accordion="my-accordion" role="tabpanel">
+        <b-card-body>
+          <b-card-text
+            >Full collection CSV export is performed by
+            <a href="https://github.com/kuzzleio/kourou">Kourou</a>, our CLI
+            interface. If you don't have Kourou installed on your computer or
+            you are not familiar with Kourou, please refer to its
+            <a href="">README.md</a>.
+          </b-card-text>
+          <b-card-text
+            >Once you have Kourou installed on your system, please open a
+            terminal window and copy-paste the following command
+          </b-card-text>
+
+          <b-card-text>
+            <pre class="code" ref="kourouCommand">{{ kourouCmd }}</pre>
+          </b-card-text>
+          <div class="text-right">
+            <b-button variant="info" @click="copyCommandToClipboard">
+              <i class="far fa-clipboard"></i> Copy command to
+              clipboard</b-button
+            >
+          </div>
+        </b-card-body>
+      </b-collapse>
+    </b-card>
+  </b-modal>
+</template>
+
+<script>
+export default {
+  name: 'ExportCSVModal',
+  props: {
+    modalId: {
+      type: String,
+      required: true
+    },
+    collection: {
+      type: String,
+      required: true
+    },
+    index: {
+      type: String,
+      required: true
+    },
+    host: {
+      type: String,
+      required: true
+    },
+    port: Number,
+    ssl: Boolean,
+    token: String,
+    selectedFields: {
+      type: Array,
+      required: true
+    }
+  },
+  computed: {
+    kourouCmd() {
+      return (
+        `kourou collection:export ${this.index} ${
+          this.collection
+        } --format csv --fields ${this.selectedFields.join(',')} --host ${
+          this.host
+        } --port ${this.port}` +
+        (this.ssl ? ' --ssl' : '') +
+        (this.token ? ` --api-key ${this.token}` : '')
+      )
+    }
+  },
+  methods: {
+    copyCommandToClipboard() {
+      navigator.clipboard.writeText(this.kourouCmd)
+    }
+  }
+}
+</script>
+
+<style></style>

src/components/Data/Documents/Views/Column.vue

@@ -226,6 +226,16 @@
         </b-table-simple>
       </b-col>
     </b-row>
+    <export-csv-modal
+      :modal-id="csvExportPromptModalID"
+      :index="index"
+      :collection="collection"
+      :selected-fields="selectedFields"
+      :host="currentEnvironment.host"
+      :port="currentEnvironment.port"
+      :ssl="currentEnvironment.ssl"
+      :token="user.token"
+    />
   </div>
 </template>
 
@@ -237,6 +247,7 @@ import { mapGetters } from 'vuex'
 import draggable from 'vuedraggable'
 import HeaderTableView from '../HeaderTableView'
 import PerPageSelector from '@/components/Common/PerPageSelector'
+import ExportCsvModal from '@/components/Data/Documents/Common/ExportCSVModal'
 import { convertToCSV } from '@/services/collectionHelper'
 
 export default {
@@ -247,7 +258,8 @@ export default {
   components: {
     draggable,
     HeaderTableView,
-    PerPageSelector
+    PerPageSelector,
+    ExportCsvModal
   },
   props: {
     allChecked: Boolean,
@@ -280,7 +292,8 @@ export default {
     }
   },
   computed: {
-    ...mapGetters('auth', ['canEditDocument', 'canDeleteDocument']),
+    ...mapGetters('auth', ['canEditDocument', 'canDeleteDocument', 'user']),
+    ...mapGetters('kuzzle', ['currentEnvironment']),
     hasSelectedDocuments() {
       return this.selectedDocuments.length > 0
     },
@@ -326,24 +339,7 @@ export default {
   methods: {
     isObject: _.isObject,
     promptExportCSV() {
-      this.$bvModal
-        .msgBoxConfirm(
-          'Please, be aware that the documents that will be exported, are ONLY the ones that are currently displayed and NOT the whole collection.',
-          {
-            title: 'Please Confirm',
-            okVariant: 'primary',
-            okTitle: 'Export displayed documents',
-            cancelTitle: 'Cancel',
-            footerClass: 'p-2',
-            hideHeaderClose: false,
-            centered: true
-          }
-        )
-        .then(value => {
-          if (value) {
-            this.exportToCSV()
-          }
-        })
+      this.$bvModal.show(this.csvExportPromptModalID)
     },
     exportToCSV() {
       const blob = new Blob([
@@ -453,6 +449,9 @@ export default {
       this.fieldList = this.buildFieldList(this.mapping)
     }
   },
+  created() {
+    this.csvExportPromptModalID = 'export-csv-prompt'
+  },
   mounted() {
     this.initFields()
   },