Merge pull request #4469 from alokdangre/fix-keyboard-shortcuts-errors

frontend: Add configurable keyboard shortcuts

Author: k8s-ci-robot

e2e-tests/tests/headlamp.spec.ts

@@ -57,8 +57,8 @@ test('main page should have global search along with react-hotkey hint text', as
   const searchHintContainer = globalSearch.locator('xpath=following-sibling::div');
   const pressTextExists = await searchHintContainer.getByText(/^Press/).isVisible();
   const slashHotKeyExists = await searchHintContainer
-    .locator('div')
-    .filter({ hasText: /^\/$/ })
+    .locator('kbd')
+    .filter({ hasText: '/' })
     .isVisible();
   const toSearchTextExists = await searchHintContainer.getByText(/to search$/).isVisible();
 

frontend/src/components/App/Home/index.stories.tsx

@@ -19,6 +19,7 @@ import { Meta, StoryFn } from '@storybook/react';
 import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
 import { initialState } from '../../../redux/configSlice';
+import shortcutsReducer from '../../../redux/shortcutsSlice';
 import Home from '.';
 
 const ourState = {
@@ -51,6 +52,7 @@ const ourState = {
   drawerMode: {
     isDetailDrawerEnabled: false,
   },
+  shortcuts: { ...shortcutsReducer(undefined, { type: '' }) },
 };
 
 // @todo: Add a way for the results from useClustersVersion to be mocked, so not

frontend/src/components/App/Layout.tsx

@@ -46,6 +46,7 @@ import AlertNotification from '../common/AlertNotification';
 import DetailsDrawer from '../common/Resource/DetailsDrawer';
 import Sidebar, { NavigationTabs } from '../Sidebar';
 import RouteSwitcher from './RouteSwitcher';
+import ShortcutsSettings from './Settings/ShortcutsSettings';
 import TopBar from './TopBar';
 import VersionDialog from './VersionDialog';
 
@@ -289,6 +290,7 @@ export default function Layout({}: LayoutProps) {
         {t('Skip to main content')}
       </Link>
       <VersionDialog />
+      <ShortcutsSettings />
       <CssBaseline enableColorScheme />
       <ActionsNotifier />
       <Box sx={{ display: 'flex', height: '100dvh' }}>

frontend/src/components/App/Settings/Settings.tsx

@@ -35,6 +35,7 @@ import { setTheme, useAppThemes } from '../themeSlice';
 import DrawerModeSettings from './DrawerModeSettings';
 import { useSettings } from './hook';
 import NumRowsInput from './NumRowsInput';
+import { ShortcutsList } from './ShortcutsSettings';
 import { ThemePreview } from './ThemePreview';
 
 export default function Settings() {
@@ -243,6 +244,21 @@ export default function Settings() {
           </Box>
         </Box>
       </Box>
+      <Box sx={{ mt: 4 }}>
+        <SectionBox
+          title={t('translation|Keyboard Shortcuts')}
+          headerProps={{
+            headerStyle: 'subsection',
+          }}
+        >
+          <Typography variant="body2" sx={{ mb: 2, color: 'text.secondary' }}>
+            {t(
+              'translation|Configure keyboard shortcuts for quick access to various parts of the application.'
+            )}
+          </Typography>
+          <ShortcutsList />
+        </SectionBox>
+      </Box>
     </SectionBox>
   );
 }

frontend/src/components/App/Settings/ShortcutsSettings.stories.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2025 The Kubernetes Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Meta, StoryFn } from '@storybook/react';
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import store from '../../../redux/stores/store';
+import ShortcutsSettings from './ShortcutsSettings';
+
+export default {
+  title: 'Settings/ShortcutsSettings',
+  component: ShortcutsSettings,
+  decorators: [
+    Story => (
+      <Provider store={store}>
+        <MemoryRouter>
+          <Story />
+        </MemoryRouter>
+      </Provider>
+    ),
+  ],
+} as Meta<typeof ShortcutsSettings>;
+
+const Template: StoryFn<typeof ShortcutsSettings> = () => {
+  store.dispatch({ type: 'shortcuts/setShortcutsDialogOpen', payload: true });
+  return <ShortcutsSettings />;
+};
+
+export const Default = Template.bind({});
+Default.args = {};