Refactor repo clone button and repo clone links, fix JS error on empty repo page...

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`

diff --git a/models/repo/repo.go b/models/repo/repo.go
index f5b93d6da5a177d823d4a6f6207cdc17bb4c8f11..8cd055c67b184055d7aa193b5fbd7045e0eaaefd 100644 (file)
--- a/models/repo/repo.go
+++ b/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.

diff --git a/modules/context/repo.go b/modules/context/repo.go
index ccdc810fb69062e7c275503e159cadf3174fa1f9..b4ffb21cce8d9c496638339f114ae97289a5d825 100644 (file)
--- a/modules/context/repo.go
+++ b/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)

diff --git a/routers/web/repo/setting.go b/routers/web/repo/setting.go
index e3a424ea41c2b94ab4a4b5857c1f59a8aaa19343..75db7ca3e2d69d92072024fe69b9e185ad406009 100644 (file)
--- a/routers/web/repo/setting.go
+++ b/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 {

diff --git a/routers/web/repo/wiki.go b/routers/web/repo/wiki.go
index bd148413de9f8313b10079ddeac2d6311ea2ef58..7dcfcd87f0a599d947d7498c72bcf8bab3885ce1 100644 (file)
--- a/routers/web/repo/wiki.go
+++ b/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)

diff --git a/routers/web/web.go b/routers/web/web.go
index 14e90348b804f52d116aca0c9b85fe9be627cfdc..485ba1a1a0c1ffc1b77ea065b3fd18403b5e2aa4 100644 (file)
--- a/routers/web/web.go
+++ b/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() {

diff --git a/templates/base/head.tmpl b/templates/base/head.tmpl
index 68d14af51d40ade0164c6b429ec0edc6cb437dcf..2a9c24255d145965285226306d7da77610bf28c9 100644 (file)
--- a/templates/base/head.tmpl
+++ b/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}}

diff --git a/templates/repo/clone_buttons.tmpl b/templates/repo/clone_buttons.tmpl
index d4b822521cb5c5fb55bd9b3ccee7ac5af88e0c53..cee7e31965c50578b56e2a8bb2c5d9c930e7d261 100644 (file)
--- a/templates/repo/clone_buttons.tmpl
+++ b/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>

diff --git a/templates/repo/empty.tmpl b/templates/repo/empty.tmpl
index 6da9e28e16d2b2a35c34e4259e86921e21aba996..eee607ecafba785182293c0d20c4bdafab0a17f8 100644 (file)
--- a/templates/repo/empty.tmpl
+++ b/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}}

diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index 30f1471c16d5c1a7e9d8f2c2b1cfec5ce19f588b..c146f474eeb7aa3bc838fd92c356eb0e50b4c9fc 100644 (file)
--- a/templates/repo/home.tmpl
+++ b/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>

diff --git a/templates/repo/migrate/migrating.tmpl b/templates/repo/migrate/migrating.tmpl
index 6df7f0a65d687703cb210a4779b0976abce3c018..8858e88dadda778f53d1559a2715158b3de214c3 100644 (file)
--- a/templates/repo/migrate/migrating.tmpl
+++ b/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">

diff --git a/web_src/js/features/repo-common.js b/web_src/js/features/repo-common.js
index 9479fa78e42ccf4b3c75dd8475426353d548d237..89dae26277080bf225d3fb66b26d01fa120a7522 100644 (file)
--- a/web_src/js/features/repo-common.js
+++ b/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();
   });
 }
 

diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js
index d51dfe185c54712df2b9074f6f2920e95d9b8e79..185a0014fae2d03e97ab85718ae7791c11d22076 100644 (file)
--- a/web_src/js/features/repo-legacy.js
+++ b/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();