wip Workbenches, need image

more workbenches a11y updates fix dsp modal fix more select issues prettier Add faker for the pass through api to enable regular user testing (opendatahub-io#806) * Add faker for the pass through api to enable regular user testing * Add faker for backend openshift user * add impersonate function for developers * address comments and modify the doc * Update to get the access token by making API call * update doc * add error message * Fix lint issues * address comments --------- Co-authored-by: Juntao Wang <juntwang@redhat.com> Storybook test integration (opendatahub-io#974) * added storybook boilerplate added a mock and decorator added tests fixed deps for storybook linter old tests dont work on jest 28, reverting linter error fix fix build errors fixed deps * trimmed mocks fixed tests * fix webpack changes * added a11y test to test-runner fix a11y errors in settings (opendatahub-io#979) varname rename bodyText to ariaLabel add aria label to select add aria-label to Select fix a11y violation in cluster storage modal and list view
jenny-s51 · Mar 6, 2023 · bd5b047 · bd5b047
1 parent 9b88eff
commit bd5b047
Show file tree

Hide file tree

Showing 7 changed files with 164 additions and 82 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/src/pages/projects/notebook/ConnectedNotebookField.tsx b/frontend/src/pages/projects/notebook/ConnectedNotebookField.tsx
@@ -54,6 +54,7 @@ const ConnectedNotebookField: React.FC<SelectNotebookFieldProps> = ({
         selections={selections}
         isOpen={notebookSelectOpen}
         isDisabled={disabled}
+        aria-label="Notebook select"
         onClear={() => {
           onSelect([]);
           setNotebookSelectOpen(false);

diff --git a/frontend/src/pages/projects/screens/detail/DetailsSection.tsx b/frontend/src/pages/projects/screens/detail/DetailsSection.tsx
@@ -12,7 +12,7 @@ import {
 import { ProjectSectionID } from './types';
 
 type DetailsSectionProps = {
-  id: ProjectSectionID;
+  id: string;
   actions?: React.ReactNode[];
   title: string;
   isLoading: boolean;

diff --git a/frontend/src/pages/projects/screens/detail/notebooks/NotebookTable.tsx b/frontend/src/pages/projects/screens/detail/notebooks/NotebookTable.tsx
@@ -24,9 +24,10 @@ const NotebookTable: React.FC<NotebookTableProps> = ({ notebookStates, refresh }
         data={notebookStates}
         columns={columns}
         disableRowRenderSupport
-        rowRenderer={(notebookState) => (
+        rowRenderer={(notebookState, i) => (
           <NotebookTableRow
             key={notebookState.notebook.metadata.uid}
+            rowIndex={i}
             obj={notebookState}
             onNotebookDelete={setNotebookToDelete}
             onNotebookAddStorage={setAddNotebookStorage}

diff --git a/frontend/src/pages/projects/screens/detail/notebooks/NotebookTableRow.tsx b/frontend/src/pages/projects/screens/detail/notebooks/NotebookTableRow.tsx
@@ -27,12 +27,14 @@ import NotebookStorageBars from './NotebookStorageBars';
 
 type NotebookTableRowProps = {
   obj: NotebookState;
+  rowIndex: number;
   onNotebookDelete: (notebook: NotebookKind) => void;
   onNotebookAddStorage: (notebook: NotebookKind) => void;
 };
 
 const NotebookTableRow: React.FC<NotebookTableRowProps> = ({
   obj,
+  rowIndex,
   onNotebookDelete,
   onNotebookAddStorage,
 }) => {
@@ -47,7 +49,7 @@ const NotebookTableRow: React.FC<NotebookTableRowProps> = ({
       <Tr>
         <Td
           expand={{
-            rowIndex: 0,
+            rowIndex: rowIndex,
             expandId: 'notebook-row-item',
             isExpanded,
             onToggle: () => setExpanded(!isExpanded),

diff --git a/frontend/src/pages/projects/screens/detail/storage/StorageTable.tsx b/frontend/src/pages/projects/screens/detail/storage/StorageTable.tsx
@@ -24,9 +24,10 @@ const StorageTable: React.FC<StorageTableProps> = ({ pvcs, refresh, onAddPVC })
         columns={columns}
         disableRowRenderSupport
         variant="compact"
-        rowRenderer={(pvc) => (
+        rowRenderer={(pvc, i) => (
           <StorageTableRow
             key={pvc.metadata.uid}
+            rowIndex={i}
             obj={pvc}
             onEditPVC={setEditPVC}
             onDeletePVC={setDeleteStorage}

diff --git a/frontend/src/pages/projects/screens/detail/storage/StorageTableRow.tsx b/frontend/src/pages/projects/screens/detail/storage/StorageTableRow.tsx
@@ -20,13 +20,15 @@ import StorageWarningStatus from './StorageWarningStatus';
 
 type StorageTableRowProps = {
   obj: PersistentVolumeClaimKind;
+  rowIndex: number;
   onDeletePVC: (pvc: PersistentVolumeClaimKind) => void;
   onEditPVC: (pvc: PersistentVolumeClaimKind) => void;
   onAddPVC: () => void;
 };
 
 const StorageTableRow: React.FC<StorageTableRowProps> = ({
   obj,
+  rowIndex,
   onDeletePVC,
   onEditPVC,
   onAddPVC,
@@ -57,7 +59,7 @@ const StorageTableRow: React.FC<StorageTableRowProps> = ({
       <Tr>
         <Td
           expand={{
-            rowIndex: 0,
+            rowIndex: rowIndex,
             expandId: 'storage-row-item',
             isExpanded,
             onToggle: () => setExpanded(!isExpanded),