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`

Changes

12 changed files (+99/-81)

• 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'); + 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-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'); - } + $repoCloneHttps.on('click', () => { + localStorage.setItem('repo-clone-protocol', 'https'); + updateUi(); }); - $('#repo-clone-url').on('click', function () { - $(this).select(); + + $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();