backport-v1.2: fix: allow selecting/copying text from expanded log and event rows (#746)

.changeset/selection-safe-row-toggle.md

@@ -0,0 +1,12 @@
+---
+'@openchoreo/backstage-plugin-openchoreo-observability': patch
+---
+
+Let the expanded panel of a log or event row be selected and copied. The
+expand/collapse handler covered the whole row, expanded panel included, so the
+`click` completing a drag-select collapsed the row and discarded the selection
+— the full message and every metadata value were impossible to copy.
+
+The handler now sits on the summary row only, leaving the expanded panel
+outside the click target. Clicking the summary row expands and collapses
+exactly as before.

plugins/openchoreo-observability/src/components/RuntimeEvents/EventEntry.test.tsx

@@ -129,6 +129,18 @@ describe('EventEntry', () => {
     expect(screen.queryByText('Event Message')).not.toBeInTheDocument();
   });
 
+  it('stays expanded when clicking inside the expanded panel', async () => {
+    const user = userEvent.setup();
+    renderEventEntry();
+
+    await user.click(screen.getByText('Scaled up replica set to 3'));
+    expect(screen.getByText('Event Message')).toBeInTheDocument();
+
+    await user.click(screen.getByText('comp-uid-1'));
+
+    expect(screen.getByText('Event Message')).toBeInTheDocument();
+  });
+
   it('falls back to prop values when metadata is missing', async () => {
     const user = userEvent.setup();
     renderEventEntry({

plugins/openchoreo-observability/src/components/RuntimeEvents/EventEntry.tsx

@@ -23,7 +23,9 @@ interface EventEntryProps {
    * expansion survives the virtualizer unmounting the row off-screen.
    */
   expanded: boolean;
-  /** Called when the user clicks the row to expand or collapse it. */
+  /**
+   * Called when the user clicks the summary row to expand or collapse it.
+   */
   onToggleExpand: () => void;
 }
 
@@ -69,10 +71,9 @@ export const EventEntry: FC<EventEntryProps> = ({
   return (
     <Box
       className={`${classes.eventRow} ${expanded ? classes.expandedRow : ''}`}
-      onClick={onToggleExpand}
       role="row"
     >
-      <Box className={classes.eventRowMain}>
+      <Box className={classes.eventRowMain} onClick={onToggleExpand}>
         {selectedFields.map(field => {
           if (field === EventEntryField.Timestamp) {
             return (

plugins/openchoreo-observability/src/components/RuntimeEvents/styles.ts

@@ -71,7 +71,6 @@ export const useEventsTableStyles = makeStyles(theme => ({
 
 export const useEventEntryStyles = makeStyles(theme => ({
   eventRow: {
-    cursor: 'pointer',
     borderBottom: `1px solid ${theme.palette.grey[100]}`,
     '&:hover': {
       backgroundColor: theme.palette.action.hover,
@@ -84,7 +83,9 @@ export const useEventEntryStyles = makeStyles(theme => ({
   },
   // Flex container replacing the former <TableRow>. `alignItems: 'center'`
   // mirrors the default `vertical-align: middle` of MUI table cells.
+  // `cursor` toggles row expansion. Expanded panel below it is selectable text.
   eventRowMain: {
+    cursor: 'pointer',
     display: 'flex',
     alignItems: 'center',
     width: '100%',

plugins/openchoreo-observability/src/components/RuntimeLogs/LogEntry.test.tsx

@@ -127,6 +127,18 @@ describe('LogEntry', () => {
     expect(screen.queryByText('Full Log Message')).not.toBeInTheDocument();
   });
 
+  it('stays expanded when clicking inside the expanded panel', async () => {
+    const user = userEvent.setup();
+    renderLogEntry();
+
+    await user.click(screen.getByText('Server started on port 8080'));
+    expect(screen.getByText('Full Log Message')).toBeInTheDocument();
+
+    await user.click(screen.getByText('api-service-abc123'));
+
+    expect(screen.getByText('Full Log Message')).toBeInTheDocument();
+  });
+
   it('renders ERROR level chip', () => {
     renderLogEntry({
       log: { ...sampleLog, level: 'ERROR' },

plugins/openchoreo-observability/src/components/RuntimeLogs/LogEntry.tsx

@@ -34,7 +34,9 @@ interface LogEntryProps {
    * expansion survives the virtualizer unmounting the row off-screen.
    */
   expanded: boolean;
-  /** Called when the user clicks the row to expand or collapse it. */
+  /**
+   * Called when the user clicks the summary row to expand or collapse it.
+   */
   onToggleExpand: () => void;
   /**
    * Stable callback (typically backed by a ref) returning the table's
@@ -104,10 +106,9 @@ export const LogEntry: FC<LogEntryProps> = ({
   return (
     <Box
       className={`${classes.logRow} ${expanded ? classes.expandedRow : ''}`}
-      onClick={onToggleExpand}
       role="row"
     >
-      <Box className={classes.logRowMain}>
+      <Box className={classes.logRowMain} onClick={onToggleExpand}>
         {selectedFields.map(field => {
           if (field === LogEntryField.Timestamp) {
             return (

plugins/openchoreo-observability/src/components/RuntimeLogs/styles.ts

@@ -100,7 +100,6 @@ export const useLogsTableStyles = makeStyles(theme => ({
 
 export const useLogEntryStyles = makeStyles(theme => ({
   logRow: {
-    cursor: 'pointer',
     // Match MUI `<TableCell>`'s hardcoded light grey rather than
     // `palette.divider`, which is alpha-based and blends darker against
     // Backstage's Paper background.
@@ -119,7 +118,9 @@ export const useLogEntryStyles = makeStyles(theme => ({
   // 'center'` mirrors the default `vertical-align: middle` of MUI table cells,
   // so the LogLevel chip and timestamp stay centered when the Log column wraps
   // to multiple lines.
+  // `cursor` toggles row expansion. Expanded panel below it is selectable text.
   logRowMain: {
+    cursor: 'pointer',
     display: 'flex',
     alignItems: 'center',
     width: '100%',