fix: sonarlint issues

Author: Elessar1802

src/components/app/details/main.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { lazy, PropsWithChildren, Suspense, useEffect, useRef, useState } from 'react'
+import { lazy, PropsWithChildren, Suspense, useEffect, useState } from 'react'
 import { Switch, Route, Redirect, useParams, useRouteMatch } from 'react-router-dom'
 import {
     showError,
@@ -35,7 +35,6 @@ import { MultiValue } from 'react-select'
 import {
     ErrorBoundary,
     getAndSetAppGroupFilters,
-    importComponentFromFELibrary,
     setAppGroupFilterInLocalStorage,
     sortOptionsByLabel,
 } from '../../common'

src/components/common/SidePanel/SidePanelContent.tsx

@@ -1,3 +1,5 @@
+import { KeyboardEvent } from 'react'
+
 import {
     Button,
     ButtonStyleType,
@@ -87,20 +89,27 @@ export const SidePanelContent = ({ onClose, setSidePanelConfig, sidePanelConfig
                     {TABS_CONFIG.map(({ label, iconName, id }) => {
                         const isSelected = tab === id
 
-                        const handleTabClick = () => {
+                        const onTabClick = () => {
                             setSidePanelConfig((prev) => ({ ...prev, state: id }))
                         }
 
+                        const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                                e.currentTarget.click()
+                            }
+                        }
+
                         return (
                             <div
                                 key={id}
                                 role="button"
                                 data-testid={`side-panel-tab-${id}`}
                                 className={`flex dc__gap-6 dc__border-right px-16 dc__transition--background ${isSelected ? 'bg__primary' : ''}`}
-                                onClick={handleTabClick}
+                                onClick={onTabClick}
                                 style={{ ...(isSelected ? { boxShadow: '0 1px 0 0 var(--bg-primary)' } : {}) }}
                                 tabIndex={0}
                                 data-config={JSON.stringify(getConfigForTab(id))}
+                                onKeyDown={onKeyDown}
                             >
                                 <Icon name={iconName} color={isSelected ? 'N900' : 'N700'} />
 
@@ -113,7 +122,7 @@ export const SidePanelContent = ({ onClose, setSidePanelConfig, sidePanelConfig
                 </div>
 
                 <div className="flex dc__gap-8 pr-16 pt-12 pb-11">
-                    <div id="devtron-side-panel-actions" />
+                    <div id="devtron-side-panel-actions" className="flexbox" />
 
                     <Button
                         dataTestId="close-side-panel-button"

src/components/common/navigation/NavigationRoutes.tsx

@@ -55,7 +55,7 @@ import * as Sentry from '@sentry/browser'
 import ReactGA from 'react-ga4'
 import TagManager from 'react-gtm-module'
 import Navigation from './Navigation'
-import { ErrorBoundary, AppContext, AppContextType } from '..'
+import { ErrorBoundary, AppContext } from '..'
 import { URLS, ViewType, SERVER_MODE, ModuleNameMap } from '../../../config'
 import { Security } from '../../security/Security'
 import {