diff --git a/dashboard/src/components/awaiting/index.tsx b/dashboard/src/components/awaiting/index.tsx
@@ -1,34 +1,38 @@
import { type FC } from "react";
interface AwaitingProps {
- isFetching?: boolean;
- isNotFound?: boolean;
- NotFound?: JSX.Element;
- Skeleton?: JSX.Element;
- Component: JSX.Element;
+ isFetching?: boolean;
+ isNotFound?: boolean;
+ NotFound?: JSX.Element;
+ Skeleton?: JSX.Element;
+ Component: JSX.Element;
}
/**
* @param isFetching - returned from react-query
* which indicate the promise is still fetching.
- * @example
+ * @example
* const { data, isFetching} = useQuery();
*
* @param isNotFound - whether the data return is empty or not
* @param NotFound - Not found component
* @param Component - The actual component itself
- * @param Skeleton - Skeleton structure which will be presented
+ * @param Skeleton - Skeleton structure which will be presented
* when the data is still pending and fetching
*
*/
export const Awaiting: FC<AwaitingProps> = ({
- isFetching, isNotFound, NotFound, Skeleton, Component
+ isFetching,
+ isNotFound,
+ NotFound,
+ Skeleton,
+ Component,
}) => {
- if (isFetching) {
- return Skeleton
- } else if (isNotFound) {
- return NotFound
- } else {
- return Component
- }
-}
+ if (isFetching) {
+ return Skeleton;
+ }
+ if (isNotFound) {
+ return NotFound;
+ }
+ return Component;
+};
diff --git a/dashboard/src/features/nodes/dialogs/settings/node-config-editor.tsx b/dashboard/src/features/nodes/dialogs/settings/node-config-editor.tsx
@@ -1,7 +1,7 @@
import Editor from "@monaco-editor/react";
import { useTheme } from "@marzneshin/features/theme-switch";
import { useNodesSettings } from "./use-nodes-settings";
-import { Button } from "@marzneshin/components";
+import { Button, Awaiting } from "@marzneshin/components";
import { useTranslation } from "react-i18next";
import type { NodeType } from "../..";
@@ -15,6 +15,7 @@ export const NodeConfigEditor = ({
payloadValidity,
language,
config,
+ isFetching,
handleConfigSave,
handleConfigChange,
handleEditorValidation,
@@ -22,14 +23,19 @@ export const NodeConfigEditor = ({
return (
<>
- <Editor
- height="50vh"
- className="rounded-sm border"
- defaultLanguage={language}
- theme={theme === "dark" ? "vs-dark" : "github"}
- defaultValue={config}
- onChange={handleConfigChange}
- onValidate={handleEditorValidation}
+ <Awaiting
+ isFetching={isFetching}
+ Component={
+ <Editor
+ height="50vh"
+ className="rounded-sm border"
+ defaultLanguage={language}
+ theme={theme === "dark" ? "vs-dark" : "github"}
+ defaultValue={config}
+ onChange={handleConfigChange}
+ onValidate={handleEditorValidation}
+ />
+ }
/>
<Button
className="w-full"
diff --git a/dashboard/src/features/nodes/dialogs/settings/use-nodes-settings.ts b/dashboard/src/features/nodes/dialogs/settings/use-nodes-settings.ts
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
import YAML from "yaml";
import {
type NodeType,
@@ -14,22 +14,29 @@ const parseConfig = (data: {
return {
[NodeBackendSettingConfigFormat.PLAIN]: () => data.config,
[NodeBackendSettingConfigFormat.JSON]: () =>
- JSON.stringify(JSON.parse(data.config), null, "\t"),
+ JSON.stringify(JSON.parse(data.config), null, " "),
[NodeBackendSettingConfigFormat.YAML]: () =>
- YAML.stringify(YAML.parse(data.config), null, "\t"),
+ YAML.stringify(YAML.parse(data.config), null, " "),
}[data.format]();
};
+const parseLanguage = (format: NodeBackendSettingConfigFormat) =>
+ ({
+ [NodeBackendSettingConfigFormat.PLAIN]: "text",
+ [NodeBackendSettingConfigFormat.JSON]: "json",
+ [NodeBackendSettingConfigFormat.YAML]: "yaml",
+ })[format];
+
export const useNodesSettings = (entity: NodeType, backend: string) => {
- const { data } = useNodesSettingsQuery(entity, backend);
+ const { data, isFetching } = useNodesSettingsQuery(entity, backend);
const [config, setConfig] = useState<string>(data.config);
const [payloadValidity, setPayloadValidity] = useState<boolean>(true);
const mutate = useNodesSettingsMutation();
- const language = {
- [NodeBackendSettingConfigFormat.PLAIN]: "text",
- [NodeBackendSettingConfigFormat.JSON]: "json",
- [NodeBackendSettingConfigFormat.YAML]: "yaml",
- }[data.format];
+ const language = parseLanguage(data.format);
+
+ useEffect(() => {
+ if (!isFetching) setConfig(parseConfig(data));
+ }, [isFetching, data]);
const handleEditorValidation = (markers: any[]) => {
setPayloadValidity(!markers.length);
@@ -53,6 +60,7 @@ export const useNodesSettings = (entity: NodeType, backend: string) => {
return {
payloadValidity,
language,
+ isFetching,
config: parseConfig(data),
handleConfigSave,
handleConfigChange,