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

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();
-    if(event.key=='Enter' || event.key === 'Space'){
-      onEditEntity()
-    }
     }
+  };
   const handleKeyPressdelete = (event: React.KeyboardEvent<HTMLElement>) => {
-    
+    if (event.key === "Enter" || event.key === "Space") {
-    
+      onDeleteEntity();
-    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>

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()

src/Explorer/Panes/Tables/AddTableEntityPanel.tsx

@@ -243,12 +243,10 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
     onSubmit,
   };
   const handlekeypressaddentity = (event: React.KeyboardEvent<HTMLElement>) => {
-    
+    if (event.key === "Enter" || event.key === "Space") {
-    console.log(event.key)
+      addNewEntity();
-    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>

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"

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

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;