UX: Conditionally render permalinks filter (#30633)

app/assets/javascripts/admin/addon/components/admin-permalink-form.gjs

@@ -87,7 +87,9 @@ export default class AdminFlagsForm extends Component {
         permalink_type: data.permalinkType,
         permalink_type_value: this.valueForPermalinkType(data),
       });
-      this.adminPermalinks.model.unshift(Permalink.create(result.payload));
+      this.adminPermalinks.model.allLinks.unshift(
+        Permalink.create(result.payload)
+      );
       this.router.transitionTo("adminPermalinks");
     } catch (error) {
       popupAjaxError(error);
@@ -106,10 +108,12 @@ export default class AdminFlagsForm extends Component {
           permalink_type_value: this.valueForPermalinkType(data),
         }
       );
-      const index = this.adminPermalinks.model.findIndex(
+      const index = this.adminPermalinks.model.allLinks.findIndex(
         (permalink) => permalink.id === this.args.permalink.id
       );
-      this.adminPermalinks.model[index] = Permalink.create(result.payload);
+      this.adminPermalinks.model.allLinks[index] = Permalink.create(
+        result.payload
+      );
       this.router.transitionTo("adminPermalinks");
     } catch (error) {
       popupAjaxError(error);

app/assets/javascripts/admin/addon/controllers/admin-permalinks-index.js

@@ -49,7 +49,7 @@ export default class AdminPermalinksIndexController extends Controller {
       didConfirm: async () => {
         try {
           await this.store.destroyRecord("permalink", permalink);
-          this.model.removeObject(permalink);
+          this.model.allLinks.removeObject(permalink);
         } catch {
           this.dialog.alert(i18n("generic_error"));
         }

app/assets/javascripts/admin/addon/models/permalink.js

@@ -6,10 +6,16 @@ import discourseComputed from "discourse-common/utils/decorators";
 
 export default class Permalink extends RestModel {
   static findAll(filter) {
-    return ajax("/admin/permalinks.json", { data: { filter } }).then(function (
+    return ajax("/admin/permalinks.json").then(function (permalinks) {
-      permalinks
+      let allLinks = permalinks.map((p) => Permalink.create(p));
-    ) {
+
-      return permalinks.map((p) => Permalink.create(p));
+      let filteredLinks = filter
+        ? allLinks.filter(
+            (p) => p.url.includes(filter) || p.external_url?.includes(filter)
+          )
+        : allLinks;
+
+      return { allLinks, filteredLinks };
     });
   }
 

app/assets/javascripts/admin/addon/templates/permalinks-index.hbs

@@ -1,25 +1,27 @@
 <ConditionalLoadingSpinner @condition={{this.loading}}>
-  <div class="d-admin-filter">
+  {{#if this.model.allLinks.length}}
-    <div class="admin-filter__input-container permalink-search">
+    <div class="d-admin-filter">
-      <TextField
+      <div class="admin-filter__input-container permalink-search">
-        @value={{this.filter}}
+        <TextField
-        @placeholderKey="admin.permalink.form.filter"
+          @value={{this.filter}}
-        @autocorrect="off"
+          @placeholderKey="admin.permalink.form.filter"
-        @autocapitalize="off"
+          @autocorrect="off"
-        class="admin-filter__input"
+          @autocapitalize="off"
-      />
+          class="admin-filter__input"
+        />
+      </div>
     </div>
-  </div>
+  {{/if}}
 
   <div class="permalink-results">
-    {{#if this.model.length}}
+    {{#if this.model.filteredLinks.length}}
       <table class="d-admin-table permalinks">
         <thead>
           <th>{{i18n "admin.permalink.url"}}</th>
           <th>{{i18n "admin.permalink.destination"}}</th>
         </thead>
         <tbody>
-          {{#each this.model as |pl|}}
+          {{#each this.model.filteredLinks as |pl|}}
             <tr
               class={{concat-class
                 "admin-permalink-item d-admin-row__content"

app/assets/javascripts/discourse/tests/acceptance/admin-permalink-test.js

@@ -26,10 +26,8 @@ acceptance("Admin - Permalinks", function (needs) {
 
   needs.user();
   needs.pretender((server, helper) => {
-    server.get("/admin/permalinks.json", (response) => {
+    server.get("/admin/permalinks.json", () => {
-      const result =
+      return helper.response(200, startingData);
-        response.queryParams.filter !== "feature" ? [] : startingData;
-      return helper.response(200, result);
     });
   });
 

spec/system/admin_permalinks_page_spec.rb

@@ -11,6 +11,8 @@ describe "Admin Permalinks Page", type: :system do
 
   it "allows admin to create, edit, and destroy permalink" do
     admin_permalinks_page.visit
+    expect(admin_permalinks_page).to have_no_filter
+
     admin_permalinks_page.click_add_permalink
     admin_permalink_form_page
       .fill_in_url("test")
@@ -18,6 +20,13 @@ describe "Admin Permalinks Page", type: :system do
       .fill_in_category("1")
       .click_save
     expect(admin_permalinks_page).to have_permalinks("test")
+    expect(admin_permalinks_page).to have_filter
+
+    admin_permalinks_page.filter("no results")
+    expect(admin_permalinks_page).to have_no_results
+    expect(admin_permalinks_page).to have_filter
+
+    admin_permalinks_page.filter("")
 
     admin_permalinks_page.click_edit_permalink("test")
     admin_permalink_form_page.fill_in_url("test2").click_save

spec/system/page_objects/pages/admin_permalinks.rb

@@ -41,6 +41,22 @@ module PageObjects
         has_no_css?(".admin-permalink-item__url")
       end
 
+      def has_no_filter?
+        has_no_css?(".permalink-search")
+      end
+
+      def has_filter?
+        has_css?(".permalink-search")
+      end
+
+      def filter(text)
+        find(".permalink-search").fill_in with: text
+      end
+
+      def has_no_results?
+        has_css?(".permalink-results__no-result")
+      end
+
       def open_permalink_menu(url)
         find("tr.#{url} .permalink-menu-trigger").click
         self