Migrated details of api widget

Azure · Nov 6, 2024 · fa94305 · fa94305
1 parent bd08ac3
commit fa94305
Show file tree

Hide file tree

Showing 13 changed files with 88 additions and 90 deletions.
diff --git a/src/apim.design.module.ts b/src/apim.design.module.ts
@@ -11,7 +11,7 @@ import { DefaultSessionManager } from "@paperbits/common/persistence/defaultSess
 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 { DetailsOfApiDesignModule } from "./components/apis/details-of-api/detailsOfApi.design.module";
 import { HistoryOfApiEditorModule as HistoryOfApiDesignModule } from "./components/apis/history-of-api/ko/historyOfApiEditor.module";
 import { SigninDesignModule } from "./components/users/signin/signin.design.module";
 import { SigninSocialEditorModule as SigninSocialDesignModule } from "./components/users/signin-social/signinSocial.design.module";

diff --git a/src/apim.publish.module.ts b/src/apim.publish.module.ts
@@ -6,7 +6,7 @@ import { RoleBasedSecurityPublishModule } from "@paperbits/core/security/roleBas
 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 { DetailsOfApiPublishModule } from "./components/apis/details-of-api/detailsOfApi.publish.module";
 import { HistoryOfApiPublishModule } from "./components/apis/history-of-api/ko/historyOfApi.module";
 import { SigninPublishModule } from "./components/users/signin/signin.publish.module";
 import { SigninSocialPublishModule } from "./components/users/signin-social/signinSocial.publish.module";

diff --git a/...ls-of-api/ko/detailsOfApiEditor.module.ts → ...ails-of-api/detailsOfApi.design.module.ts b/...ls-of-api/ko/detailsOfApiEditor.module.ts → ...ails-of-api/detailsOfApi.design.module.ts
@@ -1,16 +1,17 @@
 import { IInjector, IInjectorModule } from "@paperbits/common/injection";
 import { IWidgetService } from "@paperbits/common/widgets";
 import { KnockoutComponentBinder } from "@paperbits/core/ko";
-import { DetailsOfApiHandlers } from "../detailsOfApiHandlers";
-import { DetailsOfApiModel } from "../detailsOfApiModel";
-import { DetailsOfApiModelBinder } from "../detailsOfApiModelBinder";
-import { DetailsOfApiEditor } from "./detailsOfApiEditor";
-import { DetailsOfApiViewModel } from "./detailsOfApiViewModel";
+import { DetailsOfApiHandlers } from "./detailsOfApiHandlers";
+import { DetailsOfApiModel } from "./detailsOfApiModel";
+import { DetailsOfApiModelBinder } from "./detailsOfApiModelBinder";
+import { DetailsOfApiEditor } from "./ko/detailsOfApiEditor";
 import { DetailsOfApiViewModelBinder } from "./detailsOfApiViewModelBinder";
