adapt arg names

2025-11-03 22:55:43 +00:00 · 2024-04-15 10:04:03 +02:00
parent bd60b01a88
commit e43befc2cc
27 changed files with 59 additions and 47 deletions
--- a/src/frontend/src/components/buttons/CopyButton.tsx
+++ b/src/frontend/src/components/buttons/CopyButton.tsx
@@ -17,7 +17,7 @@ export function CopyButton({
          onClick={copy}
          title={t`Copy to clipboard`}
          variant="subtle"
-          compact
+          size="compact-md"
        >
          <IconCopy size={10} />
          {label && <div>&nbsp;</div>}
--- a/src/frontend/src/components/buttons/SSOButton.tsx
+++ b/src/frontend/src/components/buttons/SSOButton.tsx
@@ -50,7 +50,7 @@ export function SsoButton({ provider }: { provider: Provider }) {

  return (
    <Button
-      leftIcon={getBrandIcon(provider)}
+      leftSection={getBrandIcon(provider)}
      radius="xl"
      component="a"
      onClick={login}
--- a/src/frontend/src/components/buttons/SplitButton.tsx
+++ b/src/frontend/src/components/buttons/SplitButton.tsx
@@ -89,7 +89,7 @@ export function SplitButton({
                option.onClick();
              }}
              disabled={option.disabled}
-              icon={<option.icon />}
+              leftSection={<option.icon />}
            >
              <Tooltip label={option.tooltip} position="right">
                <Text>{option.name}</Text>
--- a/src/frontend/src/components/details/DetailsImage.tsx
+++ b/src/frontend/src/components/details/DetailsImage.tsx
@@ -7,11 +7,10 @@ import {
  Overlay,
  Paper,
  Text,
-  rem,
-  useMantineTheme
+  rem
 } from '@mantine/core';
 import { Dropzone, FileWithPath, IMAGE_MIME_TYPE } from '@mantine/dropzone';
-import { useHover } from '@mantine/hooks';
+import { useColorScheme, useHover } from '@mantine/hooks';
 import { modals } from '@mantine/modals';
 import { useMemo, useState } from 'react';

@@ -21,6 +20,7 @@ import { cancelEvent } from '../../functions/events';
 import { InvenTreeIcon } from '../../functions/icons';
 import { useUserState } from '../../states/UserState';
 import { PartThumbTable } from '../../tables/part/PartThumbTable';
+import { vars } from '../../theme';
 import { ActionButton } from '../buttons/ActionButton';
 import { ApiImage } from '../images/ApiImage';
 import { StylishText } from '../items/StylishText';
@@ -87,8 +87,6 @@ function UploadModal({
  const [file1, setFile] = useState<FileWithPath | null>(null);
  let uploading = false;

-  const theme = useMantineTheme();
-
  // Components to show in the Dropzone when no file is selected
  const noFileIdle = (
    <Group>
@@ -160,9 +158,11 @@ function UploadModal({
    }
  };

+  const preferredColorScheme = useColorScheme();
+
  const primaryColor =
-    theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 4 : 6];
-  const redColor = theme.colors.red[theme.colorScheme === 'dark' ? 4 : 6];
+    vars.colors.primaryColors[preferredColorScheme === 'dark' ? 4 : 6];
+  const redColor = vars.colors.red[preferredColorScheme === 'dark' ? 4 : 6];

  return (
    <Paper sx={{ height: '220px' }}>
@@ -173,7 +173,7 @@ function UploadModal({
        loading={uploading}
      >
        <Group
-          position="center"
+          justify="center"
          gap="xl"
          style={{ minHeight: rem(140), pointerEvents: 'none' }}
        >
--- a/src/frontend/src/components/editors/TemplateEditor/TemplateEditor.tsx
+++ b/src/frontend/src/components/editors/TemplateEditor/TemplateEditor.tsx
@@ -223,7 +223,7 @@ export function TemplateEditor(props: TemplateEditorProps) {
      <Split style={{ gap: '10px' }}>
        <Tabs
          value={editorValue}
-          onTabChange={async (v) => {
+          onChange={async (v) => {
            codeRef.current = await getCodeFromEditor();
            setEditorValue(v);
          }}
@@ -240,7 +240,7 @@ export function TemplateEditor(props: TemplateEditorProps) {
              <Tabs.Tab
                key={Editor.key}
                value={Editor.key}
-                icon={<Editor.icon size="0.8rem" />}
+                leftSection={<Editor.icon size="0.8rem" />}
              >
                {Editor.name}
              </Tabs.Tab>
@@ -289,7 +289,7 @@ export function TemplateEditor(props: TemplateEditorProps) {

        <Tabs
          value={previewValue}
-          onTabChange={setPreviewValue}
+          onChange={setPreviewValue}
          style={{
            minWidth: '200px',
            display: 'flex',
@@ -301,7 +301,7 @@ export function TemplateEditor(props: TemplateEditorProps) {
              <Tabs.Tab
                key={PreviewArea.key}
                value={PreviewArea.key}
-                icon={<PreviewArea.icon size="0.8rem" />}
+                leftSection={<PreviewArea.icon size="0.8rem" />}
              >
                {PreviewArea.name}
              </Tabs.Tab>
--- a/src/frontend/src/components/forms/HostOptionsForm.tsx
+++ b/src/frontend/src/components/forms/HostOptionsForm.tsx
@@ -70,7 +70,7 @@ export function HostOptionsForm({
            </Text>
          </Group>
        ) : (
-          <Text color="dimmed" align="center">
+          <Text c="dimmed" align="center">
            <Trans>No one here...</Trans>
          </Text>
        )}
--- a/src/frontend/src/components/forms/fields/ApiFormField.tsx
+++ b/src/frontend/src/components/forms/fields/ApiFormField.tsx
@@ -240,7 +240,7 @@ export function ApiFormField({
              return `${1 * v.toFixed()}`;
            }}
            precision={definition.field_type == 'integer' ? 0 : 10}
-            onChange={(value: number) => onChange(value)}
+            onChange={(value) => onChange(value)}
          />
        );
      case 'choice':
--- a/src/frontend/src/components/forms/fields/ChoiceField.tsx
+++ b/src/frontend/src/components/forms/fields/ChoiceField.tsx
@@ -63,7 +63,7 @@ export function ChoiceField({
      placeholder={definition.placeholder}
      required={definition.required}
      disabled={definition.disabled}
-      icon={definition.icon}
+      leftSection={definition.icon}
      withinPortal={true}
    />
  );
--- a/src/frontend/src/components/forms/fields/DateField.tsx
+++ b/src/frontend/src/components/forms/fields/DateField.tsx
@@ -61,7 +61,7 @@ export default function DateField({
      label={definition.label}
      description={definition.description}
      placeholder={definition.placeholder}
-      icon={definition.icon}
+      leftSection={definition.icon}
    />
  );
 }
--- a/src/frontend/src/components/items/ActionDropdown.tsx
+++ b/src/frontend/src/components/items/ActionDropdown.tsx
@@ -77,7 +77,7 @@ export function ActionDropdown({
            >
              <Tooltip label={action.tooltip}>
                <Menu.Item
-                  icon={action.icon}
+                  leftSection={action.icon}
                  onClick={() => {
                    if (action.onClick != undefined) {
                      action.onClick();
--- a/src/frontend/src/components/items/Placeholder.tsx
+++ b/src/frontend/src/components/items/Placeholder.tsx
@@ -31,7 +31,7 @@ export function PlaceholderPanel() {
        title={t`This panel is a placeholder.`}
        icon={<IconInfoCircle />}
      >
-        <Text color="gray">This panel has not yet been implemented</Text>
+        <Text c="gray">This panel has not yet been implemented</Text>
      </Alert>
    </Stack>
  );
--- a/src/frontend/src/components/modals/QrCodeModal.tsx
+++ b/src/frontend/src/components/modals/QrCodeModal.tsx
@@ -177,7 +177,7 @@ export function QrCodeModal({
            </Button>
          </Group>
          {values.length == 0 ? (
-            <Text color={'grey'}>
+            <Text c={'grey'}>
              <Trans>No scans yet!</Trans>
            </Text>
          ) : (
--- a/src/frontend/src/components/nav/Header.tsx
+++ b/src/frontend/src/components/nav/Header.tsx
@@ -128,11 +128,11 @@ function NavTabs() {
      defaultValue="home"
      classNames={{
        root: classes.tabs,
-        tabsList: classes.tabsList,
+        list: classes.tabsList,
        tab: classes.tab
      }}
      value={tabValue}
-      onTabChange={(value) =>
+      onChange={(value) =>
        value == '/' ? navigate('/') : navigate(`/${value}`)
      }
    >
--- a/src/frontend/src/components/nav/MainMenu.tsx
+++ b/src/frontend/src/components/nav/MainMenu.tsx
@@ -38,12 +38,16 @@ export function MainMenu() {
        <Menu.Label>
          <Trans>Settings</Trans>
        </Menu.Label>
-        <Menu.Item icon={<IconUserCog />} component={Link} to="/settings/user">
+        <Menu.Item
+          leftSection={<IconUserCog />}
+          component={Link}
+          to="/settings/user"
+        >
          <Trans>Account settings</Trans>
        </Menu.Item>
        {userState.user?.is_staff && (
          <Menu.Item
-            icon={<IconSettings />}
+            leftSection={<IconSettings />}
            component={Link}
            to="/settings/system"
          >
@@ -53,7 +57,7 @@ export function MainMenu() {
        {userState.user?.is_staff && <Menu.Divider />}
        {userState.user?.is_staff && (
          <Menu.Item
-            icon={<IconUserBolt />}
+            leftSection={<IconUserBolt />}
            component={Link}
            to="/settings/admin"
          >
@@ -62,7 +66,7 @@ export function MainMenu() {
        )}
        <Menu.Divider />
        <Menu.Item
-          icon={<IconLogout />}
+          leftSection={<IconLogout />}
          onClick={() => {
            doLogout(navigate);
          }}
--- a/src/frontend/src/components/nav/PanelGroup.tsx
+++ b/src/frontend/src/components/nav/PanelGroup.tsx
@@ -108,7 +108,7 @@ function BasePanelGroup({
      <Tabs
        value={panel}
        orientation="vertical"
-        onTabChange={handlePanelChange}
+        onChange={handlePanelChange}
        keepMounted={false}
      >
        <Tabs.List position="left">
@@ -124,7 +124,7 @@ function BasePanelGroup({
                    p="xs"
                    value={panel.name}
                    //                    icon={(<InvenTreeIcon icon={panel.name}/>)}  // Enable when implementing Icon manager everywhere
-                    icon={panel.icon}
+                    leftSection={panel.icon}
                    hidden={panel.hidden}
                    disabled={panel.disabled}
                    style={{ cursor: panel.disabled ? 'unset' : 'pointer' }}
--- a/src/frontend/src/components/nav/PartCategoryTree.tsx
+++ b/src/frontend/src/components/nav/PartCategoryTree.tsx
@@ -59,7 +59,7 @@ export function PartCategoryTree({
  function renderNode({ node }: { node: any }) {
    return (
      <Group
-        position="apart"
+        justify="apart"
        key={node.id}
        wrap="nowrap"
        onClick={() => {
--- a/src/frontend/src/components/nav/SearchDrawer.tsx
+++ b/src/frontend/src/components/nav/SearchDrawer.tsx
@@ -337,7 +337,7 @@ export function SearchDrawer({
            radius="xs"
            value={value}
            onChange={(event) => setValue(event.currentTarget.value)}
-            icon={<IconSearch size="0.8rem" />}
+            leftSection={<IconSearch size="0.8rem" />}
            rightSection={
              value && (
                <IconBackspace color="red" onClick={() => setValue('')} />
--- a/src/frontend/src/components/widgets/WidgetLayout.tsx
+++ b/src/frontend/src/components/widgets/WidgetLayout.tsx
@@ -160,13 +160,13 @@ function WidgetControlBar({
            <Trans>Layout</Trans>
          </Menu.Label>
          <Menu.Item
-            icon={<IconArrowBackUpDouble size={14} />}
+            leftSection={<IconArrowBackUpDouble size={14} />}
            onClick={resetLayout}
          >
            <Trans>Reset Layout</Trans>
          </Menu.Item>
          <Menu.Item
-            icon={
+            leftSection={
              <IconLayout2 size={14} color={editable ? 'red' : undefined} />
            }
            onClick={editFnc}
@@ -185,7 +185,7 @@ function WidgetControlBar({
            <Trans>Appearance</Trans>
          </Menu.Label>
          <Menu.Item
-            icon={
+            leftSection={
              boxShown ? (
                <IconSquareCheck size={14} />
              ) : (
--- a/src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx
+++ b/src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx
@@ -11,7 +11,6 @@ import {
  Table,
  Title
 } from '@mantine/core';
-import { LoaderType } from '@mantine/styles/lib/theme/types/MantineTheme';
 import { useState } from 'react';

 import { SizeMarks } from '../../../../defaults/defaults';
@@ -67,8 +66,8 @@ export function UserTheme({ height }: { height: number }) {
    { value: 'oval', label: t`oval` },
    { value: 'dots', label: t`dots` }
  ];
-  const [loader, setLoader] = useState<LoaderType>(theme.loader);
-  function changeLoader(value: LoaderType) {
+  const [loader, setLoader] = useState<string>(theme.loader);
+  function changeLoader(value: string) {
    setLoader(value);
    useLocalState.setState({ loader: value });
  }
--- a/src/frontend/src/tables/RowActions.tsx
+++ b/src/frontend/src/tables/RowActions.tsx
@@ -114,7 +114,7 @@ export function RowActions({
      >
        <Menu.Item
          color={action.color}
-          icon={action.icon}
+          leftSection={action.icon}
          onClick={(event) => {
            // Prevent clicking on the action from selecting the row itself
            cancelEvent(event);
--- a/src/frontend/src/tables/bom/BomTable.tsx
+++ b/src/frontend/src/tables/bom/BomTable.tsx
@@ -217,7 +217,7 @@ export function BomTable({
          can_build = Math.trunc(can_build);

          return (
-            <Text color={can_build <= 0 ? 'red' : undefined}>{can_build}</Text>
+            <Text c={can_build <= 0 ? 'red' : undefined}>{can_build}</Text>
          );
        }
      },
--- a/src/frontend/src/tables/build/BuildLineTable.tsx
+++ b/src/frontend/src/tables/build/BuildLineTable.tsx
@@ -109,7 +109,7 @@ export default function BuildLineTable({ params = {} }: { params?: any }) {
          available > 0 ? (
            available
          ) : (
-            <Text color="red" italic>{t`No stock available`}</Text>
+            <Text c="red" italic>{t`No stock available`}</Text>
          )
        }
        title={t`Available Stock`}
--- a/src/frontend/src/tables/machine/MachineListTable.tsx
+++ b/src/frontend/src/tables/machine/MachineListTable.tsx
@@ -287,7 +287,10 @@ function MachineDrawer({
            </ActionIcon>
          </Group>
          <Stack pos="relative" gap="xs">
-            <LoadingOverlay visible={isFetching} overlayOpacity={0} />
+            <LoadingOverlay
+              visible={isFetching}
+              overlayProps={{ opacity: 0 }}
+            />
            <InfoItem name={t`Machine Type`}>
              <Group gap="xs">
                {machineType ? (
--- a/src/frontend/src/tables/machine/MachineTypeTable.tsx
+++ b/src/frontend/src/tables/machine/MachineTypeTable.tsx
@@ -102,7 +102,10 @@ function MachineTypeDrawer({ machineTypeSlug }: { machineTypeSlug: string }) {
          </Group>

          <Stack pos="relative" gap="xs">
-            <LoadingOverlay visible={isFetching} overlayOpacity={0} />
+            <LoadingOverlay
+              visible={isFetching}
+              overlayProps={{ opacity: 0 }}
+            />
            <InfoItem name={t`Name`} value={machineType?.name} type="text" />
            <InfoItem name={t`Slug`} value={machineType?.slug} type="text" />
            <InfoItem
@@ -206,7 +209,10 @@ function MachineDriverDrawer({
          </Group>

          <Stack pos="relative" gap="xs">
-            <LoadingOverlay visible={isFetching} overlayOpacity={0} />
+            <LoadingOverlay
+              visible={isFetching}
+              overlayProps={{ opacity: 0 }}
+            />
            <InfoItem name={t`Name`} value={machineDriver?.name} type="text" />
            <InfoItem name={t`Slug`} value={machineDriver?.slug} type="text" />
            <InfoItem
--- a/src/frontend/src/tables/part/PartTable.tsx
+++ b/src/frontend/src/tables/part/PartTable.tsx
@@ -141,7 +141,7 @@ function partTableColumns(): TableColumn[] {
          <TableHoverCard
            value={
              <Group gap="xs" justify="left" wrap="nowrap">
-                <Text color={color}>{text}</Text>
+                <Text c={color}>{text}</Text>
                {record.units && (
                  <Text size="xs" color={color}>
                    [{record.units}]
--- a/src/frontend/src/tables/plugin/PluginListTable.tsx
+++ b/src/frontend/src/tables/plugin/PluginListTable.tsx
@@ -158,7 +158,7 @@ export function PluginDrawer({
        />
      </Group>

-      <LoadingOverlay visible={isFetching} overlayOpacity={0} />
+      <LoadingOverlay visible={isFetching} overlayProps={{ opacity: 0 }} />

      <Card withBorder>
        <Stack gap="md">
--- a/src/frontend/src/tables/stock/StockItemTable.tsx
+++ b/src/frontend/src/tables/stock/StockItemTable.tsx
@@ -179,7 +179,7 @@ function stockItemTableColumns(): TableColumn[] {
          <TableHoverCard
            value={
              <Group gap="xs" justify="left" wrap="nowrap">
-                <Text color={color}>{text}</Text>
+                <Text c={color}>{text}</Text>
                {part.units && (
                  <Text size="xs" color={color}>
                    [{part.units}]