Azure
diff --git a/‎package-lock.json
Lines changed: 12425 additions & 8704 deletions b/‎package-lock.json
Lines changed: 12425 additions & 8704 deletions
diff --git a/‎package.json
Lines changed: 15 additions & 8 deletions b/‎package.json
Lines changed: 15 additions & 8 deletions
diff --git a/‎playwright.config.ts
Lines changed: 9 additions & 4 deletions b/‎playwright.config.ts
Lines changed: 9 additions & 4 deletions
diff --git a/‎src/admin/leftPanel.tsx
Lines changed: 45 additions & 5 deletions b/‎src/admin/leftPanel.tsx
Lines changed: 45 additions & 5 deletions
diff --git a/‎src/admin/settings/settingsModal.tsx
Lines changed: 13 additions & 5 deletions b/‎src/admin/settings/settingsModal.tsx
Lines changed: 13 additions & 5 deletions
diff --git a/‎src/apim.design.module.ts
Lines changed: 15 additions & 14 deletions b/‎src/apim.design.module.ts
Lines changed: 15 additions & 14 deletions
@@ -57,8 +57,8 @@
         "postcss-loader": "^7.3.3",
         "querystring-es3": "^0.2.1",
         "raw-loader": "^4.0.2",
-        "sass": "^1.67.0",
-        "sass-loader": "^13.3.2",
+        "sass": "1.67.0",
+        "sass-loader": "13.3.2",
         "stream-browserify": "^3.0.0",
         "style-loader": "^3.3.3",
         "terser-webpack-plugin": "^5.3.9",
@@ -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",
 
@@ -1,8 +1,13 @@
 import { defineConfig } from '@playwright/test';
 
 export default defineConfig({
-  retries: 2,
-  use: {
-    video: 'retain-on-failure'
-  }
+    retries: 2,
+    use: {
+        video: 'retain-on-failure'
+    },
+    expect: {
+        toMatchSnapshot: {
+            maxDiffPixels: 20
+        },
+    },
 });
@@ -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,16 @@ export class LeftPanel extends React.Component<{}, LeftPanelState> {
         window.removeEventListener('resize', this.checkScreenSize.bind(this));
     }
 
+    loadSettings = async (): Promise<void> => {
+        let redesignSetting = false;
+        try {
+            redesignSetting = await this.siteService.getSetting(isRedesignEnabledSetting);
+        } catch (error) {
+            this.logger?.trackError(error, { message: `Failed to get setting: ${isRedesignEnabledSetting} - admin panel` });
+        }
+        this.setState({ isRedesignEnabled: !!redesignSetting });
+    }
+
     checkScreenSize = (): void => {
         if (window.innerWidth < mobileBreakpoint) {
             this.setState({ isMobile: true });
@@ -213,10 +238,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>
             </>
         )
 
@@ -5,7 +5,7 @@ import { ISiteService, SiteSettingsContract } from '@paperbits/common/sites';
 import { IMediaService, MediaContract } from '@paperbits/common/media';
 import { MetaDataSetter } from "@paperbits/common/meta/metaDataSetter";
 import { EventManager } from '@paperbits/common/events';
-import { Checkbox, CommandBarButton, DefaultButton, Icon, Image, ImageFit, Label, Link, Modal, Pivot, PivotItem, PrimaryButton, Stack, Text, TextField } from '@fluentui/react';
+import { Checkbox, CommandBarButton, DefaultButton, Image, ImageFit, Label, Modal, Pivot, PivotItem, PrimaryButton, Stack, Text, TextField } from '@fluentui/react';
 import { MediaSelectionItemModal } from '../media/mediaSelectionItemModal';
 import { getThumbnailUrl } from '../utils/helpers';
 import { ResetDetailsWorkshop } from '../../components/content';
@@ -23,7 +23,8 @@ interface SettingsModalState {
     selectedFavicon: MediaContract,
     showMediaSelectionModal: boolean,
     showResetConfirmation: boolean,
-    resetConfirmation: string
+    resetConfirmation: string,
+    applyNewTheme: boolean
 }
 
 interface SettingsModalProps {
@@ -56,7 +57,8 @@ export class SettingsModal extends React.Component<SettingsModalProps, SettingsM
             selectedFavicon: null,
             showMediaSelectionModal: false,
             showResetConfirmation: false,
-            resetConfirmation: ''
+            resetConfirmation: '',
+            applyNewTheme: true
         }
     }
 
@@ -106,9 +108,9 @@ export class SettingsModal extends React.Component<SettingsModalProps, SettingsM
 
     saveChanges = async (): Promise<void> => {
         if (this.state.selectedTab === Tab.Advanced) {
-            this.resetDetailsWorkshop.reset();
+            this.resetDetailsWorkshop.reset(this.state.applyNewTheme);
         } else {
-            await this.siteService.setSetting('site', this.state.settings);
+            await this.siteService.setSetting<SiteSettingsContract>('site', this.state.settings);
             this.eventManager.dispatchEvent('onSaveChanges');
         }
 
@@ -193,6 +195,12 @@ export class SettingsModal extends React.Component<SettingsModalProps, SettingsM
                             <Stack className="reset-content-wrapper">
                                 <Text block styles={{ root: { fontWeight: 600 } }}>Restore website to default state</Text>
                                 <Text block>By resetting the website, all the pages, layouts, customizations, and uploaded media, will be deleted. The published version of the developer portal will not be deleted.</Text>
+                                <Checkbox
+                                    label="Apply new starter theme"
+                                    checked={this.state.applyNewTheme}
+                                    onChange={() => this.setState({ applyNewTheme: !this.state.applyNewTheme })}
+                                    styles={{ root: { paddingTop: '10px' } }}
+                                />
                                 <Checkbox
                                     label="Yes, reset the website to default state"
                                     checked={this.state.showResetConfirmation}
 
@@ -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());