Merge branch 'master' into accessibilitydefects-sev-2

sev2 accessibilitydefects in data explorer
Defect2236159 (#1396 )
2025-12-28 05:11:31 +00:00 · 2023-03-11 00:14:22 +05:30 · 2023-03-10 23:22:42 +05:30 · 2023-02-28 09:11:52 +05:30 · 2023-02-25 23:25:12 +05:30 · 2023-02-25 23:11:20 +05:30
18 changed files with 6698 additions and 417 deletions
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -92,11 +92,11 @@ jobs:
          name: dist
          path: dist/
      - name: Upload build to preview blob storage
-        run: az storage blob upload-batch -d '$web' -s 'dist' --account-name cosmosexplorerpreview --destination-path "${{github.event.pull_request.head.sha || github.sha}}" --account-key="${PREVIEW_STORAGE_KEY}"
+        run: az storage blob upload-batch -d '$web' -s 'dist' --account-name cosmosexplorerpreview --destination-path "${{github.event.pull_request.head.sha || github.sha}}" --account-key="${PREVIEW_STORAGE_KEY}" --overwrite true
        env:
          PREVIEW_STORAGE_KEY: ${{ secrets.PREVIEW_STORAGE_KEY }}
      - name: Upload preview config to blob storage
-        run: az storage blob upload -c '$web' -f ./preview/config.json --account-name cosmosexplorerpreview --name "${{github.event.pull_request.head.sha || github.sha}}/config.json" --account-key="${PREVIEW_STORAGE_KEY}"
+        run: az storage blob upload -c '$web' -f ./preview/config.json --account-name cosmosexplorerpreview --name "${{github.event.pull_request.head.sha || github.sha}}/config.json" --account-key="${PREVIEW_STORAGE_KEY}" --overwrite true
        env:
          PREVIEW_STORAGE_KEY: ${{ secrets.PREVIEW_STORAGE_KEY }}
  endtoendemulator:
@@ -182,7 +182,7 @@ jobs:
        with:
          name: dist
      - run: cp ./configs/prod.json config.json
-      - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "vimeng@microsoft.com" -Password "$AZURE_DEVOPS_PAT"
+      - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "jawelton@microsoft.com" -Password "$AZURE_DEVOPS_PAT"
      - run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
      - run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
      - uses: actions/upload-artifact@v2
@@ -207,7 +207,7 @@ jobs:
          name: dist
      - run: cp ./configs/mpac.json config.json
      - run: sed -i 's/Azure.Cosmos.DB.Data.Explorer/Azure.Cosmos.DB.Data.Explorer.MPAC/g' DataExplorer.nuspec
-      - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "vimeng@microsoft.com" -Password "$AZURE_DEVOPS_PAT"
+      - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "jawelton@microsoft.com" -Password "$AZURE_DEVOPS_PAT"
      - run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
      - run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
      - uses: actions/upload-artifact@v2
--- a/images/imgarrowlefticon.svg
+++ b/images/imgarrowlefticon.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" ?>
 <!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
 <svg enable-background="new 0 0 256 256" height="256px" id="Layer_1" version="1.1" viewBox="0 0 256 256" width="256px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<path stroke="white" stroke-width="0.5" fill="#b5a3a3" d="M179.199,38.399c0,1.637-0.625,3.274-1.875,4.524l-85.076,85.075l85.076,85.075c2.5,2.5,2.5,6.55,0,9.05s-6.55,2.5-9.05,0  l-89.601-89.6c-2.5-2.5-2.5-6.551,0-9.051l89.601-89.6c2.5-2.5,6.55-2.5,9.05,0C178.574,35.124,179.199,36.762,179.199,38.399z"/>
+<path stroke="white" stroke-width="0.5" fill="#000" d="M179.199,38.399c0,1.637-0.625,3.274-1.875,4.524l-85.076,85.075l85.076,85.075c2.5,2.5,2.5,6.55,0,9.05s-6.55,2.5-9.05,0  l-89.601-89.6c-2.5-2.5-2.5-6.551,0-9.051l89.601-89.6c2.5-2.5,6.55-2.5,9.05,0C178.574,35.124,179.199,36.762,179.199,38.399z"/>
 </svg>
--- a/sampleData/sqlSampleData.json
+++ b/sampleData/sqlSampleData.json
--- a/src/Common/TableEntity.tsx
+++ b/src/Common/TableEntity.tsx
@@ -7,7 +7,7 @@ import {
  IStackTokens,
  Stack,
  TextField,
-  TooltipHost,
+  TooltipHost
 } from "@fluentui/react";
 import React, { FunctionComponent } from "react";
 import DeleteIcon from "../../images/delete.svg";
@@ -136,17 +136,20 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
          onEntityTimeValueChange={onEntityTimeValueChange}
        />
        {!isEntityValueDisable && (
+          
          <TooltipHost content="Edit property" id="editTooltip">
+            <div tabIndex={0}>
            <Image
              {...imageProps}
              src={EditIcon}
              alt="editEntity"
              id="editEntity"
              onClick={onEditEntity}
-              tabIndex={0}
              onKeyPress={handleKeyPress}
            />
+            </div>
          </TooltipHost>
+          
        )}
        {isDeleteOptionVisible && userContext.apiType !== "Cassandra" && (
          <TooltipHost content="Delete property" id="deleteTooltip">
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
@@ -185,6 +185,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
      </Stack>

      <Stack horizontal verticalAlign="center">
+        <div role="radiogroup">
        <input
          id="Autoscale-input"
          className="throughputInputRadioBtn"
@@ -214,6 +215,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
        <label className="throughputInputRadioBtnLabel" htmlFor="Manual-input">
          Manual
        </label>
+        </div>
      </Stack>

      {isAutoscaleSelected && (
--- a/src/Explorer/Controls/ThroughputInput/snapshots/ThroughputInput.test.tsx.snap
+++ b/src/Explorer/Controls/ThroughputInput/snapshots/ThroughputInput.test.tsx.snap
@@ -347,12 +347,14 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                    ariaLabel="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
                    className="panelInfoIcon"
                    iconName="Info"
+                    role="tooltip"
                    tabIndex={0}
                  >
                    <IconBase
                      ariaLabel="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
                      className="panelInfoIcon"
                      iconName="Info"
+                      role="tooltip"
                      styles={[Function]}
                      tabIndex={0}
                      theme={
@@ -633,7 +635,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                        aria-label="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
                        className="panelInfoIcon root-57"
                        data-icon-name="Info"
-                        role="img"
+                        role="tooltip"
                        tabIndex={0}
                      >
                        
@@ -654,6 +656,10 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
      <div
        className="ms-Stack css-58"
      >
+        <div
+          key=".0:$.0"
+          role="radiogroup"
+        >
        <input
          aria-label="Autoscale database throughput"
          aria-required={true}
@@ -690,8 +696,9 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
          htmlFor="Manual-input"
          key=".0:$.3"
        >
-          Manual
-        </label>
+            Manual
+          </label>
+        </div>
      </div>
    </Stack>
    <Stack
@@ -1338,12 +1345,14 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                        ariaLabel="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
                        className="panelInfoIcon"
                        iconName="Info"
+                        role="tooltip"
                        tabIndex={0}
                      >
                        <IconBase
                          ariaLabel="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
                          className="panelInfoIcon"
                          iconName="Info"
+                          role="tooltip"
                          styles={[Function]}
                          tabIndex={0}
                          theme={
@@ -1624,7 +1633,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                            aria-label="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
                            className="panelInfoIcon root-57"
                            data-icon-name="Info"
-                            role="img"
+                            role="tooltip"
                            tabIndex={0}
                          >
                            
--- a/src/Explorer/Controls/TreeComponent/TreeComponent.tsx
+++ b/src/Explorer/Controls/TreeComponent/TreeComponent.tsx
@@ -10,7 +10,7 @@ import {
  IButtonStyles,
  IconButton,
  IContextualMenuItemProps,
-  IContextualMenuProps,
+  IContextualMenuProps
 } from "@fluentui/react";
 import * as React from "react";
 import AnimateHeight from "react-animate-height";
@@ -195,7 +195,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
        </div>
        {node.children && (
          <AnimateHeight duration={TreeNodeComponent.transitionDurationMS} height={this.state.isExpanded ? "auto" : 0}>
-            <div className="nodeChildren" data-test={node.label}>
+            <div className="nodeChildren" data-test={node.label} role="group">
              {TreeNodeComponent.getSortedChildren(node).map((childNode: TreeNode) => (
                <TreeNodeComponent
                  key={`${childNode.label}-${generation + 1}-${childNode.timestamp}`}
--- a/src/Explorer/Controls/TreeComponent/snapshots/TreeComponent.test.tsx.snap
+++ b/src/Explorer/Controls/TreeComponent/snapshots/TreeComponent.test.tsx.snap
@@ -40,30 +40,32 @@ exports[`TreeNodeComponent does not render children by default 1`] = `
  onKeyPress={[Function]}
  role="treeitem"
 >
-  <div
-    className="treeNodeHeader "
-    data-test="label"
-    style={
-      Object {
-        "paddingLeft": 9,
+  <div>
+    <div
+      className="treeNodeHeader "
+      data-test="label"
+      style={
+        Object {
+          "paddingLeft": 9,
+        }
      }
-    }
-    tabIndex={-1}
-  >
-    <img
-      alt="label branch is collapsed"
-      className="expandCollapseIcon"
-      onKeyPress={[Function]}
-      role="button"
-      src=""
-      tabIndex={0}
-    />
-    <span
-      className="nodeLabel"
-      title="label"
+      tabIndex={-1}
    >
-      label
-    </span>
+      <img
+        alt="label branch is collapsed"
+        className="expandCollapseIcon"
+        onKeyPress={[Function]}
+        role="button"
+        src=""
+        tabIndex={0}
+      />
+      <span
+        className="nodeLabel"
+        title="label"
+      >
+        label
+      </span>
+    </div>
  </div>
  <div
    className="loadingIconContainer"
@@ -100,6 +102,7 @@ exports[`TreeNodeComponent does not render children by default 1`] = `
    <div
      className="nodeChildren"
      data-test="label"
+      role="group"
    >
      <TreeNodeComponent
        generation={3}
@@ -142,78 +145,80 @@ exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`]
  onKeyPress={[Function]}
  role="treeitem"
 >
-  <div
-    className="treeNodeHeader "
-    data-test="label"
-    style={
-      Object {
-        "paddingLeft": 23,
-      }
-    }
-    tabIndex={-1}
-  >
-    <img
-      alt="label branch is expanded"
-      className="expandCollapseIcon"
-      onKeyPress={[Function]}
-      role="button"
-      src=""
-      tabIndex={0}
-    />
-    <span
-      className="nodeLabel"
-      title="label"
-    >
-      label
-    </span>
+  <div>
    <div
-      onContextMenu={[Function]}
-      onKeyPress={[Function]}
+      className="treeNodeHeader "
+      data-test="label"
+      style={
+        Object {
+          "paddingLeft": 23,
+        }
+      }
+      tabIndex={-1}
    >
-      <CustomizedIconButton
-        ariaLabel="More"
-        className="treeMenuEllipsis"
-        menuIconProps={
-          Object {
-            "iconName": "More",
-            "styles": Object {
-              "root": Object {
-                "fontSize": "18px",
-                "fontWeight": "bold",
-              },
-            },
-          }
-        }
-        menuProps={
-          Object {
-            "contextualMenuItemAs": [Function],
-            "coverTarget": true,
-            "directionalHint": 3,
-            "isBeakVisible": false,
-            "items": Array [
-              Object {
-                "className": undefined,
-                "disabled": true,
-                "key": "menuLabel",
-                "onClick": [Function],
-                "onRenderIcon": [Function],
-                "text": "menuLabel",
-              },
-            ],
-            "onMenuDismissed": [Function],
-            "onMenuOpened": [Function],
-          }
-        }
-        name="More"
-        styles={
-          Object {
-            "rootFocused": Object {
-              "outline": "1px dashed undefined",
-            },
-          }
-        }
-        title="More"
+      <img
+        alt="label branch is expanded"
+        className="expandCollapseIcon"
+        onKeyPress={[Function]}
+        role="button"
+        src=""
+        tabIndex={0}
      />
+      <span
+        className="nodeLabel"
+        title="label"
+      >
+        label
+      </span>
+      <div
+        onContextMenu={[Function]}
+        onKeyPress={[Function]}
+      >
+        <CustomizedIconButton
+          ariaLabel="More"
+          className="treeMenuEllipsis"
+          menuIconProps={
+            Object {
+              "iconName": "More",
+              "styles": Object {
+                "root": Object {
+                  "fontSize": "18px",
+                  "fontWeight": "bold",
+                },
+              },
+            }
+          }
+          menuProps={
+            Object {
+              "contextualMenuItemAs": [Function],
+              "coverTarget": true,
+              "directionalHint": 3,
+              "isBeakVisible": false,
+              "items": Array [
+                Object {
+                  "className": undefined,
+                  "disabled": true,
+                  "key": "menuLabel",
+                  "onClick": [Function],
+                  "onRenderIcon": [Function],
+                  "text": "menuLabel",
+                },
+              ],
+              "onMenuDismissed": [Function],
+              "onMenuOpened": [Function],
+            }
+          }
+          name="More"
+          styles={
+            Object {
+              "rootFocused": Object {
+                "outline": "1px dashed undefined",
+              },
+            }
+          }
+          title="More"
+        />
+      </div>
    </div>
  </div>
  <div
@@ -251,6 +256,7 @@ exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`]
    <div
      className="nodeChildren"
      data-test="label"
+      role="group"
    >
      <TreeNodeComponent
        generation={13}
@@ -292,142 +298,31 @@ exports[`TreeNodeComponent renders loading icon 1`] = `
  onKeyPress={[Function]}
  role="treeitem"
 >
-  <div
-    className="treeNodeHeader "
-    data-test="label"
-    style={
-      Object {
-        "paddingLeft": 9,
-      }
-    }
-    tabIndex={-1}
-  >
-    <img
-      alt="label branch is expanded"
-      className="expandCollapseIcon"
-      onKeyPress={[Function]}
-      role="button"
-      src=""
-      tabIndex={0}
-    />
-    <span
-      className="nodeLabel"
-      title="label"
-    >
-      label
-    </span>
-  </div>
-  <div
-    className="loadingIconContainer"
-  >
-    <img
-      className="loadingIcon"
-      hidden={true}
-      src=""
-    />
-  </div>
-  <AnimateHeight
-    animateOpacity={false}
-    animationStateClasses={
-      Object {
-        "animating": "rah-animating",
-        "animatingDown": "rah-animating--down",
-        "animatingToHeightAuto": "rah-animating--to-height-auto",
-        "animatingToHeightSpecific": "rah-animating--to-height-specific",
-        "animatingToHeightZero": "rah-animating--to-height-zero",
-        "animatingUp": "rah-animating--up",
-        "static": "rah-static",
-        "staticHeightAuto": "rah-static--height-auto",
-        "staticHeightSpecific": "rah-static--height-specific",
-        "staticHeightZero": "rah-static--height-zero",
-      }
-    }
-    applyInlineTransitions={true}
-    delay={0}
-    duration={200}
-    easing="ease"
-    height="auto"
-    style={Object {}}
-  >
+  <div>
    <div
-      className="nodeChildren"
+      className="treeNodeHeader "
      data-test="label"
-    />
-  </AnimateHeight>
-</div>
-`;
-
-exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents separated 1`] = `
-<div
-  className="nodeClassname main12 nodeItem "
-  id="id"
-  onClick={[Function]}
-  onKeyPress={[Function]}
-  role="treeitem"
->
-  <div
-    className="treeNodeHeader "
-    data-test="label"
-    style={
-      Object {
-        "paddingLeft": 23,
+      style={
+        Object {
+          "paddingLeft": 9,
+        }
      }
-    }
-    tabIndex={-1}
-  >
-    <img
-      alt="label branch is expanded"
-      className="expandCollapseIcon"
-      onKeyPress={[Function]}
-      role="button"
-      src=""
-      tabIndex={0}
-    />
-    <span
-      className="nodeLabel"
-      title="label"
+      tabIndex={-1}
    >
-      label
-    </span>
-    <div
-      onContextMenu={[Function]}
-      onKeyPress={[Function]}
-    >
-      <CustomizedIconButton
-        ariaLabel="More"
-        className="treeMenuEllipsis"
-        menuIconProps={
-          Object {
-            "iconName": "More",
-            "styles": Object {
-              "root": Object {
-                "fontSize": "18px",
-                "fontWeight": "bold",
-              },
-            },
-          }
-        }
-        menuProps={
-          Object {
-            "contextualMenuItemAs": [Function],
-            "coverTarget": true,
-            "directionalHint": 3,
-            "isBeakVisible": false,
-            "items": Array [],
-            "onMenuDismissed": [Function],
-            "onMenuOpened": [Function],
-          }
-        }
-        name="More"
-        styles={
-          Object {
-            "rootFocused": Object {
-              "outline": "1px dashed undefined",
-            },
-          }
-        }
-        title="More"
+      <img
+        alt="label branch is expanded"
+        className="expandCollapseIcon"
+        onKeyPress={[Function]}
+        role="button"
+        src=""
+        tabIndex={0}
      />
+      <span
+        className="nodeLabel"
+        title="label"
+      >
+        label
+      </span>
    </div>
  </div>
  <div
@@ -465,6 +360,123 @@ exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents
    <div
      className="nodeChildren"
      data-test="label"
+      role="group"
+    />
+  </AnimateHeight>
+</div>
+`;
+
+exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents separated 1`] = `
+<div
+  className="nodeClassname main12 nodeItem "
+  id="id"
+  onClick={[Function]}
+  onKeyPress={[Function]}
+  role="treeitem"
+>
+  <div>
+    <div
+      className="treeNodeHeader "
+      data-test="label"
+      style={
+        Object {
+          "paddingLeft": 23,
+        }
+      }
+      tabIndex={-1}
+    >
+      <img
+        alt="label branch is expanded"
+        className="expandCollapseIcon"
+        onKeyPress={[Function]}
+        role="button"
+        src=""
+        tabIndex={0}
+      />
+      <span
+        className="nodeLabel"
+        title="label"
+      >
+        label
+      </span>
+      <div
+        onContextMenu={[Function]}
+        onKeyPress={[Function]}
+      >
+        <CustomizedIconButton
+          ariaLabel="More"
+          className="treeMenuEllipsis"
+          menuIconProps={
+            Object {
+              "iconName": "More",
+              "styles": Object {
+                "root": Object {
+                  "fontSize": "18px",
+                  "fontWeight": "bold",
+                },
+              },
+            }
+          }
+          menuProps={
+            Object {
+              "contextualMenuItemAs": [Function],
+              "coverTarget": true,
+              "directionalHint": 3,
+              "isBeakVisible": false,
+              "items": Array [],
+              "onMenuDismissed": [Function],
+              "onMenuOpened": [Function],
+            }
+          }
+          name="More"
+          styles={
+            Object {
+              "rootFocused": Object {
+                "outline": "1px dashed undefined",
+              },
+            }
+          }
+          title="More"
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    className="loadingIconContainer"
+  >
+    <img
+      className="loadingIcon"
+      hidden={true}
+      src=""
+    />
+  </div>
+  <AnimateHeight
+    animateOpacity={false}
+    animationStateClasses={
+      Object {
+        "animating": "rah-animating",
+        "animatingDown": "rah-animating--down",
+        "animatingToHeightAuto": "rah-animating--to-height-auto",
+        "animatingToHeightSpecific": "rah-animating--to-height-specific",
+        "animatingToHeightZero": "rah-animating--to-height-zero",
+        "animatingUp": "rah-animating--up",
+        "static": "rah-static",
+        "staticHeightAuto": "rah-static--height-auto",
+        "staticHeightSpecific": "rah-static--height-specific",
+        "staticHeightZero": "rah-static--height-zero",
+      }
+    }
+    applyInlineTransitions={true}
+    delay={0}
+    duration={200}
+    easing="ease"
+    height="auto"
+    style={Object {}}
+  >
+    <div
+      className="nodeChildren"
+      data-test="label"
+      role="group"
    >
      <TreeNodeComponent
        generation={13}
@@ -534,30 +546,32 @@ exports[`TreeNodeComponent renders unsorted children by default 1`] = `
  onKeyPress={[Function]}
  role="treeitem"
 >
-  <div
-    className="treeNodeHeader "
-    data-test="label"
-    style={
-      Object {
-        "paddingLeft": 9,
+  <div>
+    <div
+      className="treeNodeHeader "
+      data-test="label"
+      style={
+        Object {
+          "paddingLeft": 9,
+        }
      }
-    }
-    tabIndex={-1}
-  >
-    <img
-      alt="label branch is expanded"
-      className="expandCollapseIcon"
-      onKeyPress={[Function]}
-      role="button"
-      src=""
-      tabIndex={0}
-    />
-    <span
-      className="nodeLabel"
-      title="label"
+      tabIndex={-1}
    >
-      label
-    </span>
+      <img
+        alt="label branch is expanded"
+        className="expandCollapseIcon"
+        onKeyPress={[Function]}
+        role="button"
+        src=""
+        tabIndex={0}
+      />
+      <span
+        className="nodeLabel"
+        title="label"
+      >
+        label
+      </span>
+    </div>
  </div>
  <div
    className="loadingIconContainer"
@@ -594,6 +608,7 @@ exports[`TreeNodeComponent renders unsorted children by default 1`] = `
    <div
      className="nodeChildren"
      data-test="label"
+      role="group"
    >
      <TreeNodeComponent
        generation={3}
--- a/src/Explorer/Graph/GraphExplorerComponent/GraphVizComponent.tsx
+++ b/src/Explorer/Graph/GraphExplorerComponent/GraphVizComponent.tsx
@@ -40,6 +40,7 @@ export class GraphVizComponent extends React.Component<GraphVizComponentProps> {
            {/* svg load more icon inlined as-is here: remove the style="fill:#374649;" so we can override it */}
            <svg
              role="img"
+              aria-label="graph"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              xmlnsXlink="http://www.w3.org/1999/xlink"
@@ -135,6 +136,7 @@ export class GraphVizComponent extends React.Component<GraphVizComponentProps> {
          <g id="triangleRight">
            <svg
              role="img"
+              aria-label="graph"
              version="1.1"
              id="Layer_1"
              xmlns="http://www.w3.org/2000/svg"
--- a/src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx
+++ b/src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx
@@ -17,19 +17,20 @@ export class MiddlePaneComponent extends React.Component<MiddlePaneComponentProp
      <div className="middlePane">
        <div className="graphTitle">
          <span className="paneTitle">Graph</span>
-          <span
+          <button
+          style={{border:'none',background:'none'}}
            className="graphExpandCollapseBtn pull-right"
            onClick={this.props.toggleExpandGraph}
            role="button"
            aria-expanded={this.props.isTabsContentExpanded}
            aria-name="View graph in full screen"
-            tabIndex={0}
+ 
          >
            <img
              src={this.props.isTabsContentExpanded ? CollapseArrowIcon : ExpandIcon}
              alt={this.props.isTabsContentExpanded ? "collapse graph content" : "expand graph content"}
            />
-          </span>
+          </button>
        </div>
        <div className="maingraphContainer">
          <GraphVizComponent forceGraphParams={this.props.graphVizProps.forceGraphParams} />
--- a/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
+++ b/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
@@ -147,12 +147,10 @@ export class NotificationConsoleComponent extends React.Component<
            <div className="notificationConsoleControls">
              <Dropdown
                label="Filter:"
-                role="combobox"
                selectedKey={this.state.selectedFilter}
                options={NotificationConsoleComponent.FilterOptions}
                onChange={this.onFilterSelected.bind(this)}
-                aria-labelledby="consoleFilterLabel"
-                aria-label={this.state.selectedFilter}
+
              />
              <span className="consoleSplitter" />
              <span
--- a/src/Explorer/Menus/NotificationConsole/snapshots/NotificationConsoleComponent.test.tsx.snap
+++ b/src/Explorer/Menus/NotificationConsole/snapshots/NotificationConsoleComponent.test.tsx.snap
@@ -112,8 +112,6 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
        className="notificationConsoleControls"
      >
        <Dropdown
-          aria-label="All"
-          aria-labelledby="consoleFilterLabel"
          label="Filter:"
          onChange={[Function]}
          options={
@@ -278,8 +276,6 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
        className="notificationConsoleControls"
      >
        <Dropdown
-          aria-label="All"
-          aria-labelledby="consoleFilterLabel"
          label="Filter:"
          onChange={[Function]}
          options={
--- a/src/Explorer/Panes/AddCollectionPanel.tsx
+++ b/src/Explorer/Panes/AddCollectionPanel.tsx
@@ -13,7 +13,7 @@ import {
  Stack,
  TeachingBubble,
  Text,
-  TooltipHost,
+  TooltipHost
 } from "@fluentui/react";
 import * as Constants from "Common/Constants";
 import { createCollection } from "Common/dataAccess/createCollection";
@@ -100,6 +100,7 @@ export interface AddCollectionPanelState {
  isExecuting: boolean;
  isThroughputCapExceeded: boolean;
  teachingBubbleStep: number;
+  isParentTooltipVisible:boolean;
 }

 export class AddCollectionPanel extends React.Component<AddCollectionPanelProps, AddCollectionPanelState> {
@@ -108,6 +109,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
  private collectionThroughput: number;
  private isCollectionAutoscale: boolean;
  private isCostAcknowledged: boolean;
+  

  constructor(props: AddCollectionPanelProps) {
    super(props);
@@ -134,13 +136,16 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
      isExecuting: false,
      isThroughputCapExceeded: false,
      teachingBubbleStep: 0,
+      isParentTooltipVisible: false,
    };
+    
  }

  componentDidMount(): void {
    if (this.state.teachingBubbleStep === 0 && this.props.isQuickstart) {
      this.setState({ teachingBubbleStep: 1 });
    }
+
  }

  render(): JSX.Element {
@@ -274,6 +279,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
            </Stack>

            <Stack horizontal verticalAlign="center">
+              <div role='radiogroup'>
              <input
                className="panelRadioBtn"
                checked={this.state.createNewDatabase}
@@ -300,6 +306,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                onChange={this.onUseExistingDatabaseRadioBtnChange.bind(this)}
              />
              <span className="panelRadioBtnLabel">Use existing</span>
+              </div>
            </Stack>

            {this.state.createNewDatabase && (
@@ -405,6 +412,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                  className="panelInfoIcon"
                  tabIndex={0}
                  ariaLabel={`Unique identifier for the ${getCollectionName().toLocaleLowerCase()} and used for id-based routing through REST and all SDKs.`}
+                  role="button"
                />
              </TooltipHost>
            </Stack>
@@ -802,6 +810,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
              </Stack>

              <Stack horizontal verticalAlign="center">
+                <div role="radiogroup">
                <input
                  className="panelRadioBtn"
                  checked={this.state.enableAnalyticalStore}
@@ -831,6 +840,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                  onChange={this.onDisableAnalyticalStoreRadioBtnChange.bind(this)}
                />
                <span className="panelRadioBtnLabel">Off</span>
+                </div>
              </Stack>

              {!this.isSynapseLinkEnabled() && (
@@ -979,7 +989,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
  private getPartitionKeyPlaceHolder(index?: number): string {
    switch (userContext.apiType) {
      case "Mongo":
-        return "e.g., address.zipCode";
+        return "e.g., categoryId";
      case "Gremlin":
        return "e.g., /address";
      case "SQL":
@@ -1111,7 +1121,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
      return userContext.apiType === "SQL" ? "/pk" : "pk";
    }
    if (this.props.isQuickstart) {
-      return userContext.apiType === "SQL" ? "/address" : "address";
+      return userContext.apiType === "SQL" ? "/categoryId" : "categoryId";
    }
    return "";
  }
--- a/src/Explorer/Panes/snapshots/AddCollectionPanel.test.tsx.snap
+++ b/src/Explorer/Panes/snapshots/AddCollectionPanel.test.tsx.snap
@@ -42,39 +42,43 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
        horizontal={true}
        verticalAlign="center"
      >
-        <input
-          aria-checked={true}
-          aria-label="Create new database"
-          checked={true}
-          className="panelRadioBtn"
-          id="databaseCreateNew"
-          name="databaseType"
-          onChange={[Function]}
-          role="radio"
-          tabIndex={0}
-          type="radio"
-        />
-        <span
-          className="panelRadioBtnLabel"
+        <div
+          role="radiogroup"
        >
-          Create new
-        </span>
-        <input
-          aria-checked={false}
-          aria-label="Use existing database"
-          checked={false}
-          className="panelRadioBtn"
-          name="databaseType"
-          onChange={[Function]}
-          role="radio"
-          tabIndex={0}
-          type="radio"
-        />
-        <span
-          className="panelRadioBtnLabel"
-        >
-          Use existing
-        </span>
+          <input
+            aria-checked={true}
+            aria-label="Create new database"
+            checked={true}
+            className="panelRadioBtn"
+            id="databaseCreateNew"
+            name="databaseType"
+            onChange={[Function]}
+            role="radio"
+            tabIndex={0}
+            type="radio"
+          />
+          <span
+            className="panelRadioBtnLabel"
+          >
+            Create new
+          </span>
+          <input
+            aria-checked={false}
+            aria-label="Use existing database"
+            checked={false}
+            className="panelRadioBtn"
+            name="databaseType"
+            onChange={[Function]}
+            role="radio"
+            tabIndex={0}
+            type="radio"
+          />
+          <span
+            className="panelRadioBtnLabel"
+          >
+            Use existing
+          </span>
+        </div>
      </Stack>
      <Stack
        className="panelGroupSpacing"
@@ -168,6 +172,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
            ariaLabel="Unique identifier for the container and used for id-based routing through REST and all SDKs."
            className="panelInfoIcon"
            iconName="Info"
+            role="button"
            tabIndex={0}
          />
        </StyledTooltipHostBase>
@@ -342,42 +347,46 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
        horizontal={true}
        verticalAlign="center"
      >
-        <input
-          aria-checked={false}
-          aria-label="Enable analytical store"
-          checked={false}
-          className="panelRadioBtn"
-          disabled={true}
-          id="enableAnalyticalStoreBtn"
-          name="analyticalStore"
-          onChange={[Function]}
-          role="radio"
-          tabIndex={0}
-          type="radio"
-        />
-        <span
-          className="panelRadioBtnLabel"
+        <div
+          role="radiogroup"
        >
-          On
-        </span>
-        <input
-          aria-checked={true}
-          aria-label="Disable analytical store"
-          checked={true}
-          className="panelRadioBtn"
-          disabled={true}
-          id="disableAnalyticalStoreBtn"
-          name="analyticalStore"
-          onChange={[Function]}
-          role="radio"
-          tabIndex={0}
-          type="radio"
-        />
-        <span
-          className="panelRadioBtnLabel"
-        >
-          Off
-        </span>
+          <input
+            aria-checked={false}
+            aria-label="Enable analytical store"
+            checked={false}
+            className="panelRadioBtn"
+            disabled={true}
+            id="enableAnalyticalStoreBtn"
+            name="analyticalStore"
+            onChange={[Function]}
+            role="radio"
+            tabIndex={0}
+            type="radio"
+          />
+          <span
+            className="panelRadioBtnLabel"
+          >
+            On
+          </span>
+          <input
+            aria-checked={true}
+            aria-label="Disable analytical store"
+            checked={true}
+            className="panelRadioBtn"
+            disabled={true}
+            id="disableAnalyticalStoreBtn"
+            name="analyticalStore"
+            onChange={[Function]}
+            role="radio"
+            tabIndex={0}
+            type="radio"
+          />
+          <span
+            className="panelRadioBtnLabel"
+          >
+            Off
+          </span>
+        </div>
      </Stack>
      <Stack
        className="panelGroupSpacing"
--- a/src/Explorer/SplashScreen/SplashScreen.tsx
+++ b/src/Explorer/SplashScreen/SplashScreen.tsx
@@ -116,7 +116,9 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
        <form className="connectExplorerFormContainer">
          <div className="splashScreenContainer">
            <div className="splashScreen">
-              <div className="title">
+              <div className="title" aria-label={userContext.apiType === "Postgres"
+                  ? "Welcome to Azure Cosmos DB for PostgreSQL"
+                  : "Welcome to Azure Cosmos DB"}>
                {userContext.apiType === "Postgres"
                  ? "Welcome to Azure Cosmos DB for PostgreSQL"
                  : "Welcome to Azure Cosmos DB"}
@@ -563,7 +565,17 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
  }

  private getLearningResourceItems(): JSX.Element {
-    let items: { link: string; title: string; description: string }[];
+    interface item {
+      link: string;
+      title: string;
+      description: string;
+    }
+    const cdbLiveTv: item = {
+      link: "https://developer.azurecosmosdb.com/tv",
+      title: "Learn the Fundamentals",
+      description: "Watch Azure Cosmos DB Live TV show introductory and how to videos.",
+    };
+    let items: item[];
    switch (userContext.apiType) {
      case "SQL":
      case "Postgres":
@@ -573,11 +585,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
            title: "Get Started using an SDK",
            description: "Learn about the Azure Cosmos DB SDK.",
          },
-          {
-            link: "https://aka.ms/msl-complex-queries",
-            title: "Master Complex Queries",
-            description: "Learn how to author complex queries.",
-          },
+          cdbLiveTv,
          {
            link: "https://aka.ms/msl-move-data",
            title: "Migrate Your Data",
@@ -597,11 +605,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
            title: "Getting Started Guide",
            description: "Learn the basics to get started.",
          },
-          {
-            link: "http://aka.ms/mongodotnet",
-            title: "Build a web API",
-            description: "Create a web API with the.NET SDK.",
-          },
+          cdbLiveTv,
        ];
        break;
      case "Cassandra":
@@ -611,11 +615,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
            title: "Create a Container",
            description: "Get to know the create a container options.",
          },
-          {
-            link: "https://aka.ms/cassandraserverdiagnostics",
-            title: "Run Server Diagnostics",
-            description: "Learn how to run server diagnostics.",
-          },
+          cdbLiveTv,
          {
            link: "https://aka.ms/Cassandrathroughput",
            title: "Provision Throughput",
@@ -635,11 +635,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
            title: "Import Graph Data",
            description: "Learn Bulk ingestion data using BulkExecutor",
          },
-          {
-            link: "https://aka.ms/graphoptimize",
-            title: "Optimize your Queries",
-            description: "Learn how to evaluate your Gremlin queries",
-          },
+          cdbLiveTv,
        ];
        break;
      case "Tables":
@@ -654,11 +650,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
            title: "Build a Java App",
            description: "Create a Azure Cosmos DB for Table app with Java SDK ",
          },
-          {
-            link: "https://aka.ms/tablenodejs",
-            title: "Build a Node.js App",
-            description: "Create a Azure Cosmos DB for Table app with Node.js SDK",
-          },
+          cdbLiveTv,
        ];
        break;
    }
--- a/src/Utils/MessageValidation.ts
+++ b/src/Utils/MessageValidation.ts
@@ -21,6 +21,23 @@ function isValidOrigin(allowedOrigins: ReadonlyArray<string>, event: MessageEven
  return false;
 }

+export function shouldProcessMessage(event: MessageEvent): boolean {
+  if (typeof event.data !== "object") {
+    return false;
+  }
+  if (event.data["signature"] !== "pcIframe") {
+    return false;
+  }
+  if (!("data" in event.data)) {
+    return false;
+  }
+  if (typeof event.data["data"] !== "object") {
+    return false;
+  }
+
+  return true;
+}
+
 export function isReadyMessage(event: MessageEvent): boolean {
  if (!event?.data?.kind && !event?.data?.data) {
    return false;
--- a/src/Utils/NetworkUtility.ts
+++ b/src/Utils/NetworkUtility.ts
@@ -10,7 +10,7 @@ const PortalIPs: { [key: string]: string[] } = {
  usnat: ["7.28.202.68"],
 };

-export const getNetworkSettingsWarningMessage = (clientIpAddress: string): string => {
+export const getNetworkSettingsWarningMessage = (): string => {
  const accountProperties = userContext.databaseAccount?.properties;

  if (!accountProperties) {
@@ -40,13 +40,7 @@ export const getNetworkSettingsWarningMessage = (clientIpAddress: string): strin
    if (numberOfMatches !== portalIPs.length) {
      return "The Network settings for this account are preventing access from Data Explorer. Please allow access from Azure Portal to proceed.";
    }
-
-    return "";
-  } else {
-    if (!clientIpAddress || ipRules.some((ipRule) => ipRule.ipAddressOrRange === clientIpAddress)) {
-      return "";
-    }
-
-    return "The Network settings for this account are preventing access from Data Explorer. Please add your current IP to the firewall rules to proceed.";
  }
+
+  return "";
 };
--- a/src/hooks/useKnockoutExplorer.ts
+++ b/src/hooks/useKnockoutExplorer.ts
@@ -1,3 +1,4 @@
+import Explorer from "Explorer/Explorer";
 import { ReactTabKind, useTabs } from "hooks/useTabs";
 import { useEffect, useState } from "react";
 import { getNetworkSettingsWarningMessage } from "Utils/NetworkUtility";
@@ -10,7 +11,6 @@ import { configContext, Platform, updateConfigContext } from "../ConfigContext";
 import { ActionType, DataExplorerAction } from "../Contracts/ActionContracts";
 import { MessageTypes } from "../Contracts/ExplorerContracts";
 import { DataExplorerInputsFrame } from "../Contracts/ViewModels";
-import Explorer from "../Explorer/Explorer";
 import { handleOpenAction } from "../Explorer/OpenActions/OpenActions";
 import { useDatabases } from "../Explorer/useDatabases";
 import {
@@ -33,7 +33,7 @@ import { Node, PortalEnv, updateUserContext, userContext } from "../UserContext"
 import { listKeys } from "../Utils/arm/generatedClients/cosmos/databaseAccounts";
 import { DatabaseAccountListKeysResult } from "../Utils/arm/generatedClients/cosmos/types";
 import { getMsalInstance } from "../Utils/AuthorizationUtils";
-import { isInvalidParentFrameOrigin } from "../Utils/MessageValidation";
+import { isInvalidParentFrameOrigin, shouldProcessMessage } from "../Utils/MessageValidation";

 // This hook will create a new instance of Explorer.ts and bind it to the DOM
 // This hook has a LOT of magic, but ideally we can delete it once we have removed KO and switched entirely to React
@@ -239,6 +239,7 @@ async function configurePortal(): Promise<Explorer> {
  updateUserContext({
    authType: AuthType.AAD,
  });
+  let explorer: Explorer;
  return new Promise((resolve) => {
    // In development mode, try to load the iframe message from session storage.
    // This allows webpack hot reload to function properly in the portal
@@ -251,7 +252,7 @@ async function configurePortal(): Promise<Explorer> {
        );
        console.dir(message);
        updateContextsFromPortalMessage(message);
-        const explorer = new Explorer();
+        explorer = new Explorer();
        // In development mode, save the iframe message from the portal in session storage.
        // This allows webpack hot reload to funciton properly
        if (process.env.NODE_ENV === "development") {
@@ -287,7 +288,7 @@ async function configurePortal(): Promise<Explorer> {
          }

          updateContextsFromPortalMessage(inputs);
-          const explorer = new Explorer();
+          explorer = new Explorer();
          resolve(explorer);
          if (openAction) {
            handleOpenAction(openAction, useDatabases.getState().databases, explorer);
@@ -300,6 +301,8 @@ async function configurePortal(): Promise<Explorer> {
          } else {
            useTabs.getState().closeTabsByComparator((tab) => tab.tabId === event.data?.data?.tabId);
          }
+        } else if (message?.type === MessageTypes.RefreshResources) {
+          explorer.onRefreshResourcesClick();
        }
      },
      false
@@ -314,23 +317,6 @@ function shouldForwardMessage(message: PortalMessage, messageOrigin: string) {
  return messageOrigin === window.document.location.origin && message.type === MessageTypes.TelemetryInfo;
 }

-function shouldProcessMessage(event: MessageEvent): boolean {
-  if (typeof event.data !== "object") {
-    return false;
-  }
-  if (event.data["signature"] !== "pcIframe") {
-    return false;
-  }
-  if (!("data" in event.data)) {
-    return false;
-  }
-  if (typeof event.data["data"] !== "object") {
-    return false;
-  }
-
-  return true;
-}
-
 function updateContextsFromPortalMessage(inputs: DataExplorerInputsFrame) {
  if (
    configContext.BACKEND_ENDPOINT &&
@@ -382,7 +368,7 @@ function updateContextsFromPortalMessage(inputs: DataExplorerInputsFrame) {
    }
  }

-  const warningMessage = getNetworkSettingsWarningMessage(inputs.clientIpAddress);
+  const warningMessage = getNetworkSettingsWarningMessage();
  useTabs.getState().setNetworkSettingsWarning(warningMessage);

  if (inputs.features) {
Author	SHA1	Message	Date
MokireddySampath	ccdff60444	Merge branch 'master' into accessibilitydefects-sev-2	2023-03-11 00:14:22 +05:30
Sampath	b84d5b572c	sev2 accessibilitydefects in data explorer	2023-03-10 23:22:42 +05:30
MokireddySampath	a7a38807df	Defect2236159 (#1396 ) * autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit `5a660551c6`. * alt text for decorative images	2023-02-28 09:11:52 +05:30
Sampath	c711b59f7d	alt text for decorative images	2023-02-25 23:25:12 +05:30
Sampath	e945963cf9	Revert "alt text attribute for images" This reverts commit `5a660551c6`.	2023-02-25 23:11:20 +05:30
sindhuba	1285ffc440	Refresh collection automatically when container is created using Quickstart pop up (#1394 ) * Quickstart Refresh collection automatically when container is created * Fix unit tests * Fix unit tests and address comments * Minor fixes in message handler * Minor changes to fix tsconfig.strict.json * Resolve npm compile:strict errors by fixing the code implementation * Remove cache refresh code in configureHosted function * Fix spacing * Run npm format	2023-02-24 10:58:36 -08:00
jawelton74	b4bca3d41a	Updates user to use for nuget push. (#1393 )	2023-02-16 17:51:57 -08:00
jawelton74	2a47e4311c	Set overwrite to true for both blob uploads to storage. (#1392 )	2023-02-16 16:23:24 -08:00
bogercraig	49d9f489d8	Users/bogercraig/add cdb live show link (#1391 ) * Exchanged links on DE home page with link to the Azure Cosmos DB Live TV show. * Adding back accidentally removed terminating , * Added cdb TV to Postgres quick start splash page. * Removing cdb tv description from next steps and moved up. * Moved cdb tv to the tips and learn more column on postgres getting started page. * Shortening postgrest cdb tv line. * Removing link from PG since only 1 episode so far for PG. * Adding terminating comma back. Formatting. * Consolidating Cosmos DB Live TV to a single variable. * Updating prettier formatting.	2023-02-15 09:24:55 -05:00
sindhuba	31cc129aa7	Update address sample data for SQL and Mongo (#1389 )	2023-02-07 18:34:10 -08:00
MokireddySampath	99af4acca4	autoscale and manual radiobuutton fixes (#1387 )	2023-02-07 11:48:45 +05:30
victor-meng	80dd161a6f	Remove networking warning message for sql, gremlin, and tables api (#1388 )	2023-02-06 12:51:04 -08:00