feat(gui): detect if config is edited

[AnsonH]

Description

If we open an existing config in GUI editor, the "Save" button should appear only if there are changes to the Config instance in the store. Therefore, we should provide a mechanism to check whether the config instance has been edited.

Solutions

Few solutions are being explored:

• :-1: Using Formik's dirty property
• New methods to Config class for deep comparison

:-1: Formik's dirty property

If we're using Formik, according to the docs:

dirty: boolean Returns true if values are not deeply equal from initial values, false otherwise. dirty is a readonly computed property and should not be mutated directly.

However, there are problems when handling fields of type number. A "number" text field will hold a value of string (e.g., _settings.cpus: "1.5") in Formik, which has a different type of what the initial config will hold (e.g., _settings.cpus: 1.5). Due to difference in type, dirty will be false.

Manipulating onChange is also no easy task. The below code doesn't work when a user type 1., because parseFloat("1.") = 1. Hence, the user cannot type decimal points.

const formik = useFormikContext();

<TextInput
  name="_settings.cpus"
  onChange={(event) => {
    const value = parseFloat(event.target.value) || event.target.value;
    formik.setFieldValue("_settings.cpus", value);
  }}
  value={(formik.values as Config)._settings.cpus}
/>

[AnsonH]

The "New methods to Config class for deep comparison" method is chosen, since Formik is no longer used.