random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-05-13 20:05:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fixes for keyboard navigation of add new clause,edit,remove property,insert filter line, remove filter line

Browse Source
This commit is contained in:
Sampath 2022-12-19 18:27:52 +05:30
parent 9383609a22
commit 990d86ffc6
6 changed files with 46 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/Common/TableEntity.tsx
View File

@ -72,26 +72,17 @@ 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 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 handleKeyPressdelete = (event: React.KeyboardEvent<HTMLElement>) => {
if (event.key === "Enter" || event.key === "Space") {
onDeleteEntity();
}
}
};
const getEntityValueType = (): string => {
const { Int, Smallint, Tinyint } = CassandraType;
@ -146,12 +137,28 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
/>
{!isEntityValueDisable && (
<TooltipHost content="Edit property" id="editTooltip">
<Image {...imageProps} src={EditIcon} alt="editEntity" id="editEntity" onClick={onEditEntity} tabIndex={0} onKeyPress={handleKeyPress}/>
<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} tabIndex={0} onKeyPress={handleKeyPressdelete} />
<Image
{...imageProps}
src={DeleteIcon}
alt="delete entity"
id="deleteEntity"
onClick={onDeleteEntity}
tabIndex={0}
onKeyPress={handleKeyPressdelete}
/>
</TooltipHost>
)}
</Stack>

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

@ -574,7 +574,6 @@ 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()

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

@ -242,13 +242,11 @@ 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()
const handlekeypressaddentity = (event: React.KeyboardEvent<HTMLElement>) => {
if (event.key === "Enter" || event.key === "Space") {
addNewEntity();
}
}
};
return (
<RightPaneForm {...props}>
@ -291,7 +289,13 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
);
})}
{userContext.apiType !== "Cassandra" && (
<Stack horizontal onClick={addNewEntity} className="addButtonEntiy" tabIndex={0} onKeyPress={handlekeypressaddentity}>
<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>

4
src/Explorer/Panes/Tables/__snapshots__/AddTableEntityPanel.test.tsx.snap
View File

@ -29,10 +29,14 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
className="addButtonEntiy"
horizontal={true}
onClick={[Function]}
onKeyPress={[Function]}
tabIndex={0}
>
<div
className="ms-Stack addButtonEntiy css-53"
onClick={[Function]}
onKeyPress={[Function]}
tabIndex={0}
>
<StyledImageBase
alt="Add Entity"

4
src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap
View File

@ -242,7 +242,9 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
Unique keys
</Text>
<StyledTooltipHostBase
content="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 per partition key."
content="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
per partition key."
directionalHint={4}
>
<Icon

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

@ -504,7 +504,6 @@ 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 => {
@ -517,7 +516,7 @@ export default class QueryBuilderViewModel {
};
public onAddNewClauseKeyDown = (event: KeyboardEvent): boolean => {
if (event.key === 'Enter' || event.key === 'Space') {
if (event.key === "Enter" || event.key === "Space") {
this.addClauseIndex(this.clauseArray().length - 1);
event.stopPropagation();
return false;