ORV2-2464: Refactor and update UI and hooks for all vehicle related c…

…omponents (#1448)

frontend/src/common/components/table/OnRouteBCTableRowActions.scss

@@ -0,0 +1,44 @@
+@import "../../../themes/orbcStyles";
+
+.onroutebc-table-row-actions {
+  display: flex;
+  justify-content: flex-end;
+
+  & &__button {
+    background-color: $white;
+    border: none;
+    padding: 0.75rem 1.25rem;
+    border-radius: 0.25rem;
+
+    &--disabled {
+      color: $disabled-colour;
+    }
+
+    &:hover {
+      background-color: $bc-background-light-grey;
+      cursor: pointer;
+    }
+
+    &:focus {
+      border: 2px solid $focus-blue;
+    }
+
+    &--pressed {
+      border: 2px solid $bc-black;
+      background-color: $bc-background-light-grey;
+    }
+  }
+
+  &__popper.popper > .tooltip.tooltip--bottom {
+    font-size: 1rem;
+    color: $white;
+    background-color: $bc-black;
+    font-weight: normal;
+    border-radius: 0.25rem;
+    margin-top: 0.25rem;
+  }
+
+  &__icon {
+    font-size: 1.5rem;
+  }
+}

frontend/src/common/components/table/OnRouteBCTableRowActions.tsx

@@ -1,11 +1,9 @@
-import MoreVertIcon from "@mui/icons-material/MoreVert";
-import IconButton from "@mui/material/IconButton";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import * as React from "react";
-import { useCallback } from "react";
+import { faEllipsisVertical } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconButton, Menu, MenuItem, Tooltip } from "@mui/material";
+import { useState, useCallback, MouseEvent } from "react";
 
-const ITEM_HEIGHT = 48;
+import "./OnRouteBCTableRowActions.scss";
 
 /**
  * A reusable component meant to be used in table components for row actions.
@@ -15,87 +13,98 @@ export const OnRouteBCTableRowActions = ({
   options,
   disabled = false,
 }: {
-  /**
-   * Callback function to be called upon a user selecting an option.
-   * @param selectedOption The selected option as a string.
-   */
   onSelectOption: (selectedOption: string) => void;
-
-  /**
-   * The options to be shown in the menu.
-   */
   options: {
     label: string;
     value: string;
   }[];
