Migrate vue components to setup (#32329)

Migrated a handful Vue components to the `setup` syntax using
composition api as it has better Typescript support and is becoming the
new default in the Vue ecosystem.

- [x] ActionRunStatus.vue    
- [x] ActivityHeatmap.vue
- [x] ContextPopup.vue       
- [x] DiffFileList.vue
- [x] DiffFileTree.vue       
- [x] DiffFileTreeItem.vue    
- [x] PullRequestMergeForm.vue
- [x] RepoActivityTopAuthors.vue  
- [x] RepoCodeFrequency.vue
- [x] RepoRecentCommits.vue
- [x] ScopedAccessTokenSelector.vue

Left some larger components untouched for now to not go to crazy in this
single PR:
- [ ] DiffCommitSelector.vue  
- [ ] RepoActionView.vue
- [ ] RepoContributors.vue
- [ ] DashboardRepoList.vue  
- [ ] RepoBranchTagSelector.vue

web_src/js/components/ActionRunStatus.vue

@@ -2,31 +2,21 @@
     Please also update the template file above if this vue is modified.
     action status accepted: success, skipped, waiting, blocked, running, failure, cancelled, unknown
 -->
-<script lang="ts">
+<script lang="ts" setup>
 import {SvgIcon} from '../svg.ts';
 
-export default {
-  components: {SvgIcon},
-  props: {
-    status: {
-      type: String,
-      required: true,
-    },
-    size: {
-      type: Number,
-      default: 16,
-    },
-    className: {
-      type: String,
-      default: '',
-    },
-    localeStatus: {
-      type: String,
-      default: '',
-    },
-  },
-};
+withDefaults(defineProps<{
+  status: '',
+  size?: number,
+  className?: string,
+  localeStatus?: string,
+}>(), {
+  size: 16,
+  className: undefined,
+  localeStatus: undefined,
+});
 </script>
+
 <template>
   <span class="tw-flex tw-items-center" :data-tooltip-content="localeStatus" v-if="status">
     <SvgIcon name="octicon-check-circle-fill" class="text green" :size="size" :class-name="className" v-if="status === 'success'"/>

web_src/js/components/ActivityHeatmap.vue

@@ -1,58 +1,56 @@
-<script lang="ts">
+<script lang="ts" setup>
 // TODO: Switch to upstream after https://github.com/razorness/vue3-calendar-heatmap/pull/34 is merged
 import {CalendarHeatmap} from '@silverwind/vue3-calendar-heatmap';
+import {onMounted, ref} from 'vue';
+import type {Value as HeatmapValue, Locale as HeatmapLocale} from '@silverwind/vue3-calendar-heatmap';
 
-export default {
-  components: {CalendarHeatmap},
-  props: {
-    values: {
-      type: Array,
-      default: () => [],
-    },
-    locale: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  data: () => ({
-    colorRange: [
-      'var(--color-secondary-alpha-60)',
-      'var(--color-secondary-alpha-60)',
-      'var(--color-primary-light-4)',
-      'var(--color-primary-light-2)',
-      'var(--color-primary)',
-      'var(--color-primary-dark-2)',
-      'var(--color-primary-dark-4)',
-    ],
-    endDate: new Date(),
-  }),
-  mounted() {
-    // work around issue with first legend color being rendered twice and legend cut off
-    const legend = document.querySelector('.vch__external-legend-wrapper');
-    legend.setAttribute('viewBox', '12 0 80 10');
-    legend.style.marginRight = '-12px';
-  },
-  methods: {
-    handleDayClick(e) {
-      // Reset filter if same date is clicked
-      const params = new URLSearchParams(document.location.search);
-      const queryDate = params.get('date');
-      // Timezone has to be stripped because toISOString() converts to UTC
-      const clickedDate = new Date(e.date - (e.date.getTimezoneOffset() * 60000)).toISOString().substring(0, 10);
+defineProps<{
+  values?: HeatmapValue[];
+  locale: {
+    textTotalContributions: string;
+    heatMapLocale: Partial<HeatmapLocale>;
+    noDataText: string;
+    tooltipUnit: string;
+  };
+}>();
 
-      if (queryDate && queryDate === clickedDate) {
-        params.delete('date');
-      } else {
-        params.set('date', clickedDate);
-      }
+const colorRange = [
+  'var(--color-secondary-alpha-60)',
+  'var(--color-secondary-alpha-60)',
+  'var(--color-primary-light-4)',
+  'var(--color-primary-light-2)',
+  'var(--color-primary)',
+  'var(--color-primary-dark-2)',
+  'var(--color-primary-dark-4)',
+];
 
-      params.delete('page');
+const endDate = ref(new Date());
 
-      const newSearch = params.toString();
-      window.location.search = newSearch.length ? `?${newSearch}` : '';
-    },
-  },
-};
+onMounted(() => {
+  // work around issue with first legend color being rendered twice and legend cut off
+  const legend = document.querySelector<HTMLElement>('.vch__external-legend-wrapper');
+  legend.setAttribute('viewBox', '12 0 80 10');
+  legend.style.marginRight = '-12px';
+});
+
+function handleDayClick(e: Event & {date: Date}) {
+  // Reset filter if same date is clicked
+  const params = new URLSearchParams(document.location.search);
+  const queryDate = params.get('date');
+  // Timezone has to be stripped because toISOString() converts to UTC
+  const clickedDate = new Date(e.date.getTime() - (e.date.getTimezoneOffset() * 60000)).toISOString().substring(0, 10);
+
+  if (queryDate && queryDate === clickedDate) {
+    params.delete('date');
+  } else {
+    params.set('date', clickedDate);
+  }
+
+  params.delete('page');
+
+  const newSearch = params.toString();
+  window.location.search = newSearch.length ? `?${newSearch}` : '';
+}
 </script>
 <template>
   <div class="total-contributions">

web_src/js/components/ContextPopup.vue

@@ -1,100 +1,96 @@
-<script lang="ts">
+<script lang="ts" setup>
 import {SvgIcon} from '../svg.ts';
 import {GET} from '../modules/fetch.ts';
+import {computed, onMounted, ref} from 'vue';
+import type {Issue} from '../types';
 
 const {appSubUrl, i18n} = window.config;
 
-export default {
-  components: {SvgIcon},
-  data: () => ({
-    loading: false,
-    issue: null,
-    renderedLabels: '',
-    i18nErrorOccurred: i18n.error_occurred,
-    i18nErrorMessage: null,
-  }),
-  computed: {
-    createdAt() {
-      return new Date(this.issue.created_at).toLocaleDateString(undefined, {year: 'numeric', month: 'short', day: 'numeric'});
-    },
+const loading = ref(false);
+const issue = ref(null);
+const renderedLabels = ref('');
+const i18nErrorOccurred = i18n.error_occurred;
+const i18nErrorMessage = ref(null);
 
-    body() {
-      const body = this.issue.body.replace(/\n+/g, ' ');
-      if (body.length > 85) {
-        return `${body.substring(0, 85)}…`;
-      }
-      return body;
-    },
+const createdAt = computed(() => new Date(issue.value.created_at).toLocaleDateString(undefined, {year: 'numeric', month: 'short', day: 'numeric'}));
+const body = computed(() => {
+  const body = issue.value.body.replace(/\n+/g, ' ');
+  if (body.length > 85) {
+    return `${body.substring(0, 85)}…`;
+  }
+  return body;
+});
 
-    icon() {
-      if (this.issue.pull_request !== null) {
-        if (this.issue.state === 'open') {
-          if (this.issue.pull_request.draft === true) {
-            return 'octicon-git-pull-request-draft'; // WIP PR
-          }
-          return 'octicon-git-pull-request'; // Open PR
-        } else if (this.issue.pull_request.merged === true) {
-          return 'octicon-git-merge'; // Merged PR
-        }
-        return 'octicon-git-pull-request'; // Closed PR
-      } else if (this.issue.state === 'open') {
-        return 'octicon-issue-opened'; // Open Issue
+function getIssueIcon(issue: Issue) {
+  if (issue.pull_request) {
+    if (issue.state === 'open') {
+      if (issue.pull_request.draft === true) {
+        return 'octicon-git-pull-request-draft'; // WIP PR
       }
-      return 'octicon-issue-closed'; // Closed Issue
-    },
+      return 'octicon-git-pull-request'; // Open PR
+    } else if (issue.pull_request.merged === true) {
+      return 'octicon-git-merge'; // Merged PR
+    }
+    return 'octicon-git-pull-request'; // Closed PR
+  } else if (issue.state === 'open') {
+    return 'octicon-issue-opened'; // Open Issue
+  }
+  return 'octicon-issue-closed'; // Closed Issue
+}
 
-    color() {
-      if (this.issue.pull_request !== null) {
-        if (this.issue.pull_request.draft === true) {
-          return 'grey'; // WIP PR
-        } else if (this.issue.pull_request.merged === true) {
-          return 'purple'; // Merged PR
-        }
-      }
-      if (this.issue.state === 'open') {
-        return 'green'; // Open Issue
-      }
-      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;
+function getIssueColor(issue: Issue) {
+  if (issue.pull_request) {
+    if (issue.pull_request.draft === true) {
+      return 'grey'; // WIP PR
+    } else if (issue.pull_request.merged === true) {
+      return 'purple'; // Merged PR
+    }
+  }
+  if (issue.state === 'open') {
+    return 'green'; // Open Issue
+  }
+  return 'red'; // Closed Issue
+}
 
-      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;
-      }
-    },
-  },
-};
+const root = ref<HTMLElement | null>(null);
+
+onMounted(() => {
+  root.value.addEventListener('ce-load-context-popup', (e: CustomEvent) => {
+    const data = e.detail;
+    if (!loading.value && issue.value === null) {
+      load(data);
+    }
+  });
+});
+
+async function load(data) {
+  loading.value = true;
+  i18nErrorMessage.value = 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) {
+      i18nErrorMessage.value = respJson.message ?? i18n.network_error;
+      return;
+    }
+    issue.value = respJson.convertedIssue;
+    renderedLabels.value = respJson.renderedLabels;
+  } catch {
+    i18nErrorMessage.value = i18n.network_error;
+  } finally {
+    loading.value = 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 class="tw-text-12">{{ issue.repository.full_name }} on {{ createdAt }}</div>
       <div class="flex-text-block">
-        <svg-icon :name="icon" :class="['text', color]"/>
+        <svg-icon :name="getIssueIcon(issue)" :class="['text', getIssueColor(issue)]"/>
         <span class="issue-title tw-font-semibold tw-break-anywhere">
           {{ issue.title }}
           <span class="index">#{{ issue.number }}</span>