Hide archived labels by default from the suggestions when assigning labels for an issue

templates/repo/issue/labels/labels_selector_field.tmpl

@@ -21,8 +21,10 @@
 					<div class="divider"></div>
 				{{end}}
 				{{$previousExclusiveScope = $exclusiveScope}}
-				<a class="{{if .IsChecked}}checked{{end}} item" href="#" data-id="{{.ID}}" data-id-selector="#label_{{.ID}}" data-scope="{{$exclusiveScope}}"><span class="octicon-check {{if not .IsChecked}}gt-invisible{{end}}">{{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}</span>&nbsp;&nbsp;{{RenderLabel $.Context .}}
-				{{if .Description}}<br><small class="desc">{{.Description | RenderEmoji $.Context}}</small>{{end}}</a>
+				<a class="{{if .IsChecked}}checked{{end}} item" href="#" data-id="{{.ID}}" {{if .IsArchived}}data-is-archived{{end}} data-id-selector="#label_{{.ID}}" data-scope="{{$exclusiveScope}}"><span class="octicon-check {{if not .IsChecked}}gt-invisible{{end}}">{{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}</span>&nbsp;&nbsp;{{RenderLabel $.Context .}}
+					{{if .Description}}<br><small class="desc">{{.Description | RenderEmoji $.Context}}</small>{{end}}
+					<p class="archived-label-hint">{{template "repo/issue/labels/label_archived" .}}</p>
+				</a>
 			{{end}}
 			<div class="divider"></div>
 			{{$previousExclusiveScope = "_no_scope"}}
@@ -32,8 +34,10 @@
 					<div class="divider"></div>
 				{{end}}
 				{{$previousExclusiveScope = $exclusiveScope}}
-				<a class="{{if .IsChecked}}checked{{end}} item" href="#" data-id="{{.ID}}" data-id-selector="#label_{{.ID}}" data-scope="{{$exclusiveScope}}"><span class="octicon-check {{if not .IsChecked}}gt-invisible{{end}}">{{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}</span>&nbsp;&nbsp;{{RenderLabel $.Context .}}
-				{{if .Description}}<br><small class="desc">{{.Description | RenderEmoji $.Context}}</small>{{end}}</a>
+				<a class="{{if .IsChecked}}checked{{end}} item" href="#" data-id="{{.ID}}" {{if .IsArchived}}data-is-archived{{end}} data-id-selector="#label_{{.ID}}" data-scope="{{$exclusiveScope}}"><span class="octicon-check {{if not .IsChecked}}gt-invisible{{end}}">{{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}</span>&nbsp;&nbsp;{{RenderLabel $.Context .}}
+					{{if .Description}}<br><small class="desc">{{.Description | RenderEmoji $.Context}}</small>{{end}}
+					<p class="archived-label-hint">{{template "repo/issue/labels/label_archived" .}}</p>
+			</a>
 			{{end}}
 		{{else}}
 			<div class="disabled item">{{ctx.Locale.Tr "repo.issues.new.no_items"}}</div>

web_src/css/repo/issue-label.css

@@ -45,3 +45,8 @@
 .label-operation .label {
   height: fit-content;
 }
+
+.archived-label-hint {
+  float: right;
+  margin: -12px;
+}

web_src/js/features/repo-issue-list.js

@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import {updateIssuesMeta} from './repo-issue.js';
-import {toggleElem} from '../utils/dom.js';
+import {toggleElem, hideElem} from '../utils/dom.js';
 import {htmlEscape} from 'escape-goat';
 import {confirmModal} from './comp/ConfirmModal.js';
 import {showErrorToast} from '../modules/toast.js';
@@ -194,6 +194,10 @@ function initArchivedLabelFilter() {
   const url = new URL(window.location.href);
   const archivedLabels = document.querySelectorAll('[data-is-archived]');
 
+  if (!archivedLabels.length) {
+    hideElem($('.archived-label-filter'));
+    return;
+  }
   const selectedLabels = (url.searchParams.get('labels') || '')
     .split(',')
     .map((id) => id < 0 ? `${~id + 1}` : id); // selectedLabels contains -ve ids, which are excluded so convert any -ve value id to +ve

web_src/js/features/repo-issue.js

@@ -680,3 +680,14 @@ export function initIssueTemplateCommentEditors($commentForm) {
     initCombo($(el));
   }
 }
+
+export function initArchivedLabelHandler() {
+  const archivedLabelEl = document.querySelector('.archived-label-hint');
+  if (!archivedLabelEl) {
+    return;
+  }
+  const archivedLabels = document.querySelectorAll('[data-is-archived]');
+  for (const label of archivedLabels) {
+    toggleElem(label, label.classList.contains('checked'));
+  }
+}

web_src/js/index.js

@@ -31,7 +31,7 @@ import {
   initRepoIssueWipTitle,
   initRepoPullRequestMergeInstruction,
   initRepoPullRequestAllowMaintainerEdit,
-  initRepoPullRequestReview, initRepoIssueSidebarList
+  initRepoPullRequestReview, initRepoIssueSidebarList, initArchivedLabelHandler,
 } from './features/repo-issue.js';
 import {
   initRepoEllipsisButton,
@@ -152,6 +152,7 @@ onDomReady(() => {
   initRepoIssueDue();
   initRepoIssueList();
   initRepoIssueSidebarList();
+  initArchivedLabelHandler();
   initRepoIssueReferenceRepositorySearch();
   initRepoIssueTimeTracking();
   initRepoIssueWipTitle();