-
-  /**
-   * Disables the row action icon if set to true. Defaults to false.
-   */
   disabled?: boolean;
 }) => {
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  const open = Boolean(anchorEl);
+  // Used to determine the anchor element to position the actions menu to
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const isMenuOpen = Boolean(anchorEl);
 
-  const handleClick = useCallback((event: React.MouseEvent<HTMLElement>) => {
+  const actionsButtonPressedClassName =
+    isMenuOpen ? " onroutebc-table-row-actions__button--pressed" : "";
+
+  const handleOpenActionsMenu = useCallback((event: MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
   }, []);
 
-  const handleClose = () => {
+  const handleCloseActionsMenu = () => {
     setAnchorEl(null);
   };
 
-  /**
-   * Event handler for an option select. Gives a callback to the
-   * callback function passed with the selected option as a parameter.
-   * @param event The click event containing the target value.
-   */
-  const onClickOption = (event: React.MouseEvent<HTMLElement>) => {
+  const onClickOption = (event: MouseEvent<HTMLElement>) => {
     const selectedOption = event.currentTarget.dataset.optionValue as string;
     onSelectOption(selectedOption);
     setAnchorEl(null);
   };
 
   return (
-    <>
-      <IconButton
-        aria-label="more"
-        id="long-button"
-        aria-controls={open ? "long-menu" : undefined}
-        aria-expanded={open ? "true" : undefined}
-        aria-haspopup="true"
-        onClick={handleClick}
-        disabled={disabled}
+    <div className="onroutebc-table-row-actions">
+      <Tooltip
+        title="Actions"
+        classes={{
+          popper: "popper onroutebc-table-row-actions__popper",
+          tooltip: "tooltip",
+          tooltipPlacementBottom: "tooltip--bottom",
+        }}
       >
-        <MoreVertIcon />
-      </IconButton>
+        <IconButton
+          className={`onroutebc-table-row-actions__button ${actionsButtonPressedClassName}`}
+          classes={{
+            disabled: "onroutebc-table-row-actions__button--disabled",
+          }}
+          aria-label="Actions"
+          id="actions-button"
+          aria-controls={isMenuOpen ? "actions-menu" : undefined}
+          aria-expanded={isMenuOpen ? "true" : undefined}
+          aria-haspopup="true"
+          onClick={handleOpenActionsMenu}
+          disabled={disabled}
+        >
+          <FontAwesomeIcon
+            icon={faEllipsisVertical}
+            className="onroutebc-table-row-actions__icon"
+          />
+        </IconButton>
+      </Tooltip>
+
       <Menu
-        id="long-menu"
+        className="onroutebc-table-row-actions__menu"
+        id="actions-menu"
         MenuListProps={{
-          "aria-labelledby": "long-button",
+          "aria-labelledby": "actions-button",
         }}
         anchorEl={anchorEl}
-        open={open}
-        onClose={handleClose}
+        anchorOrigin={{
+          horizontal: "right",
+          vertical: "bottom",
+        }}
+        transformOrigin={{
+          horizontal: "right",
+          vertical: "top",
+        }}
+        open={isMenuOpen}
+        onClose={handleCloseActionsMenu}
         slotProps={{
           paper: {
-            style: {
-              maxHeight: ITEM_HEIGHT * 4.5,
-              width: "15ch",
-            },
+            className: "onroutebc-table-row-actions__paper",
           },
         }}
       >
         {options.map((option) => (
           <MenuItem
             key={`option-${option.value}`}
+            className="onroutebc-table-row-actions__menu-item"
             onClick={onClickOption}
             data-option-value={option.value}
           >
             {option.label}
           </MenuItem>
         ))}
       </Menu>
-    </>
+    </div>
   );
 };

frontend/src/features/idir/search/components/IDIRPermitSearchResults.scss

@@ -10,6 +10,7 @@
       padding: 0;
       min-width: 0;
       max-width: 3rem;
+      overflow: visible;
     }
   }
 

frontend/src/features/idir/search/table/PermitSearchResultColumnDef.tsx

@@ -1,3 +1,4 @@
+import { Box, Tooltip } from "@mui/material";
 import { MRT_ColumnDef } from "material-react-table";
 
 import { CustomActionLink } from "../../../../common/components/links/CustomActionLink";
@@ -6,20 +7,12 @@ import { PERMIT_EXPIRED } from "../../../permits/types/PermitStatus";
 import { PermitChip } from "../../../permits/components/permit-list/PermitChip";
 import { viewPermitPdf } from "../../../permits/helpers/permitPDFHelper";
 import { hasPermitExpired } from "../../../permits/helpers/permitState";
+import { getPermitTypeName } from "../../../permits/types/PermitType";
 import {
   dateTimeStringSortingFn,
   formatCellValuetoDatetime,
 } from "../../../../common/helpers/tableHelper";
-import { getPermitTypeName } from "../../../permits/types/PermitType";
-import { Box, Tooltip } from "@mui/material";
 
-/*
- *
- * The Columns Options are from Material React Table.
- * For a list of options, see here:
- * https://www.material-react-table.com/docs/api/column-options
- *
- */
 export const PermitSearchResultColumnDef: MRT_ColumnDef<PermitListItem>[] = [
   {
     accessorKey: "permitNumber",
@@ -47,7 +40,7 @@ export const PermitSearchResultColumnDef: MRT_ColumnDef<PermitListItem>[] = [
         </>
       );
     },
-    size: 180,
+    size: 170,
   },
   {
     accessorKey: "permitType",
@@ -61,7 +54,8 @@ export const PermitSearchResultColumnDef: MRT_ColumnDef<PermitListItem>[] = [
           {props.cell.getValue()}
         </Box>
       </Tooltip>
-    }
+    },
+    size: 20,
   },
   {
     header: "Commodity",
@@ -70,18 +64,21 @@ export const PermitSearchResultColumnDef: MRT_ColumnDef<PermitListItem>[] = [
     // For TROS permits, commodities is not a concern.
     // Other permits will require implementation here.
     Cell: () => <>NA</>,
+    size: 20,
   },
   {
     accessorKey: "plate",
     header: "Plate",
     enableSorting: true,
     sortingFn: "alphanumeric",
+    size: 20,
   },
   {
     accessorKey: "legalName",
     header: "Company Name",
     enableSorting: true,
     sortingFn: "alphanumeric",
+    size: 180,
   },
   {
     accessorKey: "startDate",

frontend/src/features/manageVehicles/apiManager/endpoints/endpoints.tsx

@@ -1,9 +1,36 @@
 import { VEHICLES_URL } from "../../../../common/apiManager/endpoints/endpoints";
 
+const POWER_UNIT_BASE_URI = (companyId: string | number) =>
+  `${VEHICLES_URL}/companies/${companyId}/vehicles/powerUnits`;
+
+const TRAILER_BASE_URI = (companyId: string | number) =>
+  `${VEHICLES_URL}/companies/${companyId}/vehicles/trailers`;
+
 export const VEHICLES_API = {
-  POWER_UNIT: `${VEHICLES_URL}/vehicles/powerUnits`,
   POWER_UNIT_TYPES: `${VEHICLES_URL}/vehicles/power-unit-types`,
-
-  TRAILER: `${VEHICLES_URL}/vehicles/trailers`,
   TRAILER_TYPES: `${VEHICLES_URL}/vehicles/trailer-types`,
+  POWER_UNITS: {
+    ALL: (companyId: string | number) =>
+      `${POWER_UNIT_BASE_URI(companyId)}`,
+    DETAIL: (companyId: string | number, powerUnitId: string) =>
+      `${POWER_UNIT_BASE_URI(companyId)}/${powerUnitId}`,
+    ADD: (companyId: string | number) =>
+      `${POWER_UNIT_BASE_URI(companyId)}`,
+    UPDATE: (companyId: string | number, powerUnitId: string) =>
+      `${POWER_UNIT_BASE_URI(companyId)}/${powerUnitId}`,
+    DELETE: (companyId: string | number) =>
+      `${POWER_UNIT_BASE_URI(companyId)}/delete-requests`,
+  },
+  TRAILERS: {
+    ALL: (companyId: string | number) =>
+      `${TRAILER_BASE_URI(companyId)}`,
+    DETAIL: (companyId: string | number, trailerId: string) =>
+      `${TRAILER_BASE_URI(companyId)}/${trailerId}`,
+    ADD: (companyId: string | number) =>
+      `${TRAILER_BASE_URI(companyId)}`,
+    UPDATE: (companyId: string | number, trailerId: string) =>
+      `${TRAILER_BASE_URI(companyId)}/${trailerId}`,
+    DELETE: (companyId: string | number) =>
+      `${TRAILER_BASE_URI(companyId)}/delete-requests`,
+  },
 };