Add the clear to permissions dropdown

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">

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;
+    }
+  }
+}

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(),

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