FUI - Redesign enabling logging

src/admin/leftPanel.tsx

@@ -4,6 +4,7 @@ import { ISiteService } from '@paperbits/common/sites';
 import { EventManager } from '@paperbits/common/events';
 import { ViewManager } from '@paperbits/common/ui';
 import { Router } from '@paperbits/common/routing';
+import { Logger } from '@paperbits/common/logging';
 import { initializeIcons } from '@fluentui/font-icons-mdl2';
 import { CommandBarButton, Icon, IIconProps, Separator, Stack, Text, Toggle } from '@fluentui/react';
 import { Pages } from './pages/pages';
@@ -68,6 +69,9 @@ export class LeftPanel extends React.Component<{}, LeftPanelState> {
     @Resolve('router')
     public router: Router;
 
+    @Resolve('logger')
+    public logger: Logger;
+
     constructor(props: any) {
         super(props);
 
@@ -240,9 +244,10 @@ export class LeftPanel extends React.Component<{}, LeftPanelState> {
                         onText={"On"}
                         offText={"Off"}
                         checked={this.state.isRedesignEnabled}
-                        onChange={async (ev, checked) => {
+                        onChange={async (_, checked) => {
                             this.setState({ isRedesignEnabled: checked });
                             await this.siteService.setSetting(isRedesignEnabledSetting, checked);
+                            this.logger.trackEvent(`${checked ? 'Checked' : 'Unchecked'}: Preview new UI design`);
                             this.eventManager.dispatchEvent('onSaveChanges');
                             this.eventManager.dispatchEvent('onDataPush'); // Needed to reload the runtime part
                         }} 

src/components/reports/ko/runtime/reports.html

@@ -1,11 +1,11 @@
-<div class="btn-group" role="group" aria-label="Time range">
-    <button class="button button-default"
+<div class="btn-group flex flex-row" role="group" aria-label="Time range">
+    <button class="button button-default mr-20"
         data-bind="click: setTimeRange1Hour, disable: selectedPeriod() == '1hour'">Last hour</button>
-    <button class="button button-default"
+    <button class="button button-default mr-20"
         data-bind="click: setTimeRange1Day, disable: selectedPeriod() == '1day'">Today</button>
-    <button class="button button-default"
+    <button class="button button-default mr-20"
         data-bind="click: setTimeRange7Days, disable: selectedPeriod() == '7days'">Last 7 days</button>
-    <button class="button button-default"
+    <button class="button button-default mr-20"
         data-bind="click: setTimeRange30Days, disable: selectedPeriod() == '30days'">Last 30 days</button>
     <button class="button button-default"
         data-bind="click: setTimeRange90Days, disable: selectedPeriod() == '90days'">Last 90 days</button>

src/logging/wellKnownEventTypes.ts

@@ -0,0 +1,3 @@
+export enum WellKnownEventTypes {
+    Publishing = "Publishing"
+}

src/publishing/runtimeConfigPublisher.ts

@@ -1,6 +1,10 @@
 import * as Utils from "@paperbits/common/utils";
 import { IBlobStorage } from "@paperbits/common/persistence";
 import { IPublisher } from "@paperbits/common/publishing";
+import { ISiteService } from "@paperbits/common/sites";
+import { Logger } from "@paperbits/common/logging";
+import { WellKnownEventTypes } from "../logging/wellKnownEventTypes";
+import { isRedesignEnabledSetting } from "../constants";
 import { RuntimeConfigBuilder } from "./runtimeConfigBuilder";
 
 /**
@@ -9,10 +13,15 @@ import { RuntimeConfigBuilder } from "./runtimeConfigBuilder";
 export class RuntimeConfigPublisher implements IPublisher {
     constructor(
         private readonly runtimeConfigBuilder: RuntimeConfigBuilder,
-        private readonly outputBlobStorage: IBlobStorage
+        private readonly outputBlobStorage: IBlobStorage,
+        private readonly siteService: ISiteService,
+        private readonly logger: Logger,
     ) { }
 
     public async publish(): Promise<void> {
+        const isRedesignEnabled = await this.siteService.getSetting(isRedesignEnabledSetting);
+        this.logger.trackEvent(WellKnownEventTypes.Publishing, { message: `Preview components ${isRedesignEnabled ? 'enabled' : 'disabled'}.`});
+
         const configuration = this.runtimeConfigBuilder.build();
         const content = Utils.stringToUnit8Array(JSON.stringify(configuration));