vdk-jupyter: UI failing cell marks enhancement

projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/__tests__/run-job-component.spec.tsx

@@ -2,7 +2,7 @@
  * Copyright 2023-2023 VMware, Inc.
  * SPDX-License-Identifier: Apache-2.0
  */
-import RunJobDialog, { findFailingCellId, handleErrorsProducedByNotebookCell } from '../components/RunJob';
+import RunJobDialog, { findFailingCellId, getCellInputAreaPromp, handleErrorsProducedByNotebookCell } from '../components/RunJob';
 import { render, fireEvent } from '@testing-library/react';
 import { jobData } from '../jobData';
 import { VdkOption } from '../vdkOptions/vdk_options';
@@ -138,3 +138,41 @@ describe('handleErrorsProducedByNotebookCell', () => {
   });
 
 });
+
+describe('getCellInputAreaPromp', () => {
+  test('returns the prompt element when it exists', () => {
+    const mockPromptElement = document.createElement('div');
+    mockPromptElement.classList.add('jp-InputArea-prompt');
+
+    const mockCellInputArea = document.createElement('div');
+    mockCellInputArea.classList.add('jp-Cell-inputArea');
+    mockCellInputArea.appendChild(mockPromptElement);
+
+    const mockCellInputWrapper = document.createElement('div');
+    mockCellInputWrapper.classList.add('jp-Cell-inputWrapper');
+    mockCellInputWrapper.appendChild(mockCellInputArea);
+
+    const mockFailinCell = document.createElement('div');
+    mockFailinCell.appendChild(mockCellInputWrapper);
+
+    const result = getCellInputAreaPromp(mockFailinCell);
+
+    expect(result).toBe(mockPromptElement);
+  });
+
+  test('returns undefined when prompt element does not exist', () => {
+    const mockCellInputArea = document.createElement('div');
+    mockCellInputArea.classList.add('jp-Cell-inputArea');
+
+    const mockCellInputWrapper = document.createElement('div');
+    mockCellInputWrapper.classList.add('jp-Cell-inputWrapper');
+    mockCellInputWrapper.appendChild(mockCellInputArea);
+
+    const mockFailinCell = document.createElement('div');
+    mockFailinCell.appendChild(mockCellInputWrapper);
+
+    const result = getCellInputAreaPromp(mockFailinCell);
+
+    expect(result).toBeUndefined();
+  });
+});

projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/components/RunJob.tsx

@@ -123,7 +123,23 @@ export const findFailingCellId = (message: String): string => {
   return '';
 };
 
+export const getCellInputAreaPromp = (failinCell: Element): Element | undefined => {
+  const cellInputWrappers = failinCell.getElementsByClassName('jp-Cell-inputWrapper');
+  for (let i = 0; i < cellInputWrappers.length; i++) {
+    const cellAreas = cellInputWrappers[i].getElementsByClassName('jp-Cell-inputArea');
+    if (cellAreas.length > 0) {
+      const cellInputArea = cellAreas[0];
+      const promptElements = cellInputArea.getElementsByClassName('jp-InputArea-prompt');
+      if (promptElements.length > 0) {
+        return promptElements[0];
+      }
+    }
+  }
+};
+
 const switchToFailingCell = (failingCell: Element) => {
+  const prompt = getCellInputAreaPromp(failingCell);
+  prompt?.classList.add('jp-vdk-failing-cell-prompt');
   failingCell.scrollIntoView();
   failingCell.classList.add('jp-vdk-failing-cell');
   // Delete previous fail numbering
@@ -160,9 +176,13 @@ export const findFailingCellInNotebookCells = async (
     });
   } else {
     for (let i = 0; i < cells.length; i++) {
-      i === failingCellIndex
-        ? switchToFailingCell(cells[i])
-        : cells[i].classList.remove('jp-vdk-failing-cell');
+      if (i === failingCellIndex) {
+        switchToFailingCell(cells[i]);
+      } else {
+        cells[i].classList.remove('jp-vdk-failing-cell');
+        const cellPropt = getCellInputAreaPromp(cells[i]);
+        cellPropt?.classList.remove('jp-vdk-failing-cell-prompt')
+      }
     }
   }
 };

projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/style/base.css

@@ -46,3 +46,8 @@
   color: aliceblue;
   padding: 4px;
 }
+
+.jp-vdk-failing-cell-prompt {
+  --jp-cell-prompt-not-active-font-color: #8c1e1e;
+  --jp-cell-inprompt-font-color: #8c1e1e;
+}