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

keyboard navigation for defects 1722611,1722618

This commit is contained in:
MokireddySampath 2022-12-19 12:41:08 +05:30
parent 2f32a676d0
commit 9383609a22
6 changed files with 55 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
less/TableStyles/queryBuilder.less
View File

@ -485,7 +485,7 @@ input::-webkit-inner-spin-button {
}
.entity-Add-Cancel {
padding: @DefaultSpace @SmallSpace @SmallSpace;
// padding: @DefaultSpace @SmallSpace @SmallSpace;
cursor: pointer;
}

26
src/Common/TableEntity.tsx
View File

@ -7,7 +7,7 @@ import {
IStackTokens,
Stack,
TextField,
TooltipHost,
TooltipHost
} from "@fluentui/react";
import React, { FunctionComponent } from "react";
import DeleteIcon from "../../images/delete.svg";
@ -72,6 +72,26 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
};
const sectionStackTokens: IStackTokens = { childrenGap: 12 };
// const enterkeypress=(event:KeyboardEvent)=>{
// if(event.key==='enter'){
// onEditEntity();
// }
// }
const handleKeyPress = (event: React.KeyboardEvent<HTMLElement>)=>{
if(event.key=='Enter' || event.key === 'Space'){
onEditEntity()
}
}
const handleKeyPressdelete = (event: React.KeyboardEvent<HTMLElement>)=>{
if(event.key=='Enter' || event.key === 'Space'){
onDeleteEntity()
}
}
const getEntityValueType = (): string => {
const { Int, Smallint, Tinyint } = CassandraType;
@ -126,12 +146,12 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
/>
{!isEntityValueDisable && (
<TooltipHost content="Edit property" id="editTooltip">
<Image {...imageProps} src={EditIcon} alt="editEntity" id="editEntity" onClick={onEditEntity} />
<Image {...imageProps} src={EditIcon} alt="editEntity" id="editEntity" onClick={onEditEntity} tabIndex={0} onKeyPress={handleKeyPress}/>
</TooltipHost>
)}
{isDeleteOptionVisible && userContext.apiType !== "Cassandra" && (
<TooltipHost content="Delete property" id="deleteTooltip">
<Image {...imageProps} src={DeleteIcon} alt="delete entity" id="deleteEntity" onClick={onDeleteEntity} />
<Image {...imageProps} src={DeleteIcon} alt="delete entity" id="deleteEntity" onClick={onDeleteEntity} tabIndex={0} onKeyPress={handleKeyPressdelete} />
</TooltipHost>
)}
</Stack>

5
src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
View File

@ -9,7 +9,7 @@ import {
MessageBar,
Stack,
Text,
TextField,
TextField
} from "@fluentui/react";
import React from "react";
import * as DataModels from "../../../../../Contracts/DataModels";
@ -38,7 +38,7 @@ import {
PriceBreakdown,
saveThroughputWarningMessage,
titleAndInputStackProps,
transparentDetailsHeaderStyle,
transparentDetailsHeaderStyle
} from "../../SettingsRenderUtils";
import { getSanitizedInputValue, IsComponentDirtyResult, isDirty } from "../../SettingsUtils";
import { ToolTipLabelComponent } from "../ToolTipLabelComponent";
@ -574,6 +574,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
styles={getTextFieldStyles(this.props.throughput, this.props.throughputBaseline)}
disabled={this.overrideWithAutoPilotSettings()}
step={this.step}
tabIndex={0}
value={
this.overrideWithAutoPilotSettings()
? this.props.maxAutoPilotThroughputBaseline?.toString()

11
src/Explorer/Panes/Tables/AddTableEntityPanel.tsx
View File

@ -31,7 +31,7 @@ import {
getDefaultEntities,
getEntityValuePlaceholder,
imageProps,
options,
options
} from "./Validators/EntityTableHelper";
interface AddTableEntityPanelProps {
@ -242,6 +242,13 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
submitButtonText: getButtonLabel(userContext.apiType),
onSubmit,
};
const handlekeypressaddentity = (event: React.KeyboardEvent<HTMLElement>)=>{
console.log(event.key)
if(event.key=='Enter' || event.key=="Space"){
addNewEntity()
}
}
return (
<RightPaneForm {...props}>
@ -284,7 +291,7 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
);
})}
{userContext.apiType !== "Cassandra" && (
<Stack horizontal onClick={addNewEntity} className="addButtonEntiy">
<Stack horizontal onClick={addNewEntity} className="addButtonEntiy" tabIndex={0} onKeyPress={handlekeypressaddentity}>
<Image {...imageProps} src={AddPropertyIcon} alt="Add Entity" />
<Text className="addNewParamStyle">{getAddButtonLabel(userContext.apiType)}</Text>
</Stack>

3
src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts
View File

@ -504,6 +504,7 @@ export default class QueryBuilderViewModel {
// adds a new clause to the end of the array
public addNewClause = (): void => {
this.addClauseIndex(this.clauseArray().length);
console.log('addnewcause')
};
public onAddClauseKeyDown = (index: number, event: KeyboardEvent): boolean => {
@ -516,7 +517,7 @@ export default class QueryBuilderViewModel {
};
public onAddNewClauseKeyDown = (event: KeyboardEvent): boolean => {
if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
if (event.key === 'Enter' || event.key === 'Space') {
this.addClauseIndex(this.clauseArray().length - 1);
event.stopPropagation();
return false;

24
src/Explorer/Tabs/QueryTablesTab.html
View File

@ -70,11 +70,13 @@
<tbody data-bind="template: { name: 'queryClause-template', foreach: clauseArray, as: 'clause' }"></tbody>
</table>
</div>
<button data-bind="click: addNewClause, event: { keydown: onAddNewClauseKeyDown }" style="border:none;background:none">
<div
class="addClause"
role="button"
data-bind="click: addNewClause, event: { keydown: onAddNewClauseKeyDown }, attr: { title: addNewClauseLine }"
tabindex="0"
data-bind=" "
>
<div class="addClause-heading">
<span class="clause-table addClause-title">
@ -82,12 +84,14 @@
class="addclauseProperty-Img"
style="margin-bottom: 5px"
src="/Add-property.svg"
alt="Add new clause"
/>
<span style="margin-left: 5px" data-bind="text: addNewClauseLine"></span>
</span>
</div>
</div>
</button>
</div>
</div>
<!-- Tables Query Tab Query Helper - End-->
@ -168,22 +172,26 @@
<script type="text/html" id="queryClause-template">
<tr class="clause-table-row">
<td class="clause-table-cell action-column">
<button data-bind="click: $parent.addClauseIndex.bind($data, $index()), event: { keydown: $parent.onAddClauseKeyDown.bind($data, $index()) }, attr:{title: $parent.insertNewFilterLine}">
<span
class="entity-Add-Cancel"
role="button"
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" />
</span>
</button>
<button data-bind="hasFocus: isDeleteButtonFocused, click: $parent.deleteClause.bind($data, $index()), event: { keydown: $parent.onDeleteClauseKeyDown.bind($data, $index()) }, attr:{title: $parent.removeThisFilterLine}">
<span
class="entity-Add-Cancel"
role="button"
tabindex="0"
data-bind="hasFocus: isDeleteButtonFocused, click: $parent.deleteClause.bind($data, $index()), event: { keydown: $parent.onDeleteClauseKeyDown.bind($data, $index()) }, attr:{title: $parent.removeThisFilterLine}"
>
<img class="querybuilder-cancelImg" src="/Entity_cancel.svg" alt="Delete clause" />
</span>
</button>
</td>
<td class="clause-table-cell group-control-column">
<input type="checkbox" aria-label="And/Or" data-bind="checked: checkedForGrouping" />