FUI - React runtime files, Search field and Profile page adjustments

src/apim.design.module.ts

@@ -10,7 +10,7 @@ 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 { ListOfApisDesignModule } from "./components/apis/list-of-apis/listOfApis.design.module";
 import { DetailsOfApiDesignModule } from "./components/apis/details-of-api/detailsOfApi.design.module";
 import { HistoryOfApiEditorModule as HistoryOfApiDesignModule } from "./components/apis/history-of-api/historyOfApi.design.module";
 import { SigninDesignModule } from "./components/users/signin/signin.design.module";
@@ -45,7 +45,7 @@ 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";

src/apim.publish.module.ts

@@ -5,7 +5,7 @@ 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 { 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";
@@ -35,7 +35,7 @@ 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";

src/components/apis/api-products/ko/apiProductsEditor.module.ts → src/components/apis/api-products/apiProducts.design.module.ts

@@ -1,12 +1,14 @@
 import { IInjector, IInjectorModule } from "@paperbits/common/injection";
 import { IWidgetService } from "@paperbits/common/widgets";
 import { KnockoutComponentBinder } from "@paperbits/core/ko";
-import { ApiProductsDropdownHandlers, ApiProductsHandlers, ApiProductsTilesHandlers } from "../apiProductsHandlers";
-import { ApiProductsModel } from "../apiProductsModel";
-import { ApiProductsModelBinder } from "../apiProductsModelBinder";
-import { ApiProductsEditor } from "./apiProductsEditor";
-import { ApiProductsViewModel } from "./apiProductsViewModel";
+import { ReactComponentBinder } from "@paperbits/react/bindings";
+import { ComponentFlow } from "@paperbits/common/components";
+import { ApiProductsEditor } from "./ko/apiProductsEditor";
+import { ApiProductsModel } from "./apiProductsModel";
+import { ApiProductsModelBinder } from "./apiProductsModelBinder";
+import { ApiProductsViewModel } from "./react/ApiProductsViewModel";
 import { ApiProductsViewModelBinder } from "./apiProductsViewModelBinder";
+import { ApiProductsDropdownHandlers, ApiProductsHandlers, ApiProductsTilesHandlers } from "./apiProductsHandlers";
 
 export class ApiProductsDesignModule implements IInjectorModule {
     public register(injector: IInjector): void {
@@ -21,10 +23,11 @@ export class ApiProductsDesignModule implements IInjectorModule {
 
         const apiProductsWidget = {
             modelDefinition: ApiProductsModel,
-            componentBinder: KnockoutComponentBinder,
+            componentBinder: ReactComponentBinder,
             componentDefinition: ApiProductsViewModel,
             modelBinder: ApiProductsModelBinder,
-            viewModelBinder: ApiProductsViewModelBinder
+            viewModelBinder: ApiProductsViewModelBinder,
+            componentFlow: ComponentFlow.Block
         };
 
         widgetService.registerWidget("api-products", apiProductsWidget);

src/components/apis/api-products/ko/apiProducts.module.ts → src/components/apis/api-products/apiProducts.publish.module.ts

@@ -1,12 +1,12 @@
 import { IInjector, IInjectorModule } from "@paperbits/common/injection";
 import { IWidgetService } from "@paperbits/common/widgets";
-import { KnockoutComponentBinder } from "@paperbits/core/ko";
-import { ApiProductsModel } from "../apiProductsModel";
-import { ApiProductsModelBinder } from "../apiProductsModelBinder";
-import { ApiProductsViewModel } from "./apiProductsViewModel";
+import { ReactComponentBinder } from "@paperbits/react/bindings";
+import { ComponentFlow } from "@paperbits/common/components";
+import { ApiProductsModel } from "./apiProductsModel";
+import { ApiProductsModelBinder } from "./apiProductsModelBinder";
+import { ApiProductsViewModel } from "./react/ApiProductsViewModel";
 import { ApiProductsViewModelBinder } from "./apiProductsViewModelBinder";
 
-
 export class ApiProductsPublishModule implements IInjectorModule {
     public register(injector: IInjector): void {
         injector.bindSingleton("apiProductsModelBinder", ApiProductsModelBinder);
@@ -16,10 +16,11 @@ export class ApiProductsPublishModule implements IInjectorModule {
 
         const apiProductsWidget = {
             modelDefinition: ApiProductsModel,
-            componentBinder: KnockoutComponentBinder,
+            componentBinder: ReactComponentBinder,
             componentDefinition: ApiProductsViewModel,
             modelBinder: ApiProductsModelBinder,
-            viewModelBinder: ApiProductsViewModelBinder
+            viewModelBinder: ApiProductsViewModelBinder,
+            componentFlow: ComponentFlow.Block
         };
 
         widgetService.registerWidget("api-products", apiProductsWidget);

src/components/apis/api-products/ko/apiProductsViewModelBinder.ts → src/components/apis/api-products/apiProductsViewModelBinder.ts

@@ -1,23 +1,22 @@
 import { ViewModelBinder, WidgetState } from "@paperbits/common/widgets";
 import { ISiteService } from "@paperbits/common/sites/ISiteService";
-import { ApiProductsModel } from "../apiProductsModel";
-import { ApiProductsViewModel } from "./apiProductsViewModel";
-import { isRedesignEnabledSetting } from "../../../../constants";
-import { layoutsMap } from "../../../utils/react/TableListInfo";
+import { isRedesignEnabledSetting } from "../../../constants";
+import { layoutsMap } from "../../utils/react/TableListInfo";
+import { ApiProductsModel } from "./apiProductsModel";
+import { ApiProductsViewModel } from "./react/ApiProductsViewModel";
 
 export class ApiProductsViewModelBinder implements ViewModelBinder<ApiProductsModel, ApiProductsViewModel> {
     constructor(
         private readonly siteService: ISiteService,
     ) {}
 
     public stateToInstance(state: WidgetState, componentInstance: ApiProductsViewModel): void {
-        componentInstance.layout(state.layout);
-        componentInstance.runtimeConfig(JSON.stringify({
+        componentInstance.setState(prevState => ({
+            isRedesignEnabled: state.isRedesignEnabled,
             detailsPageUrl: state.detailsPageUrl,
+            layout: state.layout,
             layoutDefault: layoutsMap[state.layout]
         }));
-
-        componentInstance.isRedesignEnabled(state.isRedesignEnabled);
     }
 
     public async modelToState(model: ApiProductsModel, state: WidgetState): Promise<void> {

src/components/apis/api-products/react/ApiProductsViewModel.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+
+export class ApiProductsViewModel extends React.Component {
+    public state: {
+        isRedesignEnabled: boolean;
+        layout: string,
+        layoutDefault: string,
+        detailsPageUrl: string,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.state = {...props};
+    }
+
+    public render(): JSX.Element {
+        const data = JSON.stringify(this.state);
+
+        return this.state.isRedesignEnabled
+            ? <fui-api-products-runtime props={data} ></fui-api-products-runtime>
+            : this.state.layout === 'tiles'
+                ? <api-products-tiles-runtime params={data}></api-products-tiles-runtime>
+                    : this.state.layout === 'dropdown'
+                        ? <api-products-dropdown-runtime params={data}></api-products-dropdown-runtime>
+                        : <api-products-runtime params={data}></api-products-runtime>;
+        }
+}

src/components/apis/details-of-api/detailsOfApi.design.module.ts

@@ -1,14 +1,14 @@
 import { IInjector, IInjectorModule } from "@paperbits/common/injection";
 import { IWidgetService } from "@paperbits/common/widgets";
 import { KnockoutComponentBinder } from "@paperbits/core/ko";
-import { DetailsOfApiHandlers } from "./detailsOfApiHandlers";
+import { ReactComponentBinder } from "@paperbits/react/bindings";
+import { ComponentFlow } from "@paperbits/common/components";
+import { DetailsOfApiEditor } from "./ko/detailsOfApiEditor";
 import { DetailsOfApiModel } from "./detailsOfApiModel";
 import { DetailsOfApiModelBinder } from "./detailsOfApiModelBinder";
-import { DetailsOfApiEditor } from "./ko/detailsOfApiEditor";
+import { DetailsOfApiViewModel } from "./react/DetailsOfApiViewModel";
 import { DetailsOfApiViewModelBinder } from "./detailsOfApiViewModelBinder";
-import { ReactComponentBinder } from "@paperbits/react/bindings";
-import { ApiDetailsViewModel } from "./react/ApiDetailsViewModel";
-import { ComponentFlow } from "@paperbits/common/components";
+import { DetailsOfApiHandlers } from "./detailsOfApiHandlers";
 
 export class DetailsOfApiDesignModule implements IInjectorModule {
     public register(injector: IInjector): void {
@@ -22,7 +22,7 @@ export class DetailsOfApiDesignModule implements IInjectorModule {
         widgetService.registerWidget("detailsOfApi", {
             modelDefinition: DetailsOfApiModel,
             componentBinder: ReactComponentBinder,
-            componentDefinition: ApiDetailsViewModel,
+            componentDefinition: DetailsOfApiViewModel,
             modelBinder: DetailsOfApiModelBinder,
             viewModelBinder: DetailsOfApiViewModelBinder,
             componentFlow: ComponentFlow.Block

src/components/apis/details-of-api/detailsOfApi.publish.module.ts

@@ -1,12 +1,11 @@
 import { IInjectorModule, IInjector } from "@paperbits/common/injection";
-import { DetailsOfApiModelBinder } from "./detailsOfApiModelBinder";
-import { DetailsOfApiViewModelBinder } from "./detailsOfApiViewModelBinder";
-import { ApiDetailsViewModel } from "./react/ApiDetailsViewModel";
-import { DetailsOfApiModel } from "./detailsOfApiModel";
-import { ReactComponentBinder } from "@paperbits/react/bindings";
 import { IWidgetService } from "@paperbits/common/widgets";
+import { ReactComponentBinder } from "@paperbits/react/bindings";
 import { ComponentFlow } from "@paperbits/common/components";
-
+import { DetailsOfApiModel } from "./detailsOfApiModel";
+import { DetailsOfApiModelBinder } from "./detailsOfApiModelBinder";
+import { DetailsOfApiViewModel } from "./react/DetailsOfApiViewModel";
+import { DetailsOfApiViewModelBinder } from "./detailsOfApiViewModelBinder";
 
 export class DetailsOfApiPublishModule implements IInjectorModule {
     public register(injector: IInjector): void {
@@ -18,7 +17,7 @@ export class DetailsOfApiPublishModule implements IInjectorModule {
         widgetService.registerWidget("detailsOfApi", {
             modelDefinition: DetailsOfApiModel,
             componentBinder: ReactComponentBinder,
-            componentDefinition: ApiDetailsViewModel,
+            componentDefinition: DetailsOfApiViewModel,
             modelBinder: DetailsOfApiModelBinder,
             viewModelBinder: DetailsOfApiViewModelBinder,
             componentFlow: ComponentFlow.Block

src/components/apis/details-of-api/detailsOfApi.runtime.module.ts

@@ -1,6 +1,6 @@
 import { IInjector, IInjectorModule } from "@paperbits/common/injection";
 import { registerCustomElement } from "@paperbits/react/customElements";
-import { ApiDetails } from "./react/ApiDetails";
+import { ApiDetails } from "./react/runtime/ApiDetails";
 
 export class DetailsOfApiRuntimeModule implements IInjectorModule {
     public register(injector: IInjector): void {

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

@@ -2,17 +2,16 @@ 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 "./react/DetailsOfApiViewModel";
 import { isRedesignEnabledSetting } from "../../../constants";
-import { ApiDetailsViewModel } from "./react/ApiDetailsViewModel";
 
-
-export class DetailsOfApiViewModelBinder implements ViewModelBinder<DetailsOfApiModel, ApiDetailsViewModel> {
+export class DetailsOfApiViewModelBinder implements ViewModelBinder<DetailsOfApiModel, DetailsOfApiViewModel> {
     constructor(
         private readonly styleCompiler: StyleCompiler,
         private readonly siteService: ISiteService,
     ) { }
 
-    public stateToInstance(state: WidgetState, componentInstance: ApiDetailsViewModel): void {
+    public stateToInstance(state: WidgetState, componentInstance: DetailsOfApiViewModel): void {
         componentInstance.setState(prevState => ({
             styles: state.styles,
             isRedesignEnabled: state.isRedesignEnabled,

src/components/apis/details-of-api/react/ApiDetailsViewModel.tsx → src/components/apis/details-of-api/react/DetailsOfApiViewModel.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { StyleModel } from "@paperbits/common/styles";
 
-export class ApiDetailsViewModel extends React.Component {
+export class DetailsOfApiViewModel extends React.Component {
     public state: {
         isRedesignEnabled: boolean;
         styles: StyleModel;

src/components/apis/details-of-api/react/ApiDetails.tsx → src/components/apis/details-of-api/react/runtime/ApiDetails.tsx

@@ -3,13 +3,13 @@ import { useEffect, useState } from "react";
 import { Resolve } from "@paperbits/react/decorators";
 import { Router } from "@paperbits/common/routing";
 import { Stack } from "@fluentui/react";
-import { Badge, Body1, Body1Strong, Dropdown, FluentProvider, Link, Option, Spinner, Title1 } from "@fluentui/react-components";
-import { Api } from "../../../../models/api";
-import { KnownMimeTypes } from "../../../../models/knownMimeTypes"
-import { ApiService } from "../../../../services/apiService";
-import { RouteHelper } from "../../../../routing/routeHelper";
-import { TypeOfApi, fuiTheme } from "../../../../constants";
-import { MarkdownProcessor } from "../../../utils/react/MarkdownProcessor";
+import { Badge, Dropdown, FluentProvider, Option, Spinner } from "@fluentui/react-components";
+import { Api } from "../../../../../models/api";
+import { KnownMimeTypes } from "../../../../../models/knownMimeTypes"
+import { ApiService } from "../../../../../services/apiService";
+import { RouteHelper } from "../../../../../routing/routeHelper";
+import { TypeOfApi, fuiTheme } from "../../../../../constants";
+import { MarkdownProcessor } from "../../../../utils/react/MarkdownProcessor";
 
 interface ApiDetailsProps {
     changeLogPageUrl?: string

src/components/apis/history-of-api/historyOfApi.design.module.ts

@@ -1,14 +1,14 @@
 import { IInjectorModule, IInjector } from "@paperbits/common/injection";
-import { HistoryOfApiHandlers } from "./historyOfApiHandlers";
-import { HistoryOfApiEditor } from "./ko/historyOfApiEditor";
 import { IWidgetService } from "@paperbits/common/widgets";
-import { HistoryOfApiModelBinder } from "./historyOfApiModelBinder";
-import { HistoryOfApiViewModelBinder } from "./historyOfApiViewModelBinder";
-import { HistoryOfApiModel } from "./historyOfApiModel";
 import { KnockoutComponentBinder } from "@paperbits/core/ko";
 import { ReactComponentBinder } from "@paperbits/react/bindings";
-import { ApiHistoryViewModel } from "./react/ApiHistoryViewModel";
 import { ComponentFlow } from "@paperbits/common/components";
+import { HistoryOfApiEditor } from "./ko/historyOfApiEditor";
+import { HistoryOfApiModel } from "./historyOfApiModel";
+import { HistoryOfApiModelBinder } from "./historyOfApiModelBinder";
+import { HistoryOfApiViewModel } from "./react/HistoryOfApiViewModel";
+import { HistoryOfApiViewModelBinder } from "./historyOfApiViewModelBinder";
+import { HistoryOfApiHandlers } from "./historyOfApiHandlers";
 
 export class HistoryOfApiEditorModule implements IInjectorModule {
     public register(injector: IInjector): void {
@@ -22,7 +22,7 @@ export class HistoryOfApiEditorModule implements IInjectorModule {
         widgetService.registerWidget("historyOfApi", {
             modelDefinition: HistoryOfApiModel,
             componentBinder: ReactComponentBinder,
-            componentDefinition: ApiHistoryViewModel,
+            componentDefinition: HistoryOfApiViewModel,
             modelBinder: HistoryOfApiModelBinder,
             viewModelBinder: HistoryOfApiViewModelBinder,
             componentFlow: ComponentFlow.Block