Merge master.

Author: azaslonov

package-lock.json

@@ -24,88 +24,88 @@
         "build-static-data": "webpack --config webpack.staticData.js && node dist/publisher/index.js"
     },
     "devDependencies": {
-        "@azure/storage-blob": "12.8.0",
+        "@azure/storage-blob": "12.9.0",
         "@types/chai": "^4.3.0",
         "@types/google-maps": "^3.2.3",
         "@types/knockout": "^3.4.71",
         "@types/knockout.mapping": "^2.0.37",
         "@types/knockout.validation": "0.0.38",
         "@types/mime": "^2.0.3",
         "@types/mocha": "9.1.0",
-        "@types/node": "^17.0.17",
-        "@types/puppeteer": "5.4.4",
-        "autoprefixer": "^10.4.2",
+        "@types/node": "^17.0.23",
+        "@types/puppeteer": "5.4.5",
+        "autoprefixer": "^10.4.4",
         "buffer": "^6.0.3",
         "chai": "^4.3.6",
         "clean-webpack-plugin": "4.0.0",
         "copy-webpack-plugin": "^10.2.4",
-        "css-loader": "^6.6.0",
+        "css-loader": "^6.7.1",
         "file-loader": "^6.2.0",
         "fs": "^0.0.1-security",
         "html-loader": "^3.1.0",
-        "mini-css-extract-plugin": "^2.5.3",
-        "mocha": "^9.2.0",
+        "mini-css-extract-plugin": "^2.6.0",
+        "mocha": "^9.2.2",
         "path": "^0.12.7",
         "postcss-loader": "^6.2.1",
-        "puppeteer": "13.3.1",
+        "puppeteer": "13.5.1",
         "querystring-es3": "^0.2.1",
         "raw-loader": "^4.0.2",
-        "sass": "^1.49.7",
-        "sass-loader": "^12.4.0",
+        "sass": "^1.49.9",
+        "sass-loader": "^12.6.0",
         "stream-browserify": "^3.0.0",
         "style-loader": "^3.3.1",
         "terser-webpack-plugin": "^5.3.1",
-        "ts-loader": "^9.2.6",
-        "ts-node": "10.5.0",
+        "ts-loader": "^9.2.8",
+        "ts-node": "10.7.0",
         "tslint": "^6.1.3",
-        "typescript": "^4.5.5",
+        "typescript": "^4.6.3",
         "url-loader": "^4.1.1",
-        "webpack": "5.68.0",
+        "webpack": "5.70.0",
         "webpack-cli": "4.9.2 ",
         "webpack-dev-server": "4.7.4",
         "webpack-merge": "5.8.0"
     },
-    "dependencies": {
-        "@azure/msal-browser": "^2.20.0",
-        "@braintree/sanitize-url": "^5.0.2",
-        "@monaco-editor/loader": "^1.2.0",
-        "@paperbits/azure": "0.1.486",
-        "@paperbits/common": "0.1.486",
-        "@paperbits/core": "0.1.486",
-        "@paperbits/prosemirror": "0.1.486",
-        "@paperbits/styles": "0.1.486",
-        "@webcomponents/custom-elements": "1.5.0",
-        "@webcomponents/shadydom": "^1.9.0",
-        "applicationinsights-js": "^1.0.21",
-        "client-oauth2": "4.3.3",
-        "codemirror": "^5.65.1",
-        "core-js": "^3.21.0",
-        "d3": "^5.11.0",
-        "google-maps": "^4.3.3",
-        "graphql": "^15.5.0",
-        "graphql-config": "^4.0.1",
-        "graphql-language-service": "^3.1.4",
-        "js-beautify": "^1.14.0",
-        "knockout": "^3.5.1",
-        "knockout-mapping": "^2.6.0",
-        "knockout.validation": "^2.0.4",
-        "liquidjs": "^9.34.0",
-        "lunr": "^2.3.9",
-        "mime": "^3.0.0",
-        "moment": "^2.29.1",
-        "monaco-editor": "^0.29.1",
-        "msal": "^1.4.16",
-        "prettier": "^2.5.1",
-        "prismjs": "^1.26.0",
-        "rehype-raw": "^6.1.1",
-        "rehype-sanitize": "^5.0.1",
-        "rehype-stringify": "^9.0.3",
-        "remark": "^14.0.2",
-        "remark-gfm": "^3.0.1",
-        "remark-parse": "^10.0.1",
-        "remark-rehype": "^10.1.0",
-        "saxen": "^8.1.2",
-        "topojson-client": "^3.1.0",
-        "truncate-html": "^1.0.4"
-    }
+  "dependencies": {
+    "@azure/msal-browser": "^2.22.1",
+    "@braintree/sanitize-url": "^6.0.0",
+    "@monaco-editor/loader": "^1.3.0",
+    "@paperbits/azure": "0.1.493",
+    "@paperbits/common": "0.1.493",
+    "@paperbits/core": "0.1.493",
+    "@paperbits/prosemirror": "0.1.493",
+    "@paperbits/styles": "0.1.493",
+    "@webcomponents/custom-elements": "1.5.0",
+    "@webcomponents/shadydom": "^1.9.0",
+    "applicationinsights-js": "^1.0.21",
+    "client-oauth2": "4.3.3",
+    "codemirror": "^5.65.2",
+    "core-js": "^3.21.1",
+    "d3": "^7.4.0",
+    "google-maps": "^4.3.3",
+    "graphql": "^15.5.0",
+    "graphql-config": "^4.0.1",
+    "graphql-language-service": "^3.1.4",
+    "js-beautify": "^1.14.2",
+    "knockout": "^3.5.1",
+    "knockout-mapping": "^2.6.0",
+    "knockout.validation": "^2.0.4",
+    "liquidjs": "^9.36.0",
+    "lunr": "^2.3.9",
+    "mime": "^3.0.0",
+    "moment": "^2.29.1",
+    "monaco-editor": "^0.29.1",
+    "msal": "^1.4.16",
+    "prettier": "^2.6.1",
+    "prismjs": "^1.27.0",
+    "rehype-raw": "^6.1.1",
+    "rehype-sanitize": "^5.0.1",
+    "rehype-stringify": "^9.0.3",
+    "remark": "^14.0.2",
+    "remark-gfm": "^3.0.1",
+    "remark-parse": "^10.0.1",
+    "remark-rehype": "^10.1.0",
+    "saxen": "^8.1.2",
+    "topojson-client": "^3.1.0",
+    "truncate-html": "^1.0.4"
+  }
 }

