ydb-embedded-ui 20.2.0 → 20.3.0

package/src/utils/errors/i18n/en.json

@@ -0,0 +1,4 @@
+{
+  "unknown-error": "An unknown error occurred",
+  "access-forbidden": "Access forbidden"
+}

package/src/utils/errors/i18n/index.ts

@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-errors';
+
+export default registerKeysets(COMPONENT, {en});

package/src/utils/errors/index.ts

@@ -0,0 +1,55 @@
+import {isQueryErrorResponse} from '../query';
+import {isNetworkError, isResponseError} from '../response';
+
+import {extractDataMessage, extractErrorDetails} from './extractErrorDetails';
+import i18n from './i18n';
+
+export {extractErrorDetails} from './extractErrorDetails';
+export type {ErrorDetails} from './extractErrorDetails';
+
+/**
+ * Prepares a consistent error message from various error types
+ * @param err - The error object to process
+ * @param defaultMessage - Optional fallback message used when a specific error message cannot be determined
+ * @returns A formatted error message string
+ */
+export function prepareCommonErrorMessage(err: unknown, defaultMessage?: string): string {
+    if (typeof err === 'string') {
+        return err;
+    }
+
+    if (!err) {
+        return i18n('unknown-error');
+    }
+
+    if (isNetworkError(err)) {
+        return err.message;
+    }
+
+    if (isQueryErrorResponse(err)) {
+        return err.error?.message || defaultMessage || i18n('unknown-error');
+    }
+
+    if (isResponseError(err)) {
+        const dataMessage = extractDataMessage(err.data) ?? extractErrorDetails(err)?.dataMessage;
+        if (err.status === 403) {
+            return dataMessage || i18n('access-forbidden');
+        }
+        if (dataMessage) {
+            return dataMessage;
+        }
+        if (err.statusText) {
+            return err.statusText;
+        }
+    }
+
+    if (err instanceof Error) {
+        return err.message;
+    }
+
+    if (defaultMessage) {
+        return defaultMessage;
+    }
+
+    return JSON.stringify(err);
+}

package/src/utils/errors/serializeReduxError.ts

@@ -0,0 +1,11 @@
+/**
+ * Serialize the error to make it Redux-compatible
+ *
+ * It prevents redux console error on string error in code - `throw new Error("description")`
+ */
+export function serializeReduxError(error: unknown) {
+    if (error instanceof Error) {
+        return {message: error.message, name: error.name};
+    }
+    return error;
+}

package/src/utils/events.ts

@@ -0,0 +1,30 @@
+/**
+ * Minimal structural shape of a mouse click that this module cares about.
+ * Compatible with both the DOM `MouseEvent` and React's `MouseEvent` (and any
+ * other source that happens to carry these fields), without coupling the helper
+ * to a specific framework typing.
+ */
+export interface ClickEventLike {
+    button: number;
+    metaKey: boolean;
+    ctrlKey: boolean;
+    shiftKey: boolean;
+    altKey: boolean;
+}
+
+/**
+ * Returns true if a mouse click should be left to the browser's default behavior
+ * rather than handled by app code. This covers:
+ *
+ * - modifier keys held (cmd/ctrl/shift/alt) — typically "open in new tab/window",
+ *   "download", etc.;
+ * - any non-primary mouse button (middle-click, right-click) — typically
+ *   "open in new tab" or context menu.
+ *
+ * Use it in link/button click handlers that want to keep native anchor semantics
+ * (cmd+click opens in a new tab) while still intercepting plain clicks for
+ * client-side routing or in-app state changes.
+ */
+export function isModifiedClickEvent(event: ClickEventLike): boolean {
+    return event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+}

package/src/utils/featureFlags.ts

@@ -0,0 +1,7 @@
+import type {FeatureFlagConfig} from '../types/api/featureFlags';
+
+export function isFeatureFlagEnabled(featureFlags: FeatureFlagConfig[] | undefined, name: string) {
+    const featureFlag = featureFlags?.find((flag) => flag.Name === name);
+
+    return Boolean(featureFlag && (featureFlag.Current ?? featureFlag.Default));
+}

package/src/utils/filters.ts

