From 72e956b79a3b2e055bb5d4d5e20e88eaa2eeec96 Mon Sep 17 00:00:00 2001 From: Hester Gong Date: Sat, 29 Apr 2023 18:44:52 +0800 Subject: [PATCH] Improve protected branch setting page (#24379) Main changes: 1. Change html structure of protected branch page, use [`grouped fields`](https://fomantic-ui.com/collections/form.html#grouped-fields) instead of `fields` for better margin, and wrap `grouped fields` around related `field`s, remove unnecessary `
` outer div 2. Changed some order of field to make them more categorized, used `ui dividing header` for categorization and fine tune css. Before: Screen Shot 2023-04-27 at 14 56 19 Screen Shot 2023-04-27 at 14 56 30 Screen Shot 2023-04-27 at 14 56 36 After: https://user-images.githubusercontent.com/17645053/235114568-da010aad-7654-4410-ab8c-5d0fce7edadb.mov 3. Changed "Enable Merge Whitelist" to radio checkbox, and added "Enable Merge" radio checkbox, which are exclusive Before: Screen Shot 2023-04-28 at 13 08 29 After: Screen Shot 2023-04-28 at 13 09 28 4. Add a link to set default branch on branch list page (with reference to github) https://user-images.githubusercontent.com/17645053/234787404-61c1c7b6-aabf-429f-a109-5b690e4e0b5a.mov 5. Removed dead codes. --------- Co-authored-by: wxiaoguang Co-authored-by: silverwind Co-authored-by: Giteabot --- options/locale/locale_en-US.ini | 8 +- routers/web/repo/setting_protected_branch.go | 9 - templates/repo/branch/list.tmpl | 7 +- templates/repo/settings/branches.tmpl | 14 +- templates/repo/settings/protected_branch.tmpl | 316 +++++++++--------- web_src/css/base.css | 8 +- web_src/css/helpers.css | 2 + web_src/css/repository.css | 33 +- web_src/js/features/repo-settings.js | 26 +- 9 files changed, 196 insertions(+), 227 deletions(-) diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini index 0072ac6fc..32d9bebc8 100644 --- a/options/locale/locale_en-US.ini +++ b/options/locale/locale_en-US.ini @@ -1901,6 +1901,7 @@ settings.sync_mirror = Synchronize Now settings.mirror_sync_in_progress = Mirror synchronization is in progress. Check back in a minute. settings.site = Website settings.update_settings = Update Settings +settings.branches.switch_default_branch = Switch Default Branch settings.branches.update_default_branch = Update Default Branch settings.branches.add_new_rule = Add New Rule settings.advanced_settings = Advanced Settings @@ -2096,6 +2097,8 @@ settings.event_pull_request_review = Pull Request Reviewed settings.event_pull_request_review_desc = Pull request approved, rejected, or review comment. settings.event_pull_request_sync = Pull Request Synchronized settings.event_pull_request_sync_desc = Pull request synchronized. +settings.event_pull_request_approvals = Pull Request Approvals +settings.event_pull_request_merge = Pull Request Merge settings.event_package = Package settings.event_package_desc = Package created or deleted in a repository. settings.branch_filter = Branch filter @@ -2151,13 +2154,15 @@ settings.protected_branch.delete_rule = Delete Rule settings.protected_branch_can_push = Allow push? settings.protected_branch_can_push_yes = You can push settings.protected_branch_can_push_no = You cannot push -settings.branch_protection = Branch Protection for Branch '%s' +settings.branch_protection = Branch Protection Rules for Branch '%s' settings.protect_this_branch = Enable Branch Protection settings.protect_this_branch_desc = Prevents deletion and restricts Git pushing and merging to the branch. settings.protect_disable_push = Disable Push settings.protect_disable_push_desc = No pushing will be allowed to this branch. settings.protect_enable_push = Enable Push settings.protect_enable_push_desc = Anyone with write access will be allowed to push to this branch (but not force push). +settings.protect_enable_merge = Enable Merge +settings.protect_enable_merge_desc = Anyone with write access will be allowed to merge the pull requests into this branch. settings.protect_whitelist_committers = Whitelist Restricted Push settings.protect_whitelist_committers_desc = Only whitelisted users or teams will be allowed to push to this branch (but not force push). settings.protect_whitelist_deploy_keys = Whitelist deploy keys with write access to push. @@ -2183,6 +2188,7 @@ settings.dismiss_stale_approvals_desc = When new commits that change the content settings.require_signed_commits = Require Signed Commits settings.require_signed_commits_desc = Reject pushes to this branch if they are unsigned or unverifiable. settings.protect_branch_name_pattern = Protected Branch Name Pattern +settings.protect_patterns = Patterns settings.protect_protected_file_patterns = "Protected file patterns (separated using semicolon ';'):" settings.protect_protected_file_patterns_desc = "Protected files are not allowed to be changed directly even if user has rights to add, edit, or delete files in this branch. Multiple patterns can be separated using semicolon (';'). See github.com/gobwas/glob documentation for pattern syntax. Examples: .drone.yml, /docs/**/*.txt." settings.protect_unprotected_file_patterns = "Unprotected file patterns (separated using semicolon ';'):" diff --git a/routers/web/repo/setting_protected_branch.go b/routers/web/repo/setting_protected_branch.go index 34e84c465..3beb79f20 100644 --- a/routers/web/repo/setting_protected_branch.go +++ b/routers/web/repo/setting_protected_branch.go @@ -130,15 +130,6 @@ func SettingsProtectedBranch(c *context.Context) { } c.Data["branch_status_check_contexts"] = contexts - c.Data["is_context_required"] = func(context string) bool { - for _, c := range rule.StatusCheckContexts { - if c == context { - return true - } - } - return false - } - if c.Repo.Owner.IsOrganization() { teams, err := organization.OrgFromUser(c.Repo.Owner).TeamsWithAccessToRepo(c.Repo.Repository.ID, perm.AccessModeRead) if err != nil { diff --git a/templates/repo/branch/list.tmpl b/templates/repo/branch/list.tmpl index 596d9ae78..40d635130 100644 --- a/templates/repo/branch/list.tmpl +++ b/templates/repo/branch/list.tmpl @@ -5,8 +5,13 @@ {{template "base/alert" .}} {{template "repo/sub_menu" .}} {{if .DefaultBranchBranch}} -

+

{{.locale.Tr "repo.default_branch"}} + {{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}} + + {{svg "octicon-arrow-switch"}} + + {{end}}

diff --git a/templates/repo/settings/branches.tmpl b/templates/repo/settings/branches.tmpl index f74a2a837..8023d39fe 100644 --- a/templates/repo/settings/branches.tmpl +++ b/templates/repo/settings/branches.tmpl @@ -12,18 +12,13 @@

{{.locale.Tr "repo.settings.default_branch_desc"}}

-
+ {{.CsrfTokenHtml}} {{if not .Repository.IsEmpty}} -
-
- {{svg "octicon-triangle-down" 14 "dropdown icon"}} +
+ {{svg "octicon-triangle-down" 14 "dropdown icon"}} +
{{.Repository.DefaultBranch}}
{{range .Branches}} @@ -32,7 +27,6 @@
-
{{end}}
diff --git a/templates/repo/settings/protected_branch.tmpl b/templates/repo/settings/protected_branch.tmpl index 31ba0bf88..2102dac64 100644 --- a/templates/repo/settings/protected_branch.tmpl +++ b/templates/repo/settings/protected_branch.tmpl @@ -5,39 +5,49 @@ {{.locale.Tr "repo.settings.branch_protection" (.Rule.RuleName|Escape) | Str2html}}
+
{{.locale.Tr "repo.settings.protect_patterns"}}
- +
- -
+
+ + +

{{.locale.Tr "repo.settings.protect_protected_file_patterns_desc" | Safe}}

+
+
+ + +

{{.locale.Tr "repo.settings.protect_unprotected_file_patterns_desc" | Safe}}

+
{{.CsrfTokenHtml}} -
-
-
- - -

{{.locale.Tr "repo.settings.protect_disable_push_desc"}}

-
+
{{.locale.Tr "repo.settings.event_push"}}
+
+
+ + +

{{.locale.Tr "repo.settings.protect_disable_push_desc"}}

-
-
- - -

{{.locale.Tr "repo.settings.protect_enable_push_desc"}}

-
+
+
+
+ + +

{{.locale.Tr "repo.settings.protect_enable_push_desc"}}

+
+
- +

{{.locale.Tr "repo.settings.protect_whitelist_committers_desc"}}

-
-
+
+
@@ -52,8 +62,7 @@
{{if .Owner.IsOrganization}} -
-
+
@@ -69,105 +78,37 @@
{{end}} -
-
+
- +
- -
- +
+
+
+ + +

{{.locale.Tr "repo.settings.require_signed_commits_desc"}}

+
+
+
{{.locale.Tr "repo.settings.event_pull_request_approvals"}}
+
+ + +

{{.locale.Tr "repo.settings.protect_required_approvals_desc"}}

+
+
- - -

{{.locale.Tr "repo.settings.protect_merge_whitelist_committers_desc"}}

-
-
-
-
- -
- -
{{.locale.Tr "repo.settings.protect_whitelist_search_users"}}
-
- {{range .Users}} -
- {{avatar $.Context . 28 "mini"}}{{template "repo/search_name" .}} -
- {{end}} -
-
-
- {{if .Owner.IsOrganization}} -
-
- -
- -
{{.locale.Tr "repo.settings.protect_whitelist_search_teams"}}
-
- {{range .Teams}} -
- {{svg "octicon-people"}} - {{.Name}} -
- {{end}} -
-
-
- {{end}} -
- -
-
- - -

{{.locale.Tr "repo.settings.protect_check_status_contexts_desc"}}

-
-
- -
-
- - - - - - - {{range $.branch_status_check_contexts}} - - {{end}} - -
- {{.locale.Tr "repo.settings.protect_check_status_contexts_list"}} -
- - - - {{.}} - {{if $.is_context_required}}{{if call $.is_context_required .}}
Required
{{end}}{{end}} -
-
-
- -
- - -

{{.locale.Tr "repo.settings.protect_required_approvals_desc"}}

-
-
-
- +

{{.locale.Tr "repo.settings.protect_approvals_whitelist_enabled_desc"}}

-
-
+
+
@@ -182,8 +123,7 @@
{{if .Owner.IsOrganization}} -
-
+
@@ -200,53 +140,117 @@
{{end}}
-
-
- - -

{{.locale.Tr "repo.settings.block_rejected_reviews_desc"}}

-
-
-
-
- - -

{{.locale.Tr "repo.settings.block_on_official_review_requests_desc"}}

-
-
-
-
- - -

{{.locale.Tr "repo.settings.dismiss_stale_approvals_desc"}}

-
-
-
-
- - -

{{.locale.Tr "repo.settings.require_signed_commits_desc"}}

-
-
-
-
- - -

{{.locale.Tr "repo.settings.block_outdated_branch_desc"}}

-
-
-
- - -

{{.locale.Tr "repo.settings.protect_protected_file_patterns_desc" | Safe}}

-
-
- - -

{{.locale.Tr "repo.settings.protect_unprotected_file_patterns_desc" | Safe}}

+
+
+
+ + +

{{.locale.Tr "repo.settings.dismiss_stale_approvals_desc"}}

+
+
+
+
+
+ + +

{{.locale.Tr "repo.settings.protect_check_status_contexts_desc"}}

+
+
+
+ + + + + + + + {{range $.branch_status_check_contexts}} + + + + {{else}} + + {{end}} + +
{{.locale.Tr "repo.settings.protect_check_status_contexts_list"}}
+ + + + +
N/A
+
+
+
{{.locale.Tr "repo.settings.event_pull_request_merge"}}
+
+
+
+ + +

{{.locale.Tr "repo.settings.protect_enable_merge_desc"}}

+
+
+
+
+ + +

{{.locale.Tr "repo.settings.protect_merge_whitelist_committers_desc"}}

+
+
+
+
+ +
+ +
{{.locale.Tr "repo.settings.protect_whitelist_search_users"}}
+
+ {{range .Users}} +
+ {{avatar $.Context . 28 "mini"}}{{template "repo/search_name" .}} +
+ {{end}} +
+
+
+ {{if .Owner.IsOrganization}} +
+ +
+ +
{{.locale.Tr "repo.settings.protect_whitelist_search_teams"}}
+
+ {{range .Teams}} +
+ {{svg "octicon-people"}} + {{.Name}} +
+ {{end}} +
+
+
+ {{end}} +
+
+
+
+ + +

{{.locale.Tr "repo.settings.block_rejected_reviews_desc"}}

+
+
+
+
+ + +

{{.locale.Tr "repo.settings.block_on_official_review_requests_desc"}}

+
+
+
+
+ + +

{{.locale.Tr "repo.settings.block_outdated_branch_desc"}}

-
diff --git a/web_src/css/base.css b/web_src/css/base.css index c7ea0e47c..95f83ef00 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -2533,12 +2533,12 @@ a.ui.basic.label:hover { right: 0.78571429rem; top: 0; bottom: 0; - height: 30px; - margin-top: auto; - margin-bottom: auto; + display: flex; + align-items: center; } -/* https://github.com/go-gitea/gitea/issues/10210 */ +/* if a .top.attached.header is followed by a .segment, add some margin */ +.ui.segments ~ .ui.top.attached.header, .ui.attached.segment ~ .ui.top.attached.header { margin-top: 1rem; } diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css index 22a284d43..0b4b47f56 100644 --- a/web_src/css/helpers.css +++ b/web_src/css/helpers.css @@ -60,6 +60,8 @@ Gitea's private styles use `g-` prefix. text-overflow: ellipsis; } +.gt-max-width-24rem { max-width: 24rem !important; } + /* below class names match Tailwind CSS */ .gt-break-all { word-break: break-all !important; } .gt-content-center { align-content: center !important; } diff --git a/web_src/css/repository.css b/web_src/css/repository.css index 8b25775bb..af2dd2be2 100644 --- a/web_src/css/repository.css +++ b/web_src/css/repository.css @@ -2012,35 +2012,10 @@ margin-top: -3px; } -.repository.settings.branches .protected-branches .selection.dropdown { - width: 300px; -} - -.repository.settings.branches .protected-branches .item { - border: 1px solid var(--color-secondary); - padding: 10px 15px; -} - -.repository.settings.branches .protected-branches .item:not(:last-child) { - border-bottom: 0; -} - -.repository.settings.branches .branch-protection .help { - margin-left: 26px; - padding-top: 0; -} - -.repository.settings.branches .branch-protection .fields { - margin-left: 20px; - display: block; -} - -.repository.settings.branches .branch-protection .whitelist { - margin-left: 26px; -} - -.repository.settings.branches .branch-protection .whitelist .dropdown img { - display: inline-block; +/* if the element is for a checkbox, then it should have a padding-left to align to the checkbox's text */ +.repository.settings.branches .branch-protection .ui.checkbox .help, +.repository.settings.branches .branch-protection .checkbox-sub-item { + padding-left: 26px; } .repository.settings.webhook .events .column { diff --git a/web_src/js/features/repo-settings.js b/web_src/js/features/repo-settings.js index 3d02a82bb..9f094cd2d 100644 --- a/web_src/js/features/repo-settings.js +++ b/web_src/js/features/repo-settings.js @@ -1,6 +1,5 @@ import $ from 'jquery'; import {createMonaco} from './codeeditor.js'; -import {initRepoCommonFilterSearchDropdown} from './repo-common.js'; const {appSubUrl, csrfToken} = window.config; @@ -73,20 +72,13 @@ export function initRepoSettingGitHook() { } export function initRepoSettingBranches() { - // Branches - if ($('.repository.settings.branches').length > 0) { - initRepoCommonFilterSearchDropdown('.protected-branches .dropdown'); - $('.enable-protection, .enable-whitelist, .enable-statuscheck').on('change', function () { - if (this.checked) { - $($(this).data('target')).removeClass('disabled'); - } else { - $($(this).data('target')).addClass('disabled'); - } - }); - $('.disable-whitelist').on('change', function () { - if (this.checked) { - $($(this).data('target')).addClass('disabled'); - } - }); - } + if (!$('.repository.settings.branches').length) return; + $('.toggle-target-enabled').on('change', function () { + const $target = $($(this).attr('data-target')); + $target.toggleClass('disabled', !this.checked); + }); + $('.toggle-target-disabled').on('change', function () { + const $target = $($(this).attr('data-target')); + if (this.checked) $target.addClass('disabled'); // only disable, do not auto enable + }); }