diff --git a/src/frontend/src/components/forms/ApiForm.tsx b/src/frontend/src/components/forms/ApiForm.tsx
index 9a3ca4a0b0..88eadd0ce2 100644
--- a/src/frontend/src/components/forms/ApiForm.tsx
+++ b/src/frontend/src/components/forms/ApiForm.tsx
@@ -35,6 +35,7 @@ import {
} from '../../functions/forms';
import { invalidResponse } from '../../functions/notifications';
import { getDetailUrl } from '../../functions/urls';
+import { TableState } from '../../hooks/UseTable';
import { PathParams } from '../../states/ApiState';
import { Boundary } from '../Boundary';
import {
@@ -54,6 +55,7 @@ export interface ApiFormAction {
* Properties for the ApiForm component
* @param url : The API endpoint to fetch the form data from
* @param pk : Optional primary-key value when editing an existing object
+ * @param pk_field : Optional primary-key field name (default: pk)
* @param pathParams : Optional path params for the url
* @param method : Optional HTTP method to use when submitting the form (default: GET)
* @param fields : The fields to render in the form
@@ -67,10 +69,12 @@ export interface ApiFormAction {
* @param onFormError : A callback function to call when the form is submitted with errors.
* @param modelType : Define a model type for this form
* @param follow : Boolean, follow the result of the form (if possible)
+ * @param table : Table to update on success (if provided)
*/
export interface ApiFormProps {
url: ApiEndpoints | string;
pk?: number | string | undefined;
+ pk_field?: string;
pathParams?: PathParams;
method?: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
fields?: ApiFormFieldSet;
@@ -87,6 +91,7 @@ export interface ApiFormProps {
successMessage?: string;
onFormSuccess?: (data: any) => void;
onFormError?: () => void;
+ table?: TableState;
modelType?: ModelType;
follow?: boolean;
actions?: ApiFormAction[];
@@ -391,14 +396,22 @@ export function ApiForm({
case 204:
// Form was submitted successfully
- // Optionally call the onFormSuccess callback
if (props.onFormSuccess) {
+ // A custom callback hook is provided
props.onFormSuccess(response.data);
}
- if (props.follow) {
- if (props.modelType && response.data?.pk) {
- navigate(getDetailUrl(props.modelType, response.data?.pk));
+ if (props.follow && props.modelType && response.data?.pk) {
+ // If we want to automatically follow the returned data
+ navigate(getDetailUrl(props.modelType, response.data?.pk));
+ } else if (props.table) {
+ // If we want to automatically update or reload a linked table
+ let pk_field = props.pk_field ?? 'pk';
+
+ if (props.pk && response?.data[pk_field]) {
+ props.table.updateRecord(response.data);
+ } else {
+ props.table.refreshTable();
}
}
diff --git a/src/frontend/src/components/settings/SettingItem.tsx b/src/frontend/src/components/settings/SettingItem.tsx
index dc14022998..292f5a1c19 100644
--- a/src/frontend/src/components/settings/SettingItem.tsx
+++ b/src/frontend/src/components/settings/SettingItem.tsx
@@ -1,4 +1,3 @@
-import { t } from '@lingui/macro';
import {
Button,
Group,
@@ -9,103 +8,25 @@ import {
Text,
useMantineColorScheme
} from '@mantine/core';
-import { showNotification } from '@mantine/notifications';
import { IconEdit } from '@tabler/icons-react';
import { useMemo } from 'react';
-import { api } from '../../App';
-import { ModelType } from '../../enums/ModelType';
-import { openModalApiForm } from '../../functions/forms';
-import { apiUrl } from '../../states/ApiState';
-import { SettingsStateProps } from '../../states/SettingsState';
-import { Setting, SettingType } from '../../states/states';
+import { Setting } from '../../states/states';
import { vars } from '../../theme';
-import { ApiFormFieldType } from '../forms/fields/ApiFormField';
+import { Boundary } from '../Boundary';
/**
* Render a single setting value
*/
function SettingValue({
- settingsState,
setting,
- onChange
+ onEdit,
+ onToggle
}: {
- settingsState: SettingsStateProps;
setting: Setting;
- onChange?: () => void;
+ onEdit: (setting: Setting) => void;
+ onToggle: (setting: Setting, value: boolean) => void;
}) {
- // Callback function when a boolean value is changed
- function onToggle(value: boolean) {
- api
- .patch(
- apiUrl(settingsState.endpoint, setting.key, settingsState.pathParams),
- { value: value }
- )
- .then(() => {
- showNotification({
- title: t`Setting updated`,
- message: t`${setting?.name} updated successfully`,
- color: 'green'
- });
- settingsState.fetchSettings();
- onChange?.();
- })
- .catch((error) => {
- showNotification({
- title: t`Error editing setting`,
- message: error.message,
- color: 'red'
- });
- });
- }
-
- // Callback function to open the edit dialog (for non-boolean settings)
- function onEditButton() {
- const fieldDefinition: ApiFormFieldType = {
- value: setting?.value ?? '',
- field_type: setting?.type ?? 'string',
- label: setting?.name,
- description: setting?.description
- };
-
- // Match related field
- if (
- fieldDefinition.field_type === SettingType.Model &&
- setting.api_url &&
- setting.model_name
- ) {
- fieldDefinition.api_url = setting.api_url;
-
- // TODO: improve this model matching mechanism
- fieldDefinition.model = setting.model_name.split('.')[1] as ModelType;
- } else if (setting.choices?.length > 0) {
- // Match choices
- fieldDefinition.field_type = SettingType.Choice;
- fieldDefinition.choices = setting?.choices || [];
- }
-
- openModalApiForm({
- url: settingsState.endpoint,
- pk: setting.key,
- pathParams: settingsState.pathParams,
- method: 'PATCH',
- title: t`Edit Setting`,
- ignorePermissionCheck: true,
- fields: {
- value: fieldDefinition
- },
- onFormSuccess() {
- showNotification({
- title: t`Setting updated`,
- message: t`${setting?.name} updated successfully`,
- color: 'green'
- });
- settingsState.fetchSettings();
- onChange?.();
- }
- });
- }
-
// Determine the text to display for the setting value
const valueText: string = useMemo(() => {
let value = setting.value;
@@ -130,7 +51,7 @@ function SettingValue({
size="sm"
radius="lg"
checked={setting.value.toLowerCase() == 'true'}
- onChange={(event) => onToggle(event.currentTarget.checked)}
+ onChange={(event) => onToggle(setting, event.currentTarget.checked)}
style={{
paddingRight: '20px'
}}
@@ -140,12 +61,12 @@ function SettingValue({
return valueText ? (
-
) : (
-