[PUI] Add view of all defined units to Admin center (#8040)

* Add API endpoint for all defined units
Fixes #7858

* render all units in API

* bump API

* Add display for all units

* remove logging

* fix types

* ignore favicon errors

* fix for new pint version

* add tests

* prove against units that are not defined

* append trailing slash to url

* make pagination disableable again

src/frontend/src/enums/ApiEndpoints.tsx

@@ -31,6 +31,7 @@ export enum ApiEndpoints {
   // Generic API endpoints
   currency_list = 'currency/exchange/',
   currency_refresh = 'currency/refresh/',
+  all_units = 'units/all/',
   task_overview = 'background-task/',
   task_pending_list = 'background-task/pending/',
   task_scheduled_list = 'background-task/scheduled/',

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

@@ -52,6 +52,8 @@ const CurrencyManagmentPanel = Loadable(
   lazy(() => import('./CurrencyManagmentPanel'))
 );
 
+const UnitManagmentPanel = Loadable(lazy(() => import('./UnitManagmentPanel')));
+
 const PluginManagementPanel = Loadable(
   lazy(() => import('./PluginManagementPanel'))
 );
@@ -76,10 +78,6 @@ const CustomStateTable = Loadable(
   lazy(() => import('../../../../tables/settings/CustomStateTable'))
 );
 
-const CustomUnitsTable = Loadable(
-  lazy(() => import('../../../../tables/settings/CustomUnitsTable'))
-);
-
 const PartParameterTemplateTable = Loadable(
   lazy(() => import('../../../../tables/part/PartParameterTemplateTable'))
 );
@@ -149,7 +147,7 @@ export default function AdminCenter() {
         name: 'customunits',
         label: t`Custom Units`,
         icon: <IconScale />,
-        content: <CustomUnitsTable />
+        content: <UnitManagmentPanel />
       },
       {
         name: 'part-parameters',

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

@@ -0,0 +1,75 @@
+import { t } from '@lingui/macro';
+import { Accordion, Stack } from '@mantine/core';
+import { useMemo } from 'react';
+
+import { StylishText } from '../../../../components/items/StylishText';
+import { ApiEndpoints } from '../../../../enums/ApiEndpoints';
+import { useTable } from '../../../../hooks/UseTable';
+import { apiUrl } from '../../../../states/ApiState';
+import { BooleanColumn } from '../../../../tables/ColumnRenderers';
+import { InvenTreeTable } from '../../../../tables/InvenTreeTable';
+import CustomUnitsTable from '../../../../tables/settings/CustomUnitsTable';
+
+function AllUnitTable() {
+  const table = useTable('all-units');
+  const columns = useMemo(() => {
+    return [
+      {
+        accessor: 'name',
+        title: t`Name`
+      },
+      BooleanColumn({ accessor: 'is_alias', title: t`Alias` }),
+      BooleanColumn({ accessor: 'isdimensionless', title: t`Dimensionless` })
+    ];
+  }, []);
+
+  return (
+    <InvenTreeTable
+      url={apiUrl(ApiEndpoints.all_units)}
+      tableState={table}
+      columns={columns}
+      props={{
+        idAccessor: 'name',
+        enableSearch: false,
+        enablePagination: false,
+        enableColumnSwitching: false,
+        dataFormatter: (data: any) => {
+          let units = data.available_units ?? {};
+          return Object.entries(units).map(([key, values]: [string, any]) => {
+            return {
+              name: values.name,
+              is_alias: values.is_alias,
+              compatible_units: values.compatible_units,
+              isdimensionless: values.isdimensionless
+            };
+          });
+        }
+      }}
+    />
+  );
+}
+
+export default function UnitManagmentPanel() {
+  return (
+    <Stack gap="xs">
+      <Accordion defaultValue="custom">
+        <Accordion.Item value="custom" key="custom">
+          <Accordion.Control>
+            <StylishText size="lg">{t`Custom Units`}</StylishText>
+          </Accordion.Control>
+          <Accordion.Panel>
+            <CustomUnitsTable />
+          </Accordion.Panel>
+        </Accordion.Item>
+        <Accordion.Item value="all" key="all">
+          <Accordion.Control>
+            <StylishText size="lg">{t`All units`}</StylishText>
+          </Accordion.Control>
+          <Accordion.Panel>
+            <AllUnitTable />
+          </Accordion.Panel>
+        </Accordion.Item>
+      </Accordion>
+    </Stack>
+  );
+}

src/frontend/src/tables/InvenTreeTable.tsx

@@ -517,6 +517,11 @@ export function InvenTreeTable<T = any>({
   // Update tableState.records when new data received
   useEffect(() => {
     tableState.setRecords(data ?? []);
+
+    // set pagesize to length if pagination is disabled
+    if (!tableProps.enablePagination) {
+      tableState.setPageSize(data?.length ?? defaultPageSize);
+    }
   }, [data]);
 
   const deleteRecords = useDeleteApiFormModal({
@@ -594,6 +599,15 @@ export function InvenTreeTable<T = any>({
     tableState.refreshTable();
   }
 
+  const optionalParams = useMemo(() => {
+    let optionalParamsa: Record<string, any> = {};
+    if (tableProps.enablePagination) {
+      optionalParamsa['recordsPerPageOptions'] = PAGE_SIZES;
+      optionalParamsa['onRecordsPerPageChange'] = updatePageSize;
+    }
+    return optionalParamsa;
+  }, [tableProps.enablePagination]);
+
   return (
     <>
       {deleteRecords.modal}
@@ -739,8 +753,7 @@ export function InvenTreeTable<T = any>({
                   overflow: 'hidden'
                 })
               }}
-              recordsPerPageOptions={PAGE_SIZES}
-              onRecordsPerPageChange={updatePageSize}
+              {...optionalParams}
             />
           </Box>
         </Stack>

src/frontend/tests/baseFixtures.ts

@@ -71,6 +71,7 @@ export const test = baseTest.extend({
         url != 'http://localhost:8000/api/user/token/' &&
         url != 'http://localhost:8000/api/barcode/' &&
         url != 'https://docs.inventree.org/en/versions.json' &&
+        url != 'http://localhost:5173/favicon.ico' &&
         !url.startsWith('http://localhost:8000/api/news/') &&
         !url.startsWith('http://localhost:8000/api/notifications/') &&
         !url.startsWith('chrome://') &&