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>
2025-12-21 01:41:31 +00:00 · 2021-03-10 13:55:05 -08:00
parent b85a20cbea
commit 1d98c83be5
14 changed files with 160 additions and 170 deletions
--- a/src/SelfServe/SelfServe.tsx
+++ b/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");