FUI - Operation details widget (#2517)

Author: jsorohova

package-lock.json

@@ -117,6 +117,7 @@
         "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",

package.json

@@ -92,9 +92,10 @@ import { TraceClick } from "./bindingHandlers/traceClick";
 import { GraphqlService } from "./services/graphqlService";
 import { ListOfApisRuntimeModule } from "./components/apis/list-of-apis/listOfApis.runtime.module";
 import { ProductListRuntimeModule } from "./components/products/product-list/productList.runtime.module";
-import { ProductApisRuntimeModule } from "./components/products/product-apis/productApis.runtime.module";
 import { OperationListRuntimeModule } from "./components/operations/operation-list/operationList.runtime.module";
 import { DetailsOfApiRuntimeModule } from "./components/apis/details-of-api/detailsOfApi.runtime.module";
+import { OperationDetailsRuntimeModule } from "./components/operations/operation-details/operationDetails.runtime.module";
+import { ProductApisRuntimeModule } from "./components/products/product-apis/productApis.runtime.module";
 import { ProductDetailsRuntimeModule } from "./components/products/product-details/productDetails.runtime.module";
 import { ProductSubscribeRuntimeModule } from "./components/products/product-subscribe/productSubscribe.runtime.module";
 import { ProductSubscriptionsRuntimeModule } from "./components/products/product-subscriptions/productSubscriptions.runtime.module";
@@ -181,6 +182,7 @@ export class ApimRuntimeModule implements IInjectorModule {
         injector.bindModule(new ProductApisRuntimeModule());
         injector.bindModule(new OperationListRuntimeModule());
         injector.bindModule(new DetailsOfApiRuntimeModule());
+        injector.bindModule(new OperationDetailsRuntimeModule());
         injector.bindModule(new ProductDetailsRuntimeModule());
         injector.bindModule(new ProductSubscribeRuntimeModule());
         injector.bindModule(new ProductSubscriptionsRuntimeModule());

src/apim.runtime.module.ts

@@ -9,7 +9,7 @@ import { KnownMimeTypes } from "../../../../../models/knownMimeTypes"
 import { ApiService } from "../../../../../services/apiService";
 import { RouteHelper } from "../../../../../routing/routeHelper";
 import { TypeOfApi, fuiTheme } from "../../../../../constants";
-import { MarkdownProcessor } from "../../../../react-markdown/MarkdownProcessor";
+import { MarkdownProcessor } from "../../../../utils/react/MarkdownProcessor";
 
 interface ApiDetailsProps {
     changeLogPageUrl?: string

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

@@ -53,7 +53,7 @@ const TagLabel = ({
 const ApiTypeBadge = ({ api }: { api: Api }) =>
     !!api.typeName &&
     api.typeName !== "REST" && (
-        <Badge appearance="outline">{api.typeName}</Badge>
+        <Badge appearance="outline" size="small">{api.typeName}</Badge>
     );
 
 const ApiVersionBadge = ({ api }: { api: Api }) =>

src/components/apis/list-of-apis/react/runtime/ApiListDropdown.tsx

@@ -3,7 +3,7 @@ import { Body1Strong, Button, Caption1Stronger, Link, Subtitle1 } from "@fluentu
 import { Api } from "../../../../../models/api";
 import { isApisGrouped, toggleValueInSet, TagGroupToggleBtn, TApisData } from "./utils";
 import { TagGroup } from "../../../../../models/tagGroup";
-import { MarkdownProcessor } from "../../../../react-markdown/MarkdownProcessor";
+import { MarkdownProcessor } from "../../../../utils/react/MarkdownProcessor";
 import { markdownMaxCharsMap } from "../../../../../constants";
 
 type Props = {

src/components/apis/list-of-apis/react/runtime/ApisCards.tsx

@@ -18,7 +18,7 @@ import {
     TApisData,
     toggleValueInSet,
 } from "./utils";
-import { MarkdownProcessor } from "../../../../react-markdown/MarkdownProcessor";
+import { MarkdownProcessor } from "../../../../utils/react/MarkdownProcessor";
 import { markdownMaxCharsMap } from "../../../../../constants";
 
 type Props = {

src/components/apis/list-of-apis/react/runtime/ApisTable.tsx

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

src/components/operations/operation-details/ko/operationDetails.html

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

src/components/operations/operation-details/ko/operationDetailsViewModel.ts

@@ -1,13 +1,19 @@
 import { ViewModelBinder, WidgetState } from "@paperbits/common/widgets";
+import { StyleCompiler } from "@paperbits/common/styles";
+import { ISiteService } from "@paperbits/common/sites";
 import { OperationDetailsViewModel } from "./operationDetailsViewModel";
 import { OperationDetailsModel } from "../operationDetailsModel";
-import { StyleCompiler } from "@paperbits/common/styles";
+import { isRedesignEnabledSetting } from "../../../../constants";
 
 export class OperationDetailsViewModelBinder implements ViewModelBinder<OperationDetailsModel, OperationDetailsViewModel> {
-    constructor(private readonly styleCompiler: StyleCompiler) { }
+    constructor(
+        private readonly styleCompiler: StyleCompiler,
+        private readonly siteService: ISiteService
+    ) { }
 
     public stateToInstance(state: WidgetState, componentInstance: OperationDetailsViewModel): void {
         componentInstance.styles(state.styles);
+        componentInstance.isRedesignEnabled(state.isRedesignEnabled);
 
         componentInstance.config(JSON.stringify({
             enableConsole: state.enableConsole,
@@ -30,5 +36,7 @@ export class OperationDetailsViewModelBinder implements ViewModelBinder<Operatio
         if (model.styles) {
             state.styles = await this.styleCompiler.getStyleModelAsync(model.styles);
         }
+
+        state.isRedesignEnabled = !!(await this.siteService.getSetting(isRedesignEnabledSetting));
     }
 }

src/components/operations/operation-details/ko/operationDetailsViewModelBinder.ts

@@ -66,9 +66,7 @@
 
                 <!-- /ko -->
             </div>
-            <!-- ko if: $component.examples -->
-            <div role="cell" class="text-truncate" data-bind="text: $component.examples[property.name], attr: {title: $component.examples[property.name]}"></div>
-            <!-- /ko -->
+            <div role="cell" class="text-truncate" data-bind="text: property.example, attr: {title: property.example}"></div>
             <div role="cell" data-bind="markdown: property.description"></div>
         </div>
         <!-- /ko -->

src/components/operations/operation-details/ko/runtime/type-definition-object.html

@@ -0,0 +1,10 @@
+import { IInjector, IInjectorModule } from "@paperbits/common/injection";
+import { registerCustomElement } from "@paperbits/react/customElements";
+import { OperationDetailsRuntime } from "./react/runtime/OperationDetailsRuntime";
+
+export class OperationDetailsRuntimeModule implements IInjectorModule {
+    public register(injector: IInjector): void {
+        injector.bind("operationDetailsRuntime", OperationDetailsRuntime);
+        registerCustomElement(OperationDetailsRuntime, "fui-operation-details", injector);
+    }
+}