FIX: Permalinks issues (#18939)

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

@@ -6,11 +6,13 @@ import discourseDebounce from "discourse-common/lib/debounce";
 import { observes } from "discourse-common/utils/decorators";
 import { clipboardCopy } from "discourse/lib/utilities";
 import { inject as service } from "@ember/service";
+import { or } from "@ember/object/computed";
 
 export default Controller.extend({
   dialog: service(),
   loading: false,
   filter: null,
+  showSearch: or("model.length", "filter"),
 
   _debouncedShow() {
     Permalink.findAll(this.filter).then((result) => {

app/assets/javascripts/admin/addon/templates/components/permalink-form.hbs

@@ -6,8 +6,8 @@
 
     <ComboBox @content={{this.permalinkTypes}} @value={{this.permalinkType}} @onChange={{action (mut this.permalinkType)}} @class="permalink-type" />
 
-    <TextField @value={{this.permalinkTypeValue}} @disabled={{this.formSubmitted}} @placeholderKey={{this.permalinkTypePlaceholder}} @autocorrect="off" @autocapitalize="off" @keyDown={{action "submitFormOnEnter"}} />
+    <TextField @value={{this.permalinkTypeValue}} @disabled={{this.formSubmitted}} @class="permalink-destination" @placeholderKey={{this.permalinkTypePlaceholder}} @autocorrect="off" @autocapitalize="off" @keyDown={{action "submitFormOnEnter"}} />
 
-    <DButton @action={{action "onSubmit"}} @disabled={{this.formSubmitted}} @label="admin.permalink.form.add" />
+    <DButton @action={{action "onSubmit"}} @disabled={{this.formSubmitted}} @class="permalink-add" @label="admin.permalink.form.add" />
   </div>
 </div>

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

@@ -6,10 +6,12 @@
 <PermalinkForm @action={{action "recordAdded"}} />
 
 <ConditionalLoadingSpinner @condition={{this.loading}}>
-  {{#if this.model.length}}
   <div class="permalink-search">
     <TextField @value={{this.filter}} @class="url-input" @placeholderKey="admin.permalink.form.filter" @autocorrect="off" @autocapitalize="off" />
   </div>
+
+  <div class="permalink-results">
+    {{#if this.model.length}}
       <table class="admin-logs-table permalinks grid">
         <thead class="heading-container">
           <th class="col heading first url">{{i18n "admin.permalink.url"}}</th>
@@ -51,6 +53,11 @@
         </tbody>
       </table>
     {{else}}
-    {{i18n "search.no_results"}}
+      {{#if this.filter}}
+        <p class="permalink-results__no-result">{{i18n "search.no_results"}}</p>
+      {{else}}
+        <p class="permalink-results__no-permalinks">{{i18n "admin.permalink.no_permalinks"}}</p>
       {{/if}}
+    {{/if}}
+  </div>
 </ConditionalLoadingSpinner>

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

@@ -0,0 +1,56 @@
+import { acceptance, exists } from "discourse/tests/helpers/qunit-helpers";
+import { fillIn, visit } from "@ember/test-helpers";
+import { test } from "qunit";
+
+acceptance("Admin - Permalinks", function (needs) {
+  const startingData = [
+    {
+      id: 38,
+      url: "c/feature/announcements",
+      topic_id: null,
+      topic_title: null,
+      topic_url: null,
+      post_id: null,
+      post_url: null,
+      post_number: null,
+      post_topic_title: null,
+      category_id: 67,
+      category_name: "announcements",
+      category_url: "/c/announcements/67",
+      external_url: null,
+      tag_id: null,
+      tag_name: null,
+      tag_url: null,
+    },
+  ];
+
+  needs.user();
+  needs.pretender((server, helper) => {
+    server.get("/admin/permalinks.json", (response) => {
+      const result =
+        response.queryParams.filter !== "feature" ? [] : startingData;
+      return helper.response(200, result);
+    });
+  });
+
+  test("search permalinks with result", async function (assert) {
+    await visit("/admin/customize/permalinks");
+    await fillIn(".permalink-search input", "feature");
+    assert.ok(
+      exists(".permalink-results span[title='c/feature/announcements']"),
+      "permalink is found after search"
+    );
+  });
+
+  test("search permalinks without results", async function (assert) {
+    await visit("/admin/customize/permalinks");
+    await fillIn(".permalink-search input", "garboogle");
+
+    assert.ok(
+      exists(".permalink-results__no-result"),
+      "no results message shown"
+    );
+
+    assert.ok(exists(".permalink-search"), "search input still visible");
+  });
+});

config/locales/client.en.yml

@@ -5839,6 +5839,7 @@ en:
         destination: "Destination"
         copy_to_clipboard: "Copy Permalink to Clipboard"
         delete_confirm: Are you sure you want to delete this permalink?
+        no_permalinks: "You don't have any permalinks yet. Create a new permalink above to begin seeing a list of your permalinks here."
         form:
           label: "New:"
           add: "Add"