[React] Settings interface #5679

SchrodingersGat · 2023-10-09T12:57:49Z

Implementing a settings interface for the new UI

TODO

- Allow use without a pk

- User information available globally - Add placeholder page for plugin settings

netlify · 2023-10-09T12:57:54Z

✅ Deploy Preview for inventree-web-pui-preview ready!

Name	Link
🔨 Latest commit	`3c73b10`
🔍 Latest deploy log	https://app.netlify.com/sites/inventree-web-pui-preview/deploys/652d41d57e99110008333184
😎 Deploy Preview	https://deploy-preview-5679--inventree-web-pui-preview.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 100 (no change from production) Accessibility: 86 (no change from production) Best Practices: 100 (no change from production) SEO: 70 (no change from production) PWA: - View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

- Allows list of settings to be drilled down through props - Also provides a way of reloading the settings list

- No longer case sensitive

- Still some work to be done here - Need to pass the base URL down through useContext

- Required some adjustment to existing forms interface

- Display units for setting (if available) - Rename fieldType to field_type - React does not like snakeCase props

src/frontend/src/components/nav/MainMenu.tsx

src/frontend/src/hooks/UseInstance.tsx

SchrodingersGat · 2023-10-11T00:36:06Z

@matmair let me go back and have a proper review of #5326 :)

# Conflicts: # InvenTree/InvenTree/api_version.py

…ttings # Conflicts: # InvenTree/InvenTree/api_version.py # InvenTree/InvenTree/serializers.py # src/frontend/src/components/forms/ApiForm.tsx # src/frontend/src/components/forms/fields/ApiFormField.tsx # src/frontend/src/components/nav/MainMenu.tsx # src/frontend/src/functions/forms.tsx # src/frontend/src/hooks/UseInstance.tsx # src/frontend/src/pages/build/BuildDetail.tsx # src/frontend/src/pages/part/CategoryDetail.tsx # src/frontend/src/pages/part/PartDetail.tsx # src/frontend/src/pages/stock/LocationDetail.tsx # src/frontend/src/pages/stock/StockDetail.tsx # src/frontend/src/states/ApiState.tsx # src/frontend/src/states/states.tsx

…ttings # Conflicts: # src/frontend/src/components/nav/MainMenu.tsx

- Replace with global state manager - Does not currently refresh properly

…ttings # Conflicts: # src/frontend/src/components/nav/PanelGroup.tsx # src/frontend/src/functions/forms.tsx

- Integrated many improvements from current master

- Now integrates nicely with userSettingsState and globalSettingsState

…ttings

matmair

This is a good start for building out all required management options via the API; Great work

matmair · 2023-10-16T17:04:38Z

src/frontend/src/components/settings/SettingItem.tsx

+    openModalApiForm({
+      name: 'setting-edit',
+      url: settingsState.endpoint,
+      pk: setting.key,
+      method: 'PATCH',
+      title: t`Edit Setting`,
+      ignorePermissionCheck: true,
+      fields: {
+        value: {
+          value: setting?.value ?? '',
+          field_type: field_type,
+          choices: setting?.choices || [],
+          label: setting?.name,
+          description: setting?.description
+        }
+      },
+      onFormSuccess() {
+        showNotification({
+          title: t`Setting updated`,
+          message: t`${setting?.name} updated successfully`,
+          color: 'green'
+        });
+        settingsState.fetchSettings();
+      }
+    });


Comment: I played with inline editing - which gave a really snappy feel. Maybe that can be done in a follow up PR

I really like the idea, a modal requires way more clicks which is bad ux

The main drivers for a modal here is that the modal framework is already in place which handles API transactions, error handling, etc

I'd happily review an inline editor solution - potentially the forms components I have already implemented could be reused. The only requirement would be that we add provision for an in-line error message which is displayed when the value is marked as invalid by the server.

SchrodingersGat · 2023-10-16T23:28:40Z

@matmair I am going to merge this in now as I think it is sufficiently advanced that we can leverage it. Thanks for your good points and improvements, I think it is pretty clean now!

Note that this does not address all the points in #5326 - perhaps the task-list over there can be moved to a new issue so we can continue to tick off the other items?

SchrodingersGat added 9 commits October 6, 2023 21:12

Add some dummy pages for settings

9a38187

Add some placeholder pages for settings

75bab21

Refactor 'useInstance' hook

bb9375d

- Allow use without a pk

Make response status code available

9c5b0ed

Cleanup user settings page

cebbc38

Fill out (empty) panels for system settings

e6a0e31

Update URLs

c750359

Add more user information to "me" API endpoint

d3e9547

Implement global user context

7d897ea

- User information available globally - Add placeholder page for plugin settings

SchrodingersGat added the Platform UI Related to the React based User Interface label Oct 9, 2023

SchrodingersGat added this to the 0.13.0 milestone Oct 9, 2023

