Upgraded dependencies. Added Forms module. (#1922)

Azure · Oct 22, 2022 · 72c7fa6 · 72c7fa6
1 parent d10f4af
commit 72c7fa6
Show file tree

Hide file tree

Showing 17 changed files with 1,786 additions and 1,592 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "apim-developer-portal",
-    "version": "2.18.0",
+    "version": "2.19.0",
     "description": "API management developer portal",
     "author": "Microsoft",
     "license": "MIT",
@@ -26,84 +26,85 @@
         "lint:fix": "eslint src/**/*.ts --fix"
     },
     "devDependencies": {
-        "@azure/storage-blob": "12.11.0",
-        "@types/chai": "^4.3.1",
+        "@azure/storage-blob": "12.12.0",
+        "@types/chai": "^4.3.3",
         "@types/google-maps": "^3.2.3",
         "@types/knockout": "^3.4.72",
         "@types/knockout.mapping": "^2.0.37",
         "@types/knockout.validation": "0.0.38",
-        "@types/mime": "^2.0.3",
-        "@types/mocha": "9.1.1",
-        "@types/node": "^18.6.1",
-        "@types/puppeteer": "5.4.6",
-        "@typescript-eslint/eslint-plugin": "^5.31.0",
-        "@typescript-eslint/parser": "^5.31.0",
-        "autoprefixer": "^10.4.7",
+        "@types/mime": "^3.0.1",
+        "@types/mocha": "10.0.0",
+        "@types/node": "^18.11.3",
+        "@types/puppeteer": "5.4.7",
+        "@typescript-eslint/eslint-plugin": "^5.40.1",
+        "@typescript-eslint/parser": "^5.40.1",
+        "autoprefixer": "^10.4.12",
         "buffer": "^6.0.3",
         "chai": "^4.3.6",
         "clean-webpack-plugin": "4.0.0",
         "copy-webpack-plugin": "^11.0.0",
         "css-loader": "^6.7.1",
-        "eslint": "^8.20.0",
+        "eslint": "^8.26.0",
         "file-loader": "^6.2.0",
-        "html-loader": "^4.1.0",
+        "html-loader": "^4.2.0",
         "mini-css-extract-plugin": "^2.6.1",
-        "mocha": "^10.0.0",
+        "mocha": "^10.1.0",
         "path": "^0.12.7",
         "postcss-loader": "^7.0.1",
-        "puppeteer": "15.5.0",
+        "puppeteer": "19.1.0",
         "querystring-es3": "^0.2.1",
         "raw-loader": "^4.0.2",
-        "sass": "^1.54.0",
-        "sass-loader": "^13.0.2",
+        "sass": "^1.55.0",
+        "sass-loader": "^13.1.0",
         "stream-browserify": "^3.0.0",
         "style-loader": "^3.3.1",
-        "terser-webpack-plugin": "^5.3.3",
-        "ts-loader": "^9.3.1",
+        "terser-webpack-plugin": "^5.3.6",
+        "ts-loader": "^9.4.1",
         "ts-node": "10.9.1",
-        "typescript": "^4.7.4",
+        "typescript": "^4.8.4",
         "url-loader": "^4.1.1",
         "webpack": "5.74.0",
         "webpack-cli": "4.10.0",
-        "webpack-dev-server": "4.9.3",
+        "webpack-dev-server": "4.11.1",
         "webpack-merge": "5.8.0"
     },
     "dependencies": {
-        "@azure/api-management-custom-widgets-scaffolder": "^1.0.0-beta.1",
+        "@azure/api-management-custom-widgets-scaffolder": "^1.0.0-beta.2",
         "@azure/api-management-custom-widgets-tools": "^1.0.0-beta.1",
-        "@azure/msal-browser": "^2.28.0",
-        "@braintree/sanitize-url": "6.0.0",
-        "@microsoft/applicationinsights-web": "^2.8.5",
+        "@azure/msal-browser": "^2.30.0",
+        "@braintree/sanitize-url": "6.0.1",
+        "@microsoft/applicationinsights-web": "^2.8.8",
         "@monaco-editor/loader": "^1.3.2",
-        "@paperbits/azure": "0.1.517",
-        "@paperbits/common": "0.1.517",
-        "@paperbits/core": "0.1.517",
-        "@paperbits/prosemirror": "0.1.517",
-        "@paperbits/styles": "0.1.517",
-        "@webcomponents/custom-elements": "1.5.0",
-        "@webcomponents/shadydom": "^1.9.0",
+        "@paperbits/azure": "0.1.531",
+        "@paperbits/common": "0.1.531",
+        "@paperbits/core": "0.1.531",
+        "@paperbits/forms": "^0.1.531",
+        "@paperbits/prosemirror": "0.1.531",
+        "@paperbits/styles": "0.1.531",
+        "@webcomponents/custom-elements": "1.5.1",
+        "@webcomponents/shadydom": "^1.10.0",
         "client-oauth2": "4.3.3",
         "codemirror": "^5.65.5",
-        "core-js": "^3.24.0",
+        "core-js": "^3.25.5",
         "d3": "7.6.1",
         "file-saver": "^2.0.5",
         "google-maps": "^4.3.3",
         "graphql": "^15.5.0",
         "graphql-config": "^4.0.1",
         "graphql-language-service": "^3.1.4",
         "idb-keyval": "^6.2.0",
-        "js-beautify": "^1.14.4",
+        "js-beautify": "^1.14.7",
         "knockout": "^3.5.1",
         "knockout-mapping": "^2.6.0",
         "knockout.validation": "^2.0.4",
-        "liquidjs": "^9.39.2",
+        "liquidjs": "^9.42.1",
         "lunr": "^2.3.9",
         "mime": "^3.0.0",
         "moment": "^2.29.4",
         "monaco-editor": "^0.29.1",
-        "msal": "^1.4.16",
+        "msal": "^1.4.17",
         "prettier": "^2.7.1",
-        "prismjs": "^1.28.0",
+        "prismjs": "^1.29.0",
         "rehype-raw": "^6.1.1",
         "rehype-sanitize": "^5.0.1",
         "rehype-stringify": "^9.0.3",

diff --git a/src/apim.design.module.ts b/src/apim.design.module.ts
@@ -7,6 +7,8 @@ import { DefaultAuthenticator } from "./components/defaultAuthenticator";
 import { IInjector, IInjectorModule } from "@paperbits/common/injection";
 import { ConsoleLogger } from "@paperbits/common/logging";
 import { DefaultSessionManager } from "@paperbits/common/persistence/defaultSessionManager";
+import { HistoryRouteHandler } from "@paperbits/common/routing";
+import { RoleBasedSecurityDesignModule } from "@paperbits/core/security/roleBasedSecurity.design.module";
 import { ListOfApisModule } from "./components/apis/list-of-apis/ko/listOfApis.module";
 import { ListOfApisEditorModule } from "./components/apis/list-of-apis/ko/listOfApisEditor.module";
 import { DetailsOfApiModule } from "./components/apis/details-of-api/ko/detailsOfApi.module";
@@ -60,7 +62,6 @@ import { StaticRoleService } from "./services/roleService";
 import { ProvisionService } from "./services/provisioningService";
 import { PolicyService } from "./services/policyService";
 import { OAuthService } from "./services/oauthService";
-import { HistoryRouteHandler } from "@paperbits/common/routing";
 import { OldContentRouteGuard } from "./routing/oldContentRouteGuard";
 import { AccessTokenRefrsher } from "./authentication/accessTokenRefresher";
 import { ApiProductsModule } from "./components/apis/api-products/ko/apiProducts.module";
@@ -118,6 +119,7 @@ export class ApimDesignModule implements IInjectorModule {
         injector.bindModule(new ValidationSummaryModule());
         injector.bindModule(new CustomHtmlDesignModule());
         injector.bindModule(new CustomWidgetDesignModule());
+        injector.bindModule(new RoleBasedSecurityDesignModule());
         injector.bindSingleton("app", App);
         injector.bindSingleton("logger", ConsoleLogger);
         injector.bindSingleton("tenantService", TenantService);

diff --git a/src/apim.publish.module.ts b/src/apim.publish.module.ts
@@ -1,6 +1,7 @@
 import { AadConfigPublisher } from "./publishing/aadConfigPublisher";
 import { IInjector, IInjectorModule } from "@paperbits/common/injection";
 import { ConsoleLogger } from "@paperbits/common/logging";
+import { RoleBasedSecurityPublishModule } from "@paperbits/core/security/roleBasedSecurity.publish.module";
 import { MapiClient } from "./services/mapiClient";
 import { MapiObjectStorage, MapiBlobStorage } from "./persistence";
 import { ListOfApisModule } from "./components/apis/list-of-apis/ko/listOfApis.module";
@@ -68,6 +69,7 @@ export class ApimPublishModule implements IInjectorModule {
         injector.bindModule(new ValidationSummaryModule());
         injector.bindModule(new CustomHtmlPublishModule());
         injector.bindModule(new CustomWidgetPublishModule());
+        injector.bindModule(new RoleBasedSecurityPublishModule());
         injector.bindSingleton("tenantService", TenantService);
         injector.bindSingleton("backendService", BackendService);
         injector.bindSingleton("userService", StaticUserService);
@@ -81,7 +83,6 @@ export class ApimPublishModule implements IInjectorModule {
         injector.bindSingleton("blobStorage", MapiBlobStorage);
         injector.bindSingleton("logger", ConsoleLogger);
         injector.bindSingleton("oauthService", OAuthService);
-
         injector.bindSingleton("runtimeConfigBuilder", RuntimeConfigBuilder);
         injector.bindToCollection("publishers", AadConfigPublisher);
         injector.bindToCollection("publishers", RuntimeConfigPublisher);

diff --git a/src/apim.runtime.module.ts b/src/apim.runtime.module.ts
@@ -1,43 +1,48 @@
-import "./polyfills";
-import "@paperbits/core/ko/bindingHandlers/bindingHandlers.activate";
-import "@paperbits/core/ko/bindingHandlers/bindingHandlers.component";
-import "@paperbits/core/ko/bindingHandlers/bindingHandlers.dialog";
-import "@paperbits/core/ko/bindingHandlers/bindingHandlers.focus";
-import "@paperbits/core/ko/bindingHandlers/bindingHandlers.scrollable";
-import "@paperbits/core/ko/bindingHandlers/bindingHandlers.listbox";
 import { IInjector, IInjectorModule } from "@paperbits/common/injection";
 import { ConsoleLogger } from "@paperbits/common/logging";
 import { DefaultSessionManager } from "@paperbits/common/persistence/defaultSessionManager";
 import { ViewStack } from "@paperbits/common/ui/viewStack";
 import { BalloonBindingHandler, ResizableBindingHandler } from "@paperbits/core/ko/bindingHandlers";
+import "@paperbits/core/ko/bindingHandlers/bindingHandlers.activate";
+import "@paperbits/core/ko/bindingHandlers/bindingHandlers.component";
+import "@paperbits/core/ko/bindingHandlers/bindingHandlers.dialog";
+import "@paperbits/core/ko/bindingHandlers/bindingHandlers.focus";
+import "@paperbits/core/ko/bindingHandlers/bindingHandlers.listbox";
+import "@paperbits/core/ko/bindingHandlers/bindingHandlers.scrollable";
+import { RoleBasedSecurityRuntimeModule } from "@paperbits/core/security/roleBasedSecurity.runtime.module";
+import { staticDataEnvironment } from "./../environmentConstants";
+import { AccessTokenRefrsher } from "./authentication/accessTokenRefresher";
 import "./bindingHandlers/acceptChange";
 import "./bindingHandlers/barChart";
 import "./bindingHandlers/copyToClipboard";
+import "./bindingHandlers/fastForeach";
 import "./bindingHandlers/mapChart";
 import "./bindingHandlers/markdown";
 import "./bindingHandlers/minMaxAvgChart";
 import "./bindingHandlers/scrollintoview";
 import "./bindingHandlers/syntaxHighlight";
 import "./bindingHandlers/tab";
-import "./bindingHandlers/fastForeach";
 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";
 import { ApiList, ApiListDropdown, ApiListTiles } from "./components/apis/list-of-apis/ko/runtime";
+import { CustomWidgetRuntimeModule } from "./components/custom-widget/customWidget.runtime.module";
 import { DefaultAuthenticator } from "./components/defaultAuthenticator";
 import { FileInput } from "./components/file-input/file-input";
-import { CodeSnippet } from "./components/operations/operation-details/ko/runtime/code-snippet";
 import { Authorization } from "./components/operations/operation-details/ko/runtime/authorization";
-import { OperationConsole } from "./components/operations/operation-details/ko/runtime/operation-console";
+import { CodeSnippet } from "./components/operations/operation-details/ko/runtime/code-snippet";
 import { GraphqlConsole } from "./components/operations/operation-details/ko/runtime/graphql-console";
 import { GraphqlDocumentation } from "./components/operations/operation-details/ko/runtime/graphql-documentation/graphql-doc";
 import { GraphqlDetails } from "./components/operations/operation-details/ko/runtime/graphql-documentation/graphql-doc-details";
 import { GraphDocService } from "./components/operations/operation-details/ko/runtime/graphql-documentation/graphql-doc-service";
+import { OauthServerConfiguration } from "./components/operations/operation-details/ko/runtime/oauth-server-configuration";
+import { OperationConsole } from "./components/operations/operation-details/ko/runtime/operation-console";
 import { OperationDetails } from "./components/operations/operation-details/ko/runtime/operation-details";
 import { TypeDefinitionViewModel } from "./components/operations/operation-details/ko/runtime/type-definition";
 import { OperationList } from "./components/operations/operation-list/ko/runtime/operation-list";
+import { Pagination } from "./components/pagination/pagination";
 import { ProductApis } from "./components/products/product-apis/ko/runtime/product-apis";
 import { ProductApisTiles } from "./components/products/product-apis/ko/runtime/product-apis-tiles";
 import { ProductDetails } from "./components/products/product-details/ko/runtime/product-details";
@@ -61,31 +66,27 @@ import { SignupSocial } from "./components/users/signup-social/ko/runtime/signup
 import { Signup } from "./components/users/signup/ko/runtime/signup";
 import { Subscriptions } from "./components/users/subscriptions/ko/runtime/subscriptions";
 import { ValidationSummary } from "./components/users/validation-summary/ko/runtime/validation-summary";
+import { ApimSettingsProvider } from "./configuration/apimSettingsProvider";
 import { UnhandledErrorHandler } from "./errors/unhandledErrorHandler";
+import "./polyfills";
 import { AadSignOutRouteGuard } from "./routing/aadSignoutRouteGuard";
 import { RouteHelper } from "./routing/routeHelper";
 import { SignOutRouteGuard } from "./routing/signOutRouteGuard";
 import { StaticUserService } from "./services";
 import { AadService } from "./services/aadService";
+import { AadServiceV2 } from "./services/aadServiceV2";
 import { AnalyticsService } from "./services/analyticsService";
 import { ApiService } from "./services/apiService";
 import { BackendService } from "./services/backendService";
 import { MapiClient } from "./services/mapiClient";
 import { OAuthService } from "./services/oauthService";
 import { ProductService } from "./services/productService";
 import { ProvisionService } from "./services/provisioningService";
+import { RuntimeStaticDataProvider } from "./services/runtimeStaticDataProvider";
+import { StaticDataHttpClient } from "./services/staticDataHttpClient";
 import { TagService } from "./services/tagService";
 import { TenantService } from "./services/tenantService";
 import { UsersService } from "./services/usersService";
-import { ApimSettingsProvider } from "./configuration/apimSettingsProvider";
-import { AccessTokenRefrsher } from "./authentication/accessTokenRefresher";
-import { Pagination } from "./components/pagination/pagination";
-import { StaticDataHttpClient } from "./services/staticDataHttpClient";
-import { OauthServerConfiguration } from "./components/operations/operation-details/ko/runtime/oauth-server-configuration";
-import { AadServiceV2 } from "./services/aadServiceV2";
-import { RuntimeStaticDataProvider } from "./services/runtimeStaticDataProvider";
-import { staticDataEnvironment } from "./../environmentConstants";
-import { CustomWidgetRuntimeModule } from "./components/custom-widget/customWidget.runtime.module";
 
 
 export class ApimRuntimeModule implements IInjectorModule {
@@ -161,6 +162,7 @@ export class ApimRuntimeModule implements IInjectorModule {
         injector.bind("pagination", Pagination);
         injector.bind("oauthServerConfiguration", OauthServerConfiguration);
         injector.bindModule(new CustomWidgetRuntimeModule());
+        injector.bindModule(new RoleBasedSecurityRuntimeModule());
 
         if (process.env.NODE_ENV === staticDataEnvironment) {
             injector.bind("httpClient", StaticDataHttpClient);

diff --git a/src/components/custom-widget-list/createWidget.ts b/src/components/custom-widget-list/createWidget.ts
@@ -7,11 +7,13 @@ import { Component, OnMounted, Param } from "@paperbits/common/ko/decorators";
 import * as Utils from "@paperbits/common/utils";
 import { Logger } from "@paperbits/common/logging";
 import { MapiBlobStorage } from "../../persistence";
-import { CustomWidgetHandlers, TCustomWidgetConfig } from "../custom-widget";
+import { CustomWidgetHandlers, CustomWidgetModelBinder, TCustomWidgetConfig, widgetCategory } from "../custom-widget";
 import { CustomWidgetModel } from "./customWidgetModel";
 import template from "./createWidget.html";
 // tslint:disable-next-line:no-implicit-dependencies
 import fallbackUi from "!!raw-loader!./fallbackUi.html";
+import { KnockoutComponentBinder } from "@paperbits/core/ko/knockoutComponentBinder";
+import { CustomWidgetEditorViewModel, CustomWidgetViewModel, CustomWidgetViewModelBinder } from "../custom-widget/ko";
 
 const techToName: Record<ScaffoldTech, string> = {
     typescript: "TypeScript",
@@ -27,7 +29,7 @@ export class CreateWidget {
     public readonly displayName: ko.Observable<string>;
     public readonly technology: ko.Observable<ScaffoldTech | null>;
     public readonly configNew: ko.Observable<TCustomWidgetConfig | null>;
-    public readonly techAll = TECHNOLOGIES.map(id => ({id, name: techToName[id]}));
+    public readonly techAll = TECHNOLOGIES.map(id => ({ id, name: techToName[id] }));
 
     constructor(
         private readonly widgetService: IWidgetService,
@@ -40,7 +42,7 @@ export class CreateWidget {
 
         validation.rules["customWidgetNameInUse"] = {
             validator: (displayName: string) =>
-                !this.configs.find(({name}) => name === displayNameToName(displayName)),
+                !this.configs.find(({ name }) => name === displayNameToName(displayName)),
             message: (displayName: string) =>
                 `A widget with alphanumerical signature '${displayNameToName(displayName)}' already exists.`
         };
@@ -90,8 +92,7 @@ export class CreateWidget {
 
         if (this.configs.find((config) => config.name === name)) return;
 
-        const config: TCustomWidgetConfig = {name, displayName, technology};
-        // const configDeploy = await buildConfigDeploy();
+        const config: TCustomWidgetConfig = { name, displayName, technology };
 
         const content = Utils.stringToUnit8Array(JSON.stringify(config));
         await this.blobStorage.uploadBlob(buildBlobConfigPath(name), content);
@@ -101,12 +102,26 @@ export class CreateWidget {
         await this.blobStorage.uploadBlob(`/${dataPath}index.html`, fallbackUiUnit8);
         await this.blobStorage.uploadBlob(`/${dataPath}editor.html`, fallbackUiUnit8);
 
-        this.widgetService.registerWidgetHandler(new CustomWidgetHandlers(config));
+        this.widgetService.registerWidget(name, {
+            modelDefinition: CustomWidgetModel,
+            componentBinder: KnockoutComponentBinder,
+            componentDefinition: CustomWidgetViewModel,
+            modelBinder: CustomWidgetModelBinder,
+            viewModelBinder: CustomWidgetViewModelBinder
+        });
+
+        this.widgetService.registerWidgetEditor(name, {
+            displayName: displayName,
+            category: widgetCategory,
+            iconClass: "widget-icon widget-icon-component",
+            componentBinder: KnockoutComponentBinder,
+            componentDefinition: CustomWidgetEditorViewModel,
+            handlerComponent: new CustomWidgetHandlers(config)
+        });
+
         this.configs.push(config);
         this.configAdd(config);
-
         this.configNew(config);
-
         this.logCreateWidget(config)
     }
 
@@ -124,11 +139,11 @@ export class CreateWidget {
         this.logDeleteWidget(this.config);
     }
 
-    public logCreateWidget(config: {name: string, displayName: string, technology: ScaffoldTech}): void {
+    public logCreateWidget(config: { name: string, displayName: string, technology: ScaffoldTech }): void {
         this.logger.trackEvent("CustomWidgetCreate", config);
     }
 
-    public logDeleteWidget(config: {name: string, displayName: string, technology: ScaffoldTech}): void {
+    public logDeleteWidget(config: { name: string, displayName: string, technology: ScaffoldTech }): void {
         this.logger.trackEvent("CustomWidgetDelete", config);
     }
 }