From 990d86ffc6870254e6534543b887f18da293a247 Mon Sep 17 00:00:00 2001
From: Sampath <v-smokireddy@microsoft.com>
Date: Mon, 19 Dec 2022 18:27:52 +0530
Subject: [PATCH] Fixes for keyboard navigation of add new clause,edit,remove
 property,insert filter line, remove filter line

---
 src/Common/TableEntity.tsx                    | 47 +++++++++++--------
 .../ThroughputInputAutoPilotV3Component.tsx   |  1 -
 .../Panes/Tables/AddTableEntityPanel.tsx      | 18 ++++---
 .../AddTableEntityPanel.test.tsx.snap         |  4 ++
 .../AddCollectionPanel.test.tsx.snap          |  4 +-
 .../QueryBuilder/QueryBuilderViewModel.ts     |  3 +-
 6 files changed, 46 insertions(+), 31 deletions(-)

diff --git a/src/Common/TableEntity.tsx b/src/Common/TableEntity.tsx
index dbf1f1b0a..5ad166ca3 100644
--- a/src/Common/TableEntity.tsx
+++ b/src/Common/TableEntity.tsx
@@ -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>
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
index 017a05a00..cf354990c 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
@@ -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()
diff --git a/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx b/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx
index 6841235cc..ed18ac502 100644
--- a/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx
+++ b/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx
@@ -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>
diff --git a/src/Explorer/Panes/Tables/__snapshots__/AddTableEntityPanel.test.tsx.snap b/src/Explorer/Panes/Tables/__snapshots__/AddTableEntityPanel.test.tsx.snap
index 2714a4cd6..5360c754a 100644
--- a/src/Explorer/Panes/Tables/__snapshots__/AddTableEntityPanel.test.tsx.snap
+++ b/src/Explorer/Panes/Tables/__snapshots__/AddTableEntityPanel.test.tsx.snap
@@ -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"
diff --git a/src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap b/src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap
index 903a6dd4e..088080d88 100644
--- a/src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap
+++ b/src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap
@@ -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
diff --git a/src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts b/src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts
index fd767a5a9..e2ed94a51 100644
--- a/src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts
+++ b/src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts
@@ -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;