UX: Add AdminConfigAreaEmptyList component (#29816)

This component can be used as a placeholder on
admin pages where the table has no data as per
the admin UI guidelines.

app/assets/javascripts/admin/addon/components/admin-config-area-empty-list.gjs

@@ -0,0 +1,20 @@
+import DButton from "discourse/components/d-button";
+import concatClass from "discourse/helpers/concat-class";
+import i18n from "discourse-common/helpers/i18n";
+
+const AdminConfigAreaEmptyList = <template>
+  <div class="admin-config-area-empty-list">
+    {{i18n @emptyLabel}}
+    <DButton
+      @label={{@ctaLabel}}
+      class={{concatClass
+        "btn-default btn-small admin-config-area-empty-list__cta-button"
+        @ctaClass
+      }}
+      @action={{@ctaAction}}
+      @route={{@ctaRoute}}
+    />
+  </div>
+</template>;
+
+export default AdminConfigAreaEmptyList;

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

@@ -16,7 +16,6 @@
         @title="admin.permalink.add"
         @label="admin.permalink.add"
         @icon="plus"
-        @disabled={{this.addFlagButtonDisabled}}
         class="admin-permalinks__header-add-permalink"
       />
     </:actions>
@@ -124,9 +123,12 @@
                 "search.no_results"
               }}</p>
           {{else}}
-            <p class="permalink-results__no-permalinks">{{i18n
+            <AdminConfigAreaEmptyList
-                "admin.permalink.no_permalinks"
+              @ctaLabel="admin.permalink.add"
-              }}</p>
+              @ctaRoute="adminPermalinks.new"
+              @ctaClass="admin-permalinks__add-permalink"
+              @emptyLabel="admin.permalink.no_permalinks"
+            />
           {{/if}}
         {{/if}}
       </div>

app/assets/stylesheets/common/admin/admin_config_area.scss

@@ -97,9 +97,14 @@
       margin-left: 18px;
     }
   }
+}
 
-  &__empty-list {
+.admin-config-area-empty-list {
-    padding: 1em;
+  padding: 1em;
-    border: 1px solid var(--primary-low);
+  border: 1px solid var(--primary-low);
+
+  &__cta-button {
+    display: flex;
+    margin-top: 1em;
   }
 }

app/assets/stylesheets/common/admin/customize.scss

@@ -65,6 +65,12 @@
   }
 }
 
+.admin-customize.admin-permalinks {
+  .admin-container {
+    padding: 0;
+  }
+}
+
 .admin-customize {
   h1 {
     margin-bottom: 10px;

app/assets/stylesheets/common/admin/plugins.scss

@@ -123,10 +123,3 @@
     width: 100%;
   }
 }
-
-.admin-plugin-config-area {
-  &__empty-list {
-    padding: 1em;
-    border: 1px solid var(--primary-low);
-  }
-}

config/locales/client.en.yml

@@ -7281,7 +7281,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."
+        no_permalinks: "You don't have any permalinks yet."
         add: "Add permalink"
         back: "Back to Permalinks"
         more_options: "More options"