+import { ReactComponentBinder } from "@paperbits/react/bindings";
+import { ApiDetailsViewModel } from "./react/ApiDetailsViewModel";
 
 export class DetailsOfApiDesignModule implements IInjectorModule {
     public register(injector: IInjector): void {
-        injector.bind("detailsOfApiEditor", DetailsOfApiViewModel);
+        injector.bind("detailsOfApiEditor", DetailsOfApiEditor);
         injector.bindSingleton("detailsOfApiModelBinder", DetailsOfApiModelBinder);
         injector.bindSingleton("detailsOfApiViewModelBinder", DetailsOfApiViewModelBinder)
         injector.bindSingleton("detailsOfApiHandlers", DetailsOfApiHandlers);
@@ -19,8 +20,8 @@ export class DetailsOfApiDesignModule implements IInjectorModule {
 
         widgetService.registerWidget("detailsOfApi", {
             modelDefinition: DetailsOfApiModel,
-            componentBinder: KnockoutComponentBinder,
-            componentDefinition: DetailsOfApiViewModel,
+            componentBinder: ReactComponentBinder,
+            componentDefinition: ApiDetailsViewModel,
             modelBinder: DetailsOfApiModelBinder,
             viewModelBinder: DetailsOfApiViewModelBinder
         });

diff --git a/.../details-of-api/ko/detailsOfApi.module.ts → ...ils-of-api/detailsOfApi.publish.module.ts b/.../details-of-api/ko/detailsOfApi.module.ts → ...ils-of-api/detailsOfApi.publish.module.ts
@@ -1,9 +1,9 @@
 import { IInjectorModule, IInjector } from "@paperbits/common/injection";
-import { DetailsOfApiModelBinder } from "../detailsOfApiModelBinder";
+import { DetailsOfApiModelBinder } from "./detailsOfApiModelBinder";
 import { DetailsOfApiViewModelBinder } from "./detailsOfApiViewModelBinder";
-import { DetailsOfApiViewModel } from "./detailsOfApiViewModel";
-import { DetailsOfApiModel } from "../detailsOfApiModel";
-import { KnockoutComponentBinder } from "@paperbits/core/ko";
+import { ApiDetailsViewModel } from "./react/ApiDetailsViewModel";
+import { DetailsOfApiModel } from "./detailsOfApiModel";
+import { ReactComponentBinder } from "@paperbits/react/bindings";
 import { IWidgetService } from "@paperbits/common/widgets";
 
 
@@ -16,8 +16,8 @@ export class DetailsOfApiPublishModule implements IInjectorModule {
 
         widgetService.registerWidget("detailsOfApi", {
             modelDefinition: DetailsOfApiModel,
-            componentBinder: KnockoutComponentBinder,
-            componentDefinition: DetailsOfApiViewModel,
+            componentBinder: ReactComponentBinder,
+            componentDefinition: ApiDetailsViewModel,
             modelBinder: DetailsOfApiModelBinder,
             viewModelBinder: DetailsOfApiViewModelBinder
         });

diff --git a/src/components/apis/details-of-api/detailsOfApi.runtime.module.ts b/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/runtime/ApiDetails";
+import { ApiDetails } from "./react/ApiDetails";
 
 export class DetailsOfApiRuntimeModule implements IInjectorModule {
     public register(injector: IInjector): void {

diff --git a/...-of-api/ko/detailsOfApiViewModelBinder.ts → ...ils-of-api/detailsOfApiViewModelBinder.ts b/...-of-api/ko/detailsOfApiViewModelBinder.ts → ...ils-of-api/detailsOfApiViewModelBinder.ts
@@ -1,25 +1,22 @@
 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";
+import { DetailsOfApiModel } from "./detailsOfApiModel";
+import { isRedesignEnabledSetting } from "../../../constants";
+import { ApiDetailsViewModel } from "./react/ApiDetailsViewModel";
 
 
-export class DetailsOfApiViewModelBinder implements ViewModelBinder<DetailsOfApiModel, DetailsOfApiViewModel> {
+export class DetailsOfApiViewModelBinder implements ViewModelBinder<DetailsOfApiModel, ApiDetailsViewModel> {
     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
-                ? state.changeLogPageHyperlink.href
-                : undefined
+    public stateToInstance(state: WidgetState, componentInstance: ApiDetailsViewModel): void {
+        componentInstance.setState(prevState => ({
+            styles: state.styles,
+            isRedesignEnabled: state.isRedesignEnabled,
+            changeLogPageUrl: state.changeLogPageHyperlink?.href
         }));
     }
 

diff --git a/...tails-of-api/react/runtime/ApiDetails.tsx → .../apis/details-of-api/react/ApiDetails.tsx b/...tails-of-api/react/runtime/ApiDetails.tsx → .../apis/details-of-api/react/ApiDetails.tsx
@@ -4,12 +4,12 @@ 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 { 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
@@ -55,7 +55,7 @@ const ApiDetailsFC = ({
     const loadApis = async (): Promise<{api: Api, versionedApis: Api[]}> => {
         let api: Api;
         let versionedApis: Api[];
-    
+
         try {
             api = await apiService.getApi(`apis/${apiName}`);
 
@@ -66,7 +66,7 @@ const ApiDetailsFC = ({
         } catch (error) {
             throw new Error(`Unable to load the API. Error: ${error.message}`);
         }
-    
+
         return {api, versionedApis};
     }
 
@@ -111,6 +111,7 @@ const ApiDetailsFC = ({
         window.URL.revokeObjectURL(url);
     }
 
+    const isRestApi = api && (api.type !== TypeOfApi.graphQL && api.type !== TypeOfApi.webSocket);
     return (
         <div className={"api-details-container"}>
             {working
@@ -119,18 +120,18 @@ const ApiDetailsFC = ({
                     ? <>
                         <Stack horizontal horizontalAlign="space-between" verticalAlign="center">
                             <Stack horizontal verticalAlign="center">
-                                <Title1 className={"api-title"}>{api.displayName}</Title1>
+                                <h1 className={"api-title"}>{api.displayName}</h1>
                                 {api.typeName && api.typeName !== "REST" && <Badge appearance="outline">{api.typeName}</Badge>}
                             </Stack>
-                            {changeLogPageUrl && api.type !== TypeOfApi.graphQL && api.type !== TypeOfApi.webSocket && 
-                                <Link href={routeHelper.getApiReferenceUrl(apiName, changeLogPageUrl)}>View changelog</Link>
+                            {changeLogPageUrl && isRestApi &&
+                                <a href={routeHelper.getApiReferenceUrl(apiName, changeLogPageUrl)}>View changelog</a>
                             }
                         </Stack>
-                        {(versionedApis?.length > 0 || (api.type !== TypeOfApi.graphQL && api.type !== TypeOfApi.webSocket)) && 
+                        {(versionedApis?.length > 0 || isRestApi) &&
                             <Stack horizontal verticalAlign="center" className={"api-details-dropdowns"}>
-                                {versionedApis?.length > 0 && 
+                                {versionedApis?.length > 0 &&
                                     <Stack horizontal verticalAlign="center">
-                                        <Body1Strong>Version</Body1Strong>
+                                        <span>Version</span>
                                         <Dropdown
                                             defaultSelectedOptions={[api.name]}
                                             value={api.apiVersion ?? originalVersion}
@@ -145,9 +146,9 @@ const ApiDetailsFC = ({
                                         </Dropdown>
                                     </Stack>
                                 }
-                                {api.type !== TypeOfApi.graphQL && api.type !== TypeOfApi.webSocket &&
+                                {isRestApi &&
                                     <Stack horizontal verticalAlign="center">
-                                        <Body1Strong>Download definition</Body1Strong>
+                                        <span>Download definition</span>
                                         <Dropdown
                                             placeholder="Select definition type"
                                             className={"api-details-dropdown"}
@@ -164,34 +165,34 @@ const ApiDetailsFC = ({
                             </Stack>
                         }
                         {api.description &&
-                            <Body1 block><MarkdownProcessor markdownToDisplay={api.description} /></Body1>
+                            <span style={{display: "block"}}><MarkdownProcessor markdownToDisplay={api.description} /></span>
                         }
                         {(api.contact || api.license || api.termsOfServiceUrl) &&
                             <div className={"api-additional-info"}>
-                                {api.contact && 
+                                {api.contact &&
                                     <div className={"api-additional-info-block"}>
-                                        <Body1 block>Contact:</Body1>
-                                        {api.contact.name && <Body1 block>{api.contact.name}</Body1>}
-                                        {api.contact.email && <Body1 block><Link href={`mailto:${api.contact.email}`}>{api.contact.email}</Link></Body1>}
-                                        {api.contact.url && <Link href={api.contact.url}>{api.contact.url}</Link>}
+                                        <span style={{display: "block"}}>Contact:</span>
+                                        {api.contact.name && <span style={{display: "block"}}>{api.contact.name}</span>}
+                                        {api.contact.email && <span style={{display: "block"}}><a href={`mailto:${api.contact.email}`}>{api.contact.email}</a></span>}
+                                        {api.contact.url && <a href={api.contact.url}>{api.contact.url}</a>}
                                     </div>
                                 }
                                 {api.license &&
                                     <div className={"api-additional-info-block"}>
-                                        <Body1 block>License:</Body1>
-                                        {api.license.url ? <Link href={api.license.url}>{api.license.name}</Link> : <Body1>{api.license.name}</Body1>}
+                                        <span style={{display: "block"}}>License:</span>
+                                        {api.license.url ? <a href={api.license.url}>{api.license.name}</a> : <span>{api.license.name}</span>}
                                     </div>
                                 }
                                 {api.termsOfServiceUrl &&
                                     <div className={"api-additional-info-block"}>
-                                        <Body1 block>Additional resources:</Body1>
-                                        <Link href={api.termsOfServiceUrl}>Terms and conditions</Link>
+                                        <span style={{display: "block"}}>Additional resources:</span>
+                                        <a href={api.termsOfServiceUrl}>Terms and conditions</a>
                                     </div>
                                 }
                             </div>
                         }
                       </>
-                    : <Body1>No API found.</Body1>
+                    : <span>No API found.</span>
             }
 
         </div>
@@ -204,7 +205,7 @@ export class ApiDetails extends React.Component<ApiDetailsProps, ApiDetailsState
 
     @Resolve("routeHelper")
     public routeHelper: RouteHelper;
-    
+
     @Resolve("router")
     public router: Router;
 

diff --git a/src/components/apis/details-of-api/react/ApiDetailsViewModel.tsx b/src/components/apis/details-of-api/react/ApiDetailsViewModel.tsx
@@ -0,0 +1,27 @@
+import * as React from "react";
+import { StyleModel } from "@paperbits/common/styles";
+
+export class ApiDetailsViewModel extends React.Component {
+    public state: {
+        isRedesignEnabled: boolean;
+        styles: StyleModel;
+        changeLogPageUrl: string;
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            isRedesignEnabled: props.isRedesignEnabled,
+            styles: props.styles,
+            changeLogPageUrl: props.changeLogPageUrl
+        };
+    }
+
+    public render(): JSX.Element {
+        const data = JSON.stringify(this.state);
+        return this.state.isRedesignEnabled
+            ? <fui-api-details key={data} props={data}></fui-api-details>
+            : <api-details params={data}></api-details>;
+    }
+}
diff --git a/src/components/react.components.d.ts b/src/components/react.components.d.ts
@@ -1,5 +1,7 @@
 declare namespace JSX {
     interface IntrinsicElements {
+        "fui-api-details": any;
+        "api-details": any;
         "fui-signin-aad-runtime": any;
         "signin-aad": any;
         "fui-signin-aadb2c-runtime": any;

diff --git a/src/components/users/signin-social/ko/signinSocial.html b/src/components/users/signin-social/ko/signinSocial.html
diff --git a/src/components/users/signin-social/signinSocial.design.module.ts b/src/components/users/signin-social/signinSocial.design.module.ts
@@ -2,7 +2,7 @@ import { IInjector, IInjectorModule } from "@paperbits/common/injection";
 import { IWidgetService } from "@paperbits/common/widgets";
 import { KnockoutComponentBinder } from "@paperbits/core/ko";
 import { SignInSocialEditor } from "./ko/signinSocialEditor";
-import { SignInSocialViewModel } from "./react/SigninSocialViewModel";
+import { SignInSocialViewModel } from "./react/SignInSocialViewModel";
 import { SigninSocialViewModelBinder } from "./signinSocialViewModelBinder";
 import { SigninSocialHandlers } from "./signinSocialHandlers";
 import { SigninSocialModel } from "./signinSocialModel";

diff --git a/src/components/users/signin-social/signinSocial.publish.module.ts b/src/components/users/signin-social/signinSocial.publish.module.ts
@@ -1,7 +1,7 @@
 import { IInjector, IInjectorModule } from "@paperbits/common/injection";
 import { IWidgetService } from "@paperbits/common/widgets";
 import { ReactComponentBinder } from "@paperbits/react/bindings";
-import { SignInSocialViewModel } from "./react/SigninSocialViewModel";
+import { SignInSocialViewModel } from "./react/SignInSocialViewModel";
 import { SigninSocialViewModelBinder } from "./signinSocialViewModelBinder";
 import { SigninSocialModel } from "./signinSocialModel";
 import { SigninSocialModelBinder } from "./signinSocialModelBinder";

diff --git a/src/components/users/signin-social/signinSocialViewModelBinder.ts b/src/components/users/signin-social/signinSocialViewModelBinder.ts
@@ -6,7 +6,7 @@ import { TermsOfService } from "../../../contracts/identitySettings";
 import { IdentityService } from "../../../services/identityService";
 import { isRedesignEnabledSetting } from "../../../constants";
 import { SigninSocialModel } from "./signinSocialModel";
-import { SignInSocialViewModel } from "./react/SigninSocialViewModel";
+import { SignInSocialViewModel } from "./react/SignInSocialViewModel";
 
 
 export class SigninSocialViewModelBinder implements ViewModelBinder<SigninSocialModel, SignInSocialViewModel> {