Autoscale min/max UX changes (#2162)

* master pull * Better VSCode detection * Prettier run * Update .npmrc * Update settings.json * Fixed ESLint error * Changed the VSCode detection to a test url that will not open if successful * Initial UX changes to Add Collection Panel * Removing changes from other branch * Reverting explorer changes * Snapshot updates and Lint fixes * Formatting fixes * Setting separator spacing the same * Update test snapshot * Reverting Manual to old UI
2025-12-27 12:51:41 +00:00 · 2025-06-04 10:40:57 -04:00
parent d7bdd0032e
commit 64533b445f
7 changed files with 2040 additions and 829 deletions
--- a/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx
+++ b/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx
@@ -25,7 +25,7 @@ import { FullTextPoliciesComponent } from "Explorer/Controls/FullTextSeach/FullT
 import { VectorEmbeddingPoliciesComponent } from "Explorer/Controls/VectorSearch/VectorEmbeddingPoliciesComponent";
 import {
  AllPropertiesIndexed,
-  AnalyticalStorageContent,
+  AnalyticalStoreHeader,
  ContainerVectorPolicyTooltipContent,
  FullTextPolicyDefault,
  getPartitionKey,
@@ -265,7 +265,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,

        <div className="panelMainContent">
          {!(isFabricNative() && this.props.databaseId !== undefined) && (
-            <Stack hidden={userContext.apiType === "Tables"}>
+            <Stack hidden={userContext.apiType === "Tables"} style={{ marginBottom: -2 }}>
              <Stack horizontal>
                <span className="mandatoryStar">*&nbsp;</span>
                <Text className="panelTextBold" variant="small">
@@ -407,12 +407,12 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                  responsiveMode={999}
                />
              )}
-              <Separator className="panelSeparator" />
            </Stack>
          )}
+          <Separator className="panelSeparator" style={{ marginTop: -4, marginBottom: -4 }} />

          <Stack>
-            <Stack horizontal>
+            <Stack horizontal style={{ marginTop: -5, marginBottom: 1 }}>
              <span className="mandatoryStar">*&nbsp;</span>
              <Text className="panelTextBold" variant="small">
                {`${getCollectionName()} id`}
@@ -450,10 +450,10 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
              }
            />
          </Stack>
