...

import { cx } from '@emotion/css';
import { useCallback, useEffect } from 'react';
import * as React from 'react';

import { Checkbox, IconButton, useStyles2, useTheme2, Space } from '@grafana/ui';

import { EntryIcon } from './EntryIcon';
import getStyles from './styles';
import { ResourceRow } from './types';

interface NestedEntryProps {
  level: number;
  entry: ResourceRow;
  isSelected: boolean;
  isSelectable: boolean;
  isOpen: boolean;
  isDisabled: boolean;
  scrollIntoView?: boolean;
  onToggleCollapse: (row: ResourceRow) => void;
  onSelectedChange: (row: ResourceRow, selected: boolean) => void;
}

export const NestedEntry = ({
  entry,
  isSelected,
  isDisabled,
  isOpen,
  isSelectable,
  level,
  scrollIntoView,
  onToggleCollapse,
  onSelectedChange,
}: NestedEntryProps) => {
  const theme = useTheme2();
  const styles = useStyles2(getStyles);
  const hasChildren = !!entry.children;

const handleToggleCollapse = useCallback(() => {
    onToggleCollapse(entry);
  }, [onToggleCollapse, entry]);

const handleSelectedChanged = useCallback(
    (ev: React.ChangeEvent<HTMLInputElement>) => {
      const isSelected = ev.target.checked;
      onSelectedChange(entry, isSelected);
    },
    [entry, onSelectedChange]
  );

const checkboxId = `${scrollIntoView ? 'table' : 'summary'}_checkbox_${entry.uri}`;

// Scroll to the selected element if it's not in the view
  // Only do it once, when the component is mounted
  useEffect(() => {
    if (isSelected && scrollIntoView) {
      document.getElementById(checkboxId)?.scrollIntoView({
        behavior: 'smooth',
        block: 'center',
      });
    }
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

return (
    <div className={styles.nestedEntry} style={{ marginLeft: level * (3 * theme.spacing.gridSize) }}>
      {hasChildren ? (
        <IconButton
          className={styles.collapseButton}
          name={isOpen ? 'angle-down' : 'angle-right'}
          aria-label={isOpen ? `Collapse ${entry.name}` : `Expand ${entry.name}`}
          onClick={handleToggleCollapse}
          id={entry.id}
        />
      ) : (
        <Space layout="inline" h={2} />
      )}

{isSelectable && (
        <>
          <Checkbox
            id={checkboxId}
            onChange={handleSelectedChanged}
            disabled={isDisabled}
            value={isSelected}
            className={styles.nestedRowCheckbox}
          />
          <Space layout="inline" h={2} />
        </>
      )}

<label htmlFor={checkboxId} className={cx(styles.entryContentItem, styles.truncated)}>
        {entry.name}
      </label>
    </div>
  );
};

.	Edit
..	Edit
AdvancedMulti.test.tsx	Edit
AdvancedMulti.tsx	Edit
EntryIcon.tsx	Edit
NestedEntry.test.tsx	Edit
NestedEntry.tsx	Edit
NestedRow.test.tsx	Edit
NestedRow.tsx	Edit
ResourcePicker.test.tsx	Edit
ResourcePicker.tsx	Edit
Search.tsx	Edit
styles.ts	Edit
types.ts	Edit
utils.test.ts	Edit
utils.ts	Edit