Runtime UI redesign using Fluent UI

package.json

@@ -76,15 +76,19 @@
         "@azure/msal-browser": "^2.37.1",
         "@braintree/sanitize-url": "6.0.4",
         "@fluentui/font-icons-mdl2": "^8.5.9",
-        "@fluentui/react": "^8.105.11",
+        "@fluentui/react": "^8.117.7",
+        "@fluentui/react-charting": "^5.22.5",
+        "@fluentui/react-components": "^9.49.0",
+        "@fluentui/react-icons": "^2.0.237",
         "@microsoft/applicationinsights-web": "^3.0.2",
         "@monaco-editor/loader": "^1.3.3",
-        "@paperbits/azure": "^0.1.634",
-        "@paperbits/common": "^0.1.634",
-        "@paperbits/core": "^0.1.634",
-        "@paperbits/forms": "^0.1.634",
+        "@monaco-editor/react": "^4.6.0",
+        "@paperbits/azure": "^0.1.643",
+        "@paperbits/common": "^0.1.643",
+        "@paperbits/core": "^0.1.643",
+        "@paperbits/forms": "^0.1.643",
         "@paperbits/react": "1.0.8",
-        "@paperbits/styles": "^0.1.634",
+        "@paperbits/styles": "^0.1.643",
         "@webcomponents/custom-elements": "1.6.0",
         "@webcomponents/shadydom": "^1.11.0",
         "client-oauth2": "4.3.3",
@@ -114,10 +118,13 @@
         "react": "^18.2.0",
         "react-cropper": "^2.3.2",
         "react-dom": "^18.2.0",
+        "react-markdown": "^8.0.7",
+        "react-syntax-highlighter": "^15.5.0",
         "react-toastify": "^9.1.3",
         "rehype-raw": "^6.1.1",
         "rehype-sanitize": "^5.0.1",
         "rehype-stringify": "^9.0.3",
+        "rehype-truncate": "^1.2.2",
         "remark": "^14.0.3",
         "remark-gfm": "^3.0.1",
         "remark-parse": "^10.0.2",

src/admin/leftPanel.tsx

@@ -1,9 +1,12 @@
 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 { Logger } from '@paperbits/common/logging';
 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 +17,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 +38,8 @@ const enum NavItem {
 interface LeftPanelState {
     selectedNavItem: NavItem,
     isMobile: boolean,
-    showOnboardingModal: boolean
+    showOnboardingModal: boolean,
+    isRedesignEnabled: boolean
 }
 
 const pageIcon: IIconProps = { iconName: 'Page' };
@@ -53,24 +57,35 @@ 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;
 
     @Resolve('router')
     public router: Router;
 
+    @Resolve('logger')
+    public logger: Logger;
+
     constructor(props: any) {
         super(props);
 
         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 +94,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 });
@@ -213,10 +233,25 @@ export class LeftPanel extends React.Component<{}, LeftPanelState> {
                             }}
                         />
                     </Stack>
-                    { this.renderNavItemsSwitch(this.state.selectedNavItem) }
+                    <div className="side-panel-content">
+                        { this.renderNavItemsSwitch(this.state.selectedNavItem) }
+                    </div>
                     { 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 (_, 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
+                        }} 
+                    />
                 </div>
             </>
         )

src/apim.design.module.ts

@@ -1,3 +1,4 @@
+import { ReactModule } from "@paperbits/react/react.module";
 import * as Constants from "./constants";
 import "./bindingHandlers/codeEditor";
 import "./bindingHandlers/copyToClipboard";
@@ -9,11 +10,11 @@ import { ConsoleLogger } from "@paperbits/common/logging";
 import { DefaultSessionManager } from "@paperbits/common/persistence/defaultSessionManager";
 import { HistoryRouteHandler } from "@paperbits/common/routing";
 import { RoleBasedSecurityDesignModule } from "@paperbits/core/security/roleBasedSecurity.design.module";
