From da82f26c142630717e4079ba8157f1fff891920e Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Wed, 2 Sep 2026 20:23:57 -0700
Subject: [PATCH] Add the clear to permissions dropdown

---
 .../permissions-filter-dropdown.component.html    |  5 ++++-
 .../permissions-filter-dropdown.component.scss    | 15 +++++++++++++++
 .../permissions-filter-dropdown.component.spec.ts | 15 +++++++++++++++
 .../permissions-filter-dropdown.component.ts      |  5 +++++
 4 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.html b/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.html
index 39a84862c..92305255f 100644
--- a/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.html
+++ b/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.html
@@ -58,7 +58,10 @@
       <button *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }" class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" [disabled]="disabled">
         <div class="selected-icon me-1">
           @if (selectionModel.ownerFilter() === OwnerFilterType.OTHERS) {
-            <i-bs width="1em" height="1em" name="check"></i-bs>
+            <a class="text-reset focus-variants" href="javascript:void(0)" (click)="clearIncludeUsers()" aria-label="Clear selected users" i18n-aria-label>
+              <i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
+              <i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
+            </a>
           }
         </div>
         <div class="me-1 w-100">
diff --git a/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.scss b/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.scss
index 74a5f6b79..0ff4b4f79 100644
--- a/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.scss
+++ b/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.scss
@@ -6,3 +6,18 @@
     min-width: 1em;
     min-height: 1em;
 }
+
+.focus-variants {
+  .variant-focused {
+    display: none;
+  }
+
+  &:hover, &:focus {
+    .variant-unfocused {
+      display: none;
+    }
+    .variant-focused {
+      display: block;
+    }
+  }
+}
diff --git a/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.spec.ts b/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.spec.ts
index f352355c5..81d620ff1 100644
--- a/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.spec.ts
+++ b/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.spec.ts
@@ -171,6 +171,21 @@ describe('PermissionsFilterDropdownComponent', () => {
 
     expect(component.selectionModel.ownerFilter()).toEqual(OwnerFilterType.NONE)
   })
+  it('should clear selected users', () => {
+    component.selectionModel.includeUsers.set([12])
+    component.onUserSelect()
+    component.selectionModel.hideUnowned.set(true)
+    expect(component.selectionModel.ownerFilter()).toEqual(
+      OwnerFilterType.OTHERS
+    )
+
+    component.clearIncludeUsers()
+
+    expect(component.selectionModel.includeUsers()).toEqual([])
+    expect(component.selectionModel.ownerFilter()).toEqual(OwnerFilterType.NONE)
+    expect(component.selectionModel.hideUnowned()).toBeTruthy()
+  })
+
   it('should emit a selection model depending on the type of owner filter set', () => {
     const emitted = () => ({
       excludeUsers: ownerFilterSetResult.excludeUsers(),
diff --git a/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.ts b/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.ts
index 1821f5706..c0e115567 100644
--- a/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.ts
+++ b/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.ts
@@ -211,6 +211,11 @@ export class PermissionsFilterDropdownComponent extends ComponentWithPermissions
     this.ownerFilterSet.emit(this.selectionModel)
   }
 
+  clearIncludeUsers() {
+    this.selectionModel.includeUsers.set([])
+    this.onUserSelect()
+  }
+
   onUserSelect() {
     this.selectionModel.ownerFilter.set(
       this.selectionModel.includeUsers()?.length