From 0ff3869ea36f5bb3d155eb5796b448207aa99e6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcelo=20Elizeche=20Land=C3=B3?= <marcelo@goauthentik.io>
Date: Fri, 13 Mar 2026 17:11:28 -0300
Subject: [PATCH] web/elements: Add preserve-order, no-search and no-status
 attributes to ak-dual-select (#20749)

* Add preserve-order, no-search and no-status properties to ak-dual-select

* fix linting
---
 ...k-dual-select-dynamic-selected-provider.ts |  3 +
 .../ak-dual-select/ak-dual-select-provider.ts | 27 ++++++++
 .../elements/ak-dual-select/ak-dual-select.ts | 67 +++++++++++++------
 3 files changed, 76 insertions(+), 21 deletions(-)

diff --git a/web/src/elements/ak-dual-select/ak-dual-select-dynamic-selected-provider.ts b/web/src/elements/ak-dual-select/ak-dual-select-dynamic-selected-provider.ts
index 9843007c18..3aac4172be 100644
--- a/web/src/elements/ak-dual-select/ak-dual-select-dynamic-selected-provider.ts
+++ b/web/src/elements/ak-dual-select/ak-dual-select-dynamic-selected-provider.ts
@@ -51,6 +51,9 @@ export class AkDualSelectDynamic extends AkDualSelectProvider {
             .selected=${this.selected}
             available-label=${this.availableLabel}
             selected-label=${this.selectedLabel}
+            ?preserve-order=${this.preserveOrder}
+            ?no-search=${this.noSearch}
+            ?no-status=${this.noStatus}
         ></ak-dual-select>`;
     }
 }
diff --git a/web/src/elements/ak-dual-select/ak-dual-select-provider.ts b/web/src/elements/ak-dual-select/ak-dual-select-provider.ts
index 6adba45a52..7137cffc06 100644
--- a/web/src/elements/ak-dual-select/ak-dual-select-provider.ts
+++ b/web/src/elements/ak-dual-select/ak-dual-select-provider.ts
@@ -60,6 +60,30 @@ export class AkDualSelectProvider extends CustomListenerElement(AkControlElement
     @property({ attribute: "selected-label" })
     public selectedLabel = msg("Selected options");
 
+    /**
+     * When true, the selected pane preserves insertion order instead of sorting alphabetically.
+     *
+     * @attr
+     */
+    @property({ type: Boolean, attribute: "preserve-order" })
+    public preserveOrder = false;
+
+    /**
+     * When true, hides the search bars in both the available and selected panes.
+     *
+     * @attr
+     */
+    @property({ type: Boolean, attribute: "no-search" })
+    public noSearch = false;
+
+    /**
+     * When true, hides the item count status displays in both panes.
+     *
+     * @attr
+     */
+    @property({ type: Boolean, attribute: "no-status" })
+    public noStatus = false;
+
     /**
      * The debounce for the search as the user is typing in a request
      *
@@ -187,6 +211,9 @@ export class AkDualSelectProvider extends CustomListenerElement(AkControlElement
             .selected=${this.#selected}
             available-label=${this.availableLabel}
             selected-label=${this.selectedLabel}
+            ?preserve-order=${this.preserveOrder}
+            ?no-search=${this.noSearch}
+            ?no-status=${this.noStatus}
         ></ak-dual-select>`;
     }
 }
diff --git a/web/src/elements/ak-dual-select/ak-dual-select.ts b/web/src/elements/ak-dual-select/ak-dual-select.ts
index f04b4081de..83b094762f 100644
--- a/web/src/elements/ak-dual-select/ak-dual-select.ts
+++ b/web/src/elements/ak-dual-select/ak-dual-select.ts
@@ -90,6 +90,19 @@ export class AkDualSelect extends CustomEmitterElement(CustomListenerElement(AKE
     @property({ attribute: "selected-label" })
     selectedLabel = msg("Selected options");
 
+    @property({ type: Boolean, attribute: "no-search" })
+    noSearch = false;
+
+    @property({ type: Boolean, attribute: "no-status" })
+    noStatus = false;
+
+    /**
+     * When true, the selected pane preserves insertion order instead of sorting alphabetically.
+     * Use this when the order of selected items is meaningful (e.g. priority-based lists).
+     */
+    @property({ type: Boolean, attribute: "preserve-order" })
+    preserveOrder = false;
+
     //#endregion
 
     //#region State
@@ -322,17 +335,21 @@ export class AkDualSelect extends CustomEmitterElement(CustomListenerElement(AKE
                             </div>
                         </div>
                     </div>
-                    <ak-search-bar
-                        placeholder=${msg(str`Search ${this.availableLabel}...`)}
-                        name="ak-dual-list-available-search"
-                    ></ak-search-bar>
-                    <div class="pf-c-dual-list-selector__status">
-                        <span
-                            class="pf-c-dual-list-selector__status-text"
-                            id="basic-available-status-text"
-                            >${unsafeHTML(availableStatus)}</span
-                        >
-                    </div>
+                    ${this.noSearch
+                        ? nothing
+                        : html`<ak-search-bar
+                              placeholder=${msg(str`Search ${this.availableLabel}...`)}
+                              name="ak-dual-list-available-search"
+                          ></ak-search-bar>`}
+                    ${this.noStatus
+                        ? nothing
+                        : html`<div class="pf-c-dual-list-selector__status">
+                              <span
+                                  class="pf-c-dual-list-selector__status-text"
+                                  id="basic-available-status-text"
+                                  >${unsafeHTML(availableStatus)}</span
+                              >
+                          </div>`}
                     <ak-dual-select-available-pane
                         ${ref(this.availablePane)}
                         .options=${this.options}
@@ -359,19 +376,27 @@ export class AkDualSelect extends CustomEmitterElement(CustomListenerElement(AKE
                             </div>
                         </div>
                     </div>
-                    <ak-search-bar
-                        placeholder=${msg(str`Search ${this.selectedLabel}...`)}
-                        name="ak-dual-list-selected-search"
-                    ></ak-search-bar>
-                    <div
-                        class="pf-c-dual-list-selector__status ak-dual-list-selector__status--selected"
-                    >
-                        <span class="pf-c-dual-list-selector__status-text">${selectedStatus}</span>
-                    </div>
+                    ${this.noSearch
+                        ? nothing
+                        : html`<ak-search-bar
+                              placeholder=${msg(str`Search ${this.selectedLabel}...`)}
+                              name="ak-dual-list-selected-search"
+                          ></ak-search-bar>`}
+                    ${this.noStatus
+                        ? nothing
+                        : html`<div
+                              class="pf-c-dual-list-selector__status ak-dual-list-selector__status--selected"
+                          >
+                              <span class="pf-c-dual-list-selector__status-text"
+                                  >${selectedStatus}</span
+                              >
+                          </div>`}
 
                     <ak-dual-select-selected-pane
                         ${ref(this.selectedPane)}
-                        .selected=${selected.toSorted(localeComparator)}
+                        .selected=${this.preserveOrder
+                            ? selected
+                            : selected.toSorted(localeComparator)}
                     ></ak-dual-select-selected-pane>
                 </div>
             </div>