-
+          <Separator className="panelSeparator" style={{ marginTop: -5, marginBottom: -5 }} />
          {this.shouldShowIndexingOptionsForFreeTierAccount() && (
            <Stack>
-              <Stack horizontal>
+              <Stack horizontal style={{ marginTop: -4, marginBottom: -5 }}>
                <span className="mandatoryStar">*&nbsp;</span>
                <Text className="panelTextBold" variant="small">
                  Indexing
@@ -499,7 +499,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
            (!this.state.isSharedThroughputChecked ||
              this.props.explorer.isFixedCollectionWithSharedThroughputSupported()) && (
              <Stack>
-                <Stack horizontal>
+                <Stack horizontal style={{ marginTop: -5, marginBottom: -4 }}>
                  <span className="mandatoryStar">*&nbsp;</span>
                  <Text className="panelTextBold" variant="small">
                    Sharding
@@ -555,7 +555,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,

          {this.state.isSharded && (
            <Stack>
-              <Stack horizontal>
+              <Stack horizontal style={{ marginTop: -5, marginBottom: -4 }}>
                <span className="mandatoryStar">*&nbsp;</span>
                <Text className="panelTextBold" variant="small">
                  {getPartitionKeyName()}
@@ -599,7 +599,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
              {userContext.apiType === "SQL" &&
                this.state.subPartitionKeys.map((subPartitionKey: string, index: number) => {
                  return (
-                    <Stack style={{ marginBottom: 8 }} key={`uniqueKey${index}`} horizontal>
+                    <Stack style={{ marginBottom: 2, marginTop: -5 }} key={`uniqueKey${index}`} horizontal>
                      <div
                        style={{
                          width: "20px",
@@ -667,6 +667,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                  )}
                </Stack>
              )}
+              <Separator className="panelSeparator" style={{ marginTop: 2, marginBottom: -4 }} />
            </Stack>
          )}

@@ -727,7 +728,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
          )}

          {!isFabricNative() && userContext.apiType === "SQL" && (
-            <Stack>
+            <Stack style={{ marginTop: -2, marginBottom: -4 }}>
              {UniqueKeysHeader()}
              {this.state.uniqueKeys.map((uniqueKey: string, i: number): JSX.Element => {
                return (
@@ -776,10 +777,12 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
            </Stack>
          )}

+          <Separator className="panelSeparator" style={{ marginTop: -15, marginBottom: -4 }} />
+
          {shouldShowAnalyticalStoreOptions() && (
-            <Stack className="panelGroupSpacing">
+            <Stack className="panelGroupSpacing" style={{ marginTop: -4 }}>
              <Text className="panelTextBold" variant="small">
-                {AnalyticalStorageContent()}
+                {AnalyticalStoreHeader()}
              </Text>

              <Stack horizontal verticalAlign="center">
@@ -820,7 +823,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                <Stack className="panelGroupSpacing">
                  <Text variant="small">
                    Azure Synapse Link is required for creating an analytical store{" "}
-                    {getCollectionName().toLocaleLowerCase()}. Enable Synapse Link for this Cosmos DB account.{" "}
+                    {getCollectionName().toLocaleLowerCase()}. Enable Synapse Link for this Cosmos DB account. <br />
                    <Link
                      href="https://aka.ms/cosmosdb-synapselink"
                      target="_blank"
--- a/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanelUtility.tsx
+++ b/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanelUtility.tsx
@@ -73,7 +73,7 @@ export function UniqueKeysHeader(): JSX.Element {
    "Unique keys provide developers with the ability to add a layer of data integrity to their database. By creating a unique key policy when a container is created, you ensure the uniqueness of one or more values per partition key.";

  return (
-    <Stack horizontal>
+    <Stack horizontal style={{ marginBottom: -2 }}>
      <Text className="panelTextBold" variant="small">
        Unique keys
      </Text>
@@ -98,6 +98,21 @@ export function shouldShowAnalyticalStoreOptions(): boolean {
  }
 }

+export function AnalyticalStoreHeader(): JSX.Element {
+  const tooltipContent =
+    "Enable analytical store capability to perform near real-time analytics on your operational data, without impacting the performance of transactional workloads.";
+  return (
+    <Stack horizontal style={{ marginBottom: -2 }}>
+      <Text className="panelTextBold" variant="small">
+        Analytical Store
+      </Text>
+      <TooltipHost directionalHint={DirectionalHint.bottomLeftEdge} content={tooltipContent}>
+        <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} ariaLabel={tooltipContent} />
+      </TooltipHost>
+    </Stack>
+  );
+}
+
 export function AnalyticalStorageContent(): JSX.Element {
  return (
    <Text variant="small">
--- a/src/Explorer/Panes/AddCollectionPanel/snapshots/AddCollectionPanel.test.tsx.snap
+++ b/src/Explorer/Panes/AddCollectionPanel/snapshots/AddCollectionPanel.test.tsx.snap
@@ -11,6 +11,11 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
  >
    <Stack
      hidden={false}
+      style={
+        {
+          "marginBottom": -2,
+        }
+      }
    >
      <Stack
        horizontal={true}
@@ -138,13 +143,25 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
          </StyledTooltipHostBase>
        </Stack>
      </Stack>
-      <Separator
-        className="panelSeparator"
-      />
    </Stack>
+    <Separator
+      className="panelSeparator"
+      style={
+        {
+          "marginBottom": -4,
+          "marginTop": -4,
+        }
+      }
+    />
    <Stack>
      <Stack
        horizontal={true}
+        style={
+          {
+            "marginBottom": 1,
+            "marginTop": -5,
+          }
+        }
      >
        <span
          className="mandatoryStar"
@@ -187,9 +204,24 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
        value=""
      />
    </Stack>
+    <Separator
+      className="panelSeparator"
+      style={
+        {
+          "marginBottom": -5,
+          "marginTop": -5,
+        }
+      }
+    />
    <Stack>
      <Stack
        horizontal={true}
+        style={
+          {
+            "marginBottom": -4,
+            "marginTop": -5,
+          }
+        }
      >
        <span
          className="mandatoryStar"
@@ -254,6 +286,15 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
          Add hierarchical partition key
        </CustomizedDefaultButton>
      </Stack>
+      <Separator
+        className="panelSeparator"
+        style={
+          {
+            "marginBottom": -4,
+            "marginTop": 2,
+          }
+        }
+      />
    </Stack>
    <ThroughputInput
      isDatabase={false}
@@ -263,9 +304,21 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
      setIsThroughputCapExceeded={[Function]}
      setThroughputValue={[Function]}
    />
-    <Stack>
+    <Stack
+      style={
+        {
+          "marginBottom": -4,
+          "marginTop": -2,
+        }
+      }
+    >
      <Stack
        horizontal={true}
+        style={
+          {
+            "marginBottom": -2,
+          }
+        }
      >
        <Text
          className="panelTextBold"
@@ -306,26 +359,53 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
        Add unique key
      </CustomizedActionButton>
    </Stack>
+    <Separator
+      className="panelSeparator"
+      style={
+        {
+          "marginBottom": -4,
+          "marginTop": -15,
+        }
+      }
+    />
    <Stack
      className="panelGroupSpacing"
+      style={
+        {
+          "marginTop": -4,
+        }
+      }
    >
      <Text
        className="panelTextBold"
        variant="small"
      >
-        <Text
-          variant="small"
+        <Stack
+          horizontal={true}
+          style={
+            {
+              "marginBottom": -2,
+            }
+          }
        >
-          Enable analytical store capability to perform near real-time analytics on your operational data, without impacting the performance of transactional workloads.
-           
-          <StyledLinkBase
-            aria-label="Learn more about analytical store."
-            href="https://aka.ms/analytical-store-overview"
-            target="_blank"
+          <Text
+            className="panelTextBold"
+            variant="small"
          >
-            Learn more
-          </StyledLinkBase>
-        </Text>
+            Analytical Store
+          </Text>
+          <StyledTooltipHostBase
+            content="Enable analytical store capability to perform near real-time analytics on your operational data, without impacting the performance of transactional workloads."
+            directionalHint={4}
+          >
+            <Icon
+              ariaLabel="Enable analytical store capability to perform near real-time analytics on your operational data, without impacting the performance of transactional workloads."
+              className="panelInfoIcon"
+              iconName="Info"
+              tabIndex={0}
+            />
+          </StyledTooltipHostBase>
+        </Stack>
      </Text>
      <Stack
        horizontal={true}
@@ -381,8 +461,8 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
          Azure Synapse Link is required for creating an analytical store
           
          container
-          . Enable Synapse Link for this Cosmos DB account.
-           
+          . Enable Synapse Link for this Cosmos DB account. 
+          <br />
          <StyledLinkBase
            aria-label="Learn more about Azure Synapse Link."
            className="capacitycalculator-link"