Refactor "org teams" page and help new users to "add member" to an org (#37051)

* Fix #22054
* Replace #34593, #27800
* And refactor legacy code, fix various problems

---------

Signed-off-by: wxiaoguang <wxiaoguang@gmail.com>

templates/org/member/members.tmpl

@@ -4,6 +4,13 @@
 	<div class="ui container">
 		{{template "base/alert" .}}
 
+		{{if .IsOrganizationOwner}}
+			<div class="flex-text-block">
+				<div class="tw-flex-1">{{ctx.Locale.Tr "org.teams.manage_team_member_prompt"}}</div>
+				<a class="ui primary button" href="./teams">{{ctx.Locale.Tr "org.teams.manage_team_member"}}</a>
+			</div>
+			<div class="divider"></div>
+		{{end}}
 		<div class="flex-list">
 			{{range .Members}}
 				{{$isPublic := index $.MembersIsPublicMember .ID}}
@@ -15,27 +22,27 @@
 						<div class="flex-item-title">
 							{{template "shared/user/name" .}}
 							{{if not $isPublic}}
-								<span class="ui basic tiny label">{{ctx.Locale.Tr "org.members.private"}}</span>
+								<span class="ui basic small label">{{ctx.Locale.Tr "org.members.private"}}</span>
 							{{end}}
 						</div>
-						{{if not $.PublicOnly}}
-							<div class="flex-item-body">
+						<div class="tw-flex tw-flex-col tw-gap-1">
+							{{if not $.PublicOnly}}
+							<div>
 								{{ctx.Locale.Tr "org.members.member_role"}}
 								<strong class="flex-text-inline">{{if index $.MembersIsUserOrgOwner .ID}}{{svg "octicon-shield-lock"}} {{ctx.Locale.Tr "org.members.owner"}}{{else}}{{ctx.Locale.Tr "org.members.member"}}{{end}}</strong>
 							</div>
+							{{end}}
 							{{if $.IsOrganizationOwner}}
-							<div class="flex-item-body">
-								{{ctx.Locale.Tr "admin.users.2fa"}}
-								<strong>
-									{{if index $.MembersTwoFaStatus .ID}}
-										<span class="tw-text-green">{{svg "octicon-check"}}</span>
-									{{else}}
-										{{svg "octicon-x"}}
-									{{end}}
-								</strong>
+							<div>
+								{{ctx.Locale.Tr "admin.users.2fa"}}:
+								{{if index $.MembersTwoFaStatus .ID}}
+									<span class="tw-text-green tw-flex">{{svg "octicon-check"}}</span>
+								{{else}}
+									{{svg "octicon-x"}}
+								{{end}}
 							</div>
 							{{end}}
-						{{end}}
+						</div>
 					</div>
 					<div class="flex-item-trailing">
 						{{if or (eq $.SignedUser.ID .ID) $.IsOrganizationOwner}}
@@ -46,45 +53,23 @@
 							{{end}}
 						{{end}}
 						{{if eq $.SignedUser.ID .ID}}
-							<form>
-								<button class="ui red tiny button delete-button" data-modal-id="leave-organization"
-									data-url="{{$.OrgLink}}/members/action/leave" data-datauid="{{.ID}}"
-									data-name="{{.DisplayName}}"
-									data-data-organization-name="{{$.Org.DisplayName}}">{{ctx.Locale.Tr "org.members.leave"}}</button>
-							</form>
+							<button class="ui red tiny button link-action"
+								data-url="{{$.OrgLink}}/members/action/leave?uid={{.ID}}"
+								data-modal-confirm-header="{{ctx.Locale.Tr "org.members.leave"}}"
+								data-modal-confirm-content="{{ctx.Locale.Tr "org.members.leave.detail" $.Org.DisplayName}}"
+								>{{ctx.Locale.Tr "org.members.leave"}}</button>
 						{{else if $.IsOrganizationOwner}}
-							<form>
-								<button class="ui red tiny button delete-button" data-modal-id="remove-organization-member"
-									data-url="{{$.OrgLink}}/members/action/remove" data-datauid="{{.ID}}"
-									data-name="{{.DisplayName}}"
-									data-data-organization-name="{{$.Org.DisplayName}}">{{ctx.Locale.Tr "org.members.remove"}}</button>
-							</form>
+							<button class="ui red tiny button link-action"
+								data-url="{{$.OrgLink}}/members/action/remove?uid={{.ID}}"
+								data-modal-confirm-header="{{ctx.Locale.Tr "org.members.remove"}}"
+								data-modal-confirm-content="{{ctx.Locale.Tr "org.members.remove.detail" .DisplayName $.Org.DisplayName}}"
+							>{{ctx.Locale.Tr "org.members.remove"}}</button>
 						{{end}}
 					</div>
 				</div>
 			{{end}}
 		</div>
-
 		{{template "base/paginate" .}}
 	</div>
 </div>
-<div class="ui g-modal-confirm delete modal" id="leave-organization">
-	<div class="header">
-		{{ctx.Locale.Tr "org.members.leave"}}
-	</div>
-	<div class="content">
-		<p>{{ctx.Locale.Tr "org.members.leave.detail" (HTMLFormat `<span class="%s"></span>` "dataOrganizationName")}}</p>
-	</div>
-	{{template "base/modal_actions_confirm" .}}
-</div>
-<div class="ui g-modal-confirm delete modal" id="remove-organization-member">
-	<div class="header">
-		{{ctx.Locale.Tr "org.members.remove"}}
-	</div>
-	<div class="content">
-		<p>{{ctx.Locale.Tr "org.members.remove.detail" (HTMLFormat `<span class="%s"></span>` "name") (HTMLFormat `<span class="%s"></span>` "dataOrganizationName")}}</p>
-	</div>
-	{{template "base/modal_actions_confirm" .}}
-</div>
-
 {{template "base/footer" .}}

templates/org/team/repositories.tmpl

@@ -7,9 +7,11 @@
 			{{template "org/team/sidebar" .}}
 			<div class="ui ten wide column">
 				{{template "org/team/navbar" .}}
+				{{$hasTopAttachedSegment := false}}
 				{{$canAddRemove := and $.IsOrganizationOwner (not $.Team.IncludesAllRepositories)}}
 				{{if $canAddRemove}}
-					<div class="ui top attached segment tw-flex tw-flex-wrap tw-gap-2">
+					{{$hasTopAttachedSegment = true}}
+					<div class="ui top attached segment flex-text-block tw-flex-wrap">
 						<form class="ui form ignore-dirty tw-flex-1 tw-flex" action="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/repo/add" method="post">
 							<div data-global-init="initSearchRepoBox" data-uid="{{.Org.ID}}" class="ui search">
 								<div class="ui input">
@@ -24,7 +26,11 @@
 						</div>
 					</div>
 				{{end}}
-				<div class="ui{{if not $canAddRemove}} top{{end}} attached segment">
+				{{if $.Team.IncludesAllRepositories}}
+					{{$hasTopAttachedSegment = true}}
+					<div class="ui top attached segment">{{ctx.Locale.Tr "org.teams.all_repositories"}}</div>
+				{{end}}
+				<div class="ui {{if not $hasTopAttachedSegment}}top{{end}} attached segment">
 					<div class="flex-list">
 						{{range $.TeamRepos}}
 							<div class="flex-item tw-items-center">

templates/org/team/sidebar.tmpl

@@ -26,7 +26,8 @@
 		</div>
 		{{if eq .Team.LowerName "owners"}}
 			<div class="item">
-				{{ctx.Locale.Tr "org.teams.owners_permission_desc"}}
+				<p>{{ctx.Locale.Tr "org.teams.owners_permission_desc"}}</p>
+				<p>{{ctx.Locale.Tr "org.teams.owners_permission_suggestion"}}</p>
 			</div>
 		{{else}}
 			<div class="item">

templates/org/team/teams.tmpl

@@ -4,7 +4,8 @@
 	<div class="ui container">
 		{{template "base/alert" .}}
 		{{if .IsOrganizationOwner}}
-			<div class="flex-text-block tw-justify-end">
+			<div class="flex-text-block">
+				<div class="tw-flex-1">{{ctx.Locale.Tr "org.teams.manage_team_member_prompt"}}</div>
 				<a class="ui primary button" href="{{.OrgLink}}/teams/new">{{svg "octicon-plus"}} {{ctx.Locale.Tr "org.create_new_team"}}</a>
 			</div>
 			<div class="divider"></div>