FUI - Redesign toggle (#2500)

Author: jsorohova

src/admin/leftPanel.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { Resolve } from '@paperbits/react/decorators';
+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 { initializeIcons } from '@fluentui/font-icons-mdl2';
-import { CommandBarButton, Icon, IIconProps, Separator, Stack, Text } from '@fluentui/react';
+import { CommandBarButton, Icon, IIconProps, Separator, Stack, Text, Toggle } from '@fluentui/react';
 import { Pages } from './pages/pages';
 import { Navigation } from './navigation/navigation';
 import { Urls } from './urls/urls';
@@ -14,7 +16,7 @@ import { MediaModal } from './media/mediaModal';
 import { CustomWidgets } from './custom-widgets/customWidgets';
 import { OnboardingModal } from './onboardingModal';
 import { lightTheme } from './utils/themes';
-import { mobileBreakpoint } from '../constants';
+import { isRedesignEnabledSetting, mobileBreakpoint } from '../constants';
 initializeIcons();
 
 const enum NavItem {
@@ -35,7 +37,8 @@ const enum NavItem {
 interface LeftPanelState {
     selectedNavItem: NavItem,
     isMobile: boolean,
-    showOnboardingModal: boolean
+    showOnboardingModal: boolean,
+    isRedesignEnabled: boolean
 }
 
 const pageIcon: IIconProps = { iconName: 'Page' };
@@ -53,6 +56,12 @@ const helpIcon: IIconProps = { iconName: 'Help' };
 const iconStyles = { root: { color: lightTheme.palette.themePrimary, fontSize: 20 } };
 
 export class LeftPanel extends React.Component<{}, LeftPanelState> {
+    @Resolve('siteService')
+    public siteService: ISiteService;
+
+    @Resolve('eventManager')
+    public eventManager: EventManager;
+    
     @Resolve('viewManager')
     public viewManager: ViewManager;
 
@@ -65,12 +74,14 @@ export class LeftPanel extends React.Component<{}, LeftPanelState> {
         this.state = {
             selectedNavItem: NavItem.Main,
             isMobile: window.innerWidth < mobileBreakpoint,
-            showOnboardingModal: false
+            showOnboardingModal: false,
+            isRedesignEnabled: false
         };
     }
 
     componentDidMount(): void {
         if (!localStorage.getItem('isOnboardingSeen')) this.setState({ showOnboardingModal: true });
+        this.loadSettings();
 
         window.addEventListener('resize', this.checkScreenSize.bind(this));
     }
@@ -79,6 +90,11 @@ export class LeftPanel extends React.Component<{}, LeftPanelState> {
         window.removeEventListener('resize', this.checkScreenSize.bind(this));
     }
 
+    loadSettings = async (): Promise<void> => {
+        const redesignSetting = await this.siteService.getSetting(isRedesignEnabledSetting);
+        this.setState({ isRedesignEnabled: !!redesignSetting });
+    }
+
     checkScreenSize = (): void => {
         if (window.innerWidth < mobileBreakpoint) {
             this.setState({ isMobile: true });
@@ -217,6 +233,18 @@ export class LeftPanel extends React.Component<{}, LeftPanelState> {
                     { this.state.selectedNavItem === NavItem.Media && <MediaModal onDismiss={this.handleBackButtonClick.bind(this)} /> }
                     { this.state.selectedNavItem === NavItem.Settings && <SettingsModal onDismiss={this.handleBackButtonClick.bind(this)} /> }
                     { this.state.selectedNavItem === NavItem.Help && <HelpModal onDismiss={this.handleBackButtonClick.bind(this)} /> }
+                    <Toggle
+                        label={"Preview new UI design"}
+                        onText={"On"}
+                        offText={"Off"}
+                        checked={this.state.isRedesignEnabled}
+                        onChange={async (ev, checked) => {
+                            this.setState({ isRedesignEnabled: checked });
+                            await this.siteService.setSetting(isRedesignEnabledSetting, checked);
+                            this.eventManager.dispatchEvent('onSaveChanges');
+                            this.eventManager.dispatchEvent('onDataPush'); // Needed to reload the runtime part
+                        }} 
+                    />
                 </div>
             </>
         )

src/components/apis/details-of-api/ko/detailsOfApi.html

@@ -1 +1,6 @@
-<fui-api-details data-bind="attr: { props: runtimeConfig }"></fui-api-details>
+<!-- ko if: isRedesignEnabled -->
+    <fui-api-details data-bind="attr: { props: runtimeConfig }"></fui-api-details>
+<!-- /ko -->
+<!-- ko ifnot: isRedesignEnabled -->
+    <api-details data-bind="attr: { params: runtimeConfig }"></api-details>
+<!-- /ko -->

src/components/apis/details-of-api/ko/detailsOfApiViewModel.ts

@@ -10,9 +10,11 @@ import { StyleModel } from "@paperbits/common/styles";
 export class DetailsOfApiViewModel {
     public readonly runtimeConfig: ko.Observable<string>;
     public readonly styles: ko.Observable<StyleModel>;
+    public readonly isRedesignEnabled: ko.Observable<boolean>;
 
     constructor() {
         this.runtimeConfig = ko.observable();
         this.styles = ko.observable<StyleModel>();
+        this.isRedesignEnabled = ko.observable<boolean>();
     }
 }

src/components/apis/details-of-api/ko/detailsOfApiViewModelBinder.ts

@@ -1,14 +1,20 @@
 import { StyleCompiler } from "@paperbits/common/styles";
 import { ViewModelBinder, WidgetState } from "@paperbits/common/widgets";
+import { ISiteService } from "@paperbits/common/sites";
 import { DetailsOfApiModel } from "../detailsOfApiModel";
 import { DetailsOfApiViewModel } from "./detailsOfApiViewModel";
+import { isRedesignEnabledSetting } from "../../../../constants";
 
 
 export class DetailsOfApiViewModelBinder implements ViewModelBinder<DetailsOfApiModel, DetailsOfApiViewModel> {
-    constructor(private readonly styleCompiler: StyleCompiler) { }
+    constructor(
+        private readonly styleCompiler: StyleCompiler,
+        private readonly siteService: ISiteService
+    ) { }
 
     public stateToInstance(state: WidgetState, componentInstance: DetailsOfApiViewModel): void {
         componentInstance.styles(state.styles);
+        componentInstance.isRedesignEnabled(state.isRedesignEnabled);
 
         componentInstance.runtimeConfig(JSON.stringify({
             changeLogPageUrl: state.changeLogPageHyperlink
@@ -23,5 +29,7 @@ export class DetailsOfApiViewModelBinder implements ViewModelBinder<DetailsOfApi
         if (model.styles) {
             state.styles = await this.styleCompiler.getStyleModelAsync(model.styles);
         }
+
+        state.isRedesignEnabled = !!(await this.siteService.getSetting(isRedesignEnabledSetting));
     }
 }

src/components/operations/operation-list/ko/operationList.html

@@ -1 +1,6 @@
-<fui-operation-list class="d-block" data-bind="attr: { props: runtimeConfig }"></fui-operation-list>
+<!-- ko if: isRedesignEnabled -->
+    <fui-operation-list class="d-block" data-bind="attr: { props: runtimeConfig }"></fui-operation-list>
+<!-- /ko -->
+<!-- ko ifnot: isRedesignEnabled -->
+    <operation-list class="d-block" data-bind="attr: { params: runtimeConfig }"></operation-list>
+<!-- /ko -->

src/components/operations/operation-list/ko/operationListViewModel.ts

@@ -10,9 +10,11 @@ import { StyleModel } from "@paperbits/common/styles";
 export class OperationListViewModel {
     public readonly runtimeConfig: ko.Observable<string>;
     public readonly styles: ko.Observable<StyleModel>;
+    public readonly isRedesignEnabled: ko.Observable<boolean>;
 
     constructor() {
         this.runtimeConfig = ko.observable();
         this.styles = ko.observable<StyleModel>();
+        this.isRedesignEnabled = ko.observable<boolean>();
     }
 }

src/components/operations/operation-list/ko/operationListViewModelBinder.ts

@@ -2,13 +2,19 @@ import { ViewModelBinder, WidgetState } from "@paperbits/common/widgets";
 import { OperationListViewModel } from "./operationListViewModel";
 import { OperationListModel } from "../operationListModel";
 import { StyleCompiler } from "@paperbits/common/styles";
+import { ISiteService } from "@paperbits/common/sites";
+import { isRedesignEnabledSetting } from "../../../../constants";
 
 
 export class OperationListViewModelBinder implements ViewModelBinder<OperationListModel, OperationListViewModel> {
-    constructor(private readonly styleCompiler: StyleCompiler) { }
+    constructor(
+        private readonly styleCompiler: StyleCompiler,
+        private readonly siteService: ISiteService
+    ) { }
 
     public stateToInstance(state: WidgetState, componentInstance: OperationListViewModel): void {
         componentInstance.styles(state.styles);
+        componentInstance.isRedesignEnabled(state.isRedesignEnabled);
 
         componentInstance.runtimeConfig(JSON.stringify({
             allowSelection: state.allowSelection,
@@ -35,5 +41,7 @@ export class OperationListViewModelBinder implements ViewModelBinder<OperationLi
         if (model.styles) {
             state.styles = await this.styleCompiler.getStyleModelAsync(model.styles);
         }
+
+        state.isRedesignEnabled = !!(await this.siteService.getSetting(isRedesignEnabledSetting));
     }
 }

src/constants.ts

@@ -358,3 +358,8 @@ export const fuiTheme: Theme = {
     fontFamilyMonospace: "inherit",
     fontFamilyNumeric: "inherit",
 };
+
+/**
+ * Key for the setting that enables the runtime redesign of the portal
+ */
+export const isRedesignEnabledSetting = "isRedesignEnabled";

src/themes/designer/styles/admin.scss

@@ -39,6 +39,13 @@
 
 .side-panel {
     padding: 12px;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .navigation {
+        flex: 1;
+    }
 }
 
 .admin-side-panel-opener {