Created selfServe landing page (#444)

* Portal changes for DedicatedGateway

Changes to support creation and deletion of DedicatedGateway resource.

Tested locally with various scenarios.

* Portal changes for DedicatedGateway. CR feedback

* Stylecop changes

* created selfServe.html landing page

* Removing TODO comments

* exposed baselineValues

* added getOnSaveNotification

* disable UI when onSave is taking place

* minro edits

* made polling optional

* added optional polling

* added default

* Added portal notifications

* merged more changes

* minor edits

* added label for description

* Added correlationids and polling of refresh

* Added correlationids and polling of refresh

* minor edit

* added label tooltip

* removed ClassInfo decorator

* Added dynamic decription

* added info and warninf types for description

* more changes to promise retry

* promise retry changes

* added spinner on selfserve load

* compile errors fixed

* New changes

* added operationstatus link

* merged sqlxEdits

* undid sqlx changes

* added completed notification

* passed retryInterval in notif options

* more retry changes

* more changes

* added polling on landing on the page

* edits for error display

* added keys blade link

* added link generation

* added link to blade

* Modified info and description

* fixed format errors

* added selfserve contract to output files

* addressed PR comments

Co-authored-by: Balaji Sridharan <fnbalaji@microsoft.com>
Co-authored-by: fnbalaji <75445927+fnbalaji@users.noreply.github.com>

src/SelfServe/SelfServe.less

@@ -0,0 +1,16 @@
+.selfServeComponentContainer {
+  text-transform: none;
+  line-height: 1.28581;
+  letter-spacing: 0;
+  font-size: 14px;
+  font-weight: 400;
+  color: #182026;
+  height: 100%;
+  min-height: 100vh;
+  width: 100%;
+  background-color: #FFFFFF;
+}
+
+body {
+  margin: 0;
+}

src/SelfServe/SelfServe.tsx

@@ -0,0 +1,92 @@
+import * as React from "react";
+import ReactDOM from "react-dom";
+import { sendMessage } from "../Common/MessageHandler";
+import { isInvalidParentFrameOrigin } from "../Utils/MessageValidation";
+import { SelfServeComponent } from "./SelfServeComponent";
+import { SelfServeDescriptor } from "./SelfServeTypes";
+import { SelfServeType } from "./SelfServeUtils";
+import { SelfServeFrameInputs } from "../Contracts/ViewModels";
+import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
+import { configContext, updateConfigContext } from "../ConfigContext";
+import { normalizeArmEndpoint } from "../Common/EnvironmentUtility";
+import { updateUserContext } from "../UserContext";
+import "./SelfServe.less";
+import { Spinner, SpinnerSize } from "office-ui-fabric-react";
+initializeIcons();
+
+const getDescriptor = async (selfServeType: SelfServeType): Promise<SelfServeDescriptor> => {
+  switch (selfServeType) {
+    case SelfServeType.example: {
+      const SelfServeExample = await import(/* webpackChunkName: "SelfServeExample" */ "./Example/SelfServeExample");
+      return new SelfServeExample.default().toSelfServeDescriptor();
+    }
+    case SelfServeType.sqlx: {
+      const SqlX = await import(/* webpackChunkName: "SqlX" */ "./SqlX/SqlX");
+      return new SqlX.default().toSelfServeDescriptor();
+    }
+    default:
+      return undefined;
+  }
+};
+
+const renderComponent = (selfServeDescriptor: SelfServeDescriptor): JSX.Element => {
+  if (!selfServeDescriptor) {
+    return <h1>Invalid self serve type!</h1>;
+  }
+  return <SelfServeComponent descriptor={selfServeDescriptor} />;
+};
+
+const renderSpinner = (): JSX.Element => {
+  return <Spinner size={SpinnerSize.large}></Spinner>;
+};
+
+const handleMessage = async (event: MessageEvent): Promise<void> => {
+  if (isInvalidParentFrameOrigin(event)) {
+    return;
+  }
+
+  if (event.data["signature"] !== "pcIframe") {
+    return;
+  }
+
+  if (typeof event.data !== "object") {
+    return;
+  }
+
+  const inputs = event.data.data.inputs as SelfServeFrameInputs;
+  if (!inputs) {
+    return;
+  }
+
+  const urlSearchParams = new URLSearchParams(window.location.search);
+  const selfServeTypeText = inputs.selfServeType || urlSearchParams.get("selfServeType");
+  const selfServeType = SelfServeType[selfServeTypeText?.toLowerCase() as keyof typeof SelfServeType];
+  if (
+    !inputs.subscriptionId ||
+    !inputs.resourceGroup ||
+    !inputs.databaseAccount ||
+    !inputs.authorizationToken ||
+    !inputs.csmEndpoint ||
+    !selfServeType
+  ) {
+    return;
+  }
+
+  updateConfigContext({
+    ARM_ENDPOINT: normalizeArmEndpoint(inputs.csmEndpoint || configContext.ARM_ENDPOINT),
+  });
+
+  updateUserContext({
+    authorizationToken: inputs.authorizationToken,
+    databaseAccount: inputs.databaseAccount,
+    resourceGroup: inputs.resourceGroup,
+    subscriptionId: inputs.subscriptionId,
+  });
+
+  const descriptor = await getDescriptor(selfServeType);
+  ReactDOM.render(renderComponent(descriptor), document.getElementById("selfServeContent"));
+};
+
+ReactDOM.render(renderSpinner(), document.getElementById("selfServeContent"));
+window.addEventListener("message", handleMessage, false);
+sendMessage("ready");

src/SelfServe/SelfServeComponentAdapter.tsx

@@ -1,56 +0,0 @@
-/**
- * This adapter is responsible to render the React component
- * If the component signals a change through the callback passed in the properties, it must render the React component when appropriate
- * and update any knockout observables passed from the parent.
- */
-import * as ko from "knockout";
-import * as React from "react";
-import { ReactAdapter } from "../Bindings/ReactBindingHandler";
-import Explorer from "../Explorer/Explorer";
-import { SelfServeComponent } from "./SelfServeComponent";
-import { SelfServeDescriptor } from "./SelfServeTypes";
-import { SelfServeType } from "./SelfServeUtils";
-
-export class SelfServeComponentAdapter implements ReactAdapter {
-  public parameters: ko.Observable<SelfServeDescriptor>;
-  public container: Explorer;
-
-  constructor(container: Explorer) {
-    this.container = container;
-    this.parameters = ko.observable(undefined);
-    this.container.selfServeType.subscribe(() => {
-      this.triggerRender();
-    });
-  }
-
-  public static getDescriptor = async (selfServeType: SelfServeType): Promise<SelfServeDescriptor> => {
-    switch (selfServeType) {
-      case SelfServeType.example: {
-        const SelfServeExample = await import(/* webpackChunkName: "SelfServeExample" */ "./Example/SelfServeExample");
-        return new SelfServeExample.default().toSelfServeDescriptor();
-      }
-      case SelfServeType.sqlx: {
-        const SqlX = await import(/* webpackChunkName: "SqlX" */ "./SqlX/SqlX");
-        return new SqlX.default().toSelfServeDescriptor();
-      }
-      default:
-        return undefined;
-    }
-  };
-
-  public renderComponent(): JSX.Element {
-    if (this.container.selfServeType() === SelfServeType.invalid) {
-      return <h1>Invalid self serve type!</h1>;
-    }
-    const smartUiDescriptor = this.parameters();
-    return smartUiDescriptor ? <SelfServeComponent descriptor={smartUiDescriptor} /> : <></>;
-  }
-
-  private triggerRender() {
-    window.requestAnimationFrame(async () => {
-      const selfServeType = this.container.selfServeType();
-      const smartUiDescriptor = await SelfServeComponentAdapter.getDescriptor(selfServeType);
-      this.parameters(smartUiDescriptor);
-    });
-  }
-}

src/SelfServe/SelfServeLoadingComponentAdapter.tsx

@@ -1,25 +0,0 @@
-/**
- * This adapter is responsible to render the React component
- * If the component signals a change through the callback passed in the properties, it must render the React component when appropriate
- * and update any knockout observables passed from the parent.
- */
-import * as ko from "knockout";
-import { Spinner, SpinnerSize } from "office-ui-fabric-react";
-import * as React from "react";
-import { ReactAdapter } from "../Bindings/ReactBindingHandler";
-
-export class SelfServeLoadingComponentAdapter implements ReactAdapter {
-  public parameters: ko.Observable<number>;
-
-  constructor() {
-    this.parameters = ko.observable(Date.now());
-  }
-
-  public renderComponent(): JSX.Element {
-    return <Spinner size={SpinnerSize.large} />;
-  }
-
-  private triggerRender() {
-    window.requestAnimationFrame(() => this.renderComponent());
-  }
-}

src/SelfServe/selfServe.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="selfServeViewport" content="height=device-height, width=device-width, initial-scale=1.0" />
+    <title>Self Serve</title>
+    <link rel="shortcut icon" href="images/CosmosDB_rgb_ui_lighttheme.ico" type="image/x-icon" />
+  </head>
+
+  <body>
+    <div class="selfServeComponentContainer" id="selfServeContent"></div>
+  </body>
+</html>