DEV: Add a skeleton for section landing page & items (#28477)

We are going to start making section landing pages
for admin for each sidebar section. This lays the framework
with routes and simple components that can be further
refined by a designer, but I have taken the base CSS from
AI which Kris made.

The initial section landing items will be used in AI to replace
the placeholders added in this commit b8b3c61451

app/assets/javascripts/admin/addon/components/admin-section-landing-item.gjs

@@ -0,0 +1,77 @@
+import Component from "@glimmer/component";
+import { hash } from "@ember/helper";
+import { LinkTo } from "@ember/routing";
+import concatClass from "discourse/helpers/concat-class";
+import dIcon from "discourse-common/helpers/d-icon";
+import i18n from "discourse-common/helpers/i18n";
+import {
+  DangerButton,
+  DefaultButton,
+  PrimaryButton,
+} from "admin/components/admin-page-action-button";
+
+export default class AdminSectionLandingItem extends Component {
+  get title() {
+    if (this.args.titleLabelTranslated) {
+      return this.args.titleLabelTranslated;
+    } else if (this.args.titleLabel) {
+      return i18n(this.args.titleLabel);
+    }
+  }
+
+  get description() {
+    if (this.args.descriptionLabelTranslated) {
+      return this.args.descriptionLabelTranslated;
+    } else if (this.args.descriptionLabel) {
+      return i18n(this.args.descriptionLabel);
+    }
+  }
+
+  get tagline() {
+    if (this.args.taglineLabelTranslated) {
+      return this.args.taglineLabelTranslated;
+    } else if (this.args.taglineLabel) {
+      return i18n(this.args.taglineLabel);
+    }
+  }
+
+  <template>
+    <div
+      class={{concatClass "admin-section-landing-item" (if @icon "-has-icon")}}
+      ...attributes
+    >
+      {{#if @imageUrl}}
+        <img class="admin-section-landing-item__image" src={{@imageUrl}} />
+      {{/if}}
+      {{#if @icon}}
+        <div class="admin-section-landing-item__icon">
+          {{dIcon @icon}}
+        </div>
+      {{/if}}
+      <div class="admin-section-landing-item__content">
+        {{#if this.tagline}}
+          <h4 class="admin-section-landing-item__tagline">{{this.tagline}}</h4>
+        {{/if}}
+
+        {{#if @titleRoute}}
+          <LinkTo @route={{@titleRoute}}><h3
+              class="admin-section-landing-item__title"
+            >{{this.title}}</h3></LinkTo>
+        {{else}}
+          <h3 class="admin-section-landing-item__title">{{this.title}}</h3>
+        {{/if}}
+
+        <p
+          class="admin-section-landing-item__description"
+        >{{this.description}}</p>
+      </div>
+
+      <div class="admin-section-landing-item__buttons">
+        {{yield
+          (hash Primary=PrimaryButton Default=DefaultButton Danger=DangerButton)
+          to="buttons"
+        }}
+      </div>
+    </div>
+  </template>
+}

app/assets/javascripts/admin/addon/components/admin-section-landing-wrapper.gjs

@@ -0,0 +1,7 @@
+const AdminSectionLandingWrapper = <template>
+  <div class="admin-section-landing-wrapper" ...attributes>
+    {{yield}}
+  </div>
+</template>;
+
+export default AdminSectionLandingWrapper;

app/assets/javascripts/admin/addon/routes/admin-route-map.js

@@ -236,5 +236,13 @@ export default function () {
       path: "/whats-new",
       resetNamespace: true,
     });
+
+    this.route(
+      "adminSection",
+      { path: "/section", resetNamespace: true },
+      function () {
+        this.route("account");
+      }
+    );
   });
 }

app/assets/javascripts/admin/addon/templates/section-account.hbs

@@ -0,0 +1,26 @@
+<AdminPageHeader
+  @titleLabel="admin.section_landing_pages.account.title"
+  @hideTabs={{true}}
+>
+  <:breadcrumbs>
+    <DBreadcrumbsItem
+      @path="/admin/section/account"
+      @label={{i18n "admin.section_landing_pages.account.title"}}
+    />
+  </:breadcrumbs>
+</AdminPageHeader>
+
+<AdminSectionLandingWrapper>
+  <AdminSectionLandingItem
+    @icon="box-archive"
+    @titleLabel="admin.section_landing_pages.account.backups.title"
+    @descriptionLabel="admin.section_landing_pages.account.backups.description"
+    @titleRoute="admin.backups"
+  />
+  <AdminSectionLandingItem
+    @icon="gift"
+    @titleLabel="admin.section_landing_pages.account.whats_new.title"
+    @descriptionLabel="admin.section_landing_pages.account.whats_new.description"
+    @titleRoute="admin.whatsNew"
+  />
+</AdminSectionLandingWrapper>

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

@@ -1094,6 +1094,7 @@ a.inline-editable-field {
 @import "common/admin/admin_report_stacked_line_chart";
 @import "common/admin/admin_report_table";
 @import "common/admin/admin_report_inline_table";
+@import "common/admin/admin_section_landing_page";
 @import "common/admin/admin_page_header";
 @import "common/admin/admin_intro";
 @import "common/admin/admin_emojis";

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

@@ -0,0 +1,71 @@
+.admin-section-landing-wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
+  gap: 1em 2em;
+  margin-top: 1em;
+  padding-top: 1em;
+
+  .admin-section-landing-item {
+    display: grid;
+    grid-template-rows: subgrid;
+    grid-template-columns: 1fr;
+    grid-row: span 2;
+    gap: 0;
+    margin-bottom: 2em;
+
+    @include breakpoint("mobile-extra-large", min-width) {
+      margin-bottom: 2em;
+    }
+
+    &.-has-icon {
+      grid-template-columns: 1fr 8fr;
+
+      .admin-section-landing-item__buttons {
+        grid-column: 2;
+      }
+    }
+
+    &__content {
+      grid-row: 1;
+    }
+
+    &__tagline {
+      font-size: var(--font-down-1);
+      font-weight: normal;
+      color: var(--primary-high);
+      margin: 0;
+      letter-spacing: 0.1px;
+    }
+
+    &__title {
+      margin: 0;
+      line-height: var(--line-height-medium);
+    }
+
+    &__description {
+      color: var(--primary-high);
+      margin: 0.25em 0 0.5em;
+      line-height: var(--line-height-large);
+      align-self: start;
+
+      @include breakpoint("mobile-extra-large", min-width) {
+        max-width: 17em;
+      }
+    }
+
+    &__icon {
+      font-size: var(--font-up-3);
+      color: var(--primary-low-mid);
+      grid-row: 1;
+    }
+
+    &__buttons {
+      grid-row: 2;
+      grid-column: 1;
+    }
+
+    button {
+      justify-self: start;
+    }
+  }
+}

app/controllers/admin/section_controller.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+class Admin::SectionController < Admin::AdminController
+  def show
+  end
+end

config/locales/client.en.yml

@@ -5563,6 +5563,16 @@ en:
           spam: "Spam settings"
           staff_action_logs: "Staff Action Logs"
 
+      section_landing_pages:
+        account:
+          title: "Account"
+          backups:
+            title: "Backups"
+            description: "Take a backup of your site's data"
+          whats_new:
+            title: "What's New"
+            description: "Discover new releases and improvements to Discourse"
+
       config_areas:
         about:
           header: "About your site"

config/routes.rb

@@ -403,6 +403,7 @@ Discourse::Application.routes.draw do
         end
       end
 
+      get "section/:section_id" => "section#show", :constraints => AdminConstraint.new
       resources :admin_notices, only: %i[destroy], constraints: AdminConstraint.new
     end # admin namespace