@@ -0,0 +1,20 @@
+import type {OrderType} from '@gravity-ui/react-data-table';
+import {DESCENDING} from '@gravity-ui/react-data-table/build/esm/lib/constants';
+import escapeRegExp from 'lodash/escapeRegExp';
+
+import type {BackendSortParam} from '../types/api/common';
+
+export const prepareSortValue = <T extends string>(
+    sortValue: T,
+    sortOrder: OrderType = DESCENDING,
+): BackendSortParam<T> => {
+    if (sortOrder === DESCENDING) {
+        return `-${sortValue}`;
+    }
+
+    return sortValue;
+};
+
+export const prepareSearchValue = (searchValue = '') => {
+    return new RegExp(escapeRegExp(searchValue), 'i');
+};

package/src/utils/generateEvaluator.ts

@@ -0,0 +1,25 @@
+import {DEFAULT_DANGER_THRESHOLD, DEFAULT_WARNING_THRESHOLD} from './constants';
+
+export const generateEvaluator =
+    <OkLevel extends string, WarnLevel extends string, CritLevel extends string>(
+        levels: [OkLevel, WarnLevel, CritLevel],
+        warn = DEFAULT_WARNING_THRESHOLD,
+        crit = DEFAULT_DANGER_THRESHOLD,
+    ) =>
+    (value: number) => {
+        if (0 <= value && value < warn) {
+            return levels[0];
+        }
+
+        if (warn <= value && value < crit) {
+            return levels[1];
+        }
+
+        if (crit <= value) {
+            return levels[2];
+        }
+
+        return undefined;
+    };
+
+export const getUsageSeverity = generateEvaluator(['success', 'warning', 'danger']);

package/src/utils/generateHash.ts

@@ -0,0 +1,11 @@
+import crc32 from 'crc-32';
+
+export const generateHash = (value: string) => {
+    // 1. crc32.str(value) - generate crc32 hash
+    // 2. (>>>) - use unsigned right shift operator (>>>) to avoid negative values
+    // 3. toString(16) - convert hash to hex format
+    // 4. toUpperCase() - convert hash to uppercase
+    // 5. padStart(8, '0') - fill hash with leading zeros if hash length < 8
+    // eslint-disable-next-line no-bitwise
+    return (crc32.str(value) >>> 0).toString(16).toUpperCase().padStart(8, '0');
+};

package/src/utils/getColumnWidth.ts

@@ -0,0 +1,42 @@
+export const MAX_COLUMN_WIDTH = 600;
+export const HEADER_PADDING = 20;
+export const SORT_ICON_TO_CHARACTERS = 2;
+export const PIXELS_PER_CHARACTER = 10;
+
+export function getColumnWidth({
+    data,
+    name,
+    header,
+    sortable,
+}: {
+    data?: Record<string, unknown>[];
+    name: string;
+    header?: string;
+    sortable?: boolean;
+}) {
+    const headerContentLength = typeof header === 'string' ? header.length : name.length;
+
+    let maxColumnContentLength = sortable
+        ? headerContentLength + SORT_ICON_TO_CHARACTERS
+        : headerContentLength;
+
+    if (data) {
+        for (const row of data) {
+            let cellLength = 0;
+            if (row[name]) {
+                cellLength = String(row[name]).length;
+            }
+
+            maxColumnContentLength = Math.max(maxColumnContentLength, cellLength);
+
+            if (
+                maxColumnContentLength * PIXELS_PER_CHARACTER + HEADER_PADDING >=
+                MAX_COLUMN_WIDTH
+            ) {
+                return MAX_COLUMN_WIDTH;
+            }
+        }
+    }
+
+    return maxColumnContentLength * PIXELS_PER_CHARACTER + HEADER_PADDING;
+}

package/src/utils/hooks/index.ts

@@ -0,0 +1,16 @@
+export * from './useTypedSelector';
+export * from './useTypedDispatch';
+export * from './useSetting';
+export * from './useQueryExecutionSettings';
+export * from './useQueryStreamingSetting';
+export * from './useTableSort';
+export * from './useSearchQuery';
+export * from './useAutoRefreshInterval';
+export * from './useEventHandler';
+export * from './useDelayed';
+export * from './useAclSyntax';
+export * from './useScrollPosition';
+export * from './useResourcePools';
+export * from './useCompactionFeature';
+export * from './useSchemaSecretsFeature';
+export * from './useTopicsSqlIoOperationsFeature';

