Merge branch 'update_to_webpack_5' of https://github.com/Azure/cosmos-explorer into update_to_webpack_5

.eslintrc.js

@@ -43,6 +43,7 @@ module.exports = {
     "@typescript-eslint/no-explicit-any": "error",
     "prefer-arrow/prefer-arrow-functions": ["error", { allowStandaloneDeclarations: true }],
     eqeqeq: "error",
+    "react/react-in-jsx-scope": "off",
     "react/display-name": "off",
     "react-hooks/rules-of-hooks": "warn", // TODO: error
     "react-hooks/exhaustive-deps": "warn", // TODO: error

babel.config.js

@@ -1,4 +1,13 @@
 module.exports = {
-  presets: [["@babel/preset-env", { targets: { node: "current" } }], "@babel/preset-react", "@babel/preset-typescript"],
+  presets: [
+    ["@babel/preset-env", { targets: { node: "current" } }],
+    [
+      "@babel/preset-react",
+      {
+        runtime: "automatic",
+      },
+    ],
+    "@babel/preset-typescript",
+  ],
   plugins: [["@babel/plugin-proposal-decorators", { legacy: true }]],
 };

images/check.svg

@@ -1,10 +0,0 @@
-<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
-<path d="M14.01 0.72999L4.81001 9.93999L0.0100098 5.17999L0.78001 4.40999L4.78001 8.40999L13.21 -0.0100098L14.01 0.72999Z" fill="#0078D4"/>
-</g>
-<defs>
-<clipPath id="clip0">
-<rect width="14" height="9.99" fill="white"/>
-</clipPath>
-</defs>
-</svg>

jest.config.js

@@ -62,6 +62,8 @@ module.exports = {
   //   "node_modules"
   // ],
 
+  modulePaths: ["node_modules", "<rootDir>/src"],
+
   // An array of file extensions your modules use
   moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "html", "svg"],
 

less/Common/Constants.less

@@ -4,7 +4,7 @@
 
 @font-face {
   font-family: wf_segoe-ui_normal;
-  src: local("Segoe UI"), url("../../fonts/segoe-ui/west-european/normal/latest.woff");
+  src: url(./fonts/segoe-ui/west-european/normal/latest.woff);
 }
 
 @DataExplorerFont: wf_segoe-ui_normal, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;

less/TableStyles/fulldatatables.less

@@ -4,166 +4,166 @@
  */
 
 table.storage {
-    width: 100%;
-    margin: 6px 0px 0px 0px;
-    clear: both;
-    border-collapse: separate;
-    border-spacing: 0;
-    background-color: @BaseLight;
-    /*[{datatable-base-background-color}]*/
-    outline-width: 0;
-    /*Keyboard navigation - ensure table has no border when focused. */
-    /* no select */
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
+  width: 100%;
+  margin: 6px 0px 0px 0px;
+  clear: both;
+  border-collapse: separate;
+  border-spacing: 0;
+  background-color: @BaseLight;
+  /*[{datatable-base-background-color}]*/
+  outline-width: 0;
+  /*Keyboard navigation - ensure table has no border when focused. */
+  /* no select */
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 table.dataTable.azure-table tbody tr {
-    color: #000000;
-    /*[{datatable-name-cell-text}]*/
+  color: #000000;
+  /*[{datatable-name-cell-text}]*/
 }
 
 table.dataTable.azure-table tbody tr td {
-    height: 16px;
+  height: 16px;
 }
 
 table.can-select {
-    /* no select */
-    -webkit-touch-callout: auto;
-    -webkit-user-select: auto;
-    -khtml-user-select: auto;
-    -moz-user-select: auto;
-    -ms-user-select: auto;
-    user-select: auto;
+  /* no select */
+  -webkit-touch-callout: auto;
+  -webkit-user-select: auto;
+  -khtml-user-select: auto;
+  -moz-user-select: auto;
+  -ms-user-select: auto;
+  user-select: auto;
 }
 
 table.can-select.dataTable tbody tr {
-    color: #000000;
-    /*[{datatable-name-cell-text}]*/
-    background-color: transparent;
-    /*[{datatable-base-background}]*/
+  color: #000000;
+  /*[{datatable-name-cell-text}]*/
+  background-color: transparent;
+  /*[{datatable-base-background}]*/
 }
 
 table.can-select.dataTable tbody tr.selected {
-    color: #000000 !important;
-    /*[{datatable-row-selected-text} !important]*/
-    background-color: #C9DEF5;
-    /*[{datatable-row-selected-background}]*/
-    border: 1px solid #b3d1f1;
-    /*[1px solid {datatable-row-selected-border}]*/
+  color: #000000 !important;
+  /*[{datatable-row-selected-text} !important]*/
+  background-color: #c9def5;
+  /*[{datatable-row-selected-background}]*/
+  border: 1px solid #b3d1f1;
+  /*[1px solid {datatable-row-selected-border}]*/
 }
 
 table.can-select.dataTable tbody tr.selected td:first-child {
-    color: #000000 !important;
-    /*[{datatable-name-cell-selected-text} !important]*/
+  color: #000000 !important;
+  /*[{datatable-name-cell-selected-text} !important]*/
 }
 
 table.can-select.dataTable.hover tbody tr:hover,
 table.dataTable.storage tbody tr:hover {
-    background-color: #C9DEF5;
-    /*[{datatable-row-hover-background}]*/
+  background-color: #c9def5;
+  /*[{datatable-row-hover-background}]*/
 }
 
 table.dataTable.storage tbody tr:hover td:empty {
-    background-color: #C9DEF5;
-    /*[{datatable-row-hover-empty-background}]*/
+  background-color: #c9def5;
+  /*[{datatable-row-hover-empty-background}]*/
 }
 
 table.can-select.dataTable.hover tbody tr:hover.selected,
 table.can-select.dataTable.storage tbody tr:hover.selected {
-    background-color: #C9DEF5;
-    /*[{datatable-row-selected-background}]*/
+  background-color: #c9def5;
+  /*[{datatable-row-selected-background}]*/
 }
 
 table.can-select.dataTable:not(:focus) tbody tr.selected {
-    color: #1E1E1E;
-    /*[{datatable-row-selected-text}]*/
-    background-color: #767676;
-    /*[{datatable-row-selected-background}]*/
+  color: #1e1e1e;
+  /*[{datatable-row-selected-text}]*/
+  background-color: #767676;
+  /*[{datatable-row-selected-background}]*/
 }
 
 table.can-select.dataTable.hover:not(:focus) tbody tr:hover.selected,
 table.can-select.dataTable.storage:not(:focus) tbody tr:hover.selected {
-    background-color: #767676;
-    /*[{datatable-row-selected-background}]*/
+  background-color: #767676;
+  /*[{datatable-row-selected-background}]*/
 }
 
 table.storage thead th,
 table.storage tfoot th {
-    font-weight: normal;
-    color: #DDDDDD;
-    /*[{datatable-header-text}]*/
-    white-space: nowrap;
+  font-weight: normal;
+  color: #dddddd;
+  /*[{datatable-header-text}]*/
+  white-space: nowrap;
 }
 
 table.storage thead th,
 table.storage thead td {
-    padding: 0.5em 1em;
-    border: 1px solid #DDDDDD;
-    /*[1px solid {datatable-header-border}]*/
-    background-color: @BaseLight;
-    /*[{datatable-header-background}]*/
-    text-align: left;
-    color: #808080;
-    /*[{datatable-header-text}]*/
-    outline: none;
+  padding: 0.5em 1em;
+  border: 1px solid #dddddd;
+  /*[1px solid {datatable-header-border}]*/
+  background-color: @BaseLight;
+  /*[{datatable-header-background}]*/
+  text-align: left;
+  color: #808080;
+  /*[{datatable-header-text}]*/
+  outline: none;
 }
 
 table.dataTable thead th:active,
 table.dataTable thead td:active {
-    border: 1px solid #DDDDDD;
-    /*[1px solid {datatable-header-cell-active-border}]*/
-    outline: none;
-    background-color: #B4C7DC !important;
-    /*[{datatable-header-cell-active-background} !important] */
+  border: 1px solid #dddddd;
+  /*[1px solid {datatable-header-cell-active-border}]*/
+  outline: none;
+  background-color: #b4c7dc !important;
+  /*[{datatable-header-cell-active-background} !important] */
 }
 
 table.dataTable thead th:focus,
 table.dataTable thead td:focus {
-    border-width: 1px;
-    border-style: solid;
-    border-color: #007ACC;
-    /*[{datatable-header-cell-focus-background}]*/
+  border-width: 1px;
+  border-style: solid;
+  border-color: #007acc;
+  /*[{datatable-header-cell-focus-background}]*/
 }
 
 table.dataTable thead th:hover,
 table.dataTable thead td:hover {
-    border: 1px solid #007ACC;
-    /*[1px solid {datatable-header-cell-hover-border}]*/
-    background-color: #C9DEF5;
-    /*[{datatable-header-cell-hover-background}]*/
-    color: #000000;
-    /*[{datatable-header-cell-hover-text}]*/
+  border: 1px solid #007acc;
+  /*[1px solid {datatable-header-cell-hover-border}]*/
+  background-color: #c9def5;
+  /*[{datatable-header-cell-hover-background}]*/
+  color: #000000;
+  /*[{datatable-header-cell-hover-text}]*/
 }
 
 table.storage thead th:not(:focus):not(:hover),
 table.storage thead td:not(:focus):not(:hover) {
-    border-left-color: transparent;
+  border-left-color: transparent;
 }
 
 table.storage thead th:last-child:not(:focus):not(:hover),
 table.storage thead td:last-child:not(:focus):not(:hover) {
-    border-right-color: transparent;
+  border-right-color: transparent;
 }
 
 table.dataTable tfoot th,
 table.dataTable tfoot td {
-    padding: 5px 18px 5px 18px;
-    border-top: 1px solid #DDDDDD;
-    /*[1px solid {datatable-header-border}]*/
-    background-color: @BaseLight;
-    /*[{datatable-header-background}]*/
+  padding: 5px 18px 5px 18px;
+  border-top: 1px solid #dddddd;
+  /*[1px solid {datatable-header-border}]*/
+  background-color: @BaseLight;
+  /*[{datatable-header-background}]*/
 }
 
 table.dataTable thead .sorting,
 table.dataTable thead .sorting_asc,
 table.dataTable thead .sorting_desc {
-    cursor: pointer;
-    *cursor: hand;
+  cursor: pointer;
+  *cursor: hand;
 }
 
 table.dataTable thead .sorting,
@@ -171,367 +171,365 @@ table.dataTable thead .sorting_asc,
 table.dataTable thead .sorting_desc,
 table.dataTable thead .sorting_asc_disabled,
 table.dataTable thead .sorting_desc_disabled {
-    background-repeat: no-repeat;
-    background-position: center right;
+  background-repeat: no-repeat;
+  background-position: center right;
 }
 
 table.dataTable thead .sorting_asc {
-    background-image: url("../../images/QueryBuilder/CollapseChevronUp_16x.png");
+  background-image: url(/images/QueryBuilder/CollapseChevronUp_16x.png);
 }
 
 table.dataTable thead .sorting_desc {
-    background-image: url("../../images/QueryBuilder/CollapseChevronDown_16x.png");
+  background-image: url(/images/QueryBuilder/CollapseChevronDown_16x.png);
 }
 
 table.dataTable tbody tr {
-    color: #808080;
-    /*[{datatable-base-text}]*/
-    background-color: @BaseLight;
-    /*[{datatable-base-background}]*/
+  color: #808080;
+  /*[{datatable-base-text}]*/
+  background-color: @BaseLight;
+  /*[{datatable-base-background}]*/
 }
 
 table.dataTable tbody tr.selected {
-    color: @BaseLight !important;
-    /*[{datatable-row-selected-text} !important]*/
-    background-color: @SelectionColor;
-    /*[{datatable-row-selected-background]*/
+  color: @BaseLight !important;
+  /*[{datatable-row-selected-text} !important]*/
+  background-color: @SelectionColor;
+  /*[{datatable-row-selected-background]*/
 }
 
 table.dataTable tbody tr.selected td:first-child,
 table.dataTable tbody tr.selected td:nth-child(2) {
-    color: @BaseLight !important;
-    /*[{datatable-row-selected-text} !important]*/
+  color: @BaseLight !important;
+  /*[{datatable-row-selected-text} !important]*/
 }
 
 table.dataTable tbody tr td:first-child img {
-    vertical-align: middle;
+  vertical-align: middle;
 }
 
-
 table.dataTable tbody tr td:first-child {
-    border-left-width: 1px;
+  border-left-width: 1px;
 }
 
 table.dataTable tbody th,
 table.dataTable tbody td {
-    padding: 0.25em 0.5em;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 60em;
-    white-space: nowrap;
+  padding: 0.25em 0.5em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 60em;
+  white-space: nowrap;
 }
 
 table.show-gridlines tbody th,
 table.show-gridlines tbody td {
-    border-width: 1px 1px 1px 0px;
-    border-style: solid;
-    border-color: #DDDDDD;
-    /*[{datatable-base-border}]*/
+  border-width: 1px 1px 1px 0px;
+  border-style: solid;
+  border-color: #dddddd;
+  /*[{datatable-base-border}]*/
 }
 
 table.show-gridlines tbody td:empty {
-    background-color: #E3E2E6;
-    /*[{datatable-base-border}]*/
+  background-color: #e3e2e6;
+  /*[{datatable-base-border}]*/
 }
 
 table.show-gridlines tbody tr.selected td:empty {
-    background-color: #767676;
-    /*[{datatable-row-selected-empty-background}]*/
+  background-color: #767676;
+  /*[{datatable-row-selected-empty-background}]*/
 }
 
 table.dataTable.row-border tbody th,
 table.dataTable.row-border tbody td,
 table.dataTable.storage tbody th,
 table.dataTable.storage tbody td {
-    border-top: 1px solid @BaseLight;
-    /*[{datatable-base-border}]*/
+  border-top: 1px solid @BaseLight;
+  /*[{datatable-base-border}]*/
 }
 
 table.dataTable.row-border tbody tr:first-child th,
 table.dataTable.row-border tbody tr:first-child td,
 table.dataTable.storage tbody tr:first-child th,
 table.dataTable.storage tbody tr:first-child td {
-    border-top: none;
+  border-top: none;
 }
 
 table.dataTable.cell-border tbody th,
 table.dataTable.cell-border tbody td {
-    border-top: 1px solid @BaseLight;
-    /*[1px solid {datatable-base-border}]*/
-    border-right: 1px solid @BaseLight;
-    /*[1px solid {datatable-base-border}]*/
+  border-top: 1px solid @BaseLight;
+  /*[1px solid {datatable-base-border}]*/
+  border-right: 1px solid @BaseLight;
+  /*[1px solid {datatable-base-border}]*/
 }
 
 table.dataTable.cell-border tbody tr th:first-child,
 table.dataTable.cell-border tbody tr td:first-child {
-    border-left: 1px solid @BaseLight;
-    /*[1px solid {datatable-base-border}]*/
+  border-left: 1px solid @BaseLight;
+  /*[1px solid {datatable-base-border}]*/
 }
 
 table.dataTable.cell-border tbody tr:first-child th,
 table.dataTable.cell-border tbody tr:first-child td {
-    border-top: none;
+  border-top: none;
 }
 
 table.dataTable.hover tbody tr:hover,
 table.dataTable.storage tbody tr:hover {
-    color: #000000;
-    /*[{datatable-row-hover-text}]*/
-    background-color: #FCFCFC;
-    /*[{datatable-row-hover-background}]*/
+  color: #000000;
+  /*[{datatable-row-hover-text}]*/
+  background-color: #fcfcfc;
+  /*[{datatable-row-hover-background}]*/
 }
 
 table.dataTable.hover tbody tr:hover.selected,
 table.dataTable.storage tbody tr:hover.selected {
-    background-color: #3399ff;
-    /*[{datatable-row-selected-background}]*/
+  background-color: #3399ff;
+  /*[{datatable-row-selected-background}]*/
 }
 
 table.dataTable.hover:not(:focus) tbody tr:hover.selected,
 table.dataTable.storage:not(:focus) tbody tr:hover.selected {
-    background-color: #767676;
-    /*[{datatable-row-selected-background}]*/
+  background-color: #767676;
+  /*[{datatable-row-selected-background}]*/
 }
 
 table.dataTable.no-footer {
-    border-bottom: 1px solid #555;
-    /*[1px solid {datatable-base-border}]*/
+  border-bottom: 1px solid #555;
+  /*[1px solid {datatable-base-border}]*/
 }
 
 table.dataTable.nowrap th,
 table.dataTable.nowrap td {
-    white-space: nowrap;
+  white-space: nowrap;
 }
 
 table.dataTable.compact thead th,
 table.dataTable.compact thead td {
-    padding: 4px 17px 4px 4px;
+  padding: 4px 17px 4px 4px;
 }
 
 table.dataTable.compact tfoot th,
 table.dataTable.compact tfoot td {
-    padding: 4px;
+  padding: 4px;
 }
 
 table.dataTable.compact tbody th,
 table.dataTable.compact tbody td {
-    padding: 4px;
+  padding: 4px;
 }
 
 table.dataTable th.dt-left,
 table.dataTable td.dt-left {
-    text-align: left;
+  text-align: left;
 }
 
 table.dataTable th.dt-center,
 table.dataTable td.dt-center,
 table.dataTable td.dataTables_empty {
-    text-align: center;
+  text-align: center;
 }
 
 table.dataTable th.dt-right,
 table.dataTable td.dt-right {
-    text-align: right;
+  text-align: right;
 }
 
 table.dataTable th.dt-justify,
 table.dataTable td.dt-justify {
-    text-align: justify;
+  text-align: justify;
 }
 
 table.dataTable th.dt-nowrap,
 table.dataTable td.dt-nowrap {
-    white-space: nowrap;
+  white-space: nowrap;
 }
 
 table.dataTable thead th.dt-head-left,
 table.dataTable thead td.dt-head-left,
 table.dataTable tfoot th.dt-head-left,
 table.dataTable tfoot td.dt-head-left {
-    text-align: left;
+  text-align: left;
 }
 
 table.dataTable thead th.dt-head-center,
 table.dataTable thead td.dt-head-center,
 table.dataTable tfoot th.dt-head-center,
 table.dataTable tfoot td.dt-head-center {
-    text-align: center;
+  text-align: center;
 }
 
 table.dataTable thead th.dt-head-right,
 table.dataTable thead td.dt-head-right,
 table.dataTable tfoot th.dt-head-right,
 table.dataTable tfoot td.dt-head-right {
-    text-align: right;
+  text-align: right;
 }
 
 table.dataTable thead th.dt-head-justify,
 table.dataTable thead td.dt-head-justify,
 table.dataTable tfoot th.dt-head-justify,
 table.dataTable tfoot td.dt-head-justify {
-    text-align: justify;
+  text-align: justify;
 }
 
 table.dataTable thead th.dt-head-nowrap,
 table.dataTable thead td.dt-head-nowrap,
 table.dataTable tfoot th.dt-head-nowrap,
 table.dataTable tfoot td.dt-head-nowrap {
-    white-space: nowrap;
+  white-space: nowrap;
 }
 
 table.dataTable tbody th.dt-body-left,
 table.dataTable tbody td.dt-body-left {
-    text-align: left;
+  text-align: left;
 }
 
 table.dataTable tbody th.dt-body-center,
 table.dataTable tbody td.dt-body-center {
-    text-align: center;
+  text-align: center;
 }
 
 table.dataTable tbody th.dt-body-right,
 table.dataTable tbody td.dt-body-right {
-    text-align: right;
+  text-align: right;
 }
 
 table.dataTable tbody th.dt-body-justify,
 table.dataTable tbody td.dt-body-justify {
-    text-align: justify;
+  text-align: justify;
 }
 
 table.dataTable tbody th.dt-body-nowrap,
 table.dataTable tbody td.dt-body-nowrap {
-    white-space: nowrap;
+  white-space: nowrap;
 }
 
 table.dataTable,
 table.dataTable th,
 table.dataTable td {
-    -webkit-box-sizing: content-box;
-    -moz-box-sizing: content-box;
-    box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
 }
 
 .dataTables_scrollBody .storage {
-    margin: 0px;
+  margin: 0px;
 }
 
-
 /*
  * Control feature layout
  */
 
 .dataTables_wrapper {
-    position: relative;
-    clear: both;
-    *zoom: 1;
-    zoom: 1;
-    padding: 0px 10px 0px 10px;
-    .flex-display();
-    .flex-direction();
-    overflow:hidden;
+  position: relative;
+  clear: both;
+  *zoom: 1;
+  zoom: 1;
+  padding: 0px 10px 0px 10px;
+  .flex-display();
+  .flex-direction();
+  overflow: hidden;
 }
 
 .dataTables_wrapper .dataTables_length {
-    float: left;
-    margin: 10px;
+  float: left;
+  margin: 10px;
 }
 
 .dataTables_wrapper .dataTables_filter {
-    float: right;
-    text-align: right;
-    margin: 10px;
+  float: right;
+  text-align: right;
+  margin: 10px;
 }
 
 .dataTables_wrapper .dataTables_filter input {
-    background-color: #333337;
-    /*[{plugin-textbox-background-color}]*/
-    border: 1px solid #3F3F46;
-    /*[1px solid {plugin-textbox-border-color}]*/
-    margin-left: 0.5em;
-    outline: none;
+  background-color: #333337;
+  /*[{plugin-textbox-background-color}]*/
+  border: 1px solid #3f3f46;
+  /*[1px solid {plugin-textbox-border-color}]*/
+  margin-left: 0.5em;
+  outline: none;
 }
 
 .dataTables_wrapper .dataTables_filter input:active,
 .dataTables_wrapper .dataTables_filter input:focus,
 .dataTables_wrapper .dataTables_filter input:hover {
-    border: 1px solid #007ACC;
-    /*[1px solid {search-control-mouse-over-border}]*/
+  border: 1px solid #007acc;
+  /*[1px solid {search-control-mouse-over-border}]*/
 }
 
 .dataTables_wrapper .dataTables_length select {
-    outline: none;
+  outline: none;
 }
 
 .dataTables_wrapper .dataTables_length select:active,
 .dataTables_wrapper .dataTables_length select:focus,
 .dataTables_wrapper .dataTables_length select:hover {
-    outline: 1px solid #007ACC;
-    /*[1px solid {search-control-mouse-over-border}]*/
+  outline: 1px solid #007acc;
+  /*[1px solid {search-control-mouse-over-border}]*/
 }
 
 .dataTables_wrapper .dataTables_info {
-    clear: both;
-    float: left;
-    padding-top: 0.755em;
-    padding-left: 10px;
+  clear: both;
+  float: left;
+  padding-top: 0.755em;
+  padding-left: 10px;
 }
 
 .dataTables_wrapper .dataTables_paginate {
-    float: right;
-    text-align: right;
-    padding-top: 0.45em;
+  float: right;
+  text-align: right;
+  padding-top: 0.45em;
 }
 
 .dataTables_wrapper .dataTables_paginate .paginate_button {
-    box-sizing: border-box;
-    display: inline-block;
-    min-width: 1.5em;
-    padding: 0.5em 1em;
-    margin-left: 2px;
-    text-align: center;
-    text-decoration: none !important;
-    cursor: pointer;
-    *cursor: hand;
-    color: @SelectionColor !important;
-    /*[{environment-panel-hyperlink} !important]*/
+  box-sizing: border-box;
+  display: inline-block;
+  min-width: 1.5em;
+  padding: 0.5em 1em;
+  margin-left: 2px;
+  text-align: center;
+  text-decoration: none !important;
+  cursor: pointer;
+  *cursor: hand;
+  color: @SelectionColor !important;
+  /*[{environment-panel-hyperlink} !important]*/
 }
 
 .dataTables_wrapper .dataTables_paginate .paginate_button.current,
 .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
-    color: black !important;
-    /*[{environment-panel-hyperlink-disabled} !important]*/
+  color: black !important;
+  /*[{environment-panel-hyperlink-disabled} !important]*/
 }
 
 .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
 .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
 .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
-    cursor: default;
-    color: white !important;
-    /*[{environment-panel-hyperlink-disabled} !important]*/
-    border: 1px solid transparent;
-    background: transparent;
-    box-shadow: none;
+  cursor: default;
+  color: white !important;
+  /*[{environment-panel-hyperlink-disabled} !important]*/
+  border: 1px solid transparent;
+  background: transparent;
+  box-shadow: none;
 }
 
 .paginate_button.disabled {
-    visibility: hidden;
+  visibility: hidden;
 }
 
 .dataTables_wrapper .dataTables_paginate .ellipsis {
-    padding: 0 1em;
+  padding: 0 1em;
 }
 
 .dataTables_wrapper .dataTables_processing {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    width: 100%;
-    height: 100%;
-    margin-top: -25px;
-    padding-top: 20px;
-    background-color: transparent;
-    z-index: 10000;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  margin-top: -25px;
+  padding-top: 20px;
+  background-color: transparent;
+  z-index: 10000;
 }
 
 .dataTables_wrapper .dataTables_length,
