Make items selectable

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+workloads-pods/pods.tsx

@@ -34,6 +34,7 @@ import subscribeStoresInjectable from "../../kube-watch-api/subscribe-stores.inj
 import type { SubscribableStore, SubscribeStores } from "../../kube-watch-api/kube-watch-api";
 import subscribeToStoresDisposersInjectable from "../../kube-watch-api/subscribe-to-stores-disposers.injectable";
 import { KubeObjectMenu } from "../kube-object-menu";
+import toggleKubeDetailsPaneInjectable, { ToggleKubeDetailsPane } from "../kube-detail-params/toggle-details.injectable";
 
 enum columnId {
   name = "name",
@@ -54,6 +55,7 @@ interface Dependencies {
   podStore: PodStore;
   nodeApi: NodeApi;
   subscribeToWatchStores: SubscribeStores;
+  toggleDetails: ToggleKubeDetailsPane;
 }
 
 const columnHelper = createColumnHelper<Pod>()
@@ -254,6 +256,7 @@ class NonInjectedPods extends React.Component<Dependencies> {
             pod => pod.status?.podIP || "",
             pod => pod.getNodeName() || "",
           ]}
+          onRowClick={(item) => this.props.toggleDetails(item.selfLink)}
           getCoreRowModel={getCoreRowModel()}
         />
       </SiblingsInTabLayout>
@@ -362,6 +365,7 @@ export const Pods = withInjectables<Dependencies>(NonInjectedPods, {
     nodeApi: di.inject(nodeApiInjectable),
     eventStore: di.inject(eventStoreInjectable),
     podStore: di.inject(podStoreInjectable),
-    subscribeToWatchStores: di.inject(subscribeToStoresDisposersInjectable)
+    subscribeToWatchStores: di.inject(subscribeToStoresDisposersInjectable),
+    toggleDetails: di.inject(toggleKubeDetailsPaneInjectable),
   }),
 });

src/renderer/components/list/list.tsx

@@ -22,13 +22,14 @@ export type SearchFilter<T> = (item: T) => string;
 export interface ListProps<T> extends TableOptions<T> {
   filters: SearchFilter<T>[];
   title?: React.ReactNode;
+  onRowClick?: (item: T) => void;
 }
 
 interface Dependencies {
   pageFiltersStore: PageFiltersStore;
 }
 
-export function NonInjectedList<T>({ columns, data, title, filters, pageFiltersStore }: ListProps<T> & Dependencies) {
+export function NonInjectedList<T>({ columns, data, title, filters, pageFiltersStore, onRowClick }: ListProps<T> & Dependencies) {
   const [search, setSearch] = useState<string>("");
 
   useEffect(() => {
@@ -60,6 +61,7 @@ export function NonInjectedList<T>({ columns, data, title, filters, pageFiltersS
         columns={columns}
         data={filteredData}
         className={themeStyles.tableTheme}
+        onRowClick={onRowClick}
       />
       {filteredData.length == 0 && (
         <div className={styles.notFound}>No data found</div>

src/renderer/components/list/table-theme.module.scss

@@ -34,7 +34,11 @@
     // padding: 0 var(--padding);
     font-weight: 500;
   }
-  
+
+  tbody tr:hover {
+    background-color: var(--tableBgcSelected);
+  }
+
   .headIcon {
     font-weight: normal;
     color: var(--textColorAccent);

src/renderer/components/table-list/table-list.tsx

@@ -15,6 +15,7 @@ interface TableProps<T> {
   selectable?: boolean;
   configurable?: boolean;
   columnsResizable?: boolean;
+  onRowClick?: (item: T) => void;
 }
 
 export function TableList<Data>({
@@ -24,6 +25,7 @@ export function TableList<Data>({
   selectable = true,
   configurable = true,
   columnsResizable = true,
+  onRowClick,
 }: TableProps<Data>) {
   const [sorting, setSorting] = React.useState<SortingState>([])
   const tableColumns = useMemo(() => {
@@ -82,7 +84,7 @@ export function TableList<Data>({
   });
 
   return (
-    <VirtualTable table={table} className={className} />
+    <VirtualTable table={table} className={className} onRowClick={onRowClick} />
   )
 }
 

src/renderer/components/table/virtual-table.tsx

@@ -8,13 +8,15 @@ import { flexRender, Row } from "@tanstack/react-table"
 import type { Table, Cell, Header } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { VirtualTableHeader } from "./virtual-table-header";
+import { prevDefault } from "../../utils";
  
  interface TableProps<T> {
    table: Table<T>;
    className?: string;
+   onRowClick?: (item: T) => void;
  }
  
- export function VirtualTable<Data>({ className, table }: TableProps<Data>) {
+ export function VirtualTable<Data>({ className, table, onRowClick }: TableProps<Data>) {
   const tableContainerRef = React.useRef<HTMLDivElement>(null)
   
   const { rows } = table.getRowModel()
@@ -50,7 +52,9 @@ import { VirtualTableHeader } from "./virtual-table-header";
                     width: '100%',
                     transform: `translateY(${virtualRow.start}px)`,
                     display: 'flex',
+                    cursor: onRowClick ? 'pointer' : 'default',
                   }}
+                  onClick={prevDefault(() => onRowClick?.(row.original))}
                 >
                   {row.getVisibleCells().map(cell => {
                     return (