feat: [WD-19015] CMS Server Config for maas.machine

Signed-off-by: Nkeiruka <[email protected]>

src/components/forms/ClusterSpecificInput.tsx

@@ -1,4 +1,4 @@
-import { FC, Fragment, useEffect, useState } from "react";
+import { FC, Fragment, ReactNode, useEffect, useState } from "react";
 import { CheckboxInput, Input } from "@canonical/react-components";
 import ResourceLink from "components/ResourceLink";
 import FormEditButton from "components/FormEditButton";
@@ -8,14 +8,14 @@ interface Props {
   id: string;
   isReadOnly: boolean;
   onChange: (value: ClusterSpecificValues) => void;
-  toggleReadOnly?: () => void;
   memberNames: string[];
+  toggleReadOnly?: () => void;
   values?: ClusterSpecificValues;
   canToggleSpecific?: boolean;
   isDefaultSpecific?: boolean;
   clusterMemberLinkTarget?: (member: string) => string;
   disabled?: boolean;
-  helpText?: string;
+  helpText?: string | ReactNode;
   placeholder?: string;
   classname?: string;
 }

src/pages/settings/MaasMachineSettingFormInput.tsx

@@ -0,0 +1,92 @@
+import { FC, useState } from "react";
+import { Button, Form, Icon, Input } from "@canonical/react-components";
+import type { ConfigField } from "types/config";
+import { getConfigId } from "./SettingForm";
+import ConfigFieldDescription from "pages/settings/ConfigFieldDescription";
+import ClusterSpecificInput from "components/forms/ClusterSpecificInput";
+import { useClusterMembers } from "context/useClusterMembers";
+import { ClusterSpecificValues } from "components/ClusterSpecificSelect";
+
+interface Props {
+  initialValue: string;
+  configField: ConfigField;
+  onSubmit: (newValue: string) => void;
+  onCancel: () => void;
+  readonly?: boolean;
+}
+
+const MaasMachineSettingFormInput: FC<Props> = ({
+  initialValue,
+  configField,
+  onSubmit,
+  onCancel,
+  readonly = false,
+}) => {
+  const [value, setValue] = useState<ClusterSpecificValues | string>(() => {
+    try {
+      return initialValue ? JSON.parse(initialValue) : "";
+    } catch (error) {
+      console.error("Failed to parse initialValue:", initialValue, error);
+      return "";
+    }
+  });
+
+  const { data: clusterMembers = [] } = useClusterMembers();
+  const memberNames = clusterMembers.map((member) => member.server_name);
+
+  const canBeReset = String(configField.default) !== String(value);
+
+  const resetToDefault = () => {
+    setValue(configField.default);
+  };
+
+  return (
+    <Form
+      onSubmit={(e) => {
+        e.preventDefault();
+        console.log(value);
+        onSubmit(JSON.stringify(value));
+      }}
+    >
+      <ClusterSpecificInput
+        aria-label={configField.key}
+        classname="input-wrapper"
+        id={getConfigId(configField.key)}
+        values={value as ClusterSpecificValues}
+        isReadOnly={readonly}
+        onChange={(value) => setValue(value)}
+        memberNames={memberNames}
+        disabled={readonly}
+        helpText={
+          <ConfigFieldDescription
+            description={configField.longdesc}
+            className="p-form-help-text"
+          />
+        }
+      />
+      {!readonly && (
+        <>
+          <Button appearance="base" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button appearance="positive" type="submit">
+            Save
+          </Button>
+          {canBeReset && (
+            <Button
+              className="reset-button"
+              appearance="base"
+              onClick={resetToDefault}
+              hasIcon
+            >
+              <Icon name="restart" className="flip-horizontally" />
+              <span>Reset to default</span>
+            </Button>
+          )}
+        </>
+      )}
+    </Form>
+  );
+};
+
+export default MaasMachineSettingFormInput;

src/pages/settings/SettingForm.tsx

@@ -10,6 +10,10 @@ import SettingFormInput from "./SettingFormInput";
 import SettingFormPassword from "./SettingFormPassword";
 import { useToastNotification } from "context/toastNotificationProvider";
 import ResourceLabel from "components/ResourceLabel";
+import MaasMachineSettingFormInput from "./MaasMachineSettingFormInput";
+import { ClusterSpecificValues } from "components/ClusterSpecificSelect";
+import { useSettings } from "context/useSettings";
+import { isClusteredServer } from "util/settings";
 
 export const getConfigId = (key: string) => {
   return key.replace(".", "___");
@@ -27,22 +31,24 @@ const SettingForm: FC<Props> = ({ configField, value, isLast }) => {
   const notify = useNotify();
   const toastNotify = useToastNotification();
   const queryClient = useQueryClient();
+  const { data: settings } = useSettings();
+  const isClustered = isClusteredServer(settings);
 
   const editRef = useRef<HTMLDivElement | null>(null);
 
   // Special cases
   const isTrustPassword = configField.key === "core.trust_password";
   const isLokiAuthPassword = configField.key === "loki.auth.password";
+  const isMaasMachine = configField.key === "maas.machine";
   const isSecret = isTrustPassword || isLokiAuthPassword;
 
   const settingLabel = (
     <ResourceLabel bold type="setting" value={configField.key} />
   );
 
   const onSubmit = (newValue: string | boolean) => {
-    const config = {
-      [configField.key]: String(newValue),
-    };
+    const config = { [configField.key]: String(newValue) };
+
     updateSettings(config)
       .then(() => {
         toastNotify.success(<>Setting {settingLabel} updated.</>);
@@ -100,6 +106,13 @@ const SettingForm: FC<Props> = ({ configField, value, isLast }) => {
                   onSubmit={onSubmit}
                   onCancel={onCancel}
                 />
+              ) : isClustered && isMaasMachine ? (
+                <MaasMachineSettingFormInput
+                  initialValue={value ?? ""}
+                  configField={configField}
+                  onSubmit={onSubmit}
+                  onCancel={onCancel}
+                />
               ) : (
                 <SettingFormInput
                   initialValue={value ?? ""}
@@ -125,9 +138,19 @@ const SettingForm: FC<Props> = ({ configField, value, isLast }) => {
               }}
               hasIcon
             >
-              <div className="readmode-value u-truncate">
-                {getReadModeValue()}
-              </div>
+              {isClustered && isMaasMachine ? (
+                <MaasMachineSettingFormInput
+                  initialValue={value ?? ""}
+                  configField={configField}
+                  onSubmit={onSubmit}
+                  onCancel={onCancel}
+                  readonly={true}
+                />
+              ) : (
+                <div className="readmode-value u-truncate">
+                  {getReadModeValue()}
+                </div>
+              )}
               <Icon name="edit" className="edit-icon" />
             </Button>
           )}