-import { ListOfApisDesignModule } from "./components/apis/list-of-apis/ko/listOfApisEditor.module";
-import { DetailsOfApiDesignModule } from "./components/apis/details-of-api/ko/detailsOfApiEditor.module";
-import { HistoryOfApiEditorModule as HistoryOfApiDesignModule } from "./components/apis/history-of-api/ko/historyOfApiEditor.module";
+import { ListOfApisDesignModule } from "./components/apis/list-of-apis/listOfApis.design.module";
+import { DetailsOfApiDesignModule } from "./components/apis/details-of-api/detailsOfApi.design.module";
+import { HistoryOfApiDesignModule } from "./components/apis/history-of-api/historyOfApi.design.module";
 import { SigninDesignModule } from "./components/users/signin/signin.design.module";
-import { SigninSocialEditorModule as SigninSocialDesignModule } from "./components/users/signin-social/signinSocial.design.module";
+import { SigninSocialDesignModule } from "./components/users/signin-social/signinSocial.design.module";
 import { SignupSocialDesignModule } from "./components/users/signup-social/signupSocial.design.module";
 import { SignupDesignModule } from "./components/users/signup/signup.design.module";
 import { ProfileDesignModule } from "./components/users/profile/profile.design.module";
@@ -23,18 +24,18 @@ import { MapiClient, IdentityService } from "./services";
 import { SetupModule } from "./components/setup/setup.module";
 import { ContentModule } from "./components/content";
 import { CustomWidgetListModule } from "./components/custom-widget-list";
-import { OperationListEditorModule as OperationListDesignModule } from "./components/operations/operation-list/ko/operationListEditor.module";
+import { OperationListDesignModule } from "./components/operations/operation-list/operationList.design.module";
 import { OperationDetailsDesignModule } from "./components/operations/operation-details/operationDetails.design.module";
-import { ProductListEditorModule as ProductListDesignModule } from "./components/products/product-list/ko/productListEditor.module";
-import { ProductSubscribeEditorModule as ProductSubscribeDesignModule } from "./components/products/product-subscribe/ko/productSubscribeEditor.module";
-import { ProductApisEditorModule as ProductApisDesignModule } from "./components/products/product-apis/ko/productApisEditor.module";
-import { ProductSubscriptionsEditorModule as ProductSubscriptionsDesignModule } from "./components/products/product-subscriptions/ko/productSubscriptionsEditor.module";
+import { ProductListDesignModule } from "./components/products/product-list/productList.design.module";
+import { ProductSubscribeDesignModule } from "./components/products/product-subscribe/productSubscribe.design.module";
+import { ProductApisDesignModule } from "./components/products/product-apis/productApis.design.module";
+import { ProductSubscriptionsDesignModule } from "./components/products/product-subscriptions/productSubscriptions.design.module";
 import { App } from "./components/app/app";
-import { ReportsEditorModule as ReportsDesignModule } from "./components/reports/ko/reportsEditor.module";
+import { ReportsDesignModule } from "./components/reports/reports.design.module";
 import { ResetPasswordDesignModule } from "./components/users/reset-password/resetPassword.design.module";
-import { ConfirmPasswordEditorModule as ConfirmPasswordDesignModule } from "./components/users/confirm-password/ko/confirmPasswordEditor.module";
+import { ConfirmPasswordDesignModule } from "./components/users/confirm-password/confirmPassword.design.module";
 import { HelpModule } from "./components/help";
-import { ChangePasswordEditorModule as ChangePasswordDesignModule } from "./components/users/change-password/ko/changePasswordEditor.module";
+import { ChangePasswordDesignModule } from "./components/users/change-password/changePassword.design.module";
 import { TenantService } from "./services/tenantService";
 import { ValidationSummaryDesignModule } from "./components/users/validation-summary/validationSummary.design.module";
 import { BackendService } from "./services/backendService";
