From 7dbccff41dca0fd3eed29bd358a674d0bcc4de16 Mon Sep 17 00:00:00 2001
From: MokireddySampath <120497218+MokireddySampath@users.noreply.github.com>
Date: Wed, 1 Feb 2023 22:20:03 +0530
Subject: [PATCH 1/3] fix for defect 1703851&1703931 (#1379)

---
 .../ThroughputInput/ThroughputInput.tsx       | 18 +++++++++++----
 .../ThroughputInput.test.tsx.snap             | 22 +++++++++++--------
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
index ab4c45c03..c4b3d936c 100644
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
@@ -186,6 +186,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
 
       <Stack horizontal verticalAlign="center">
         <input
+          id="Autoscale-input"
           className="throughputInputRadioBtn"
           aria-label="Autoscale mode"
           aria-required={true}
@@ -195,9 +196,12 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
           tabIndex={0}
           onChange={(e) => handleOnChangeMode(e, "Autoscale")}
         />
-        <span className="throughputInputRadioBtnLabel">Autoscale</span>
+        <label htmlFor="Autoscale-input" className="throughputInputRadioBtnLabel">
+          Autoscale
+        </label>
 
         <input
+          id="Manual-input"
           className="throughputInputRadioBtn"
           aria-label="Manual mode"
           checked={!isAutoscaleSelected}
@@ -207,14 +211,20 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
           tabIndex={0}
           onChange={(e) => handleOnChangeMode(e, "Manual")}
         />
-        <span className="throughputInputRadioBtnLabel">Manual</span>
+        <label className="throughputInputRadioBtnLabel" htmlFor="Manual-input">
+          Manual
+        </label>
       </Stack>
 
       {isAutoscaleSelected && (
         <Stack className="throughputInputSpacing">
-          <Text variant="small" aria-label="ruDescription">
+          <Text variant="small" aria-label="capacity calculator of azure cosmos db">
             Estimate your required RU/s with{" "}
-            <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/" aria-label="ruDescription">
+            <Link
+              target="_blank"
+              href="https://cosmos.azure.com/capacitycalculator/"
+              aria-label="capacity calculator of azure cosmos db"
+            >
               capacity calculator
             </Link>
             .
diff --git a/src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap b/src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap
index bfe811a96..587eee9dc 100644
--- a/src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap
+++ b/src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap
@@ -659,35 +659,39 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
           aria-required={true}
           checked={true}
           className="throughputInputRadioBtn"
+          id="Autoscale-input"
           key=".0:$.0"
           onChange={[Function]}
           role="radio"
           tabIndex={0}
           type="radio"
         />
-        <span
+        <label
           className="throughputInputRadioBtnLabel"
+          htmlFor="Autoscale-input"
           key=".0:$.1"
         >
           Autoscale
-        </span>
+        </label>
         <input
           aria-label="Manual mode"
           aria-required={true}
           checked={false}
           className="throughputInputRadioBtn"
+          id="Manual-input"
           key=".0:$.2"
           onChange={[Function]}
           role="radio"
           tabIndex={0}
           type="radio"
         />
-        <span
+        <label
           className="throughputInputRadioBtnLabel"
+          htmlFor="Manual-input"
           key=".0:$.3"
         >
           Manual
-        </span>
+        </label>
       </div>
     </Stack>
     <Stack
@@ -697,23 +701,23 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
         className="ms-Stack throughputInputSpacing css-59"
       >
         <Text
-          aria-label="ruDescription"
+          aria-label="capacity calculator of azure cosmos db"
           key=".0:$.0"
           variant="small"
         >
           <span
-            aria-label="ruDescription"
+            aria-label="capacity calculator of azure cosmos db"
             className="css-54"
           >
             Estimate your required RU/s with
              
             <StyledLinkBase
-              aria-label="ruDescription"
+              aria-label="capacity calculator of azure cosmos db"
               href="https://cosmos.azure.com/capacitycalculator/"
               target="_blank"
             >
               <LinkBase
-                aria-label="ruDescription"
+                aria-label="capacity calculator of azure cosmos db"
                 href="https://cosmos.azure.com/capacitycalculator/"
                 styles={[Function]}
                 target="_blank"
@@ -992,7 +996,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                 }
               >
                 <a
-                  aria-label="ruDescription"
+                  aria-label="capacity calculator of azure cosmos db"
                   className="ms-Link root-60"
                   href="https://cosmos.azure.com/capacitycalculator/"
                   onClick={[Function]}

From a827e79317c933b0d1c3ebeef6d5b0e4686ffb67 Mon Sep 17 00:00:00 2001
From: sunghyunkang1111 <114709653+sunghyunkang1111@users.noreply.github.com>
Date: Fri, 3 Feb 2023 10:15:35 -0600
Subject: [PATCH 2/3] remove feature flag and add preview text in the button
 (#1383)

---
 src/Explorer/Panes/AddCollectionPanel.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Explorer/Panes/AddCollectionPanel.tsx b/src/Explorer/Panes/AddCollectionPanel.tsx
index 9a49f3fcd..81c94f980 100644
--- a/src/Explorer/Panes/AddCollectionPanel.tsx
+++ b/src/Explorer/Panes/AddCollectionPanel.tsx
@@ -597,15 +597,15 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                     </Stack>
                   );
                 })}
