UX: Use core description of popular components when there's no description (#32286)

When an installed component doesn't have a description in its locale
files, we should fallback to the description that core has for the
component if it's one of the popular components that core features.

app/assets/javascripts/admin/addon/components/admin-config-areas/components.gjs

@@ -18,6 +18,7 @@ import { extractErrorInfo } from "discourse/lib/ajax-error";
 import discourseDebounce from "discourse/lib/debounce";
 import { INPUT_DELAY } from "discourse/lib/environment";
 import getURL from "discourse/lib/get-url";
+import { descriptionForRemoteUrl } from "discourse/lib/popular-themes";
 import { i18n } from "discourse-i18n";
 import AdminConfigAreaEmptyList from "admin/components/admin-config-area-empty-list";
 import InstallComponentModal from "admin/components/modal/install-theme";
@@ -300,6 +301,14 @@ class ComponentRow extends Component {
     }
   }
 
+  get description() {
+    const remoteUrl = this.args.component.remote_theme?.remote_url;
+    return (
+      this.args.component.description ??
+      (remoteUrl && descriptionForRemoteUrl(remoteUrl))
+    );
+  }
+
   @action
   async toggleEnabled() {
     this.disableToggle = true;
@@ -437,11 +446,11 @@ class ComponentRow extends Component {
               (hash name=@component.remote_theme.authors)
             }}</div>
         {{/if}}
-        {{#if @component.description}}
+        {{#if this.description}}
           <div
             class="d-admin-row__overview-about admin-config-components__description"
           >
-            {{@component.description}}
+            {{this.description}}
             {{#if @component.remote_theme.about_url}}
               <a href={{@component.remote_theme.about_url}}>{{i18n
                   "admin.config_areas.themes_and_components.components.learn_more"

app/assets/javascripts/discourse/app/lib/popular-themes.js

@@ -128,3 +128,8 @@ export const POPULAR_THEMES = [
     component: true,
   },
 ];
+
+export function descriptionForRemoteUrl(url) {
+  url = url.replace(/\.git$/, "");
+  return POPULAR_THEMES.find((obj) => obj.value === url)?.description;
+}

spec/system/admin_customize_components_config_area_spec.rb

@@ -57,7 +57,10 @@ describe "Admin Customize Themes Config Area Page", type: :system do
         component: true,
         enabled: false,
         remote_theme:
-          RemoteTheme.create!(remote_url: "https://github.com/discourse/tc-2", commits_behind: 4),
+          RemoteTheme.create!(
+            remote_url: "https://github.com/discourse/discourse-kanban-theme.git",
+            commits_behind: 4,
+          ),
       )
     end
 
@@ -141,6 +144,9 @@ describe "Admin Customize Themes Config Area Page", type: :system do
       expect(config_area.component(remote_component.id)).to have_description(
         "Description of my remote component",
       )
+      expect(config_area.component(remote_component_with_update.id)).to have_description(
+        "Display and organize topics using a Kanban board interface.",
+      )
       expect(config_area.component(remote_component.id)).to be_not_pending_update
 
       expect(config_area.component(remote_component_with_update.id)).to be_pending_update