SchrodingersGat added 16 commits October 9, 2023 23:59

remove debug entry

b19d7e5

Add first-pass implementation of plugins table

3b53957

Add icon to plugin table

0768840

plugin table improvements

8c1cc96

Add SettingsContext component

d82c82a

- Allows list of settings to be drilled down through props - Also provides a way of reloading the settings list

Update settings page

ccf8c62

Update settings detail API endpoints

d2ae805

- No longer case sensitive

Display boolean values, and allow them to be edited

9cab8a5

- Still some work to be done here - Need to pass the base URL down through useContext

Allow editing of non-boolean settings too

6769554

- Required some adjustment to existing forms interface

Fix rendering of choice field within modal

690d317

Display correct value for choice fields

2b60071

Expose settings units to API

0b63428

Updates

b0cccac

- Display units for setting (if available) - Rename fieldType to field_type - React does not like snakeCase props

Improve form handling

06580c0

Add global server settings keys

4192d45

Add table for project codes

777ff6f

matmair reviewed Oct 10, 2023

View reviewed changes

src/frontend/src/components/nav/MainMenu.tsx Outdated Show resolved Hide resolved

src/frontend/src/components/nav/MainMenu.tsx Outdated Show resolved Hide resolved

src/frontend/src/hooks/UseInstance.tsx Outdated Show resolved Hide resolved

SchrodingersGat mentioned this pull request Oct 11, 2023

P-UI: Admin UI #5326

Closed

Use cache to ensure that settings are not rebuilt too often

200f0b0

SchrodingersGat marked this pull request as draft October 11, 2023 02:48

SchrodingersGat added 2 commits October 11, 2023 16:23

Update api version notes

c35ff4e

Merge remote-tracking branch 'inventree/master' into react-settings

8209444

# Conflicts: # InvenTree/InvenTree/api_version.py

This was referenced Oct 11, 2023

Update settings API endpoints: #5684

Merged

[React] Settings state manager #5687

Merged

SchrodingersGat added 12 commits October 12, 2023 00:29

Add username helper function to user state

37fb2f3

Merge commit '0925fbbad28c7ac58c272f51caa5bf09196996a2' into react-se…

b8960c1

…ttings # Conflicts: # src/frontend/src/components/nav/MainMenu.tsx

Remove SettingsContext

c42462d

- Replace with global state manager - Does not currently refresh properly

Remove UserContext

4d86b52

Update BaseContext

36d079c

Merge commit '9705521cd2c147f4e08fa975731abdb2182d632b' into react-se…

13b11b7

…ttings # Conflicts: # src/frontend/src/components/nav/PanelGroup.tsx # src/frontend/src/functions/forms.tsx

Cleanup to match master

ecc6ade

- Integrated many improvements from current master

Get settings items working again

18e8929

- Now integrates nicely with userSettingsState and globalSettingsState

Merge commit '80a170d93cb68806cc8bbdf4762e226224437c93' into react-se…

53aec27

…ttings

Improve generation of user name

b676b88

Handle user settings too

1824604

SchrodingersGat marked this pull request as ready for review October 16, 2023 13:16

SchrodingersGat added 3 commits October 17, 2023 00:23

url endpoint fix

c661914

Add new table for custom unit management

a7ff731

Update global settings

3c73b10

matmair approved these changes Oct 16, 2023

View reviewed changes

SchrodingersGat merged commit 8bc750b into inventree:master Oct 16, 2023
19 checks passed

SchrodingersGat deleted the react-settings branch October 16, 2023 23:28

matmair mentioned this pull request Oct 30, 2023

[FR/P-UI] New admin UI #5016

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[React] Settings interface #5679

[React] Settings interface #5679

SchrodingersGat commented Oct 9, 2023 •

edited

Loading

netlify bot commented Oct 9, 2023 •

edited

Loading

SchrodingersGat commented Oct 11, 2023

matmair left a comment

matmair Oct 16, 2023

wolflu05 Oct 16, 2023

SchrodingersGat Oct 16, 2023

SchrodingersGat commented Oct 16, 2023

[React] Settings interface #5679

[React] Settings interface #5679

Conversation

SchrodingersGat commented Oct 9, 2023 • edited Loading

TODO

netlify bot commented Oct 9, 2023 • edited Loading

✅ Deploy Preview for inventree-web-pui-preview ready!

SchrodingersGat commented Oct 11, 2023

matmair left a comment

Choose a reason for hiding this comment

matmair Oct 16, 2023

Choose a reason for hiding this comment

wolflu05 Oct 16, 2023

Choose a reason for hiding this comment

SchrodingersGat Oct 16, 2023

Choose a reason for hiding this comment

SchrodingersGat commented Oct 16, 2023

SchrodingersGat commented Oct 9, 2023 •

edited

Loading

netlify bot commented Oct 9, 2023 •

edited

Loading