Add title to docs links (#1298)

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"

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>

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>

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>

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

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

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

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