renamed sqlx->example and added invalid type

src/Explorer/Controls/SmartUi/SmartUiComponent.tsx

@@ -517,7 +517,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
         </Stack>
       </Stack>
     ) : (
-      <Spinner size={SpinnerSize.large} />
+      <Spinner size={SpinnerSize.large} styles={{root: {textAlign: "center", justifyContent: "center", width: "100%", height: "100%"}}}/>
     );
   }
 }

src/Explorer/Explorer.ts

@@ -1864,7 +1864,8 @@ export default class Explorer {
   public setSelfServeType(inputs: ViewModels.DataExplorerInputsFrame): void {
     const selfServeTypeForTest = inputs.features[Constants.Features.selfServeTypeForTest]
     if (selfServeTypeForTest) {
-      this.selfServeType(SelfServeTypes[selfServeTypeForTest?.toLowerCase() as keyof typeof SelfServeTypes])
+      const selfServeType = SelfServeTypes[selfServeTypeForTest?.toLowerCase() as keyof typeof SelfServeTypes]
+      this.selfServeType(selfServeType ? selfServeType : SelfServeTypes.invalid)
     } else if (inputs.selfServeType) {
       this.selfServeType(inputs.selfServeType)
     } else {

src/Main.tsx

@@ -126,7 +126,7 @@ const App: React.FunctionComponent = () => {
 
   return (
     <div className="flexContainer">
-      <div id="divSelfServe" data-bind="visible: selfServeType() && selfServeType() !== 'none', react: selfServeComponentAdapter">
+      <div id="divSelfServe" className="flexContainer" data-bind="visible: selfServeType() && selfServeType() !== 'none', react: selfServeComponentAdapter">
       </div>
       <div id="divExplorer" className="flexContainer hideOverflows" style={{ display: "none" }}>
         {/* Main Command Bar - Start */}
@@ -375,7 +375,7 @@ const App: React.FunctionComponent = () => {
       {/* Global loader - Start */}
       <div className="splashLoaderContainer" data-bind="visible: isRefreshingExplorer">
         <div className="splashLoaderContentContainer">
-          <div className="splashLoaderTitle" data-bind="visible: selfServeType() === undefined, react: selfServeLoadingComponentAdapter">
+          <div data-bind="visible: selfServeType() === undefined, react: selfServeLoadingComponentAdapter">
           </div>
           <p className="connectExplorerContent" id="explorerConnectingImage" data-bind="visible: selfServeType() === 'none'">
           </p>

src/SelfServe/Example/Example.tsx

@@ -13,26 +13,26 @@ import {
 import { SmartUi, ClassInfo, OnSubmit, Initialize } from "../ClassDescriptors";
 import {
   getPromise,
-  initializeSqlX,
+  initializeSelfServeExample,
   instanceSizeInfo,
   instanceSizeOptions,
   onInstanceCountChange,
   onSubmit,
   renderText,
   Sizes,
-  sqlXInfo
-} from "./SqlXApis";
+  selfServeExampleInfo
+} from "./ExampleApis";
 import { SelfServeBase } from "../SelfServeUtils";
 import { ChoiceItem } from "../../Explorer/Controls/SmartUi/SmartUiComponent";
 
 @SmartUi()
-@ClassInfo(getPromise(sqlXInfo))
-@Initialize(initializeSqlX)
+@ClassInfo(getPromise(selfServeExampleInfo))
+@Initialize(initializeSelfServeExample)
 @OnSubmit(onSubmit)
-export class SqlX extends SelfServeBase {
+export class SelfServeExample extends SelfServeBase {
 
   @Label(getPromise("Description"))
-  @CustomElement(renderText("This is the description part of SqlX"))
+  @CustomElement(renderText("This is the description."))
   static description: string;
 
   @Label(getPromise("Instance Size"))
@@ -42,7 +42,7 @@ export class SqlX extends SelfServeBase {
   static instanceSize: ChoiceItem;
 
   @Label(getPromise("About"))
-  @CustomElement(renderText("This is the about part of SqlX"))
+  @CustomElement(renderText("This is the about ."))
   static about: string;
 
   @Label("Feature Allowed")

src/SelfServe/Example/ExampleApis.tsx

@@ -1,7 +1,6 @@
-import { Text } from "office-ui-fabric-react";
 import React from "react";
 import { ChoiceItem, Info, InputType } from "../../Explorer/Controls/SmartUi/SmartUiComponent";
-import { TextComponent } from "./TextComponent";
+import { TextComponent } from "./CustomComponent";
 import {SessionStorageUtility} from "../../Shared/StorageUtility"
 
 export enum Sizes {
@@ -16,8 +15,8 @@ export const instanceSizeOptions: ChoiceItem[] = [
   { label: Sizes.FourCore16Gb, key: Sizes.FourCore16Gb, value: Sizes.FourCore16Gb }
 ];
 
-export const sqlXInfo: Info = {
-  message: "SqlX is a self serve class"
+export const selfServeExampleInfo: Info = {
+  message: "This is a self serve class"
 };
 
 export const instanceSizeInfo: Info = {
@@ -53,7 +52,7 @@ export const onSubmit = async (currentValues: Map<string, InputType>): Promise<v
   SessionStorageUtility.setEntry("isAllowed", currentValues.get("isAllowed")?.toString())
 };
 
-export const initializeSqlX = async () : Promise<Map<string, InputType>> => {
+export const initializeSelfServeExample = async () : Promise<Map<string, InputType>> => {
   let defaults = new Map<string, InputType>()
   defaults.set("instanceCount",  parseInt(SessionStorageUtility.getEntry("instanceCount")))
   defaults.set("instanceSize",  SessionStorageUtility.getEntry("instanceSize"))

src/SelfServe/SelfServeComponentAdapter.tsx

@@ -9,7 +9,7 @@ import { ReactAdapter } from "../Bindings/ReactBindingHandler";
 import Explorer from "../Explorer/Explorer";
 import { Descriptor, SmartUiComponent } from "../Explorer/Controls/SmartUi/SmartUiComponent";
 import { SelfServeTypes } from "./SelfServeUtils";
-import { SqlX } from "./SqlX/SqlX";
+import { SelfServeExample } from "./Example/Example";
 
 export class SelfServeComponentAdapter implements ReactAdapter {
   public parameters: ko.Observable<number>;
@@ -23,8 +23,8 @@ export class SelfServeComponentAdapter implements ReactAdapter {
 
   private getDescriptor = (selfServeType : SelfServeTypes) : Descriptor => {
     switch (selfServeType) {
-      case SelfServeTypes.sqlx:
-        return SqlX.toSmartUiDescriptor()
+      case SelfServeTypes.example:
+        return SelfServeExample.toSmartUiDescriptor()
       default:
         return undefined;
     }
@@ -39,7 +39,6 @@ export class SelfServeComponentAdapter implements ReactAdapter {
       <SmartUiComponent descriptor={smartUiDescriptor} /> :
       <h1>Invalid self serve type!</h1>
   
-  
     return element
   }
 

src/SelfServe/SelfServeUtils.tsx

@@ -198,7 +198,8 @@ const getInput = (value: CommonInputTypes): AnyInput => {
 
 export enum SelfServeTypes {
   none="none",
-  sqlx="sqlx"
+  invalid="invalid",
+  example="example"
 }
 
 export const getSelfServeType = (search: string): SelfServeTypes => {