@@ -539,77 +537,75 @@ table.dataTable td {
 .dataTables_wrapper .dataTables_info,
 .dataTables_wrapper .dataTables_processing,
 .dataTables_wrapper .dataTables_paginate {
-    color: #000000;
-    /*[{common-controls-inner-tab-inactive-text}]*/
+  color: #000000;
+  /*[{common-controls-inner-tab-inactive-text}]*/
 }
 
 .dataTables_wrapper .dataTables_scroll {
-    clear: both;
-    width:100%;
-    overflow: hidden;
-    .flex-display();
-    .flex-direction();
-   
+  clear: both;
+  width: 100%;
+  overflow: hidden;
+  .flex-display();
+  .flex-direction();
 }
 
 .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {
-    *margin-top: -1px;
-    -webkit-overflow-scrolling: touch;
+  *margin-top: -1px;
+  -webkit-overflow-scrolling: touch;
 }
 
-.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th>div.dataTables_sizing,
-.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td>div.dataTables_sizing {
-    height: 0;
-    margin: 0 !important;
-    padding: 0 !important;
+.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th > div.dataTables_sizing,
+.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td > div.dataTables_sizing {
+  height: 0;
+  margin: 0 !important;
+  padding: 0 !important;
 }
 
 .dataTables_wrapper.no-footer .dataTables_scrollHead {
-    height: 50px;
+  height: 50px;
 }
 
 .dataTables_wrapper.no-footer .dataTables_scrollBody {
-    border-bottom: none;
+  border-bottom: none;
 }
 
 .dataTables_wrapper.no-footer div.dataTables_scrollHead table,
 .dataTables_wrapper.no-footer div.dataTables_scrollBody table {
-    border-bottom: none;
+  border-bottom: none;
 }
 
 .dataTables_wrapper:after {
-    visibility: hidden;
-    display: block;
-    content: "";
-    clear: both;
-    height: 0;
+  visibility: hidden;
+  display: block;
+  content: "";
+  clear: both;
+  height: 0;
 }
 
 .dataTables_wrapper a {
-    color: whitesmoke;
-    /*[{common-controls-inner-tab-inactive-background}]*/
+  color: whitesmoke;
+  /*[{common-controls-inner-tab-inactive-background}]*/
 }
 
 tr td.nameColumnText {
-    color: #000000;
-    /*[{plugin-textbox-color}]*/
+  color: #000000;
+  /*[{plugin-textbox-color}]*/
 }
 
 tr td.nameColumnText.selected,
 tr:hover td.nameColumnText {
-    color: @BaseLight !important;
-    /*[{plugin-treeview-content-selected-color} !important]*/
+  color: @BaseLight !important;
+  /*[{plugin-treeview-content-selected-color} !important]*/
 }
 
 .textRight {
-    text-align: right;
+  text-align: right;
 }
 
 .dataTables_filter {
-    display: none;
+  display: none;
 }
 
-
 /*@media screen and (max-width: 767px) {
     .dataTables_wrapper .dataTables_info,
     .dataTables_wrapper .dataTables_paginate {
@@ -633,21 +629,21 @@ tr:hover td.nameColumnText {
 }*/
 
 .context-menu-item.icon-reset-column-order {
-    background-image: url(../../images/Reset-column-options.svg);
+  background-image: url(/images/Reset-column-options.svg);
 }
 
 .context-menu-item.icon-shift-non-empty-columns-left {
-    background-image: url(../../images/Reorder.svg);
+  background-image: url(/images/Reorder.svg);
 }
 
 .context-menu-item.icon-edit-entity {
-    background-image: url(../../images/Edit_entity.svg);
+  background-image: url(/images/Edit_entity.svg);
 }
 
 .context-menu-item.icon-delete-entity {
-    background-image: url(../../images/delete.svg);
+  background-image: url(/images/delete.svg);
 }
 
 .context-menu-item.icon-customize-columns {
-    background-image: url(../../images/Options.svg);
-}
+  background-image: url(/images/Options.svg);
+}

less/documentDB.less

@@ -1313,7 +1313,7 @@ menuQuickStart {
 }
 
 .plusimg-but {
-  background-image: url(../images/plus_normal.svg);
+  background-image: url(/images/plus_normal.svg);
   background-repeat: no-repeat;
   padding: 6px 16px;
   position: static;
@@ -1321,7 +1321,7 @@ menuQuickStart {
 }
 
 .plusimg-but:hover {
-  background-image: url(../images/plus_hover.svg);
+  background-image: url(/images/plus_hover.svg);
   background-repeat: no-repeat;
   padding: 6px 16px;
   position: static;
@@ -1329,7 +1329,7 @@ menuQuickStart {
 }
 
 .plusimg-but:active {
-  background-image: url(../images/plus_pressed.svg);
+  background-image: url(/images/plus_pressed.svg);
   background-repeat: no-repeat;
   padding: 6px 16px;
   position: static;
@@ -1337,7 +1337,7 @@ menuQuickStart {
 }
 
 .plusimg-but:disabled {
-  background-image: url(../images/plus_disabled.svg);
+  background-image: url(/images/plus_disabled.svg);
   background-repeat: no-repeat;
   padding: 6px 16px;
   position: static;
@@ -1345,7 +1345,7 @@ menuQuickStart {
 }
 
 .minusimg-but {
-  background-image: url(../images/minus_normal.svg);
+  background-image: url(/images/minus_normal.svg);
   background-repeat: no-repeat;
   padding: 6px 16px;
   position: static;
@@ -1353,7 +1353,7 @@ menuQuickStart {
 }
 
 .minusimg-but:hover {
-  background-image: url(../images/minus_hover.svg);
+  background-image: url(/images/minus_hover.svg);
   background-repeat: no-repeat;
   padding: 6px 16px;
   position: static;
@@ -1361,7 +1361,7 @@ menuQuickStart {
 }
 
 .minusimg-but:active {
-  background-image: url(../images/minus_pressed.svg);
+  background-image: url(/images/minus_pressed.svg);
   background-repeat: no-repeat;
   padding: 6px 16px;
   position: static;
@@ -1369,7 +1369,7 @@ menuQuickStart {
 }
 
 .minusimg-but:disabled {
-  background-image: url(../images/minus_disabled.svg);
+  background-image: url(/images/minus_disabled.svg);
   background-repeat: no-repeat;
   padding: 6px 16px;
   position: static;
@@ -2707,7 +2707,7 @@ a:link {
         .errorIcon {
           width: @ErrorIconWidth;
           height: @LoadingErrorIconSize;
-          background-image: url(../images/error_no_outline.svg);
+          background-image: url(/images/error_no_outline.svg);
           background-repeat: no-repeat;
           background-position: center;
           background-size: 3px;

package.json

@@ -9,10 +9,10 @@
     "@azure/cosmos-language-service": "0.0.5",
     "@azure/identity": "1.2.1",
     "@azure/ms-rest-nodeauth": "3.0.7",
+    "@babel/plugin-proposal-class-properties": "7.13.0",
+    "@babel/plugin-proposal-decorators": "7.14.2",
+    "@fluentui/react": "8.14.8",
     "@azure/msal-browser": "2.14.2",
-    "@babel/plugin-proposal-class-properties": "7.12.1",
-    "@babel/plugin-proposal-decorators": "7.12.12",
-    "@fluentui/react": "8.14.3",
     "@jupyterlab/services": "6.0.2",
     "@jupyterlab/terminal": "3.0.3",
     "@microsoft/applicationinsights-web": "2.6.1",
@@ -41,17 +41,13 @@
     "@nteract/transform-vega": "7.0.6",
     "@octokit/rest": "17.9.2",
     "@phosphor/widgets": "1.9.3",
-    "@testing-library/jest-dom": "5.11.9",
-    "@types/mkdirp": "1.0.1",
-    "@types/node-fetch": "2.5.7",
     "applicationinsights": "1.8.0",
     "bootstrap": "3.4.1",
     "canvas": "file:./canvas",
-    "clean-webpack-plugin": "0.1.19",
     "clipboard-copy": "4.0.1",
-    "copy-webpack-plugin": "6.0.2",
     "crossroads": "0.12.2",
-    "css-element-queries": "1.1.1",
+    "crypto-browserify": "3.12.0",
+    "css-element-queries": "1.2.3",
     "d3": "6.1.1",
     "datatables.net-colreorder-dt": "1.5.1",
     "datatables.net-dt": "1.10.19",
@@ -59,18 +55,18 @@
     "dayjs": "1.8.19",
     "dom-to-image": "2.6.0",
     "dotenv": "8.2.0",
-    "eslint-plugin-jest": "23.13.2",
-    "eslint-plugin-react": "7.20.0",
+    "eslint-plugin-jest": "24.3.6",
+    "eslint-plugin-react": "7.23.2",
     "hasher": "1.2.0",
-    "html2canvas": "1.0.0-rc.5",
-    "i18next": "19.8.4",
-    "i18next-browser-languagedetector": "6.0.1",
-    "i18next-http-backend": "1.0.23",
+    "html2canvas": "1.0.0-rc.7",
+    "i18next": "20.2.2",
+    "i18next-browser-languagedetector": "6.1.0",
+    "i18next-http-backend": "1.2.2",
     "iframe-resizer-react": "1.1.0",
     "immutable": "4.0.0-rc.12",
     "is-ci": "2.0.0",
-    "jquery": "3.5.1",
-    "jquery-typeahead": "2.10.6",
+    "jquery": "3.6.0",
+    "jquery-typeahead": "2.11.1",
     "jquery-ui-dist": "1.12.1",
     "knockout": "3.5.1",
     "mkdirp": "1.0.4",
@@ -80,108 +76,117 @@
     "plotly.js-cartesian-dist-min": "1.52.3",
     "post-robot": "10.0.42",
     "q": "1.5.1",
-    "react": "16.13.1",
+    "react": "17.0.2",
     "react-animate-height": "2.0.8",
-    "react-dnd": "9.4.0",
-    "react-dnd-html5-backend": "9.4.0",
-    "react-dom": "16.13.1",
+    "react-dnd": "14.0.2",
+    "react-dnd-html5-backend": "14.0.0",
+    "react-dom": "17.0.2",
     "react-hotkeys": "2.0.0",
-    "react-i18next": "11.8.5",
+    "react-i18next": "11.8.15",
     "react-notification-system": "0.2.17",
-    "react-redux": "7.1.3",
-    "redux": "4.0.4",
+    "react-redux": "7.2.4",
+    "redux": "4.1.0",
     "reflect-metadata": "0.1.13",
     "rx-jupyter": "5.5.12",
     "rxjs": "6.6.3",
     "sanitize-html": "2.3.3",
-    "styled-components": "4.3.2",
+    "styled-components": "5.3.0",
     "swr": "0.4.0",
-    "terser-webpack-plugin": "3.1.0",
-    "underscore": "1.9.1",
+    "underscore": "1.13.1",
     "utility-types": "3.10.0",
     "zustand": "3.5.0"
   },
   "devDependencies": {
-    "@babel/core": "7.9.0",
-    "@babel/preset-env": "7.9.0",
-    "@babel/preset-react": "7.9.4",
-    "@babel/preset-typescript": "7.9.0",
-    "@testing-library/react": "11.2.3",
+    "@babel/core": "7.14.2",
+    "@babel/preset-env": "7.14.2",
+    "@babel/preset-react": "7.13.13",
+    "@babel/preset-typescript": "7.13.0",
+    "@svgr/webpack": "5.5.0",
+    "@testing-library/jest-dom": "5.12.0",
+    "@testing-library/react": "11.2.7",
     "@types/applicationinsights-js": "1.0.7",
     "@types/codemirror": "0.0.56",
     "@types/crossroads": "0.0.30",
     "@types/d3": "5.9.2",
     "@types/dom-to-image": "2.6.2",
-    "@types/enzyme": "3.10.7",
-    "@types/enzyme-adapter-react-16": "1.0.6",
+    "@types/enzyme": "3.10.8",
     "@types/hasher": "0.0.31",
-    "@types/jest": "26.0.20",
-    "@types/node": "12.11.1",
+    "@types/memoize-one": "4.1.1",
+    "@types/mkdirp": "1.0.1",
+    "@types/node": "15.3.0",
+    "@types/node-fetch": "2.5.10",
     "@types/post-robot": "10.0.1",
+    "@types/promise.prototype.finally": "2.0.4",
+    "@types/jest": "26.0.20",
     "@types/q": "1.5.1",
-    "@types/react": "17.0.3",
-    "@types/react-dom": "17.0.3",
+    "@types/react": "17.0.5",
+    "@types/react-dom": "17.0.5",
     "@types/react-notification-system": "0.2.39",
-    "@types/react-redux": "7.1.7",
-    "@types/sanitize-html": "1.27.2",
+    "@types/react-redux": "7.1.16",
+    "@types/sanitize-html": "2.3.1",
     "@types/sinon": "2.3.3",
-    "@types/styled-components": "5.1.1",
-    "@types/underscore": "1.7.36",
-    "@typescript-eslint/eslint-plugin": "4.22.0",
-    "@typescript-eslint/parser": "4.22.0",
-    "babel-jest": "24.9.0",
-    "babel-loader": "8.1.0",
+    "@types/styled-components": "5.1.9",
+    "@types/underscore": "1.11.2",
+    "@typescript-eslint/eslint-plugin": "4.23.0",
+    "@typescript-eslint/parser": "4.23.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "0.6.1",
+    "babel-jest": "26.6.3",
+    "babel-loader": "8.2.2",
     "buffer": "5.1.0",
-    "case-sensitive-paths-webpack-plugin": "2.3.0",
+    "case-sensitive-paths-webpack-plugin": "2.4.0",
+    "clean-webpack-plugin": "4.0.0-alpha.0",
+    "copy-webpack-plugin": "8.1.1",
     "create-file-webpack": "1.0.2",
     "css-loader": "1.0.0",
     "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.5",
-    "enzyme-to-json": "3.6.1",
-    "eslint": "7.8.1",
+    "enzyme-to-json": "3.6.2",
+    "eslint": "7.26.0",
     "eslint-cli": "1.1.1",
     "eslint-plugin-no-null": "1.0.2",
-    "eslint-plugin-prefer-arrow": "1.2.2",
+    "eslint-plugin-prefer-arrow": "1.2.3",
     "eslint-plugin-react-hooks": "4.2.0",
+    "expose-loader": "2.0.0",
     "expect-playwright": "0.3.3",
     "fast-glob": "3.2.5",
-    "file-loader": "2.0.0",
+    "file-loader": "6.2.0",
     "fs-extra": "7.0.0",
     "html-inline-css-webpack-plugin": "1.11.0",
-    "html-loader": "0.5.5",
+    "html-loader": "2.1.2",
     "html-loader-jest": "0.2.1",
-    "html-webpack-plugin": "4.5.2",
-    "jest": "25.5.4",
+    "html-webpack-plugin": "5.3.1",
+    "jest": "26.6.3",
     "jest-canvas-mock": "2.1.0",
-    "jest-playwright-preset": "1.5.1",
-    "jest-trx-results-processor": "0.0.7",
-    "less": "3.8.1",
-    "less-loader": "4.1.0",
+    "jest-playwright-preset": "1.5.2",
+    "jest-trx-results-processor": "2.2.0",
+    "less": "4.1.1",
+    "less-loader": "8.1.1",
     "less-vars-loader": "1.1.0",
-    "mini-css-extract-plugin": "0.4.3",
+    "mini-css-extract-plugin": "1.6.0",
     "monaco-editor-webpack-plugin": "1.7.0",
     "node-fetch": "2.6.1",
     "playwright": "1.10.0",
-    "prettier": "2.2.1",
-    "raw-loader": "0.5.1",
+    "prettier": "2.3.0",
+    "process": "0.11.10",
+    "raw-loader": "4.0.2",
     "react-dev-utils": "11.0.4",
     "rimraf": "3.0.0",
     "sinon": "3.2.1",
-    "style-loader": "0.23.0",
-    "ts-loader": "6.2.2",
-    "tslint": "5.11.0",
-    "tslint-microsoft-contrib": "6.0.0",
+    "style-loader": "2.0.0",
+    "terser-webpack-plugin": "5.1.2",
+    "ts-loader": "9.1.2",
+    "tslint": "5.20.1",
+    "tslint-microsoft-contrib": "6.2.0",
     "typedoc": "0.20.36",
     "typescript": "4.2.4",
-    "url-loader": "1.1.1",
+    "url-loader": "4.1.1",
     "wait-on": "4.0.2",
-    "webpack": "4.46.0",
-    "webpack-bundle-analyzer": "3.6.1",
-    "webpack-cli": "3.3.10",
-    "webpack-dev-server": "3.11.0"
+    "webpack": "5.37.0",
+    "webpack-bundle-analyzer": "4.4.1",
+    "webpack-cli": "4.7.0",
+    "webpack-dev-server": "3.11.2"
   },
   "scripts": {
-    "start": "node --max-old-space-size=10196 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
+    "start": "webpack serve",
     "dev": "echo \"WARNING: npm run dev has been deprecated\" && npm run build",
     "build:dataExplorer:ci": "npm run build:ci",
     "build": "npm run format:check && npm run lint && npm run compile && npm run compile:strict && npm run pack:prod && npm run copyToConsumers",
@@ -225,4 +230,4 @@
   "prettier": {
     "printWidth": 120
   }
-}
+}

src/Common/CollapsedResourceTree.tsx

@@ -1,5 +1,5 @@
+import arrowLeftImg from "images/imgarrowlefticon.svg";
 import React, { FunctionComponent } from "react";
-import arrowLeftImg from "../../images/imgarrowlefticon.svg";
 import { userContext } from "../UserContext";
 
 export interface CollapsedResourceTreeProps {

src/Common/MongoProxyClient.test.ts

@@ -31,7 +31,7 @@ const collection = {
   },
 } as Collection;
 
-const documentId = ({
+const documentId = {
   partitionKeyHeader: () => "[]",
   self: "db/testDB/db/testCollection/docs/testId",
   partitionKeyProperty,
@@ -40,7 +40,7 @@ const documentId = ({
     kind: "Hash",
     version: 1,
   },
-} as unknown) as DocumentId;
+} as unknown as DocumentId;
 
 const databaseAccount = {
   id: "foo",

src/Common/MongoProxyClient.ts

@@ -314,7 +314,7 @@ export function createMongoCollectionWithProxy(
   return window
     .fetch(
       `${endpoint}/createCollection?${queryString.stringify(
-        (mongoParams as unknown) as queryString.ParsedUrlQueryInput
+        mongoParams as unknown as queryString.ParsedUrlQueryInput
       )}`,
       {
         method: "POST",

src/Common/ResourceTree.tsx

@@ -1,6 +1,6 @@
+import arrowLeftImg from "images/imgarrowlefticon.svg";
+import refreshImg from "images/refresh-cosmos.svg";
 import React, { FunctionComponent } from "react";
-import arrowLeftImg from "../../images/imgarrowlefticon.svg";
-import refreshImg from "../../images/refresh-cosmos.svg";
 import { AuthType } from "../AuthType";
 import { userContext } from "../UserContext";
 

src/Common/TableEntity.tsx

@@ -1,3 +1,5 @@
+import DeleteIcon from "images/delete.svg";
+import EditIcon from "images/Edit_entity.svg";
 import {
   Dropdown,
   IDropdownOption,
@@ -10,8 +12,6 @@ import {
   TooltipHost,
 } from "@fluentui/react";
 import React, { FunctionComponent } from "react";
-import DeleteIcon from "../../images/delete.svg";
-import EditIcon from "../../images/Edit_entity.svg";
 import { CassandraType, TableType } from "../Explorer/Tables/Constants";
 import { userContext } from "../UserContext";
 import { EntityValue } from "./EntityValue";

src/Common/Upload/Upload.tsx

@@ -1,6 +1,6 @@
 import { Image, Stack, TextField } from "@fluentui/react";
+import FolderIcon from "images/folder_16x16.svg";
 import React, { ChangeEvent, FunctionComponent, KeyboardEvent, useRef, useState } from "react";
-import FolderIcon from "../../../images/folder_16x16.svg";
 import * as Constants from "../Constants";
 import { InfoTooltip } from "../Tooltip/InfoTooltip";
 

src/Common/dataAccess/createTrigger.ts

@@ -54,7 +54,7 @@ export async function createTrigger(
     const response = await client()
       .database(databaseId)
       .container(collectionId)
-      .scripts.triggers.create((trigger as unknown) as TriggerDefinition); // TODO: TypeScript does not like the SQL SDK trigger type
+      .scripts.triggers.create(trigger as unknown as TriggerDefinition); // TODO: TypeScript does not like the SQL SDK trigger type
     return response.resource;
   } catch (error) {
     handleError(error, "CreateTrigger", `Error while creating trigger ${trigger.id}`);

src/Common/dataAccess/updateOffer.ts

@@ -405,7 +405,7 @@ const updateOfferWithSDK = async (params: UpdateOfferParams): Promise<Offer> =>
   const sdkResponse = await client()
     .offer(params.currentOffer.id)
     // TODO Remove casting when SDK types are fixed (https://github.com/Azure/azure-sdk-for-js/issues/10660)
-    .replace((newOffer as unknown) as OfferDefinition, options);
+    .replace(newOffer as unknown as OfferDefinition, options);
 
   return parseSDKOfferResponse(sdkResponse);
 };

src/Common/dataAccess/updateTrigger.ts

@@ -51,7 +51,7 @@ export async function updateTrigger(
       .database(databaseId)
       .container(collectionId)
       .scripts.trigger(trigger.id)
-      .replace((trigger as unknown) as TriggerDefinition); // TODO: TypeScript does not like the SQL SDK trigger type
+      .replace(trigger as unknown as TriggerDefinition); // TODO: TypeScript does not like the SQL SDK trigger type
     return response?.resource;
   } catch (error) {
     handleError(error, "UpdateTrigger", `Error while updating trigger ${trigger.id}`);

src/Explorer/ContextMenuButtonFactory.ts

@@ -1,14 +1,14 @@
-import AddCollectionIcon from "../../images/AddCollection.svg";
-import AddSqlQueryIcon from "../../images/AddSqlQuery_16x16.svg";
-import AddStoredProcedureIcon from "../../images/AddStoredProcedure.svg";
-import AddTriggerIcon from "../../images/AddTrigger.svg";
-import AddUdfIcon from "../../images/AddUdf.svg";
-import DeleteCollectionIcon from "../../images/DeleteCollection.svg";
-import DeleteDatabaseIcon from "../../images/DeleteDatabase.svg";
-import DeleteSprocIcon from "../../images/DeleteSproc.svg";
-import DeleteTriggerIcon from "../../images/DeleteTrigger.svg";
-import DeleteUDFIcon from "../../images/DeleteUDF.svg";
-import HostedTerminalIcon from "../../images/Hosted-Terminal.svg";
+import AddCollectionIcon from "images/AddCollection.svg";
+import AddSqlQueryIcon from "images/AddSqlQuery_16x16.svg";
+import AddStoredProcedureIcon from "images/AddStoredProcedure.svg";
+import AddTriggerIcon from "images/AddTrigger.svg";
+import AddUdfIcon from "images/AddUdf.svg";
+import DeleteCollectionIcon from "images/DeleteCollection.svg";
+import DeleteDatabaseIcon from "images/DeleteDatabase.svg";
+import DeleteSprocIcon from "images/DeleteSproc.svg";
+import DeleteTriggerIcon from "images/DeleteTrigger.svg";
+import DeleteUDFIcon from "images/DeleteUDF.svg";
+import HostedTerminalIcon from "images/Hosted-Terminal.svg";
 import * as ViewModels from "../Contracts/ViewModels";
 import { userContext } from "../UserContext";
 import { getCollectionName, getDatabaseName } from "../Utils/APITypeUtils";

src/Explorer/Controls/Accordion/AccordionComponent.tsx

@@ -2,10 +2,10 @@
  * Accordion top class
  */
 
+import TriangleDownIcon from "images/Triangle-down.svg";
+import TriangleRightIcon from "images/Triangle-right.svg";
 import * as React from "react";
 import AnimateHeight from "react-animate-height";
-import TriangleDownIcon from "../../../../images/Triangle-down.svg";
-import TriangleRightIcon from "../../../../images/Triangle-right.svg";
 import * as Constants from "../../../Common/Constants";
 
 export interface AccordionComponentProps {}

src/Explorer/Controls/CollapsiblePanel/CollapsiblePanel.tsx

@@ -6,8 +6,8 @@
  * - calling render()
  */
 
+import LeftArrowIcon from "images/imgarrowlefticon.svg";
 import * as React from "react";
-import LeftArrowIcon from "../../../../images/imgarrowlefticon.svg";
 import { AccessibleElement } from "../../Controls/AccessibleElement/AccessibleElement";
 
 export interface CollapsiblePanelProps {

src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx

@@ -1,8 +1,8 @@
+import CollapseChevronDownIcon from "images/QueryBuilder/CollapseChevronDown_16x.png";
 /**
  * React component for Command button component.
  */
 import * as React from "react";
-import CollapseChevronDownIcon from "../../../../images/QueryBuilder/CollapseChevronDown_16x.png";
 import { KeyCodes } from "../../../Common/Constants";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
@@ -204,11 +204,9 @@ export class CommandButtonComponent extends React.Component<CommandButtonCompone
           }}
         >
           <div className="commandDropdown">
-            {this.props.children.map(
-              (c: CommandButtonComponentProps, index: number): JSX.Element => {
-                return CommandButtonComponent.renderButton(c, `${index}`);
-              }
-            )}
+            {this.props.children.map((c: CommandButtonComponentProps, index: number): JSX.Element => {
+              return CommandButtonComponent.renderButton(c, `${index}`);
+            })}
           </div>
         </div>
       </div>

src/Explorer/Controls/Directory/DefaultDirectoryDropdownComponent.tsx

@@ -0,0 +1,69 @@
+/**
+ * React component for Switch Directory
+ */
+
+import { Dropdown, IDropdownOption, IDropdownProps } from "@fluentui/react";
+import * as React from "react";
+import _ from "underscore";
+import { Tenant } from "../../../Contracts/DataModels";
+
+export interface DefaultDirectoryDropdownProps {
+  directories: Array<Tenant>;
+  defaultDirectoryId: string;
+  onDefaultDirectoryChange: (newDirectory: Tenant) => void;
+}
+
+export class DefaultDirectoryDropdownComponent extends React.Component<DefaultDirectoryDropdownProps> {
+  public static readonly lastVisitedKey: string = "lastVisited";
+
+  public render(): JSX.Element {
+    const lastVisitedOption: IDropdownOption = {
+      key: DefaultDirectoryDropdownComponent.lastVisitedKey,
+      text: "Sign in to your last visited directory",
+    };
+    const directoryOptions: Array<IDropdownOption> = this.props.directories.map((dirc): IDropdownOption => {
+      return {
+        key: dirc.tenantId,
+        text: `${dirc.displayName}(${dirc.tenantId})`,
+      };
+    });
+    const dropDownOptions: Array<IDropdownOption> = [lastVisitedOption, ...directoryOptions];
+    const dropDownProps: IDropdownProps = {
+      label: "Set your default directory",
+      options: dropDownOptions,
+      defaultSelectedKey: this.props.defaultDirectoryId ? this.props.defaultDirectoryId : lastVisitedOption.key,
+      onChange: this._onDropdownChange,
+      className: "defaultDirectoryDropdown",
+    };
+
+    return <Dropdown {...dropDownProps} />;
+  }
+
+  private _onDropdownChange = (e: React.FormEvent<HTMLDivElement>, option?: IDropdownOption, index?: number): void => {
+    if (!option || !option.key) {
+      return;
+    }
+
+    if (option.key === this.props.defaultDirectoryId) {
+      return;
+    }
+
+    if (option.key === DefaultDirectoryDropdownComponent.lastVisitedKey) {
+      this.props.onDefaultDirectoryChange({
+        tenantId: option.key,
+        countryCode: undefined,
+        displayName: undefined,
+        domains: [],
+        id: undefined,
+      });
+      return;
+    }
+
+    const selectedDirectory = _.find(this.props.directories, (d) => d.tenantId === option.key);
+    if (!selectedDirectory) {
+      return;
+    }
+
+    this.props.onDefaultDirectoryChange(selectedDirectory);
+  };
+}

src/Explorer/Controls/DynamicList/dynamic-list.html

@@ -0,0 +1,35 @@
+<div class="dynamicList" data-bind="setTemplateReady: true">
+  <div class="dynamicListContainer" data-bind="foreach: listItems">
+    <div class="dynamicListItem">
+      <input
+        id="uniqueKeyItems"
+        type="text"
+        autocomplete="off"
+        data-bind="value: value, attr: {placeholder: $parent.placeholder, 'aria-label': $parent.ariaLabel}"
+      />
+      <span
+        class="dynamicListItemDelete"
+        title="Remove item"
+        role="button"
+        aria-label="Remove item"
+        tabindex="0"
+        data-bind="click: $parent.removeItem, event: { keydown: $parent.onRemoveItemKeyPress }"
+      >
+        <img src="/images/delete.svg" alt="Remove item" />
+      </span>
+    </div>
+  </div>
+  <div class="dynamicListItemNew">
+    <span
+      class="dynamicListItemAdd"
+      id="addUniqueKeyBtn"
+      role="button"
+      aria-label="Add unique key"
+      tabindex="0"
+      data-bind="click: addItem, event: { keydown: onAddItemKeyPress }"
+    >
+      <img src="/images/Add-property.svg" data-bind="attr: {alt: buttonText}" />
+      <span data-bind="text: buttonText"></span>
+    </span>
+  </div>
+</div>

src/Explorer/Controls/ErrorDisplayComponent/error-display-component.html

@@ -0,0 +1,6 @@
+<div class="warningErrorContainer" data-bind="visible: !!params.errorMsg()">
+  <div class="warningErrorContent">
+    <span><img src="/images/error_red.svg" alt="Error" /></span>
+    <span class="settingErrorMsg warningErrorDetailsLinkContainer" data-bind="text: params.errorMsg()"></span>
+  </div>
+</div>

src/Explorer/Controls/Notebook/NotebookTerminalComponent.test.tsx

@@ -111,9 +111,7 @@ describe("NotebookTerminalComponent", () => {
     const terminal: NotebookTerminalComponent = createTerminal();
     const params: Map<string, string> = terminal.getTerminalParams();
 
-    expect(params).toEqual(
-      new Map<string, string>([["terminal", "true"]])
-    );
+    expect(params).toEqual(new Map<string, string>([["terminal", "true"]]));
   });
 
   it("getTerminalParams: Test for Mongo 3.2 terminal", () => {

src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx

@@ -18,8 +18,8 @@ import {
   Text,
   TooltipHost,
 } from "@fluentui/react";
+import CosmosDBLogo from "images/CosmosDB-logo.svg";
 import React, { FunctionComponent, useState } from "react";
-import CosmosDBLogo from "../../../../../images/CosmosDB-logo.svg";
 import { IGalleryItem } from "../../../../Juno/JunoClient";
 import * as FileSystemUtil from "../../../Notebook/FileSystemUtil";
 

src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx

@@ -2,12 +2,12 @@
  * Wrapper around Notebook metadata
  */
 import { FontWeights, Icon, IconButton, Link, Persona, PersonaSize, PrimaryButton, Stack, Text } from "@fluentui/react";
+import CosmosDBLogo from "images/CosmosDB-logo.svg";
 import * as React from "react";
 import { IGalleryItem } from "../../../Juno/JunoClient";
 import * as FileSystemUtil from "../../Notebook/FileSystemUtil";
-import "./NotebookViewerComponent.less";
-import CosmosDBLogo from "../../../../images/CosmosDB-logo.svg";
 import { InfoComponent } from "../NotebookGallery/InfoComponent/InfoComponent";
+import "./NotebookViewerComponent.less";
 
 export interface NotebookMetadataComponentProps {
   data: IGalleryItem;

src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx

@@ -43,7 +43,8 @@ interface NotebookViewerComponentState {
 
 export class NotebookViewerComponent
   extends React.Component<NotebookViewerComponentProps, NotebookViewerComponentState>
-  implements DialogHost {
+  implements DialogHost
+{
   private clientManager: NotebookClientV2;
   private notebookComponentBootstrapper: NotebookComponentBootstrapper;
 

src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx

@@ -19,9 +19,9 @@ import {
   SelectionZone,
   TextField,
 } from "@fluentui/react";
+import SaveQueryBannerIcon from "images/save_query_banner.png";
 import * as React from "react";
 import * as _ from "underscore";
-import SaveQueryBannerIcon from "../../../../images/save_query_banner.png";
 import * as Constants from "../../../Common/Constants";
 import { StyleConstants } from "../../../Common/Constants";
 import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -1,7 +1,7 @@
 import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from "@fluentui/react";
+import DiscardIcon from "images/discard.svg";
+import SaveIcon from "images/save-cosmos.svg";
 import * as React from "react";
-import DiscardIcon from "../../../../images/discard.svg";
-import SaveIcon from "../../../../images/save-cosmos.svg";
 import { AuthType } from "../../../AuthType";
 import * as Constants from "../../../Common/Constants";
 import { getIndexTransformationProgress } from "../../../Common/dataAccess/getIndexTransformationProgress";

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.test.tsx

@@ -1,8 +1,8 @@
 import { shallow } from "enzyme";
 import React from "react";
+import { renderToString } from "react-dom/server";
 import { MongoIndexTypes, MongoNotificationMessage, MongoNotificationType } from "../../SettingsUtils";
 import { MongoIndexingPolicyComponent, MongoIndexingPolicyComponentProps } from "./MongoIndexingPolicyComponent";
-import { renderToString } from "react-dom/server";
 
 describe("MongoIndexingPolicyComponent", () => {
   const baseProps: MongoIndexingPolicyComponentProps = {
@@ -84,7 +84,7 @@ describe("MongoIndexingPolicyComponent", () => {
     ];
 
     test.each(cases)(
-      "",
+      "test Mongo Indexing Policy",
       (
         notification: MongoNotificationMessage,
         indexToDropIsPresent: boolean,
@@ -109,12 +109,13 @@ describe("MongoIndexingPolicyComponent", () => {
         expect(mongoIndexingPolicyComponent.isMongoIndexingPolicyDiscardable()).toEqual(
           isMongoIndexingPolicyDiscardable
         );
-        if (mongoWarningNotificationMessage) {
-          const elementAsString = renderToString(mongoIndexingPolicyComponent.getMongoWarningNotificationMessage());
-          expect(elementAsString).toContain(mongoWarningNotificationMessage);
-        } else {
-          expect(mongoIndexingPolicyComponent.getMongoWarningNotificationMessage()).toBeUndefined();
-        }
+
+        const warningNotificationElementAsString = renderToString(
+          mongoIndexingPolicyComponent.getMongoWarningNotificationMessage()
+        );
+        expect(warningNotificationElementAsString.includes(mongoWarningNotificationMessage)).toEqual(
+          !!mongoWarningNotificationMessage
+        );
       }
     );
   });

src/Explorer/Controls/Settings/TestUtils.tsx

@@ -5,7 +5,7 @@ import Explorer from "../../Explorer";
 
 export const container = new Explorer();
 
-export const collection = ({
+export const collection = {
   container: container,
   databaseId: "test",
   id: ko.observable<string>("test"),
@@ -43,4 +43,4 @@ export const collection = ({
   readSettings: () => {
     return;
   },
-} as unknown) as ViewModels.Collection;
+} as unknown as ViewModels.Collection;

src/Explorer/Controls/ThroughputInput/ThroughputInputComponentAutoscaleV3.html

@@ -0,0 +1,194 @@
+<div>
+  <div>
+    <p class="pkPadding">
+      <!-- ko if: showAsMandatory -->
+      <span class="mandatoryStar">*</span>
+      <!-- /ko -->
+
+      <span data-bind="text: label"></span>
+
+      <!-- ko if: infoBubbleText -->
+      <span class="infoTooltip" role="tooltip" tabindex="0">
+        <img class="infoImg" src="/images/info-bubble.svg" alt="More information" />
+        <span data-bind="text: infoBubbleText" class="tooltiptext throughputRuInfo"></span>
+      </span>
+      <!-- /ko -->
+    </p>
+  </div>
+
+  <!-- ko if: !isFixed -->
+  <div class="throughputModeContainer">
+    <input
+      class="throughputModeRadio"
+      aria-label="Autopilot mode"
+      type="radio"
+      role="radio"
+      tabindex="0"
+      data-bind="
+          checked: isAutoPilotSelected,
+          checkedValue: true,
+          attr: {
+            id: throughputAutoPilotRadioId,
+            name: throughputModeRadioName,
+            'aria-checked': isAutoPilotSelected() ? 'true' : 'false'
+          }"
+    />
+    <span
+      class="throughputModeSpace"
+      data-bind="
+          attr: {
+            for: throughputAutoPilotRadioId
+          }"
+      >Autoscale
+    </span>
+
+    <input
+      class="throughputModeRadio nonFirstRadio"
+      aria-label="Manual mode"
+      type="radio"
+      role="radio"
+      tabindex="0"
+      data-bind="
+          checked: isAutoPilotSelected,
+          checkedValue: false,
+          attr: {
+            id:  throughputProvisionedRadioId,
+            name: throughputModeRadioName,
+            'aria-checked': !isAutoPilotSelected() ? 'true' : 'false'
+          }"
+    />
+    <span
+      class="throughputModeSpace"
+      data-bind="attr: {
+          for: throughputProvisionedRadioId
+        }"
+      >Manual
+    </span>
+  </div>
+  <!-- /ko -->
+
+  <div data-bind="visible: isAutoPilotSelected">
+    <p>
+      <span
+        >Provision maximum RU/s required by this resource. Estimate your required RU/s with
+        <a target="_blank" href="https://cosmos.azure.com/capacitycalculator/">capacity calculator</a>.</span
+      >
+    </p>
+    <p>
+      <span>Max RU/s</span>
+    </p>
+    <div data-bind="setTemplateReady: true">
+      <input
+        data-bind="textInput: overrideWithProvisionedThroughputSettings() ? '' : maxAutoPilotThroughputSet, attr:{
+        disabled: overrideWithProvisionedThroughputSettings(),
+        step: step,
+        'class':'migration collid select-font-size',
+        min: minAutoPilotThroughput,
+        'aria-label': 'Max request units per second',
+        type: isAutoscaleThroughputInputFieldRequired() ? 'number' : 'hidden',
+        css: {
+          dirty: maxAutoPilotThroughputSet.editableIsDirty
+      }
+    }"
+      />
+    </div>
+    <p data-bind="visible: overrideWithProvisionedThroughputSettings && !overrideWithProvisionedThroughputSettings()">
+      <span
+        data-bind="
+              html: autoPilotUsageCost"
+      ></span>
+    </p>
+    <p
+      data-bind="visible: costsVisible && overrideWithProvisionedThroughputSettings && !overrideWithProvisionedThroughputSettings()"
+    >
+      <span data-bind="html: requestUnitsUsageCost"></span>
+    </p>
+
+    <!-- ko if: spendAckVisible -->
+    <p class="pkPadding">
+      <input
+        type="checkbox"
+        aria-label="acknowledge spend throughput"
+        data-bind="
+            attr: {
+              title: spendAckText,
+              id: spendAckId
+            },
+            checked: spendAckChecked"
+      />
+      <span data-bind="text: spendAckText, attr: { for: spendAckId }"></span>
+    </p>
+    <!-- /ko -->
+
+    <!-- ko if: isFixed -->
+    <p>Choose unlimited storage capacity for more than 10,000 RU/s.</p>
+    <!-- /ko -->
+  </div>
+
+  <div data-bind="visible: !isAutoPilotSelected()">
+    <p>
+      <span
+        >Estimate your required throughput with
+        <a target="_blank" href="https://cosmos.azure.com/capacitycalculator/">capacity calculator</a></span
+      >
+    </p>
+
+    <div class="inputTooltip">
+      <span
+        data-bind="text: freeTierExceedThroughputTooltip, visible: showFreeTierExceedThroughputTooltip"
+        class="inputTooltipText"
+      ></span>
+    </div>
+
+    <div data-bind="setTemplateReady: true">
+      <input
+        data-bind="
+            textInput: overrideWithAutoPilotSettings() ? maxAutoPilotThroughputSet : value,
+            css: {
+                dirty: value.editableIsDirty
+            },
+            enable: isEnabled,
+            attr:{
+                type: isManualThroughputInputFieldRequired() ? 'number' : 'hidden',
+                'data-test': testId,
+                'class': cssClass,
+                step: step,
+                min: minimum,
+                max: canExceedMaximumValue() ? null : maximum,
+                'aria-label': ariaLabel,
+                disabled: overrideWithAutoPilotSettings(),
+                required: isManualThroughputInputFieldRequired()
+            }"
+      />
+    </div>
+
+    <div class="freeTierInlineWarning" data-bind="visible: showFreeTierExceedThroughputWarning">
+      <span class="freeTierWarningIcon"><img src="/images/warning.svg" alt="Warning" /></span>
+      <span class="freeTierWarningMessage" data-bind="text: freeTierExceedThroughputWarning"></span>
+    </div>
+
+    <p data-bind="visible: costsVisible">
+      <span data-bind="html: requestUnitsUsageCost"></span>
+    </p>
+
+    <!-- ko if: spendAckVisible -->
+    <p class="pkPadding">
+      <input
+        type="checkbox"
+        aria-label="acknowledge spend throughput"
+        data-bind="
+        attr: {
+          title: spendAckText,
+          id: spendAckId
+        },
+        checked: spendAckChecked"
+      />
+      <span data-bind="text: spendAckText, attr: { for: spendAckId }"></span>
+    </p>
+    <!-- /ko -->
+
+    <!-- ko if: isFixed -->
+    <p>Choose unlimited storage capacity for more than 10,000 RU/s.</p>
+    <!-- /ko -->
+  </div>
+</div>

src/Explorer/Controls/TreeComponent/TreeComponent.tsx

@@ -12,11 +12,11 @@ import {
   IContextualMenuItemProps,
   IContextualMenuProps,
 } from "@fluentui/react";
+import LoadingIndicator_3Squares from "images/LoadingIndicator_3Squares.gif";
+import TriangleDownIcon from "images/Triangle-down.svg";
+import TriangleRightIcon from "images/Triangle-right.svg";
 import * as React from "react";
 import AnimateHeight from "react-animate-height";
-import LoadingIndicator_3Squares from "../../../../images/LoadingIndicator_3Squares.gif";
-import TriangleDownIcon from "../../../../images/Triangle-down.svg";
-import TriangleRightIcon from "../../../../images/Triangle-right.svg";
 import * as Constants from "../../../Common/Constants";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";

src/Explorer/Explorer.tsx

@@ -793,9 +793,9 @@ export default class Explorer {
   }
 
   public findSelectedCollection(): ViewModels.Collection {
-    return (this.selectedNode().nodeKind === "Collection"
-      ? this.selectedNode()
-      : this.selectedNode().collection) as ViewModels.Collection;
+    return (
+      this.selectedNode().nodeKind === "Collection" ? this.selectedNode() : this.selectedNode().collection
+    ) as ViewModels.Collection;
   }
 
   public isRunningOnNationalCloud(): boolean {
@@ -887,9 +887,7 @@ export default class Explorer {
     return true;
   }
 
-  private getDeltaDatabases(
-    updatedDatabaseList: DataModels.Database[]
-  ): {
+  private getDeltaDatabases(updatedDatabaseList: DataModels.Database[]): {
     toAdd: ViewModels.Database[];
     toDelete: ViewModels.Database[];
   } {

src/Explorer/Graph/GraphExplorerComponent/EditorNeighborsComponent.tsx

@@ -3,13 +3,13 @@
  * Editor for neighbors (targets or sources)
  */
 
+import AddPropertyIcon from "images/Add-property.svg";
+import DeleteIcon from "images/delete.svg";
 import * as React from "react";
-import { NeighborVertexBasicInfo, EditedEdges, GraphNewEdgeData, PossibleVertex } from "./GraphExplorer";
-import * as GraphUtil from "./GraphUtil";
-import * as InputTypeaheadComponent from "../../Controls/InputTypeahead/InputTypeaheadComponent";
-import DeleteIcon from "../../../../images/delete.svg";
-import AddPropertyIcon from "../../../../images/Add-property.svg";
 import { AccessibleElement } from "../../Controls/AccessibleElement/AccessibleElement";
+import * as InputTypeaheadComponent from "../../Controls/InputTypeahead/InputTypeaheadComponent";
+import { EditedEdges, GraphNewEdgeData, NeighborVertexBasicInfo, PossibleVertex } from "./GraphExplorer";
+import * as GraphUtil from "./GraphUtil";
 
 export interface EditorNeighborsComponentProps {
   isSource: boolean;

src/Explorer/Graph/GraphExplorerComponent/EditorNodePropertiesComponent.tsx

@@ -3,13 +3,13 @@
  * Read-only properties
  */
 
+import AddIcon from "images/Add-property.svg";
+import DeleteIcon from "images/delete.svg";
 import * as React from "react";
 import * as ViewModels from "../../../Contracts/ViewModels";
-import { EditedProperties } from "./GraphExplorer";
-import DeleteIcon from "../../../../images/delete.svg";
-import AddIcon from "../../../../images/Add-property.svg";
-import { ReadOnlyNodePropertiesComponent } from "./ReadOnlyNodePropertiesComponent";
 import { AccessibleElement } from "../../Controls/AccessibleElement/AccessibleElement";
+import { EditedProperties } from "./GraphExplorer";
+import { ReadOnlyNodePropertiesComponent } from "./ReadOnlyNodePropertiesComponent";
 
 export interface EditorNodePropertiesComponentProps {
   editedProperties: EditedProperties;

src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.test.tsx

@@ -207,11 +207,9 @@ describe("GraphExplorer", () => {
     const gVRU = 123.456;
 
     const disableMonacoEditor = (graphExplorer: GraphExplorer) => {
-      renderResultAsJsonStub = sinon.stub(graphExplorer, "renderResultAsJson").callsFake(
-        (): JSX.Element => {
-          return <div>[Monaco Editor Stub]</div>;
-        }
-      );
+      renderResultAsJsonStub = sinon.stub(graphExplorer, "renderResultAsJson").callsFake((): JSX.Element => {
+        return <div>[Monaco Editor Stub]</div>;
+      });
     };
 
     interface AjaxResponse {

src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx

@@ -1,8 +1,8 @@
 import { FeedOptions, ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
+import LoadGraphIcon from "images/LoadGraph.png";
+import LoadingIndicatorIcon from "images/LoadingIndicator_3Squares.gif";
 import * as Q from "q";
 import * as React from "react";
-import LoadGraphIcon from "../../../../images/LoadGraph.png";
-import LoadingIndicatorIcon from "../../../../images/LoadingIndicator_3Squares.gif";
 import * as Constants from "../../../Common/Constants";
 import { queryDocuments } from "../../../Common/dataAccess/queryDocuments";
 import { queryDocumentsPage } from "../../../Common/dataAccess/queryDocumentsPage";
@@ -633,40 +633,38 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       promise = Q.resolve(0);
     }
 
-    promise = promise.then(
-      (outEPairsNb: number): Q.Promise<number> => {
-        const inEdgesToFetch = totalEdgesToFetch - outEPairsNb;
-        if (!vertex._inEAllLoaded && inEdgesToFetch > 0) {
-          let start: number;
-          if (offsetIndex <= vertex._outEdgeIds.length) {
-            start = 0;
-          } else {
-            start = offsetIndex - vertex._outEdgeIds.length;
-          }
-
-          return this.fetchEdgeVertexPairs(false, vertex, start, inEdgesToFetch).then(
-            (pairs: EdgeVertexPair[]): number => {
-              vertex._inEAllLoaded = pairs.length < inEdgesToFetch;
-
-              const pairsToAdd = pairs.slice(0, GraphExplorer.LOAD_PAGE_SIZE - outEPairsNb);
-              pairsToAdd.forEach((p: EdgeVertexPair) => {
-                GraphData.GraphData.addInE(vertex, p.e.label, p.e);
-                GraphUtil.addRootChildToGraph(vertex, p.v, graphData);
-                graphData.addEdge(p.e);
-                vertex._inEdgeIds.push(p.e.id);
-
-                // Cache results (graphdata now contains a vertex with outE's filled in)
-                this.edgeInfoCache.addVertex(graphData.getVertexById(p.v.id));
-              });
-              addedEdgesNb += pairsToAdd.length;
-              return outEPairsNb + pairs.length;
-            }
-          );
+    promise = promise.then((outEPairsNb: number): Q.Promise<number> => {
+      const inEdgesToFetch = totalEdgesToFetch - outEPairsNb;
+      if (!vertex._inEAllLoaded && inEdgesToFetch > 0) {
+        let start: number;
+        if (offsetIndex <= vertex._outEdgeIds.length) {
+          start = 0;
         } else {
-          return Q.resolve(outEPairsNb);
+          start = offsetIndex - vertex._outEdgeIds.length;
         }
+
+        return this.fetchEdgeVertexPairs(false, vertex, start, inEdgesToFetch).then(
+          (pairs: EdgeVertexPair[]): number => {
+            vertex._inEAllLoaded = pairs.length < inEdgesToFetch;
+
+            const pairsToAdd = pairs.slice(0, GraphExplorer.LOAD_PAGE_SIZE - outEPairsNb);
+            pairsToAdd.forEach((p: EdgeVertexPair) => {
+              GraphData.GraphData.addInE(vertex, p.e.label, p.e);
+              GraphUtil.addRootChildToGraph(vertex, p.v, graphData);
+              graphData.addEdge(p.e);
+              vertex._inEdgeIds.push(p.e.id);
+
+              // Cache results (graphdata now contains a vertex with outE's filled in)
+              this.edgeInfoCache.addVertex(graphData.getVertexById(p.v.id));
+            });
+            addedEdgesNb += pairsToAdd.length;
+            return outEPairsNb + pairs.length;
+          }
+        );
+      } else {
+        return Q.resolve(outEPairsNb);
       }
-    );
+    });
 
     return promise.then((nbPairsFetched: number) => {
       if (offsetIndex >= GraphExplorer.LOAD_PAGE_SIZE || !vertex._outEAllLoaded || !vertex._inEAllLoaded) {
@@ -1221,16 +1219,13 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
 
   private getPossibleRootNodes(): LeftPane.CaptionId[] {
     const key = this.state.igraphConfig.nodeCaption;
-    return $.map(
-      this.state.rootMap,
-      (value: any, index: number): LeftPane.CaptionId => {
-        let result = GraphData.GraphData.getNodePropValue(value, key);
-        return {
-          caption: result !== undefined ? result : value.id,
-          id: value.id,
-        };
-      }
-    );
+    return $.map(this.state.rootMap, (value: any, index: number): LeftPane.CaptionId => {
+      let result = GraphData.GraphData.getNodePropValue(value, key);
+      return {
+        caption: result !== undefined ? result : value.id,
+        id: value.id,
+      };
+    });
   }
 
   /**

src/Explorer/Graph/GraphExplorerComponent/GremlinSimpleClient.test.ts

@@ -94,236 +94,16 @@ describe("Gremlin Simple Client", () => {
       result: { data: ["é"], meta: {} },
     };
     const expectedDecodedUint8ArrayValues = [
-      123,
-      34,
-      114,
-      101,
-      113,
-      117,
-      101,
-      115,
-      116,
-      73,
-      100,
-      34,
-      58,
-      34,
-      100,
-      55,
-      55,
-      50,
-      102,
-      56,
-      57,
-      55,
-      45,
-      48,
-      100,
-      52,
-      100,
-      45,
-      52,
-      99,
-      100,
-      49,
-      45,
-      98,
-      51,
-      54,
-      48,
-      45,
-      100,
-      100,
-      102,
-      54,
-      99,
-      56,
-      54,
-      98,
-      57,
-      51,
-      97,
-      51,
-      34,
-      44,
-      34,
-      115,
-      116,
-      97,
-      116,
-      117,
-      115,
-      34,
-      58,
-      123,
-      34,
-      99,
-      111,
-      100,
-      101,
-      34,
-      58,
-      50,
-      48,
-      48,
-      44,
-      34,
-      97,
-      116,
-      116,
-      114,
-      105,
-      98,
-      117,
-      116,
-      101,
-      115,
-      34,
-      58,
-      123,
-      34,
-      103,
-      114,
-      97,
-      112,
-      104,
-      69,
-      120,
-      101,
-      99,
-      117,
-      116,
-      105,
-      111,
-      110,
-      83,
-      116,
-      97,
-      116,
-      117,
-      115,
-      34,
-      58,
-      50,
-      48,
-      48,
-      44,
-      34,
-      83,
-      116,
-      111,
-      114,
-      97,
-      103,
-      101,
-      82,
-      85,
-      34,
-      58,
-      50,
-      46,
-      50,
-      57,
-      44,
-      34,
-      67,
-      111,
-      109,
-      112,
-      117,
-      116,
-      101,
-      82,
-      85,
-      34,
-      58,
-      49,
-      46,
-      48,
-      55,
-      44,
-      34,
-      80,
-      101,
-      114,
-      80,
-      97,
-      114,
-      116,
-      105,
-      116,
-      105,
-      111,
-      110,
-      67,
-      111,
-      109,
-      112,
-      117,
-      116,
-      101,
-      67,
-      104,
-      97,
-      114,
-      103,
-      101,
-      115,
-      34,
-      58,
-      123,
-      125,
-      125,
-      44,
-      34,
-      109,
-      101,
-      115,
-      115,
-      97,
-      103,
-      101,
-      34,
-      58,
-      34,
-      34,
-      125,
-      44,
-      34,
-      114,
-      101,
-      115,
-      117,
-      108,
-      116,
-      34,
-      58,
-      123,
-      34,
-      100,
-      97,
-      116,
-      97,
-      34,
-      58,
-      91,
-      34,
-      195,
-      169,
-      34,
-      93,
-      44,
-      34,
-      109,
-      101,
-      116,
-      97,
-      34,
-      58,
-      123,
-      125,
-      125,
-      125,
+      123, 34, 114, 101, 113, 117, 101, 115, 116, 73, 100, 34, 58, 34, 100, 55, 55, 50, 102, 56, 57, 55, 45, 48, 100,
+      52, 100, 45, 52, 99, 100, 49, 45, 98, 51, 54, 48, 45, 100, 100, 102, 54, 99, 56, 54, 98, 57, 51, 97, 51, 34, 44,
+      34, 115, 116, 97, 116, 117, 115, 34, 58, 123, 34, 99, 111, 100, 101, 34, 58, 50, 48, 48, 44, 34, 97, 116, 116,
+      114, 105, 98, 117, 116, 101, 115, 34, 58, 123, 34, 103, 114, 97, 112, 104, 69, 120, 101, 99, 117, 116, 105, 111,
+      110, 83, 116, 97, 116, 117, 115, 34, 58, 50, 48, 48, 44, 34, 83, 116, 111, 114, 97, 103, 101, 82, 85, 34, 58, 50,
+      46, 50, 57, 44, 34, 67, 111, 109, 112, 117, 116, 101, 82, 85, 34, 58, 49, 46, 48, 55, 44, 34, 80, 101, 114, 80,
+      97, 114, 116, 105, 116, 105, 111, 110, 67, 111, 109, 112, 117, 116, 101, 67, 104, 97, 114, 103, 101, 115, 34, 58,
+      123, 125, 125, 44, 34, 109, 101, 115, 115, 97, 103, 101, 34, 58, 34, 34, 125, 44, 34, 114, 101, 115, 117, 108,
+      116, 34, 58, 123, 34, 100, 97, 116, 97, 34, 58, 91, 34, 195, 169, 34, 93, 44, 34, 109, 101, 116, 97, 34, 58, 123,
+      125, 125, 125,
     ];
     // We do our best here to emulate what the server should return
     const gremlinResponseData = new Uint8Array(<any>expectedDecodedUint8ArrayValues).buffer;

src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx

@@ -1,8 +1,8 @@
+import CollapseArrowIcon from "images/Collapse_arrow_14x14.svg";
+import ExpandIcon from "images/Expand_14x14.svg";
+import LoadingIndicatorIcon from "images/LoadingIndicator_3Squares.gif";
 import * as React from "react";
 import { GraphVizComponent, GraphVizComponentProps } from "./GraphVizComponent";
-import CollapseArrowIcon from "../../../../images/Collapse_arrow_14x14.svg";
-import ExpandIcon from "../../../../images/Expand_14x14.svg";
-import LoadingIndicatorIcon from "../../../../images/LoadingIndicator_3Squares.gif";
 
 interface MiddlePaneComponentProps {
   isTabsContentExpanded: boolean;

src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx

@@ -4,22 +4,27 @@
  * The mode is controlled by the parent of this component
  */
 
+import CancelIcon from "images/cancel.svg";
+import CheckIcon from "images/check1.svg";
+import DeleteIcon from "images/delete.svg";
+import EditIcon from "images/Edit_entity.svg";
 import * as React from "react";
-import { GraphHighlightedNodeData, EditedProperties, EditedEdges, PossibleVertex } from "./GraphExplorer";
-import { CollapsiblePanel } from "../../Controls/CollapsiblePanel/CollapsiblePanel";
-import { ReadOnlyNodePropertiesComponent } from "./ReadOnlyNodePropertiesComponent";
-import { EditorNodePropertiesComponent } from "./EditorNodePropertiesComponent";
-import { ReadOnlyNeighborsComponent } from "./ReadOnlyNeighborsComponent";
 import * as ViewModels from "../../../Contracts/ViewModels";
-import { Item } from "../../Controls/InputTypeahead/InputTypeaheadComponent";
-import * as EditorNeighbors from "./EditorNeighborsComponent";
-import EditIcon from "../../../../images/edit.svg";
-import DeleteIcon from "../../../../images/delete.svg";
-import CheckIcon from "../../../../images/check.svg";
-import CancelIcon from "../../../../images/cancel.svg";
-import { GraphExplorer } from "./GraphExplorer";
-import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
 import { AccessibleElement } from "../../Controls/AccessibleElement/AccessibleElement";
+import { CollapsiblePanel } from "../../Controls/CollapsiblePanel/CollapsiblePanel";
+import { Item } from "../../Controls/InputTypeahead/InputTypeaheadComponent";
+import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
+import * as EditorNeighbors from "./EditorNeighborsComponent";
+import { EditorNodePropertiesComponent } from "./EditorNodePropertiesComponent";
+import {
+  EditedEdges,
+  EditedProperties,
+  GraphExplorer,
+  GraphHighlightedNodeData,
+  PossibleVertex,
+} from "./GraphExplorer";
+import { ReadOnlyNeighborsComponent } from "./ReadOnlyNeighborsComponent";
+import { ReadOnlyNodePropertiesComponent } from "./ReadOnlyNodePropertiesComponent";
 
 export enum Mode {
   READONLY_PROP,

src/Explorer/Graph/GraphExplorerComponent/QueryContainerComponent.tsx

@@ -1,6 +1,6 @@
+import CloseIcon from "images/close-black.svg";
 import * as React from "react";
 import * as InputTypeaheadComponent from "../../Controls/InputTypeahead/InputTypeaheadComponent";
-import CloseIcon from "../../../../images/close-black.svg";
 
 export interface QueryContainerComponentProps {
   initialQuery: string;

src/Explorer/Graph/GraphStyleComponent/GraphStyleComponent.test.tsx

@@ -43,7 +43,7 @@ describe("Graph Style Component", () => {
     expect(asFragment).toMatchSnapshot();
   });
 
-  it("should render node properties dropdown list ", () => {
+  it("should render node properties dropdown list", () => {
     const dropDownList = screen.getByText("Show vertex (node) as");
     expect(dropDownList).toBeDefined();
   });

src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx

@@ -1,7 +1,7 @@
 import { Dropdown, IDropdownOption, Stack, TextField } from "@fluentui/react";
+import AddIcon from "images/Add-property.svg";
+import DeleteIcon from "images/delete.svg";
 import React, { FunctionComponent, useRef, useState } from "react";
-import AddIcon from "../../../../images/Add-property.svg";
-import DeleteIcon from "../../../../images/delete.svg";
 import { NormalizedEventKey } from "../../../Common/Constants";
 import { GremlinPropertyValueType, InputPropertyValueTypeString, NewVertexData } from "../../../Contracts/ViewModels";
 import { EditorNodePropertiesComponent } from "../GraphExplorerComponent/EditorNodePropertiesComponent";

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -1,22 +1,22 @@
+import AddCollectionIcon from "images/AddCollection.svg";
+import AddDatabaseIcon from "images/AddDatabase.svg";
+import AddSqlQueryIcon from "images/AddSqlQuery_16x16.svg";
+import AddStoredProcedureIcon from "images/AddStoredProcedure.svg";
+import AddTriggerIcon from "images/AddTrigger.svg";
+import AddUdfIcon from "images/AddUdf.svg";
+import BrowseQueriesIcon from "images/BrowseQuery.svg";
+import CosmosTerminalIcon from "images/Cosmos-Terminal.svg";
+import FeedbackIcon from "images/Feedback-Command.svg";
+import GitHubIcon from "images/github.svg";
+import HostedTerminalIcon from "images/Hosted-Terminal.svg";
+import EnableNotebooksIcon from "images/notebook/Notebook-enable.svg";
+import NewNotebookIcon from "images/notebook/Notebook-new.svg";
+import ResetWorkspaceIcon from "images/notebook/Notebook-reset-workspace.svg";
+import OpenInTabIcon from "images/open-in-tab.svg";
+import OpenQueryFromDiskIcon from "images/OpenQueryFromDisk.svg";
+import SettingsIcon from "images/settings_15x15.svg";
+import SynapseIcon from "images/synapse-link.svg";
 import * as React from "react";
-import AddCollectionIcon from "../../../../images/AddCollection.svg";
-import AddDatabaseIcon from "../../../../images/AddDatabase.svg";
-import AddSqlQueryIcon from "../../../../images/AddSqlQuery_16x16.svg";
-import AddStoredProcedureIcon from "../../../../images/AddStoredProcedure.svg";
-import AddTriggerIcon from "../../../../images/AddTrigger.svg";
-import AddUdfIcon from "../../../../images/AddUdf.svg";
-import BrowseQueriesIcon from "../../../../images/BrowseQuery.svg";
-import CosmosTerminalIcon from "../../../../images/Cosmos-Terminal.svg";
-import FeedbackIcon from "../../../../images/Feedback-Command.svg";
-import GitHubIcon from "../../../../images/github.svg";
-import HostedTerminalIcon from "../../../../images/Hosted-Terminal.svg";
-import EnableNotebooksIcon from "../../../../images/notebook/Notebook-enable.svg";
-import NewNotebookIcon from "../../../../images/notebook/Notebook-new.svg";
-import ResetWorkspaceIcon from "../../../../images/notebook/Notebook-reset-workspace.svg";
-import OpenInTabIcon from "../../../../images/open-in-tab.svg";
-import OpenQueryFromDiskIcon from "../../../../images/OpenQueryFromDisk.svg";
-import SettingsIcon from "../../../../images/settings_15x15.svg";
-import SynapseIcon from "../../../../images/synapse-link.svg";
 import { AuthType } from "../../../AuthType";
 import * as Constants from "../../../Common/Constants";
 import { configContext, Platform } from "../../../ConfigContext";

src/Explorer/Menus/CommandBar/CommandBarUtil.tsx

@@ -1,15 +1,8 @@
-import {
-  Dropdown,
-  ICommandBarItemProps,
-  IComponentAsProps,
-  IconType,
-  IDropdownOption,
-  IDropdownStyles,
-} from "@fluentui/react";
+import { ICommandBarItemProps, IconType, IDropdownOption, IDropdownStyles } from "@fluentui/react";
+import ChevronDownIcon from "images/Chevron_down.svg";
 import { Observable } from "knockout";
 import * as React from "react";
 import _ from "underscore";
-import ChevronDownIcon from "../../../../images/Chevron_down.svg";
 import { StyleConstants } from "../../../Common/Constants";
 import { MemoryUsageInfo } from "../../../Contracts/DataModels";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
@@ -26,150 +19,135 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
 
   return btns
     .filter((btn) => btn)
-    .map(
-      (btn: CommandButtonComponentProps, index: number): ICommandBarItemProps => {
-        if (btn.isDivider) {
-          return createDivider(btn.commandButtonLabel);
-        }
+    .map((btn: CommandButtonComponentProps, index: number): ICommandBarItemProps => {
+      if (btn.isDivider) {
+        return createDivider(btn.commandButtonLabel);
+      }
 
-        const isSplit = !!btn.children && btn.children.length > 0;
-        const label = btn.commandButtonLabel || btn.tooltipText;
-        const result: ICommandBarItemProps = {
-          iconProps: {
-            style: {
-              width: StyleConstants.CommandBarIconWidth, // 16
-              alignSelf: btn.iconName ? "baseline" : undefined,
-            },
-            imageProps: btn.iconSrc ? { src: btn.iconSrc, alt: btn.iconAlt } : undefined,
-            iconName: btn.iconName,
+      const isSplit = !!btn.children && btn.children.length > 0;
+      const label = btn.commandButtonLabel || btn.tooltipText;
+      const result: ICommandBarItemProps = {
+        iconProps: {
+          style: {
+            width: StyleConstants.CommandBarIconWidth, // 16
+            alignSelf: btn.iconName ? "baseline" : undefined,
           },
-          onClick: (ev?: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement>) => {
-            btn.onCommandClick(ev);
-            TelemetryProcessor.trace(Action.ClickCommandBarButton, ActionModifiers.Mark, { label });
+          imageProps: btn.iconSrc ? { src: btn.iconSrc, alt: btn.iconAlt } : undefined,
+          iconName: btn.iconName,
+        },
+        onClick: (ev?: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement>) => {
+          btn.onCommandClick(ev);
+          TelemetryProcessor.trace(Action.ClickCommandBarButton, ActionModifiers.Mark, { label });
+        },
+        key: `${btn.commandButtonLabel}${index}`,
+        text: label,
+        "data-test": label,
+        title: btn.tooltipText,
+        name: label,
+        disabled: btn.disabled,
+        ariaLabel: btn.ariaLabel,
+        buttonStyles: {
+          root: {
+            backgroundColor: backgroundColor,
+            height: buttonHeightPx,
+            paddingRight: 0,
+            paddingLeft: 0,
+            minWidth: 24,
+            marginLeft: isSplit ? 0 : 5,
+            marginRight: isSplit ? 0 : 5,
           },
-          key: `${btn.commandButtonLabel}${index}`,
-          text: label,
-          "data-test": label,
-          title: btn.tooltipText,
-          name: label,
-          disabled: btn.disabled,
-          ariaLabel: btn.ariaLabel,
-          buttonStyles: {
-            root: {
-              backgroundColor: backgroundColor,
-              height: buttonHeightPx,
-              paddingRight: 0,
-              paddingLeft: 0,
-              minWidth: 24,
-              marginLeft: isSplit ? 0 : 5,
-              marginRight: isSplit ? 0 : 5,
+          rootDisabled: {
+            backgroundColor: backgroundColor,
+            pointerEvents: "auto",
+          },
+          splitButtonMenuButton: {
+            backgroundColor: backgroundColor,
+            selectors: {
+              ":hover": { backgroundColor: StyleConstants.AccentLight },
             },
-            rootDisabled: {
-              backgroundColor: backgroundColor,
-              pointerEvents: "auto",
+            width: 16,
+          },
+          label: { fontSize: StyleConstants.mediumFontSize },
+          rootHovered: { backgroundColor: StyleConstants.AccentLight },
+          rootPressed: { backgroundColor: StyleConstants.AccentLight },
+          splitButtonMenuButtonExpanded: {
+            backgroundColor: StyleConstants.AccentExtra,
+            selectors: {
+              ":hover": { backgroundColor: StyleConstants.AccentLight },
             },
-            splitButtonMenuButton: {
-              backgroundColor: backgroundColor,
+          },
+          splitButtonDivider: {
+            display: "none",
+          },
+          icon: {
+            paddingLeft: 0,
+            paddingRight: 0,
+          },
+          splitButtonContainer: {
+            marginLeft: 5,
+            marginRight: 5,
+          },
+        },
+        className: btn.className,
+        id: btn.id,
+      };
+
+      if (isSplit) {
+        // It's a split button
+        result.split = true;
+
+        result.subMenuProps = {
+          items: convertButton(btn.children, backgroundColor),
+          styles: {
+            list: {
+              // TODO Figure out how to do it the proper way with subComponentStyles.
+              // TODO Remove all this crazy styling once we adopt Ui-Fabric Azure themes
               selectors: {
-                ":hover": { backgroundColor: StyleConstants.AccentLight },
-              },
-              width: 16,
-            },
-            label: { fontSize: StyleConstants.mediumFontSize },
-            rootHovered: { backgroundColor: StyleConstants.AccentLight },
-            rootPressed: { backgroundColor: StyleConstants.AccentLight },
-            splitButtonMenuButtonExpanded: {
-              backgroundColor: StyleConstants.AccentExtra,
-              selectors: {
-                ":hover": { backgroundColor: StyleConstants.AccentLight },
+                ".ms-ContextualMenu-itemText": { fontSize: StyleConstants.mediumFontSize },
+                ".ms-ContextualMenu-link:hover": { backgroundColor: StyleConstants.AccentLight },
+                ".ms-ContextualMenu-icon": { width: 16, height: 16 },
               },
             },
-            splitButtonDivider: {
-              display: "none",
-            },
-            icon: {
-              paddingLeft: 0,
-              paddingRight: 0,
-            },
-            splitButtonContainer: {
-              marginLeft: 5,
-              marginRight: 5,
-            },
           },
-          className: btn.className,
-          id: btn.id,
         };
 
-        if (isSplit) {
-          // It's a split button
-          result.split = true;
+        result.menuIconProps = {
+          iconType: IconType.image,
+          style: {
+            width: 12,
+            paddingLeft: 1,
+            paddingTop: 6,
+          },
+          imageProps: { src: ChevronDownIcon, alt: btn.iconAlt },
+        };
+      }
 
-          result.subMenuProps = {
-            items: convertButton(btn.children, backgroundColor),
-            styles: {
-              list: {
-                // TODO Figure out how to do it the proper way with subComponentStyles.
-                // TODO Remove all this crazy styling once we adopt Ui-Fabric Azure themes
-                selectors: {
-                  ".ms-ContextualMenu-itemText": { fontSize: StyleConstants.mediumFontSize },
-                  ".ms-ContextualMenu-link:hover": { backgroundColor: StyleConstants.AccentLight },
-                  ".ms-ContextualMenu-icon": { width: 16, height: 16 },
-                },
-              },
-            },
-          };
+      if (btn.isDropdown) {
+        const selectedChild = _.find(btn.children, (child) => child.dropdownItemKey === btn.dropdownSelectedKey);
+        result.name = selectedChild?.commandButtonLabel || btn.dropdownPlaceholder;
 
-          result.menuIconProps = {
-            iconType: IconType.image,
-            style: {
-              width: 12,
-              paddingLeft: 1,
-              paddingTop: 6,
-            },
-            imageProps: { src: ChevronDownIcon, alt: btn.iconAlt },
-          };
-        }
+        const dropdownStyles: Partial<IDropdownStyles> = {
+          root: { margin: 5 },
+          dropdown: { width: btn.dropdownWidth },
+          title: { fontSize: 12, height: 30, lineHeight: 28 },
+          dropdownItem: { fontSize: 12, lineHeight: 28, minHeight: 30 },
+          dropdownItemSelected: { fontSize: 12, lineHeight: 28, minHeight: 30 },
+        };
 
-        if (btn.isDropdown) {
-          const selectedChild = _.find(btn.children, (child) => child.dropdownItemKey === btn.dropdownSelectedKey);
-          result.name = selectedChild?.commandButtonLabel || btn.dropdownPlaceholder;
-
-          const dropdownStyles: Partial<IDropdownStyles> = {
-            root: { margin: 5 },
-            dropdown: { width: btn.dropdownWidth },
-            title: { fontSize: 12, height: 30, lineHeight: 28 },
-            dropdownItem: { fontSize: 12, lineHeight: 28, minHeight: 30 },
-            dropdownItemSelected: { fontSize: 12, lineHeight: 28, minHeight: 30 },
-          };
-
-          const onDropdownChange = (
-            event: React.FormEvent<HTMLDivElement>,
-            option?: IDropdownOption,
-            index?: number
-          ): void => {
-            btn.children[index].onCommandClick(event);
-            TelemetryProcessor.trace(Action.ClickCommandBarButton, ActionModifiers.Mark, { label: option.text });
-          };
-
-          result.commandBarButtonAs = (props: IComponentAsProps<ICommandBarItemProps>) => {
-            return (
-              <Dropdown
-                placeholder={btn.dropdownPlaceholder}
-                defaultSelectedKey={btn.dropdownSelectedKey}
-                onChange={onDropdownChange}
-                options={btn.children.map((child: CommandButtonComponentProps) => ({
-                  key: child.dropdownItemKey,
-                  text: child.commandButtonLabel,
-                }))}
-                styles={dropdownStyles}
-              />
-            );
-          };
-        }
+        const onDropdownChange = (
+          event: React.FormEvent<HTMLDivElement>,
+          option?: IDropdownOption,
+          index?: number
+        ): void => {
+          btn.children[index].onCommandClick(event);
+          TelemetryProcessor.trace(Action.ClickCommandBarButton, ActionModifiers.Mark, { label: option.text });
+        };
 
         return result;
       }
-    );
+
+      return result;
+    });
 };
 
 export const createDivider = (key: string): ICommandBarItemProps => {

src/Explorer/Menus/NavBar/ControlBarComponent.tsx

@@ -14,13 +14,11 @@ export interface ControlBarComponentProps {
 
 export class ControlBarComponent extends React.Component<ControlBarComponentProps> {
   private static renderButtons(commandButtonOptions: CommandButtonComponentProps[]): JSX.Element[] {
-    return commandButtonOptions.map(
-      (btn: CommandButtonComponentProps, index: number): JSX.Element => {
-        // Remove label
-        btn.commandButtonLabel = undefined;
-        return CommandButtonComponent.renderButton(btn, `${index}`);
-      }
-    );
+    return commandButtonOptions.map((btn: CommandButtonComponentProps, index: number): JSX.Element => {
+      // Remove label
+      btn.commandButtonLabel = undefined;
+      return CommandButtonComponent.renderButton(btn, `${index}`);
+    });
   }
 
   public render(): JSX.Element {

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -3,17 +3,17 @@
  */
 
 import { Dropdown, IDropdownOption } from "@fluentui/react";
+import LoaderIcon from "images/circular_loader_black_16x16.gif";
+import { ReactComponent as ClearIcon } from "images/Clear1.svg";
+import ErrorBlackIcon from "images/error_black.svg";
+import ErrorRedIcon from "images/error_red.svg";
+import infoBubbleIcon from "images/info-bubble-9x9.svg";
+import InfoIcon from "images/info_color.svg";
+import LoadingIcon from "images/loading.svg";
+import ChevronDownIcon from "images/QueryBuilder/CollapseChevronDown_16x.png";
+import ChevronUpIcon from "images/QueryBuilder/CollapseChevronUp_16x.png";
 import * as React from "react";
 import AnimateHeight from "react-animate-height";
-import LoaderIcon from "../../../../images/circular_loader_black_16x16.gif";
-import ClearIcon from "../../../../images/Clear.svg";
-import ErrorBlackIcon from "../../../../images/error_black.svg";
-import ErrorRedIcon from "../../../../images/error_red.svg";
-import infoBubbleIcon from "../../../../images/info-bubble-9x9.svg";
-import InfoIcon from "../../../../images/info_color.svg";
-import LoadingIcon from "../../../../images/loading.svg";
-import ChevronDownIcon from "../../../../images/QueryBuilder/CollapseChevronDown_16x.png";
-import ChevronUpIcon from "../../../../images/QueryBuilder/CollapseChevronUp_16x.png";
 import { ClientDefaults, KeyCodes } from "../../../Common/Constants";
 import { userContext } from "../../../UserContext";
 
@@ -106,10 +106,12 @@ export class NotificationConsoleComponent extends React.Component<
     const numInProgress = this.state.allConsoleData.filter(
       (data: ConsoleData) => data.type === ConsoleDataType.InProgress
     ).length;
-    const numErroredItems = this.state.allConsoleData.filter((data: ConsoleData) => data.type === ConsoleDataType.Error)
-      .length;
-    const numInfoItems = this.state.allConsoleData.filter((data: ConsoleData) => data.type === ConsoleDataType.Info)
-      .length;
+    const numErroredItems = this.state.allConsoleData.filter(
+      (data: ConsoleData) => data.type === ConsoleDataType.Error
+    ).length;
+    const numInfoItems = this.state.allConsoleData.filter(
+      (data: ConsoleData) => data.type === ConsoleDataType.Info
+    ).length;
 
     return (
       <div className="notificationConsoleContainer">
@@ -179,7 +181,7 @@ export class NotificationConsoleComponent extends React.Component<
                 onKeyDown={(event: React.KeyboardEvent<HTMLSpanElement>) => this.onClearNotificationsKeyPress(event)}
                 tabIndex={0}
               >
-                <img src={ClearIcon} alt="clear notifications image" />
+                <ClearIcon />
                 Clear Notifications
               </span>
             </div>

src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap

@@ -149,10 +149,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
           role="button"
           tabIndex={0}
         >
-          <img
-            alt="clear notifications image"
-            src=""
-          />
+          <Component />
           Clear Notifications
         </span>
       </div>
@@ -315,10 +312,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
           role="button"
           tabIndex={0}
         >
-          <img
-            alt="clear notifications image"
-            src=""
-          />
+          <Component />
           Clear Notifications
         </span>
       </div>

src/Explorer/Notebook/NotebookClientV2.ts

@@ -192,36 +192,36 @@ export class NotebookClientV2 {
      * is triggered for *any* state change).
      * TODO: Use react-redux connect() to subscribe to state changes?
      */
-    const cacheKernelSpecsMiddleware: Middleware = <D extends Dispatch<AnyAction>, S extends AppState>({
-      dispatch,
-      getState,
-    }: MiddlewareAPI<D, S>) => (next: Dispatch<AnyAction>) => <A extends AnyAction>(action: A): A => {
-      switch (action.type) {
-        case actions.FETCH_KERNELSPECS_FULFILLED: {
-          const payload = ((action as unknown) as actions.FetchKernelspecsFulfilled).payload;
-          const defaultKernelName = payload.defaultKernelName;
-          this.kernelSpecsForDisplay = Object.values(payload.kernelspecs)
-            .filter((spec) => !spec.metadata?.hasOwnProperty("hidden"))
-            .map((spec) => ({
-              name: spec.name,
-              displayName: spec.displayName,
-            }))
-            .sort((a: KernelSpecsDisplay, b: KernelSpecsDisplay) => {
-              // Put default at the top, otherwise lexicographically compare
-              if (a.displayName === defaultKernelName) {
-                return -1;
-              } else if (b.name === defaultKernelName) {
-                return 1;
-              } else {
-                return a.displayName.localeCompare(b.displayName);
-              }
-            });
-          break;
+    const cacheKernelSpecsMiddleware: Middleware =
+      <D extends Dispatch<AnyAction>, S extends AppState>({ dispatch, getState }: MiddlewareAPI<D, S>) =>
+      (next: Dispatch<AnyAction>) =>
+      <A extends AnyAction>(action: A): A => {
+        switch (action.type) {
+          case actions.FETCH_KERNELSPECS_FULFILLED: {
+            const payload = (action as unknown as actions.FetchKernelspecsFulfilled).payload;
+            const defaultKernelName = payload.defaultKernelName;
+            this.kernelSpecsForDisplay = Object.values(payload.kernelspecs)
+              .filter((spec) => !spec.metadata?.hasOwnProperty("hidden"))
+              .map((spec) => ({
+                name: spec.name,
+                displayName: spec.displayName,
+              }))
+              .sort((a: KernelSpecsDisplay, b: KernelSpecsDisplay) => {
+                // Put default at the top, otherwise lexicographically compare
+                if (a.displayName === defaultKernelName) {
+                  return -1;
+                } else if (b.name === defaultKernelName) {
+                  return 1;
+                } else {
+                  return a.displayName.localeCompare(b.displayName);
+                }
+              });
+            break;
+          }
         }
-      }
 
-      return next(action);
-    };
+        return next(action);
+      };
 
     const traceErrorFct = (title: string, message: string) => {
       TelemetryProcessor.traceFailure(Action.NotebookErrorNotification, {

src/Explorer/Notebook/NotebookComponent/store.ts

@@ -21,16 +21,16 @@ export default function configureStore(
   /**
    * Catches errors in reducers
    */
-  const catchErrorMiddleware: Middleware = <D extends Dispatch<AnyAction>, S extends AppState>({
-    dispatch,
-    getState,
-  }: MiddlewareAPI<D, S>) => (next: Dispatch<AnyAction>) => <A extends AnyAction>(action: A): any => {
-    try {
-      next(action);
-    } catch (error) {
-      traceFailure("Reducer failure", error);
-    }
-  };
+  const catchErrorMiddleware: Middleware =
+    <D extends Dispatch<AnyAction>, S extends AppState>({ dispatch, getState }: MiddlewareAPI<D, S>) =>
+    (next: Dispatch<AnyAction>) =>
+    <A extends AnyAction>(action: A): any => {
+      try {
+        next(action);
+      } catch (error) {
+        traceFailure("Reducer failure", error);
+      }
+    };
 
   const protect = (epic: Epic) => {
     return (action$: Observable<any>, state$: any, dependencies: any) =>

src/Explorer/Notebook/NotebookRenderer/NotebookRenderer.tsx

@@ -6,7 +6,7 @@ import MonacoEditor from "@nteract/stateful-components/lib/inputs/connected-edit
 import { PassedEditorProps } from "@nteract/stateful-components/lib/inputs/editor";
 import * as React from "react";
 import { DndProvider } from "react-dnd";
-import HTML5Backend from "react-dnd-html5-backend";
+import { HTML5Backend } from "react-dnd-html5-backend";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
 import { userContext } from "../../../UserContext";

src/Explorer/Notebook/NotebookRenderer/decorators/CellCreator.tsx

@@ -1,12 +1,11 @@
-import { actions, selectors, ContentRef, AppState } from "@nteract/core";
 import { CellType } from "@nteract/commutable";
+import { actions, AppState, ContentRef, selectors } from "@nteract/core";
+import AddCodeCellIcon from "images/notebook/add-code-cell.svg";
+import AddTextCellIcon from "images/notebook/add-text-cell.svg";
 import * as React from "react";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
-
 import styled from "styled-components";
-import AddCodeCellIcon from "../../../../../images/notebook/add-code-cell.svg";
-import AddTextCellIcon from "../../../../../images/notebook/add-text-cell.svg";
 
 interface ComponentProps {
   id: string;

src/Explorer/Notebook/NotebookRenderer/decorators/draggable/index.tsx

@@ -11,7 +11,6 @@ import {
   DropTargetConnector,
   DropTargetMonitor,
 } from "react-dnd";
-
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
 import styled, { StyledComponent } from "styled-components";
@@ -124,8 +123,9 @@ export const cellTarget = {
     if (monitor) {
       const hoverUpperHalf = isDragUpper(props, monitor, component.el);
       // DropTargetSpec monitor definition could be undefined. we'll need a check for monitor in order to pass validation.
+      const item: Props = monitor.getItem();
       props.moveCell({
-        id: monitor.getItem().id,
+        id: item.id,
         destinationId: props.id,
         above: hoverUpperHalf,
         contentRef: props.contentRef,

src/Explorer/Notebook/NotebookRenderer/decorators/kbd-shortcuts/index.tsx

@@ -51,15 +51,8 @@ export class KeyboardShortcuts extends React.Component<Props> {
       return;
     }
 
-    const {
-      executeFocusedCell,
-      focusNextCell,
-      focusNextCellEditor,
-      contentRef,
-      cellOrder,
-      focusedCell,
-      cellMap,
-    } = this.props;
+    const { executeFocusedCell, focusNextCell, focusNextCellEditor, contentRef, cellOrder, focusedCell, cellMap } =
+      this.props;
 
     let ctrlKeyPressed = e.ctrlKey;
     // Allow cmd + enter (macOS) to operate like ctrl + enter

src/Explorer/Panes/AddCollectionPanel.tsx

@@ -501,44 +501,42 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                 </TooltipHost>
               </Stack>
 
-              {this.state.uniqueKeys.map(
-                (uniqueKey: string, i: number): JSX.Element => {
-                  return (
-                    <Stack style={{ marginBottom: 8 }} key={`uniqueKey${i}`} horizontal>
-                      <input
-                        type="text"
-                        autoComplete="off"
-                        placeholder={
-                          userContext.apiType === "Mongo"
-                            ? "Comma separated paths e.g. firstName,address.zipCode"
-                            : "Comma separated paths e.g. /firstName,/address/zipCode"
-                        }
-                        className="panelTextField"
-                        autoFocus
-                        value={uniqueKey}
-                        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                          const uniqueKeys = this.state.uniqueKeys.map((uniqueKey: string, j: number) => {
-                            if (i === j) {
-                              return event.target.value;
-                            }
-                            return uniqueKey;
-                          });
-                          this.setState({ uniqueKeys });
-                        }}
-                      />
+              {this.state.uniqueKeys.map((uniqueKey: string, i: number): JSX.Element => {
+                return (
+                  <Stack style={{ marginBottom: 8 }} key={`uniqueKey${i}`} horizontal>
+                    <input
+                      type="text"
+                      autoComplete="off"
+                      placeholder={
+                        userContext.apiType === "Mongo"
+                          ? "Comma separated paths e.g. firstName,address.zipCode"
+                          : "Comma separated paths e.g. /firstName,/address/zipCode"
+                      }
+                      className="panelTextField"
+                      autoFocus
+                      value={uniqueKey}
+                      onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                        const uniqueKeys = this.state.uniqueKeys.map((uniqueKey: string, j: number) => {
+                          if (i === j) {
+                            return event.target.value;
+                          }
+                          return uniqueKey;
+                        });
+                        this.setState({ uniqueKeys });
+                      }}
+                    />
 
-                      <IconButton
-                        iconProps={{ iconName: "Delete" }}
-                        style={{ height: 27 }}
-                        onClick={() => {
-                          const uniqueKeys = this.state.uniqueKeys.filter((uniqueKey, j) => i !== j);
-                          this.setState({ uniqueKeys });
-                        }}
-                      />
-                    </Stack>
-                  );
-                }
-              )}
+                    <IconButton
+                      iconProps={{ iconName: "Delete" }}
+                      style={{ height: 27 }}
+                      onClick={() => {
+                        const uniqueKeys = this.state.uniqueKeys.filter((uniqueKey, j) => i !== j);
+                        this.setState({ uniqueKeys });
+                      }}
+                    />
+                  </Stack>
+                );
+              })}
 
               <ActionButton
                 iconProps={{ iconName: "Add" }}

src/Explorer/Panes/AddDatabasePane.html

@@ -0,0 +1,174 @@
+<div data-bind="visible: visible, event: { keydown: onPaneKeyDown }">
+  <div class="contextual-pane-out" data-bind="click: cancel, clickBubble: false"></div>
+  <div class="contextual-pane" data-bind="attr: { id: id }">
+    <!-- Add database form  -- Start -->
+    <div class="contextual-pane-in">
+      <form data-bind="submit: submit" style="height: 100%">
+        <div
+          class="paneContentContainer"
+          role="dialog"
+          aria-labelledby="databaseTitle"
+          data-bind="template: { name: 'add-database-inputs' }"
+        ></div>
+      </form>
+    </div>
+    <!-- Add database form  -- End -->
+    <!-- Loader - Start -->
+    <div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
+      <img class="dataExplorerLoader" src="/images/LoadingIndicator_3Squares.gif" />
+    </div>
+    <!-- Loader - End -->
+  </div>
+</div>
+
+<script type="text/html" id="add-database-inputs">
+  <!-- Add database header - Start -->
+  <div class="firstdivbg headerline">
+    <span id="databaseTitle" role="heading" aria-level="2" data-bind="text: title"></span>
+    <div
+      class="closeImg"
+      role="button"
+      aria-label="Close pane"
+      data-bind="click: cancel, event: { keypress: onCloseKeyPress }"
+      tabindex="0"
+    >
+      <img src="/images/close-black.svg" title="Close" alt="Close" />
+    </div>
+  </div>
+  <!-- Add database header - End -->
+
+  <!-- Add database errors - Start -->
+  <div class="warningErrorContainer" aria-live="assertive" data-bind="visible: formErrors() && formErrors() !== ''">
+    <div class="warningErrorContent">
+      <span><img class="paneErrorIcon" src="/images/error_red.svg" alt="Error" /></span>
+      <span class="warningErrorDetailsLinkContainer">
+        <span class="formErrors" data-bind="text: formErrors, attr: { title: formErrors }"></span>
+        <a
+          class="errorLink"
+          role="link"
+          data-bind="visible: formErrorsDetails() && formErrorsDetails() !== '', click: showErrorDetails, event: { keypress: onMoreDetailsKeyPress }"
+          tabindex="0"
+        >
+          More details</a
+        >
+      </span>
+    </div>
+  </div>
+  <!-- Add database errors - End -->
+
+  <!-- upsell message - start -->
+  <div
+    class="infoBoxContainer"
+    aria-live="assertive"
+    data-bind="visible: showUpsellMessage && showUpsellMessage() && formErrors && !formErrors()"
+  >
+    <div class="infoBoxContent">
+      <span><img class="infoBoxIcon" src="/images/info_color.svg" alt="Promo" /></span>
+      <span class="infoBoxDetails">
+        <span class="infoBoxMessage" data-bind="text: upsellMessage, attr: { title: upsellMessage }"></span>
+        <a
+          class="underlinedLink"
+          id="linkAddDatabase"
+          data-bind="text: upsellAnchorText, attr: { 'href': upsellAnchorUrl, 'aria-label': upsellMessageAriaLabel }"
+          target="_blank"
+          href=""
+          tabindex="0"
+        ></a>
+      </span>
+    </div>
+  </div>
+  <!-- upsell message - end -->
+
+  <!-- Add database inputs - Start -->
+  <div class="paneMainContent">
+    <div>
+      <p>
+        <span class="mandatoryStar">*</span>
+        <span data-bind="text: databaseIdLabel"></span>
+        <span class="infoTooltip" role="tooltip" tabindex="0">
+          <img class="infoImg" src="/images/info-bubble.svg" alt="More information" />
+          <span class="tooltiptext infoTooltipWidth" data-bind="text: databaseIdTooltipText"></span>
+        </span>
+      </p>
+
+      <input
+        id="database-id"
+        type="text"
+        aria-required="true"
+        autocomplete="off"
+        pattern="[^/?#\\]*[^/?# \\]"
+        title="May not end with space nor contain characters '\' '/' '#' '?'"
+        size="40"
+        class="collid"
+        data-bind="textInput: databaseId, hasFocus: firstFieldHasFocus, attr: { 'aria-label': databaseIdLabel, 'placeholder': databaseIdPlaceHolder }"
+        autofocus
+      />
+
+      <!-- Database provisioned throughput - Start -->
+      <!-- ko if: canConfigureThroughput -->
+      <div class="databaseProvision" aria-label="New database provision support">
+        <input
+          tabindex="0"
+          type="checkbox"
+          id="addDatabasePane-databaseSharedThroughput"
+          title="Provision shared throughput"
+          data-bind="checked: databaseCreateNewShared"
+        />
+        <span class="databaseProvisionText" for="databaseSharedThroughput">Provision throughput</span>
+        <span class="infoTooltip" role="tooltip" tabindex="0">
+          <img class="infoImg" src="/images/info-bubble.svg" alt="More information" />
+          <span
+            class="tooltiptext provisionDatabaseThroughput"
+            data-bind="text: databaseLevelThroughputTooltipText"
+          ></span>
+        </span>
+      </div>
+      <div data-bind="visible: databaseCreateNewShared">
+        <throughput-input-autopilot-v3
+          params="{
+                                                step: 100,
+                                                value: throughput,
+                                                testId: 'sharedThroughputValue',
+                                                minimum: minThroughputRU,
+                                                maximum: maxThroughputRU,
+                                                isEnabled: databaseCreateNewShared,
+                                                label: throughputRangeText,
+                                                ariaLabel: throughputRangeText,
+                                                costsVisible: costsVisible,
+                                                requestUnitsUsageCost: requestUnitsUsageCost,
+                                                spendAckChecked: throughputSpendAck,
+                                                spendAckId: 'throughputSpendAckDatabase',
+                                                spendAckText: throughputSpendAckText,
+                                                spendAckVisible: throughputSpendAckVisible,
+                                                showAsMandatory: true,
+                                                infoBubbleText: ruToolTipText,
+                                                throughputAutoPilotRadioId: 'newDatabase-databaseThroughput-autoPilotRadio',
+                                                throughputProvisionedRadioId: 'newDatabase-databaseThroughput-manualRadio',
+                                                throughputModeRadioName: 'throughputModeRadioName',
+                                                isAutoPilotSelected: isAutoPilotSelected,
+                                                maxAutoPilotThroughputSet: maxAutoPilotThroughputSet,
+                                                autoPilotUsageCost: autoPilotUsageCost,
+                                                canExceedMaximumValue: canExceedMaximumValue,
+                                                freeTierExceedThroughputTooltip: freeTierExceedThroughputTooltip
+                                            }"
+        >
+        </throughput-input-autopilot-v3>
+        <p data-bind="visible: canRequestSupport">
+          <!-- TODO: Replace link with call to the Azure Support blade --><a
+            href="https://aka.ms/cosmosdbfeedback?subject=Cosmos%20DB%20More%20Throughput%20Request"
+            >Contact support</a
+          >
+          for more than <span data-bind="text: maxThroughputRUText"></span> RU/s.
+        </p>
+      </div>
+      <!-- /ko -->
+      <!-- Database provisioned throughput - End -->
+    </div>
+  </div>
+  <div class="paneFooter">
+    <div class="leftpanel-okbut">
+      <input type="submit" value="OK" class="btncreatecoll1" />
+    </div>
+  </div>
+  <!-- Add database inputs - End -->
+</script>

src/Explorer/Panes/CassandraAddCollectionPane.html

@@ -0,0 +1,273 @@
+<div data-bind="visible: visible, event: { keydown: onPaneKeyDown }">
+  <div
+    class="contextual-pane-out"
+    data-bind="
+    click: cancel,
+    clickBubble: false"
+  ></div>
+  <div class="contextual-pane" id="cassandraaddcollectionpane">
+    <!-- Add Cassandra collection form - Start -->
+    <div class="contextual-pane-in">
+      <form
+        class="paneContentContainer"
+        role="dialog"
+        aria-label="Add Table"
+        data-bind="
+            submit: submit"
+      >
+        <!-- Add Cassandra collection header - Start -->
+        <div class="firstdivbg headerline">
+          <span role="heading" aria-level="2" data-bind="text: title"></span>
+          <div
+            class="closeImg"
+            role="button"
+            aria-label="Close pane"
+            tabindex="0"
+            data-bind="
+                    click: cancel, event: { keypress: onCloseKeyPress }"
+          >
+            <img src="/images/close-black.svg" title="Close" alt="Close" />
+          </div>
+        </div>
+        <!-- Add Cassandra collection header - End -->
+        <!-- Add Cassandra collection errors - Start -->
+        <div
+          class="warningErrorContainer"
+          aria-live="assertive"
+          data-bind="visible: formErrors() && formErrors() !== ''"
+        >
+          <div class="warningErrorContent">
+            <span><img class="paneErrorIcon" src="/images/error_red.svg" alt="Error" /></span>
+            <span class="warningErrorDetailsLinkContainer">
+              <span class="formErrors" data-bind="text: formErrors, attr: { title: formErrors }"></span>
+            </span>
+          </div>
+        </div>
+        <!-- Add Cassandra collection errors - End -->
+        <div class="paneMainContent">
+          <div class="seconddivpadding">
+            <p>
+              <span class="mandatoryStar">*</span> Keyspace name
+              <span class="infoTooltip" role="tooltip" tabindex="0">
+                <img class="infoImg" src="/images/info-bubble.svg" alt="More information" />
+                <span class="tooltiptext infoTooltipWidth"
+                  >Select an existing keyspace or enter a new keyspace id.</span
+                >
+              </span>
+            </p>
+
+            <div class="createNewDatabaseOrUseExisting">
+              <input
+                class="createNewDatabaseOrUseExistingRadio"
+                aria-label="Create new keyspace"
+                name="databaseType"
+                type="radio"
+                role="radio"
+                id="keyspaceCreateNew"
+                data-test="addCollection-newDatabase"
+                tabindex="0"
+                data-bind="checked: keyspaceCreateNew, checkedValue: true, attr: { 'aria-checked': keyspaceCreateNew() ? 'true' : 'false' }"
+              />
+              <span class="createNewDatabaseOrUseExistingSpace" for="keyspaceCreateNew">Create new</span>
+
+              <input
+                class="createNewDatabaseOrUseExistingRadio"
+                aria-label="Use existing keyspace"
+                name="databaseType"
+                type="radio"
+                role="radio"
+                id="keyspaceUseExisting"
+                data-test="addCollection-existingDatabase"
+                tabindex="0"
+                data-bind="checked: keyspaceCreateNew, checkedValue: false, attr: { 'aria-checked': !keyspaceCreateNew() ? 'true' : 'false' }"
+              />
+              <span class="createNewDatabaseOrUseExistingSpace" for="keyspaceUseExisting">Use existing</span>
+            </div>
+
+            <input
+              id="keyspace-id"
+              data-test="addCollection-keyspaceId"
+              type="text"
+              autocomplete="off"
+              pattern="[^/?#\\]*[^/?# \\]"
+              title="May not end with space nor contain characters '\' '/' '#' '?'"
+              placeholder="Type a new keyspace id"
+              size="40"
+              class="collid"
+              data-bind="visible: keyspaceCreateNew, textInput: keyspaceId, hasFocus: firstFieldHasFocus"
+              aria-label="Keyspace id"
+              aria-required="true"
+              autofocus
+            />
+
+            <input
+              type="text"
+              aria-required="true"
+              autocomplete="off"
+              pattern="[^/?#\\]*[^/?# \\]"
+              title="May not end with space nor contain characters '\' '/' '#' '?'"
+              list="keyspacesList"
+              placeholder="Choose existing keyspace id"
+              size="40"
+              class="collid"
+              data-bind="visible: !keyspaceCreateNew(), textInput: keyspaceId, hasFocus: firstFieldHasFocus"
+              aria-label="Keyspace id"
+            />
+
+            <datalist id="keyspacesList" data-bind="foreach: container.databases">
+              <option data-bind="value: $data.id"></option>
+            </datalist>
+
+            <!-- Database provisioned throughput - Start -->
+            <!-- ko if: canConfigureThroughput -->
+            <div
+              class="databaseProvision"
+              aria-label="New database provision support"
+              data-bind="visible: keyspaceCreateNew"
+            >
+              <input
+                tabindex="0"
+                type="checkbox"
+                id="keyspaceSharedThroughput"
+                title="Provision shared throughput"
+                data-bind="checked: keyspaceHasSharedOffer"
+              />
+              <span class="databaseProvisionText" for="keyspaceSharedThroughput">Provision keyspace throughput</span>
+              <span class="infoTooltip" role="tooltip" tabindex="0">
+                <img class="infoImg" src="/images/info-bubble.svg" alt="More information" />
+                <span class="tooltiptext provisionDatabaseThroughput"
+                  >Provisioned throughput at the keyspace level will be shared across unlimited number of tables within
+                  the keyspace</span
+                >
+              </span>
+            </div>
+            <!-- 1 -->
+            <div data-bind="visible: keyspaceCreateNew() && keyspaceHasSharedOffer()">
+              <throughput-input-autopilot-v3
+                params="{ 
+                                    testId: 'cassandraThroughputValue-v3-shared',
+                                    value: keyspaceThroughput, 
+                                    minimum: minThroughputRU, 
+                                    maximum: maxThroughputRU, 
+                                    isEnabled: keyspaceCreateNew() && keyspaceHasSharedOffer(), 
+                                    label: sharedThroughputRangeText,
+                                    ariaLabel: sharedThroughputRangeText,
+                                    requestUnitsUsageCost: requestUnitsUsageCostShared,
+                                    spendAckChecked: sharedThroughputSpendAck,
+                                    spendAckId: 'sharedThroughputSpendAck-v3-shared',
+                                    spendAckText: sharedThroughputSpendAckText,
+                                    spendAckVisible: sharedThroughputSpendAckVisible,
+                                    showAsMandatory: true,
+                                    infoBubbleText: ruToolTipText,
+                                    throughputAutoPilotRadioId: 'newKeyspace-databaseThroughput-autoPilotRadio-v3-shared',
+                                    throughputProvisionedRadioId: 'newKeyspace-databaseThroughput-manualRadio-v3-shared',
+                                    isAutoPilotSelected: isSharedAutoPilotSelected,
+                                    maxAutoPilotThroughputSet: sharedAutoPilotThroughput,
+                                    autoPilotUsageCost: autoPilotUsageCost,
+                                    canExceedMaximumValue: canExceedMaximumValue,
+                            costsVisible: costsVisible,
+                                    }"
+              >
+              </throughput-input-autopilot-v3>
+            </div>
+            <!-- /ko -->
+            <!-- Database provisioned throughput - End -->
+          </div>
+          <div class="seconddivpadding">
+            <p>
+              <span class="mandatoryStar">*</span> Enter CQL command to create the table.
+              <a href="https://aka.ms/cassandra-create-table" target="_blank">Learn More</a>
+            </p>
+            <div data-bind="text: createTableQuery" style="float: left; padding-top: 3px; padding-right: 3px"></div>
+            <input
+              type="text"
+              data-test="addCollection-tableId"
+              aria-required="true"
+              autocomplete="off"
+              pattern="[^/?#\\]*[^/?# \\]"
+              title="May not end with space nor contain characters '\' '/' '#' '?'"
+              data-test="addCollection-tableId"
+              placeholder="Enter tableId"
+              size="20"
+              class="textfontclr"
+              data-bind="value: tableId"
+              style="margin-bottom: 5px"
+            />
+            <textarea
+              id="editor-area"
+              rows="15"
+              aria-label="Table Schema"
+              data-bind="value: userTableQuery"
+              style="height: 125px; width: calc(100% - 80px); resize: vertical"
+            ></textarea>
+          </div>
+
+          <!-- Provision table throughput - start -->
+          <!-- ko if: canConfigureThroughput -->
+          <div class="seconddivpadding" data-bind="visible: keyspaceHasSharedOffer() && !keyspaceCreateNew()">
+            <input
+              type="checkbox"
+              id="tableSharedThroughput"
+              title="Provision dedicated throughput for this table"
+              data-bind="checked: dedicateTableThroughput"
+            />
+            <span for="tableSharedThroughput">Provision dedicated throughput for this table</span>
+            <span class="leftAlignInfoTooltip" role="tooltip" tabindex="0">
+              <img class="infoImg" src="/images/info-bubble.svg" alt="More information" />
+              <span class="tooltiptext sharedCollectionThroughputTooltipWidth"
+                >You can optionally provision dedicated throughput for a table within a keyspace that has throughput
+                provisioned. This dedicated throughput amount will not be shared with other tables in the keyspace and
+                does not count towards the throughput you provisioned for the keyspace. This throughput amount will be
+                billed in addition to the throughput amount you provisioned at the keyspace level.</span
+              >
+            </span>
+          </div>
+          <!-- 2 -->
+          <div data-bind="visible: !keyspaceHasSharedOffer() || dedicateTableThroughput()">
+            <throughput-input-autopilot-v3
+              params="{ 
+                            testId: 'cassandraSharedThroughputValue-v3-dedicated',
+                            value: throughput, 
+                            minimum: minThroughputRU, 
+                            maximum: maxThroughputRU, 
+                            isEnabled: !keyspaceHasSharedOffer() || dedicateTableThroughput(), 
+                            label: throughputRangeText,
+                            ariaLabel: throughputRangeText,
+                            costsVisible: costsVisible,
+                            requestUnitsUsageCost: requestUnitsUsageCostDedicated,
+                            spendAckChecked: throughputSpendAck,
+                            spendAckId: 'throughputSpendAckCassandra-v3-dedicated',
+                            spendAckText: throughputSpendAckText,
+                            spendAckVisible: throughputSpendAckVisible,
+                            showAsMandatory: true,
+                            infoBubbleText: ruToolTipText,
+                            throughputAutoPilotRadioId: 'newKeyspace-containerThroughput-autoPilotRadio-v3-dedicated',
+                            throughputProvisionedRadioId: 'newKeyspace-containerThroughput-manualRadio-v3-dedicated',
+                            isAutoPilotSelected: isAutoPilotSelected,
+                            maxAutoPilotThroughputSet: selectedAutoPilotThroughput,
+                            autoPilotUsageCost: autoPilotUsageCost,
+                            canExceedMaximumValue: canExceedMaximumValue,
+                            overrideWithAutoPilotSettings: false,
+                        overrideWithProvisionedThroughputSettings: false
+                        }"
+            >
+            </throughput-input-autopilot-v3>
+          </div>
+          <!-- /ko -->
+          <!-- Provision table throughput - end -->
+        </div>
+        <div class="paneFooter">
+          <div class="leftpanel-okbut">
+            <input type="submit" data-test="addCollection-createCollection" value="OK" class="btncreatecoll1" />
+          </div>
+        </div>
+      </form>
+      <!-- Add Cassandra collection form - End -->
+      <!-- Loader - Start -->
+      <div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
+        <img class="dataExplorerLoader" src="/images/LoadingIndicator_3Squares.gif" alt="loading indicator" />
+      </div>
+      <!-- Loader - End -->
+    </div>
+  </div>
+</div>

src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.test.tsx

@@ -25,7 +25,7 @@ describe("CassandraAddCollectionPane  Pane", () => {
     fireEvent.click(screen.getByLabelText("Use existing keyspace"));
   });
 
-  it("Enter Keyspace name ", () => {
+  it("Enter Keyspace name", () => {
     fireEvent.change(screen.getByLabelText("Keyspace id"), { target: { value: "unittest1" } });
     expect(screen.getByLabelText("CREATE TABLE unittest1.")).toBeDefined();
   });

src/Explorer/Panes/ExecuteSprocParamsPane/ExecuteSprocParamsPane.tsx

@@ -1,7 +1,7 @@
 import { IDropdownOption, IImageProps, Image, Stack, Text } from "@fluentui/react";
 import { useBoolean } from "@fluentui/react-hooks";
+import AddPropertyIcon from "images/Add-property.svg";
 import React, { FunctionComponent, useState } from "react";
-import AddPropertyIcon from "../../../../images/Add-property.svg";
 import { logConsoleError } from "../../../Utils/NotificationConsoleUtils";
 import StoredProcedure from "../../Tree/StoredProcedure";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";

src/Explorer/Panes/ExecuteSprocParamsPane/InputParameter.tsx

@@ -1,3 +1,5 @@
+import AddPropertyIcon from "images/Add-property.svg";
+import EntityCancelIcon from "images/Entity_cancel.svg";
 import {
   Dropdown,
   IDropdownOption,
@@ -9,8 +11,6 @@ import {
   TextField,
 } from "@fluentui/react";
 import React, { FunctionComponent } from "react";
-import AddPropertyIcon from "../../../../images/Add-property.svg";
-import EntityCancelIcon from "../../../../images/Entity_cancel.svg";
 
 const dropdownStyles: Partial<IDropdownStyles> = { dropdown: { width: 100 } };
 const options = [

src/Explorer/Panes/GenericRightPaneComponent/GenericRightPaneComponent.tsx

@@ -0,0 +1,126 @@
+import { IconButton, PrimaryButton } from "@fluentui/react";
+import ErrorRedIcon from "images/error_red.svg";
+import LoadingIndicatorIcon from "images/LoadingIndicator_3Squares.gif";
+import React, { FunctionComponent, ReactNode } from "react";
+import { KeyCodes } from "../../../Common/Constants";
+
+export interface GenericRightPaneProps {
+  expandConsole: () => void;
+  formError: string;
+  formErrorDetail: string;
+  id: string;
+  isExecuting: boolean;
+  onClose: () => void;
+  onSubmit: () => void;
+  submitButtonText: string;
+  title: string;
+  isSubmitButtonHidden?: boolean;
+  children?: ReactNode;
+}
+
+export const GenericRightPaneComponent: FunctionComponent<GenericRightPaneProps> = ({
+  expandConsole,
+  formError,
+  formErrorDetail,
+  id,
+  isExecuting,
+  onClose,
+  onSubmit,
+  submitButtonText,
+  title,
+  isSubmitButtonHidden,
+  children,
+}: GenericRightPaneProps) => {
+  const getPanelHeight = (): number => {
+    const notificationConsoleElement: HTMLElement = document.getElementById("explorerNotificationConsole");
+    return window.innerHeight - $(notificationConsoleElement).height();
+  };
+
+  const panelHeight: number = getPanelHeight();
+
+  const renderPanelHeader = (): JSX.Element => {
+    return (
+      <div className="firstdivbg headerline">
+        <span id="databaseTitle" role="heading" aria-level={2}>
+          {title}
+        </span>
+        <IconButton
+          ariaLabel="Close pane"
+          title="Close pane"
+          onClick={onClose}
+          tabIndex={0}
+          className="closePaneBtn"
+          iconProps={{ iconName: "Cancel" }}
+        />
+      </div>
+    );
+  };
+
+  const renderErrorSection = (): JSX.Element => {
+    return (
+      <div className="warningErrorContainer" aria-live="assertive" hidden={!formError}>
+        <div className="warningErrorContent">
+          <span>
+            <img className="paneErrorIcon" src={ErrorRedIcon} alt="Error" />
+          </span>
+          <span className="warningErrorDetailsLinkContainer">
+            <span className="formErrors" title={formError}>
+              {formError}
+            </span>
+            <a className="errorLink" role="link" hidden={!formErrorDetail} onClick={expandConsole}>
+              More details
+            </a>
+          </span>
+        </div>
+      </div>
+    );
+  };
+
+  const renderPanelFooter = (): JSX.Element => {
+    return (
+      <div className="paneFooter">
+        <div className="leftpanel-okbut">
+          <PrimaryButton
+            style={{ visibility: isSubmitButtonHidden ? "hidden" : "visible" }}
+            ariaLabel="Submit"
+            title="Submit"
+            onClick={onSubmit}
+            tabIndex={0}
+            className="genericPaneSubmitBtn"
+            text={submitButtonText}
+          />
+        </div>
+      </div>
+    );
+  };
+
+  const renderLoadingScreen = (): JSX.Element => {
+    return (
+      <div className="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" hidden={!isExecuting}>
+        <img className="dataExplorerLoader" src={LoadingIndicatorIcon} />
+      </div>
+    );
+  };
+
+  const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {
+    if (event.keyCode === KeyCodes.Escape) {
+      onClose();
+      event.stopPropagation();
+    }
+  };
+
+  return (
+    <div tabIndex={-1} onKeyDown={onKeyDown}>
+      <div className="contextual-pane-out" onClick={onClose}></div>
+      <div className="contextual-pane" id={id} style={{ height: panelHeight }} onKeyDown={onKeyDown}>
+        <div className="panelContentWrapper">
+          {renderPanelHeader()}
+          {renderErrorSection()}
+          {children}
+          {renderPanelFooter()}
+        </div>
+        {renderLoadingScreen()}
+      </div>
+    </div>
+  );
+};

src/Explorer/Panes/GraphStylingPane.html

@@ -0,0 +1,59 @@
+<div data-bind="visible: visible, event: { keydown: onPaneKeyDown }">
+  <div class="contextual-pane-out" data-bind="click: cancel, clickBubble: false"></div>
+  <div class="contextual-pane" data-bind="attr: { id: id }">
+    <!-- Graph Styling form - Start -->
+    <div class="contextual-pane-in">
+      <form class="paneContentContainer" data-bind="submit: submit">
+        <!-- Graph Styling header - Start -->
+        <div class="firstdivbg headerline">
+          <span role="heading" aria-level="2">Graph Styling</span>
+          <div
+            class="closeImg"
+            role="button"
+            aria-label="Close pane"
+            tabindex="0"
+            data-bind="click: cancel, event: { keypress: onCloseKeyPress }"
+          >
+            <img src="/images/close-black.svg" title="Close" alt="Close" />
+          </div>
+        </div>
+        <!-- Graph Styling header - End -->
+
+        <!-- Graph Styling errors - Start -->
+        <div
+          aria-live="assertive"
+          class="warningErrorContainer"
+          data-bind="visible: formErrors() && formErrors() !== ''"
+        >
+          <div class="warningErrorContent">
+            <span><img class="paneErrorIcon" src="/images/error_red.svg" alt="Error" /></span>
+            <span class="warningErrorDetailsLinkContainer">
+              <span class="formErrors" data-bind="text: formErrors, attr: { title: formErrors }"></span>
+              <a
+                class="errorLink"
+                role="link"
+                data-bind="visible: formErrorsDetails() && formErrorsDetails() !== '' , click: showErrorDetails"
+              >
+                More details
+              </a>
+            </span>
+          </div>
+        </div>
+        <!-- Graph Styling errors - End -->
+
+        <!-- Add graph configuration - Start -->
+        <div class="paneMainContent">
+          <graph-style
+            id="graphStyleComponent"
+            params="{ config:graphConfigUIData, firstFieldHasFocus: firstFieldHasFocus }"
+          ></graph-style>
+        </div>
+        <div class="paneFooter">
+          <div class="leftpanel-okbut"><input type="submit" value="OK" class="btncreatecoll1" /></div>
+        </div>
+        <!-- Add Graph configuration - End -->
+      </form>
+    </div>
+    <!-- Graph Styling form - End -->
+  </div>
+</div>

src/Explorer/Panes/LoadQueryPane/LoadQueryPane.tsx

@@ -1,7 +1,7 @@
 import { IImageProps, Image, ImageFit, Stack, TextField } from "@fluentui/react";
 import { useBoolean } from "@fluentui/react-hooks";
+import folderIcon from "images/folder_16x16.svg";
 import React, { FunctionComponent, useState } from "react";
-import folderIcon from "../../../../images/folder_16x16.svg";
 import { logError } from "../../../Common/Logger";
 import { Collection } from "../../../Contracts/ViewModels";
 import { userContext } from "../../../UserContext";

src/Explorer/Panes/PanelLoadingScreen.tsx

@@ -1,5 +1,5 @@
+import LoadingIndicator_3Squares from "images/LoadingIndicator_3Squares.gif";
 import React from "react";
-import LoadingIndicator_3Squares from "../../../images/LoadingIndicator_3Squares.gif";
 
 export const PanelLoadingScreen: React.FunctionComponent = () => (
   <div className="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer">

src/Explorer/Panes/SettingsPane/SettingsPane.test.tsx

@@ -1,12 +1,14 @@
+import { DatabaseAccount } from "Contracts/DataModels";
 import { shallow } from "enzyme";
 import React from "react";
-import { DatabaseAccount } from "../../../Contracts/DataModels";
-import { updateUserContext } from "../../../UserContext";
+import { updateUserContext } from "UserContext";
 import { SettingsPane } from "./SettingsPane";
+
 const props = {
   expandConsole: (): void => undefined,
   closePanel: (): void => undefined,
 };
+
 describe("Settings Pane", () => {
   it("should render Default properly", () => {
     const wrapper = shallow(<SettingsPane {...props} />);

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -1,8 +1,8 @@
 import { Checkbox, ChoiceGroup, IChoiceGroupOption, SpinButton } from "@fluentui/react";
+import * as Constants from "Common/Constants";
+import { configContext } from "ConfigContext";
 import React, { FunctionComponent, MouseEvent, useState } from "react";
-import * as Constants from "../../../Common/Constants";
 import { InfoTooltip } from "../../../Common/Tooltip/InfoTooltip";
-import { configContext } from "../../../ConfigContext";
 import { LocalStorageUtility, StorageKey } from "../../../Shared/StorageUtility";
 import * as StringUtility from "../../../Shared/StringUtility";
 import { userContext } from "../../../UserContext";

src/Explorer/Panes/Tables/AddTableEntityPanel.tsx

@@ -1,9 +1,9 @@
 import { IDropdownOption, Image, IPanelProps, IRenderFunction, Label, Stack, Text, TextField } from "@fluentui/react";
 import { useBoolean } from "@fluentui/react-hooks";
+import AddPropertyIcon from "images/Add-property.svg";
+import RevertBackIcon from "images/RevertBack.svg";
 import React, { FunctionComponent, useEffect, useState } from "react";
 import * as _ from "underscore";
-import AddPropertyIcon from "../../../../images/Add-property.svg";
-import RevertBackIcon from "../../../../images/RevertBack.svg";
 import { TableEntity } from "../../../Common/TableEntity";
 import { userContext } from "../../../UserContext";
 import Explorer from "../../Explorer";
@@ -67,10 +67,8 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
   const [selectedRow, setSelectedRow] = useState<number>(0);
   const [entityAttributeValue, setEntityAttributeValue] = useState<string>("");
   const [entityAttributeProperty, setEntityAttributeProperty] = useState<string>("");
-  const [
-    isEntityValuePanelOpen,
-    { setTrue: setIsEntityValuePanelTrue, setFalse: setIsEntityValuePanelFalse },
-  ] = useBoolean(false);
+  const [isEntityValuePanelOpen, { setTrue: setIsEntityValuePanelTrue, setFalse: setIsEntityValuePanelFalse }] =
+    useBoolean(false);
 
   /* Get default and previous saved entity headers */
   useEffect(() => {

src/Explorer/Panes/Tables/EditTableEntityPanel.tsx

@@ -1,9 +1,9 @@
 import { IDropdownOption, Image, IPanelProps, IRenderFunction, Label, Stack, Text, TextField } from "@fluentui/react";
 import { useBoolean } from "@fluentui/react-hooks";
+import AddPropertyIcon from "images/Add-property.svg";
+import RevertBackIcon from "images/RevertBack.svg";
 import React, { FunctionComponent, useEffect, useState } from "react";
 import * as _ from "underscore";
-import AddPropertyIcon from "../../../../images/Add-property.svg";
-import RevertBackIcon from "../../../../images/RevertBack.svg";
 import { TableEntity } from "../../../Common/TableEntity";
 import { userContext } from "../../../UserContext";
 import Explorer from "../../Explorer";
@@ -67,10 +67,8 @@ export const EditTableEntityPanel: FunctionComponent<EditTableEntityPanelProps>
   const [originalDocument, setOriginalDocument] = useState<Entities.ITableEntity>({});
   const [entityAttributeProperty, setEntityAttributeProperty] = useState<string>("");
 
-  const [
-    isEntityValuePanelOpen,
-    { setTrue: setIsEntityValuePanelTrue, setFalse: setIsEntityValuePanelFalse },
-  ] = useBoolean(false);
+  const [isEntityValuePanelOpen, { setTrue: setIsEntityValuePanelTrue, setFalse: setIsEntityValuePanelFalse }] =
+    useBoolean(false);
 
   useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -111,7 +109,7 @@ export const EditTableEntityPanel: FunctionComponent<EditTableEntityPanelProps>
             const nonEditableType: boolean =
               entityAttributeType === TableConstants.CassandraType.Blob ||
               entityAttributeType === TableConstants.CassandraType.Inet;
-            const isDisable = !_.contains<string>(cassandraKeys, key) && !nonEditableType;
+            const isDisable = !_.contains<string>(cassandraKeys[0], key) && !nonEditableType;
             const time =
               entityAttributeType === TableConstants.TableType.DateTime ? getFormattedTime(displayValue) : "";
             displayedAttributes.push({

src/Explorer/Panes/Tables/Validators/EntityTableHelper.tsx

@@ -19,21 +19,8 @@ export const options = [
   { key: Int64, text: Int64 },
 ];
 
-const {
-  Text,
-  Ascii,
-  Bigint,
-  Blob,
-  Decimal,
-  Float,
-  Int,
-  Uuid,
-  Varchar,
-  Varint,
-  Inet,
-  Smallint,
-  Tinyint,
-} = TableConstants.CassandraType;
+const { Text, Ascii, Bigint, Blob, Decimal, Float, Int, Uuid, Varchar, Varint, Inet, Smallint, Tinyint } =
+  TableConstants.CassandraType;
 export const cassandraOptions = [
   { key: Text, text: Text },
   { key: Ascii, text: Ascii },

src/Explorer/Panes/UploadFilePane/UploadFilePane.tsx

@@ -1,6 +1,6 @@
+import { Upload } from "Common/Upload/Upload";
 import React, { ChangeEvent, FunctionComponent, useState } from "react";
-import { Upload } from "../../../Common/Upload/Upload";
-import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../../Utils/NotificationConsoleUtils";
+import { logConsoleError, logConsoleInfo, logConsoleProgress } from "Utils/NotificationConsoleUtils";
 import { NotebookContentItem } from "../../Notebook/NotebookContentItem";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 

src/Explorer/Panes/UploadItemsPane/UploadItemsPane.tsx

@@ -1,8 +1,8 @@
 import { DetailsList, DetailsListLayoutMode, IColumn, SelectionMode } from "@fluentui/react";
+import { Upload } from "Common/Upload/Upload";
+import { UploadDetailsRecord } from "Contracts/ViewModels";
 import React, { ChangeEvent, FunctionComponent, useState } from "react";
-import { Upload } from "../../../Common/Upload/Upload";
-import { UploadDetailsRecord } from "../../../Contracts/ViewModels";
-import { logConsoleError } from "../../../Utils/NotificationConsoleUtils";
+import { logConsoleError } from "Utils/NotificationConsoleUtils";
 import Explorer from "../../Explorer";
 import { getErrorMessage } from "../../Tables/Utilities";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -2,17 +2,17 @@
  * Accordion top class
  */
 import { Link } from "@fluentui/react";
+import AddDatabaseIcon from "images/AddDatabase.svg";
+import NewQueryIcon from "images/AddSqlQuery_16x16.svg";
+import NewStoredProcedureIcon from "images/AddStoredProcedure.svg";
+import OpenQueryIcon from "images/BrowseQuery.svg";
+import NewContainerIcon from "images/Hero-new-container.svg";
+import NewNotebookIcon from "images/Hero-new-notebook.svg";
+import SampleIcon from "images/Hero-sample.svg";
+import NotebookIcon from "images/notebook/Notebook-resource.svg";
+import ScaleAndSettingsIcon from "images/Scale_15x15.svg";
+import CollectionIcon from "images/tree-collection.svg";
 import * as React from "react";
-import AddDatabaseIcon from "../../../images/AddDatabase.svg";
-import NewQueryIcon from "../../../images/AddSqlQuery_16x16.svg";
-import NewStoredProcedureIcon from "../../../images/AddStoredProcedure.svg";
-import OpenQueryIcon from "../../../images/BrowseQuery.svg";
-import NewContainerIcon from "../../../images/Hero-new-container.svg";
-import NewNotebookIcon from "../../../images/Hero-new-notebook.svg";
-import SampleIcon from "../../../images/Hero-sample.svg";
-import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
-import ScaleAndSettingsIcon from "../../../images/Scale_15x15.svg";
-import CollectionIcon from "../../../images/tree-collection.svg";
 import { AuthType } from "../../AuthType";
 import * as Constants from "../../Common/Constants";
 import * as ViewModels from "../../Contracts/ViewModels";

src/Explorer/Tables/DataTable/DataTableBindingManager.ts

@@ -277,8 +277,9 @@ function updateTableScrollableRegionWidth(): void {
     }
 
     var bodyWidth = $(window).width();
-    var dataTablesScrollBodyPosLeft = $(tabElement).find(Constants.htmlSelectors.dataTableScrollBodySelector).offset()
-      .left;
+    var dataTablesScrollBodyPosLeft = $(tabElement)
+      .find(Constants.htmlSelectors.dataTableScrollBodySelector)
+      .offset().left;
     var scrollWidth = bodyWidth - dataTablesScrollBodyPosLeft;
 
     // jquery datatables automatically sets width:100% to both the header and the body when we use it's column autoWidth feature.

src/Explorer/Tables/QueryBuilder/QueryClauseViewModel.ts

@@ -172,8 +172,8 @@ export default class QueryClauseViewModel {
     } else {
       this.resetFromTimestamp();
       if (userContext.apiType === "Cassandra") {
-        const cassandraSchema = this._queryBuilderViewModel.tableEntityListViewModel.queryTablesTab.collection
-          .cassandraSchema;
+        const cassandraSchema =
+          this._queryBuilderViewModel.tableEntityListViewModel.queryTablesTab.collection.cassandraSchema;
         for (let i = 0, len = cassandraSchema.length; i < len; i++) {
           if (cassandraSchema[i].property === this.field()) {
             this.type(cassandraSchema[i].type);

src/Explorer/Tabs/ConflictsTab.html

@@ -21,7 +21,7 @@
                 <td class="refreshColHeader">
                   <img
                     class="refreshcol"
-                    src="/refresh-cosmos.svg"
+                    src="/images/refresh-cosmos.svg"
                     data-bind="click: refreshDocumentsGrid"
                     alt="Refresh documents"
                   />
@@ -53,7 +53,7 @@
                 >
                   <img
                     class="refreshcol"
-                    src="/refresh-cosmos.svg"
+                    src="/images/refresh-cosmos.svg"
                     data-bind="click: refreshDocumentsGrid"
                     alt="Refresh documents"
                   />
@@ -110,7 +110,7 @@
       <div class="splitter ui-resizable-handle ui-resizable-e colResizePointer" id="h_splitter2"></div>
     </div>
     <div class="documentWaterMark" data-bind="visible: shouldShowWatermark">
-      <p><img src="/DocumentWaterMark.svg" alt="Document WaterMark" /></p>
+      <p><img src="/images/DocumentWaterMark.svg" alt="Document WaterMark" /></p>
       <p class="documentWaterMarkText">View and resolve conflicts</p>
     </div>
     <!-- Editor - Start -->

src/Explorer/Tabs/ConflictsTab.ts

@@ -1,9 +1,9 @@
 import { ConflictDefinition, FeedOptions, QueryIterator, Resource } from "@azure/cosmos";
+import DeleteIcon from "images/delete.svg";
+import DiscardIcon from "images/discard.svg";
+import SaveIcon from "images/save-cosmos.svg";
 import * as ko from "knockout";
 import Q from "q";
-import DeleteIcon from "../../../images/delete.svg";
-import DiscardIcon from "../../../images/discard.svg";
-import SaveIcon from "../../../images/save-cosmos.svg";
 import * as Constants from "../../Common/Constants";
 import { DocumentsGridMetrics, KeyCodes } from "../../Common/Constants";
 import { createDocument } from "../../Common/dataAccess/createDocument";

src/Explorer/Tabs/DocumentsTab.html

@@ -114,7 +114,7 @@
             data-bind="
                             click: onHideFilterClick, event: { keydown: onCloseButtonKeyDown }"
           >
-            <img src="/close-black.svg" style="height: 14px; width: 14px" alt="Hide filter" />
+            <img src="/images/close-black.svg" style="height: 14px; width: 14px" alt="Hide filter" />
           </span>
         </div>
       </div>
@@ -161,7 +161,7 @@
                 >
                   <img
                     class="refreshcol"
-                    src="/refresh-cosmos.svg"
+                    src="/images/refresh-cosmos.svg"
                     data-bind="click: refreshDocumentsGrid"
                     alt="Refresh documents"
                     tabindex="0"
@@ -205,7 +205,7 @@
       <div class="splitter ui-resizable-handle ui-resizable-e colResizePointer" id="h_splitter2"></div>
     </div>
     <div class="documentWaterMark" data-bind="visible: !shouldShowEditor()">
-      <p><img src="/DocumentWaterMark.svg" alt="Document WaterMark" /></p>
+      <p><img src="/images/DocumentWaterMark.svg" alt="Document WaterMark" /></p>
       <p class="documentWaterMarkText">Create new or work with existing document(s).</p>
     </div>
     <!-- Editor - Start -->

src/Explorer/Tabs/DocumentsTab.ts

@@ -1,11 +1,11 @@
 import { extractPartitionKey, ItemDefinition, PartitionKeyDefinition, QueryIterator, Resource } from "@azure/cosmos";
+import DeleteDocumentIcon from "images/DeleteDocument.svg";
+import DiscardIcon from "images/discard.svg";
+import NewDocumentIcon from "images/NewDocument.svg";
+import SaveIcon from "images/save-cosmos.svg";
+import UploadIcon from "images/Upload_16x16.svg";
 import * as ko from "knockout";
 import Q from "q";
-import DeleteDocumentIcon from "../../../images/DeleteDocument.svg";
-import DiscardIcon from "../../../images/discard.svg";
-import NewDocumentIcon from "../../../images/NewDocument.svg";
-import SaveIcon from "../../../images/save-cosmos.svg";
-import UploadIcon from "../../../images/Upload_16x16.svg";
 import * as Constants from "../../Common/Constants";
 import { DocumentsGridMetrics, KeyCodes } from "../../Common/Constants";
 import { createDocument } from "../../Common/dataAccess/createDocument";

src/Explorer/Tabs/GraphTab.tsx

@@ -1,7 +1,7 @@
+import NewVertexIcon from "images/NewVertex.svg";
+import StyleIcon from "images/Style.svg";
 import * as ko from "knockout";
 import React from "react";
-import NewVertexIcon from "../../../images/NewVertex.svg";
-import StyleIcon from "../../../images/Style.svg";
 import { DatabaseAccount } from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";

src/Explorer/Tabs/NotebookV2Tab.ts

@@ -1,16 +1,16 @@
 import { stringifyNotebook, toJS } from "@nteract/commutable";
+import ClearAllOutputsIcon from "images/notebook/Notebook-clear-all-outputs.svg";
+import CopyIcon from "images/notebook/Notebook-copy.svg";
+import CutIcon from "images/notebook/Notebook-cut.svg";
+import NewCellIcon from "images/notebook/Notebook-insert-cell.svg";
+import PasteIcon from "images/notebook/Notebook-paste.svg";
+import RestartIcon from "images/notebook/Notebook-restart.svg";
+import RunAllIcon from "images/notebook/Notebook-run-all.svg";
+import RunIcon from "images/notebook/Notebook-run.svg";
+import { default as InterruptKernelIcon, default as KillKernelIcon } from "images/notebook/Notebook-stop.svg";
+import SaveIcon from "images/save-cosmos.svg";
 import * as ko from "knockout";
 import * as Q from "q";
-import ClearAllOutputsIcon from "../../../images/notebook/Notebook-clear-all-outputs.svg";
-import CopyIcon from "../../../images/notebook/Notebook-copy.svg";
-import CutIcon from "../../../images/notebook/Notebook-cut.svg";
-import NewCellIcon from "../../../images/notebook/Notebook-insert-cell.svg";
-import PasteIcon from "../../../images/notebook/Notebook-paste.svg";
-import RestartIcon from "../../../images/notebook/Notebook-restart.svg";
-import RunAllIcon from "../../../images/notebook/Notebook-run-all.svg";
-import RunIcon from "../../../images/notebook/Notebook-run.svg";
-import { default as InterruptKernelIcon, default as KillKernelIcon } from "../../../images/notebook/Notebook-stop.svg";
-import SaveIcon from "../../../images/save-cosmos.svg";
 import { useNotebookSnapshotStore } from "../../hooks/useNotebookSnapshotStore";
 import { Action, ActionModifiers, Source } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";

src/Explorer/Tabs/QueryTab.html

@@ -6,7 +6,7 @@
     </div>
     <div class="warningErrorContainer" aria-live="assertive" data-bind="visible: maybeSubQuery">
       <div class="warningErrorContent">
-        <span><img class="paneErrorIcon" src="/info_color.svg" alt="Error" /></span>
+        <span><img class="paneErrorIcon" src="/images/info_color.svg" alt="Error" /></span>
         <span class="warningErrorDetailsLinkContainer">
           We have detected you may be using a subquery. Non-correlated subqueries are not currently supported.
           <a href="https://docs.microsoft.com/en-us/azure/cosmos-db/sql-query-subquery"
@@ -31,7 +31,7 @@
       ></editor>
       <!-- Splitter - Start -->
       <div class="splitter ui-resizable-handle ui-resizable-s" data-bind="attr: { id: splitterId }">
-        <img class="queryEditorHorizontalSplitter" src="/HorizontalSplitter.svg" alt="Splitter" />
+        <img class="queryEditorHorizontalSplitter" src="/images/HorizontalSplitter.svg" alt="Splitter" />
       </div>
     </div>
     <!-- Splitter - End -->
@@ -62,7 +62,7 @@
         class="queryEditorWatermark"
         data-bind="visible: allResultsMetadata().length === 0 && !error() && !queryResults() && !isExecuting()"
       >
-        <p><img src="/RunQuery.png" alt="Execute Query Watermark" /></p>
+        <p><img src="/images/RunQuery.png" alt="Execute Query Watermark" /></p>
         <p class="queryEditorWatermarkText">Execute a query to see the results</p>
       </div>
       <div
@@ -145,7 +145,7 @@
                 <td>
                   <span title="Retrieved document count">Retrieved document count</span>
                   <span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
-                    <img class="infoImg" src="/info-bubble.svg" alt="More information" />
+                    <img class="infoImg" src="/images/info-bubble.svg" alt="More information" />
                     <span class="queryMetricTooltipText">Total number of retrieved documents</span>
                   </span>
                 </td>
@@ -155,7 +155,7 @@
                 <td>
                   <span title="Retrieved document size">Retrieved document size</span>
                   <span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
-                    <img class="infoImg" src="/info-bubble.svg" alt="More information" />
+                    <img class="infoImg" src="/images/info-bubble.svg" alt="More information" />
                     <span class="queryMetricTooltipText">Total size of retrieved documents in bytes</span>
                   </span>
                 </td>
@@ -168,7 +168,7 @@
                 <td>
                   <span title="Output document count">Output document count</span>
                   <span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
-                    <img class="infoImg" src="/info-bubble.svg" alt="More information" />
+                    <img class="infoImg" src="/images/info-bubble.svg" alt="More information" />
                     <span class="queryMetricTooltipText">Number of output documents</span>
                   </span>
                 </td>
@@ -178,7 +178,7 @@
                 <td>
                   <span title="Output document size">Output document size</span>
                   <span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
-                    <img class="infoImg" src="/info-bubble.svg" alt="More information" />
+                    <img class="infoImg" src="/images/info-bubble.svg" alt="More information" />
                     <span class="queryMetricTooltipText">Total size of output documents in bytes</span>
                   </span>
                 </td>
@@ -191,7 +191,7 @@
                 <td>
                   <span title="Index hit document count">Index hit document count</span>
                   <span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
-                    <img class="infoImg" src="/info-bubble.svg" alt="More information" />
+                    <img class="infoImg" src="/images/info-bubble.svg" alt="More information" />
                     <span class="queryMetricTooltipText">Total number of documents matched by the filter</span>
                   </span>
                 </td>
@@ -201,7 +201,7 @@
                 <td>
                   <span title="Index lookup time">Index lookup time</span>
                   <span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
-                    <img class="infoImg" src="/info-bubble.svg" alt="More information" />
+                    <img class="infoImg" src="/images/info-bubble.svg" alt="More information" />
                     <span class="queryMetricTooltipText">Time spent in physical index layer</span>
                   </span>
                 </td>
@@ -213,7 +213,7 @@
                 <td>
                   <span title="Document load time">Document load time</span>
                   <span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
-                    <img class="infoImg" src="/info-bubble.svg" alt="More information" />
+                    <img class="infoImg" src="/images/info-bubble.svg" alt="More information" />
                     <span class="queryMetricTooltipText">Time spent in loading documents</span>
                   </span>
                 </td>
@@ -225,7 +225,7 @@
                 <td>
                   <span title="Query engine execution time">Query engine execution time</span>
                   <span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
-                    <img class="infoImg" src="/info-bubble.svg" alt="More information" />
+                    <img class="infoImg" src="/images/info-bubble.svg" alt="More information" />
                     <span class="queryMetricTooltipText queryEngineExeTimeInfo"
                       >Time spent by the query engine to execute the query expression (excludes other execution times
                       like load documents or write results)</span
@@ -243,7 +243,7 @@
                 <td>
                   <span title="System function execution time">System function execution time</span>
                   <span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
-                    <img class="infoImg" src="/info-bubble.svg" alt="More information" />
+                    <img class="infoImg" src="/images/info-bubble.svg" alt="More information" />
                     <span class="queryMetricTooltipText">Total time spent executing system (built-in) functions</span>
                   </span>
                 </td>
@@ -258,7 +258,7 @@
                 <td>
                   <span title="User defined function execution time">User defined function execution time</span>
                   <span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
-                    <img class="infoImg" src="/info-bubble.svg" alt="More information" />
+                    <img class="infoImg" src="/images/info-bubble.svg" alt="More information" />
                     <span class="queryMetricTooltipText">Total time spent executing user-defined functions</span>
                   </span>
                 </td>
@@ -273,7 +273,7 @@
                 <td>
                   <span title="Document write time">Document write time</span>
                   <span class="queryMetricInfoTooltip" role="tooltip" tabindex="0">
-                    <img class="infoImg" src="/info-bubble.svg" alt="More information" />
+                    <img class="infoImg" src="/images/info-bubble.svg" alt="More information" />
                     <span class="queryMetricTooltipText">Time spent to write query result set to response buffer</span>
                   </span>
                 </td>
@@ -300,7 +300,7 @@
               tabindex="0"
               data-bind="event: { click: onDownloadQueryMetricsCsvClick, keypress: onDownloadQueryMetricsCsvKeyPress }"
             >
-              <img class="downloadCsvImg" src="/DownloadQuery.svg" alt="download query metrics csv" />
+              <img class="downloadCsvImg" src="/images/DownloadQuery.svg" alt="download query metrics csv" />
               <span>Per-partition query metrics (CSV)</span>
             </a>
           </div>

src/Explorer/Tabs/QueryTab.ts

@@ -1,6 +1,6 @@
+import ExecuteQueryIcon from "images/ExecuteQuery.svg";
+import SaveQueryIcon from "images/save-cosmos.svg";
 import * as ko from "knockout";
-import ExecuteQueryIcon from "../../../images/ExecuteQuery.svg";
-import SaveQueryIcon from "../../../images/save-cosmos.svg";
 import * as Constants from "../../Common/Constants";
 import { queryDocuments } from "../../Common/dataAccess/queryDocuments";
 import { queryDocumentsPage } from "../../Common/dataAccess/queryDocumentsPage";

src/Explorer/Tabs/QueryTablesTab.html

@@ -9,7 +9,7 @@
     <!-- Tables Query Tab Errors - Start-->
     <div class="error-bar">
       <div class="error-message" aria-label="Error Message" data-bind="visible: hasQueryError">
-        <span><img class="entity-error-Img" src="/error_red.svg" /></span>
+        <span><img class="entity-error-Img" src="/images/error_red.svg" /></span>
         <span class="error-text" role="alert" data-bind="text: queryErrorMessage"></span>
       </div>
     </div>
@@ -44,7 +44,7 @@
                     type="button"
                     data-bind="enable: canGroupClauses, attr:{title: groupSelectedClauses}, click: groupClauses"
                   >
-                    <img class="and-or-svg" src="/And-Or.svg" alt="Group selected clauses" />
+                    <img class="and-or-svg" src="/images/And-Or.svg" alt="Group selected clauses" />
                   </button>
                 </th>
                 <th class="clause-table-cell header-background"><!-- Grouping indicator --></th>
@@ -79,7 +79,7 @@
               <img
                 class="addclauseProperty-Img"
                 style="margin-bottom: 5px"
-                src="/Add-property.svg"
+                src="/images/Add-property.svg"
                 alt="Add new clause"
               />
               <span style="margin-left: 5px" data-bind="text: addNewClauseLine"></span>
@@ -100,12 +100,16 @@
         >
           <!-- ko template: { ifnot: isExpanded} -->
           <div class="themed-images" type="text/html" id="ExpandChevronRight" data-bind="hasFocus: focusExpandIcon">
-            <img class="imgiconwidth expand-triangle expand-triangle-right" src="/Triangle-right.svg" alt="toggle" />
+            <img
+              class="imgiconwidth expand-triangle expand-triangle-right"
+              src="/images/Triangle-right.svg"
+              alt="toggle"
+            />
           </div>
           <!-- /ko -->
           <!-- ko template: { if: isExpanded} -->
           <div class="themed-images" type="text/html" id="ExpandChevronDown">
-            <img class="imgiconwidth expand-triangle" src="/Triangle-down.svg" alt="toggle" />
+            <img class="imgiconwidth expand-triangle" src="/images/Triangle-down.svg" alt="toggle" />
           </div>
           <!-- /ko -->
           <span>Advanced Options</span>
@@ -122,14 +126,14 @@
             aria-label="Show top results"
           />
           <div role="alert" aria-atomic="true" class="inline-div" data-bind="visible: isExceedingLimit">
-            <img class="advanced-options-icon" src="/QueryBuilder/StatusWarning_16x.png" />
+            <img class="advanced-options-icon" src="/images/QueryBuilder/StatusWarning_16x.png" />
             <span data-bind="text: topValueLimitMessage"></span>
           </div>
         </div>
         <div class="select">
           <span> Select fields for query: </span>
           <div data-bind="visible: isSelected">
-            <img class="advanced-options-icon" src="/QueryBuilder/QueryInformation_16x.png" />
+            <img class="advanced-options-icon" src="/images/QueryBuilder/QueryInformation_16x.png" />
             <span class="select-options-text" data-bind="text: selectMessage" />
           </div>
           <a
@@ -172,7 +176,7 @@
         tabindex="0"
         data-bind="click: $parent.addClauseIndex.bind($data, $index()), event: { keydown: $parent.onAddClauseKeyDown.bind($data, $index()) }, attr:{title: $parent.insertNewFilterLine}"
       >
-        <img class="querybuilder-addpropertyImg" src="/Add-property.svg" alt="Add clause" />
+        <img class="querybuilder-addpropertyImg" src="/images/Add-property.svg" alt="Add clause" />
       </span>
       <span
         class="entity-Add-Cancel"

src/Explorer/Tabs/QueryTablesTab.ts

@@ -1,11 +1,11 @@
+import AddEntityIcon from "images/AddEntity.svg";
+import DeleteEntitiesIcon from "images/DeleteEntities.svg";
+import EditEntityIcon from "images/Edit-entity.svg";
+import ExecuteQueryIcon from "images/ExecuteQuery.svg";
+import QueryBuilderIcon from "images/Query-Builder.svg";
+import QueryTextIcon from "images/Query-Text.svg";
 import * as ko from "knockout";
 import Q from "q";
-import AddEntityIcon from "../../../images/AddEntity.svg";
-import DeleteEntitiesIcon from "../../../images/DeleteEntities.svg";
-import EditEntityIcon from "../../../images/Edit-entity.svg";
-import ExecuteQueryIcon from "../../../images/ExecuteQuery.svg";
-import QueryBuilderIcon from "../../../images/Query-Builder.svg";
-import QueryTextIcon from "../../../images/Query-Text.svg";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { userContext } from "../../UserContext";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";

src/Explorer/Tabs/ScriptTabBase.ts

@@ -1,7 +1,7 @@
+import DiscardIcon from "images/discard.svg";
+import SaveIcon from "images/save-cosmos.svg";
 import * as ko from "knockout";
 import Q from "q";
-import DiscardIcon from "../../../images/discard.svg";
-import SaveIcon from "../../../images/save-cosmos.svg";
 import * as Constants from "../../Common/Constants";
 import editable from "../../Common/EditableUtility";
 import * as DataModels from "../../Contracts/DataModels";

src/Explorer/Tabs/StoredProcedureTab.ts

@@ -1,8 +1,8 @@
 import { Resource, StoredProcedureDefinition } from "@azure/cosmos";
+import ExecuteQueryIcon from "images/ExecuteQuery.svg";
 import * as ko from "knockout";
 import Q from "q";
 import * as _ from "underscore";
-import ExecuteQueryIcon from "../../../images/ExecuteQuery.svg";
 import * as Constants from "../../Common/Constants";
 import { createStoredProcedure } from "../../Common/dataAccess/createStoredProcedure";
 import { updateStoredProcedure } from "../../Common/dataAccess/updateStoredProcedure";

src/Explorer/Tabs/Tabs.tsx

@@ -1,7 +1,7 @@
+import loadingIcon from "images/circular_loader_black_16x16.gif";
+import errorIcon from "images/close-black.svg";
 import ko from "knockout";
 import React, { useEffect, useRef, useState } from "react";
-import loadingIcon from "../../../images/circular_loader_black_16x16.gif";
-import errorIcon from "../../../images/close-black.svg";
 import { useObservable } from "../../hooks/useObservable";
 import TabsBase from "./TabsBase";
 

src/Explorer/Tree/Database.ts

@@ -262,9 +262,10 @@ export default class Database implements ViewModels.Database {
     }
   }
 
-  private getDeltaCollections(
-    updatedCollectionsList: DataModels.Collection[]
-  ): { toAdd: DataModels.Collection[]; toDelete: Collection[] } {
+  private getDeltaCollections(updatedCollectionsList: DataModels.Collection[]): {
+    toAdd: DataModels.Collection[];
+    toDelete: Collection[];
+  } {
     const collectionsToAdd: DataModels.Collection[] = _.filter(
       updatedCollectionsList,
       (collection: DataModels.Collection) => {

src/Explorer/Tree/ResourceTreeAdapter.test.ts

@@ -6,7 +6,7 @@ import { ResourceTreeAdapter } from "./ResourceTreeAdapter";
 
 describe("ResourceTreeAdapter", () => {
   const mockContainer = (): Explorer =>
-    (({
+    ({
       selectedNode: ko.observable<ViewModels.TreeNode>({
         nodeKind: "nodeKind",
         rid: "rid",
@@ -19,11 +19,11 @@ describe("ResourceTreeAdapter", () => {
       },
       isNotebookEnabled: ko.observable<boolean>(true),
       databases: ko.observable<ViewModels.Database[]>([]),
-    } as unknown) as Explorer);
+    } as unknown as Explorer);
 
   // TODO isDataNodeSelected needs a better design and refactor, but for now, we protect some of the code paths
   describe("isDataNodeSelected", () => {
-    it("it should not select if no selected node", () => {
+    it("if no selected node it should not select", () => {
       const explorer = mockContainer();
       explorer.selectedNode(undefined);
       const resourceTreeAdapter = new ResourceTreeAdapter(explorer);
@@ -31,13 +31,13 @@ describe("ResourceTreeAdapter", () => {
       expect(isDataNodeSelected).toBeFalsy();
     });
 
-    it("it should not select incorrect subnodekinds", () => {
+    it("incorrect subnodekinds it should not select", () => {
       const resourceTreeAdapter = new ResourceTreeAdapter(mockContainer());
       const isDataNodeSelected = resourceTreeAdapter.isDataNodeSelected("foo", "bar", undefined);
       expect(isDataNodeSelected).toBeFalsy();
     });
 
-    it("it should not select if no active tab", () => {
+    it("if no active tab it should not select", () => {
       const explorer = mockContainer();
       explorer.tabsManager.activeTab(undefined);
       const resourceTreeAdapter = new ResourceTreeAdapter(explorer);
@@ -48,12 +48,12 @@ describe("ResourceTreeAdapter", () => {
     it("should select if correct database node regardless of subnodekinds", () => {
       const subNodeKind = ViewModels.CollectionTabKind.Documents;
       const explorer = mockContainer();
-      explorer.selectedNode(({
+      explorer.selectedNode({
         nodeKind: "Database",
         rid: "dbrid",
         id: ko.observable<string>("dbid"),
         selectedSubnodeKind: ko.observable<ViewModels.CollectionTabKind>(subNodeKind),
-      } as unknown) as ViewModels.TreeNode);
+      } as unknown as ViewModels.TreeNode);
       const resourceTreeAdapter = new ResourceTreeAdapter(explorer);
       const isDataNodeSelected = resourceTreeAdapter.isDataNodeSelected("dbid", undefined, [
         ViewModels.CollectionTabKind.Documents,
@@ -67,13 +67,13 @@ describe("ResourceTreeAdapter", () => {
       explorer.tabsManager.activeTab({
         tabKind: subNodeKind,
       } as TabsBase);
-      explorer.selectedNode(({
+      explorer.selectedNode({
         nodeKind: "Collection",
         rid: "collrid",
         databaseId: "dbid",
         id: ko.observable<string>("collid"),
         selectedSubnodeKind: ko.observable<ViewModels.CollectionTabKind>(subNodeKind),
-      } as unknown) as ViewModels.TreeNode);
+      } as unknown as ViewModels.TreeNode);
       const resourceTreeAdapter = new ResourceTreeAdapter(explorer);
       let isDataNodeSelected = resourceTreeAdapter.isDataNodeSelected("dbid", "collid", [subNodeKind]);
       expect(isDataNodeSelected).toBeTruthy();
@@ -82,26 +82,26 @@ describe("ResourceTreeAdapter", () => {
       explorer.tabsManager.activeTab({
         tabKind: subNodeKind,
       } as TabsBase);
-      explorer.selectedNode(({
+      explorer.selectedNode({
         nodeKind: "Collection",
         rid: "collrid",
         databaseId: "dbid",
         id: ko.observable<string>("collid"),
         selectedSubnodeKind: ko.observable<ViewModels.CollectionTabKind>(subNodeKind),
-      } as unknown) as ViewModels.TreeNode);
+      } as unknown as ViewModels.TreeNode);
       isDataNodeSelected = resourceTreeAdapter.isDataNodeSelected("dbid", "collid", [subNodeKind]);
       expect(isDataNodeSelected).toBeTruthy();
     });
 
     it("should not select incorrect collection node (e.g. Settings)", () => {
       const explorer = mockContainer();
-      explorer.selectedNode(({
+      explorer.selectedNode({
         nodeKind: "Collection",
         rid: "collrid",
         databaseId: "dbid",
         id: ko.observable<string>("collid"),
         selectedSubnodeKind: ko.observable<ViewModels.CollectionTabKind>(ViewModels.CollectionTabKind.Documents),
-      } as unknown) as ViewModels.TreeNode);
+      } as unknown as ViewModels.TreeNode);
       explorer.tabsManager.activeTab({
         tabKind: ViewModels.CollectionTabKind.Documents,
       } as TabsBase);

src/Explorer/Tree/ResourceTreeAdapter.tsx

@@ -1,16 +1,16 @@
 import { Callout, DirectionalHint, ICalloutProps, ILinkProps, Link, Stack, Text } from "@fluentui/react";
+import CosmosDBIcon from "images/Azure-Cosmos-DB.svg";
+import DeleteIcon from "images/delete.svg";
+import GalleryIcon from "images/GalleryIcon.svg";
+import FileIcon from "images/notebook/file-cosmos.svg";
+import CopyIcon from "images/notebook/Notebook-copy.svg";
+import NewNotebookIcon from "images/notebook/Notebook-new.svg";
+import NotebookIcon from "images/notebook/Notebook-resource.svg";
+import PublishIcon from "images/notebook/publish_content.svg";
+import RefreshIcon from "images/refresh-cosmos.svg";
+import CollectionIcon from "images/tree-collection.svg";
 import * as ko from "knockout";
 import * as React from "react";
-import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg";
-import DeleteIcon from "../../../images/delete.svg";
-import GalleryIcon from "../../../images/GalleryIcon.svg";
-import FileIcon from "../../../images/notebook/file-cosmos.svg";
-import CopyIcon from "../../../images/notebook/Notebook-copy.svg";
-import NewNotebookIcon from "../../../images/notebook/Notebook-new.svg";
-import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
-import PublishIcon from "../../../images/notebook/publish_content.svg";
-import RefreshIcon from "../../../images/refresh-cosmos.svg";
-import CollectionIcon from "../../../images/tree-collection.svg";
 import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
 import { ArrayHashMap } from "../../Common/ArrayHashMap";
 import { Areas } from "../../Common/Constants";

src/Explorer/Tree/ResourceTreeAdapterForResourceToken.tsx

@@ -1,13 +1,13 @@
+import CollectionIcon from "images/tree-collection.svg";
 import * as ko from "knockout";
-import { mostRecentActivity } from "../MostRecentActivity/MostRecentActivity";
 import * as React from "react";
-import * as ViewModels from "../../Contracts/ViewModels";
-import { NotebookContentItem } from "../Notebook/NotebookContentItem";
 import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
-import { TreeComponent, TreeNode } from "../Controls/TreeComponent/TreeComponent";
-import CollectionIcon from "../../../images/tree-collection.svg";
-import Explorer from "../Explorer";
+import * as ViewModels from "../../Contracts/ViewModels";
 import { userContext } from "../../UserContext";
+import { TreeComponent, TreeNode } from "../Controls/TreeComponent/TreeComponent";
+import Explorer from "../Explorer";
+import { mostRecentActivity } from "../MostRecentActivity/MostRecentActivity";
+import { NotebookContentItem } from "../Notebook/NotebookContentItem";
 
 export class ResourceTreeAdapterForResourceToken implements ReactAdapter {
   public parameters: ko.Observable<number>;

src/GalleryViewer/galleryViewer.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0" />
     <title>Gallery Viewer</title>
-    <link rel="shortcut icon" href="images/CosmosDB_rgb_ui_lighttheme.ico" type="image/x-icon" />
+    <link rel="shortcut icon" href="/images/CosmosDB_rgb_ui_lighttheme.ico" type="image/x-icon" />
   </head>
 
   <body style="overflow-y: scroll">

src/HostedExplorer.tsx

@@ -1,8 +1,8 @@
-import { useBoolean } from "@fluentui/react-hooks";
 import { initializeIcons } from "@fluentui/react";
+import { useBoolean } from "@fluentui/react-hooks";
+import ChevronRight from "images/chevron-right.svg";
 import * as React from "react";
 import { render } from "react-dom";
-import ChevronRight from "../images/chevron-right.svg";
 import "../less/hostedexplorer.less";
 import { AuthType } from "./AuthType";
 import { DatabaseAccount } from "./Contracts/DataModels";

src/Libs/jquery.js

@@ -1,5 +1,5 @@
-import $ from 'jquery';
+import * as $ from "jquery";
 global.$ = $;
 global.jQuery = $;
-require('datatables.net-dt');
-require('datatables.net-colreorder-dt');
+require("datatables.net-dt");
+require("datatables.net-colreorder-dt");