webpack and all loader as well plugin version update

less/Common/Constants.less

@@ -4,7 +4,7 @@
 
 @font-face {
   font-family: wf_segoe-ui_normal;
-  src: 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

@@ -47,10 +47,9 @@
     "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",
+    "crypto-browserify": "3.12.0",
     "css-element-queries": "1.1.1",
     "d3": "6.1.1",
     "datatables.net-colreorder-dt": "1.5.1",
@@ -81,10 +80,10 @@
     "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-dnd": "14.0.2",
+    "react-dnd-html5-backend": "14.0.0",
     "react-dom": "16.13.1",
     "react-hotkeys": "2.0.0",
     "react-i18next": "11.8.5",
@@ -97,7 +96,6 @@
     "sanitize-html": "2.3.3",
     "styled-components": "4.3.2",
     "swr": "0.4.0",
-    "terser-webpack-plugin": "3.1.0",
     "underscore": "1.9.1",
     "utility-types": "3.10.0"
   },
@@ -133,7 +131,9 @@
     "babel-jest": "24.9.0",
     "babel-loader": "8.1.0",
     "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",
@@ -147,12 +147,12 @@
     "expect-playwright": "0.3.3",
     "expose-loader": "0.7.5",
     "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",
+    "html-webpack-plugin": "5.3.1",
     "jest": "25.5.4",
     "jest-canvas-mock": "2.1.0",
     "jest-playwright-preset": "1.5.1",
@@ -160,7 +160,7 @@
     "less": "3.8.1",
     "less-loader": "4.1.0",
     "less-vars-loader": "1.1.0",
-    "mini-css-extract-plugin": "0.4.3",
+    "mini-css-extract-plugin": "1.5.0",
     "monaco-editor-webpack-plugin": "1.7.0",
     "node-fetch": "2.6.1",
     "playwright": "1.10.0",
@@ -170,19 +170,20 @@
     "rimraf": "3.0.0",
     "sinon": "3.2.1",
     "style-loader": "0.23.0",
-    "ts-loader": "6.2.2",
+    "terser-webpack-plugin": "5.1.1",
+    "ts-loader": "9.1.1",
     "tslint": "5.11.0",
     "tslint-microsoft-contrib": "6.0.0",
     "typescript": "4.2.4",
     "url-loader": "1.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.35.1",
+    "webpack-bundle-analyzer": "4.4.1",
+    "webpack-cli": "4.6.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 --mode development",
     "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",

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 "office-ui-fabric-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/Tooltip/Tooltip.tsx

@@ -1,7 +1,7 @@
 import { useId } from "@uifabric/react-hooks";
+import InfoBubble from "images/info-bubble.svg";
 import { ITooltipHostStyles, TooltipHost } from "office-ui-fabric-react/lib/Tooltip";
 import * as React from "react";
-import InfoBubble from "../../../images/info-bubble.svg";
 
 const calloutProps = { gapSpace: 0 };
 const hostStyles: Partial<ITooltipHostStyles> = { root: { display: "inline-block" } };

src/Common/Upload/Upload.tsx

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

src/Controls/Heatmap/Heatmap.ts

