Link swagger in navbar

[pat-s]

(testing)

fix point 1 from #1944

[pat-s]

@anbraten Tagging you as I saw you edited the vue files at some point.

I wanted to add a link in the navbar pointing to the swagger UI interface. Couldn't quite get it working by just trying to bake something together without Vue knowledge. If you like the idea, it might be a small thing for you to finalize the idea?

[6543]

@pat-s ref = #1944

[qwerty287]

@pat-s I implemented this directly in GitHub's web editor so the is completely untested (also there are probably issues with prettier).

Diff

diff --git a/web/src/assets/locales/en.json b/web/src/assets/locales/en.json
index b8f421204f..c3dd57dea6 100644
--- a/web/src/assets/locales/en.json
+++ b/web/src/assets/locales/en.json
@@ -5,6 +5,7 @@
     "repos": "Repos",
     "repositories": "Repositories",
     "docs": "Docs",
+    "api": "API",
     "logout": "Logout",
     "search": "Search…",
     "username": "Username",
diff --git a/web/src/components/atomic/APILink.vue b/web/src/components/atomic/APILink.vue
deleted file mode 100644
index cbdcd3cf07..0000000000
--- a/web/src/components/atomic/APILink.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <a
-    :href="`${apiUrl}`"
-    :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>
-
-<script lang="ts" setup>
-import { computed, toRef } from 'vue';
-
-import Icon from '~/components/atomic/Icon.vue';
-
-const props = defineProps<{
-  url: string;
-  topic: string;
-}>();
-
-const apiBaseUrl = FIXME:;
-const url = FIXME:;
-const topic = toRef(props, 'topic');
-const apiUrl = computed(() => (url.value.startsWith('http') ? url.value : `${apiBaseUrl}${url.value}`));
-</script>
diff --git a/web/src/components/layout/header/Navbar.vue b/web/src/components/layout/header/Navbar.vue
index e1f100a089..e39cf5b35d 100644
--- a/web/src/components/layout/header/Navbar.vue
+++ b/web/src/components/layout/header/Navbar.vue
@@ -71,7 +71,8 @@ export default defineComponent({
     const route = useRoute();
     const authentication = useAuthentication();
     const { darkMode } = useDarkMode();
-    const docsUrl = window.WOODPECKER_DOCS;
+    const docsUrl = config.docs;
+    const apiUrl = `${config.rootURL}/swagger/index.html`;
 
     function doLogin() {
       authentication.authenticate(route.fullPath);
@@ -79,7 +80,7 @@ export default defineComponent({
 
     const version = config.version?.startsWith('next') ? 'next' : config.version;
 
-    return { darkMode, user: authentication.user, doLogin, docsUrl, version };
+    return { darkMode, user: authentication.user, doLogin, docsUrl, version, apiUrl };
   },
 });
 </script>

[woodpecker-bot]

Deployment of preview was successful: https://woodpecker-ci-woodpecker-pr-1984.surge.sh

[pat-s]

The navbar item is there

but the link is still faulty, for some reason it expands to $INSTANCE/null/swagger/index.html (the inserted null is the issue)

[pat-s]

Working now!