Fix the following SonarQube issues:

1. Do not use the Array index in keys
2. Visible, non-interactive elements with click handlers must have at least one keyboard listener.
3. Add replacement fields or use a normal string instead of an f-string.
4. Add a parameter to the parent lambda function

Author: yogeshmahajan-1903

web/pgadmin/static/js/SchemaView/FieldControl.jsx

@@ -18,7 +18,7 @@ export const FieldControl = ({schemaId, item}) => {
     <Control {...props}>
       {
         children?.map(
-          (child, idx) => <FieldControl key={idx} item={child}/>
+          (child, idx) => <FieldControl key={`${child.controlProps.id}-${idx}`} item={child}/>
         )
       }
     </Control>, [schemaId, Control, props, children]

web/pgadmin/static/js/SchemaView/FieldSetView.jsx

@@ -56,10 +56,10 @@ export default function FieldSetView({
     <FieldSet title={label} className={controlClassName}>
       {fieldGroups.map(
         (fieldGroup, gidx) => (
-          <React.Fragment key={gidx}>
+          <React.Fragment key={`${fieldGroup.id}-${gidx}`}>
             {fieldGroup.controls.map(
               (item, idx) => <FieldControl
-                item={item} key={idx} schemaId={schema._id} />
+                item={item} key={`${item.controlProps.id}-${idx}`} schemaId={schema._id} />
             )}
           </React.Fragment>
         )

web/pgadmin/static/js/SchemaView/FormView.jsx

@@ -230,7 +230,7 @@ export default function FormView({
                   {
                     group.controls.map(
                       (item, idx) => <FieldControl
-                        item={item} key={idx} schemaId={schema._id} />
+                        item={item} key={`${item.controlProps.id}-${idx}`} schemaId={schema._id} />
                     )
                   }
                 </TabPanel>
@@ -282,10 +282,10 @@ export default function FormView({
             className={contentClassName.join(' ')}>
             {
               finalGroups.map((group, idx) =>
-                <React.Fragment key={idx}>{
+                <React.Fragment key={`${group.id}-${idx}`}>{
                   group.controls.map(
                     (item, idx) => <FieldControl
-                      item={item} key={idx} schemaId={schema._id}
+                      item={item} key={`${item.controlProps.id}-${idx}`} schemaId={schema._id}
                     />
                   )
                 }</React.Fragment>

web/pgadmin/static/js/SchemaView/SchemaPropertiesView.jsx

@@ -91,7 +91,7 @@ export default function SchemaPropertiesView({
                       {
                         group.controls.map(
                           (item, idx) => <FieldControl
-                            item={item} key={idx} schemaId={schema._id}
+                            item={item} key={`${item.controlProps.id}-${idx}`} schemaId={schema._id}
                           />
                         )
                       }

web/pgadmin/static/js/components/PgReactTableStyled.jsx

@@ -20,7 +20,7 @@ import { PgIconButton } from './Buttons';
 import CustomPropTypes from '../custom_prop_types';
 import { InputSwitch } from './FormComponents';
 import { Checkbox } from '@mui/material';
-
+import { getEnterKeyHandler } from '../utils';
 
 const StyledDiv = styled('div')(({theme})=>({
   '&.pgrt': {
@@ -265,6 +265,7 @@ export function PgReactTableHeader({table}) {
               <div title={flexRender(header.column.columnDef.header, header.getContext())}
                 style={{cursor: header.column.getCanSort() ? 'pointer' : 'initial'}}
                 onClick={header.column.getCanSort() ? header.column.getToggleSortingHandler() : undefined}
+                onKeyDown={header.column.getCanSort() ? getEnterKeyHandler(header.column.getToggleSortingHandler): undefined}
               >
                 {flexRender(header.column.columnDef.header, header.getContext())}
                 {header.column.getCanSort() && header.column.getIsSorted() &&

web/pgadmin/static/js/components/PgTree/FileTreeItem/DoubleClickHandler.jsx

@@ -11,11 +11,12 @@ import { useSingleAndDoubleClick } from '../../../custom_hooks';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import CustomPropTypes from '../../../../js/custom_prop_types';
-
+import { getEnterKeyHandler } from '../../../../js/utils';
+ 
 export default function DoubleClickHandler({onSingleClick, onDoubleClick, children}){
   const onClick = useSingleAndDoubleClick(onSingleClick, onDoubleClick) ;
   return(
-    <div onClick={(e)=>onClick(e)}>
+    <div onClick={(e)=>onClick(e)} onKeyDown = { getEnterKeyHandler(onClick)}>
       {children}
     </div>
   );

web/pgadmin/static/js/utils.js

@@ -48,6 +48,16 @@ export function isShortcutValue(obj) {
   return [obj.alt, obj.control, obj?.key, obj?.key?.char].every((k)=>!_.isUndefined(k));
 }
 
+
+export function getEnterKeyHandler(clickHandler) {
+  return (e)=>{
+    if(e.code === 'Enter'){
+      e.preventDefault();
+      clickHandler(e);
+    }
+  };
+}
+
 // Convert shortcut obj to codemirror key format
 export function toCodeMirrorKey(obj) {
   let shortcut = '';

web/pgadmin/tools/backup/__init__.py

@@ -368,17 +368,17 @@ def set_value(key, param, default_value=None, assertion=True):
     if 'objects' in data:
         selected_objects = data.get('objects', {})
         for _key in selected_objects:
-            param = 'schema' if _key == 'schema' else 'table'
+            selected_key = 'schema' if _key == 'schema' else 'table'
             args.extend(
                 functools.reduce(operator.iconcat, map(
-                    lambda s: [f'--{param}',
-                               r'{0}.{1}'.format(
-                                   driver.qtIdent(conn, s['schema']).replace(
-                                       '"', '\"'),
-                                   driver.qtIdent(conn, s['name']).replace(
-                                       '"', '\"')) if type(
-                                   s) is dict else driver.qtIdent(
-                                   conn, s).replace('"', '\"')],
+                    lambda s, param=selected_key:[
+                        f'--{param}',
+                        r'{0}.{1}'.format(
+                            driver.qtIdent(conn, s['schema']).
+                            replace('"', '\"'),
+                            driver.qtIdent(conn, s['name']).replace('"', '\"'))
+                        if type(s) is dict
+                        else driver.qtIdent(conn, s).replace('"', '\"')],
                     selected_objects[_key] or []), [])
             )
 

web/pgadmin/tools/sqleditor/static/js/components/sections/StatusBar.jsx

@@ -17,7 +17,7 @@ import { QueryToolEventsContext } from '../QueryToolComponent';
 import gettext from 'sources/gettext';
 import { PgMenu, PgMenuItem, usePgMenuGroup } from '../../../../../../static/js/components/Menu';
 import PropTypes from 'prop-types';
-
+import { getEnterKeyHandler } from '../../../../../../static/js/utils';
 
 const StyledBox = styled(Box)(({theme}) => ({
   display: 'flex',
@@ -131,6 +131,7 @@ export function StatusBar({eol, handleEndOfLineChange}) {
           <Tooltip title="Select EOL Sequence" enterDelay={2500}>
             <span
               onClick={toggleMenu}
+              onKeyDown={getEnterKeyHandler(toggleMenu)}
               ref={eolMenuRef}
               name="menu-eoloptions"
               style={{

web/regression/feature_tests/query_tool_tests.py

@@ -151,8 +151,7 @@ def _pagination_result(self):
             {'page_info': '2001 to 2500', 'cell_rownum': '2001'}
         ]):
             page_info = self.page.find_by_css_selector(
-                QueryToolLocators.pagination_inputs +
-                f' span:nth-of-type(1)')
+                QueryToolLocators.pagination_inputs + ' span:nth-of-type(1)')
 
             self.assertEqual(page_info.text,
                              f"Showing rows: {page['page_info']}")