Refactor repo clone button and repo clone links, fix JS error on empty repo page (#19208)

The last PR about clone buttons introduced an JS error when visiting an empty repo page:
* https://github.com/go-gitea/gitea/pull/19028
* `Uncaught ReferenceError: isSSH is not defined`, because the variables are scoped and doesn't share between sub templates.

This:
1. Simplify `templates/repo/clone_buttons.tmpl` and make code clear
2. Move most JS code into `initRepoCloneLink`
3. Remove unused `CloneLink.Git`
4. Remove `ctx.Data["DisableSSH"] / ctx.Data["ExposeAnonSSH"] / ctx.Data["DisableHTTP"]`, and only set them when is is needed (eg: deploy keys / ssh keys)
5. Introduce `Data["CloneButton*"]` to provide data for clone buttons and links
6. Introduce `Data["RepoCloneLink"]` for the repo clone link (not the wiki)
7. Remove most `ctx.Data["PageIsWiki"]` because it has been set in the `/wiki` middleware
8. Remove incorrect `quickstart` class in `migrating.tmpl`

models/repo/repo.go

@@ -533,7 +533,6 @@ func (repo *Repository) DescriptionHTML(ctx context.Context) template.HTML {
 type CloneLink struct {
 	SSH   string
 	HTTPS string
-	Git   string
 }
 
 // ComposeHTTPSCloneURL returns HTTPS clone URL based on given owner and repository name.

modules/context/repo.go

@@ -541,15 +541,22 @@ func RepoAssignment(ctx *Context) (cancel context.CancelFunc) {
 	// If multiple forks are available or if the user can fork to another account, but there is already a fork: open selection dialog
 	ctx.Data["ShowForkModal"] = len(userAndOrgForks) > 1 || (canSignedUserFork && len(userAndOrgForks) > 0)
 
-	ctx.Data["DisableSSH"] = setting.SSH.Disabled
-	ctx.Data["ExposeAnonSSH"] = setting.SSH.ExposeAnonymous
-	ctx.Data["DisableHTTP"] = setting.Repository.DisableHTTPGit
+	ctx.Data["RepoCloneLink"] = repo.CloneLink()
+
+	cloneButtonShowHTTPS := !setting.Repository.DisableHTTPGit
+	cloneButtonShowSSH := !setting.SSH.Disabled && (ctx.IsSigned || setting.SSH.ExposeAnonymous)
+	if !cloneButtonShowHTTPS && !cloneButtonShowSSH {
+		// We have to show at least one link, so we just show the HTTPS
+		cloneButtonShowHTTPS = true
+	}
+	ctx.Data["CloneButtonShowHTTPS"] = cloneButtonShowHTTPS
+	ctx.Data["CloneButtonShowSSH"] = cloneButtonShowSSH
+	ctx.Data["CloneButtonOriginLink"] = ctx.Data["RepoCloneLink"] // it may be rewritten to the WikiCloneLink by the router middleware
+
 	ctx.Data["RepoSearchEnabled"] = setting.Indexer.RepoIndexerEnabled
 	if setting.Indexer.RepoIndexerEnabled {
 		ctx.Data["CodeIndexerUnavailable"] = !code_indexer.IsAvailable()
 	}
-	ctx.Data["CloneLink"] = repo.CloneLink()
-	ctx.Data["WikiCloneLink"] = repo.WikiCloneLink()
 
 	if ctx.IsSigned {
 		ctx.Data["IsWatchingRepo"] = repo_model.IsWatching(ctx.Doer.ID, repo.ID)

routers/web/repo/setting.go

@@ -1070,6 +1070,7 @@ func DeployKeysPost(ctx *context.Context) {
 	form := web.GetForm(ctx).(*forms.AddKeyForm)
 	ctx.Data["Title"] = ctx.Tr("repo.settings.deploy_keys")
 	ctx.Data["PageIsSettingsKeys"] = true
+	ctx.Data["DisableSSH"] = setting.SSH.Disabled
 
 	keys, err := asymkey_model.ListDeployKeys(ctx, &asymkey_model.ListDeployKeysOptions{RepoID: ctx.Repo.Repository.ID})
 	if err != nil {

routers/web/repo/wiki.go

@@ -409,7 +409,6 @@ func WikiPost(ctx *context.Context) {
 
 // Wiki renders single wiki page
 func Wiki(ctx *context.Context) {
-	ctx.Data["PageIsWiki"] = true
 	ctx.Data["CanWriteWiki"] = ctx.Repo.CanWrite(unit.TypeWiki) && !ctx.Repo.Repository.IsArchived
 
 	switch ctx.FormString("action") {
@@ -474,7 +473,6 @@ func Wiki(ctx *context.Context) {
 
 // WikiRevision renders file revision list of wiki page
 func WikiRevision(ctx *context.Context) {
-	ctx.Data["PageIsWiki"] = true
 	ctx.Data["CanWriteWiki"] = ctx.Repo.CanWrite(unit.TypeWiki) && !ctx.Repo.Repository.IsArchived
 
 	if !ctx.Repo.Repository.HasWiki() {
@@ -519,7 +517,6 @@ func WikiPages(ctx *context.Context) {
 	}
 
 	ctx.Data["Title"] = ctx.Tr("repo.wiki.pages")
-	ctx.Data["PageIsWiki"] = true
 	ctx.Data["CanWriteWiki"] = ctx.Repo.CanWrite(unit.TypeWiki) && !ctx.Repo.Repository.IsArchived
 
 	wikiRepo, commit, err := findWikiRepoCommit(ctx)
@@ -624,7 +621,6 @@ func WikiRaw(ctx *context.Context) {
 // NewWiki render wiki create page
 func NewWiki(ctx *context.Context) {
 	ctx.Data["Title"] = ctx.Tr("repo.wiki.new_page")
-	ctx.Data["PageIsWiki"] = true
 
 	if !ctx.Repo.Repository.HasWiki() {
 		ctx.Data["title"] = "Home"
@@ -640,7 +636,6 @@ func NewWiki(ctx *context.Context) {
 func NewWikiPost(ctx *context.Context) {
 	form := web.GetForm(ctx).(*forms.NewWikiForm)
 	ctx.Data["Title"] = ctx.Tr("repo.wiki.new_page")
-	ctx.Data["PageIsWiki"] = true
 
 	if ctx.HasError() {
 		ctx.HTML(http.StatusOK, tplWikiNew)
@@ -676,7 +671,6 @@ func NewWikiPost(ctx *context.Context) {
 
 // EditWiki render wiki modify page
 func EditWiki(ctx *context.Context) {
-	ctx.Data["PageIsWiki"] = true
 	ctx.Data["PageIsWikiEdit"] = true
 
 	if !ctx.Repo.Repository.HasWiki() {
@@ -696,7 +690,6 @@ func EditWiki(ctx *context.Context) {
 func EditWikiPost(ctx *context.Context) {
 	form := web.GetForm(ctx).(*forms.NewWikiForm)
 	ctx.Data["Title"] = ctx.Tr("repo.wiki.new_page")
-	ctx.Data["PageIsWiki"] = true
 
 	if ctx.HasError() {
 		ctx.HTML(http.StatusOK, tplWikiNew)

routers/web/web.go

@@ -984,6 +984,7 @@ func RegisterRoutes(m *web.Route) {
 			m.Get("/commit/{sha:[a-f0-9]{7,40}}.{ext:patch|diff}", repo.RawDiff)
 		}, repo.MustEnableWiki, func(ctx *context.Context) {
 			ctx.Data["PageIsWiki"] = true
+			ctx.Data["CloneButtonOriginLink"] = ctx.Repo.Repository.WikiCloneLink()
 		})
 
 		m.Group("/wiki", func() {

templates/base/head.tmpl

@@ -12,7 +12,7 @@
 	<meta name="keywords" content="{{MetaKeywords}}">
 	<meta name="referrer" content="no-referrer" />
 {{if .GoGetImport}}
-	<meta name="go-import" content="{{.GoGetImport}} git {{.CloneLink.HTTPS}}">
+	<meta name="go-import" content="{{.GoGetImport}} git {{.RepoCloneLink.HTTPS}}">
 	<meta name="go-source" content="{{.GoGetImport}} _ {{.GoDocDirectory}} {{.GoDocFile}}">
 {{end}}
 {{if .FeedURL}}

templates/repo/clone_buttons.tmpl

@@ -1,42 +1,24 @@
-{{if not $.DisableHTTP}}
-	<button class="ui basic clone button no-transition" id="repo-clone-https" data-link="{{if $.PageIsWiki}}{{$.WikiCloneLink.HTTPS}}{{else}}{{$.CloneLink.HTTPS}}{{end}}">
+<!-- there is always at least one button (by context/repo.go) -->
+{{if $.CloneButtonShowHTTPS}}
+	<button class="ui basic clone button no-transition" id="repo-clone-https" data-link="{{$.CloneButtonOriginLink.HTTPS}}">
 		{{if UseHTTPS}}HTTPS{{else}}HTTP{{end}}
 	</button>
 {{end}}
-{{if and (not $.DisableSSH) (or $.IsSigned $.ExposeAnonSSH)}}
-	<button class="ui basic clone button no-transition" id="repo-clone-ssh" data-link="{{if $.PageIsWiki}}{{$.WikiCloneLink.SSH}}{{else}}{{$.CloneLink.SSH}}{{end}}">
+{{if $.CloneButtonShowSSH}}
+	<button class="ui basic clone button no-transition" id="repo-clone-ssh" data-link="{{$.CloneButtonOriginLink.SSH}}">
 		SSH
 	</button>
 {{end}}
-{{if not $.DisableHTTP}}
-	<input id="repo-clone-url" value="{{if $.PageIsWiki}}{{$.WikiCloneLink.HTTPS}}{{else}}{{$.CloneLink.HTTPS}}{{end}}" readonly>
-{{else if and (not .DisableSSH) (or $.IsSigned $.ExposeAnonSSH)}}
-	<input id="repo-clone-url" value="{{if $.PageIsWiki}}{{$.WikiCloneLink.SSH}}{{else}}{{$.CloneLink.SSH}}{{end}}" readonly>
-{{end}}
-{{if or (not $.DisableHTTP) (and (not $.DisableSSH) (or $.IsSigned $.ExposeAnonSSH))}}
-	<button class="ui basic icon button tooltip" id="clipboard-btn" data-content="{{.i18n.Tr "copy_url"}}" data-clipboard-target="#repo-clone-url">
-		{{svg "octicon-paste"}}
-	</button>
-{{end}}
-{{if not (and $.DisableHTTP $.DisableSSH)}}
-	<script>
-		<!-- /* eslint-disable */ -->
-		window.config.pageData['repoCloneButtons']= {httpsDisabled: {{$.DisableHTTP}}};
-	</script>
-	<script>
-		(() => {
-			const tmplData = window.config.pageData.repoCloneButtons;
-			const isSSH = tmplData.httpsDisabled || localStorage.getItem('repo-clone-protocol') === 'ssh';
-			const sshButton = document.getElementById('repo-clone-ssh');
-			const httpsButton = document.getElementById('repo-clone-https');
-			const input = document.getElementById('repo-clone-url');
-			if (input) input.value = (isSSH ? sshButton : httpsButton).getAttribute('data-link');
-			if (sshButton) sshButton.classList[isSSH ? 'add' : 'remove']('primary');
-			if (httpsButton) httpsButton.classList[isSSH ? 'remove' : 'add']('primary');
-			setTimeout(() => {
-				if (sshButton) sshButton.classList.remove('no-transition');
-				if (httpsButton) httpsButton.classList.remove('no-transition');
-			}, 100);
-		})();
-	</script>
-{{end}}
+<!-- the value will be updated by initRepoCloneLink, the code below is used to avoid UI flicking  -->
+<input id="repo-clone-url" value="" readonly>
+<script>
+	(() => {
+		const proto = localStorage.getItem('repo-clone-protocol') || 'https';
+		const btn = document.getElementById(`repo-clone-${proto}`);
+		// it's ok if we don't find the btn here, initRepoCloneLink will take care of it
+		document.getElementById('repo-clone-url').value = btn ? btn.getAttribute('data-link') : '';
+	})();
+</script>
+<button class="ui basic icon button tooltip" id="clipboard-btn" data-content="{{.i18n.Tr "copy_url"}}" data-clipboard-target="#repo-clone-url">
+	{{svg "octicon-paste"}}
+</button>

templates/repo/empty.tmpl

@@ -18,7 +18,7 @@
 					<h4 class="ui top attached header">
 						{{.i18n.Tr "repo.quick_guide"}}
 					</h4>
-					<div class="ui attached guide table segment">
+					<div class="ui attached guide table segment empty-repo-guide">
 						<div class="item">
 							<h3>{{.i18n.Tr "repo.clone_this_repo"}} <small>{{.i18n.Tr "repo.clone_helper" "http://git-scm.com/book/en/Git-Basics-Getting-a-Git-Repository" | Str2html}}</small></h3>
 							<div class="ui action small input">
@@ -37,7 +37,7 @@ git init
 {{if ne .Repository.DefaultBranch "master"}}git checkout -b {{.Repository.DefaultBranch}}{{end}}
 git add README.md
 git commit -m "first commit"
-git remote add origin <span class="clone-url">{{$.CloneLink.HTTPS}}</span>
+git remote add origin <span class="clone-url"></span>
 git push -u origin {{.Repository.DefaultBranch}}</code></pre>
 								</div>
 							</div>
@@ -46,18 +46,23 @@ git push -u origin {{.Repository.DefaultBranch}}</code></pre>
 							<div class="item">
 								<h3>{{.i18n.Tr "repo.push_exist_repo"}}</h3>
 								<div class="markup">
-									<pre><code>git remote add origin <span class="clone-url">{{$.CloneLink.HTTPS}}</span>
+									<pre><code>git remote add origin <span class="clone-url"></span>
 git push -u origin {{.Repository.DefaultBranch}}</code></pre>
 								</div>
 							</div>
-							<script defer>
-								/* eslint-disable no-undef */
-								const cloneUrls = document.getElementsByClassName('clone-url');
-								if (cloneUrls) {
-									for (let i = 0; i < cloneUrls.length; i++) {
-										cloneUrls[i].textContent = (isSSH ? sshButton : httpsButton).getAttribute('data-link');
+							<!-- the clone-url content will be updated by initRepoCloneLink, the code below is used to avoid UI flicking  -->
+							<script>
+								(() => {
+									const proto = localStorage.getItem('repo-clone-protocol') || 'https';
+									const btn = document.getElementById(`repo-clone-${proto}`);
+									const cloneUrls = document.getElementsByClassName('clone-url');
+									// it's ok if we didn't find the btn here, initRepoCloneLink will take all the work
+									if (btn) {
+										for (let i = 0; i < cloneUrls.length; i++) {
+											cloneUrls[i].textContent = btn.getAttribute('data-link');
+										}
 									}
-								}
+								})();
 							</script>
 						{{end}}
 					{{else}}

templates/repo/home.tmpl

@@ -125,7 +125,7 @@
 								<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.BranchName}}.zip" rel="nofollow">{{svg "octicon-file-zip" 16 "mr-3"}}{{.i18n.Tr "repo.download_zip"}}</a>
 								<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.BranchName}}.tar.gz" rel="nofollow">{{svg "octicon-file-zip" 16 "mr-3"}}{{.i18n.Tr "repo.download_tar"}}</a>
 								<a class="item archive-link" href="{{$.RepoLink}}/archive/{{PathEscapeSegments $.BranchName}}.bundle" rel="nofollow">{{svg "octicon-package" 16 "mr-3"}}{{.i18n.Tr "repo.download_bundle"}}</a>
-								<a class="item" href="vscode://vscode.git/clone?url={{if $.PageIsWiki}}{{$.WikiCloneLink.HTTPS}}{{else}}{{$.CloneLink.HTTPS}}{{end}}">{{svg "gitea-vscode" 16 "mr-3"}}{{.i18n.Tr "repo.clone_in_vsc"}}</a>
+								<a class="item" href="vscode://vscode.git/clone?url={{$.RepoCloneLink.HTTPS}}">{{svg "gitea-vscode" 16 "mr-3"}}{{.i18n.Tr "repo.clone_in_vsc"}}</a>
 							</div>
 						</button>
 					</div>

templates/repo/migrate/migrating.tmpl

@@ -1,5 +1,5 @@
 {{template "base/head" .}}
-<div class="page-content repository quickstart">
+<div class="page-content repository">
 	{{template "repo/header" .}}
 	<div class="ui container">
 		<div class="ui grid">

web_src/js/features/repo-common.js

@@ -43,26 +43,56 @@ export function initRepoArchiveLinks() {
   });
 }
 
-export function initRepoClone() {
-  // Quick start and repository home
-  $('#repo-clone-ssh').on('click', function () {
-    $('.clone-url').text($(this).data('link'));
-    $('#repo-clone-url').val($(this).data('link'));
-    $(this).addClass('primary');
-    $('#repo-clone-https').removeClass('primary');
-    localStorage.setItem('repo-clone-protocol', 'ssh');
-  });
-  $('#repo-clone-https').on('click', function () {
-    $('.clone-url').text($(this).data('link'));
-    $('#repo-clone-url').val($(this).data('link'));
-    $(this).addClass('primary');
-    if ($('#repo-clone-ssh').length > 0) {
-      $('#repo-clone-ssh').removeClass('primary');
-      localStorage.setItem('repo-clone-protocol', 'https');
+export function initRepoCloneLink() {
+  const defaultGitProtocol = 'https'; // ssh or https
+
+  const $repoCloneSsh = $('#repo-clone-ssh');
+  const $repoCloneHttps = $('#repo-clone-https');
+  const $inputLink = $('#repo-clone-url');
+
+  if ((!$repoCloneSsh.length && !$repoCloneHttps.length) || !$inputLink.length) {
+    return;
+  }
+
+  const updateUi = () => {
+    let isSSH = (localStorage.getItem('repo-clone-protocol') || defaultGitProtocol) === 'ssh';
+    // there must be at least one clone button (by context/repo.go). if no ssh, then there must be https.
+    if (isSSH && $repoCloneSsh.length === 0) {
+      isSSH = false;
+    } else if (!isSSH && $repoCloneHttps.length === 0) {
+      isSSH = true;
     }
+    const cloneLink = (isSSH ? $repoCloneSsh : $repoCloneHttps).attr('data-link');
+    $inputLink.val(cloneLink);
+    if (isSSH) {
+      $repoCloneSsh.addClass('primary');
+      $repoCloneHttps.removeClass('primary');
+    } else {
+      $repoCloneSsh.removeClass('primary');
+      $repoCloneHttps.addClass('primary');
+    }
+    // the empty repo guide
+    $('.quickstart .empty-repo-guide .clone-url').text(cloneLink);
+  };
+  updateUi();
+
+  setTimeout(() => {
+    // restore animation after first init
+    $repoCloneSsh.removeClass('no-transition');
+    $repoCloneHttps.removeClass('no-transition');
+  }, 100);
+
+  $repoCloneSsh.on('click', () => {
+    localStorage.setItem('repo-clone-protocol', 'ssh');
+    updateUi();
   });
-  $('#repo-clone-url').on('click', function () {
-    $(this).select();
+  $repoCloneHttps.on('click', () => {
+    localStorage.setItem('repo-clone-protocol', 'https');
+    updateUi();
+  });
+
+  $inputLink.on('click', () => {
+    $inputLink.select();
   });
 }
 

web_src/js/features/repo-legacy.js

@@ -16,7 +16,7 @@ import {svg} from '../svg.js';
 import {htmlEscape} from 'escape-goat';
 import {initRepoBranchTagDropdown} from '../components/RepoBranchTagDropdown.js';
 import {
-  initRepoClone,
+  initRepoCloneLink,
   initRepoCommonBranchOrTagDropdown,
   initRepoCommonFilterSearchDropdown,
   initRepoCommonLanguageStats,
@@ -498,7 +498,7 @@ export function initRepository() {
     initRepoCommonFilterSearchDropdown('.choose.branch .dropdown');
   }
 
-  initRepoClone();
+  initRepoCloneLink();
   initRepoCommonLanguageStats();
   initRepoSettingBranches();