Vnext emulator fix (#2213)

* Added feature flags to the components

* Remove config.json

src/ConfigContext.ts

@@ -216,7 +216,7 @@ export async function initializeConfiguration(): Promise<ConfigContext> {
       const AAD_ENDPOINT = params.get("aadEndpoint") || "";
       updateConfigContext({ AAD_ENDPOINT });
     }
-    if (params.has("platform")) {
+    if (params.has("platform") && configContext.platform !== Platform.VNextEmulator) {
       const platform = params.get("platform");
       switch (platform) {
         default:
@@ -226,7 +226,6 @@ export async function initializeConfiguration(): Promise<ConfigContext> {
         case Platform.Fabric:
         case Platform.Hosted:
         case Platform.Emulator:
-        case Platform.VNextEmulator:
           updateConfigContext({ platform });
       }
     }

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -1336,7 +1336,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       });
     }
 
-    if (this.shouldShowComputedPropertiesEditor) {
+    if (isFeatureSupported(PlatformFeature.ComputedProperties) && this.shouldShowComputedPropertiesEditor) {
       tabs.push({
         tab: SettingsV2TabTypes.ComputedPropertiesTab,
         content: <ComputedPropertiesComponent {...computedPropertiesComponentProps} />,

src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx

@@ -728,7 +728,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
             />
           )}
 
-          {!isFabricNative() && userContext.apiType === "SQL" && (
+          {isFeatureSupported(PlatformFeature.UniqueKeys) && !isFabricNative() && userContext.apiType === "SQL" && (
             <Stack style={{ marginTop: -2, marginBottom: -4 }}>
               {UniqueKeysHeader()}
               {this.state.uniqueKeys.map((uniqueKey: string, i: number): JSX.Element => {
@@ -901,78 +901,86 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
               </CollapsibleSectionComponent>
             </Stack>
           )}
-          {!isFabricNative() && userContext.apiType !== "Tables" && (
+          {isFeatureSupported(PlatformFeature.AdvancedContainerSettings) &&
-            <CollapsibleSectionComponent
+            !isFabricNative() &&
-              title="Advanced"
+            userContext.apiType !== "Tables" && (
-              isExpandedByDefault={false}
+              <CollapsibleSectionComponent
-              onExpand={() => {
+                title="Advanced"
-                TelemetryProcessor.traceOpen(Action.ExpandAddCollectionPaneAdvancedSection);
+                isExpandedByDefault={false}
-                scrollToSection("collapsibleAdvancedSectionContent");
+                onExpand={() => {
-              }}
+                  TelemetryProcessor.traceOpen(Action.ExpandAddCollectionPaneAdvancedSection);
-            >
+                  scrollToSection("collapsibleAdvancedSectionContent");
-              <Stack className="panelGroupSpacing" id="collapsibleAdvancedSectionContent">
+                }}
-                {isCapabilityEnabled("EnableMongo") && !isCapabilityEnabled("EnableMongo16MBDocumentSupport") && (
+              >
-                  <Stack className="panelGroupSpacing">
+                <Stack className="panelGroupSpacing" id="collapsibleAdvancedSectionContent">
-                    <Stack horizontal>
+                  {isCapabilityEnabled("EnableMongo") && !isCapabilityEnabled("EnableMongo16MBDocumentSupport") && (
-                      <span className="mandatoryStar">*&nbsp;</span>
+                    <Stack className="panelGroupSpacing">
-                      <Text className="panelTextBold" variant="small">
+                      <Stack horizontal>
-                        Indexing
+                        <span className="mandatoryStar">*&nbsp;</span>
-                      </Text>
+                        <Text className="panelTextBold" variant="small">
-                      <TooltipHost
+                          Indexing
-                        directionalHint={DirectionalHint.bottomLeftEdge}
+                        </Text>
-                        content="The _id field is indexed by default. Creating a wildcard index for all fields will optimize queries and is recommended for development."
+                        <TooltipHost
-                      >
+                          directionalHint={DirectionalHint.bottomLeftEdge}
-                        <Icon
+                          content="The _id field is indexed by default. Creating a wildcard index for all fields will optimize queries and is recommended for development."
-                          iconName="Info"
+                        >
-                          className="panelInfoIcon"
+                          <Icon
-                          tabIndex={0}
+                            iconName="Info"
-                          ariaLabel="The _id field is indexed by default. Creating a wildcard index for all fields will optimize queries and is recommended for development."
+                            className="panelInfoIcon"
-                        />
+                            tabIndex={0}
-                      </TooltipHost>
+                            ariaLabel="The _id field is indexed by default. Creating a wildcard index for all fields will optimize queries and is recommended for development."
+                          />
+                        </TooltipHost>
+                      </Stack>
+
+                      <Checkbox
+                        label="Create a Wildcard Index on all fields"
+                        checked={this.state.createMongoWildCardIndex}
+                        styles={{
+                          text: { fontSize: 12 },
+                          checkbox: { width: 12, height: 12 },
+                          label: { padding: 0, alignItems: "center" },
+                        }}
+                        onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
+                          this.setState({ createMongoWildCardIndex: isChecked })
+                        }
+                      />
                     </Stack>
+                  )}
 
-                    <Checkbox
+                  {userContext.apiType === "SQL" && (
-                      label="Create a Wildcard Index on all fields"
+                    <Stack className="panelGroupSpacing">
-                      checked={this.state.createMongoWildCardIndex}
+                      <Checkbox
-                      styles={{
+                        label="My application uses an older Cosmos .NET or Java SDK version (.NET V1 or Java V2)"
-                        text: { fontSize: 12 },
+                        checked={this.state.useHashV1}
-                        checkbox: { width: 12, height: 12 },
+                        styles={{
-                        label: { padding: 0, alignItems: "center" },
+                          text: { fontSize: 12 },
-                      }}
+                          checkbox: { width: 12, height: 12 },
-                      onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
+                          label: {
-                        this.setState({ createMongoWildCardIndex: isChecked })
+                            padding: 0,
-                      }
+                            alignItems: "center",
-                    />
+                            wordWrap: "break-word",
-                  </Stack>
+                            whiteSpace: "break-spaces",
-                )}
+                          },
-
+                        }}
-                {userContext.apiType === "SQL" && (
+                        onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
-                  <Stack className="panelGroupSpacing">
+                          this.setState({ useHashV1: isChecked, subPartitionKeys: [] })
-                    <Checkbox
+                        }
-                      label="My application uses an older Cosmos .NET or Java SDK version (.NET V1 or Java V2)"
+                      />
-                      checked={this.state.useHashV1}
+                      <Text variant="small">
-                      styles={{
+                        <Icon iconName="InfoSolid" className="removeIcon" /> To ensure compatibility with older SDKs,
-                        text: { fontSize: 12 },
+                        the created container will use a legacy partitioning scheme that supports partition key values
-                        checkbox: { width: 12, height: 12 },
+                        of size only up to 101 bytes. If this is enabled, you will not be able to use hierarchical
-                        label: { padding: 0, alignItems: "center", wordWrap: "break-word", whiteSpace: "break-spaces" },
+                        partition keys.{" "}
-                      }}
+                        <Link href="https://aka.ms/cosmos-large-pk" target="_blank">
-                      onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
+                          Learn more
-                        this.setState({ useHashV1: isChecked, subPartitionKeys: [] })
+                        </Link>
-                      }
+                      </Text>
-                    />
+                    </Stack>
-                    <Text variant="small">
+                  )}
-                      <Icon iconName="InfoSolid" className="removeIcon" /> To ensure compatibility with older SDKs, the
+                </Stack>
-                      created container will use a legacy partitioning scheme that supports partition key values of size
+              </CollapsibleSectionComponent>
-                      only up to 101 bytes. If this is enabled, you will not be able to use hierarchical partition keys.{" "}
+            )}
-                      <Link href="https://aka.ms/cosmos-large-pk" target="_blank">
-                        Learn more
-                      </Link>
-                    </Text>
-                  </Stack>
-                )}
-              </Stack>
-            </CollapsibleSectionComponent>
-          )}
         </div>
 
         <PanelFooterComponent buttonLabel="OK" isButtonDisabled={this.state.isThroughputCapExceeded} />
@@ -1135,6 +1143,10 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
   // }
 
   private shouldShowCollectionThroughputInput(): boolean {
+    if (!isFeatureSupported(PlatformFeature.ContainerThroughput)) {
+      return false;
+    }
+
     if (isServerlessAccount()) {
       return false;
     }

src/Utils/PlatformFeatureUtils.ts

@@ -29,6 +29,9 @@ export enum PlatformFeature {
   ThroughputBucketing = "ThroughputBucketing",
   ComputedProperties = "ComputedProperties",
   AnalyticalStore = "AnalyticalStore",
+  UniqueKeys = "UniqueKeys",
+  ContainerThroughput = "ContainerThroughput",
+  AdvancedContainerSettings = "AdvancedContainerSettings",
 
   // CRUD Operations - Database
   CreateDatabase = "CreateDatabase",