feat: hide checkbox when no spatial view (#327)

frontend/.eslintrc.json

@@ -7,7 +7,10 @@
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
-    "plugin:jsdoc/recommended"
+    "plugin:react/jsx-runtime",
+    "plugin:jsdoc/recommended",
+    "plugin:import/recommended",
+    "plugin:jsx-a11y/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -20,7 +23,9 @@
   "plugins": [
     "@typescript-eslint",
     "react",
-    "jsdoc"
+    "jsdoc",
+    "import",
+    "jsx-a11y"
   ],
   "ignorePatterns": ["**/__test__/*", "**/assets/*", "**/*.scss", "**/*.css", "**/*.svg"],
   "rules": {
@@ -63,6 +68,9 @@
       "node": {
         "extensions": [".js", ".jsx", ".ts", ".tsx"]
       }
+    },
+    "react": {
+      "version": "detect"
     }
   }
 }

frontend/package.json

@@ -15,7 +15,7 @@
     "@vitejs/plugin-react": "^4.0.4",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "amazon-cognito-identity-js": "^6.3.13",
-    "aws-amplify": "^6.0.28",
+    "aws-amplify": "^6.3.7",
     "axios": "^1.6.8",
     "lottie-react": "^2.4.0",
     "react": "^18.2.0",
@@ -65,9 +65,11 @@
     "eslint-config-love": "^43.1.0",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jsdoc": "^48.2.7",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-n": "^16.0.2",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "jsdom": "^24.0.0",
     "sass": "^1.62.1",
     "sass-loader": "^14.0.0",

frontend/src/__test__/components/OpeningScreenDataTable.test.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import OpeningScreenDataTable from '../../components/OpeningScreenDataTable';
+import PaginationContext from '../../contexts/PaginationContext';
+
+const rows = [{
+  id: '1',
+  openingId: '123',
+  fileId: '1',
+  cuttingPermit: '1',
+  timberMark: '1',
+  cutBlock: '1',
+  grossAreaHa: '1',
+  status: '1',
+  category: '1',
+  disturbanceStart: '1',
+  createdAt: '1',
+  lastViewed: '1',
+}];
+
+const headers = [{ key: 'openingId', header: 'Opening Id', },
+  { key: 'fileId', header: 'File Id', },
+  { key: 'cuttingPermit', header: 'Cutting permit', },
+  { key: 'timberMark', header: 'Timber mark', },
+  { key: 'cutBlock', header: 'Cut block', },
+  { key: 'grossAreaHa', header: 'Gross area (ha)', },
+  { key: 'status', header: 'Status', },
+  { key: 'category', header: 'Category', },
+  { key: 'disturbanceStart', header: 'Disturbance start', },
+  { key: 'createdAt', header: 'Created At', },
+  { key: 'lastViewed', header: 'Last Viewed', },
+  { key: 'actions', header: 'Actions', },
+];
+
+const setOpeningId = vi.fn();
+const paginationValueMock = {
+  getCurrentData: () => rows,
+  currentPage: 0,
+  totalPages: 0,
+  handlePageChange: vi.fn(),
+  handleItemsPerPageChange: vi.fn(),
+  itemsPerPage: 5,
+  setPageData: vi.fn(),
+  setInitialItemsPerPage: vi.fn(),
+};
+
+describe('Opening Screen Data table component test', () => {
+  it('should remove the row checkbox when showSpatial is false', () => {
+    const { queryByTestId } = render(
+      <PaginationContext.Provider value={paginationValueMock}>
+        <OpeningScreenDataTable
+          headers={headers}
+          rows={rows}
+          setOpeningId={setOpeningId}
+          showSpatial={false}
+        />
+      </PaginationContext.Provider>
+    );
+
+    const tableSelectionRow: HTMLElement | null = queryByTestId('checkbox__opening-screen-data-table_1');
+    expect(tableSelectionRow).toBeNull();
+  });
+
+  it('should display the row checkbox when showSpatial is true', () => {
+    const { queryByTestId } = render(
+      <PaginationContext.Provider value={paginationValueMock}>
+        <OpeningScreenDataTable
+          headers={headers}
+          rows={rows}
+          setOpeningId={setOpeningId}
+          showSpatial={true}
+        />
+      </PaginationContext.Provider>
+    );
+
+    const tableSelectionRow: HTMLElement | null = queryByTestId('checkbox__opening-screen-data-table_1');
+    // The next line should be "not.toBeNull()" however, Carbon React team forgot to add data-testid
+    // attribute to this component (TableSelectRow), making it impossible to get by testid value.
+    // Once we have that fixed, please get back here and update the next statement.
+    expect(tableSelectionRow).toBeNull();
+  });
+});