-              {userContext.apiType === "SQL" && userContext.features.enableHierarchicalKeys && (
+              {userContext.apiType === "SQL" && (
                 <Stack className="panelGroupSpacing">
                   <DefaultButton
-                    styles={{ root: { padding: 0, width: 200, height: 30 }, label: { fontSize: 12 } }}
+                    styles={{ root: { padding: 0, width: 250, height: 30 }, label: { fontSize: 12 } }}
                     hidden={this.state.useHashV1}
                     disabled={this.state.subPartitionKeys.length >= Constants.BackendDefaults.maxNumMultiHashPartition}
                     onClick={() => this.setState({ subPartitionKeys: [...this.state.subPartitionKeys, ""] })}
                   >
-                    Add hierarchical partition key
+                    Add hierarchical partition key (preview)
                   </DefaultButton>
                   {this.state.subPartitionKeys.length > 0 && (
                     <Text variant="small">

From 850f1dfb974a8a3669934d96e9d886b7b9daa5f6 Mon Sep 17 00:00:00 2001
From: MokireddySampath <120497218+MokireddySampath@users.noreply.github.com>
Date: Sat, 4 Feb 2023 01:51:11 +0530
Subject: [PATCH 3/3] rework for defect-1704149 (#1384)

---
 src/Explorer/Panes/AddCollectionPanel.tsx     | 77 ++++++++++++++++---
 .../AddCollectionPanel.test.tsx.snap          |  6 ++
 2 files changed, 74 insertions(+), 9 deletions(-)

diff --git a/src/Explorer/Panes/AddCollectionPanel.tsx b/src/Explorer/Panes/AddCollectionPanel.tsx
index 81c94f980..73774ebbb 100644
--- a/src/Explorer/Panes/AddCollectionPanel.tsx
+++ b/src/Explorer/Panes/AddCollectionPanel.tsx
@@ -262,7 +262,14 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   true
                 ).toLocaleLowerCase()}.`}
               >
-                <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                <Icon
+                  iconName="Info"
+                  className="panelInfoIcon"
+                  tabIndex={0}
+                  ariaLabel={`A database is analogous to a namespace. It is the unit of management for a set of ${getCollectionName(
+                    true
+                  ).toLocaleLowerCase()}.`}
+                />
               </TooltipHost>
             </Stack>
 
@@ -338,7 +345,14 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                         true
                       ).toLocaleLowerCase()} within the database.`}
                     >
-                      <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                      <Icon
+                        iconName="Info"
+                        className="panelInfoIcon"
+                        tabIndex={0}
+                        ariaLabel={`Throughput configured at the database level will be shared across all ${getCollectionName(
+                          true
+                        ).toLocaleLowerCase()} within the database.`}
+                      />
                     </TooltipHost>
                   </Stack>
                 )}
@@ -386,7 +400,12 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                 directionalHint={DirectionalHint.bottomLeftEdge}
                 content={`Unique identifier for the ${getCollectionName().toLocaleLowerCase()} and used for id-based routing through REST and all SDKs.`}
               >
-                <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                <Icon
+                  iconName="Info"
+                  className="panelInfoIcon"
+                  tabIndex={0}
+                  ariaLabel={`Unique identifier for the ${getCollectionName().toLocaleLowerCase()} and used for id-based routing through REST and all SDKs.`}
+                />
               </TooltipHost>
             </Stack>
 
@@ -469,7 +488,14 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                       "Sharded collections split your data across many replica sets (shards) to achieve unlimited scalability. Sharded collections require choosing a shard key (field) to evenly distribute your data."
                     }
                   >
-                    <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                    <Icon
+                      iconName="Info"
+                      className="panelInfoIcon"
+                      tabIndex={0}
+                      ariaLabel={
+                        "Sharded collections split your data across many replica sets (shards) to achieve unlimited scalability. Sharded collections require choosing a shard key (field) to evenly distribute your data."
+                      }
+                    />
                   </TooltipHost>
                 </Stack>
 
@@ -516,7 +542,12 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   directionalHint={DirectionalHint.bottomLeftEdge}
                   content={this.getPartitionKeyTooltipText()}
                 >
-                  <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                  <Icon
+                    iconName="Info"
+                    className="panelInfoIcon"
+                    tabIndex={0}
+                    ariaLabel={this.getPartitionKeyTooltipText()}
+                  />
                 </TooltipHost>
               </Stack>
 
@@ -645,7 +676,17 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   does not count towards the throughput you provisioned for the database. This throughput amount will be
                   billed in addition to the throughput amount you provisioned at the database level.`}
               >
-                <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                <Icon
+                  iconName="Info"
+                  className="panelInfoIcon"
+                  tabIndex={0}
+                  ariaLabel={`You can optionally provision dedicated throughput for a ${getCollectionName().toLocaleLowerCase()} within a database that has throughput
+                provisioned. This dedicated throughput amount will not be shared with other ${getCollectionName(
+                  true
+                ).toLocaleLowerCase()} in the database and
+                does not count towards the throughput you provisioned for the database. This throughput amount will be
+                billed in addition to the throughput amount you provisioned at the database level.`}
+                />
               </TooltipHost>
             </Stack>
           )}
@@ -680,7 +721,14 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                     "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."
                   }
                 >
-                  <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                  <Icon
+                    iconName="Info"
+                    className="panelInfoIcon"
+                    tabIndex={0}
+                    ariaLabel={
+                      "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."
+                    }
+                  />
                 </TooltipHost>
               </Stack>
 
@@ -743,7 +791,13 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   directionalHint={DirectionalHint.bottomLeftEdge}
                   content={this.getAnalyticalStorageTooltipContent()}
                 >
-                  <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                  <Icon
+                    iconName="Info"
+                    className="panelInfoIcon"
+                    tabIndex={0}
+                    ariaLabel='Enable analytical store capability to perform near real-time analytics on your operational data, without
+        impacting the performance of transactional workloads.{" "}'
+                  />
                 </TooltipHost>
               </Stack>
 
@@ -820,7 +874,12 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                         directionalHint={DirectionalHint.bottomLeftEdge}
                         content="The _id field is indexed by default. Creating a wildcard index for all fields will optimize queries and is recommended for development."
                       >
-                        <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                        <Icon
+                          iconName="Info"
+                          className="panelInfoIcon"
+                          tabIndex={0}
+                          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>
 
diff --git a/src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap b/src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap
index 2df43e44b..420e23955 100644
--- a/src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap
+++ b/src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap
@@ -31,6 +31,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
           directionalHint={4}
         >
           <Icon
+            ariaLabel="A database is analogous to a namespace. It is the unit of management for a set of containers."
             className="panelInfoIcon"
             iconName="Info"
             tabIndex={0}
@@ -124,6 +125,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
             directionalHint={4}
           >
             <Icon
+              ariaLabel="Throughput configured at the database level will be shared across all containers within the database."
               className="panelInfoIcon"
               iconName="Info"
               tabIndex={0}
@@ -163,6 +165,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
           directionalHint={4}
         >
           <Icon
+            ariaLabel="Unique identifier for the container and used for id-based routing through REST and all SDKs."
             className="panelInfoIcon"
             iconName="Info"
             tabIndex={0}
@@ -206,6 +209,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
           directionalHint={4}
         >
           <Icon
+            ariaLabel="The partition key is used to automatically distribute data across partitions for scalability. Choose a property in your JSON document that has a wide range of values and evenly distributes request volume. For small read-heavy workloads or write-heavy workloads of any size, id is often a good choice."
             className="panelInfoIcon"
             iconName="Info"
             tabIndex={0}
@@ -246,6 +250,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
           directionalHint={4}
         >
           <Icon
+            ariaLabel="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."
             className="panelInfoIcon"
             iconName="Info"
             tabIndex={0}
@@ -303,6 +308,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
           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}