@@ -44,16 +45,16 @@ import { PolicyService } from "./services/policyService";
 import { OAuthService } from "./services/oauthService";
 import { OldContentRouteGuard } from "./routing/oldContentRouteGuard";
 import { AccessTokenRefrsher } from "./authentication/accessTokenRefresher";
-import { ApiProductsDesignModule } from "./components/apis/api-products/ko/apiProductsEditor.module";
+import { ApiProductsDesignModule } from "./components/apis/api-products/apiProducts.design.module";
 import { RuntimeConfigurator } from "./services/runtimeConfigurator";
 import { CustomHtmlDesignModule } from "./components/custom-html/customHtml.design.module";
 import { CustomWidgetDesignModule } from "./components/custom-widget/customWidget.design.module";
 import { CodeEditor } from "./components/code-editor/code-editor";
 
-
 export class ApimDesignModule implements IInjectorModule {
     public register(injector: IInjector): void {
         injector.bindModule(new SetupModule());
+        injector.bindModule(new ReactModule());
         injector.bindModule(new ListOfApisDesignModule());
         injector.bindModule(new ApiProductsDesignModule());
         injector.bindModule(new DetailsOfApiDesignModule());

src/apim.publish.module.ts

@@ -1,50 +1,53 @@
+import { ReactModule } from "@paperbits/react/react.module";
 import { AadConfigPublisher } from "./publishing/aadConfigPublisher";
 import { IInjector, IInjectorModule } from "@paperbits/common/injection";
 import { ConsoleLogger } from "@paperbits/common/logging";
 import { RoleBasedSecurityPublishModule } from "@paperbits/core/security/roleBasedSecurity.publish.module";
 import { MapiClient } from "./services/mapiClient";
 import { MapiObjectStorage, MapiBlobStorage } from "./persistence";
-import { ListOfApisPublishModule } from "./components/apis/list-of-apis/ko/listOfApis.module";
-import { DetailsOfApiPublishModule } from "./components/apis/details-of-api/ko/detailsOfApi.module";
-import { HistoryOfApiPublishModule } from "./components/apis/history-of-api/ko/historyOfApi.module";
-import { SigninPublishModule } from "./components/users/signin/signin.module";
-import { SigninSocialPublishModule } from "./components/users/signin-social/signinSocial.module";
-import { SignupPublishModule } from "./components/users/signup/signup.module";
-import { SignupSocialPublishModule } from "./components/users/signup-social/signupSocial.module";
-import { ProfilePublishModule } from "./components/users/profile/profile.module";
-import { SubscriptionsPublishModule } from "./components/users/subscriptions/subscriptions.module";
-import { ProductDetailsPublishModule } from "./components/products/product-details/productDetails.module";
+import { ListOfApisPublishModule } from "./components/apis/list-of-apis/listOfApis.publish.module";
+import { DetailsOfApiPublishModule } from "./components/apis/details-of-api/detailsOfApi.publish.module";
+import { HistoryOfApiPublishModule } from "./components/apis/history-of-api/historyOfApi.publish.module";
+import { SigninPublishModule } from "./components/users/signin/signin.publish.module";
+import { SigninSocialPublishModule } from "./components/users/signin-social/signinSocial.publish.module";
+import { SignupPublishModule } from "./components/users/signup/signup.publish.module";
+import { SignupSocialPublishModule } from "./components/users/signup-social/signupSocial.publish.module";
+import { ProfilePublishModule } from "./components/users/profile/profile.publish.module";
+import { SubscriptionsPublishModule } from "./components/users/subscriptions/subscriptions.publish.module";
+import { ProductDetailsPublishModule } from "./components/products/product-details/productDetails.publish.module";
 import { StaticRouter } from "./components/staticRouter";
 import { StaticUserService } from "./services/userService";
 import { StaticAuthenticator } from "./components/staticAuthenticator";
-import { OperationListPublishModule } from "./components/operations/operation-list/ko/operationList.module";
+import { OperationListPublishModule } from "./components/operations/operation-list/operationList.publish.module";
 import { OperationDetailsPublishModule } from "./components/operations/operation-details/operationDetails.publish.module";
-import { ProductListPublishModule } from "./components/products/product-list/ko/productList.module";
-import { ProductSubscribePublishModule } from "./components/products/product-subscribe/ko/productSubscribe.module";
-import { ProductApisPublishModule } from "./components/products/product-apis/ko/productApis.module";
-import { ProductSubscriptionsPublishModule } from "./components/products/product-subscriptions/ko/productSubscriptions.module";
+import { ProductListPublishModule } from "./components/products/product-list/productList.publish.module";
+import { ProductApisPublishModule } from "./components/products/product-apis/productApis.publish.module";
+import { ProductSubscribePublishModule } from "./components/products/product-subscribe/productSubscribe.publish.module";
+import { ProductSubscriptionsPublishModule } from "./components/products/product-subscriptions/productSubscriptions.publish.module";
 import { IdentityService } from "./services/identityService";
-import { ResetPasswordPublishModule } from "./components/users/reset-password/resetPassword.module";
-import { ConfirmPasswordPublishModule } from "./components/users/confirm-password/ko/confirmPassword.module";
-import { ChangePasswordPublishModule } from "./components/users/change-password/ko/changePassword.module";
-import { ReportsPublishModule } from "./components/reports/ko/reports.module";
+import { ResetPasswordPublishModule } from "./components/users/reset-password/resetPassword.publish.module";
+import { ConfirmPasswordPublishModule } from "./components/users/confirm-password/confirmPassword.publish.module";
+import { ChangePasswordPublishModule } from "./components/users/change-password/changePassword.publish.module";
+import { ReportsPublishModule } from "./components/reports/reports.publish.module";
 import { TenantService } from "./services/tenantService";
-import { ValidationSummaryPublishModule } from "./components/users/validation-summary/validationSummary.module";
+import { ValidationSummaryPublishModule } from "./components/users/validation-summary/validationSummary.publish.module";
 import { BackendService } from "./services/backendService";
 import { StaticRoleService } from "./services/roleService";
 import { ProvisionService } from "./services/provisioningService";
 import { OAuthService } from "./services/oauthService";
-import { ApiProductsPublishModule } from "./components/apis/api-products/ko/apiProducts.module";
+import { ApiProductsPublishModule } from "./components/apis/api-products/apiProducts.publish.module";
 import { RuntimeConfigPublisher } from "./publishing/runtimeConfigPublisher";
 import { RuntimeConfigBuilder } from "./publishing/runtimeConfigBuilder";
 import { CustomHtmlPublishModule } from "./components/custom-html/customHtml.publish.module";
 import { CustomWidgetPublishModule } from "./components/custom-widget/customWidget.publish.module";
 import { StaticDataHttpClient } from "./services/staticDataHttpClient";
 import { PublisherStaticDataProvider } from "./services/publisherStaticDataProvider";
 import { staticDataEnvironment, mockStaticDataEnvironment } from "./../environmentConstants";
+import { RedesignConfigPublisher } from "./publishing/redesignConfigPublisher";
 
 export class ApimPublishModule implements IInjectorModule {
     public register(injector: IInjector): void {
+        injector.bindModule(new ReactModule());
         injector.bindModule(new ListOfApisPublishModule());
         injector.bindModule(new ApiProductsPublishModule());
         injector.bindModule(new DetailsOfApiPublishModule());
@@ -85,6 +88,7 @@ export class ApimPublishModule implements IInjectorModule {
         injector.bindSingleton("oauthService", OAuthService);
         injector.bindSingleton("runtimeConfigBuilder", RuntimeConfigBuilder);
         injector.bindToCollection("publishers", AadConfigPublisher);
+        injector.bindToCollection("publishers", RedesignConfigPublisher);
         injector.bindToCollection("publishers", RuntimeConfigPublisher);
 
         if (process.env.NODE_ENV === staticDataEnvironment || process.env.NODE_ENV === mockStaticDataEnvironment) {