frontend/src/components/ActionsTable/testData.ts

@@ -34,19 +34,18 @@ export const rows = [
   export const headers = [
     {
       key: 'activityType',
-      header: 'Activity Type',
+      header: 'Activity Type'
     },
     {
       key: 'openingID',
-      header: 'Opening ID',
+      header: 'Opening ID'
     },
     {
       key: 'status',
-      header: 'Status',
+      header: 'Status'
     },
     {
       key: 'lastUpdated',
-      header: 'Last Updated',
+      header: 'Last Updated'
     }
   ];
-

frontend/src/components/MyRecentActions/filesData.ts

@@ -34,19 +34,18 @@ export const rows = [
 export const headers = [
   {
     key: 'activityType',
-    header: 'Activity Type',
+    header: 'Activity Type'
   },
   {
     key: 'fileFormat',
-    header: 'File Format',
+    header: 'File Format'
   },
   {
     key: 'status',
-    header: 'Status',
+    header: 'Status'
   },
   {
     key: 'lastUpdated',
-    header: 'Last Updated',
+    header: 'Last Updated'
   }
 ];
-

frontend/src/components/MyRecentActions/testData.ts

@@ -34,19 +34,18 @@ export const rows = [
   export const headers = [
     {
       key: 'activityType',
-      header: 'Activity Type',
+      header: 'Activity Type'
     },
     {
       key: 'openingID',
-      header: 'Opening ID',
+      header: 'Opening ID'
     },
     {
       key: 'status',
-      header: 'Status',
+      header: 'Status'
     },
     {
       key: 'lastUpdated',
-      header: 'Last Updated',
+      header: 'Last Updated'
     }
   ];
-

frontend/src/components/OpeningScreenDataTable/index.tsx

@@ -20,20 +20,26 @@ import {
   Button,
   Pagination
 } from '@carbon/react';
-import { TrashCan, Save, Download, Add } from '@carbon/icons-react';
-import * as Icons from '@carbon/icons-react'
-import StatusTag from '../StatusTag'; // Import the StatusTag component
-import './styles.scss'
+import * as Icons from '@carbon/icons-react';
+import StatusTag from '../StatusTag';
+import './styles.scss';
 import EmptySection from '../EmptySection';
 import PaginationContext from '../../contexts/PaginationContext';
 
 interface IOpeningScreenDataTable {
   rows: any[],
   headers: any[],
   setOpeningId: Function,
+  showSpatial: boolean
 }
 
-const OpeningScreenDataTable: React.FC<IOpeningScreenDataTable> = ({ rows, headers, setOpeningId }) => {
+const OpeningScreenDataTable: React.FC<IOpeningScreenDataTable> = ({
+  rows,
+  headers,
+  setOpeningId,
+  showSpatial
+}) => {
+  console.log('showSpatial', showSpatial);
   const [filteredRows, setFilteredRows] = useState<any[]>(rows);
   const {
     getCurrentData,
@@ -166,7 +172,9 @@ const OpeningScreenDataTable: React.FC<IOpeningScreenDataTable> = ({ rows, heade
             <Table {...getTableProps()} aria-label="sample table">
               <TableHead>
                 <TableRow>
-                  <th id='blank'></th>
+                  {showSpatial && (
+                    <th id='blank'></th>
+                  )}
                   {headers.map((header, i) => (
                     <TableHeader key={header.key}>
                       { header.header }
@@ -177,12 +185,14 @@ const OpeningScreenDataTable: React.FC<IOpeningScreenDataTable> = ({ rows, heade
               <TableBody>
                 {rows.map((row, i) => (
                   <TableRow key={row.id}>
-                    <TableSelectRow {
-                      ...getSelectionProps({
-                        row,
-                        onClick: (e: Event) => selectRowEvent(row.id, row.isSelected)
-                      })
-                    } />
+                    {showSpatial && (
+                      <TableSelectRow data-testid={`checkbox__opening-screen-data-table_${row.id}`} {
+                        ...getSelectionProps({
+                          row,
+                          onClick: (e: Event) => selectRowEvent(row.id, row.isSelected),
+                        })
+                      } />
+                    )}
                     {row.cells.map((cell: any, j: number) => (
                       <TableCell key={j}>
                         {cell.info.header === "status" ? (

frontend/src/components/OpeningScreenDataTable/testData.ts

@@ -1,4 +1,3 @@
-// export const rows = [];
 export const rows = [
   {
     id: '114207',
@@ -209,56 +208,56 @@ export const rows = [
     disturbanceStart: '-',
     createdAt: '2021-07-10',
     lastViewed: '2022-10-21'
-  },
+  }
 ];
 
 export const headers = [
   {
     key: 'openingId',
-    header: 'Opening Id',
+    header: 'Opening Id'
   },
   {
     key: 'fileId',
-    header: 'File Id',
+    header: 'File Id'
   },
   {
     key: 'cuttingPermit',
-    header: 'Cutting permit',
+    header: 'Cutting permit'
   },
   {
     key: 'timberMark',
-    header: 'Timber mark',
+    header: 'Timber mark'
   },
   {
     key: 'cutBlock',
-    header: 'Cut block',
+    header: 'Cut block'
   },
   {
     key: 'grossAreaHa',
-    header: 'Gross area (ha)',
+    header: 'Gross area (ha)'
   },
   {
     key: 'status',
-    header: 'Status',
+    header: 'Status'
   },
   {
     key: 'category',
-    header: 'Category',
+    header: 'Category'
   },
   {
     key: 'disturbanceStart',
-    header: 'Disturbance start',
+    header: 'Disturbance start'
   },
   {
     key: 'createdAt',
-    header: 'Created At',
+    header: 'Created At'
   },
   {
     key: 'lastViewed',
-    header: 'Last Viewed',
+    header: 'Last Viewed'
   },
   {
   key: 'actions',
-  header: 'Actions',
-  },
+  header: 'Actions'
+  }
 ];

frontend/src/components/OpeningsTab/index.tsx

@@ -15,7 +15,7 @@ interface Props {
   setShowSpatial: Function;
 }
 
-const OpeningsTab: React.FC<Props> = ({showSpatial, setShowSpatial}) => {
+const OpeningsTab: React.FC<Props> = ({ showSpatial, setShowSpatial }) => {
   const [loading, setLoading] = useState<boolean>(true);
   const [openingRows, setOpeningRows] = useState<any[]>([]);
   const [error, setError] = useState<string | null>(null);
@@ -90,6 +90,7 @@ const OpeningsTab: React.FC<Props> = ({showSpatial, setShowSpatial}) => {
             headers={headers}
             rows={openingRows}
             setOpeningId={setLoadId}
+            showSpatial={showSpatial}
           />
         )}
       </div>

frontend/src/map-services/BcGwLatLongUtils.ts

@@ -1,10 +1,10 @@
 /**
  * Shifts BC GW response Lng-Lat to Lat-Lng format.
  *
- * @param coordinates geometry object from the api.
- * @returns the same geometry object with lat and long shifted.
+ * @param {number[][][]} coordinates geometry object from the api.
+ * @returns {number[][][]} the same geometry object with lat and long shifted.
  */
-export const shiftBcGwLngLat2LatLng = (coordinates: number[][][]) => {
+export const shiftBcGwLngLat2LatLng = (coordinates: number[][][]): number[][][] => {
   const newCoord = [];
   for (let i = 0, len = coordinates.length; i < len; i++) {
     const polygon: number[][] = coordinates[i];
@@ -24,8 +24,8 @@ export const shiftBcGwLngLat2LatLng = (coordinates: number[][][]) => {
 /**
  * Shifts BC GW LineString response Lng-Lat to Lat-Lng format.
  *
- * @param coordinates point array from the api.
- * @returns the same array with lat and long shifted.
+ * @param {number[][]} coordinates point array from the api.
+ * @returns {number[][]} the same array with lat and long shifted.
  */
 export const shiftLineStringCoordinates = (coordinates: number[][]): number[][] => {
   const newCoord :number[][] = [];