feat: add keyboard navigation to attributions and signals lists

- merge PackageCard and ListCard components
- track keyboard selected item in list and grouped-list
- add focus styling to package card

closes #971

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

Author: mstykow

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

@@ -10,7 +10,7 @@ import { changeSelectedAttributionOrOpenUnsavedPopup } from '../../../../state/a
 import { useAppDispatch } from '../../../../state/hooks';
 import { useAttributionIdsForReplacement } from '../../../../state/variables/use-attribution-ids-for-replacement';
 import { isPackageInfoIncomplete } from '../../../../util/is-important-attribution-information-missing';
-import { List } from '../../../List/List';
+import { List, ListItemContentProps } from '../../../List/List';
 import { PackageCard } from '../../../PackageCard/PackageCard';
 import { PackagesPanelChildrenProps } from '../../PackagesPanel/PackagesPanel';
 
@@ -37,7 +37,10 @@ export const AttributionsList: React.FC<PackagesPanelChildrenProps> = ({
     />
   );
 
-  function renderAttributionCard(attributionId: string) {
+  function renderAttributionCard(
+    attributionId: string,
+    { selected, focused }: ListItemContentProps,
+  ) {
     const attribution = attributions?.[attributionId];
 
     if (!attribution) {
@@ -54,7 +57,8 @@ export const AttributionsList: React.FC<PackagesPanelChildrenProps> = ({
               );
           }}
           cardConfig={{
-            selected: attributionId === selectedAttributionId,
+            selected,
+            focused,
             resolved: attributionIdsForReplacement.includes(attributionId),
             incomplete: isPackageInfoIncomplete(attribution),
           }}

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

@@ -14,7 +14,10 @@ import {
   getResolvedExternalAttributions,
 } from '../../../../state/selectors/resource-selectors';
 import { useAttributionIdsForReplacement } from '../../../../state/variables/use-attribution-ids-for-replacement';
-import { GroupedList } from '../../../GroupedList/GroupedList';
+import {
+  GroupedList,
+  GroupedListItemContentProps,
+} from '../../../GroupedList/GroupedList';
 import { SourceIcon } from '../../../Icons/Icons';
 import { PackageCard } from '../../../PackageCard/PackageCard';
 import { PackagesPanelChildrenProps } from '../../PackagesPanel/PackagesPanel';
@@ -79,7 +82,10 @@ export const SignalsList: React.FC<PackagesPanelChildrenProps> = ({
     />
   );
 
-  function renderAttributionCard(attributionId: string) {
+  function renderAttributionCard(
+    attributionId: string,
+    { focused, selected }: GroupedListItemContentProps,
+  ) {
     const attribution = attributions?.[attributionId];
 
     if (!attribution) {
@@ -96,7 +102,8 @@ export const SignalsList: React.FC<PackagesPanelChildrenProps> = ({
               );
           }}
           cardConfig={{
-            selected: attributionId === selectedAttributionId,
+            selected,
+            focused,
             resolved: resolvedExternalAttributionIds.has(attributionId),
           }}
           packageInfo={attribution}

src/Frontend/Components/CardList/CardList.tsx

@@ -6,13 +6,14 @@ import { styled } from '@mui/material';
 
 import { OpossumColors } from '../../shared-styles';
 import { List } from '../List/List';
-import { LIST_CARD_HEIGHT } from '../ListCard/ListCard';
+import { PACKAGE_CARD_HEIGHT } from '../PackageCard/PackageCard';
 
 const MAX_NUMBER_OF_CARDS = 4;
 
 export const CardList = styled(List)(({ data }) => {
   const height =
-    Math.min(MAX_NUMBER_OF_CARDS, data?.length ?? 0) * (LIST_CARD_HEIGHT + 1) +
+    Math.min(MAX_NUMBER_OF_CARDS, data?.length ?? 0) *
+      (PACKAGE_CARD_HEIGHT + 1) +
     1;
 
   return {

src/Frontend/Components/ConfirmDeletionPopup/ConfirmDeletionPopup.tsx

@@ -124,7 +124,7 @@ export const ConfirmDeletionPopup: React.FC<Props> = ({
         </MuiTypography>
         <CardList
           data={attributionIdsToDelete}
-          renderItemContent={(attributionId, index) => {
+          renderItemContent={(attributionId, { index }) => {
             if (!attributionId || !(attributionId in attributions)) {
               return null;
             }

src/Frontend/Components/ConfirmSavePopup/ConfirmSavePopup.tsx

@@ -153,7 +153,7 @@ export const ConfirmSavePopup: React.FC<Props> = ({
         </MuiTypography>
         <CardList
           data={attributionIdsToSave}
-          renderItemContent={(attributionId, index) => {
+          renderItemContent={(attributionId, { index }) => {
             if (!attributionId || !(attributionId in attributions)) {
               return null;
             }

src/Frontend/Components/GroupedList/GroupedList.tsx

@@ -10,7 +10,7 @@ import MuiBox from '@mui/material/Box';
 import MuiTooltip from '@mui/material/Tooltip';
 import { SxProps } from '@mui/system';
 import { defer } from 'lodash';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import {
   GroupedVirtuoso,
   GroupedVirtuosoHandle,
@@ -19,16 +19,26 @@ import {
 
 import { text } from '../../../shared/text';
 import { OpossumColors } from '../../shared-styles';
+import { useVirtuosoRefs } from '../../util/use-virtuoso-refs';
 import { LoadingMask } from '../LoadingMask/LoadingMask';
 import { NoResults } from '../NoResults/NoResults';
 import { GroupContainer, StyledLinearProgress } from './GroupedList.style';
 
+export interface GroupedListItemContentProps {
+  index: number;
+  selected: boolean;
+  focused: boolean;
+}
+
 export interface GroupedListProps {
   className?: string;
   grouped: Record<string, ReadonlyArray<string>> | null;
   loading?: boolean;
   renderGroupName?: (key: string) => React.ReactNode;
-  renderItemContent: (datum: string, index: number) => React.ReactNode;
+  renderItemContent: (
+    datum: string,
+    props: GroupedListItemContentProps,
+  ) => React.ReactNode;
   selected?: string;
   sx?: SxProps;
   testId?: string;
@@ -45,7 +55,6 @@ export function GroupedList({
   testId,
   ...props
 }: GroupedListProps & Omit<GroupedVirtuosoProps<string, unknown>, 'selected'>) {
-  const ref = useRef<GroupedVirtuosoHandle>(null);
   const [{ startIndex, endIndex }, setRange] = useState<{
     startIndex: number;
     endIndex: number;
@@ -66,6 +75,12 @@ export function GroupedList({
     };
   }, [grouped, selected]);
 
+  const { ref, scrollerRef, focusedIndex } =
+    useVirtuosoRefs<GroupedVirtuosoHandle>({
+      data: groups?.ids,
+      selectedIndex: groups?.selectedIndex,
+    });
+
   useEffect(() => {
     if (groups?.selectedIndex !== undefined && groups.selectedIndex >= 0) {
       defer(() =>
@@ -75,7 +90,7 @@ export function GroupedList({
         }),
       );
     }
-  }, [groups?.selectedIndex]);
+  }, [groups?.selectedIndex, ref]);
 
   return (
     <LoadingMask
@@ -101,6 +116,7 @@ export function GroupedList({
           EmptyPlaceholder:
             loading || groups.ids.length ? undefined : () => <NoResults />,
         }}
+        scrollerRef={scrollerRef}
         rangeChanged={setRange}
         groupCounts={groups?.counts}
         groupContent={(index) => (
@@ -114,7 +130,13 @@ export function GroupedList({
             )}
           </GroupContainer>
         )}
-        itemContent={(index) => renderItemContent(groups.ids[index], index)}
+        itemContent={(index) =>
+          renderItemContent(groups.ids[index], {
+            index,
+            selected: index === groups.selectedIndex,
+            focused: index === focusedIndex,
+          })
+        }
         {...props}
       />
     );

src/Frontend/Components/List/List.tsx

@@ -4,18 +4,28 @@
 // SPDX-License-Identifier: Apache-2.0
 import { SxProps } from '@mui/system';
 import { defer } from 'lodash';
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo } from 'react';
 import { Virtuoso, VirtuosoHandle, VirtuosoProps } from 'react-virtuoso';
 
+import { useVirtuosoRefs } from '../../util/use-virtuoso-refs';
 import { LoadingMask } from '../LoadingMask/LoadingMask';
 import { NoResults } from '../NoResults/NoResults';
 import { StyledLinearProgress } from './List.style';
 
+export interface ListItemContentProps {
+  index: number;
+  selected: boolean;
+  focused: boolean;
+}
+
 export interface ListProps {
   className?: string;
   data: ReadonlyArray<string> | null;
   loading?: boolean;
-  renderItemContent: (datum: string, index: number) => React.ReactNode;
+  renderItemContent: (
+    datum: string,
+    props: ListItemContentProps,
+  ) => React.ReactNode;
   selected?: string;
   sx?: SxProps;
   testId?: string;
@@ -31,8 +41,6 @@ export function List({
   testId,
   ...props
 }: ListProps & Omit<VirtuosoProps<string, unknown>, 'data' | 'selected'>) {
-  const ref = useRef<VirtuosoHandle>(null);
-
   const selectedIndex = useMemo(() => {
     if (!data) {
       return undefined;
@@ -41,6 +49,11 @@ export function List({
     return data.findIndex((datum) => datum === selected);
   }, [data, selected]);
 
+  const { focusedIndex, ref, scrollerRef } = useVirtuosoRefs<VirtuosoHandle>({
+    data,
+    selectedIndex,
+  });
+
   useEffect(() => {
     if (selectedIndex !== undefined && selectedIndex >= 0) {
       defer(() =>
@@ -50,7 +63,7 @@ export function List({
         }),
       );
     }
-  }, [selectedIndex]);
+  }, [selectedIndex, ref]);
 
   return (
     <LoadingMask
@@ -76,8 +89,15 @@ export function List({
           EmptyPlaceholder:
             loading || data.length ? undefined : () => <NoResults />,
         }}
+        scrollerRef={scrollerRef}
         data={data}
-        itemContent={(index) => renderItemContent(data[index], index)}
+        itemContent={(index) =>
+          renderItemContent(data[index], {
+            index,
+            selected: index === selectedIndex,
+            focused: index === focusedIndex,
+          })
+        }
         {...props}
       />
     );