Applications

src/apim.design.module.ts

@@ -36,6 +36,8 @@ import { ResetPasswordDesignModule } from "./components/users/reset-password/res
 import { ConfirmPasswordDesignModule } from "./components/users/confirm-password/confirmPassword.design.module";
 import { HelpModule } from "./components/help";
 import { ChangePasswordDesignModule } from "./components/users/change-password/changePassword.design.module";
+import { ApplicationListDesignModule } from "./components/applications/application-list/applicationList.design.module";
+import { ApplicationDetailsDesignModule } from "./components/applications/application-details/applicationDetails.design.module";
 import { TenantService } from "./services/tenantService";
 import { ValidationSummaryDesignModule } from "./components/users/validation-summary/validationSummary.design.module";
 import { BackendService } from "./services/backendService";
@@ -79,6 +81,8 @@ export class ApimDesignModule implements IInjectorModule {
         injector.bindModule(new ResetPasswordDesignModule());
         injector.bindModule(new ConfirmPasswordDesignModule());
         injector.bindModule(new ChangePasswordDesignModule());
+        injector.bindModule(new ApplicationListDesignModule())
+        injector.bindModule(new ApplicationDetailsDesignModule());
         injector.bindModule(new ValidationSummaryDesignModule());
         injector.bindModule(new RoleBasedSecurityDesignModule());
         injector.bindSingleton("app", App);

src/apim.publish.module.ts

@@ -27,6 +27,8 @@ import { IdentityService } from "./services/identityService";
 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 { ApplicationListPublishModule } from "./components/applications/application-list/applicationList.publish.module";
+import { ApplicationDetailsPublishModule } from "./components/applications/application-details/applicationDetails.publish.module";
 import { ResetPasswordPublishModule } from "./components/users/reset-password/resetPassword.publish.module";
 import { ValidationSummaryPublishModule } from "./components/users/validation-summary/validationSummary.publish.module";
 import { BackendService } from "./services/backendService";
@@ -71,6 +73,8 @@ export class ApimPublishModule implements IInjectorModule {
         injector.bindModule(new ConfirmPasswordPublishModule());
         injector.bindModule(new ChangePasswordPublishModule());
         injector.bindModule(new ReportsPublishModule());
+        injector.bindModule(new ApplicationListPublishModule());
+        injector.bindModule(new ApplicationDetailsPublishModule());
         injector.bindModule(new ValidationSummaryPublishModule());
         injector.bindModule(new CustomHtmlPublishModule());
         injector.bindModule(new CustomWidgetPublishModule());

src/apim.runtime.module.ts

@@ -91,6 +91,7 @@ import { RuntimeStaticDataProvider } from "./services/runtimeStaticDataProvider"
 import { RequestRetryStrategy } from "./clients/retryStrategy/requestRetryStrategy";
 import { TraceClick } from "./bindingHandlers/traceClick";
 import { GraphqlService } from "./services/graphqlService";
+import { ApplicationService } from "./services/applicationService";
 import { ListOfApisRuntimeModule } from "./components/apis/list-of-apis/listOfApis.runtime.module";
 import { ApiProductsRuntimeModule } from "./components/apis/api-products/apiProducts.runtime.module";
 import { ProductListRuntimeModule } from "./components/products/product-list/productList.runtime.module";
@@ -112,6 +113,8 @@ import { ChangePasswordRuntimeModule } from "./components/users/change-password/
 import { ConfirmPasswordRuntimeModule } from "./components/users/confirm-password/confirmPassword.runtime.module";
 import { SubscriptionsRuntimeModule } from "./components/users/subscriptions/subscriptions.runtime.module";
 import { ReportsRuntimeModule } from "./components/reports/reports.runtime.module";
+import { ApplicationListRuntimeModule } from "./components/applications/application-list/applicationList.runtime.module";
+import { ApplicationDetailsRuntimeModule } from "./components/applications/application-details/applicationDetails.runtime.module";
 import { ValidationSummaryRuntimeModule } from "./components/users/validation-summary/validationSummary.runtime.module";
 import { ClientLogger } from "./logging/clientLogger";
 
@@ -145,6 +148,7 @@ export class ApimRuntimeModule implements IInjectorModule {
         injector.bind("fileInput", FileInput);
         injector.bind("apiService", ApiService);
         injector.bind("graphqlService", GraphqlService);
+        injector.bind("applicationService", ApplicationService);
         injector.bind("tagService", TagService);
         injector.bind("productService", ProductService);
         injector.bind("analyticsService", AnalyticsService);
@@ -214,6 +218,8 @@ export class ApimRuntimeModule implements IInjectorModule {
         injector.bindModule(new ConfirmPasswordRuntimeModule());
         injector.bindModule(new SubscriptionsRuntimeModule());
         injector.bindModule(new ReportsRuntimeModule());
+        injector.bindModule(new ApplicationListRuntimeModule());
+        injector.bindModule(new ApplicationDetailsRuntimeModule());
         injector.bindModule(new ValidationSummaryRuntimeModule());
 
         if (process.env.NODE_ENV === staticDataEnvironment) {

src/components/applications/application-details/applicationDetails.design.module.ts

@@ -0,0 +1,55 @@
+import { IInjectorModule, IInjector } from "@paperbits/common/injection";
+import { IWidgetService } from "@paperbits/common/widgets";
+import { KnockoutComponentBinder } from "@paperbits/core/ko";
+import { ReactComponentBinder } from "@paperbits/react/bindings";
+import { ComponentFlow } from "@paperbits/common/components";
+import { Logger } from "@paperbits/common/logging";
+import { ISettingsProvider } from "@paperbits/common/configuration";
+import { ApplicationDetailsHandlers } from "./applicationDetailsHandlers";
+import { ApplicationDetailsModel } from "./applicationDetailsModel";
+import { ApplicationDetailsModelBinder } from "./applicationDetailsModelBinder";
+import { ApplicationDetailsViewModel } from "./react/ApplicationDetailsViewModel";
+import { ApplicationDetailsViewModelBinder } from "./applicationDetailsViewModelBinder";
+import { ApplicationDetailsEditor } from "./ko/applicationDetailsEditor";
+import { Utils } from "../../../utils";
+import { FEATURE_CLIENT_APPLICATIONS } from "../../../constants";
+
+export class ApplicationDetailsDesignModule implements IInjectorModule {
+    public register(injector: IInjector): void {
+        injector.bind("applicationDetailsEditor", ApplicationDetailsEditor);
+        injector.bindSingleton("applicationDetailsModelBinder", ApplicationDetailsModelBinder);
+        injector.bindSingleton("applicationDetailsViewModelBinder", ApplicationDetailsViewModelBinder)
+        injector.bindSingleton("applicationDetailsHandlers", ApplicationDetailsHandlers);
+
+        const widgetService = injector.resolve<IWidgetService>("widgetService");
+        const logger = injector.resolve<Logger>("logger");
+        const settingsProvider = injector.resolve<ISettingsProvider>("settingsProvider");
+
+        Utils.getFeatureValueOrNull(FEATURE_CLIENT_APPLICATIONS, settingsProvider, logger)
+            .then((isEnabled) => {
+                if (isEnabled) {
+                    widgetService.registerWidget("application-details", {
+                        modelDefinition: ApplicationDetailsModel,
+                        componentBinder: ReactComponentBinder,
+                        componentDefinition: ApplicationDetailsViewModel,
+                        modelBinder: ApplicationDetailsModelBinder,
+                        viewModelBinder: ApplicationDetailsViewModelBinder,
+                        componentFlow: ComponentFlow.Block
+                    });
+
+                    widgetService.registerWidgetEditor("application-details", {
+                        displayName: "Application: Details",
+                        category: "Applications",
+                        iconClass: "widget-icon widget-icon-api-management",
+                        componentBinder: KnockoutComponentBinder,
+                        componentDefinition: ApplicationDetailsEditor,
+                        handlerComponent: ApplicationDetailsHandlers
+                    });
+                }
+            })
+            .catch((error) => {
+                logger.trackError(error, { message: "Failed to get feature value for client applications in ApplicationDetailsDesignModule." });
+            }
+        );
+    }
+}

src/components/applications/application-details/applicationDetails.publish.module.ts

@@ -0,0 +1,42 @@
+import { IInjectorModule, IInjector } from "@paperbits/common/injection";
+import { IWidgetService } from "@paperbits/common/widgets";
+import { ReactComponentBinder } from "@paperbits/react/bindings";
+import { ComponentFlow } from "@paperbits/common/components";
+import { Logger } from "@paperbits/common/logging";
+import { ISettingsProvider } from "@paperbits/common/configuration";
+import { ApplicationDetailsModelBinder } from "./applicationDetailsModelBinder";
+import { ApplicationDetailsViewModelBinder } from "./applicationDetailsViewModelBinder";
+import { ApplicationDetailsModel } from "./applicationDetailsModel";
+import { ApplicationDetailsViewModel } from "./react/ApplicationDetailsViewModel";
+import { Utils } from "../../../utils";
+import { FEATURE_CLIENT_APPLICATIONS } from "../../../constants";
+
+
+export class ApplicationDetailsPublishModule implements IInjectorModule {
+    public register(injector: IInjector): void {
+        injector.bindToCollection("modelBinders", ApplicationDetailsModelBinder);
+        injector.bindToCollection("viewModelBinders", ApplicationDetailsViewModelBinder);
+
+        const widgetService = injector.resolve<IWidgetService>("widgetService");
+        const logger = injector.resolve<Logger>("logger");
+        const settingsProvider = injector.resolve<ISettingsProvider>("settingsProvider");
+
+        Utils.getFeatureValueOrNull(FEATURE_CLIENT_APPLICATIONS, settingsProvider, logger)
+            .then((isEnabled) => {
+                if (isEnabled) {
+                    widgetService.registerWidget("application-details", {
+                        modelDefinition: ApplicationDetailsModel,
+                        componentBinder: ReactComponentBinder,
+                        componentDefinition: ApplicationDetailsViewModel,
+                        modelBinder: ApplicationDetailsModelBinder,
+                        viewModelBinder: ApplicationDetailsViewModelBinder,
+                        componentFlow: ComponentFlow.Block
+                    });
+                }
+            })
+            .catch((error) => {
+                logger.trackError(error, { message: "Failed to get feature value for client applications in ApplicationDetailsPublishModule." });
+            }
+        );
+    }
+}

src/components/applications/application-details/applicationDetails.runtime.module.ts

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

src/components/applications/application-details/applicationDetailsContract.ts

@@ -0,0 +1,18 @@
+import { Contract } from "@paperbits/common";
+import { HyperlinkContract } from "@paperbits/common/editing";
+import { LocalStyles } from "@paperbits/common/styles";
+
+/**
+ * Application details widget configuration.
+ */
+export interface ApplicationDetailsContract extends Contract {
+    /**
+     * Link to a page that contains product details.
+     */
+    detailsPageHyperlink?: HyperlinkContract;
+
+    /**
+     * Widget local styles.
+     */
+    styles?: LocalStyles;
+}

src/components/applications/application-details/applicationDetailsHandlers.ts

@@ -0,0 +1,8 @@
+import { IWidgetHandler } from "@paperbits/common/editing";
+import { ApplicationDetailsModel } from "./applicationDetailsModel";
+
+export class ApplicationDetailsHandlers implements IWidgetHandler<ApplicationDetailsModel> {
+    public async getWidgetModel(): Promise<ApplicationDetailsModel> {
+        return new ApplicationDetailsModel();
+    }
+}

src/components/applications/application-details/applicationDetailsModel.ts

@@ -0,0 +1,14 @@
+import { HyperlinkModel } from "@paperbits/common/permalinks";
+import { LocalStyles } from "@paperbits/common/styles";
+
+export class ApplicationDetailsModel {
+    /**
+     * Link to a page that contains product details.
+     */
+    public detailsPageHyperlink: HyperlinkModel;
+
+    /**
+     * Widget local styles.
+     */
+    public styles: LocalStyles = {};
+}

src/components/applications/application-details/applicationDetailsModelBinder.ts

@@ -0,0 +1,35 @@
+import { Contract } from "@paperbits/common";
+import { IModelBinder } from "@paperbits/common/editing";
+import { IPermalinkResolver } from "@paperbits/common/permalinks";
+import { ApplicationDetailsModel } from "./applicationDetailsModel";
+import { ApplicationDetailsContract } from "./applicationDetailsContract";
+
+export class ApplicationDetailsModelBinder implements IModelBinder<ApplicationDetailsModel> {
+    constructor(private readonly permalinkResolver: IPermalinkResolver) { }
+
+    public async contractToModel(contract: ApplicationDetailsContract): Promise<ApplicationDetailsModel> {
+        const model = new ApplicationDetailsModel();
+        model.styles = contract.styles ?? {};
+
+        if (contract.detailsPageHyperlink) {
+            model.detailsPageHyperlink = await this.permalinkResolver.getHyperlinkFromContract(contract.detailsPageHyperlink);
+        }
+
+        return model;
+    }
+
+    public modelToContract(model: ApplicationDetailsModel): Contract {
+        const contract: ApplicationDetailsContract = {
+            type: "application-details",
+            detailsPageHyperlink: model.detailsPageHyperlink
+                ? {
+                    target: model.detailsPageHyperlink.target,
+                    targetKey: model.detailsPageHyperlink.targetKey
+                }
+                : null,
+            styles: model.styles
+        };
+
+        return contract;
+    }
+}

src/components/applications/application-details/applicationDetailsViewModelBinder.ts

@@ -0,0 +1,43 @@
+import { ViewModelBinder, WidgetState } from "@paperbits/common/widgets";
+import { StyleCompiler } from "@paperbits/common/styles";
+import { ISiteService } from "@paperbits/common/sites";
+import { Logger } from "@paperbits/common/logging";
+import { ApplicationDetailsModel } from "./applicationDetailsModel";
+import { ApplicationDetailsViewModel } from "./react/ApplicationDetailsViewModel";
+import { isRedesignEnabledSetting } from "../../../constants";
+
+export class ApplicationDetailsViewModelBinder implements ViewModelBinder<ApplicationDetailsModel, ApplicationDetailsViewModel> {
+    constructor(
+        private readonly styleCompiler: StyleCompiler,
+        private readonly siteService: ISiteService,
+        private readonly logger: Logger
+    ) { }
+
+    public stateToInstance(state: WidgetState, componentInstance: ApplicationDetailsViewModel): void {
+        componentInstance.setState(prevState => ({
+            isRedesignEnabled: state.isRedesignEnabled,
+            styles: state.styles,
+            detailsPageUrl: state.detailsPageHyperlink
+                ? state.detailsPageHyperlink.href
+                : undefined
+        }));
+    }
+
+    public async modelToState(model: ApplicationDetailsModel, state: WidgetState): Promise<void> {
+        state.detailsPageHyperlink = model.detailsPageHyperlink;
+
+        if (model.styles) {
+            state.styles = await this.styleCompiler.getStyleModelAsync(model.styles);
+        }
+
+        let isRedesignEnabled = false;
+
+        try {
+            isRedesignEnabled = !!(await this.siteService.getSetting(isRedesignEnabledSetting));
+        } catch (error) {
+            this.logger?.trackError(error, { message: `Failed to get setting: ${isRedesignEnabledSetting} - ApplicationDetailsViewModelBinder` });
+        } finally {
+            state.isRedesignEnabled = isRedesignEnabled;
+        }
+    }
+}

src/components/applications/application-details/ko/applicationDetailsEditor.html

@@ -0,0 +1,16 @@
+<fieldset class="form flex-item flex-item-grow" data-bind="scrollable: {}">
+    <div class="form-group">
+        <label for="hyperlink" class="form-label">
+            Link to product details page
+            <button class="btn btn-info" type="button" title="Help"
+                data-bind="tooltip: 'A link to be navigated on click.'"></button>
+        </label>
+        <div class="input-group">
+            <input id="hyperlink" type="text" class="form-control" disabled data-bind="value: hyperlinkTitle" />
+            <button class="btn input-group-addon" title="Select hyperlink" aria-label="Select hyperlink"
+                data-bind="balloon: { position: 'right', component: { name: 'hyperlink-selector', params: { hyperlink: $component.hyperlink, onChange: $component.onHyperlinkChange } } }">
+                <i class="paperbits-icon paperbits-link-69-2"></i>
+            </button>
+        </div>
+    </div>
+</fieldset>

src/components/applications/application-details/ko/applicationDetailsEditor.ts

@@ -0,0 +1,40 @@
+import * as ko from "knockout";
+import { Component, OnMounted, Param, Event } from "@paperbits/common/ko/decorators";
+import { HyperlinkModel } from "@paperbits/common/permalinks";
+import { ApplicationDetailsModel } from "../applicationDetailsModel";
+import template from "./applicationDetailsEditor.html";
+
+@Component({
+    selector: "application-details-editor",
+    template: template
+})
+export class ApplicationDetailsEditor {
+    public readonly hyperlink: ko.Observable<HyperlinkModel>;
+    public readonly hyperlinkTitle: ko.Computed<string>;
+
+    constructor() {
+        this.hyperlink = ko.observable();
+        this.hyperlinkTitle = ko.computed<string>(() => this.hyperlink() ? this.hyperlink().title : "Add a link...");
+    }
+
+    @Param()
+    public model: ApplicationDetailsModel;
+
+    @Event()
+    public onChange: (model: ApplicationDetailsModel) => void;
+
+    @OnMounted()
+    public async initialize(): Promise<void> {
+        this.hyperlink(this.model.detailsPageHyperlink);
+    }
+
+    private applyChanges(): void {
+        this.model.detailsPageHyperlink = this.hyperlink();
+        this.onChange(this.model);
+    }
+
+    public onHyperlinkChange(hyperlink: HyperlinkModel): void {
+        this.hyperlink(hyperlink);
+        this.applyChanges();
+    }
+}