From 44a63b928dd97b80647c6567afdd02426acf8411 Mon Sep 17 00:00:00 2001
From: Lukas <lukas@slucky.de>
Date: Fri, 21 Oct 2022 18:57:58 +0200
Subject: [PATCH] Add title to docs links (#1298)

---
 web/src/assets/locales/en.json                |  1 +
 .../admin/settings/AdminSecretsTab.vue        |  2 +-
 web/src/components/atomic/DocsLink.vue        | 17 +++++----
 web/src/components/form/InputField.vue        | 37 +++++++------------
 .../components/org/settings/OrgSecretsTab.vue |  2 +-
 web/src/components/repo/settings/CronTab.vue  |  2 +-
 .../repo/settings/RegistriesTab.vue           |  2 +-
 .../components/repo/settings/SecretsTab.vue   |  2 +-
 8 files changed, 29 insertions(+), 36 deletions(-)

diff --git a/web/src/assets/locales/en.json b/web/src/assets/locales/en.json
index 4b39e0582..0ce845afc 100644
--- a/web/src/assets/locales/en.json
+++ b/web/src/assets/locales/en.json
@@ -13,6 +13,7 @@
     "color_scheme_light": "Switch to dark mode",
     "color_scheme_dark": "Switch to light mode",
     "unknown_error": "An unknown error occurred",
+    "documentation_for": "Documentation for \"{topic}\"",
     "not_found": {
         "not_found": "Whoa 404, either we broke something or you had a typing mishap :-/",
         "back_home": "Back to home"
diff --git a/web/src/components/admin/settings/AdminSecretsTab.vue b/web/src/components/admin/settings/AdminSecretsTab.vue
index fb7c95291..16e04e134 100644
--- a/web/src/components/admin/settings/AdminSecretsTab.vue
+++ b/web/src/components/admin/settings/AdminSecretsTab.vue
@@ -5,7 +5,7 @@
         <h1 class="text-xl text-color">{{ $t('admin.settings.secrets.secrets') }}</h1>
         <p class="text-sm text-color-alt">
           {{ $t('admin.settings.secrets.desc') }}
-          <DocsLink url="docs/usage/secrets" />
+          <DocsLink :topic="$t('admin.settings.secrets.secrets')" url="docs/usage/secrets" />
         </p>
         <Warning :text="$t('admin.settings.secrets.warning')" />
       </div>
diff --git a/web/src/components/atomic/DocsLink.vue b/web/src/components/atomic/DocsLink.vue
index 266203646..5bdd16f90 100644
--- a/web/src/components/atomic/DocsLink.vue
+++ b/web/src/components/atomic/DocsLink.vue
@@ -1,5 +1,9 @@
 <template>
-  <a :href="`${docsUrl}`" target="_blank" class="text-blue-500 hover:text-blue-600 cursor-pointer mt-1"
+  <a
+    :href="`${docsUrl}`"
+    :title="$t('documentation_for', { topic: topic })"
+    target="_blank"
+    class="text-blue-500 hover:text-blue-600 cursor-pointer mt-1"
     ><Icon name="question" class="!w-4 !h-4"
   /></a>
 </template>
@@ -9,14 +13,13 @@ import { computed, toRef } from 'vue';
 
 import Icon from '~/components/atomic/Icon.vue';
 
-const props = defineProps({
-  url: {
-    type: String,
-    required: true,
-  },
-});
+const props = defineProps<{
+  url: string;
+  topic: string;
+}>();
 
 const docsBaseUrl = window.WOODPECKER_DOCS;
 const url = toRef(props, 'url');
+const topic = toRef(props, 'topic');
 const docsUrl = computed(() => (url.value.startsWith('http') ? url.value : `${docsBaseUrl}${url.value}`));
 </script>
diff --git a/web/src/components/form/InputField.vue b/web/src/components/form/InputField.vue
index fb33dc1e6..37007ff5e 100644
--- a/web/src/components/form/InputField.vue
+++ b/web/src/components/form/InputField.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="flex flex-col mt-2 mb-4">
     <div class="flex items-center text-color font-bold mb-2">
-      <label v-if="label" v-bind="$attrs">{{ label }}</label>
-      <DocsLink v-if="docsUrl" :url="docsUrl" class="ml-2" />
+      <label v-bind="$attrs">{{ label }}</label>
+      <DocsLink v-if="docsUrl" :topic="label" :url="docsUrl" class="ml-2" />
     </div>
     <slot />
     <div v-if="$slots['description']" class="ml-1 text-color-alt">
@@ -11,28 +11,17 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
+<script lang="ts" setup>
 import DocsLink from '~/components/atomic/DocsLink.vue';
 
-export default defineComponent({
-  name: 'InputField',
-
-  components: { DocsLink },
-
-  inheritAttrs: false,
-
-  props: {
-    label: {
-      type: String,
-      default: null,
-    },
-
-    docsUrl: {
-      type: String,
-      default: null,
-    },
-  },
-});
+defineProps<{
+  label: string;
+  docsUrl?: string;
+}>();
+</script>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+};
 </script>
diff --git a/web/src/components/org/settings/OrgSecretsTab.vue b/web/src/components/org/settings/OrgSecretsTab.vue
index 8595ba977..e46527008 100644
--- a/web/src/components/org/settings/OrgSecretsTab.vue
+++ b/web/src/components/org/settings/OrgSecretsTab.vue
@@ -5,7 +5,7 @@
         <h1 class="text-xl text-color">{{ $t('org.settings.secrets.secrets') }}</h1>
         <p class="text-sm text-color-alt">
           {{ $t('org.settings.secrets.desc') }}
-          <DocsLink url="docs/usage/secrets" />
+          <DocsLink :topic="$t('org.settings.secrets.secrets')" url="docs/usage/secrets" />
         </p>
       </div>
       <Button
diff --git a/web/src/components/repo/settings/CronTab.vue b/web/src/components/repo/settings/CronTab.vue
index 993d6971e..3d0761523 100644
--- a/web/src/components/repo/settings/CronTab.vue
+++ b/web/src/components/repo/settings/CronTab.vue
@@ -5,7 +5,7 @@
         <h1 class="text-xl text-color">{{ $t('repo.settings.crons.crons') }}</h1>
         <p class="text-sm text-color-alt">
           {{ $t('repo.settings.crons.desc') }}
-          <DocsLink url="docs/usage/crons" />
+          <DocsLink :topic="$t('repo.settings.crons.crons')" url="docs/usage/crons" />
         </p>
       </div>
       <Button
diff --git a/web/src/components/repo/settings/RegistriesTab.vue b/web/src/components/repo/settings/RegistriesTab.vue
index 579f10761..7d3b0ffc0 100644
--- a/web/src/components/repo/settings/RegistriesTab.vue
+++ b/web/src/components/repo/settings/RegistriesTab.vue
@@ -5,7 +5,7 @@
         <h1 class="text-xl text-color">{{ $t('repo.settings.registries.creds') }}</h1>
         <p class="text-sm text-color-alt">
           {{ $t('repo.settings.registries.desc') }}
-          <DocsLink url="docs/usage/registries" />
+          <DocsLink :topic="$t('repo.settings.registries.creds')" url="docs/usage/registries" />
         </p>
       </div>
       <Button
diff --git a/web/src/components/repo/settings/SecretsTab.vue b/web/src/components/repo/settings/SecretsTab.vue
index 0b78b0b01..063acc0f4 100644
--- a/web/src/components/repo/settings/SecretsTab.vue
+++ b/web/src/components/repo/settings/SecretsTab.vue
@@ -5,7 +5,7 @@
         <h1 class="text-xl text-color">{{ $t('repo.settings.secrets.secrets') }}</h1>
         <p class="text-sm text-color-alt">
           {{ $t('repo.settings.secrets.desc') }}
-          <DocsLink url="docs/usage/secrets" />
+          <DocsLink :topic="$t('repo.settings.secrets.secrets')" url="docs/usage/secrets" />
         </p>
       </div>
       <Button