From 8d6573a5f178fb115e3ba9458de946bc7b067af2 Mon Sep 17 00:00:00 2001
From: Lauris BH <lauris@nix.lv>
Date: Fri, 14 Oct 2022 20:50:01 +0300
Subject: [PATCH] Refactor badge generation page, add HTML option (#1251)

* Adds HTML badge generation
* Allows to generate badge for specific branch
* Remembers last used option for badge syntax for current browser
* Fixes base URL when custom port is used

Screenshot:

![attels](https://user-images.githubusercontent.com/165205/195311734-6db0e85e-f659-486f-824f-4cabb659b81a.png)

Co-authored-by: 6543 <6543@obermui.de>
---
 web/src/assets/locales/en.json                |   7 +-
 web/src/components/repo/settings/BadgeTab.vue | 120 +++++++++++++++---
 2 files changed, 104 insertions(+), 23 deletions(-)

diff --git a/web/src/assets/locales/en.json b/web/src/assets/locales/en.json
index a0fb3acab..4870f0a05 100644
--- a/web/src/assets/locales/en.json
+++ b/web/src/assets/locales/en.json
@@ -170,8 +170,11 @@
             },
             "badge": {
                 "badge": "Badge",
-                "url_branch": "URL for specific branch",
-                "markdown": "Markdown"
+                "type": "Syntax",
+                "type_url": "URL",
+                "type_markdown": "Markdown",
+                "type_html": "HTML",
+                "branch": "Branch"
             },
             "actions": {
                 "actions": "Actions",
diff --git a/web/src/components/repo/settings/BadgeTab.vue b/web/src/components/repo/settings/BadgeTab.vue
index 640c19c88..2da081ca9 100644
--- a/web/src/components/repo/settings/BadgeTab.vue
+++ b/web/src/components/repo/settings/BadgeTab.vue
@@ -7,55 +7,133 @@
       </a>
     </div>
 
-    <div class="flex flex-col space-y-4">
-      <div>
-        <h2 class="text-lg text-color ml-2">{{ $t('url') }}</h2>
-        <pre class="box">{{ baseUrl }}{{ badgeUrl }}</pre>
-      </div>
+    <InputField :label="$t('repo.settings.badge.type')">
+      <SelectField
+        v-model="badgeType"
+        :options="[
+          {
+            value: 'url',
+            text: $t('repo.settings.badge.type_url'),
+          },
+          {
+            value: 'markdown',
+            text: $t('repo.settings.badge.type_markdown'),
+          },
+          {
+            value: 'html',
+            text: $t('repo.settings.badge.type_html'),
+          },
+        ]"
+        required
+        class="dark:bg-dark-gray-700 bg-transparent text-color border-gray-200 dark:border-dark-400"
+      />
+    </InputField>
+    <InputField :label="$t('repo.settings.badge.branch')">
+      <SelectField
+        v-model="branch"
+        :options="branches"
+        required
+        class="dark:bg-dark-gray-700 bg-transparent text-color border-gray-200 dark:border-dark-400"
+      />
+    </InputField>
 
+    <div v-if="badgeContent" class="flex flex-col space-y-4">
       <div>
-        <h2 class="text-lg text-color ml-2">{{ $t('repo.settings.badge.url_branch') }}</h2>
-        <pre class="box">{{ baseUrl }}{{ badgeUrl }}?branch=<span class="font-bold">&lt;branch&gt;</span></pre>
-      </div>
-
-      <div>
-        <h2 class="text-lg text-color ml-2">{{ $t('repo.settings.badge.markdown') }}</h2>
-        <pre class="box">[![status-badge]({{ baseUrl }}{{ badgeUrl }})]({{ baseUrl }}{{ repoUrl }})</pre>
+        <pre class="box">{{ badgeContent }}</pre>
       </div>
     </div>
   </Panel>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, Ref } from 'vue';
+import { useStorage } from '@vueuse/core';
+import { computed, defineComponent, inject, onMounted, Ref, ref, watch } from 'vue';
 
+import { SelectOption } from '~/components/form/form.types';
+import InputField from '~/components/form/InputField.vue';
+import SelectField from '~/components/form/SelectField.vue';
 import Panel from '~/components/layout/Panel.vue';
+import useApiClient from '~/compositions/useApiClient';
 import { Repo } from '~/lib/api/types';
 
 export default defineComponent({
   name: 'BadgeTab',
 
-  components: { Panel },
+  components: { Panel, InputField, SelectField },
 
   setup() {
+    const apiClient = useApiClient();
     const repo = inject<Ref<Repo>>('repo');
-    const baseUrl = `${window.location.protocol}//${window.location.hostname}`;
-    const badgeUrl = computed(() => {
+
+    const badgeType = useStorage('last-badge-type', 'markdown');
+
+    if (!repo) {
+      throw new Error('Unexpected: "repo" should be provided at this place');
+    }
+
+    const defaultBranch = computed(() => repo.value.default_branch);
+    const branches = ref<SelectOption[]>([]);
+    const branch = ref<string>('');
+
+    async function loadBranches() {
       if (!repo) {
         throw new Error('Unexpected: "repo" should be provided at this place');
       }
 
-      return `/api/badges/${repo.value.owner}/${repo.value.name}/status.svg`;
-    });
-    const repoUrl = computed(() => {
+      branches.value = (await apiClient.getRepoBranches(repo.value.owner, repo.value.name))
+        .map((b) => ({
+          value: b,
+          text: b,
+        }))
+        .filter((b) => b.value !== defaultBranch.value);
+      branches.value.unshift({
+        value: '',
+        text: defaultBranch.value,
+      });
+    }
+
+    const baseUrl = `${window.location.protocol}//${window.location.hostname}${
+      window.location.port ? `:${window.location.port}` : ''
+    }`;
+    const badgeUrl = computed(
+      () =>
+        `/api/badges/${repo.value.owner}/${repo.value.name}/status.svg${
+          branch.value !== '' ? `?branch=${branch.value}` : ''
+        }`,
+    );
+    const repoUrl = computed(
+      () => `/${repo.value.owner}/${repo.value.name}${branch.value !== '' ? `/branches/${branch.value}` : ''}`,
+    );
+
+    const badgeContent = computed(() => {
       if (!repo) {
         throw new Error('Unexpected: "repo" should be provided at this place');
       }
 
-      return `/${repo.value.owner}/${repo.value.name}`;
+      if (badgeType.value === 'url') {
+        return `${baseUrl}${badgeUrl.value}`;
+      }
+
+      if (badgeType.value === 'markdown') {
+        return `[![status-badge](${baseUrl}${badgeUrl.value})](${baseUrl}${repoUrl.value})`;
+      }
+
+      if (badgeType.value === 'html') {
+        return `<a href="${baseUrl}${repoUrl.value}" target="_blank">\n  <img src="${baseUrl}${badgeUrl.value}" alt="status-badge" />\n</a>`;
+      }
+
+      return '';
     });
 
-    return { baseUrl, badgeUrl, repoUrl };
+    onMounted(() => {
+      loadBranches();
+    });
+
+    watch(repo, () => {
+      loadBranches();
+    });
+
+    return { badgeType, branches, branch, badgeContent, badgeUrl };
   },
 });
 </script>