From 4ae288367e58efd6582c2511d8ce10836be8b9aa Mon Sep 17 00:00:00 2001
From: Keegan George <kgeorge13@gmail.com>
Date: Wed, 9 Nov 2022 11:23:08 -0800
Subject: [PATCH] FIX: Permalinks issues (#18939)

---
 .../addon/controllers/admin-permalinks.js     |  2 +
 .../templates/components/permalink-form.hbs   |  4 +-
 .../admin/addon/templates/permalinks.hbs      | 99 ++++++++++---------
 .../tests/acceptance/admin-permalink-test.js  | 56 +++++++++++
 config/locales/client.en.yml                  |  1 +
 5 files changed, 114 insertions(+), 48 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/tests/acceptance/admin-permalink-test.js

diff --git a/app/assets/javascripts/admin/addon/controllers/admin-permalinks.js b/app/assets/javascripts/admin/addon/controllers/admin-permalinks.js
index 07372d2f104..37f51260685 100644
--- a/app/assets/javascripts/admin/addon/controllers/admin-permalinks.js
+++ b/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) => {
diff --git a/app/assets/javascripts/admin/addon/templates/components/permalink-form.hbs b/app/assets/javascripts/admin/addon/templates/components/permalink-form.hbs
index 705ac6894d0..2e30cd353da 100644
--- a/app/assets/javascripts/admin/addon/templates/components/permalink-form.hbs
+++ b/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>
diff --git a/app/assets/javascripts/admin/addon/templates/permalinks.hbs b/app/assets/javascripts/admin/addon/templates/permalinks.hbs
index 13d1e1d1b7d..3f4cad78940 100644
--- a/app/assets/javascripts/admin/addon/templates/permalinks.hbs
+++ b/app/assets/javascripts/admin/addon/templates/permalinks.hbs
@@ -6,51 +6,58 @@
 <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>
-    <table class="admin-logs-table permalinks grid">
-      <thead class="heading-container">
-        <th class="col heading first url">{{i18n "admin.permalink.url"}}</th>
-        <th class="col heading destination">{{i18n "admin.permalink.destination"}}</th>
-        <th class="col heading actions"></th>
-      </thead>
-      <tbody>
-        {{#each this.model as |pl|}}
-          <tr class="admin-list-item">
-            <td class="col first url">
-              <FlatButton @title="admin.permalink.copy_to_clipboard" @icon="far-clipboard" @action={{action "copyUrl" pl}} />
-              <span id="admin-permalink-{{pl.id}}" title={{pl.url}}>{{pl.url}}</span>
-            </td>
-            <td class="col destination">
-              {{#if pl.topic_id}}
-                <a href={{pl.topic_url}}>{{pl.topic_title}}</a>
-              {{/if}}
-              {{#if pl.post_id}}
-                <a href={{pl.post_url}}>{{pl.post_topic_title}} #{{pl.post_number}}</a>
-              {{/if}}
-              {{#if pl.category_id}}
-                {{category-link pl.category}}
-              {{/if}}
-              {{#if pl.tag_id}}
-                <a href={{pl.tag_url}}>{{pl.tag_name}}</a>
-              {{/if}}
-              {{#if pl.external_url}}
-                {{#if pl.linkIsExternal}}
-                  {{d-icon "external-link-alt"}}
+  <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>
+          <th class="col heading destination">{{i18n "admin.permalink.destination"}}</th>
+          <th class="col heading actions"></th>
+        </thead>
+        <tbody>
+          {{#each this.model as |pl|}}
+            <tr class="admin-list-item">
+              <td class="col first url">
+                <FlatButton @title="admin.permalink.copy_to_clipboard" @icon="far-clipboard" @action={{action "copyUrl" pl}} />
+                <span id="admin-permalink-{{pl.id}}" title={{pl.url}}>{{pl.url}}</span>
+              </td>
+              <td class="col destination">
+                {{#if pl.topic_id}}
+                  <a href={{pl.topic_url}}>{{pl.topic_title}}</a>
                 {{/if}}
-                <a href={{pl.external_url}}>{{pl.external_url}}</a>
-              {{/if}}
-            </td>
-            <td class="col action" style="text-align: right;">
-              <DButton @action={{action "destroy"}} @actionParam={{pl}} @icon="far-trash-alt" @class="btn-danger" />
-            </td>
-          </tr>
-        {{/each}}
-      </tbody>
-    </table>
-  {{else}}
-    {{i18n "search.no_results"}}
-  {{/if}}
+                {{#if pl.post_id}}
+                  <a href={{pl.post_url}}>{{pl.post_topic_title}} #{{pl.post_number}}</a>
+                {{/if}}
+                {{#if pl.category_id}}
+                  {{category-link pl.category}}
+                {{/if}}
+                {{#if pl.tag_id}}
+                  <a href={{pl.tag_url}}>{{pl.tag_name}}</a>
+                {{/if}}
+                {{#if pl.external_url}}
+                  {{#if pl.linkIsExternal}}
+                    {{d-icon "external-link-alt"}}
+                  {{/if}}
+                  <a href={{pl.external_url}}>{{pl.external_url}}</a>
+                {{/if}}
+              </td>
+              <td class="col action" style="text-align: right;">
+                <DButton @action={{action "destroy"}} @actionParam={{pl}} @icon="far-trash-alt" @class="btn-danger" />
+              </td>
+            </tr>
+          {{/each}}
+        </tbody>
+      </table>
+    {{else}}
+      {{#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>
diff --git a/app/assets/javascripts/discourse/tests/acceptance/admin-permalink-test.js b/app/assets/javascripts/discourse/tests/acceptance/admin-permalink-test.js
new file mode 100644
index 00000000000..bf9fb447fd2
--- /dev/null
+++ b/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");
+  });
+});
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index ef115fc0005..8ca1aa4365d 100644
--- a/config/locales/client.en.yml
+++ b/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"