random-mirrors
/
cosmos-explorer
mirror of https://github.com/Azure/cosmos-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix execute Query 'Results' and 'Query status' section controls gets truncated at 200% resize mode of 'Query1' blade (#1105) 

* Fix a11y querytab results section zoom section issue

* Update test smapshot

* Update test snapshot

* Resolved test case issue
This commit is contained in:
vaidankarswapnil 2021-09-27 23:33:01 +05:30 committed by GitHub
parent f7e7240010
commit 6ca8e3c6f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 560 additions and 553 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
less/documentDB.less
View File

@ -2357,6 +2357,8 @@ a:link {
height: 100%;
flex-grow: 1;
overflow: hidden;
min-height: 300px;
overflow-y: scroll;
}
.tabs {
@ -2832,7 +2834,7 @@ a:link {
#explorerNotificationConsole {
z-index: 1000;
overflow-y:auto;
overflow-y: auto;
overflow-x: clip;
}

4
src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap
View File

@ -83,11 +83,11 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
>
The starting autoscale max RU/s will be determined by the system, based on the current manual throughput settings and storage of your resource. After autoscale has been enabled, you can change the max RU/s.
<a
<StyledLinkBase
href="https://aka.ms/cosmos-autoscale-migration"
>
Learn more
</a>
</StyledLinkBase>
</Text>
</StyledMessageBar>
<StyledChoiceGroup

4
src/Explorer/Controls/Settings/__snapshots__/SettingsRenderUtils.test.tsx.snap
View File

@ -167,11 +167,11 @@ exports[`SettingsUtils functions render 1`] = `
>
The starting autoscale max RU/s will be determined by the system, based on the current manual throughput settings and storage of your resource. After autoscale has been enabled, you can change the max RU/s.
<a
<StyledLinkBase
href="https://aka.ms/cosmos-autoscale-migration"
>
Learn more
</a>
</StyledLinkBase>
</Text>
<Text
styles={

52
src/Explorer/Graph/GraphExplorerComponent/graphExplorer.less
View File

@ -15,9 +15,9 @@
.graphExplorerContainer {
margin-left: @SmallSpace;
overflow-y:auto;
overflow-y: auto;
overflow-x: clip;
height:100%;
height: 100%;
.flex-display();
.flex-direction();
@ -61,7 +61,7 @@
.loadGraphHelper {
margin: auto;
text-align: center;
height:50%;
height: 50%;
img {
width: @LoadGraphHelperWidth;
@ -73,7 +73,7 @@
margin: @DefaultSpace;
}
.loadGraphBtn{
.loadGraphBtn {
margin-top: @LargeSpace;
}
}
@ -95,17 +95,17 @@
}
/* Override bootstrap's nav pills */
.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
.nav-pills > li.active > a,
.nav-pills > li.active > a:focus,
.nav-pills > li.active > a:hover {
background-color: @AccentMediumHigh;
}
.nav-pills>li>a {
.nav-pills > li > a {
border-radius: 0px;
}
.nav>li>a {
.nav > li > a {
padding: 5px 15px;
}
@ -115,16 +115,16 @@
.typeahead__cancel-button {
top: 5px !important;
right: .4em !important;
right: 0.4em !important;
}
.queryMetricsSummary {
margin: @LargeSpace @LargeSpace 0px @DefaultSpace;
table-layout: fixed;
display: block;
overflow-y: auto;
overflow-x: hidden;
min-height: 100px;
.queryMetricsSummaryHead {
.flex-display();
@ -145,7 +145,8 @@
font-size: 12px;
width: 100%;
.flex-display();
th, td {
th,
td {
padding: @DefaultSpace;
&:nth-child(1) {
@ -169,7 +170,6 @@
}
}
.graphContainer {
overflow: hidden;
height: 100%;
@ -177,7 +177,6 @@
padding-top: (2 * @MediumSpace);
.flex-display();
.leftPane {
width: 200px;
padding: 0px 0px 0px @DefaultSpace;
@ -225,8 +224,8 @@
.graphTitle {
margin-top: @DefaultSpace;
.graphExpandCollapseBtn{
padding:2px 6px 5px 6px;
.graphExpandCollapseBtn {
padding: 2px 6px 5px 6px;
margin-right: @SmallSpace;
&:hover {
@ -237,7 +236,7 @@
.active();
}
img{
img {
.dataExplorerIcons();
}
}
@ -250,7 +249,7 @@
height: 100%;
.graphModal {
background-color: rgba(255, 255, 255, .7);
background-color: rgba(255, 255, 255, 0.7);
position: absolute;
top: 0px;
left: 0px;
@ -283,7 +282,6 @@
min-height: 0px;
margin-top: 0px;
.rightPaneHeader {
/* TODO: Hack to align the trashbox with the header for now. */
margin-top: -28px;
@ -407,16 +405,16 @@
.propertyTableHeader {
font-weight: bold;
color: @DefaultFontColor ;
color: @DefaultFontColor;
border-bottom: 1px solid @BaseMediumHigh;
}
/* Override autocomplete stuff */
.typeahead__container {
font: @mediumFontSize 'Segoe UI' !important;
font: @mediumFontSize "Segoe UI" !important;
input {
font: @mediumFontSize 'Segoe UI' !important;
font: @mediumFontSize "Segoe UI" !important;
padding: 0px @SmallSpace !important;
}
}
@ -427,12 +425,12 @@
.typeahead__cancel-button {
top: 5px !important;
right: .4em !important;
right: 0.4em !important;
}
.rightPaneAddPropertyBtn {
padding: @DefaultSpace;
margin-left: -8px;/* TODO: Hack to align the addproperty button with the section content for now. */
margin-left: -8px; /* TODO: Hack to align the addproperty button with the section content for now. */
img {
margin: 0px @SmallSpace @SmallSpace 0px;
@ -451,6 +449,8 @@
.flex-direction();
overflow: hidden;
width: 100%;
min-height: 200px;
overflow: auto;
}
.paneTitle {
@ -587,7 +587,7 @@
.loadmore {
use.loadMoreIcon {
fill:@GraphNodeDefaultColor;
fill: @GraphNodeDefaultColor;
&.active {
fill: @AccentMediumHigh;
@ -609,8 +609,6 @@
opacity: 0;
}
}
}
/* scroll for leftpane, rightpane and newvertex pane*/

1
src/Explorer/Panes/Tables/TableQuerySelectPanel/TableQuerySelectPanel.test.tsx
View File

@ -29,6 +29,7 @@ describe("Table query select Panel", () => {
it("Should checked availableCheckbox by default", () => {
const wrapper = mount(<TableQuerySelectPanel {...props} />);
expect(wrapper.find("#availableCheckbox").first().props()).toEqual({
ariaPositionInSet: 0,
id: "availableCheckbox",
label: "Available Columns",
checked: true,

6
src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/TableQuerySelectPanel.test.tsx.snap
View File

@ -37,12 +37,14 @@ exports[`Table query select Panel should render Default properly 1`] = `
className="column-select-view"
>
<StyledCheckboxBase
ariaPositionInSet={0}
checked={true}
id="availableCheckbox"
label="Available Columns"
onChange={[Function]}
>
<CheckboxBase
ariaPositionInSet={0}
checked={true}
id="availableCheckbox"
label="Available Columns"
@ -328,6 +330,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
<input
aria-checked="true"
aria-label="Available Columns"
aria-posinset={0}
checked={true}
className="input-55"
data-ktp-execute-target={true}
@ -646,6 +649,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
</CheckboxBase>
</StyledCheckboxBase>
<StyledCheckboxBase
ariaPositionInSet={1}
checked={true}
disabled={false}
key=""
@ -653,6 +657,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
onChange={[Function]}
>
<CheckboxBase
ariaPositionInSet={1}
checked={true}
disabled={false}
label=""
@ -939,6 +944,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
aria-checked="true"
aria-disabled={false}
aria-label=""
aria-posinset={1}
checked={true}
className="input-55"
data-ktp-execute-target={true}

2
src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
View File

@ -999,7 +999,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
"data-order": 2,
"data-title": "Query Stats",
}}
style={{ height: "100%" }}
style={{ height: "100%", overflowY: "scroll" }}
>
{this.state.allResultsMetadata.length > 0 && !this.state.error && (
<div className="queryMetricsSummaryContainer">