From 35447463babc219b1065e55b0d2a7d89b8c1204f Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Thu, 6 Jun 2024 10:28:33 +0800
Subject: [PATCH] Fix Activity Page Contributors dropdown (#31264)

Fix #31261

(cherry picked from commit e728fd741be7848d476663eec1c9caaf34b46e61)
---
 routers/web/repo/contributors.go           |  6 ------
 templates/repo/contributors.tmpl           |  1 +
 web_src/js/components/RepoContributors.vue | 21 ++++++++++-----------
 web_src/js/features/contributors.js        |  1 +
 4 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/routers/web/repo/contributors.go b/routers/web/repo/contributors.go
index 5fda17469e..762fbf9379 100644
--- a/routers/web/repo/contributors.go
+++ b/routers/web/repo/contributors.go
@@ -19,14 +19,8 @@ const (
 // Contributors render the page to show repository contributors graph
 func Contributors(ctx *context.Context) {
 	ctx.Data["Title"] = ctx.Tr("repo.activity.navbar.contributors")
-
 	ctx.Data["PageIsActivity"] = true
 	ctx.Data["PageIsContributors"] = true
-
-	ctx.PageData["contributionType"] = "commits"
-
-	ctx.PageData["repoLink"] = ctx.Repo.RepoLink
-
 	ctx.HTML(http.StatusOK, tplContributors)
 }
 
diff --git a/templates/repo/contributors.tmpl b/templates/repo/contributors.tmpl
index 4a258e5b70..f7f5d796f4 100644
--- a/templates/repo/contributors.tmpl
+++ b/templates/repo/contributors.tmpl
@@ -1,5 +1,6 @@
 {{if .Permission.CanRead $.UnitTypeCode}}
 	<div id="repo-contributors-chart"
+		data-repo-link="{{.RepoLink}}"
 		data-locale-filter-label="{{ctx.Locale.Tr "repo.contributors.contribution_type.filter_label"}}"
 		data-locale-contribution-type-commits="{{ctx.Locale.Tr "repo.contributors.contribution_type.commits"}}"
 		data-locale-contribution-type-additions="{{ctx.Locale.Tr "repo.contributors.contribution_type.additions"}}"
diff --git a/web_src/js/components/RepoContributors.vue b/web_src/js/components/RepoContributors.vue
index f7b05831e0..dec2599c0d 100644
--- a/web_src/js/components/RepoContributors.vue
+++ b/web_src/js/components/RepoContributors.vue
@@ -23,8 +23,6 @@ import {sleep} from '../utils.js';
 import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm';
 import $ from 'jquery';
 
-const {pageData} = window.config;
-
 const customEventListener = {
   id: 'customEventListener',
   afterEvent: (chart, args, opts) => {
@@ -59,14 +57,17 @@ export default {
       type: Object,
       required: true,
     },
+    repoLink: {
+      type: String,
+      required: true,
+    },
   },
   data: () => ({
     isLoading: false,
     errorText: '',
     totalStats: {},
     sortedContributors: {},
-    repoLink: pageData.repoLink || [],
-    type: pageData.contributionType,
+    type: 'commits',
     contributorsStats: [],
     xAxisStart: null,
     xAxisEnd: null,
@@ -333,19 +334,17 @@ export default {
         <!-- Contribution type -->
         <div class="ui dropdown jump" id="repo-contributors">
           <div class="ui basic compact button">
-            <span class="text">
-              <span class="not-mobile">{{ locale.filterLabel }}&nbsp;</span><strong>{{ locale.contributionType[type] }}</strong>
-              <svg-icon name="octicon-triangle-down" :size="14"/>
-            </span>
+            <span class="not-mobile">{{ locale.filterLabel }}</span> <strong>{{ locale.contributionType[type] }}</strong>
+            <svg-icon name="octicon-triangle-down" :size="14"/>
           </div>
           <div class="menu">
-            <div :class="['item', {'active': type === 'commits'}]">
+            <div :class="['item', {'selected': type === 'commits'}]" data-value="commits">
               {{ locale.contributionType.commits }}
             </div>
-            <div :class="['item', {'active': type === 'additions'}]">
+            <div :class="['item', {'selected': type === 'additions'}]" data-value="additions">
               {{ locale.contributionType.additions }}
             </div>
-            <div :class="['item', {'active': type === 'deletions'}]">
+            <div :class="['item', {'selected': type === 'deletions'}]" data-value="deletions">
               {{ locale.contributionType.deletions }}
             </div>
           </div>
diff --git a/web_src/js/features/contributors.js b/web_src/js/features/contributors.js
index 1d9cba5b9b..79b3389fee 100644
--- a/web_src/js/features/contributors.js
+++ b/web_src/js/features/contributors.js
@@ -7,6 +7,7 @@ export async function initRepoContributors() {
   const {default: RepoContributors} = await import(/* webpackChunkName: "contributors-graph" */'../components/RepoContributors.vue');
   try {
     const View = createApp(RepoContributors, {
+      repoLink: el.getAttribute('data-repo-link'),
       locale: {
         filterLabel: el.getAttribute('data-locale-filter-label'),
         contributionType: {