From 7e9d2f79ab247f459b483922a553744bb9bf69cd Mon Sep 17 00:00:00 2001 From: Matthias Mair Date: Tue, 30 Apr 2024 11:24:52 +0200 Subject: [PATCH] [PUI] More style fixes (#7142) * fix interface names * use Readonly for props * fix typescript:S3863 * require hashes in package installer too --- contrib/packager.io/functions.sh | 2 +- .../src/components/buttons/AddItemButton.tsx | 2 +- .../src/components/buttons/SplitButton.tsx | 2 +- .../src/components/details/Details.tsx | 10 ++++----- .../src/components/details/DetailsBadge.tsx | 2 +- .../src/components/details/DetailsImage.tsx | 2 +- .../editors/TemplateEditor/TemplateEditor.tsx | 2 +- .../components/forms/fields/ApiFormField.tsx | 3 +-- .../components/forms/fields/ChoiceField.tsx | 3 +-- .../forms/fields/RelatedModelField.tsx | 3 +-- .../src/components/images/Thumbnail.tsx | 4 +--- src/frontend/src/components/items/DocInfo.tsx | 7 +++++- .../src/components/items/DocTooltip.tsx | 2 +- .../src/components/items/ProgressBar.tsx | 2 +- .../src/components/items/TitleWithDoc.tsx | 2 +- .../src/components/nav/DetailDrawer.tsx | 4 ++-- .../src/components/nav/NotificationDrawer.tsx | 7 +++--- .../src/components/nav/PageDetail.tsx | 22 ++++++++++--------- .../src/components/nav/PanelGroup.tsx | 13 ++++++----- .../src/components/nav/SearchDrawer.tsx | 2 +- .../src/components/nav/SettingsHeader.tsx | 18 ++++++++------- src/frontend/src/components/render/Build.tsx | 10 ++++++--- .../src/components/render/Company.tsx | 22 ++++++++++++------- .../src/components/render/Generic.tsx | 6 +++-- .../src/components/render/Instance.tsx | 9 +++++--- src/frontend/src/components/render/Order.tsx | 14 +++++++----- src/frontend/src/components/render/Part.tsx | 10 ++++++--- .../src/components/render/StatusRenderer.tsx | 6 ++--- src/frontend/src/components/render/Stock.tsx | 10 ++++----- src/frontend/src/components/render/User.tsx | 10 ++++++--- .../src/components/widgets/MarkdownEditor.tsx | 3 +-- .../src/components/widgets/WidgetLayout.tsx | 3 ++- src/frontend/src/defaults/formatters.tsx | 17 ++++++++------ src/frontend/src/functions/icons.tsx | 2 +- src/frontend/src/pages/Index/Playground.tsx | 12 +++++++--- src/frontend/src/pages/Index/Scan.tsx | 15 +++++++------ .../src/pages/company/CompanyDetail.tsx | 5 ++--- src/frontend/src/tables/ColumnSelect.tsx | 3 +-- src/frontend/src/tables/DownloadAction.tsx | 3 +-- src/frontend/src/tables/InvenTreeTable.tsx | 11 +++++++--- src/frontend/src/tables/RowActions.tsx | 5 ++--- .../src/tables/general/AttachmentTable.tsx | 3 +-- .../src/tables/part/PartThumbTable.tsx | 6 ++++- .../src/tables/plugin/PluginListTable.tsx | 2 +- 44 files changed, 174 insertions(+), 127 deletions(-) diff --git a/contrib/packager.io/functions.sh b/contrib/packager.io/functions.sh index d150ed75b8..8f7f47cc66 100755 --- a/contrib/packager.io/functions.sh +++ b/contrib/packager.io/functions.sh @@ -90,7 +90,7 @@ function detect_envs() { echo "# Using existing config file: ${INVENTREE_CONFIG_FILE}" # Install parser - pip install -r ${APP_HOME}/.github/requirements.txt -q + pip install --require-hashes -r ${APP_HOME}/.github/requirements.txt -q # Load config local CONF=$(cat ${INVENTREE_CONFIG_FILE} | jc --yaml) diff --git a/src/frontend/src/components/buttons/AddItemButton.tsx b/src/frontend/src/components/buttons/AddItemButton.tsx index a9af3de8f5..adece8195f 100644 --- a/src/frontend/src/components/buttons/AddItemButton.tsx +++ b/src/frontend/src/components/buttons/AddItemButton.tsx @@ -5,6 +5,6 @@ import { ActionButton, ActionButtonProps } from './ActionButton'; /** * A generic icon button which is used to add or create a new item */ -export function AddItemButton(props: ActionButtonProps) { +export function AddItemButton(props: Readonly) { return } />; } diff --git a/src/frontend/src/components/buttons/SplitButton.tsx b/src/frontend/src/components/buttons/SplitButton.tsx index a156e28f3b..1037cbd219 100644 --- a/src/frontend/src/components/buttons/SplitButton.tsx +++ b/src/frontend/src/components/buttons/SplitButton.tsx @@ -52,7 +52,7 @@ export function SplitButton({ selected, setSelected, loading -}: SplitButtonProps) { +}: Readonly) { const [current, setCurrent] = useState(defaultSelected); const { classes } = useStyles(); diff --git a/src/frontend/src/components/details/Details.tsx b/src/frontend/src/components/details/Details.tsx index fddfce0e7d..ab9872afdd 100644 --- a/src/frontend/src/components/details/Details.tsx +++ b/src/frontend/src/components/details/Details.tsx @@ -180,7 +180,7 @@ function NameBadge({ pk, type }: { pk: string | number; type: BadgeType }) { * If owner is defined, only renders a badge * If user is defined, a badge is rendered in addition to main value */ -function TableStringValue(props: FieldProps) { +function TableStringValue(props: Readonly) { let value = props?.field_value; if (value === undefined) { @@ -217,11 +217,11 @@ function TableStringValue(props: FieldProps) { ); } -function BooleanValue(props: FieldProps) { +function BooleanValue(props: Readonly) { return ; } -function TableAnchorValue(props: FieldProps) { +function TableAnchorValue(props: Readonly) { if (props.field_data.external) { return ( ) { return ( ) { return ( ); diff --git a/src/frontend/src/components/details/DetailsBadge.tsx b/src/frontend/src/components/details/DetailsBadge.tsx index 9aeeef67f7..8265955896 100644 --- a/src/frontend/src/components/details/DetailsBadge.tsx +++ b/src/frontend/src/components/details/DetailsBadge.tsx @@ -7,7 +7,7 @@ export type DetailsBadgeProps = { visible?: boolean; }; -export default function DetailsBadge(props: DetailsBadgeProps) { +export default function DetailsBadge(props: Readonly) { if (props.visible == false) { return null; } diff --git a/src/frontend/src/components/details/DetailsImage.tsx b/src/frontend/src/components/details/DetailsImage.tsx index dc0dd6b808..3792208d5e 100644 --- a/src/frontend/src/components/details/DetailsImage.tsx +++ b/src/frontend/src/components/details/DetailsImage.tsx @@ -322,7 +322,7 @@ function ImageActionButtons({ /** * Renders an image with action buttons for display on Details panels */ -export function DetailsImage(props: DetailImageProps) { +export function DetailsImage(props: Readonly) { // Displays a group of ActionButtons on hover const { hovered, ref } = useHover(); const [img, setImg] = useState(props.src ?? backup_image); diff --git a/src/frontend/src/components/editors/TemplateEditor/TemplateEditor.tsx b/src/frontend/src/components/editors/TemplateEditor/TemplateEditor.tsx index 6fd8d1dab9..1c5af32e48 100644 --- a/src/frontend/src/components/editors/TemplateEditor/TemplateEditor.tsx +++ b/src/frontend/src/components/editors/TemplateEditor/TemplateEditor.tsx @@ -87,7 +87,7 @@ type TemplateEditorProps = { template: TemplateI; }; -export function TemplateEditor(props: TemplateEditorProps) { +export function TemplateEditor(props: Readonly) { const { downloadUrl, editors, previewAreas, preview } = props; const editorRef = useRef(); const previewRef = useRef(); diff --git a/src/frontend/src/components/forms/fields/ApiFormField.tsx b/src/frontend/src/components/forms/fields/ApiFormField.tsx index 9d098f0abb..ae6d57a3e0 100644 --- a/src/frontend/src/components/forms/fields/ApiFormField.tsx +++ b/src/frontend/src/components/forms/fields/ApiFormField.tsx @@ -10,8 +10,7 @@ import { import { UseFormReturnType } from '@mantine/form'; import { useId } from '@mantine/hooks'; import { IconX } from '@tabler/icons-react'; -import { ReactNode, useCallback, useEffect } from 'react'; -import { useMemo } from 'react'; +import { ReactNode, useCallback, useEffect, useMemo } from 'react'; import { Control, FieldValues, useController } from 'react-hook-form'; import { ModelType } from '../../../enums/ModelType'; diff --git a/src/frontend/src/components/forms/fields/ChoiceField.tsx b/src/frontend/src/components/forms/fields/ChoiceField.tsx index d0137d9d3b..36554c2c3d 100644 --- a/src/frontend/src/components/forms/fields/ChoiceField.tsx +++ b/src/frontend/src/components/forms/fields/ChoiceField.tsx @@ -1,7 +1,6 @@ import { Select } from '@mantine/core'; import { useId } from '@mantine/hooks'; -import { useCallback } from 'react'; -import { useMemo } from 'react'; +import { useCallback, useMemo } from 'react'; import { FieldValues, UseControllerReturn } from 'react-hook-form'; import { ApiFormFieldType } from './ApiFormField'; diff --git a/src/frontend/src/components/forms/fields/RelatedModelField.tsx b/src/frontend/src/components/forms/fields/RelatedModelField.tsx index 0f615765b2..d02bfcf321 100644 --- a/src/frontend/src/components/forms/fields/RelatedModelField.tsx +++ b/src/frontend/src/components/forms/fields/RelatedModelField.tsx @@ -1,7 +1,6 @@ import { t } from '@lingui/macro'; import { Input, useMantineTheme } from '@mantine/core'; -import { useDebouncedValue } from '@mantine/hooks'; -import { useId } from '@mantine/hooks'; +import { useDebouncedValue, useId } from '@mantine/hooks'; import { useQuery } from '@tanstack/react-query'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { diff --git a/src/frontend/src/components/images/Thumbnail.tsx b/src/frontend/src/components/images/Thumbnail.tsx index a7a8f0a984..33f1628d68 100644 --- a/src/frontend/src/components/images/Thumbnail.tsx +++ b/src/frontend/src/components/images/Thumbnail.tsx @@ -1,7 +1,5 @@ import { t } from '@lingui/macro'; -import { Anchor, Skeleton } from '@mantine/core'; -import { Group } from '@mantine/core'; -import { Text } from '@mantine/core'; +import { Anchor, Group, Skeleton, Text } from '@mantine/core'; import { ReactNode, useMemo } from 'react'; import { ApiImage } from './ApiImage'; diff --git a/src/frontend/src/components/items/DocInfo.tsx b/src/frontend/src/components/items/DocInfo.tsx index d9012d0716..5b5d54d891 100644 --- a/src/frontend/src/components/items/DocInfo.tsx +++ b/src/frontend/src/components/items/DocInfo.tsx @@ -6,7 +6,12 @@ interface DocInfoProps extends BaseDocProps { size?: number; } -export function DocInfo({ size = 18, text, detail, link }: DocInfoProps) { +export function DocInfo({ + size = 18, + text, + detail, + link +}: Readonly) { return ( diff --git a/src/frontend/src/components/items/DocTooltip.tsx b/src/frontend/src/components/items/DocTooltip.tsx index 80b0d5660d..cd8d520efc 100644 --- a/src/frontend/src/components/items/DocTooltip.tsx +++ b/src/frontend/src/components/items/DocTooltip.tsx @@ -21,7 +21,7 @@ export function DocTooltip({ detail, link, docchildren -}: DocTooltipProps) { +}: Readonly) { const { classes } = InvenTreeStyle(); return ( diff --git a/src/frontend/src/components/items/ProgressBar.tsx b/src/frontend/src/components/items/ProgressBar.tsx index 2369da7faa..40bb9d3034 100644 --- a/src/frontend/src/components/items/ProgressBar.tsx +++ b/src/frontend/src/components/items/ProgressBar.tsx @@ -13,7 +13,7 @@ export type ProgressBarProps = { * A progress bar element, built on mantine.Progress * The color of the bar is determined based on the value */ -export function ProgressBar(props: ProgressBarProps) { +export function ProgressBar(props: Readonly) { const progress = useMemo(() => { let maximum = props.maximum ?? 100; let value = Math.max(props.value, 0); diff --git a/src/frontend/src/components/items/TitleWithDoc.tsx b/src/frontend/src/components/items/TitleWithDoc.tsx index d91c7fac97..89ca569e61 100644 --- a/src/frontend/src/components/items/TitleWithDoc.tsx +++ b/src/frontend/src/components/items/TitleWithDoc.tsx @@ -14,7 +14,7 @@ export function TitleWithDoc({ size, text, detail -}: DocTitleProps) { +}: Readonly) { return ( diff --git a/src/frontend/src/components/nav/DetailDrawer.tsx b/src/frontend/src/components/nav/DetailDrawer.tsx index 91f7b3e734..892df54a6b 100644 --- a/src/frontend/src/components/nav/DetailDrawer.tsx +++ b/src/frontend/src/components/nav/DetailDrawer.tsx @@ -43,7 +43,7 @@ function DetailDrawerComponent({ size, closeOnEscape = true, renderContent -}: DrawerProps) { +}: Readonly<DrawerProps>) { const navigate = useNavigate(); const { id } = useParams(); const { classes } = useStyles(); @@ -95,7 +95,7 @@ function DetailDrawerComponent({ ); } -export function DetailDrawer(props: DrawerProps) { +export function DetailDrawer(props: Readonly<DrawerProps>) { return ( <Routes> <Route path=":id?/" element={<DetailDrawerComponent {...props} />} /> diff --git a/src/frontend/src/components/nav/NotificationDrawer.tsx b/src/frontend/src/components/nav/NotificationDrawer.tsx index fdac2ec9f5..9e4e07d894 100644 --- a/src/frontend/src/components/nav/NotificationDrawer.tsx +++ b/src/frontend/src/components/nav/NotificationDrawer.tsx @@ -4,15 +4,16 @@ import { Alert, Divider, Drawer, + Group, LoadingOverlay, Space, + Stack, + Text, Tooltip } from '@mantine/core'; -import { Group, Stack, Text } from '@mantine/core'; import { IconBellCheck, IconBellPlus } from '@tabler/icons-react'; import { useQuery } from '@tanstack/react-query'; -import { useNavigate } from 'react-router-dom'; -import { Link } from 'react-router-dom'; +import { Link, useNavigate } from 'react-router-dom'; import { api } from '../../App'; import { ApiEndpoints } from '../../enums/ApiEndpoints'; diff --git a/src/frontend/src/components/nav/PageDetail.tsx b/src/frontend/src/components/nav/PageDetail.tsx index 9450e733c1..d8629d5498 100644 --- a/src/frontend/src/components/nav/PageDetail.tsx +++ b/src/frontend/src/components/nav/PageDetail.tsx @@ -5,6 +5,17 @@ import { ApiImage } from '../images/ApiImage'; import { StylishText } from '../items/StylishText'; import { Breadcrumb, BreadcrumbList } from './BreadcrumbList'; +interface PageDetailInterface { + title?: string; + subtitle?: string; + imageUrl?: string; + detail?: ReactNode; + badges?: ReactNode[]; + breadcrumbs?: Breadcrumb[]; + breadcrumbAction?: () => void; + actions?: ReactNode[]; +} + /** * Construct a "standard" page detail for common display between pages. * @@ -20,16 +31,7 @@ export function PageDetail({ breadcrumbs, breadcrumbAction, actions -}: { - title?: string; - subtitle?: string; - imageUrl?: string; - detail?: ReactNode; - badges?: ReactNode[]; - breadcrumbs?: Breadcrumb[]; - breadcrumbAction?: () => void; - actions?: ReactNode[]; -}) { +}: Readonly<PageDetailInterface>) { return ( <Stack spacing="xs"> {breadcrumbs && breadcrumbs.length > 0 && ( diff --git a/src/frontend/src/components/nav/PanelGroup.tsx b/src/frontend/src/components/nav/PanelGroup.tsx index 17d959d5cc..687d0f1b32 100644 --- a/src/frontend/src/components/nav/PanelGroup.tsx +++ b/src/frontend/src/components/nav/PanelGroup.tsx @@ -10,8 +10,7 @@ import { IconLayoutSidebarLeftCollapse, IconLayoutSidebarRightCollapse } from '@tabler/icons-react'; -import { ReactNode, useMemo } from 'react'; -import { useEffect, useState } from 'react'; +import { ReactNode, useEffect, useMemo, useState } from 'react'; import { Navigate, Route, @@ -51,7 +50,7 @@ function BasePanelGroup({ onPanelChange, selectedPanel, collapsible = true -}: PanelProps): ReactNode { +}: Readonly<PanelProps>): ReactNode { const navigate = useNavigate(); const { panel } = useParams(); @@ -178,7 +177,11 @@ function BasePanelGroup({ ); } -function IndexPanelComponent({ pageKey, selectedPanel, panels }: PanelProps) { +function IndexPanelComponent({ + pageKey, + selectedPanel, + panels +}: Readonly<PanelProps>) { const lastUsedPanel = useLocalState((state) => { const panelName = selectedPanel || state.lastUsedPanels[pageKey] || panels[0]?.name; @@ -203,7 +206,7 @@ function IndexPanelComponent({ pageKey, selectedPanel, panels }: PanelProps) { * @param onPanelChange - Callback when the active panel changes * @param collapsible - If true, the panel group can be collapsed (defaults to true) */ -export function PanelGroup(props: PanelProps) { +export function PanelGroup(props: Readonly<PanelProps>) { return ( <Routes> <Route index element={<IndexPanelComponent {...props} />} /> diff --git a/src/frontend/src/components/nav/SearchDrawer.tsx b/src/frontend/src/components/nav/SearchDrawer.tsx index b2ae9f0bb5..d6b491f926 100644 --- a/src/frontend/src/components/nav/SearchDrawer.tsx +++ b/src/frontend/src/components/nav/SearchDrawer.tsx @@ -8,6 +8,7 @@ import { Divider, Drawer, Group, + Loader, Menu, Paper, Space, @@ -15,7 +16,6 @@ import { Text, TextInput } from '@mantine/core'; -import { Loader } from '@mantine/core'; import { useDebouncedValue } from '@mantine/hooks'; import { IconAlertCircle, diff --git a/src/frontend/src/components/nav/SettingsHeader.tsx b/src/frontend/src/components/nav/SettingsHeader.tsx index d8e525d14f..8b37713ba8 100644 --- a/src/frontend/src/components/nav/SettingsHeader.tsx +++ b/src/frontend/src/components/nav/SettingsHeader.tsx @@ -3,6 +3,15 @@ import { IconSwitch } from '@tabler/icons-react'; import { ReactNode } from 'react'; import { Link } from 'react-router-dom'; +interface SettingsHeaderInterface { + title: string | ReactNode; + shorthand?: string; + subtitle?: string | ReactNode; + switch_condition?: boolean; + switch_text?: string | ReactNode; + switch_link?: string; +} + /** * Construct a settings page header with interlinks to one other settings page */ @@ -13,14 +22,7 @@ export function SettingsHeader({ switch_condition = true, switch_text, switch_link -}: { - title: string | ReactNode; - shorthand?: string; - subtitle?: string | ReactNode; - switch_condition?: boolean; - switch_text?: string | ReactNode; - switch_link?: string; -}) { +}: Readonly<SettingsHeaderInterface>) { return ( <Stack spacing="0" ml={'sm'}> <Group> diff --git a/src/frontend/src/components/render/Build.tsx b/src/frontend/src/components/render/Build.tsx index fb7f3e76a3..2f40f912e4 100644 --- a/src/frontend/src/components/render/Build.tsx +++ b/src/frontend/src/components/render/Build.tsx @@ -1,13 +1,15 @@ import { ReactNode } from 'react'; import { ModelType } from '../../enums/ModelType'; -import { RenderInlineModel } from './Instance'; +import { InstanceRenderInterface, RenderInlineModel } from './Instance'; import { StatusRenderer } from './StatusRenderer'; /** * Inline rendering of a single BuildOrder instance */ -export function RenderBuildOrder({ instance }: { instance: any }): ReactNode { +export function RenderBuildOrder({ + instance +}: Readonly<InstanceRenderInterface>): ReactNode { return ( <RenderInlineModel primary={instance.reference} @@ -24,7 +26,9 @@ export function RenderBuildOrder({ instance }: { instance: any }): ReactNode { /* * Inline rendering of a single BuildLine instance */ -export function RenderBuildLine({ instance }: { instance: any }): ReactNode { +export function RenderBuildLine({ + instance +}: Readonly<InstanceRenderInterface>): ReactNode { return ( <RenderInlineModel primary={instance.part_detail.full_name} diff --git a/src/frontend/src/components/render/Company.tsx b/src/frontend/src/components/render/Company.tsx index 6a15a6a515..9dce6888d2 100644 --- a/src/frontend/src/components/render/Company.tsx +++ b/src/frontend/src/components/render/Company.tsx @@ -1,11 +1,13 @@ import { ReactNode } from 'react'; -import { RenderInlineModel } from './Instance'; +import { InstanceRenderInterface, RenderInlineModel } from './Instance'; /** * Inline rendering of a single Address instance */ -export function RenderAddress({ instance }: { instance: any }): ReactNode { +export function RenderAddress({ + instance +}: Readonly<InstanceRenderInterface>): ReactNode { let text = [ instance.country, instance.postal_code, @@ -23,7 +25,9 @@ export function RenderAddress({ instance }: { instance: any }): ReactNode { /** * Inline rendering of a single Company instance */ -export function RenderCompany({ instance }: { instance: any }): ReactNode { +export function RenderCompany({ + instance +}: Readonly<InstanceRenderInterface>): ReactNode { // TODO: Handle URL return ( @@ -38,14 +42,18 @@ export function RenderCompany({ instance }: { instance: any }): ReactNode { /** * Inline rendering of a single Contact instance */ -export function RenderContact({ instance }: { instance: any }): ReactNode { +export function RenderContact({ + instance +}: Readonly<InstanceRenderInterface>): ReactNode { return <RenderInlineModel primary={instance.name} />; } /** * Inline rendering of a single SupplierPart instance */ -export function RenderSupplierPart({ instance }: { instance: any }): ReactNode { +export function RenderSupplierPart({ + instance +}: Readonly<InstanceRenderInterface>): ReactNode { // TODO: handle URL let supplier = instance.supplier_detail ?? {}; @@ -66,9 +74,7 @@ export function RenderSupplierPart({ instance }: { instance: any }): ReactNode { */ export function RenderManufacturerPart({ instance -}: { - instance: any; -}): ReactNode { +}: Readonly<InstanceRenderInterface>): ReactNode { let part = instance.part_detail ?? {}; let manufacturer = instance.manufacturer_detail ?? {}; diff --git a/src/frontend/src/components/render/Generic.tsx b/src/frontend/src/components/render/Generic.tsx index fb616aa692..9f9a15aa33 100644 --- a/src/frontend/src/components/render/Generic.tsx +++ b/src/frontend/src/components/render/Generic.tsx @@ -1,8 +1,10 @@ import { ReactNode } from 'react'; -import { RenderInlineModel } from './Instance'; +import { InstanceRenderInterface, RenderInlineModel } from './Instance'; -export function RenderProjectCode({ instance }: { instance: any }): ReactNode { +export function RenderProjectCode({ + instance +}: Readonly<InstanceRenderInterface>): ReactNode { return ( instance && ( <RenderInlineModel diff --git a/src/frontend/src/components/render/Instance.tsx b/src/frontend/src/components/render/Instance.tsx index 15b348137f..64ff4e7a0f 100644 --- a/src/frontend/src/components/render/Instance.tsx +++ b/src/frontend/src/components/render/Instance.tsx @@ -1,6 +1,5 @@ import { t } from '@lingui/macro'; -import { Alert, Space } from '@mantine/core'; -import { Group, Text } from '@mantine/core'; +import { Alert, Group, Space, Text } from '@mantine/core'; import { ReactNode } from 'react'; import { ModelType } from '../../enums/ModelType'; @@ -38,7 +37,7 @@ type EnumDictionary<T extends string | symbol | number, U> = { */ const RendererLookup: EnumDictionary< ModelType, - (props: { instance: any }) => ReactNode + (props: Readonly<InstanceRenderInterface>) => ReactNode > = { [ModelType.address]: RenderAddress, [ModelType.build]: RenderBuildOrder, @@ -140,3 +139,7 @@ export function UnknownRenderer({ </Alert> ); } + +export interface InstanceRenderInterface { + instance: any; +} diff --git a/src/frontend/src/components/render/Order.tsx b/src/frontend/src/components/render/Order.tsx index df22461b30..63cdd581e5 100644 --- a/src/frontend/src/components/render/Order.tsx +++ b/src/frontend/src/components/render/Order.tsx @@ -2,7 +2,7 @@ import { t } from '@lingui/macro'; import { ReactNode } from 'react'; import { ModelType } from '../../enums/ModelType'; -import { RenderInlineModel } from './Instance'; +import { InstanceRenderInterface, RenderInlineModel } from './Instance'; import { StatusRenderer } from './StatusRenderer'; /** @@ -10,9 +10,7 @@ import { StatusRenderer } from './StatusRenderer'; */ export function RenderPurchaseOrder({ instance -}: { - instance: any; -}): ReactNode { +}: Readonly<InstanceRenderInterface>): ReactNode { let supplier = instance.supplier_detail || {}; // TODO: Handle URL @@ -32,7 +30,9 @@ export function RenderPurchaseOrder({ /** * Inline rendering of a single ReturnOrder instance */ -export function RenderReturnOrder({ instance }: { instance: any }): ReactNode { +export function RenderReturnOrder({ + instance +}: Readonly<InstanceRenderInterface>): ReactNode { let customer = instance.customer_detail || {}; return ( @@ -51,7 +51,9 @@ export function RenderReturnOrder({ instance }: { instance: any }): ReactNode { /** * Inline rendering of a single SalesOrder instance */ -export function RenderSalesOrder({ instance }: { instance: any }): ReactNode { +export function RenderSalesOrder({ + instance +}: Readonly<InstanceRenderInterface>): ReactNode { let customer = instance.customer_detail || {}; // TODO: Handle URL diff --git a/src/frontend/src/components/render/Part.tsx b/src/frontend/src/components/render/Part.tsx index 7a3b8a0716..c2e0ed382b 100644 --- a/src/frontend/src/components/render/Part.tsx +++ b/src/frontend/src/components/render/Part.tsx @@ -1,12 +1,14 @@ import { t } from '@lingui/macro'; import { ReactNode } from 'react'; -import { RenderInlineModel } from './Instance'; +import { InstanceRenderInterface, RenderInlineModel } from './Instance'; /** * Inline rendering of a single Part instance */ -export function RenderPart({ instance }: { instance: any }): ReactNode { +export function RenderPart({ + instance +}: Readonly<InstanceRenderInterface>): ReactNode { const stock = t`Stock` + `: ${instance.in_stock}`; return ( @@ -22,7 +24,9 @@ export function RenderPart({ instance }: { instance: any }): ReactNode { /** * Inline rendering of a PartCategory instance */ -export function RenderPartCategory({ instance }: { instance: any }): ReactNode { +export function RenderPartCategory({ + instance +}: Readonly<InstanceRenderInterface>): ReactNode { // TODO: Handle URL let lvl = '-'.repeat(instance.level || 0); diff --git a/src/frontend/src/components/render/StatusRenderer.tsx b/src/frontend/src/components/render/StatusRenderer.tsx index 78fb3f9414..5c284533dc 100644 --- a/src/frontend/src/components/render/StatusRenderer.tsx +++ b/src/frontend/src/components/render/StatusRenderer.tsx @@ -14,7 +14,7 @@ export interface StatusCodeListInterface { [key: string]: StatusCodeInterface; } -interface renderStatusLabelOptionsInterface { +interface RenderStatusLabelOptionsInterface { size?: MantineSize; } @@ -24,7 +24,7 @@ interface renderStatusLabelOptionsInterface { function renderStatusLabel( key: string | number, codes: StatusCodeListInterface, - options: renderStatusLabelOptionsInterface = {} + options: RenderStatusLabelOptionsInterface = {} ) { let text = null; let color = null; @@ -70,7 +70,7 @@ export const StatusRenderer = ({ }: { status: string | number; type: ModelType | string; - options?: renderStatusLabelOptionsInterface; + options?: RenderStatusLabelOptionsInterface; }) => { const statusCodeList = useGlobalStatusState.getState().status; diff --git a/src/frontend/src/components/render/Stock.tsx b/src/frontend/src/components/render/Stock.tsx index 7738861e98..1f8a60b995 100644 --- a/src/frontend/src/components/render/Stock.tsx +++ b/src/frontend/src/components/render/Stock.tsx @@ -1,16 +1,14 @@ import { t } from '@lingui/macro'; import { ReactNode } from 'react'; -import { RenderInlineModel } from './Instance'; +import { InstanceRenderInterface, RenderInlineModel } from './Instance'; /** * Inline rendering of a single StockLocation instance */ export function RenderStockLocation({ instance -}: { - instance: any; -}): ReactNode { +}: Readonly<InstanceRenderInterface>): ReactNode { return ( <RenderInlineModel primary={instance.name} @@ -19,7 +17,9 @@ export function RenderStockLocation({ ); } -export function RenderStockItem({ instance }: { instance: any }): ReactNode { +export function RenderStockItem({ + instance +}: Readonly<InstanceRenderInterface>): ReactNode { let quantity_string = ''; if (instance?.serial !== null && instance?.serial !== undefined) { diff --git a/src/frontend/src/components/render/User.tsx b/src/frontend/src/components/render/User.tsx index 85c508cb70..005351c0d6 100644 --- a/src/frontend/src/components/render/User.tsx +++ b/src/frontend/src/components/render/User.tsx @@ -1,9 +1,11 @@ import { IconUser, IconUsersGroup } from '@tabler/icons-react'; import { ReactNode } from 'react'; -import { RenderInlineModel } from './Instance'; +import { InstanceRenderInterface, RenderInlineModel } from './Instance'; -export function RenderOwner({ instance }: { instance: any }): ReactNode { +export function RenderOwner({ + instance +}: Readonly<InstanceRenderInterface>): ReactNode { return ( instance && ( <RenderInlineModel @@ -14,7 +16,9 @@ export function RenderOwner({ instance }: { instance: any }): ReactNode { ); } -export function RenderUser({ instance }: { instance: any }): ReactNode { +export function RenderUser({ + instance +}: Readonly<InstanceRenderInterface>): ReactNode { return ( instance && ( <RenderInlineModel diff --git a/src/frontend/src/components/widgets/MarkdownEditor.tsx b/src/frontend/src/components/widgets/MarkdownEditor.tsx index ee458206a5..02af7cf86f 100644 --- a/src/frontend/src/components/widgets/MarkdownEditor.tsx +++ b/src/frontend/src/components/widgets/MarkdownEditor.tsx @@ -2,8 +2,7 @@ import { t } from '@lingui/macro'; import { showNotification } from '@mantine/notifications'; import EasyMDE from 'easymde'; import 'easymde/dist/easymde.min.css'; -import { ReactNode, useCallback, useMemo } from 'react'; -import { useState } from 'react'; +import { ReactNode, useCallback, useMemo, useState } from 'react'; import SimpleMDE from 'react-simplemde-editor'; import { api } from '../../App'; diff --git a/src/frontend/src/components/widgets/WidgetLayout.tsx b/src/frontend/src/components/widgets/WidgetLayout.tsx index 7549592193..1270a87fd0 100644 --- a/src/frontend/src/components/widgets/WidgetLayout.tsx +++ b/src/frontend/src/components/widgets/WidgetLayout.tsx @@ -4,9 +4,10 @@ import { Container, Group, Indicator, + Menu, + Text, createStyles } from '@mantine/core'; -import { Menu, Text } from '@mantine/core'; import { useDisclosure, useHotkeys } from '@mantine/hooks'; import { IconArrowBackUpDouble, diff --git a/src/frontend/src/defaults/formatters.tsx b/src/frontend/src/defaults/formatters.tsx index 563a67fdaf..242ed31dd2 100644 --- a/src/frontend/src/defaults/formatters.tsx +++ b/src/frontend/src/defaults/formatters.tsx @@ -5,13 +5,13 @@ import { useUserSettingsState } from '../states/SettingsState'; -interface formatDecmimalOptionsType { +interface FormatDecmimalOptionsInterface { digits?: number; minDigits?: number; locale?: string; } -interface formatCurrencyOptionsType { +interface FormatCurrencyOptionsInterface { digits?: number; minDigits?: number; currency?: string; @@ -21,7 +21,7 @@ interface formatCurrencyOptionsType { export function formatDecimal( value: number | null | undefined, - options: formatDecmimalOptionsType = {} + options: FormatDecmimalOptionsInterface = {} ) { let locale = options.locale || navigator.language || 'en-US'; @@ -44,7 +44,7 @@ export function formatDecimal( */ export function formatCurrency( value: number | string | null | undefined, - options: formatCurrencyOptionsType = {} + options: FormatCurrencyOptionsInterface = {} ) { if (value == null || value == undefined) { return null; @@ -89,7 +89,7 @@ export function formatCurrency( export function formatPriceRange( minValue: number | null, maxValue: number | null, - options: formatCurrencyOptionsType = {} + options: FormatCurrencyOptionsInterface = {} ) { // If neither values are provided, return a dash if (minValue == null && maxValue == null) { @@ -116,7 +116,7 @@ export function formatPriceRange( )}`; } -interface renderDateOptionsType { +interface RenderDateOptionsInterface { showTime?: boolean; showSeconds?: boolean; } @@ -127,7 +127,10 @@ interface renderDateOptionsType { * The provided "date" variable is a string, nominally ISO format e.g. 2022-02-22 * The user-configured setting DATE_DISPLAY_FORMAT determines how the date should be displayed. */ -export function renderDate(date: string, options: renderDateOptionsType = {}) { +export function renderDate( + date: string, + options: RenderDateOptionsInterface = {} +) { if (!date) { return '-'; } diff --git a/src/frontend/src/functions/icons.tsx b/src/frontend/src/functions/icons.tsx index 82e6816abf..74f18dc7b3 100644 --- a/src/frontend/src/functions/icons.tsx +++ b/src/frontend/src/functions/icons.tsx @@ -217,7 +217,7 @@ type InvenTreeIconProps = { iconProps?: TablerIconProps; }; -export function InvenTreeIcon(props: InvenTreeIconProps) { +export function InvenTreeIcon(props: Readonly<InvenTreeIconProps>) { let Icon: React.ForwardRefExoticComponent<React.RefAttributes<any>>; if (props.icon in icons) { diff --git a/src/frontend/src/pages/Index/Playground.tsx b/src/frontend/src/pages/Index/Playground.tsx index bdeabf7ef8..a1c9d7c21b 100644 --- a/src/frontend/src/pages/Index/Playground.tsx +++ b/src/frontend/src/pages/Index/Playground.tsx @@ -1,7 +1,13 @@ import { Trans } from '@lingui/macro'; -import { Button, Card, Stack, TextInput } from '@mantine/core'; -import { Group, Text } from '@mantine/core'; -import { Accordion } from '@mantine/core'; +import { + Accordion, + Button, + Card, + Group, + Stack, + Text, + TextInput +} from '@mantine/core'; import { spotlight } from '@mantine/spotlight'; import { IconAlien } from '@tabler/icons-react'; import { ReactNode, useMemo, useState } from 'react'; diff --git a/src/frontend/src/pages/Index/Scan.tsx b/src/frontend/src/pages/Index/Scan.tsx index d525000e70..82c1e23637 100644 --- a/src/frontend/src/pages/Index/Scan.tsx +++ b/src/frontend/src/pages/Index/Scan.tsx @@ -1,9 +1,11 @@ import { Trans, t } from '@lingui/macro'; import { ActionIcon, + Badge, Button, Checkbox, Col, + Container, Grid, Group, ScrollArea, @@ -15,15 +17,14 @@ import { TextInput, rem } from '@mantine/core'; -import { Badge, Container } from '@mantine/core'; import { getHotkeyHandler, randomId, + useDocumentVisibility, useFullscreen, useListState, useLocalStorage } from '@mantine/hooks'; -import { useDocumentVisibility } from '@mantine/hooks'; import { showNotification } from '@mantine/notifications'; import { IconAlertCircle, @@ -36,9 +37,9 @@ import { IconPlus, IconQuestionMark, IconSearch, - IconTrash + IconTrash, + IconX } from '@tabler/icons-react'; -import { IconX } from '@tabler/icons-react'; import { Html5Qrcode } from 'html5-qrcode'; import { CameraDevice } from 'html5-qrcode/camera/core'; import { useEffect, useState } from 'react'; @@ -470,11 +471,11 @@ enum InputMethod { ImageBarcode = 'imageBarcode' } -interface inputProps { +interface ScanInputInterface { action: (items: ScanItem[]) => void; } -function InputManual({ action }: inputProps) { +function InputManual({ action }: Readonly<ScanInputInterface>) { const [value, setValue] = useState<string>(''); function btnAddItem() { @@ -526,7 +527,7 @@ function InputManual({ action }: inputProps) { } /* Input that uses QR code detection from images */ -function InputImageBarcode({ action }: inputProps) { +function InputImageBarcode({ action }: Readonly<ScanInputInterface>) { const [qrCodeScanner, setQrCodeScanner] = useState<Html5Qrcode | null>(null); const [camId, setCamId] = useLocalStorage<CameraDevice | null>({ key: 'camId', diff --git a/src/frontend/src/pages/company/CompanyDetail.tsx b/src/frontend/src/pages/company/CompanyDetail.tsx index 5244a3f648..cbf02088b4 100644 --- a/src/frontend/src/pages/company/CompanyDetail.tsx +++ b/src/frontend/src/pages/company/CompanyDetail.tsx @@ -29,8 +29,7 @@ import { } from '../../components/items/ActionDropdown'; import { Breadcrumb } from '../../components/nav/BreadcrumbList'; import { PageDetail } from '../../components/nav/PageDetail'; -import { PanelGroup } from '../../components/nav/PanelGroup'; -import { PanelType } from '../../components/nav/PanelGroup'; +import { PanelGroup, PanelType } from '../../components/nav/PanelGroup'; import { NotesEditor } from '../../components/widgets/MarkdownEditor'; import { ApiEndpoints } from '../../enums/ApiEndpoints'; import { UserRoles } from '../../enums/Roles'; @@ -57,7 +56,7 @@ export type CompanyDetailProps = { /** * Detail view for a single company instance */ -export default function CompanyDetail(props: CompanyDetailProps) { +export default function CompanyDetail(props: Readonly<CompanyDetailProps>) { const { id } = useParams(); const user = useUserState(); diff --git a/src/frontend/src/tables/ColumnSelect.tsx b/src/frontend/src/tables/ColumnSelect.tsx index 4cf66fe58f..bec95cb426 100644 --- a/src/frontend/src/tables/ColumnSelect.tsx +++ b/src/frontend/src/tables/ColumnSelect.tsx @@ -1,6 +1,5 @@ import { t } from '@lingui/macro'; -import { Checkbox, Menu, Tooltip } from '@mantine/core'; -import { ActionIcon } from '@mantine/core'; +import { ActionIcon, Checkbox, Menu, Tooltip } from '@mantine/core'; import { IconAdjustments } from '@tabler/icons-react'; export function TableColumnSelect({ diff --git a/src/frontend/src/tables/DownloadAction.tsx b/src/frontend/src/tables/DownloadAction.tsx index daed196ede..b17df70285 100644 --- a/src/frontend/src/tables/DownloadAction.tsx +++ b/src/frontend/src/tables/DownloadAction.tsx @@ -1,6 +1,5 @@ import { t } from '@lingui/macro'; -import { ActionIcon, Menu } from '@mantine/core'; -import { Tooltip } from '@mantine/core'; +import { ActionIcon, Menu, Tooltip } from '@mantine/core'; import { IconDownload } from '@tabler/icons-react'; export function DownloadAction({ diff --git a/src/frontend/src/tables/InvenTreeTable.tsx b/src/frontend/src/tables/InvenTreeTable.tsx index fa1391bbb4..8f6e0d64b3 100644 --- a/src/frontend/src/tables/InvenTreeTable.tsx +++ b/src/frontend/src/tables/InvenTreeTable.tsx @@ -3,17 +3,22 @@ import { ActionIcon, Alert, Box, + Group, Indicator, LoadingOverlay, Space, Stack, Tooltip } from '@mantine/core'; -import { Group } from '@mantine/core'; import { modals } from '@mantine/modals'; import { showNotification } from '@mantine/notifications'; -import { IconFilter, IconRefresh, IconTrash } from '@tabler/icons-react'; -import { IconBarcode, IconPrinter } from '@tabler/icons-react'; +import { + IconBarcode, + IconFilter, + IconPrinter, + IconRefresh, + IconTrash +} from '@tabler/icons-react'; import { useQuery } from '@tanstack/react-query'; import { DataTable, diff --git a/src/frontend/src/tables/RowActions.tsx b/src/frontend/src/tables/RowActions.tsx index 1b35741fe4..bef25f1f10 100644 --- a/src/frontend/src/tables/RowActions.tsx +++ b/src/frontend/src/tables/RowActions.tsx @@ -1,6 +1,5 @@ import { t } from '@lingui/macro'; -import { ActionIcon, Tooltip } from '@mantine/core'; -import { Menu } from '@mantine/core'; +import { ActionIcon, Menu, Tooltip } from '@mantine/core'; import { IconCopy, IconDots, IconEdit, IconTrash } from '@tabler/icons-react'; import { ReactNode, useMemo, useState } from 'react'; @@ -105,7 +104,7 @@ export function RowActions({ }, [actions]); // Render a single action icon - function RowActionIcon(action: RowAction) { + function RowActionIcon(action: Readonly<RowAction>) { return ( <Tooltip withinPortal={true} diff --git a/src/frontend/src/tables/general/AttachmentTable.tsx b/src/frontend/src/tables/general/AttachmentTable.tsx index 3996578cc6..19722bc1b6 100644 --- a/src/frontend/src/tables/general/AttachmentTable.tsx +++ b/src/frontend/src/tables/general/AttachmentTable.tsx @@ -1,6 +1,5 @@ import { t } from '@lingui/macro'; -import { Badge, Group, Stack, Text, Tooltip } from '@mantine/core'; -import { ActionIcon } from '@mantine/core'; +import { ActionIcon, Badge, Group, Stack, Text, Tooltip } from '@mantine/core'; import { Dropzone } from '@mantine/dropzone'; import { notifications } from '@mantine/notifications'; import { IconExternalLink, IconFileUpload } from '@tabler/icons-react'; diff --git a/src/frontend/src/tables/part/PartThumbTable.tsx b/src/frontend/src/tables/part/PartThumbTable.tsx index e110250de8..5bdeffec54 100644 --- a/src/frontend/src/tables/part/PartThumbTable.tsx +++ b/src/frontend/src/tables/part/PartThumbTable.tsx @@ -52,7 +52,11 @@ type ThumbProps = { /** * Renders a single image thumbnail */ -function PartThumbComponent({ selected, element, selectImage }: ThumbProps) { +function PartThumbComponent({ + selected, + element, + selectImage +}: Readonly<ThumbProps>) { const { hovered, ref } = useHover(); const hoverColor = 'rgba(127,127,127,0.2)'; diff --git a/src/frontend/src/tables/plugin/PluginListTable.tsx b/src/frontend/src/tables/plugin/PluginListTable.tsx index eea9ba00d8..ac65a6385a 100644 --- a/src/frontend/src/tables/plugin/PluginListTable.tsx +++ b/src/frontend/src/tables/plugin/PluginListTable.tsx @@ -15,12 +15,12 @@ import { notifications, showNotification } from '@mantine/notifications'; import { IconCircleCheck, IconCircleX, + IconDots, IconHelpCircle, IconInfoCircle, IconPlaylistAdd, IconRefresh } from '@tabler/icons-react'; -import { IconDots } from '@tabler/icons-react'; import { useCallback, useMemo, useState } from 'react'; import { useNavigate } from 'react-router-dom';