package.json

@@ -152,6 +152,11 @@ async function downloadBlobs(blobStorageUrl, snapshotMediaFolder) {
 }
 
 async function uploadBlobs(blobStorageUrl, localMediaFolder) {
+    if (!fs.existsSync(localMediaFolder)) {
+        console.info("No media files found in the snapshot folder. Skipping media upload...");
+        return;
+    }
+
     try {
         const blobServiceClient = new BlobServiceClient(blobStorageUrl.replace(`/${blobStorageContainer}`, ""));
         const containerClient = blobServiceClient.getContainerClient(blobStorageContainer);

scripts.v2/utils.js

@@ -12,7 +12,8 @@
  *    node ./cleanup ^
  *   --subscriptionId < your subscription ID > ^
  *   --resourceGroupName < your resource group name > ^
- *   --serviceName < your service name >
+ *   --serviceName < your service name > ^
+ *   --publish true [false: default]
  */
 
 const path = require("path");
@@ -45,6 +46,12 @@ const yargs = require('yargs')
         example: '../dist/snapshot',
         demandOption: false
     })
+    .option('publish', {
+        type: 'boolean',
+        default: false,
+        description: 'Enabling this flag will publish the developer portal changes.',
+        demandOption: false
+    })
     .help()
     .argv;
 
@@ -68,6 +75,14 @@ async function generate() {
     );
 
     await importerExporter.import();
+
+    if (yargs.publish === true) {
+        console.log("Publishing changes...");
+        await importerExporter.publish();
+        console.log("Published.");
+    } else {
+        console.warn("Skipped publishing changes! If you want to publish the changes run the script with --publish true flag.");    
+    }
 }
 
 generate()

scripts.v3/generate.js

