feat: add a 'how to' component

- to be used in place of the empty state

src/components/HowTo.vue

@@ -0,0 +1,38 @@
+<template>
+  <button
+    @click="openHelpLink"
+    class="
+      text-gray-900
+      shadow-md
+      px-3
+      py-2
+      flex
+      items-center
+      mb-3
+      z-10
+      bg-white
+      rounded-lg
+      text-base
+    "
+  >
+    <FeatherIcon class="h-6 w-6 mr-3 text-blue-400" name="help-circle" />
+    <p class="mr-1"><slot></slot></p>
+  </button>
+</template>
+<script>
+import { IPC_MESSAGES } from '@/messages';
+import { ipcRenderer } from 'electron';
+import FeatherIcon from './FeatherIcon.vue';
+
+export default {
+  props: {
+    link: String,
+  },
+  methods: {
+    openHelpLink() {
+      ipcRenderer.send(IPC_MESSAGES.OPEN_EXTERNAL, this.link);
+    },
+  },
+  components: { FeatherIcon },
+};
+</script>

src/pages/DataImport.vue

@@ -144,7 +144,7 @@
         >
           <div
             v-for="(f, k) in importer.assignableLabels"
-            :key="'assigner-' + k"
+            :key="'assigner-' + f + '-' + k"
           >
             <p class="text-gray-600 text-sm mb-1">
               {{ f }}
@@ -304,6 +304,14 @@
         }}</Button>
       </div>
     </div>
+    <div
+      v-if="!importType"
+      class="flex justify-center h-full items-center mb-16"
+    >
+      <HowTo link="https://youtu.be/ukHAgcnVxTQ">
+        {{ t`How to Use Data Import?` }}
+      </HowTo>
+    </div>
   </div>
 </template>
 <script>
@@ -311,6 +319,7 @@ import Button from '@/components/Button.vue';
 import FormControl from '@/components/Controls/FormControl';
 import DropdownWithActions from '@/components/DropdownWithActions.vue';
 import FeatherIcon from '@/components/FeatherIcon.vue';
+import HowTo from '@/components/HowTo.vue';
 import PageHeader from '@/components/PageHeader.vue';
 import { importable, Importer } from '@/dataImport';
 import { IPC_ACTIONS } from '@/messages';
@@ -324,6 +333,7 @@ export default {
     Button,
     DropdownWithActions,
     FeatherIcon,
+    HowTo,
   },
   data() {
     return {