package/src/utils/hooks/useAclSyntax.ts

@@ -0,0 +1,10 @@
+import {SETTING_KEYS} from '../../store/reducers/settings/constants';
+import {AclSyntax} from '../constants';
+
+import {useSetting} from './useSetting';
+
+export function useAclSyntax(): string {
+    const [aclSyntax] = useSetting<string | undefined>(SETTING_KEYS.ACL_SYNTAX);
+
+    return aclSyntax ?? AclSyntax.YdbShort;
+}

package/src/utils/hooks/useAutoRefreshInterval.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import {SETTING_KEYS} from '../../store/reducers/settings/constants';
+
+import {useSetting} from './useSetting';
+
+const IMMEDIATE_UPDATE_INTERVAL = 1;
+const DISABLED_INTERVAL = 0;
+
+export function useAutoRefreshInterval(): [number, (value: number) => void] {
+    const [settingValue, setSettingValue] = useSetting(
+        SETTING_KEYS.AUTO_REFRESH_INTERVAL,
+        DISABLED_INTERVAL,
+    );
+    const [effectiveInterval, setEffectiveInterval] = React.useState(
+        document.visibilityState === 'visible' ? settingValue : DISABLED_INTERVAL,
+    );
+
+    const lastHiddenTimeRef = React.useRef<number | null>(null);
+
+    React.useEffect(() => {
+        setEffectiveInterval(document.visibilityState === 'visible' ? settingValue : 0);
+
+        const handleVisibilityChange = () => {
+            const isVisible = document.visibilityState === 'visible';
+            if (isVisible) {
+                // If more than settingValue milliseconds have passed since the page was hidden,
+                // trigger an immediate update
+                const shouldTriggerImmediate =
+                    lastHiddenTimeRef.current &&
+                    settingValue !== DISABLED_INTERVAL &&
+                    Date.now() - lastHiddenTimeRef.current >= settingValue;
+
+                if (shouldTriggerImmediate) {
+                    setEffectiveInterval(IMMEDIATE_UPDATE_INTERVAL);
+
+                    setTimeout(() => {
+                        setEffectiveInterval(settingValue);
+                    }, 0);
+                } else {
+                    setEffectiveInterval(settingValue);
+                }
+
+                lastHiddenTimeRef.current = null;
+            } else {
+                lastHiddenTimeRef.current = Date.now();
+                setEffectiveInterval(DISABLED_INTERVAL);
+            }
+        };
+
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+        return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
+    }, [settingValue]);
+
+    return [effectiveInterval, setSettingValue];
+}

package/src/utils/hooks/useCancellable.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export function useCancellableFunction<T extends {cancel: () => void}>(cancellable: T) {
+    React.useEffect(() => {
+        return () => {
+            cancellable.cancel();
+        };
+    }, [cancellable]);
+    return cancellable;
+}

package/src/utils/hooks/useChangedQuerySettings.ts