@@ -259,8 +259,14 @@ class ImporterExporter {
      * Uploads media files to storage of specified API Management service.
      */
     async uploadBlobs() {
+        const snapshotMediaFolder = `${this.snapshotFolder}/media`;
+
+        if (!fs.existsSync(snapshotMediaFolder)) {
+            console.info("No media files found in the snapshot folder. Skipping media upload...");
+            return;
+        }
+
         try {
-            const snapshotMediaFolder = `${this.snapshotFolder}/media`;
             const blobStorageUrl = await this.getStorageSasUrl();
             const blobServiceClient = new BlobServiceClient(blobStorageUrl.replace(`/${blobStorageContainer}`, ""));
             const containerClient = blobServiceClient.getContainerClient(blobStorageContainer);

scripts.v3/utils.js

@@ -118,7 +118,6 @@ export class ApimDesignModule implements IInjectorModule {
         injector.bindModule(new HelpModule());
         injector.bindModule(new ValidationSummaryDesignModule());
         injector.bindModule(new ValidationSummaryModule());
-        injector.bindModule(new SigninSocialEditorModule());
         injector.bindModule(new CustomHtmlDesignModule());
         injector.bindSingleton("app", App);
         injector.bindSingleton("logger", ConsoleLogger);

src/apim.design.module.ts

@@ -20,6 +20,7 @@ import "./bindingHandlers/scrollintoview";
 import "./bindingHandlers/syntaxHighlight";
 import "./bindingHandlers/tab";
 import { ApiProducts } from "./components/apis/api-products/ko/runtime/api-products";
+import { ApiProductsDropdown } from "./components/apis/api-products/ko/runtime/api-products-dropdown";
 import { ApiProductsTiles } from "./components/apis/api-products/ko/runtime/api-products-tiles";
 import { ApiDetails } from "./components/apis/details-of-api/ko/runtime/api-details";
 import { ApiHistory } from "./components/apis/history-of-api/ko/runtime/api-history";
@@ -50,6 +51,7 @@ import { ConfirmPassword } from "./components/users/confirm-password/ko/runtime/
 import { Profile } from "./components/users/profile/ko/runtime/profile";
 import { ResetPassword } from "./components/users/reset-password/ko/runtime/reset-password";
 import { HipCaptcha } from "./components/users/runtime/hip-captcha/hip-captcha";
+import { TermsOfUse } from "./components/users/runtime/terms-of-use/terms-of-use";
 import { SignInAad } from "./components/users/signin-social/ko/runtime/signin-aad";
 import { SignInAadB2C } from "./components/users/signin-social/ko/runtime/signin-aad-b2c";
 import { Signin } from "./components/users/signin/ko/runtime/signin";
@@ -99,6 +101,7 @@ export class ApimRuntimeModule implements IInjectorModule {
         injector.bind("apiListDropdown", ApiListDropdown);
         injector.bind("apiListTiles", ApiListTiles);
         injector.bind("apiProducts", ApiProducts);
+        injector.bind("apiProductsDropdown", ApiProductsDropdown);
         injector.bind("apiProductsTiles", ApiProductsTiles);
         injector.bind("apiDetails", ApiDetails);
         injector.bind("apiHistory", ApiHistory);
@@ -136,6 +139,7 @@ export class ApimRuntimeModule implements IInjectorModule {
         injector.bind("usersService", UsersService);
         injector.bind("reports", Reports);
         injector.bind("hipCaptcha", HipCaptcha);
+        injector.bind("termsOfUse", TermsOfUse);
         injector.bind("resetPassword", ResetPassword);
         injector.bind("confirmPassword", ConfirmPassword);
         injector.bind("changePassword", ChangePassword);

src/apim.runtime.module.ts

@@ -37,14 +37,15 @@ export class AccessToken {
     }
 
     private static parseSharedAccessSignature(value: string): AccessToken {
-        const regex = /^[\w\-]*\&(\d*)\&/gm;
+        const regex = /^([\w\-]*)\&(\d*)\&/gm;
         const match = regex.exec(value);
 
-        if (!match || match.length < 2) {
+        if (!match || match.length < 3) {
             throw new Error(`SharedAccessSignature token format is not valid.`);
         }
 
-        const dateTime = match[1];
+        const userId = match[1];
+        const dateTime = match[2];
         const year = dateTime.substr(0, 4);
         const month = dateTime.substr(4, 2);
         const day = dateTime.substr(6, 2);
@@ -53,7 +54,7 @@ export class AccessToken {
         const dateTimeIso = `${year}-${month}-${day}T${hour}:${minute}:00.000Z`;
         const expirationDateUtc = new Date(dateTimeIso);
 
-        return new AccessToken("SharedAccessSignature", value, expirationDateUtc);
+        return new AccessToken("SharedAccessSignature", value, expirationDateUtc, userId);
     }
 
     private static parseBearerToken(value: string): AccessToken {

src/authentication/accessToken.ts

@@ -6,7 +6,7 @@ import { HyperlinkContract } from "@paperbits/common/editing";
  */
 export interface ApiProductsContract extends Contract {
     /**
-     * List layout. "list" or "tiles"
+     * List layout. "list", "dropdown" or "tiles"
      */
     itemStyleView?: string;
 

src/components/apis/api-products/apiProductsContract.ts

@@ -16,6 +16,21 @@ export class ApiProductsHandlers implements IWidgetHandler {
     }
 }
 
+export class ApiProductsDropdownHandlers implements IWidgetHandler {
+  public async getWidgetOrder(): Promise<IWidgetOrder> {
+    const widgetOrder: IWidgetOrder = {
+      name: "api-products-dropdown",
+      category: "APIs",
+      displayName: "API: Products (dropdown)",
+      iconClass: "widget-icon widget-icon-api-management",
+      requires: ["html"],
+      createModel: async () => new ApiProductsModel("dropdown"),
+    };
+
+    return widgetOrder;
+  }
+}
+
 export class ApiProductsTilesHandlers implements IWidgetHandler {
     public async getWidgetOrder(): Promise<IWidgetOrder> {
         const widgetOrder: IWidgetOrder = {