Added issue detection/resolution to help section. (#504)

src/apim.design.module.ts

@@ -57,6 +57,7 @@ import { ValidationSummaryDesignModule} from "./components/users/validation-summ
 import { BackendService } from "./services/backendService";
 import { StaticRoleService } from "./services/roleService";
 import { ProvisionService } from "./services/provisioningService";
+import { PolicyService } from "./services/policyService";
 
 
 export class ApimDesignModule implements IInjectorModule {
@@ -116,6 +117,7 @@ export class ApimDesignModule implements IInjectorModule {
         injector.bindSingleton("tenantService", TenantService);
         injector.bindSingleton("provisioningService", ProvisionService);
         injector.bindSingleton("identityService", IdentityService);
+        injector.bindSingleton("policyService", PolicyService);
         injector.bindSingleton("mapiClient", MapiClient);
         injector.bindSingleton("authenticator", DefaultAuthenticator);
         injector.bindSingleton("objectStorage", MapiObjectStorage);

src/components/help/articles/cors.html

@@ -0,0 +1,8 @@
+<p>
+    The interactive console of the Developer portal makes client-side API requests directly from the browser, this requires
+    Cross-Origin Resource Sharing (CORS) enabled on the server.
+</p>
+<p>
+    You can enable it by adding a CORS policy on your API(s).
+    <a href="https://aka.ms/AA4e482" target="_blank">Learn more</a>
+</p>

src/components/help/articles/domain.html

@@ -0,0 +1,6 @@
+<p>
+    By default, your API Management service instance is available through *.azure-api.net subdomain (e.g.
+    contoso.developer.azure-api.net). You can also expose the service through your own domain name, such as contoso.com.
+    <a href="https://docs.microsoft.com/en-us/azure/api-management/configure-custom-domain" target="_blank">Learn
+        more</a>
+</p>

src/components/help/help.html

@@ -1,3 +1,13 @@
 <div class="flex flex-column fit">
-    <p>Go to <a href="https://aka.ms/apimdocs/portal" target="_blank">this documentation article</a> to learn more about the API Management developer portal</p>
+    <p>Go to <a href="https://aka.ms/apimdocs/portal" target="_blank">this documentation article</a> to learn more about
+        the API Management developer portal</p>
+
+    <div class="flex-item flex-item-grow list">
+        <!-- ko foreach: { data: hints, as: 'hint' } -->
+        <a href="#" class="list-item">
+            <i class="paperbits-icon paperbits-alert"></i>
+            <span data-bind="text: hint.issue, click: $component.selectHint"></span>
+        </a>
+        <!-- /ko -->
+    </div>
 </div>

src/components/help/help.module.ts

@@ -1,9 +1,10 @@
 import { IInjectorModule, IInjector } from "@paperbits/common/injection";
-import { HelpWorkshop, HelpWorkshopSection } from ".";
+import { HelpWorkshop, HelpDetailsWorkshop, HelpWorkshopSection } from ".";
 
 export class HelpModule implements IInjectorModule {
     public register(injector: IInjector): void {
         injector.bind("helpWorkshop", HelpWorkshop);
+        injector.bind("helpDetailsWorkshop", HelpDetailsWorkshop);
         injector.bindToCollection("workshopSections", HelpWorkshopSection);
     }
 }

src/components/help/help.ts

@@ -1,9 +1,57 @@
-import template from "./help.html";
-import { Component } from "@paperbits/common/ko/decorators";
+import * as ko from "knockout";
+import cors from "./articles/cors.html";
+import domain from "./articles/domain.html";
+import { PolicyService } from "./../../services/policyService";
+import template from "./help.html";
+import { Component, OnMounted } from "@paperbits/common/ko/decorators";
+import { View, ViewManager } from "@paperbits/common/ui";
+import { Hint } from "./hint";
+
 
 @Component({
     selector: "help-workshop",
     template: template
 })
 export class HelpWorkshop {
+    public readonly hints: ko.ObservableArray<Hint>;
+
+    public constructor(
+        private readonly policyService: PolicyService,
+        private readonly viewManager: ViewManager
+    ) {
+        this.hints = ko.observableArray();
+    }
+
+    @OnMounted()
+    public async initialize(): Promise<void> {
+        const globalPolicyXml = await this.policyService.getPolicyXmlForGlobalScope();
+
+        if (!globalPolicyXml.toLowerCase().contains("<cors>")) {
+            this.hints.push({
+                issue: `Setup CORS policy`,
+                suggestion: cors
+            });
+        }
+
+        if (location.hostname.endsWith(".developer.azure-api") || location.hostname.endsWith("localhost")) {
+            this.hints.push({
+                issue: `Setup custom domain`,
+                suggestion: domain
+            });
+        }
+    }
+
+    public selectHint(hint: Hint): void {
+        const view: View = {
+            heading: hint.issue,
+            component: {
+                name: "help-details-workshop",
+                params: {
+                    hint: hint
+                }
+            }
+        };
+
+        this.viewManager.openViewAsWorkshop(view);
+    }
 }

src/components/help/helpDetails.html

@@ -0,0 +1 @@
+<div class="flex flex-column fit" data-bind="html: hint.suggestion"></div>

src/components/help/helpDetails.ts

@@ -0,0 +1,24 @@
+import * as ko from "knockout";
+import template from "./helpDetails.html";
+import { Component, OnMounted, Param } from "@paperbits/common/ko/decorators";
+import { Hint } from "./hint";
+
+@Component({
+    selector: "help-details-workshop",
+    template: template
+})
+export class HelpDetailsWorkshop {
+    public readonly hints: ko.ObservableArray<Hint>;
+
+    public constructor() {
+        this.hints = ko.observableArray();
+    }
+
+    @Param()
+    public hint: Hint;
+
+    @OnMounted()
+    public async initialize(): Promise<void> {
+        //
+    }
+}

src/components/help/hint.ts

@@ -0,0 +1,14 @@
+/**
+ * Entity describing the issue and its potential soultion.
+ */
+export interface Hint {
+    /**
+     * Short text defining the issue.
+     */
+    issue: string;
+
+    /**
+     * Free text explaning what can be done to resolve this issue.
+     */
+    suggestion: string;
+}

src/components/help/index.ts

@@ -1,3 +1,4 @@
 export * from "./help.module";
 export * from "./helpSection";
 export * from "./help";
+export * from "./helpDetails";

src/services/policyService.ts

@@ -0,0 +1,20 @@
+import { MapiClient } from ".";
+
+export class PolicyService {
+    constructor(private readonly mapiClient: MapiClient) { }
+
+    public async getPolicyXmlForGlobalScope(): Promise<string> {
+        try {
+            const policyXml = await this.mapiClient.get<string>(`/policies/policy?format=rawxml`);
+            return policyXml;
+        }
+        catch (error) {
+            if (error.code === "ResourceNotFound") {
+                return null;
+            }
+            else {
+                throw error;
+            }
+        }
+    }
+}