[PUI] fix a few sonarcloud warnings (#8133)

* fix a few code issues

* fix common sonarcloud issues

* more small fixes

src/frontend/src/components/Boundary.tsx

@@ -4,7 +4,7 @@ import { ErrorBoundary, FallbackRender } from '@sentry/react';
 import { IconExclamationCircle } from '@tabler/icons-react';
 import { ReactNode, useCallback } from 'react';
 
-function DefaultFallback({ title }: { title: String }): ReactNode {
+function DefaultFallback({ title }: Readonly<{ title: string }>): ReactNode {
   return (
     <Alert
       color="red"
@@ -20,11 +20,11 @@ export function Boundary({
   children,
   label,
   fallback
-}: {
+}: Readonly<{
   children: ReactNode;
   label: string;
-  fallback?: React.ReactElement | FallbackRender | undefined;
+  fallback?: React.ReactElement | FallbackRender;
-}): ReactNode {
+}>): ReactNode {
   const onError = useCallback(
     (error: unknown, componentStack: string | undefined, eventId: string) => {
       console.error(`Error rendering component: ${label}`);

src/frontend/src/components/buttons/AdminButton.tsx

@@ -22,7 +22,7 @@ export type AdminButtonProps = {
  * - The user has "superuser" role
  * - The user has at least read rights for the selected item
  */
-export default function AdminButton(props: AdminButtonProps) {
+export default function AdminButton(props: Readonly<AdminButtonProps>) {
   const user = useUserState();
 
   const enabled: boolean = useMemo(() => {

src/frontend/src/components/buttons/PrimaryActionButton.tsx

@@ -12,14 +12,14 @@ export default function PrimaryActionButton({
   color,
   hidden,
   onClick
-}: {
+}: Readonly<{
   title: string;
   tooltip?: string;
   icon?: InvenTreeIconType;
   color?: string;
   hidden?: boolean;
   onClick: () => void;
-}) {
+}>) {
   if (hidden) {
     return null;
   }

src/frontend/src/components/buttons/RemoveRowButton.tsx

@@ -6,10 +6,10 @@ import { ActionButton } from './ActionButton';
 export default function RemoveRowButton({
   onClick,
   tooltip = t`Remove this row`
-}: {
+}: Readonly<{
   onClick: () => void;
   tooltip?: string;
-}) {
+}>) {
   return (
     <ActionButton
       onClick={onClick}

src/frontend/src/components/buttons/YesNoButton.tsx

@@ -7,14 +7,14 @@ export function PassFailButton({
   value,
   passText,
   failText
-}: {
+}: Readonly<{
   value: any;
   passText?: string;
   failText?: string;
-}) {
+}>) {
   const v = isTrue(value);
-  const pass = passText || t`Pass`;
+  const pass = passText ?? t`Pass`;
-  const fail = failText || t`Fail`;
+  const fail = failText ?? t`Fail`;
 
   return (
     <Badge
@@ -29,11 +29,11 @@ export function PassFailButton({
   );
 }
 
-export function YesNoButton({ value }: { value: any }) {
+export function YesNoButton({ value }: Readonly<{ value: any }>) {
   return <PassFailButton value={value} passText={t`Yes`} failText={t`No`} />;
 }
 
-export function YesNoUndefinedButton({ value }: { value?: boolean }) {
+export function YesNoUndefinedButton({ value }: Readonly<{ value?: boolean }>) {
   if (value === undefined) {
     return <Skeleton height={15} width={32} />;
   } else {

src/frontend/src/components/editors/NotesEditor.tsx

@@ -1,6 +1,4 @@
-// import SimpleMDE from "react-simplemde-editor";
 import { t } from '@lingui/macro';
-import { useMantineColorScheme } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 import { useQuery } from '@tanstack/react-query';
 import EasyMDE, { default as SimpleMde } from 'easymde';
@@ -60,13 +58,11 @@ export default function NotesEditor({
   modelType,
   modelId,
   editable
-}: {
+}: Readonly<{
   modelType: ModelType;
   modelId: number;
   editable?: boolean;
-}) {
+}>) {
-  const { colorScheme } = useMantineColorScheme();
-
   // In addition to the editable prop, we also need to check if the user has "enabled" editing
   const [editing, setEditing] = useState<boolean>(false);
 

src/frontend/src/components/errors/ClientError.tsx

@@ -5,7 +5,7 @@ import NotAuthenticated from './NotAuthenticated';
 import NotFound from './NotFound';
 import PermissionDenied from './PermissionDenied';
 
-export default function ClientError({ status }: { status?: number }) {
+export default function ClientError({ status }: Readonly<{ status?: number }>) {
   switch (status) {
     case 401:
       return <NotAuthenticated />;

src/frontend/src/components/errors/GenericErrorPage.tsx

@@ -19,13 +19,13 @@ export default function ErrorPage({
   title,
   message,
   status
-}: {
+}: Readonly<{
   title: string;
   message: string;
   status?: number;
   redirectMessage?: string;
   redirectTarget?: string;
-}) {
+}>) {
   const navigate = useNavigate();
 
   return (

src/frontend/src/components/forms/fields/ChoiceField.tsx

@@ -1,6 +1,6 @@
 import { Select } from '@mantine/core';
 import { useId } from '@mantine/hooks';
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { FieldValues, UseControllerReturn } from 'react-hook-form';
 
 import { ApiFormFieldType } from './ApiFormField';
@@ -12,11 +12,11 @@ export function ChoiceField({
   controller,
   definition,
   fieldName
-}: {
+}: Readonly<{
   controller: UseControllerReturn<FieldValues, any>;
   definition: ApiFormFieldType;
   fieldName: string;
-}) {
+}>) {
   const fieldId = useId();
 
   const {

src/frontend/src/components/forms/fields/DependentField.tsx

@@ -18,13 +18,13 @@ export function DependentField({
   definition,
   url,
   setFields
-}: {
+}: Readonly<{
   control: Control<FieldValues, any>;
   definition: ApiFormFieldType;
   fieldName: string;
   url?: string;
   setFields?: React.Dispatch<React.SetStateAction<ApiFormFieldSet>>;
-}) {
+}>) {
   const { watch, resetField } = useFormContext();
 
   const mappedFieldNames = useMemo(

src/frontend/src/components/forms/fields/TableField.tsx

@@ -20,16 +20,16 @@ export function TableField({
   definition,
   fieldName,
   control
-}: {
+}: Readonly<{
   definition: ApiFormFieldType;
   fieldName: string;
   control: UseControllerReturn<FieldValues, any>;
-}) {
+}>) {
   const {
     field,
     fieldState: { error }
   } = control;
-  const { value, ref } = field;
+  const { value } = field;
 
   const onRowFieldChange = (idx: number, key: string, value: any) => {
     const val = field.value;

src/frontend/src/components/forms/fields/TextField.tsx

@@ -14,12 +14,12 @@ export default function TextField({
   fieldName,
   definition,
   onChange
-}: {
+}: Readonly<{
   controller: UseControllerReturn<FieldValues, any>;
   definition: any;
   fieldName: string;
   onChange: (value: any) => void;
-}) {
+}>) {
   const fieldId = useId();
   const {
     field,

src/frontend/src/components/images/Thumbnail.tsx

@@ -1,5 +1,5 @@
 import { t } from '@lingui/macro';
-import { Anchor, Group, Skeleton, Text } from '@mantine/core';
+import { Anchor, Group } from '@mantine/core';
 import { ReactNode, useMemo } from 'react';
 
 import { ApiImage } from './ApiImage';
@@ -14,14 +14,14 @@ export function Thumbnail({
   link,
   text,
   align
-}: {
+}: Readonly<{
-  src?: string | undefined;
+  src?: string;
   alt?: string;
   size?: number;
   text?: ReactNode;
   align?: string;
   link?: string;
-}) {
+}>) {
   const backup_image = '/static/img/blank_image.png';
 
   const inner = useMemo(() => {

src/frontend/src/components/importer/ImportDataSelector.tsx

@@ -38,12 +38,12 @@ function ImporterDataCell({
   column,
   row,
   onEdit
-}: {
+}: Readonly<{
   session: ImportSessionState;
   column: any;
   row: any;
   onEdit?: () => void;
-}) {
+}>) {
   const onRowEdit = useCallback(
     (event: any) => {
       cancelEvent(event);
@@ -128,9 +128,9 @@ function ImporterDataCell({
 
 export default function ImporterDataSelector({
   session
-}: {
+}: Readonly<{
   session: ImportSessionState;
-}) {
+}>) {
   const table = useTable('dataimporter');
 
   const [selectedFieldNames, setSelectedFieldNames] = useState<string[]>([]);
@@ -377,6 +377,7 @@ export default function ImporterDataSelector({
 
     return [
       <ActionButton
+        key="import-selected-rows"
         disabled={!canImport}
         icon={<IconArrowRight />}
         color="green"

src/frontend/src/components/importer/ImporterColumnSelector.tsx

@@ -20,7 +20,10 @@ import { apiUrl } from '../../states/ApiState';
 import { StandaloneField } from '../forms/StandaloneField';
 import { ApiFormFieldType } from '../forms/fields/ApiFormField';
 
-function ImporterColumn({ column, options }: { column: any; options: any[] }) {
+function ImporterColumn({
+  column,
+  options
+}: Readonly<{ column: any; options: any[] }>) {
   const [errorMessage, setErrorMessage] = useState<string>('');
 
   const [selectedColumn, setSelectedColumn] = useState<string>(
@@ -122,11 +125,11 @@ function ImporterColumnTableRow({
   session,
   column,
   options
-}: {
+}: Readonly<{
   session: ImportSessionState;
   column: any;
   options: any;
-}) {
+}>) {
   return (
     <Table.Tr key={column.label ?? column.field}>
       <Table.Td>
@@ -156,9 +159,9 @@ function ImporterColumnTableRow({
 
 export default function ImporterColumnSelector({
   session
-}: {
+}: Readonly<{
   session: ImportSessionState;
-}) {
+}>) {
   const [errorMessage, setErrorMessage] = useState<string>('');
 
   const acceptMapping = useCallback(() => {
@@ -221,6 +224,7 @@ export default function ImporterColumnSelector({
           {session.columnMappings.map((column: any) => {
             return (
               <ImporterColumnTableRow
+                key={`import-${column.field}}`}
                 session={session}
                 column={column}
                 options={columnOptions}

src/frontend/src/components/importer/ImporterDrawer.tsx

@@ -27,7 +27,9 @@ import ImporterImportProgress from './ImporterImportProgress';
 /*
  * Stepper component showing the current step of the data import process.
  */
-function ImportDrawerStepper({ currentStep }: { currentStep: number }) {
+function ImportDrawerStepper({
+  currentStep
+}: Readonly<{ currentStep: number }>) {
   /* TODO: Enhance this with:
    * - Custom icons
    * - Loading indicators for "background" states
@@ -54,11 +56,11 @@ export default function ImporterDrawer({
   sessionId,
   opened,
   onClose
-}: {
+}: Readonly<{
   sessionId: number;
   opened: boolean;
   onClose: () => void;
-}) {
+}>) {
   const session = useImportSession({ sessionId: sessionId });
 
   const importSessionStatus = useStatusCodes({

src/frontend/src/components/importer/ImporterImportProgress.tsx

@@ -10,9 +10,9 @@ import { StylishText } from '../items/StylishText';
 
 export default function ImporterImportProgress({
   session
-}: {
+}: Readonly<{
   session: ImportSessionState;
-}) {
+}>) {
   const importSessionStatus = useStatusCodes({
     modelType: ModelType.importsession
   });

src/frontend/src/components/items/ActionDropdown.tsx

@@ -127,11 +127,11 @@ export function OptionsActionDropdown({
   actions = [],
   tooltip = t`Options`,
   hidden = false
-}: {
+}: Readonly<{
   actions: ActionDropdownItem[];
   tooltip?: string;
   hidden?: boolean;
-}) {
+}>) {
   return (
     <ActionDropdown
       icon={<IconDotsVertical />}

src/frontend/src/components/items/QRCode.tsx

@@ -11,7 +11,6 @@ import {
   Stack,
   Text
 } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
 import { modals } from '@mantine/modals';
 import { useQuery } from '@tanstack/react-query';
 import QR from 'qrcode';
@@ -143,7 +142,6 @@ export const InvenTreeQRCode = ({
 
 export const QRCodeLink = ({ mdl_prop }: { mdl_prop: QrCodeType }) => {
   const [barcode, setBarcode] = useState('');
-  const [isScanning, toggleIsScanning] = useDisclosure(false);
 
   function linkBarcode(value?: string) {
     api

src/frontend/src/components/nav/InstanceDetail.tsx

@@ -8,11 +8,11 @@ export default function InstanceDetail({
   status,
   loading,
   children
-}: {
+}: Readonly<{
   status: number;
   loading: boolean;
   children: React.ReactNode;
-}) {
+}>) {
   const user = useUserState();
 
   if (loading || !user.isLoggedIn()) {

src/frontend/src/components/nav/NavigationTree.tsx

@@ -40,14 +40,14 @@ export default function NavigationTree({
   selectedId,
   modelType,
   endpoint
-}: {
+}: Readonly<{
   title: string;
   opened: boolean;
   onClose: () => void;
   selectedId?: number | null;
   modelType: ModelType;
   endpoint: ApiEndpoints;
-}) {
+}>) {
   const navigate = useNavigate();
   const treeState = useTree();
 

src/frontend/src/components/plugins/PluginPanel.tsx

@@ -64,10 +64,10 @@ export async function isPluginPanelHidden({
 export default function PluginPanelContent({
   pluginProps,
   pluginContext
-}: {
+}: Readonly<{
   pluginProps: PluginPanelProps;
   pluginContext: PluginContext;
-}): ReactNode {
+}>): ReactNode {
   const ref = useRef<HTMLDivElement>();
 
   const [error, setError] = useState<string | undefined>(undefined);

src/frontend/src/components/render/Instance.tsx

@@ -121,10 +121,10 @@ export function RenderInstance(props: RenderInstanceProps): ReactNode {
 export function RenderRemoteInstance({
   model,
   pk
-}: {
+}: Readonly<{
   model: ModelType;
   pk: number;
-}): ReactNode {
+}>): ReactNode {
   const { data, isLoading, isFetching } = useQuery({
     queryKey: ['model', model, pk],
     queryFn: async () => {
@@ -166,7 +166,7 @@ export function RenderInlineModel({
   navigate,
   showSecondary = true,
   tooltip
-}: {
+}: Readonly<{
   primary: string;
   secondary?: string;
   showSecondary?: boolean;
@@ -177,7 +177,7 @@ export function RenderInlineModel({
   url?: string;
   navigate?: any;
   tooltip?: string;
-}): ReactNode {
+}>): ReactNode {
   // TODO: Handle labels
 
   const onClick = useCallback(
@@ -215,9 +215,9 @@ export function RenderInlineModel({
 
 export function UnknownRenderer({
   model
-}: {
+}: Readonly<{
   model: ModelType | undefined;
-}): ReactNode {
+}>): ReactNode {
   return (
     <Alert color="red" title={t`Unknown model: ${model}`}>
       <></>

src/frontend/src/components/render/Plugin.tsx

@@ -6,9 +6,9 @@ import { RenderInlineModel } from './Instance';
 
 export function RenderPlugin({
   instance
-}: {
+}: Readonly<{
   instance: Readonly<any>;
-}): ReactNode {
+}>): ReactNode {
   return (
     <RenderInlineModel
       primary={instance.name}

src/frontend/src/components/render/Report.tsx

@@ -4,9 +4,9 @@ import { RenderInlineModel } from './Instance';
 
 export function RenderReportTemplate({
   instance
-}: {
+}: Readonly<{
   instance: any;
-}): ReactNode {
+}>): ReactNode {
   return (
     <RenderInlineModel
       primary={instance.name}
@@ -17,9 +17,9 @@ export function RenderReportTemplate({
 
 export function RenderLabelTemplate({
   instance
-}: {
+}: Readonly<{
   instance: any;
-}): ReactNode {
+}>): ReactNode {
   return (
     <RenderInlineModel
       primary={instance.name}

src/frontend/src/components/settings/FactCollection.tsx

@@ -5,14 +5,18 @@ import { FactItem } from './FactItem';
 export function FactCollection({
   items,
   minItems = 3
-}: {
+}: Readonly<{
   items: { title: string; value: any }[];
   minItems?: number;
-}) {
+}>) {
   return (
     <SimpleGrid cols={minItems} spacing="xs">
       {items.map((item, index) => (
-        <FactItem key={index} title={item.title} value={item.value} />
+        <FactItem
+          key={`${index}-${item.value}`}
+          title={item.title}
+          value={item.value}
+        />
       ))}
     </SimpleGrid>
   );

src/frontend/src/components/settings/FactItem.tsx

@@ -2,7 +2,10 @@ import { Paper, Stack, Text } from '@mantine/core';
 
 import { StylishText } from '../items/StylishText';
 
-export function FactItem({ title, value }: { title: string; value: number }) {
+export function FactItem({
+  title,
+  value
+}: Readonly<{ title: string; value: number }>) {
   return (
     <Paper p="md" shadow="xs">
       <Stack gap="xs">

src/frontend/src/forms/BuildForms.tsx

@@ -11,7 +11,6 @@ import {
 } from '@tabler/icons-react';
 import { DataTable } from 'mantine-datatable';
 import { useEffect, useMemo, useState } from 'react';
-import { useFormContext } from 'react-hook-form';
 
 import { api } from '../App';
 import { ActionButton } from '../components/buttons/ActionButton';
@@ -25,7 +24,6 @@ import { TableFieldRowProps } from '../components/forms/fields/TableField';
 import { ProgressBar } from '../components/items/ProgressBar';
 import { ApiEndpoints } from '../enums/ApiEndpoints';
 import { ModelType } from '../enums/ModelType';
-import { resolveItem } from '../functions/conversion';
 import { InvenTreeIcon } from '../functions/icons';
 import { useCreateApiFormModal } from '../hooks/UseForm';
 import { useBatchCodeGenerator } from '../hooks/UseGenerator';
@@ -487,11 +485,11 @@ function BuildAllocateLineRow({
   props,
   record,
   sourceLocation
-}: {
+}: Readonly<{
   props: TableFieldRowProps;
   record: any;
   sourceLocation: number | undefined;
-}) {
+}>) {
   const stockField: ApiFormFieldType = useMemo(() => {
     return {
       field_type: 'related field',
@@ -542,7 +540,6 @@ function BuildAllocateLineRow({
   );
 
   return (
-    <>
     <Table.Tr key={`table-row-${record.pk}`}>
       <Table.Td>{partDetail}</Table.Td>
       <Table.Td>
@@ -570,7 +567,6 @@ function BuildAllocateLineRow({
         <RemoveRowButton onClick={() => props.removeFn(props.idx)} />
       </Table.Td>
     </Table.Tr>
-    </>
   );
 }
 

src/frontend/src/forms/PurchaseOrderForms.tsx

@@ -197,11 +197,11 @@ function LineItemFormRow({
   props,
   record,
   statuses
-}: {
+}: Readonly<{
   props: TableFieldRowProps;
   record: any;
   statuses: any;
-}) {
+}>) {
   // Barcode Modal state
   const [opened, { open, close }] = useDisclosure(false, {
     onClose: () => props.changeFn(props.idx, 'barcode', undefined)
@@ -263,7 +263,7 @@ function LineItemFormRow({
 
   // Barcode value
   const [barcodeInput, setBarcodeInput] = useState<any>('');
-  const [barcode, setBarcode] = useState<String | undefined>(undefined);
+  const [barcode, setBarcode] = useState<string | undefined>(undefined);
 
   // Change form value when state is altered
   useEffect(() => {

src/frontend/src/hooks/UsePluginPanels.tsx

@@ -6,11 +6,10 @@ import { useNavigate } from 'react-router-dom';
 import { api } from '../App';
 import { PanelType } from '../components/nav/Panel';
 import { PluginContext } from '../components/plugins/PluginContext';
-import {
+import PluginPanelContent, {
   PluginPanelProps,
   isPluginPanelHidden
 } from '../components/plugins/PluginPanel';
-import PluginPanelContent from '../components/plugins/PluginPanel';
 import { ApiEndpoints } from '../enums/ApiEndpoints';
 import { ModelType } from '../enums/ModelType';
 import { identifierString } from '../functions/conversion';

src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx

@@ -14,13 +14,12 @@ import {
   Title,
   useMantineTheme
 } from '@mantine/core';
-import { IconReload, IconRestore } from '@tabler/icons-react';
+import { IconRestore } from '@tabler/icons-react';
 import { useState } from 'react';
 
 import { ColorToggle } from '../../../../components/items/ColorToggle';
 import { LanguageSelect } from '../../../../components/items/LanguageSelect';
 import { SizeMarks } from '../../../../defaults/defaults';
-import { notYetImplemented } from '../../../../functions/notifications';
 import { IS_DEV } from '../../../../main';
 import { useLocalState } from '../../../../states/LocalState';
 
@@ -32,7 +31,7 @@ const LOOKUP = Object.assign(
   ...Object.keys(DEFAULT_THEME.colors).map((clr) => getLkp(clr))
 );
 
-export function UserTheme({ height }: { height: number }) {
+export function UserTheme({ height }: Readonly<{ height: number }>) {
   const theme = useMantineTheme();
 
   const [themeLoader, setThemeLoader] = useLocalState((state) => [

src/frontend/src/pages/Index/Settings/AdminCenter/PluginManagementPanel.tsx

@@ -1,7 +1,6 @@
 import { Trans, t } from '@lingui/macro';
 import { Accordion, Alert, Stack } from '@mantine/core';
 import { IconInfoCircle } from '@tabler/icons-react';
-import { userInfo } from 'os';
 import { lazy } from 'react';
 
 import { StylishText } from '../../../../components/items/StylishText';

src/frontend/src/pages/Index/Settings/SystemSettings.tsx

@@ -11,7 +11,6 @@ import {
   IconQrcode,
   IconServerCog,
   IconShoppingCart,
-  IconSitemap,
   IconTag,
   IconTools,
   IconTruckDelivery,

src/frontend/src/pages/part/pricing/PurchaseHistoryPanel.tsx

@@ -13,9 +13,9 @@ import { NoPricingData } from './PricingPanel';
 
 export default function PurchaseHistoryPanel({
   part
-}: {
+}: Readonly<{
   part: any;
-}): ReactNode {
+}>): ReactNode {
   const table = useTable('pricing-purchase-history');
 
   const calculateUnitPrice = useCallback((record: any) => {
@@ -86,13 +86,6 @@ export default function PurchaseHistoryPanel({
     ];
   }, []);
 
-  const currency: string = useMemo(() => {
-    if (table.records.length === 0) {
-      return '';
-    }
-    return table.records[0].purchase_price_currency;
-  }, [table.records]);
-
   const purchaseHistoryData = useMemo(() => {
     return table.records.map((record: any) => {
       return {

src/frontend/src/pages/part/pricing/SaleHistoryPanel.tsx

@@ -12,7 +12,9 @@ import { DateColumn } from '../../../tables/ColumnRenderers';
 import { InvenTreeTable } from '../../../tables/InvenTreeTable';
 import { NoPricingData } from './PricingPanel';
 
-export default function SaleHistoryPanel({ part }: { part: any }): ReactNode {
+export default function SaleHistoryPanel({
+  part
+}: Readonly<{ part: any }>): ReactNode {
   const table = useTable('pricing-sale-history');
 
   const columns: TableColumn[] = useMemo(() => {
@@ -51,13 +53,6 @@ export default function SaleHistoryPanel({ part }: { part: any }): ReactNode {
     ];
   }, []);
 
-  const currency: string = useMemo(() => {
-    if (table.records.length === 0) {
-      return '';
-    }
-    return table.records[0].sale_price_currency;
-  }, [table.records]);
-
   const saleHistoryData = useMemo(() => {
     return table.records.map((record: any) => {
       return {

src/frontend/src/tables/build/BuildAllocatedStockTable.tsx

@@ -34,7 +34,7 @@ export default function BuildAllocatedStockTable({
   allowEdit,
   modelTarget,
   modelField
-}: {
+}: Readonly<{
   buildId?: number;
   stockId?: number;
   partId?: number;
@@ -43,7 +43,7 @@ export default function BuildAllocatedStockTable({
   allowEdit?: boolean;
   modelTarget?: ModelType;
   modelField?: string;
-}) {
+}>) {
   const user = useUserState();
   const table = useTable('buildallocatedstock');
 

src/frontend/src/tables/build/BuildLineTable.tsx

@@ -5,7 +5,6 @@ import {
   IconCircleMinus,
   IconShoppingCart,
   IconTool,
-  IconTransferIn,
   IconWand
 } from '@tabler/icons-react';
 import { useCallback, useMemo, useState } from 'react';
@@ -37,12 +36,12 @@ export default function BuildLineTable({
   build,
   outputId,
   params = {}
-}: {
+}: Readonly<{
   buildId: number;
   build: any;
   outputId?: number;
   params?: any;
-}) {
+}>) {
   const table = useTable('buildline');
   const user = useUserState();
   const buildStatus = useStatusCodes({ modelType: ModelType.build });
@@ -441,6 +440,7 @@ export default function BuildLineTable({
     const visible = production && canEdit;
     return [
       <ActionButton
+        key="auto-allocate"
         icon={<IconWand />}
         tooltip={t`Auto Allocate Stock`}
         hidden={!visible}
@@ -450,6 +450,7 @@ export default function BuildLineTable({
         }}
       />,
       <ActionButton
+        key="allocate-stock"
         icon={<IconArrowRight />}
         tooltip={t`Allocate Stock`}
         hidden={!visible}
@@ -468,6 +469,7 @@ export default function BuildLineTable({
         }}
       />,
       <ActionButton
+        key="deallocate-stock"
         icon={<IconCircleMinus />}
         tooltip={t`Deallocate Stock`}
         hidden={!visible}

src/frontend/src/tables/build/BuildOrderTestTable.tsx

@@ -28,10 +28,10 @@ import { TableHoverCard } from '../TableHoverCard';
 export default function BuildOrderTestTable({
   buildId,
   partId
-}: {
+}: Readonly<{
   buildId: number;
   partId: number;
-}) {
+}>) {
   const table = useTable('build-tests');
   const user = useUserState();
 

src/frontend/src/tables/build/BuildOutputTable.tsx

@@ -34,7 +34,7 @@ type TestResultOverview = {
   result: boolean;
 };
 
-export default function BuildOutputTable({ build }: { build: any }) {
+export default function BuildOutputTable({ build }: Readonly<{ build: any }>) {
   const user = useUserState();
   const table = useTable('build-outputs');
 
@@ -208,11 +208,13 @@ export default function BuildOutputTable({ build }: { build: any }) {
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
+        key="add-build-output"
         tooltip={t`Add Build Output`}
         hidden={!user.hasAddRole(UserRoles.build)}
         onClick={addBuildOutput.open}
       />,
       <ActionButton
+        key="complete-selected-outputs"
         tooltip={t`Complete selected outputs`}
         icon={<InvenTreeIcon icon="success" />}
         color="green"
@@ -223,6 +225,7 @@ export default function BuildOutputTable({ build }: { build: any }) {
         }}
       />,
       <ActionButton
+        key="scrap-selected-outputs"
         tooltip={t`Scrap selected outputs`}
         icon={<InvenTreeIcon icon="delete" />}
         color="red"
@@ -233,6 +236,7 @@ export default function BuildOutputTable({ build }: { build: any }) {
         }}
       />,
       <ActionButton
+        key="cancel-selected-outputs"
         tooltip={t`Cancel selected outputs`}
         icon={<InvenTreeIcon icon="cancel" />}
         color="red"

src/frontend/src/tables/general/ExtraLineItemTable.tsx

@@ -29,12 +29,12 @@ export default function ExtraLineItemTable({
   orderId,
   currency,
   role
-}: {
+}: Readonly<{
   endpoint: ApiEndpoints;
   orderId: number;
   currency: string;
   role: UserRoles;
-}) {
+}>) {
   const table = useTable('extra-line-item');
   const user = useUserState();
 
@@ -139,6 +139,7 @@ export default function ExtraLineItemTable({
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
+        key="add-line-item"
         tooltip={t`Add Extra Line Item`}
         hidden={!user.hasAddRole(role)}
         onClick={() => {

src/frontend/src/tables/part/PartParameterTable.tsx

@@ -30,10 +30,10 @@ import { TableHoverCard } from '../TableHoverCard';
 export function PartParameterTable({
   partId,
   partLocked
-}: {
+}: Readonly<{
   partId: any;
   partLocked?: boolean;
-}) {
+}>) {
   const table = useTable('part-parameters');
 
   const user = useUserState();

src/frontend/src/tables/part/PartPurchaseOrdersTable.tsx

@@ -8,7 +8,6 @@ import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { ModelType } from '../../enums/ModelType';
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
-import { useUserState } from '../../states/UserState';
 import { TableColumn } from '../Column';
 import { DateColumn, ReferenceColumn, StatusColumn } from '../ColumnRenderers';
 import { StatusFilterOptions, TableFilter } from '../Filter';
@@ -17,11 +16,10 @@ import { TableHoverCard } from '../TableHoverCard';
 
 export default function PartPurchaseOrdersTable({
   partId
-}: {
+}: Readonly<{
   partId: number;
-}) {
+}>) {
   const table = useTable('partpurchaseorders');
-  const user = useUserState();
 
   const tableColumns: TableColumn[] = useMemo(() => {
     return [
@@ -130,7 +128,6 @@ export default function PartPurchaseOrdersTable({
   }, []);
 
   return (
-    <>
     <InvenTreeTable
       url={apiUrl(ApiEndpoints.purchase_order_line_list)}
       tableState={table}
@@ -147,6 +144,5 @@ export default function PartPurchaseOrdersTable({
         tableFilters: tableFilters
       }}
     />
-    </>
   );
 }

src/frontend/src/tables/part/PartTestTemplateTable.tsx

@@ -28,10 +28,10 @@ import { TableHoverCard } from '../TableHoverCard';
 export default function PartTestTemplateTable({
   partId,
   partLocked
-}: {
+}: Readonly<{
   partId: number;
   partLocked?: boolean;
-}) {
+}>) {
   const table = useTable('part-test-template');
   const user = useUserState();
   const navigate = useNavigate();
@@ -234,6 +234,7 @@ export default function PartTestTemplateTable({
 
     return [
       <AddItemButton
+        key="add-test-template"
         tooltip={t`Add Test Template`}
         onClick={() => newTestTemplate.open()}
         hidden={partLocked || !can_add}

src/frontend/src/tables/plugin/PluginListTable.tsx

@@ -73,7 +73,7 @@ export interface PluginI {
   >;
 }
 
-export function PluginDrawer({ pluginKey }: { pluginKey: Readonly<string> }) {
+export function PluginDrawer({ pluginKey }: Readonly<{ pluginKey: string }>) {
   const {
     instance: plugin,
     instanceQuery: { isFetching, error }
@@ -151,7 +151,7 @@ export function PluginDrawer({ pluginKey }: { pluginKey: Readonly<string> }) {
               />
             </Stack>
           ) : (
-            <Text color="red">{t`Plugin is not active`}</Text>
+            <Text c="red">{t`Plugin is not active`}</Text>
           )}
         </Stack>
       </Card>
@@ -207,7 +207,7 @@ export function PluginDrawer({ pluginKey }: { pluginKey: Readonly<string> }) {
 /**
  * Construct an indicator icon for a single plugin
  */
-function PluginIcon({ plugin }: { plugin: PluginI }) {
+function PluginIcon({ plugin }: Readonly<{ plugin: PluginI }>) {
   if (plugin?.is_installed) {
     if (plugin?.active) {
       return (
@@ -514,12 +514,14 @@ export default function PluginListTable() {
 
     return [
       <ActionButton
+        key="reload"
         color="green"
         icon={<IconRefresh />}
         tooltip={t`Reload Plugins`}
         onClick={reloadPlugins}
       />,
       <ActionButton
+        key="install"
         color="green"
         icon={<IconPlaylistAdd />}
         tooltip={t`Install Plugin`}

src/frontend/src/tables/sales/ReturnOrderLineItemTable.tsx

@@ -34,11 +34,11 @@ export default function ReturnOrderLineItemTable({
   orderId,
   customerId,
   currency
-}: {
+}: Readonly<{
   orderId: number;
   customerId: number;
   currency: string;
-}) {
+}>) {
   const table = useTable('return-order-line-item');
   const user = useUserState();
 
@@ -139,6 +139,7 @@ export default function ReturnOrderLineItemTable({
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
+        key="add-line-item"
         tooltip={t`Add line item`}
         hidden={!user.hasAddRole(UserRoles.return_order)}
         onClick={() => {

src/frontend/src/tables/sales/SalesOrderAllocationTable.tsx

@@ -26,7 +26,7 @@ export default function SalesOrderAllocationTable({
   allowEdit,
   modelTarget,
   modelField
-}: {
+}: Readonly<{
   partId?: number;
   stockId?: number;
   orderId?: number;
@@ -35,7 +35,7 @@ export default function SalesOrderAllocationTable({
   allowEdit?: boolean;
   modelTarget?: ModelType;
   modelField?: string;
-}) {
+}>) {
   const user = useUserState();
   const table = useTable('salesorderallocations');
 
@@ -110,7 +110,6 @@ export default function SalesOrderAllocationTable({
   );
 
   return (
-    <>
     <InvenTreeTable
       url={apiUrl(ApiEndpoints.sales_order_allocation_list)}
       tableState={table}
@@ -131,6 +130,5 @@ export default function SalesOrderAllocationTable({
         modelType: modelTarget ?? ModelType.salesorder
       }}
     />
-    </>
   );
 }

src/frontend/src/tables/sales/SalesOrderLineItemTable.tsx

@@ -44,12 +44,12 @@ export default function SalesOrderLineItemTable({
   currency,
   customerId,
   editable
-}: {
+}: Readonly<{
   orderId: number;
   currency: string;
   customerId: number;
   editable: boolean;
-}) {
+}>) {
   const user = useUserState();
   const table = useTable('sales-order-line-item');
 
@@ -149,7 +149,7 @@ export default function SalesOrderLineItemTable({
 
           return (
             <TableHoverCard
-              value={<Text color={color}>{text}</Text>}
+              value={<Text c={color}>{text}</Text>}
               extra={extra}
               title={t`Stock Information`}
             />
@@ -254,6 +254,7 @@ export default function SalesOrderLineItemTable({
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
+        key="add-line-item"
         tooltip={t`Add line item`}
         onClick={() => {
           setInitialData({

src/frontend/src/tables/sales/SalesOrderShipmentTable.tsx

@@ -23,9 +23,9 @@ import { RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
 
 export default function SalesOrderShipmentTable({
   orderId
-}: {
+}: Readonly<{
   orderId: number;
-}) {
+}>) {
   const user = useUserState();
   const table = useTable('sales-order-shipment');
 
@@ -130,6 +130,7 @@ export default function SalesOrderShipmentTable({
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
+        key="add-shipment"
         tooltip={t`Add shipment`}
         hidden={!user.hasAddRole(UserRoles.sales_order)}
         onClick={() => {

src/frontend/src/tables/settings/ImportSessionTable.tsx

@@ -16,7 +16,6 @@ import {
 } from '../../hooks/UseForm';
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
-import { useUserState } from '../../states/UserState';
 import { TableColumn } from '../Column';
 import { DateColumn, StatusColumn } from '../ColumnRenderers';
 import { StatusFilterOptions, TableFilter } from '../Filter';
@@ -128,6 +127,7 @@ export default function ImportSesssionTable() {
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
+        key="create-import-session"
         tooltip={t`Create Import Session`}
         onClick={() => newImportSession.open()}
       />

src/frontend/src/tables/settings/UserTable.tsx

@@ -20,7 +20,6 @@ import {
 } from '../../components/nav/DetailDrawer';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { ModelType } from '../../enums/ModelType';
-import { UserPermissions } from '../../enums/Roles';
 import {
   useCreateApiFormModal,
   useDeleteApiFormModal
@@ -51,10 +50,10 @@ export interface UserDetailI {
 export function UserDrawer({
   id,
   refreshTable
-}: {
+}: Readonly<{
   id: string;
   refreshTable: () => void;
-}) {
+}>) {
   const {
     instance: userDetail,
     refreshInstance,

src/frontend/src/tables/stock/StockTrackingTable.tsx

@@ -31,7 +31,7 @@ type StockTrackingEntry = {
   details: ReactNode;
 };
 
-export function StockTrackingTable({ itemId }: { itemId: number }) {
+export function StockTrackingTable({ itemId }: Readonly<{ itemId: number }>) {
   const navigate = useNavigate();
   const table = useTable('stock_tracking');
 

src/frontend/src/tables/stock/TestStatisticsTable.tsx

@@ -1,26 +1,14 @@
 import { t } from '@lingui/macro';
 import { useCallback, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 
-import { AddItemButton } from '../../components/buttons/AddItemButton';
-import { ApiEndpoints } from '../../enums/ApiEndpoints';
-import { ModelType } from '../../enums/ModelType';
-import { UserRoles } from '../../enums/Roles';
-import { stockLocationFields } from '../../forms/StockForms';
-import { getDetailUrl } from '../../functions/urls';
-import {
-  useCreateApiFormModal,
-  useEditApiFormModal
-} from '../../hooks/UseForm';
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
-import { useUserState } from '../../states/UserState';
 import { TableColumn } from '../Column';
-import { BooleanColumn, DescriptionColumn } from '../ColumnRenderers';
-import { TableFilter } from '../Filter';
 import { InvenTreeTable } from '../InvenTreeTable';
 
-export function TestStatisticsTable({ params = {} }: { params?: any }) {
+export function TestStatisticsTable({
+  params = {}
+}: Readonly<{ params?: any }>) {
   const initialColumns: TableColumn[] = [];
   const [templateColumnList, setTemplateColumnList] = useState(initialColumns);
 

src/frontend/tests/pui_plugins.spec.ts

@@ -1,4 +1,4 @@
-import test, { Page, expect, request } from 'playwright/test';
+import test, { expect } from 'playwright/test';
 
 import { baseUrl } from './defaults.js';
 import { doQuickLogin } from './login.js';