feat: search by shortcut

- add four global hotkeys for accessing the four different searches
- introduce ctrl/cmd+f shortcut to search for resources, attributions, signals depending on the focused context
- improve general keyboard accessibility
- use React context for search-ref because Redux can only handle serializable data
- use context for Virtuoso comp. props as they cannot be inlined: petyosi/react-virtuoso#566

closes #2587

Signed-off-by: Maxim Stykow <maxim.stykow@tngtech.com>

Author: mstykow

public/assets/icons/magnifying-glass-black.png

@@ -40,7 +40,7 @@ export async function createMenu(mainWindow: BrowserWindow): Promise<Menu> {
           ),
           label: 'Open File',
           accelerator: 'CmdOrCtrl+O',
-          click(): void {
+          click: () => {
             void getOpenFileListener(mainWindow)();
           },
         },
@@ -51,7 +51,7 @@ export async function createMenu(mainWindow: BrowserWindow): Promise<Menu> {
           ),
           label: 'Save',
           accelerator: 'CmdOrCtrl+S',
-          click(): void {
+          click: () => {
             webContents.send(AllowedFrontendChannels.SaveFileRequest, {
               saveFile: true,
             });
@@ -70,7 +70,7 @@ export async function createMenu(mainWindow: BrowserWindow): Promise<Menu> {
                 'icons/follow-up-white.png',
                 'icons/follow-up-black.png',
               ),
-              click(): void {
+              click: () => {
                 setLoadingState(mainWindow.webContents, true);
                 logger.info('Preparing data for follow-up export');
                 webContents.send(
@@ -85,7 +85,7 @@ export async function createMenu(mainWindow: BrowserWindow): Promise<Menu> {
                 'icons/com-list-black.png',
               ),
               label: 'Compact component list',
-              click(): void {
+              click: () => {
                 setLoadingState(mainWindow.webContents, true);
                 logger.info('Preparing data for compact component list export');
                 webContents.send(
@@ -100,7 +100,7 @@ export async function createMenu(mainWindow: BrowserWindow): Promise<Menu> {
                 'icons/det-list-black.png',
               ),
               label: 'Detailed component list',
-              click(): void {
+              click: () => {
                 setLoadingState(mainWindow.webContents, true);
                 logger.info(
                   'Preparing data for detailed component list export',
@@ -117,7 +117,7 @@ export async function createMenu(mainWindow: BrowserWindow): Promise<Menu> {
                 'icons/yaml-black.png',
               ),
               label: 'SPDX (yaml)',
-              click(): void {
+              click: () => {
                 setLoadingState(mainWindow.webContents, true);
                 logger.info('Preparing data for SPDX (yaml) export');
                 webContents.send(
@@ -132,7 +132,7 @@ export async function createMenu(mainWindow: BrowserWindow): Promise<Menu> {
                 'icons/json-black.png',
               ),
               label: 'SPDX (json)',
-              click(): void {
+              click: () => {
                 setLoadingState(mainWindow.webContents, true);
                 logger.info('Preparing data for SPDX (json) export');
                 webContents.send(
@@ -149,7 +149,7 @@ export async function createMenu(mainWindow: BrowserWindow): Promise<Menu> {
             'icons/about-black.png',
           ),
           label: 'Project Metadata',
-          click(): void {
+          click: () => {
             if (isFileLoaded(getGlobalBackendState())) {
               webContents.send(
                 AllowedFrontendChannels.ShowProjectMetadataPopup,
@@ -166,7 +166,7 @@ export async function createMenu(mainWindow: BrowserWindow): Promise<Menu> {
             'icons/statictics-black.png',
           ),
           label: 'Project Statistics',
-          click(): void {
+          click: () => {
             if (isFileLoaded(getGlobalBackendState())) {
               webContents.send(
                 AllowedFrontendChannels.ShowProjectStatisticsPopup,
@@ -183,7 +183,7 @@ export async function createMenu(mainWindow: BrowserWindow): Promise<Menu> {
             'icons/restore-black.png',
           ),
           label: 'Set Path to Sources',
-          click(): void {
+          click: () => {
             getSelectBaseURLListener(mainWindow)();
           },
         },
@@ -194,7 +194,7 @@ export async function createMenu(mainWindow: BrowserWindow): Promise<Menu> {
           ),
           label: 'Quit',
           accelerator: 'CmdOrCtrl+Q',
-          click(): void {
+          click: () => {
             app.quit();
           },
         },
@@ -258,6 +258,59 @@ export async function createMenu(mainWindow: BrowserWindow): Promise<Menu> {
           accelerator: 'CmdOrCtrl+A',
           role: 'selectAll',
         },
+        { type: 'separator' },
+        {
+          icon: getIconBasedOnTheme(
+            'icons/magnifying-glass-white.png',
+            'icons/magnifying-glass-black.png',
+          ),
+          label: 'Search Attributions',
+          accelerator: 'CmdOrCtrl+Shift+A',
+          click: () => {
+            if (isFileLoaded(getGlobalBackendState())) {
+              webContents.send(AllowedFrontendChannels.SearchAttributions);
+            }
+          },
+        },
+        {
+          icon: getIconBasedOnTheme(
+            'icons/magnifying-glass-white.png',
+            'icons/magnifying-glass-black.png',
+          ),
+          label: 'Search Signals',
+          accelerator: 'CmdOrCtrl+Shift+S',
+          click: () => {
+            if (isFileLoaded(getGlobalBackendState())) {
+              webContents.send(AllowedFrontendChannels.SearchSignals);
+            }
+          },
+        },
+        {
+          icon: getIconBasedOnTheme(
+            'icons/search-white.png',
+            'icons/search-black.png',
+          ),
+          label: 'Search All Resources',
+          accelerator: 'CmdOrCtrl+Shift+R',
+          click: () => {
+            if (isFileLoaded(getGlobalBackendState())) {
+              webContents.send(AllowedFrontendChannels.SearchResources);
+            }
+          },
+        },
+        {
+          icon: getIconBasedOnTheme(
+            'icons/search-white.png',
+            'icons/search-black.png',
+          ),
+          label: 'Search Linked Resources',
+          accelerator: 'CmdOrCtrl+Shift+L',
+          click: () => {
+            if (isFileLoaded(getGlobalBackendState())) {
+              webContents.send(AllowedFrontendChannels.SearchLinkedResources);
+            }
+          },
+        },
       ],
     },
     {
@@ -338,31 +391,24 @@ export async function createMenu(mainWindow: BrowserWindow): Promise<Menu> {
             'icons/github-black.png',
           ),
           label: 'Open on GitHub',
-          click: async (): Promise<void> => {
-            await shell.openExternal(
-              'https://github.com/opossum-tool/opossumUI',
-            );
-          },
+          click: () =>
+            shell.openExternal('https://github.com/opossum-tool/opossumUI'),
         },
         {
           icon: getIconBasedOnTheme(
             'icons/notice-white.png',
             'icons/notice-black.png',
           ),
           label: 'OpossumUI Notices',
-          click: async (): Promise<void> => {
-            await shell.openPath(getPathOfNoticeDocument());
-          },
+          click: () => shell.openPath(getPathOfNoticeDocument()),
         },
         {
           icon: getIconBasedOnTheme(
             'icons/chromium-white.png',
             'icons/chromium-black.png',
           ),
           label: 'Chromium Notices',
-          click: async (): Promise<void> => {
-            await shell.openPath(getPathOfChromiumNoticeDocument());
-          },
+          click: () => shell.openPath(getPathOfChromiumNoticeDocument()),
         },
       ],
     },
@@ -375,29 +421,26 @@ export async function createMenu(mainWindow: BrowserWindow): Promise<Menu> {
             'icons/user-guide-black.png',
           ),
           label: "User's Guide",
-          click: async (): Promise<void> => {
-            await shell.openExternal(
+          click: () =>
+            shell.openExternal(
               'https://github.com/opossum-tool/OpossumUI/blob/main/USER_GUIDE.md',
-            );
-          },
+            ),
         },
         {
           icon: getIconBasedOnTheme(
             'icons/log-white.png',
             'icons/log-black.png',
           ),
           label: 'Open log files folder',
-          click: async (): Promise<void> => {
-            await shell.openPath(app.getPath('logs'));
-          },
+          click: () => shell.openPath(app.getPath('logs')),
         },
         {
           icon: getIconBasedOnTheme(
             'icons/update-white.png',
             'icons/update-black.png',
           ),
           label: 'Check for updates',
-          click(): void {
+          click: () => {
             webContents.send(AllowedFrontendChannels.ShowUpdateAppPopup, {
               showUpdateAppPopup: true,
             });

public/assets/icons/magnifying-glass-white.png

@@ -4,6 +4,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import { useCallback } from 'react';
 
+import { AllowedFrontendChannels } from '../../../shared/ipc-channels';
 import { text } from '../../../shared/text';
 import {
   useFilteredAttributions,
@@ -49,17 +50,23 @@ export function AttributionPanels() {
         setHeight={setHeight}
         upperPanel={{
           component: <AttributionsPanel />,
-          search: attributionSearch,
-          setSearch: (search) =>
-            setFilteredAttributions((prev) => ({ ...prev, search })),
+          search: {
+            value: attributionSearch,
+            setValue: (search) =>
+              setFilteredAttributions((prev) => ({ ...prev, search })),
+            channel: AllowedFrontendChannels.SearchAttributions,
+          },
           title: text.packageLists.attributionsPanelTitle,
           headerTestId: 'attributions-panel-header',
         }}
         lowerPanel={{
           component: <SignalsPanel />,
-          search: signalSearch,
-          setSearch: (search) =>
-            setFilteredSignals((prev) => ({ ...prev, search })),
+          search: {
+            value: signalSearch,
+            setValue: (search) =>
+              setFilteredSignals((prev) => ({ ...prev, search })),
+            channel: AllowedFrontendChannels.SearchSignals,
+          },
           title: text.packageLists.signalsPanelTitle,
           headerTestId: 'signals-panel-header',
         }}

src/ElectronBackend/main/menu.ts

@@ -12,6 +12,7 @@ import { useAttributionIdsForReplacement } from '../../../../state/variables/use
 import { isPackageInfoIncomplete } from '../../../../util/is-important-attribution-information-missing';
 import { List, ListItemContentProps } from '../../../List/List';
 import { PackageCard } from '../../../PackageCard/PackageCard';
+import { SearchList } from '../../../SearchList/SearchList';
 import { PackagesPanelChildrenProps } from '../../PackagesPanel/PackagesPanel';
 
 export const AttributionsList: React.FC<PackagesPanelChildrenProps> = ({
@@ -31,6 +32,7 @@ export const AttributionsList: React.FC<PackagesPanelChildrenProps> = ({
     <List
       renderItemContent={renderAttributionCard}
       data={activeAttributionIds}
+      components={{ List: SearchList }}
       selectedId={selectedAttributionId}
       loading={loading}
       sx={{ transition: TRANSITION, height: contentHeight }}

src/Frontend/Components/AttributionPanels/AttributionPanels.tsx

@@ -14,7 +14,7 @@ export const TABS_CONTAINER_HEIGHT = 30;
 
 export const Panel = styled(MuiBox)({
   flex: 1,
-  overflowY: 'auto',
+  overflowY: 'hidden',
 });
 
 export const ActionBarContainer = styled(MuiBox)({

src/Frontend/Components/AttributionPanels/AttributionsPanel/AttributionsList/AttributionsList.tsx

@@ -123,17 +123,20 @@ export const PackagesPanel = ({
     [attributionIds, multiSelectedAttributionIds, selectedAttributionId],
   );
 
-  const areAllAttributionsSelected = useMemo(
-    () =>
-      !!attributionIds?.length &&
-      !difference(
-        attributionIds.filter(
-          (id) => attributions?.[id].relation === activeRelation,
-        ),
-        multiSelectedAttributionIds,
-      ).length,
-    [activeRelation, attributionIds, attributions, multiSelectedAttributionIds],
-  );
+  const areAllAttributionsSelected = useMemo(() => {
+    const activeAttributionIds = attributionIds?.filter(
+      (id) => attributions?.[id].relation === activeRelation,
+    );
+    return (
+      !!activeAttributionIds?.length &&
+      !difference(activeAttributionIds, multiSelectedAttributionIds).length
+    );
+  }, [
+    activeRelation,
+    attributionIds,
+    attributions,
+    multiSelectedAttributionIds,
+  ]);
 
   const effectiveSelectedIds = useMemo(
     () => intersection(attributionIds, multiSelectedAttributionIds),

src/Frontend/Components/AttributionPanels/PackagesPanel/PackagesPanel.style.ts

@@ -20,6 +20,7 @@ import {
 } from '../../../GroupedList/GroupedList';
 import { SourceIcon } from '../../../Icons/Icons';
 import { PackageCard } from '../../../PackageCard/PackageCard';
+import { SearchList } from '../../../SearchList/SearchList';
 import { PackagesPanelChildrenProps } from '../../PackagesPanel/PackagesPanel';
 import { GroupName } from './SignalsList.style';
 
@@ -71,6 +72,7 @@ export const SignalsList: React.FC<PackagesPanelChildrenProps> = ({
       grouped={groupedIds}
       selectedId={selectedAttributionId}
       renderItemContent={renderAttributionCard}
+      components={{ List: SearchList }}
       renderGroupName={(sourceName) => (
         <>
           <SourceIcon noTooltip />

src/Frontend/Components/AttributionPanels/PackagesPanel/PackagesPanel.tsx

@@ -4,17 +4,8 @@
 // SPDX-License-Identifier: Apache-2.0
 import { styled } from '@mui/material';
 import MuiBox from '@mui/material/Box';
-import MuiTypography from '@mui/material/Typography';
 
-import { text } from '../../../shared/text';
-
-export const NoResults = styled((props) => (
-  <MuiBox {...props}>
-    <MuiTypography sx={{ textTransform: 'uppercase' }}>
-      {text.generic.noResults}
-    </MuiTypography>
-  </MuiBox>
-))({
+export const Container = styled(MuiBox)({
   display: 'flex',
   height: '100%',
   justifyContent: 'center',

src/Frontend/Components/AttributionPanels/SignalsPanel/SignalsList/SignalsList.tsx

@@ -0,0 +1,25 @@
+// SPDX-FileCopyrightText: Meta Platforms, Inc. and its affiliates
+// SPDX-FileCopyrightText: TNG Technology Consulting GmbH <https://www.tngtech.com>
+//
+// SPDX-License-Identifier: Apache-2.0
+import MuiTypography from '@mui/material/Typography';
+
+import { text } from '../../../shared/text';
+import { useVirtuosoComponent } from '../VirtuosoComponentContext/VirtuosoComponentContext';
+import { Container } from './EmptyPlaceholder.style';
+
+export const EmptyPlaceholder: React.FC = () => {
+  const { loading } = useVirtuosoComponent();
+
+  if (loading) {
+    return null;
+  }
+
+  return (
+    <Container>
+      <MuiTypography sx={{ textTransform: 'uppercase' }}>
+        {text.generic.noResults}
+      </MuiTypography>
+    </Container>
+  );
+};