@@ -0,0 +1,65 @@
+import getChangedQueryExecutionSettings from '../../containers/Tenant/Query/QueryEditorControls/utils/getChangedQueryExecutionSettings';
+import getChangedQueryExecutionSettingsDescription from '../../containers/Tenant/Query/QueryEditorControls/utils/getChangedQueryExecutionSettingsDescription';
+import {SETTING_KEYS} from '../../store/reducers/settings/constants';
+import {WEEK_IN_SECONDS} from '../constants';
+import {DEFAULT_QUERY_SETTINGS} from '../query';
+
+import {useLastQueryExecutionSettings} from './useLastQueryExecutionSettings';
+import {useQueryExecutionSettings} from './useQueryExecutionSettings';
+import {useSetting} from './useSetting';
+
+export const useChangedQuerySettings = () => {
+    const [bannerLastClosedTimestamp, setBannerLastClosedTimestamp] = useSetting<
+        number | undefined
+    >(SETTING_KEYS.QUERY_SETTINGS_BANNER_LAST_CLOSED);
+    const [lastQuerySettings] = useLastQueryExecutionSettings();
+    const [currentQuerySettings] = useQueryExecutionSettings();
+
+    const changedLastExecutionSettings = lastQuerySettings
+        ? getChangedQueryExecutionSettings(lastQuerySettings, DEFAULT_QUERY_SETTINGS)
+        : [];
+
+    const changedCurrentSettings = currentQuerySettings
+        ? getChangedQueryExecutionSettings(currentQuerySettings, DEFAULT_QUERY_SETTINGS)
+        : [];
+
+    const hasChangedImportantSettings =
+        changedLastExecutionSettings.includes('transactionMode') ||
+        changedLastExecutionSettings.includes('queryMode');
+
+    const changedLastExecutionSettingsDescriptions = lastQuerySettings
+        ? getChangedQueryExecutionSettingsDescription({
+              currentSettings: lastQuerySettings,
+              defaultSettings: DEFAULT_QUERY_SETTINGS,
+          })
+        : {};
+
+    const changedCurrentSettingsDescriptions = currentQuerySettings
+        ? getChangedQueryExecutionSettingsDescription({
+              currentSettings: currentQuerySettings,
+              defaultSettings: DEFAULT_QUERY_SETTINGS,
+          })
+        : {};
+
+    const isClosedRecently =
+        bannerLastClosedTimestamp &&
+        Date.now() - bannerLastClosedTimestamp < WEEK_IN_SECONDS * 1000;
+
+    const isBannerShown = hasChangedImportantSettings && !isClosedRecently;
+
+    const closeBanner = () => setBannerLastClosedTimestamp(Date.now());
+
+    const resetBanner = () => setBannerLastClosedTimestamp(undefined);
+
+    return {
+        isBannerShown,
+        closeBanner,
+        resetBanner,
+
+        changedCurrentSettings,
+        changedCurrentSettingsDescriptions,
+
+        changedLastExecutionSettings,
+        changedLastExecutionSettingsDescriptions,
+    };
+};

package/src/utils/hooks/useCompactionFeature.ts

@@ -0,0 +1,29 @@
+import {useFeatureFlagsAvailable} from '../../store/reducers/capabilities/hooks';
+import {configsApi} from '../../store/reducers/configs';
+import {isForcedCompactionEnabled} from '../tableCompaction';
+
+interface UseCompactionFeatureResult {
+    compactionEnabled: boolean;
+    isFeatureFlagsLoading: boolean;
+}
+
+/**
+ * Hook for checking if table compaction feature is enabled.
+ * Fetches feature flags and determines if forced compaction is available.
+ * @param database - Database path
+ * @param enabled - Whether to fetch feature flags (default: true). Set to false to skip the query.
+ * @returns Compaction feature availability and loading state
+ */
+export function useCompactionFeature(database: string, enabled = true): UseCompactionFeatureResult {
+    const featureFlagsAvailable = useFeatureFlagsAvailable();
+
+    const {currentData: featureFlags, isFetching: isFeatureFlagsLoading} =
+        configsApi.useGetFeatureFlagsQuery({database}, {skip: !featureFlagsAvailable || !enabled});
+
+    const compactionEnabled = isForcedCompactionEnabled(featureFlags);
+
+    return {
+        compactionEnabled,
+        isFeatureFlagsLoading,
+    };
+}

package/src/utils/hooks/useDatabaseFromQuery.ts

@@ -0,0 +1,15 @@
+import {StringParam, useQueryParam} from 'use-query-params';
+
+export function useDatabaseFromQuery() {
+    const [database] = useQueryParam('database', StringParam);
+
+    // Remove null from type
+    return database ?? undefined;
+}
+
+export function useClusterNameFromQuery() {
+    const [clusterName] = useQueryParam('clusterName', StringParam);
+
+    // Remove null from type
+    return clusterName ?? undefined;
+}

package/src/utils/hooks/useDatabasesV2.ts

@@ -0,0 +1,9 @@
+import {useEmMetaAvailable} from '../../store/reducers/capabilities/hooks';
+import {useClusterBaseInfo} from '../../store/reducers/cluster/cluster';
+
+export function useDatabasesV2() {
+    const {settings} = useClusterBaseInfo();
+    const isMetaDatabasesAvailable = useEmMetaAvailable();
+
+    return settings?.use_meta_proxy !== false && isMetaDatabasesAvailable;
+}

