[PUI] More style fixes (#7142)

* fix interface names * use Readonly for props * fix typescript:S3863 * require hashes in package installer too
inventree · Apr 30, 2024 · 7e9d2f7 · 7e9d2f7
1 parent a9b932c
commit 7e9d2f7
Show file tree

Hide file tree

Showing 44 changed files with 174 additions and 127 deletions.
diff --git 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
@@ -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<ActionButtonProps>) {
   return <ActionButton {...props} color="green" icon={<IconPlus />} />;
 }
diff --git 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<SplitButtonProps>) {
   const [current, setCurrent] = useState<string>(defaultSelected);
   const { classes } = useStyles();
 

diff --git 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<FieldProps>) {
   let value = props?.field_value;
 
   if (value === undefined) {
@@ -217,11 +217,11 @@ function TableStringValue(props: FieldProps) {
   );
 }
 
-function BooleanValue(props: FieldProps) {
+function BooleanValue(props: Readonly<FieldProps>) {
   return <YesNoButton value={props.field_value} />;
 }
 
-function TableAnchorValue(props: FieldProps) {
+function TableAnchorValue(props: Readonly<FieldProps>) {
   if (props.field_data.external) {
     return (
       <Anchor
@@ -303,7 +303,7 @@ function TableAnchorValue(props: FieldProps) {
   );
 }
 
-function ProgressBarValue(props: FieldProps) {
+function ProgressBarValue(props: Readonly<FieldProps>) {
   return (
     <ProgressBar
       value={props.field_data.progress}
@@ -313,7 +313,7 @@ function ProgressBarValue(props: FieldProps) {
   );
 }
 
-function StatusValue(props: FieldProps) {
+function StatusValue(props: Readonly<FieldProps>) {
   return (
     <StatusRenderer type={props.field_data.model} status={props.field_value} />
   );

diff --git 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<DetailsBadgeProps>) {
   if (props.visible == false) {
     return null;
   }

diff --git 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<DetailImageProps>) {
   // Displays a group of ActionButtons on hover
   const { hovered, ref } = useHover();
   const [img, setImg] = useState<string>(props.src ?? backup_image);

diff --git 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<TemplateEditorProps>) {
   const { downloadUrl, editors, previewAreas, preview } = props;
   const editorRef = useRef<EditorRef>();
   const previewRef = useRef<PreviewAreaRef>();

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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<DocInfoProps>) {
   return (
     <DocTooltip text={text} detail={detail} link={link}>
       <IconInfoCircle size={size} />

diff --git 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<DocTooltipProps>) {
   const { classes } = InvenTreeStyle();
 
   return (

diff --git 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<ProgressBarProps>) {
   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
@@ -14,7 +14,7 @@ export function TitleWithDoc({
   size,
   text,
   detail
-}: DocTitleProps) {
+}: Readonly<DocTitleProps>) {
   return (
     <Group>
       <Title variant={variant} order={order} size={size}>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -8,14 +8,14 @@ import {
   Divider,
   Drawer,
   Group,
+  Loader,
   Menu,
   Paper,
   Space,
   Stack,
   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
@@ -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
@@ -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}