@@ -14,7 +14,7 @@ import {
   HeatmapData,
   LayoutSettings,
   PartitionTimeStampToData,
-  PortalTheme,
+  PortalTheme
 } from "./HeatmapDatatypes";
 
 export class Heatmap {

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 { DefaultAccountExperienceType } from "../DefaultAccountExperienceType";
 import { userContext } from "../UserContext";

src/Explorer/Controls/Accordion/AccordionComponent.tsx

@@ -2,12 +2,11 @@
  * Accordion top class
  */
 
+import TriangleDownIcon from "images/Triangle-down.svg";
+import TriangleRightIcon from "images/Triangle-right.svg";
 import * as React from "react";
-import * as Constants from "../../../Common/Constants";
 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,14 +1,12 @@
-import * as StringUtils from "../../../Utils/StringUtils";
-import { KeyCodes } from "../../../Common/Constants";
-import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
-import CollapseChevronDownIcon from "../../../../images/QueryBuilder/CollapseChevronDown_16x.png";
-
+import CollapseChevronDownIcon from "images/QueryBuilder/CollapseChevronDown_16x.png";
 /**
  * React component for Command button component.
  */
-
 import * as React from "react";
+import { KeyCodes } from "../../../Common/Constants";
+import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import * as StringUtils from "../../../Utils/StringUtils";
 import { ArcadiaMenuPickerProps } from "../Arcadia/ArcadiaMenuPicker";
 
 /**

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

@@ -15,7 +15,7 @@
         tabindex="0"
         data-bind="click: $parent.removeItem, event: { keydown: $parent.onRemoveItemKeyPress }"
       >
-        <img src="/delete.svg" alt="Remove item" />
+        <img src="/images/delete.svg" alt="Remove item" />
       </span>
     </div>
   </div>
@@ -28,7 +28,7 @@
       tabindex="0"
       data-bind="click: addItem, event: { keydown: onAddItemKeyPress }"
     >
-      <img src="/Add-property.svg" data-bind="attr: {alt: buttonText}" /> <span data-bind="text: buttonText"></span>
+      <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

@@ -1,6 +1,6 @@
 <div class="warningErrorContainer" data-bind="visible: !!params.errorMsg()">
   <div class="warningErrorContent">
-    <span><img src="/error_red.svg" alt="Error" /></span>
+    <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/NotebookGallery/Cards/GalleryCardComponent.tsx

@@ -1,25 +1,25 @@
 import { Card } from "@uifabric/react-cards";
+import CosmosDBLogo from "images/CosmosDB-logo.svg";
 import {
+  BaseButton,
+  Button,
   FontWeights,
   Icon,
   IconButton,
   Image,
   ImageFit,
-  Persona,
-  Text,
   Link,
-  BaseButton,
-  Button,
   LinkBase,
+  Persona,
   Separator,
-  TooltipHost,
   Spinner,
   SpinnerSize,
+  Text,
+  TooltipHost,
 } from "office-ui-fabric-react";
 import * as React from "react";
 import { IGalleryItem } from "../../../../Juno/JunoClient";
 import * as FileSystemUtil from "../../../Notebook/FileSystemUtil";
-import CosmosDBLogo from "../../../../../images/CosmosDB-logo.svg";
 
 export interface GalleryCardComponentProps {
   data: IGalleryItem;

src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx

@@ -1,6 +1,7 @@
 /**
  * Wrapper around Notebook metadata
  */
+import CosmosDBLogo from "images/CosmosDB-logo.svg";
 import {
   FontWeights,
   Icon,
@@ -15,9 +16,8 @@ import {
 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/QueriesGridReactComponent/QueriesGridComponent.tsx

@@ -1,3 +1,4 @@
+import SaveQueryBannerIcon from "images/save_query_banner.png";
 import { IButtonProps, IconButton } from "office-ui-fabric-react/lib/Button";
 import { ContextualMenu, IContextualMenuProps } from "office-ui-fabric-react/lib/ContextualMenu";
 import {
@@ -19,7 +20,6 @@ import {
 } from "office-ui-fabric-react/lib/utilities/selection/index";
 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 DiscardIcon from "images/discard.svg";
+import SaveIcon from "images/save-cosmos.svg";
 import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from "office-ui-fabric-react";
 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/ThroughputInput/ThroughputInputComponentAutoscaleV3.html

@@ -9,7 +9,7 @@
 
       <!-- ko if: infoBubbleText -->
       <span class="infoTooltip" role="tooltip" tabindex="0">
-        <img class="infoImg" src="../../../../images/info-bubble.svg" alt="More information" />
+        <img class="infoImg" src="/images/info-bubble.svg" alt="More information" />
         <span data-bind="text: infoBubbleText" class="tooltiptext throughputRuInfo"></span>
       </span>
       <!-- /ko -->
@@ -163,7 +163,7 @@
     </div>
 
     <div class="freeTierInlineWarning" data-bind="visible: showFreeTierExceedThroughputWarning">
-      <span class="freeTierWarningIcon"><img src="/warning.svg" alt="Warning" /></span>
+      <span class="freeTierWarningIcon"><img src="/images/warning.svg" alt="Warning" /></span>
       <span class="freeTierWarningMessage" data-bind="text: freeTierExceedThroughputWarning"></span>
     </div>
 

src/Explorer/Controls/TreeComponent/TreeComponent.tsx

@@ -5,21 +5,20 @@
  * - context menu
  */
 
-import * as React from "react";
-import * as Constants from "../../../Common/Constants";
-import AnimateHeight from "react-animate-height";
-import { IconButton, IButtonStyles } from "office-ui-fabric-react/lib/Button";
+import LoadingIndicator_3Squares from "images/LoadingIndicator_3Squares.gif";
+import TriangleDownIcon from "images/Triangle-down.svg";
+import TriangleRightIcon from "images/Triangle-right.svg";
+import { IButtonStyles, IconButton } from "office-ui-fabric-react/lib/Button";
 import {
   DirectionalHint,
   IContextualMenuItemProps,
   IContextualMenuProps,
 } from "office-ui-fabric-react/lib/ContextualMenu";
-
-import TriangleDownIcon from "../../../../images/Triangle-down.svg";
-import TriangleRightIcon from "../../../../images/Triangle-right.svg";
-import LoadingIndicator_3Squares from "../../../../images/LoadingIndicator_3Squares.gif";
-import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import * as React from "react";
+import AnimateHeight from "react-animate-height";
+import * as Constants from "../../../Common/Constants";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 
 export interface TreeNodeMenuItem {
   label: string;

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.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";

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/check.svg";
+import DeleteIcon from "images/delete.svg";
+import EditIcon from "images/edit.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/NewVertexComponent/NewVertexComponent.tsx

@@ -1,7 +1,7 @@
+import AddIcon from "images/Add-property.svg";
+import DeleteIcon from "images/delete.svg";
 import { Dropdown, IDropdownOption, Stack, TextField } from "office-ui-fabric-react";
 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 { Areas } from "../../../Common/Constants";

src/Explorer/Menus/CommandBar/CommandBarUtil.tsx

@@ -1,18 +1,18 @@
-import _ from "underscore";
-import * as React from "react";
+import ChevronDownIcon from "images/Chevron_down.svg";
 import { Observable } from "knockout";
+import { ICommandBarItemProps } from "office-ui-fabric-react/lib/CommandBar";
+import { Dropdown, IDropdownOption, IDropdownStyles } from "office-ui-fabric-react/lib/Dropdown";
 import { IconType } from "office-ui-fabric-react/lib/Icon";
 import { IComponentAsProps } from "office-ui-fabric-react/lib/Utilities";
+import * as React from "react";
+import _ from "underscore";
 import { StyleConstants } from "../../../Common/Constants";
-import { ICommandBarItemProps } from "office-ui-fabric-react/lib/CommandBar";
-import { Dropdown, IDropdownStyles, IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
-import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
-import ChevronDownIcon from "../../../../images/Chevron_down.svg";
-import { ArcadiaMenuPicker } from "../../Controls/Arcadia/ArcadiaMenuPicker";
-import { MemoryTrackerComponent } from "./MemoryTrackerComponent";
 import { MemoryUsageInfo } from "../../../Contracts/DataModels";
-import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import { ArcadiaMenuPicker } from "../../Controls/Arcadia/ArcadiaMenuPicker";
+import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
+import { MemoryTrackerComponent } from "./MemoryTrackerComponent";
 
 /**
  * Convert our NavbarButtonConfig to UI Fabric buttons

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -2,18 +2,18 @@
  * React component for control bar
  */
 
+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 { Dropdown, IDropdownOption } from "office-ui-fabric-react";
 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";
 

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/Panes/AddCollectionPane.html

@@ -15,7 +15,7 @@
     <!-- Add collection form  -- End -->
     <!-- Loader - Start -->
     <div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
-      <img class="dataExplorerLoader" src="/LoadingIndicator_3Squares.gif" />
+      <img class="dataExplorerLoader" src="/images/LoadingIndicator_3Squares.gif" />
     </div>
     <!-- Loader - End -->
   </div>
@@ -33,7 +33,7 @@
       data-bind="click: cancel, event: { keypress: onCloseKeyPress }"
       tabindex="0"
     >
-      <img src="../../../images/close-black.svg" title="Close" alt="Close" />
+      <img src="/images/close-black.svg" title="Close" alt="Close" />
     </div>
   </div>
   <!-- Add collection header - End -->
@@ -41,7 +41,7 @@
   <!-- Add collection errors - Start -->
   <div class="warningErrorContainer" aria-live="assertive" data-bind="visible: formErrors() && formErrors() !== ''">
     <div class="warningErrorContent">
-      <span><img class="paneErrorIcon" src="/error_red.svg" alt="Error" /></span>
+      <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
@@ -57,7 +57,7 @@
   </div>
   <div class="warningErrorContainer" aria-live="assertive" data-bind="visible: formWarnings() && formWarnings() !== ''">
     <div class="warningErrorContent">
-      <span><img class="paneErrorIcon" src="/warning.svg" alt="Warning" /></span>
+      <span><img class="paneErrorIcon" src="/images/warning.svg" alt="Warning" /></span>
       <span class="warningErrorDetailsLinkContainer">
         <span class="formErrors" data-bind="text: formWarnings, attr: { title: formWarnings }"></span>
       </span>
@@ -72,7 +72,7 @@
     data-bind="visible: showUpsellMessage && showUpsellMessage() && formErrors && !formErrors()"
   >
     <div class="infoBoxContent">
-      <span><img class="infoBoxIcon" src="/info_color.svg" alt="Promo" /></span>
+      <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
@@ -95,7 +95,7 @@
         <span class="mandatoryStar">*</span>
         <span class="addCollectionLabel">Database id</span>
         <span class="infoTooltip" 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="tooltiptext infoTooltipWidth"
             >A database is analogous to a namespace. It is the unit of management for a set of containers.</span
           >
@@ -181,7 +181,7 @@
         />
         <span class="databaseProvisionText" for="databaseSharedThroughput">Provision database throughput</span>
         <span class="infoTooltip" 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="tooltiptext provisionDatabaseThroughput"
             >Provisioned throughput at the database level will be shared across all containers within the
             database.</span
@@ -228,7 +228,7 @@
         <span class="mandatoryStar">*</span>
         <span class="addCollectionLabel" data-bind="text: collectionIdTitle"></span>
         <span class="infoTooltip" 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="tooltiptext infoTooltipWidth"
             >Unique identifier for the container and used for id-based routing through REST and all SDKs</span
           >
@@ -302,7 +302,7 @@
       <span class="mandatoryStar">*</span>
       <span class="addCollectionLabel">Storage capacity</span>
       <span class="infoTooltip" 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="tooltiptext infoTooltipWidth"
           >This is the maximum storage size of the container. Storage is billed per GB based on consumption.</span
         >
@@ -336,7 +336,7 @@
             <span class="mandatoryStar">*</span>
             <span class="addCollectionLabel" data-bind="text: partitionKeyName"></span>
             <span class="infoTooltip" 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="tooltiptext infoTooltipWidth"
                 >The <span data-bind="text: partitionKeyName"></span> is used to automatically partition data among
                 multiple servers for scalability. Choose a JSON property name that has a wide range of values and is
@@ -396,7 +396,7 @@
           />
           <span for="collectionSharedThroughput" data-bind="text: collectionWithThroughputInSharedTitle"></span>
           <span class="leftAlignInfoTooltip" 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="tooltiptext sharedCollectionThroughputTooltipWidth"
               >You can optionally provision dedicated throughput for a container within a database that has throughput
               provisioned. This dedicated throughput amount will not be shared with other containers in the database and
@@ -456,7 +456,7 @@
           />
           <span>Create a Wildcard Index on all fields</span>
           <span class="infoTooltip" 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="tooltiptext mongoWildcardIndexTooltipWidth">
               By default, only the field _id is indexed. Creating a wildcard index on all fields will quickly optimize
               query performance and is recommended during development.
@@ -480,7 +480,7 @@
               tabindex="0"
               data-bind="event: { focus: function(data, event) { transferFocus('tooltip1', 'link1') } }"
             >
-              <img class="infoImg" src="/info-bubble.svg" alt="More information" />
+              <img class="infoImg" src="/images/info-bubble.svg" alt="More information" />
               <span id="tooltip1" class="tooltiptext infoTooltipWidth" data-bind="event: { mouseout: onMouseOut }">
                 Enable analytical store capability to perform near real-time analytics on your operational data, without
                 impacting the performance of transactional workloads. Learn more
@@ -575,7 +575,7 @@
       <p class="uniqueKeys">
         <span class="addCollectionLabel">Unique keys</span>
         <span class="uniqueInfoTooltip" 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="uniqueTooltiptext infoTooltipWidth"
             >Unique keys provide developers with the ability to add a layer of data integrity to their database. By
             creating a unique key policy when a container is created, you ensure the uniqueness of one or more values

src/Explorer/Panes/AddDatabasePane.html

@@ -15,7 +15,7 @@
     <!-- Add database form  -- End -->
     <!-- Loader - Start -->
     <div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
-      <img class="dataExplorerLoader" src="/LoadingIndicator_3Squares.gif" />
+      <img class="dataExplorerLoader" src="/images/LoadingIndicator_3Squares.gif" />
     </div>
     <!-- Loader - End -->
   </div>
@@ -32,7 +32,7 @@
       data-bind="click: cancel, event: { keypress: onCloseKeyPress }"
       tabindex="0"
     >
-      <img src="../../../images/close-black.svg" title="Close" alt="Close" />
+      <img src="/images/close-black.svg" title="Close" alt="Close" />
     </div>
   </div>
   <!-- Add database header - End -->
@@ -40,7 +40,7 @@
   <!-- Add database errors - Start -->
   <div class="warningErrorContainer" aria-live="assertive" data-bind="visible: formErrors() && formErrors() !== ''">
     <div class="warningErrorContent">
-      <span><img class="paneErrorIcon" src="/error_red.svg" alt="Error" /></span>
+      <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
@@ -63,7 +63,7 @@
     data-bind="visible: showUpsellMessage && showUpsellMessage() && formErrors && !formErrors()"
   >
     <div class="infoBoxContent">
-      <span><img class="infoBoxIcon" src="/info_color.svg" alt="Promo" /></span>
+      <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
@@ -86,7 +86,7 @@
         <span class="mandatoryStar">*</span>
         <span data-bind="text: databaseIdLabel"></span>
         <span class="infoTooltip" 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="tooltiptext infoTooltipWidth" data-bind="text: databaseIdTooltipText"></span>
         </span>
       </p>
@@ -116,7 +116,7 @@
         />
         <span class="databaseProvisionText" for="databaseSharedThroughput">Provision throughput</span>
         <span class="infoTooltip" 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="tooltiptext provisionDatabaseThroughput"
             data-bind="text: databaseLevelThroughputTooltipText"

src/Explorer/Panes/CassandraAddCollectionPane.html

@@ -26,7 +26,7 @@
             data-bind="
                     click: cancel, event: { keypress: onCloseKeyPress }"
           >
-            <img src="../../../images/close-black.svg" title="Close" alt="Close" />
+            <img src="/images/close-black.svg" title="Close" alt="Close" />
           </div>
         </div>
         <!-- Add Cassandra collection header - End -->
@@ -37,7 +37,7 @@
           data-bind="visible: formErrors() && formErrors() !== ''"
         >
           <div class="warningErrorContent">
-            <span><img class="paneErrorIcon" src="/error_red.svg" alt="Error" /></span>
+            <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>
@@ -49,7 +49,7 @@
             <p>
               <span class="mandatoryStar">*</span> Keyspace name
               <span class="infoTooltip" 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="tooltiptext infoTooltipWidth"
                   >Select an existing keyspace or enter a new keyspace id.</span
                 >
@@ -134,7 +134,7 @@
               />
               <span class="databaseProvisionText" for="keyspaceSharedThroughput">Provision keyspace throughput</span>
               <span class="infoTooltip" 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="tooltiptext provisionDatabaseThroughput"
                   >Provisioned throughput at the keyspace level will be shared across unlimited number of tables within
                   the keyspace</span
@@ -213,7 +213,7 @@
             />
             <span for="tableSharedThroughput">Provision dedicated throughput for this table</span>
             <span class="leftAlignInfoTooltip" 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="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
@@ -265,7 +265,7 @@
       <!-- Add Cassandra collection form - End -->
       <!-- Loader - Start -->
       <div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
-        <img class="dataExplorerLoader" src="/LoadingIndicator_3Squares.gif" alt="loading indicator" />
+        <img class="dataExplorerLoader" src="/images/LoadingIndicator_3Squares.gif" alt="loading indicator" />
       </div>
       <!-- Loader - End -->
     </div>

src/Explorer/Panes/ExecuteSprocParamsPane/ExecuteSprocParamsPane.tsx

@@ -1,7 +1,7 @@
 import { useBoolean } from "@uifabric/react-hooks";
+import AddPropertyIcon from "images/Add-property.svg";
 import { IDropdownOption, IImageProps, Image, Stack, Text } from "office-ui-fabric-react";
 import React, { FunctionComponent, useState } from "react";
-import AddPropertyIcon from "../../../../images/Add-property.svg";
 import Explorer from "../../Explorer";
 import StoredProcedure from "../../Tree/StoredProcedure";
 import {

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 "office-ui-fabric-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

@@ -1,7 +1,7 @@
+import ErrorRedIcon from "images/error_red.svg";
+import LoadingIndicatorIcon from "images/LoadingIndicator_3Squares.gif";
 import { IconButton, PrimaryButton } from "office-ui-fabric-react/lib/Button";
 import React, { FunctionComponent, ReactNode } from "react";
-import ErrorRedIcon from "../../../../images/error_red.svg";
-import LoadingIndicatorIcon from "../../../../images/LoadingIndicator_3Squares.gif";
 import { KeyCodes } from "../../../Common/Constants";
 import Explorer from "../../Explorer";
 

src/Explorer/Panes/GitHubReposPane.html

@@ -7,7 +7,7 @@
 
     <!-- Loader - Start -->
     <div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
-      <img class="dataExplorerLoader" alt="loading indicator image" src="/LoadingIndicator_3Squares.gif" />
+      <img class="dataExplorerLoader" alt="loading indicator image" src="/images/LoadingIndicator_3Squares.gif" />
     </div>
     <!-- Loader - End -->
   </div>

src/Explorer/Panes/GraphStylingPane.html

@@ -14,7 +14,7 @@
             tabindex="0"
             data-bind="click: cancel, event: { keypress: onCloseKeyPress }"
           >
-            <img src="../../../images/close-black.svg" title="Close" alt="Close" />
+            <img src="/images/close-black.svg" title="Close" alt="Close" />
           </div>
         </div>
         <!-- Graph Styling header - End -->
@@ -26,7 +26,7 @@
           data-bind="visible: formErrors() && formErrors() !== ''"
         >
           <div class="warningErrorContent">
-            <span><img class="paneErrorIcon" src="/error_red.svg" alt="Error" /></span>
+            <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

src/Explorer/Panes/LoadQueryPane/LoadQueryPane.tsx

@@ -1,7 +1,7 @@
 import { useBoolean } from "@uifabric/react-hooks";
+import folderIcon from "images/folder_16x16.svg";
 import { IImageProps, Image, ImageFit, Stack, TextField } from "office-ui-fabric-react";
 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/SwitchDirectoryPane.html

@@ -7,7 +7,7 @@
       <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: close">
-          <img src="../../../images/close-black.svg" title="Close" alt="Close" />
+          <img src="/images/close-black.svg" title="Close" alt="Close" />
         </div>
       </div>
       <!-- Switch Directory header - End -->

src/Explorer/Panes/Tables/AddTableEntityPanel.tsx

@@ -1,4 +1,6 @@
 import { useBoolean } from "@uifabric/react-hooks";
+import AddPropertyIcon from "images/Add-property.svg";
+import RevertBackIcon from "images/RevertBack.svg";
 import {
   IDropdownOption,
   Image,
@@ -11,8 +13,6 @@ import {
 } from "office-ui-fabric-react";
 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";

src/Explorer/Panes/Tables/EditTableEntityPanel.tsx

@@ -1,4 +1,6 @@
 import { useBoolean } from "@uifabric/react-hooks";
+import AddPropertyIcon from "images/Add-property.svg";
+import RevertBackIcon from "images/RevertBack.svg";
 import {
   IDropdownOption,
   Image,
@@ -11,8 +13,6 @@ import {
 } from "office-ui-fabric-react";
 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";

src/Explorer/Panes/Tables/TableAddEntityPane.html

@@ -29,7 +29,7 @@
             data-bind="
                     click: cancel, event: { keydown: onCloseKeyPress }"
           >
-            <img src="../../../../images/close-black.svg" title="Close" alt="Close" />
+            <img src="/images/close-black.svg" title="Close" alt="Close" />
           </div>
         </div>
         <!-- Add table entity header - End -->
@@ -107,7 +107,7 @@
                     tabindex="0"
                     data-bind="click: $parent.editAttribute.bind($data, $index()), visible: valueEditable, event: { keydown: $parent.onEditPropertyKeyDown.bind($data, $index()) }"
                   >
-                    <img class="entity-Editor-Cancel-Img" src="/Edit_entity.svg" alt="Edit" />
+                    <img class="entity-Editor-Cancel-Img" src="/images/Edit_entity.svg" alt="Edit" />
                   </span>
                   <span
                     class="entity-Edit-Cancel"
@@ -117,7 +117,7 @@
                     tabindex="0"
                     data-bind="click: $parent.removeAttribute.bind($data, $index()), visible: removable, event: { keydown: $parent.onDeletePropertyKeyDown.bind($data, $index()) }"
                   >
-                    <img class="entity-Editor-Cancel-Img" src="/delete.svg" alt="Cancel" />
+                    <img class="entity-Editor-Cancel-Img" src="/images/delete.svg" alt="Cancel" />
                   </span>
                 </div>
               </div>
@@ -134,7 +134,7 @@
                     data-bind="visible: canAdd, click: insertAttribute, event: { keydown: onAddPropertyKeyDown }"
                     autofocus
                   >
-                    <img class="addPropertyImg" src="/Add-property.svg" alt="Insert attribute" />
+                    <img class="addPropertyImg" src="/images/Add-property.svg" alt="Insert attribute" />
                     <span data-bind="text: addButtonLabel"> </span>
                   </span>
                 </div>
@@ -167,7 +167,7 @@
             data-bind="
                     click: $parent.finishEditingAttribute, event: { keydown: $parent.onBackButtonKeyDown }"
           >
-            <img src="/RevertBack.svg" alt="BackIcon" />
+            <img src="/images/RevertBack.svg" alt="BackIcon" />
           </span>
           <span class="edit-value-text" data-bind="text: name"></span>
         </div>

src/Explorer/Panes/Tables/TableEditEntityPane.html

@@ -28,7 +28,7 @@
             data-bind="
                     click: cancel, event: { keydown: onCloseKeyPress }"
           >
-            <img src="../../../../images/close-black.svg" title="Close" alt="Close" />
+            <img src="/images/close-black.svg" title="Close" alt="Close" />
           </div>
         </div>
         <!-- Edit table entity header - End -->
@@ -105,7 +105,7 @@
                     data-bind="click: $parent.editAttribute.bind($data, $index()), visible: valueEditable, event: { keydown: $parent.onEditPropertyKeyDown.bind($data, $index()) }"
                     title="Edit property"
                   >
-                    <img class="entity-Editor-Cancel-Img" src="/Edit_entity.svg" alt="Edit attribute" />
+                    <img class="entity-Editor-Cancel-Img" src="/images/Edit_entity.svg" alt="Edit attribute" />
                   </span>
                   <span
                     class="entity-Edit-Cancel"
@@ -115,7 +115,7 @@
                     data-bind="click: $parent.removeAttribute.bind($data, $index()), visible: removable, event: { keydown: $parent.onDeletePropertyKeyDown.bind($data, $index()) }"
                     title="Delete property"
                   >
-                    <img class="entity-Editor-Cancel-Img" src="/delete.svg" alt="Remove attribute" />
+                    <img class="entity-Editor-Cancel-Img" src="/images/delete.svg" alt="Remove attribute" />
                   </span>
                 </div>
               </div>
@@ -131,7 +131,7 @@
                     data-bind="visible: canAdd, click: insertAttribute, event: { keydown: onAddPropertyKeyDown }"
                     autofocus
                   >
-                    <img class="addPropertyImg" src="/Add-property.svg" alt="Add attribute" />
+                    <img class="addPropertyImg" src="/images/Add-property.svg" alt="Add attribute" />
                     <span data-bind="text: addButtonLabel"> </span>
                   </span>
                 </div>
@@ -165,7 +165,7 @@
             data-bind="
                     click: $parent.finishEditingAttribute, event: { keydown: $parent.onBackButtonKeyDown }"
           >
-            <img src="/RevertBack.svg" alt="BackIcon" />
+            <img src="/images/RevertBack.svg" alt="BackIcon" />
           </span>
           <span class="edit-value-text" data-bind="text: name"></span>
         </div>

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -1,18 +1,18 @@
 /**
  * Accordion top class
  */
+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 { Link } from "office-ui-fabric-react/lib/Link";
 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/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,17 +1,17 @@
 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 * as _ from "underscore";
-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 { ArmApiVersions } from "../../Common/Constants";
 import { configContext } from "../../ConfigContext";
 import * as DataModels from "../../Contracts/DataModels";
@@ -166,7 +166,7 @@ export default class NotebookTabV2 extends NotebookTabBase {
       {
         iconSrc: null,
         iconAlt: kernelLabel,
-        onCommandClick: () => {},
+        onCommandClick: () => { },
         commandButtonLabel: null,
         hasPopup: false,
         disabled: availableKernels.length < 1,
@@ -176,16 +176,16 @@ export default class NotebookTabV2 extends NotebookTabBase {
         dropdownWidth: 100,
         children: availableKernels.map(
           (kernel: KernelSpecsDisplay) =>
-            ({
-              iconSrc: null,
-              iconAlt: kernel.displayName,
-              onCommandClick: () => this.notebookComponentAdapter.notebookChangeKernel(kernel.name),
-              commandButtonLabel: kernel.displayName,
-              dropdownItemKey: kernel.name,
-              hasPopup: false,
-              disabled: false,
-              ariaLabel: kernel.displayName,
-            } as CommandButtonComponentProps)
+          ({
+            iconSrc: null,
+            iconAlt: kernel.displayName,
+            onCommandClick: () => this.notebookComponentAdapter.notebookChangeKernel(kernel.name),
+            commandButtonLabel: kernel.displayName,
+            dropdownItemKey: kernel.name,
+            hasPopup: false,
+            disabled: false,
+            ariaLabel: kernel.displayName,
+          } as CommandButtonComponentProps)
         ),
         ariaLabel: kernelLabel,
       },
@@ -276,7 +276,7 @@ export default class NotebookTabV2 extends NotebookTabBase {
       {
         iconSrc: null,
         iconAlt: null,
-        onCommandClick: () => {},
+        onCommandClick: () => { },
         commandButtonLabel: null,
         ariaLabel: cellTypeLabel,
         hasPopup: false,
@@ -364,7 +364,7 @@ export default class NotebookTabV2 extends NotebookTabBase {
         iconSrc: null,
         iconAlt: workspaceLabel,
         ariaLabel: workspaceLabel,
-        onCommandClick: () => {},
+        onCommandClick: () => { },
         commandButtonLabel: null,
         hasPopup: false,
         disabled: this.container.arcadiaWorkspaces.length < 1,

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";
@@ -375,15 +375,15 @@ export default class QueryTab extends TabsBase implements ViewModels.WaitsForTem
         aggregatedMetrics.documentLoadTime =
           queryMetrics.documentLoadTime &&
           this._normalize(queryMetrics.documentLoadTime.totalMilliseconds()) +
-            this._normalize(aggregatedMetrics.documentLoadTime);
+          this._normalize(aggregatedMetrics.documentLoadTime);
         aggregatedMetrics.documentWriteTime =
           queryMetrics.documentWriteTime &&
           this._normalize(queryMetrics.documentWriteTime.totalMilliseconds()) +
-            this._normalize(aggregatedMetrics.documentWriteTime);
+          this._normalize(aggregatedMetrics.documentWriteTime);
         aggregatedMetrics.indexHitDocumentCount =
           queryMetrics.indexHitDocumentCount &&
           this._normalize(queryMetrics.indexHitDocumentCount) +
-            this._normalize(aggregatedMetrics.indexHitDocumentCount);
+          this._normalize(aggregatedMetrics.indexHitDocumentCount);
         aggregatedMetrics.outputDocumentCount =
           queryMetrics.outputDocumentCount &&
           this._normalize(queryMetrics.outputDocumentCount) + this._normalize(aggregatedMetrics.outputDocumentCount);
@@ -393,36 +393,36 @@ export default class QueryTab extends TabsBase implements ViewModels.WaitsForTem
         aggregatedMetrics.indexLookupTime =
           queryMetrics.indexLookupTime &&
           this._normalize(queryMetrics.indexLookupTime.totalMilliseconds()) +
-            this._normalize(aggregatedMetrics.indexLookupTime);
+          this._normalize(aggregatedMetrics.indexLookupTime);
         aggregatedMetrics.retrievedDocumentCount =
           queryMetrics.retrievedDocumentCount &&
           this._normalize(queryMetrics.retrievedDocumentCount) +
-            this._normalize(aggregatedMetrics.retrievedDocumentCount);
+          this._normalize(aggregatedMetrics.retrievedDocumentCount);
         aggregatedMetrics.retrievedDocumentSize =
           queryMetrics.retrievedDocumentSize &&
           this._normalize(queryMetrics.retrievedDocumentSize) +
-            this._normalize(aggregatedMetrics.retrievedDocumentSize);
+          this._normalize(aggregatedMetrics.retrievedDocumentSize);
         aggregatedMetrics.vmExecutionTime =
           queryMetrics.vmExecutionTime &&
           this._normalize(queryMetrics.vmExecutionTime.totalMilliseconds()) +
-            this._normalize(aggregatedMetrics.vmExecutionTime);
+          this._normalize(aggregatedMetrics.vmExecutionTime);
         aggregatedMetrics.totalQueryExecutionTime =
           queryMetrics.totalQueryExecutionTime &&
           this._normalize(queryMetrics.totalQueryExecutionTime.totalMilliseconds()) +
-            this._normalize(aggregatedMetrics.totalQueryExecutionTime);
+          this._normalize(aggregatedMetrics.totalQueryExecutionTime);
 
         aggregatedMetrics.runtimeExecutionTimes.queryEngineExecutionTime =
           aggregatedMetrics.runtimeExecutionTimes &&
           this._normalize(queryMetrics.runtimeExecutionTimes.queryEngineExecutionTime.totalMilliseconds()) +
-            this._normalize(aggregatedMetrics.runtimeExecutionTimes.queryEngineExecutionTime);
+          this._normalize(aggregatedMetrics.runtimeExecutionTimes.queryEngineExecutionTime);
         aggregatedMetrics.runtimeExecutionTimes.systemFunctionExecutionTime =
           aggregatedMetrics.runtimeExecutionTimes &&
           this._normalize(queryMetrics.runtimeExecutionTimes.systemFunctionExecutionTime.totalMilliseconds()) +
-            this._normalize(aggregatedMetrics.runtimeExecutionTimes.systemFunctionExecutionTime);
+          this._normalize(aggregatedMetrics.runtimeExecutionTimes.systemFunctionExecutionTime);
         aggregatedMetrics.runtimeExecutionTimes.userDefinedFunctionExecutionTime =
           aggregatedMetrics.runtimeExecutionTimes &&
           this._normalize(queryMetrics.runtimeExecutionTimes.userDefinedFunctionExecutionTime.totalMilliseconds()) +
-            this._normalize(aggregatedMetrics.runtimeExecutionTimes.userDefinedFunctionExecutionTime);
+          this._normalize(aggregatedMetrics.runtimeExecutionTimes.userDefinedFunctionExecutionTime);
       }
     });
 
@@ -540,14 +540,14 @@ export default class QueryTab extends TabsBase implements ViewModels.WaitsForTem
           queryMetric.indexLookupTime && queryMetric.indexLookupTime.totalMilliseconds(),
           queryMetric.documentLoadTime && queryMetric.documentLoadTime.totalMilliseconds(),
           queryMetric.runtimeExecutionTimes &&
-            queryMetric.runtimeExecutionTimes.queryEngineExecutionTime &&
-            queryMetric.runtimeExecutionTimes.queryEngineExecutionTime.totalMilliseconds(),
+          queryMetric.runtimeExecutionTimes.queryEngineExecutionTime &&
+          queryMetric.runtimeExecutionTimes.queryEngineExecutionTime.totalMilliseconds(),
           queryMetric.runtimeExecutionTimes &&
-            queryMetric.runtimeExecutionTimes.systemFunctionExecutionTime &&
-            queryMetric.runtimeExecutionTimes.systemFunctionExecutionTime.totalMilliseconds(),
+          queryMetric.runtimeExecutionTimes.systemFunctionExecutionTime &&
+          queryMetric.runtimeExecutionTimes.systemFunctionExecutionTime.totalMilliseconds(),
           queryMetric.runtimeExecutionTimes &&
-            queryMetric.runtimeExecutionTimes.userDefinedFunctionExecutionTime &&
-            queryMetric.runtimeExecutionTimes.userDefinedFunctionExecutionTime.totalMilliseconds(),
+          queryMetric.runtimeExecutionTimes.userDefinedFunctionExecutionTime &&
+          queryMetric.runtimeExecutionTimes.userDefinedFunctionExecutionTime.totalMilliseconds(),
           queryMetric.documentWriteTime && queryMetric.documentWriteTime.totalMilliseconds(),
         ].join(",") + "\n";
       csvData = csvData + partitionKeyRangeData;

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,12 @@
         >
           <!-- 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 +122,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 +172,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,8 +1,8 @@
+import DiscardIcon from "images/discard.svg";
+import SaveIcon from "images/save-cosmos.svg";
 import * as ko from "knockout";
 import * as monaco from "monaco-editor";
 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/ResourceTreeAdapter.tsx

@@ -1,16 +1,16 @@
+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 { Callout, DirectionalHint, ICalloutProps, ILinkProps, Link, Stack, Text } from "office-ui-fabric-react";
 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,24 +1,24 @@
 import { useBoolean } from "@uifabric/react-hooks";
+import ChevronRight from "images/chevron-right.svg";
 import { initializeIcons } from "office-ui-fabric-react";
 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 { ConnectExplorer } from "./Platform/Hosted/Components/ConnectExplorer";
 import { DatabaseAccount } from "./Contracts/DataModels";
-import { DirectoryPickerPanel } from "./Platform/Hosted/Components/DirectoryPickerPanel";
-import { AccountSwitcher } from "./Platform/Hosted/Components/AccountSwitcher";
 import "./Explorer/Menus/NavBar/MeControlComponent.less";
-import { useTokenMetadata } from "./hooks/usePortalAccessToken";
-import { MeControl } from "./Platform/Hosted/Components/MeControl";
-import "./Platform/Hosted/ConnectScreen.less";
-import "./Shared/appInsights";
-import { SignInButton } from "./Platform/Hosted/Components/SignInButton";
 import { useAADAuth } from "./hooks/useAADAuth";
-import { FeedbackCommandButton } from "./Platform/Hosted/Components/FeedbackCommandButton";
+import { useTokenMetadata } from "./hooks/usePortalAccessToken";
 import { HostedExplorerChildFrame } from "./HostedExplorerChildFrame";
+import { AccountSwitcher } from "./Platform/Hosted/Components/AccountSwitcher";
+import { ConnectExplorer } from "./Platform/Hosted/Components/ConnectExplorer";
+import { DirectoryPickerPanel } from "./Platform/Hosted/Components/DirectoryPickerPanel";
+import { FeedbackCommandButton } from "./Platform/Hosted/Components/FeedbackCommandButton";
+import { MeControl } from "./Platform/Hosted/Components/MeControl";
+import { SignInButton } from "./Platform/Hosted/Components/SignInButton";
+import "./Platform/Hosted/ConnectScreen.less";
 import { extractMasterKeyfromConnectionString } from "./Platform/Hosted/HostedUtils";
+import "./Shared/appInsights";
 
 initializeIcons();
 

src/Main.tsx

@@ -1,5 +1,11 @@
 // CSS Dependencies
 import "bootstrap/dist/css/bootstrap.css";
+// Image Dependencies
+import "images/CosmosDB_rgb_ui_lighttheme.ico";
+import "images/favicon.ico";
+import hdeConnectImage from "images/HdeConnectCosmosDB.svg";
+import arrowLeftImg from "images/imgarrowlefticon.svg";
+import refreshImg from "images/refresh-cosmos.svg";
 import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
 import React, { useState } from "react";
 import ReactDOM from "react-dom";
@@ -10,12 +16,6 @@ import "../externals/jquery-ui.theme.min.css";
 import "../externals/jquery.dataTables.min.css";
 import "../externals/jquery.typeahead.min.css";
 import "../externals/jquery.typeahead.min.js";
-// Image Dependencies
-import "../images/CosmosDB_rgb_ui_lighttheme.ico";
-import "../images/favicon.ico";
-import hdeConnectImage from "../images/HdeConnectCosmosDB.svg";
-import arrowLeftImg from "../images/imgarrowlefticon.svg";
-import refreshImg from "../images/refresh-cosmos.svg";
 import "../less/documentDB.less";
 import "../less/forms.less";
 import "../less/infobox.less";

src/NotebookViewer/notebookViewer.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0" />
     <title>Notebook 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>

src/Platform/Hosted/Components/FeedbackCommandButton.tsx

@@ -1,6 +1,6 @@
+import FeedbackIcon from "images/Feedback.svg";
 import * as React from "react";
 import { CommandButtonComponent } from "../../../Explorer/Controls/CommandButton/CommandButtonComponent";
-import FeedbackIcon from "../../../../images/Feedback.svg";
 
 export const FeedbackCommandButton: React.FunctionComponent = () => {
   return (

src/SelfServe/selfServe.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="selfServeViewport" content="height=device-height, width=device-width, initial-scale=1.0" />
     <title>Self Serve</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>

src/explorer.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0" />
     <meta name="robots" content="noindex, nofollow" />
     <title>Azure Cosmos DB</title>
-    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+    <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
   </head>
 
   <body></body>

src/hostedExplorer.html

@@ -3,7 +3,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0" />
     <title>Azure Cosmos DB</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>

src/images/Add-property.svg

@@ -1,8 +1,8 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="16px" height="16px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
-<g>
-	<path d="M16,7.5v1H8.5V16h-1V8.5H0v-1h7.5V0h1v7.5H16z"  fill="#393939"/>
-</g>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="16px" height="16px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<g>
+	<path d="M16,7.5v1H8.5V16h-1V8.5H0v-1h7.5V0h1v7.5H16z"  fill="#393939"/>
+</g>
+</svg>