resolve issue with sort icons on admin/users and admin/runners (#24360)

Fixes #24327 to avoid the sort icon changing the table header over
multiple lines and adds missing sort icons on the runners page.

Author: jladbrook

models/actions/runner.go

@@ -189,6 +189,12 @@ func (opts FindRunnerOptions) toOrder() string {
 		return "last_online ASC"
 	case "alphabetically":
 		return "name ASC"
+	case "reversealphabetically":
+		return "name DESC"
+	case "newest":
+		return "id DESC"
+	case "oldest":
+		return "id ASC"
 	}
 	return "last_online DESC"
 }

routers/web/shared/actions/runners.go

@@ -53,6 +53,7 @@ func RunnersList(ctx *context.Context, opts actions_model.FindRunnerOptions) {
 	ctx.Data["RegistrationToken"] = token.Token
 	ctx.Data["RunnerOwnerID"] = opts.OwnerID
 	ctx.Data["RunnerRepoID"] = opts.RepoID
+	ctx.Data["SortType"] = opts.Sort
 
 	pager := context.NewPagination(int(count), opts.PageSize, opts.Page, 5)
 

templates/shared/actions/runner_list.tmpl

@@ -45,9 +45,18 @@
 		<table class="ui very basic striped table unstackable">
 			<thead>
 				<tr>
-					<th data-sortt-asc="online" data-sortt-desc="offline">{{.locale.Tr "actions.runners.status"}}</th>
-					<th data-sortt-asc="alphabetically">{{.locale.Tr "actions.runners.id"}}</th>
-					<th>{{.locale.Tr "actions.runners.name"}}</th>
+					<th data-sortt-asc="online" data-sortt-desc="offline">
+						{{.locale.Tr "actions.runners.status"}}
+						{{SortArrow "online" "offline" .SortType false}}
+					</th>
+					<th data-sortt-asc="newest" data-sortt-desc="oldest">
+						{{.locale.Tr "actions.runners.id"}}
+						{{SortArrow "oldest" "newest" .SortType false}}
+					</th>
+					<th data-sortt-asc="alphabetically" data-sortt-desc="reversealphabetically">
+						{{.locale.Tr "actions.runners.name"}}
+						{{SortArrow "alphabetically" "reversealphabetically" .SortType false}}
+					</th>
 					<th>{{.locale.Tr "actions.runners.version"}}</th>
 					<th>{{.locale.Tr "actions.runners.owner_type"}}</th>
 					<th>{{.locale.Tr "actions.runners.labels"}}</th>