fix: Blank page on project change - Uncaught TypeError: Cannot read p… (#368)

* fix: Blank page on project change - Uncaught TypeError: Cannot read properties of null (reading 'instanceId')

closes Visual-Regression-Tracker/Visual-Regression-Tracker#463

* Update playwright.yml

Author: pashidlos

.github/workflows/playwright.yml

@@ -31,7 +31,7 @@ jobs:
           VRT_BRANCHNAME: ${{ github.head_ref || github.ref_name }}
           VRT_CIBUILDID: "Github run_id:  ${{ github.run_id }}"
 
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report

src/components/TestRunList/BulkOperation.tsx

@@ -47,7 +47,10 @@ export const BulkOperation: React.FunctionComponent = () => {
   );
 
   const isMerge: boolean = React.useMemo(
-    () => !!rows.find((row: GridRowModel) => selectedIds.includes(row.id.toString()))?.model.merge,
+    () =>
+      !!rows.find((row: GridRowModel) =>
+        selectedIds.includes(row.id.toString()),
+      )?.model.merge,
     [selectedIds, rows],
   );
 
@@ -268,7 +271,9 @@ export const BulkOperation: React.FunctionComponent = () => {
         onCancel={dismissDialog}
         content={
           <Typography>
-            {`Are you sure you want to ${submitButtonText().toLowerCase()} ${selectedRows.length} items?`}
+            {`Are you sure you want to ${submitButtonText().toLowerCase()} ${
+              selectedRows.length
+            } items?`}
           </Typography>
         }
         onSubmit={() => {

src/components/TestRunList/index.tsx

@@ -156,58 +156,49 @@ const TestRunList: React.FunctionComponent = () => {
       }
       unsubscribe?.();
     };
-    return apiRef.current.subscribeEvent?.(
+    return apiRef.current?.subscribeEvent?.(
       "stateChange",
       () =>
-        (unsubscribe = apiRef.current.subscribeEvent(
+        (unsubscribe = apiRef.current?.subscribeEvent(
           "stateChange",
           handleStateChange,
         )),
     );
-  }, [apiRef, apiRef.current.instanceId]);
+  }, [apiRef, apiRef.current?.instanceId]);
 
   if (selectedBuild) {
     return (
-      <React.Fragment>
-        <DataGrid
-          apiRef={apiRef}
-          rows={testRuns}
-          columns={columnsDef}
-          columnVisibilityModel={{
-            id: false,
-          }}
-          pageSizeOptions={[10, 30, 100]}
-          paginationModel={paginationModel}
-          onPaginationModelChange={setPaginationModel}
-          pagination
-          loading={loading}
-          slots={{
-            toolbar: DataGridCustomToolbar,
-          }}
-          checkboxSelection
-          disableColumnSelector
-          disableColumnMenu
-          disableRowSelectionOnClick
-          sortModel={sortModel}
-          onSortModelChange={(model) => setSortModel(model)}
-          onRowClick={(param: GridRowParams) => {
-            navigate(
-              buildTestRunLocation(
-                selectedBuild.id,
-                param.row["id"].toString(),
-              ),
-            );
-          }}
-        />
-      </React.Fragment>
+      <DataGrid
+        apiRef={apiRef}
+        rows={testRuns}
+        columns={columnsDef}
+        columnVisibilityModel={{
+          id: false,
+        }}
+        pageSizeOptions={[10, 30, 100]}
+        paginationModel={paginationModel}
+        onPaginationModelChange={setPaginationModel}
+        pagination
+        loading={loading}
+        slots={{
+          toolbar: DataGridCustomToolbar,
+        }}
+        checkboxSelection
+        disableColumnSelector
+        disableColumnMenu
+        disableRowSelectionOnClick
+        sortModel={sortModel}
+        onSortModelChange={(model) => setSortModel(model)}
+        onRowClick={(param: GridRowParams) => {
+          navigate(
+            buildTestRunLocation(selectedBuild.id, param.row["id"].toString()),
+          );
+        }}
+      />
     );
   }
 
-  return (
-    <React.Fragment>
-      <Typography variant="h5">Select build from list</Typography>
-    </React.Fragment>
-  );
+  return <Typography variant="h5">Select build from list</Typography>;
 };
 
 export default TestRunList;

vite.config.ts

@@ -21,6 +21,5 @@ export default defineConfig({
 
     // When false, all CSS will be extracted into a single CSS file.
     cssCodeSplit: false,
-
   },
 });