package/src/utils/hooks/useDebouncedValue.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+
+export function useDebouncedValue<T extends string | number | null>({
+    value,
+    onUpdate,
+    debounce = 200,
+}: {
+    value: T;
+    onUpdate?: (value: T) => void;
+    debounce?: number;
+}) {
+    const [currentValue, setCurrentValue] = React.useState<T>(value);
+
+    const timer = React.useRef<number>();
+
+    React.useEffect(() => {
+        setCurrentValue((prevValue) => {
+            if (prevValue !== value) {
+                return value;
+            }
+
+            return prevValue;
+        });
+    }, [value]);
+
+    const handleUpdate = (newValue: T) => {
+        setCurrentValue(newValue);
+
+        window.clearTimeout(timer.current);
+        timer.current = window.setTimeout(() => {
+            onUpdate?.(newValue);
+        }, debounce);
+    };
+    return [currentValue, handleUpdate] as const;
+}

package/src/utils/hooks/useDelayed.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+
+export function useDelayed(delay = 600, enabled = true) {
+    const [show, setShow] = React.useState(false);
+    const [key, setKey] = React.useState(0);
+
+    React.useEffect(() => {
+        if (!enabled) {
+            setShow(false);
+            return undefined;
+        }
+
+        setShow(false);
+
+        const timerId = window.setTimeout(() => {
+            setShow(true);
+        }, delay);
+
+        return () => {
+            window.clearTimeout(timerId);
+        };
+    }, [delay, enabled, key]);
+
+    const resetDelay = React.useCallback(() => {
+        setKey((prevKey) => prevKey + 1);
+    }, []);
+
+    return [show, resetDelay] as const;
+}

package/src/utils/hooks/useEventHandler.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+
+/**
+ * The hook returns a stable function (an empty list of dependencies),
+ * but this function always calls the actual function associated with the last render.
+ * The returned function should be used as an event handler or inside a useEffect.
+ */
+export function useEventHandler<T extends Function>(handler?: T) {
+    const ref = React.useRef<T | undefined>(handler);
+    React.useLayoutEffect(() => {
+        ref.current = handler;
+    }, [handler]);
+    // @ts-expect-error
+    return React.useCallback<T>((...args) => {
+        return ref.current?.(...args);
+    }, []);
+}

package/src/utils/hooks/useIsUserAllowedToMakeChanges.ts

@@ -0,0 +1,4 @@
+// Permissions are derived from the current whoami query result (per-database),
+// not from a global slice, so they always match the currently selected database.
+// See useWhoami for details.
+export {useIsUserAllowedToMakeChanges, useIsViewerUser} from './useWhoami';

package/src/utils/hooks/useLastQueryExecutionSettings.ts

@@ -0,0 +1,20 @@
+import {SETTING_KEYS} from '../../store/reducers/settings/constants';
+import type {QuerySettings} from '../../types/store/query';
+import {querySettingsValidationSchema} from '../query';
+
+import {useSetting} from './useSetting';
+
+export const useLastQueryExecutionSettings = () => {
+    const [lastStorageSettings, setLastSettings] = useSetting<QuerySettings | undefined>(
+        SETTING_KEYS.LAST_QUERY_EXECUTION_SETTINGS,
+    );
+    let lastSettings: QuerySettings | undefined;
+
+    try {
+        lastSettings = querySettingsValidationSchema.parse(lastStorageSettings);
+    } catch {
+        lastSettings = undefined;
+    }
+
+    return [lastSettings, setLastSettings] as const;
+};

package/src/utils/hooks/useMetaAuth.ts

@@ -0,0 +1,24 @@
+import {useLocation} from 'react-router-dom';
+
+import {checkIsHomePage} from '../../routes';
+import {useEmMetaAvailable} from '../../store/reducers/capabilities/hooks';
+
+function useMetaAuthState(path?: string) {
+    const location = useLocation();
+    const isHomePage = path ? checkIsHomePage(path) : checkIsHomePage(location.pathname);
+    const metaAuthAvailable = useEmMetaAvailable();
+
+    return {isHomePage, metaAuthAvailable};
+}
+
+export function useMetaAuth(path?: string) {
+    const {isHomePage, metaAuthAvailable} = useMetaAuthState(path);
+
+    return isHomePage && metaAuthAvailable;
+}
+
+export function useMetaAuthUnavailable(path?: string) {
+    const {isHomePage, metaAuthAvailable} = useMetaAuthState(path);
+
+    return isHomePage && !metaAuthAvailable;
+}

