Rewrite context popup to stateless

Author: silverwind

routers/web/repo/issue.go

@@ -2181,8 +2181,8 @@ func GetIssueInfo(ctx *context.Context) {
 	}
 
 	ctx.JSON(http.StatusOK, map[string]any{
-		"convertedIssue": convert.ToIssue(ctx, ctx.Doer, issue),
-		"renderedLabels": templates.RenderLabels(ctx, ctx.Locale, issue.Labels, ctx.Repo.RepoLink, issue),
+		"issue": convert.ToIssue(ctx, ctx.Doer, issue),
+		"labelsHtml": templates.RenderLabels(ctx, ctx.Locale, issue.Labels, ctx.Repo.RepoLink, issue),
 	})
 }
 

templates/base/head_script.tmpl

@@ -36,7 +36,6 @@ If you introduce mistakes in it, Gitea JavaScript code wouldn't run correctly.
 		i18n: {
 			copy_success: {{ctx.Locale.Tr "copy_success"}},
 			copy_error: {{ctx.Locale.Tr "copy_error"}},
-			error_occurred: {{ctx.Locale.Tr "error.occurred"}},
 			network_error: {{ctx.Locale.Tr "error.network_error"}},
 			remove_label_str: {{ctx.Locale.Tr "remove_label_str"}},
 			modal_confirm: {{ctx.Locale.Tr "modal.confirm"}},

web_src/js/components/ContextPopup.vue

@@ -1,18 +1,18 @@
 <script>
 import {SvgIcon} from '../svg.js';
-import {GET} from '../modules/fetch.js';
-
-const {appSubUrl, i18n} = window.config;
 
 export default {
   components: {SvgIcon},
-  data: () => ({
-    loading: false,
-    issue: null,
-    renderedLabels: '',
-    i18nErrorOccurred: i18n.error_occurred,
-    i18nErrorMessage: null,
-  }),
+  props: {
+    issue: {
+      type: Object,
+      default: null,
+    },
+    labelsHtml: {
+      type: String,
+      default: '',
+    },
+  },
   computed: {
     createdAt() {
       return new Date(this.issue.created_at).toLocaleDateString(undefined, {year: 'numeric', month: 'short', day: 'numeric'});
@@ -57,41 +57,11 @@ export default {
       return 'red'; // Closed Issue
     },
   },
-  mounted() {
-    this.$refs.root.addEventListener('ce-load-context-popup', (e) => {
-      const data = e.detail;
-      if (!this.loading && this.issue === null) {
-        this.load(data);
-      }
-    });
-  },
-  methods: {
-    async load(data) {
-      this.loading = true;
-      this.i18nErrorMessage = null;
-
-      try {
-        const response = await GET(`${appSubUrl}/${data.owner}/${data.repo}/issues/${data.index}/info`); // backend: GetIssueInfo
-        const respJson = await response.json();
-        if (!response.ok) {
-          this.i18nErrorMessage = respJson.message ?? i18n.network_error;
-          return;
-        }
-        this.issue = respJson.convertedIssue;
-        this.renderedLabels = respJson.renderedLabels;
-      } catch {
-        this.i18nErrorMessage = i18n.network_error;
-      } finally {
-        this.loading = false;
-      }
-    },
-  },
 };
 </script>
 <template>
   <div ref="root">
-    <div v-if="loading" class="tw-h-12 tw-w-12 is-loading"/>
-    <div v-if="!loading && issue !== null" class="tw-flex tw-flex-col tw-gap-2">
+    <div v-if="issue !== null" class="tw-p-3 tw-flex tw-flex-col tw-gap-2">
       <div class="tw-text-12">{{ issue.repository.full_name }} on {{ createdAt }}</div>
       <div class="flex-text-block">
         <svg-icon :name="icon" :class="['text', color]"/>
@@ -102,11 +72,7 @@ export default {
       </div>
       <div v-if="body">{{ body }}</div>
       <!-- eslint-disable-next-line vue/no-v-html -->
-      <div v-if="issue.labels.length" v-html="renderedLabels"/>
-    </div>
-    <div class="tw-flex tw-flex-col tw-gap-2" v-if="!loading && issue === null">
-      <div class="tw-text-12">{{ i18nErrorOccurred }}</div>
-      <div>{{ i18nErrorMessage }}</div>
+      <div v-if="issue.labels.length" v-html="labelsHtml"/>
     </div>
   </div>
 </template>

web_src/js/features/contextpopup.js

@@ -2,44 +2,51 @@ import {createApp} from 'vue';
 import ContextPopup from '../components/ContextPopup.vue';
 import {parseIssueHref} from '../utils.js';
 import {createTippy} from '../modules/tippy.js';
+import {GET} from '../modules/fetch.js';
 
-export function initContextPopups() {
-  const refIssues = document.querySelectorAll('.ref-issue');
-  attachRefIssueContextPopup(refIssues);
+const {appSubUrl} = window.config;
+
+async function show(e) {
+  const link = e.currentTarget;
+  const {owner, repo, index} = parseIssueHref(link.getAttribute('href'));
+  if (!owner) return;
+
+  const res = await GET(`${appSubUrl}/${owner}/${repo}/issues/${index}/info`); // backend: GetIssueInfo
+  if (!res.ok) return;
+
+  let issue, labelsHtml;
+  try {
+    ({issue, labelsHtml} = await res.json());
+  } catch {
+    return;
+  }
+
+  const popup = document.createElement('div');
+  const view = createApp(ContextPopup, {issue, labelsHtml});
+  try {
+    view.mount(popup);
+  } catch (err) {
+    console.error(err);
+    return;
+  }
+
+  const tippy = createTippy(link, {
+    theme: 'default',
+    trigger: 'mouseenter focus',
+    content: popup,
+    placement: 'top-start',
+    interactive: true,
+    role: 'dialog',
+    interactiveBorder: 15,
+  });
+
+  // show immediately because this runs during mouseenter and focus
+  tippy.show();
 }
 
-export function attachRefIssueContextPopup(refIssues) {
-  for (const refIssue of refIssues) {
-    if (refIssue.classList.contains('ref-external-issue')) {
-      return;
-    }
-
-    const {owner, repo, index} = parseIssueHref(refIssue.getAttribute('href'));
-    if (!owner) return;
-
-    const el = document.createElement('div');
-    el.classList.add('tw-p-3');
-    refIssue.parentNode.insertBefore(el, refIssue.nextSibling);
-
-    const view = createApp(ContextPopup);
-
-    try {
-      view.mount(el);
-    } catch (err) {
-      console.error(err);
-      el.textContent = 'ContextPopup failed to load';
-    }
-
-    createTippy(refIssue, {
-      theme: 'default',
-      content: el,
-      placement: 'top-start',
-      interactive: true,
-      role: 'dialog',
-      interactiveBorder: 5,
-      onShow: () => {
-        el.firstChild.dispatchEvent(new CustomEvent('ce-load-context-popup', {detail: {owner, repo, index}}));
-      },
-    });
+export function initContextPopups() {
+  for (const link of document.querySelectorAll('.ref-issue:not(.ref-external-issue)')) {
+    link.addEventListener('mouseenter', show);
+    link.addEventListener('focus', show);
   }
 }