DEV: Replace period mixin with a component (#25292)

app/assets/javascripts/admin/addon/components/dashboard-period-selector.gjs

@@ -0,0 +1,40 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import DButton from "discourse/components/d-button";
+import PeriodChooser from "select-kit/components/period-chooser";
+import CustomDateRangeModal from "../components/modal/custom-date-range";
+
+export default class DashboardPeriodSelector extends Component {
+  @service modal;
+
+  availablePeriods = ["yearly", "quarterly", "monthly", "weekly"];
+
+  @action
+  openCustomDateRangeModal() {
+    this.modal.show(CustomDateRangeModal, {
+      model: {
+        startDate: this.args.startDate,
+        endDate: this.args.endDate,
+        setCustomDateRange: this.args.setCustomDateRange,
+      },
+    });
+  }
+
+  <template>
+    <div>
+      <PeriodChooser
+        @period={{@period}}
+        @action={{@setPeriod}}
+        @content={{this.availablePeriods}}
+        @fullDay={{false}}
+      />
+      <DButton
+        @icon="cog"
+        @action={{this.openCustomDateRangeModal}}
+        @title="admin.dashboard.custom_date_range"
+        class="custom-date-range-button"
+      />
+    </div>
+  </template>
+}

app/assets/javascripts/admin/addon/controllers/admin-dashboard-general.js

@@ -1,15 +1,14 @@
-import Controller, { inject as controller } from "@ember/controller";
+import { inject as controller } from "@ember/controller";
-import { action, computed } from "@ember/object";
+import { computed } from "@ember/object";
 import { inject as service } from "@ember/service";
 import { setting } from "discourse/lib/computed";
 import getURL from "discourse-common/lib/get-url";
 import { makeArray } from "discourse-common/lib/helpers";
 import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
-import PeriodComputationMixin from "admin/mixins/period-computation";
 import AdminDashboard from "admin/models/admin-dashboard";
 import Report from "admin/models/report";
-import CustomDateRangeModal from "../components/modal/custom-date-range";
+import AdminDashboardTabController from "./admin-dashboard-tab";
 
 function staticReport(reportType) {
   return computed("reports.[]", function () {
@@ -17,10 +16,7 @@ function staticReport(reportType) {
   });
 }
 
-export default class AdminDashboardGeneralController extends Controller.extend(
+export default class AdminDashboardGeneralController extends AdminDashboardTabController {
-  PeriodComputationMixin
-) {
-  @service modal;
   @service router;
   @service siteSettings;
   @controller("exception") exceptionController;
@@ -74,10 +70,26 @@ export default class AdminDashboardGeneralController extends Controller.extend(
     ].some((x) => !this.hiddenReports.includes(x));
   }
 
+  @discourseComputed
+  today() {
+    return moment().locale("en").utc().endOf("day");
+  }
+
+  @computed("startDate", "endDate")
+  get filters() {
+    return { startDate: this.startDate, endDate: this.endDate };
+  }
+
   @discourseComputed
   activityMetricsFilters() {
+    const lastMonth = moment()
+      .locale("en")
+      .utc()
+      .startOf("day")
+      .subtract(1, "month");
+
     return {
-      startDate: this.lastMonth,
+      startDate: lastMonth,
       endDate: this.today,
     };
   }
@@ -147,29 +159,4 @@ export default class AdminDashboardGeneralController extends Controller.extend(
         .finally(() => this.set("isLoading", false));
     }
   }
-
-  @discourseComputed("startDate", "endDate")
-  filters(startDate, endDate) {
-    return { startDate, endDate };
-  }
-
-  _reportsForPeriodURL(period) {
-    return getURL(`/admin?period=${period}`);
-  }
-
-  @action
-  setCustomDateRange(startDate, endDate) {
-    this.setProperties({ startDate, endDate });
-  }
-
-  @action
-  openCustomDateRangeModal() {
-    this.modal.show(CustomDateRangeModal, {
-      model: {
-        startDate: this.startDate,
-        endDate: this.endDate,
-        setCustomDateRange: this.setCustomDateRange,
-      },
-    });
-  }
 }

app/assets/javascripts/admin/addon/controllers/admin-dashboard-moderation.js

@@ -1,16 +1,8 @@
-import Controller from "@ember/controller";
+import { computed } from "@ember/object";
-import { action, computed } from "@ember/object";
-import { inject as service } from "@ember/service";
-import getURL from "discourse-common/lib/get-url";
 import discourseComputed from "discourse-common/utils/decorators";
-import PeriodComputationMixin from "admin/mixins/period-computation";
+import AdminDashboardTabController from "./admin-dashboard-tab";
-import CustomDateRangeModal from "../components/modal/custom-date-range";
-
-export default class AdminDashboardModerationController extends Controller.extend(
-  PeriodComputationMixin
-) {
-  @service modal;
 
+export default class AdminDashboardModerationController extends AdminDashboardTabController {
   @discourseComputed
   flagsStatusOptions() {
     return {
@@ -39,33 +31,19 @@ export default class AdminDashboardModerationController extends Controller.exten
     };
   }
 
-  @discourseComputed("startDate", "endDate")
+  @computed("startDate", "endDate")
-  filters(startDate, endDate) {
+  get filters() {
-    return { startDate, endDate };
+    return { startDate: this.startDate, endDate: this.endDate };
   }
 
-  @discourseComputed("lastWeek", "endDate")
+  @discourseComputed("endDate")
-  lastWeekfilters(startDate, endDate) {
+  lastWeekFilters(endDate) {
-    return { startDate, endDate };
+    const lastWeek = moment()
-  }
+      .locale("en")
+      .utc()
+      .endOf("day")
+      .subtract(1, "week");
 
-  _reportsForPeriodURL(period) {
+    return { lastWeek, endDate };
-    return getURL(`/admin/dashboard/moderation?period=${period}`);
-  }
-
-  @action
-  setCustomDateRange(startDate, endDate) {
-    this.setProperties({ startDate, endDate });
-  }
-
-  @action
-  openCustomDateRangeModal() {
-    this.modal.show(CustomDateRangeModal, {
-      model: {
-        startDate: this.startDate,
-        endDate: this.endDate,
-        setCustomDateRange: this.setCustomDateRange,
-      },
-    });
   }
 }

app/assets/javascripts/admin/addon/controllers/admin-dashboard-tab.js

@@ -0,0 +1,57 @@
+import Controller from "@ember/controller";
+import { action, computed } from "@ember/object";
+import { inject as service } from "@ember/service";
+import CustomDateRangeModal from "../components/modal/custom-date-range";
+
+export default class AdminDashboardTabController extends Controller {
+  @service modal;
+
+  queryParams = ["period"];
+  period = "monthly";
+
+  endDate = moment().locale("en").utc().endOf("day");
+  _startDate;
+
+  @computed("_startDate", "period")
+  get startDate() {
+    if (this._startDate) {
+      return this._startDate;
+    }
+
+    const fullDay = moment().locale("en").utc().endOf("day");
+
+    switch (this.period) {
+      case "yearly":
+        return fullDay.subtract(1, "year").startOf("day");
+      case "quarterly":
+        return fullDay.subtract(3, "month").startOf("day");
+      case "weekly":
+        return fullDay.subtract(6, "days").startOf("day");
+      case "monthly":
+        return fullDay.subtract(1, "month").startOf("day");
+      default:
+        return fullDay.subtract(1, "month").startOf("day");
+    }
+  }
+
+  @action
+  setCustomDateRange(_startDate, endDate) {
+    this.setProperties({ _startDate, endDate });
+  }
+
+  @action
+  setPeriod(period) {
+    this.setProperties({ period, _startDate: null });
+  }
+
+  @action
+  openCustomDateRangeModal() {
+    this.modal.show(CustomDateRangeModal, {
+      model: {
+        startDate: this.startDate,
+        endDate: this.endDate,
+        setCustomDateRange: this.setCustomDateRange,
+      },
+    });
+  }
+}

app/assets/javascripts/admin/addon/mixins/period-computation.js

@@ -1,5 +1,6 @@
 import Mixin from "@ember/object/mixin";
 import DiscourseURL from "discourse/lib/url";
+import deprecated from "discourse-common/lib/deprecated";
 import discourseComputed from "discourse-common/utils/decorators";
 
 export default Mixin.create({
@@ -9,6 +10,13 @@ export default Mixin.create({
   init() {
     this._super(...arguments);
 
+    deprecated(
+      "PeriodComputation mixin is deprecated. Use AdminDashboardTabController instead.",
+      {
+        id: "discourse.period-mixin",
+        since: "3.2.0.beta5-dev",
+      }
+    );
     this.availablePeriods = ["yearly", "quarterly", "monthly", "weekly"];
   },
 

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

@@ -1,7 +1,5 @@
 <ConditionalLoadingSpinner @condition={{this.isLoading}}>
-  <span>
   <PluginOutlet @name="admin-dashboard-general-top" @connectorTagName="div" />
-  </span>
 
   {{#if this.isCommunityHealthVisible}}
     <div class="community-health section">
@@ -12,20 +10,14 @@
               {{i18n "admin.dashboard.community_health"}}
             </a>
           </h2>
-          <span>
+
-            <PeriodChooser
+          <DashboardPeriodSelector
             @period={{this.period}}
-              @action={{action "changePeriod"}}
+            @setPeriod={{this.setPeriod}}
-              @content={{this.availablePeriods}}
+            @startDate={{this.startDate}}
-              @fullDay={{false}}
+            @endDate={{this.endDate}}
+            @setCustomDateRange={{this.setCustomDateRange}}
           />
-            <DButton
-              @icon="cog"
-              class="custom-date-range-button"
-              @action={{this.openCustomDateRangeModal}}
-              @title="admin.dashboard.custom_date_range"
-            />
-          </span>
         </div>
 
         <div class="section-body">
@@ -203,11 +195,9 @@
     {{/if}}
   </div>
 
-  <span>
   <PluginOutlet
     @name="admin-dashboard-general-bottom"
     @connectorTagName="div"
     @outletArgs={{hash filters=this.filters}}
   />
-  </span>
 </ConditionalLoadingSpinner>

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

@@ -1,10 +1,8 @@
 <div class="sections">
-  <span>
   <PluginOutlet
     @name="admin-dashboard-moderation-top"
     @connectorTagName="div"
   />
-  </span>
 
   {{#if this.isModeratorsActivityVisible}}
     <div class="moderators-activity section">
@@ -14,20 +12,14 @@
             {{i18n "admin.dashboard.moderators_activity"}}
           </a>
         </h2>
-        <span>
+
-          <PeriodChooser
+        <DashboardPeriodSelector
           @period={{this.period}}
-            @action={{action "changePeriod"}}
+          @setPeriod={{this.setPeriod}}
-            @content={{this.availablePeriods}}
+          @startDate={{this.startDate}}
-            @fullDay={{false}}
+          @endDate={{this.endDate}}
+          @setCustomDateRange={{this.setCustomDateRange}}
         />
-          <DButton
-            @icon="cog"
-            class="custom-date-range-button"
-            @action={{this.openCustomDateRangeModal}}
-            @title="admin.dashboard.custom_date_range"
-          />
-        </span>
       </div>
 
       <div class="section-body">
@@ -44,26 +36,24 @@
     <AdminReport
       @dataSourceName="flags_status"
       @reportOptions={{this.flagsStatusOptions}}
-      @filters={{this.lastWeekfilters}}
+      @filters={{this.lastWeekFilters}}
     />
 
     <AdminReport
       @dataSourceName="post_edits"
-      @filters={{this.lastWeekfilters}}
+      @filters={{this.lastWeekFilters}}
     />
 
     <AdminReport
       @dataSourceName="user_flagging_ratio"
-      @filters={{this.lastWeekfilters}}
+      @filters={{this.lastWeekFilters}}
       @reportOptions={{this.userFlaggingRatioOptions}}
     />
 
-    <span>
     <PluginOutlet
       @name="admin-dashboard-moderation-bottom"
       @connectorTagName="div"
-        @outletArgs={{hash filters=this.lastWeekfilters}}
+      @outletArgs={{hash filters=this.lastWeekFilters}}
     />
-    </span>
   </div>
 </div>

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

@@ -1,27 +1,20 @@
 <div class="sections">
-  <span>
+  <PluginOutlet @name="admin-dashboard-security-top" @connectorTagName="div" />
-    <PluginOutlet
-      @name="admin-dashboard-security-top"
-      @connectorTagName="div"
-    />
-  </span>
 
   <div class="main-section">
     <AdminReport
       @dataSourceName="suspicious_logins"
-      @filters={{this.lastWeekfilters}}
+      @filters={{this.lastWeekFilters}}
     />
 
     <AdminReport
       @dataSourceName="staff_logins"
-      @filters={{this.lastWeekfilters}}
+      @filters={{this.lastWeekFilters}}
     />
 
-    <span>
     <PluginOutlet
       @name="admin-dashboard-security-bottom"
       @connectorTagName="div"
     />
-    </span>
   </div>
 </div>