package/src/utils/hooks/useNodeDeveloperUIHref.ts

@@ -0,0 +1,41 @@
+import {backend} from '../../store';
+import {useClusterBaseInfo} from '../../store/reducers/cluster/cluster';
+import type {NodeAddress} from '../../types/additionalProps';
+import {uiFactory} from '../../uiFactory/uiFactory';
+import {
+    createDeveloperUIInternalPageHref,
+    createDeveloperUILinkWithNodeId,
+    useHasDeveloperUi,
+} from '../developerUI/developerUI';
+import {getBackendFromBalancerAndNodeId} from '../prepareBackend';
+
+import {useTypedSelector} from './useTypedSelector';
+
+export function useNodeDeveloperUIHref(node?: NodeAddress) {
+    const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
+
+    const {balancer = backend, settings} = useClusterBaseInfo();
+    const hasDeveloperUi = useHasDeveloperUi();
+    const useMetaProxy = uiFactory.useMetaProxy && settings?.use_meta_proxy !== false;
+
+    if (!hasDeveloperUi) {
+        return undefined;
+    }
+
+    // Only for multi-cluster version since there is no balancer in single-cluster mode
+    if (!singleClusterMode) {
+        const developerUIHref = getBackendFromBalancerAndNodeId(
+            node?.NodeId,
+            balancer,
+            useMetaProxy,
+        );
+        return developerUIHref ? createDeveloperUIInternalPageHref(developerUIHref) : undefined;
+    }
+
+    if (node?.NodeId) {
+        const developerUIHref = createDeveloperUILinkWithNodeId(node.NodeId);
+        return createDeveloperUIInternalPageHref(developerUIHref);
+    }
+
+    return undefined;
+}

package/src/utils/hooks/useQueryExecutionSettings.ts

@@ -0,0 +1,44 @@
+import {
+    useSnapshotReadWriteAvailable,
+    useTracingLevelOptionAvailable,
+} from '../../store/reducers/capabilities/hooks';
+import {SETTING_KEYS} from '../../store/reducers/settings/constants';
+import type {QuerySettings} from '../../types/store/query';
+import {
+    DEFAULT_QUERY_SETTINGS,
+    TRANSACTION_MODES,
+    isStreamingSupportedForMode,
+    querySettingsRestoreSchema,
+} from '../query';
+
+import {useQueryStreamingSetting} from './useQueryStreamingSetting';
+import {useSetting} from './useSetting';
+
+export const useQueryExecutionSettings = () => {
+    const enableTracingLevel = useTracingLevelOptionAvailable();
+    const enableSnapshotReadWrite = useSnapshotReadWriteAvailable();
+    const [storageSettings, setSettings] = useSetting<QuerySettings>(
+        SETTING_KEYS.QUERY_EXECUTION_SETTINGS,
+    );
+
+    const validatedSettings = querySettingsRestoreSchema.parse(storageSettings);
+    const [enableQueryStreaming] = useQueryStreamingSetting();
+
+    const settings: QuerySettings = {
+        ...validatedSettings,
+        timeout:
+            enableQueryStreaming && isStreamingSupportedForMode(validatedSettings.queryMode)
+                ? validatedSettings.timeout || null
+                : validatedSettings.timeout || undefined,
+        tracingLevel: enableTracingLevel
+            ? validatedSettings.tracingLevel
+            : DEFAULT_QUERY_SETTINGS.tracingLevel,
+        transactionMode:
+            !enableSnapshotReadWrite &&
+            validatedSettings.transactionMode === TRANSACTION_MODES.snapshotrw
+                ? DEFAULT_QUERY_SETTINGS.transactionMode
+                : validatedSettings.transactionMode,
+    };
+
+    return [settings, setSettings] as const;
+};