Repository: apache/airflow
File: airflow-core/src/airflow/ui/src/pages/Variables/ManageVariable/EditVariableButton.tsx (TypeScript)

Code before:
 */
import { Heading, useDisclosure } from "@chakra-ui/react";
import { useTranslation } from "react-i18next";
import { FiEdit } from "react-icons/fi";

import type { VariableResponse } from "openapi/requests/types.gen";
import { Dialog } from "src/components/ui";
import ActionButton from "src/components/ui/ActionButton";
import { useEditVariable } from "src/queries/useEditVariable";

import type { VariableBody } from "./VariableForm";
import VariableForm from "./VariableForm";

type Props = {
  readonly disabled: boolean;
  readonly variable: VariableResponse;
};

const EditVariableButton = ({ disabled, variable }: Props) => {
  const { t: translate } = useTranslation("admin");
  const { onClose, onOpen, open } = useDisclosure();
  const formatValue = (value: string): string => {
    try {
      const parsed = JSON.parse(value);
      return JSON.stringify(parsed, null, 2);
    } catch {
      return value;
    }
  };
  const initialVariableValue: VariableBody = {
    description: variable.description ?? "",
    key: variable.key,
    value: variable.value,
  };
  const { editVariable, error, isPending, setError } = useEditVariable(initialVariableValue, {
    onSuccessConfirm: onClose,
  });

  const handleClose = () => {
    setError(undefined);
    onClose();
  };

  return (
    <>
      <ActionButton
        actionName={translate("variables.edit")}
        disabled={disabled}
        icon={<FiEdit />}
        onClick={() => {
          onOpen();

Review comment (bug):
The formatting is incorrect. Please adjust the spacing properly.

```
    try {
      const parsed = JSON.parse(value);

      return JSON.stringify(parsed, null, 2);
    } catch {
      return value;
    }
```

Code after:
 */
import { Heading, useDisclosure } from "@chakra-ui/react";
import { useTranslation } from "react-i18next";
import { FiEdit } from "react-icons/fi";

import type { VariableResponse } from "openapi/requests/types.gen";
import { Dialog } from "src/components/ui";
import ActionButton from "src/components/ui/ActionButton";
import { useEditVariable } from "src/queries/useEditVariable";

import type { VariableBody } from "./VariableForm";
import VariableForm from "./VariableForm";

type Props = {
  readonly disabled: boolean;
  readonly variable: VariableResponse;
};

const formatValue = (value: string): string => {
  try {
    const parsed: unknown = JSON.parse(value);

    return JSON.stringify(parsed, undefined, 2);
  } catch {
    return value;
  }
};

const EditVariableButton = ({ disabled, variable }: Props) => {
  const { t: translate } = useTranslation("admin");
  const { onClose, onOpen, open } = useDisclosure();

  const initialVariableValue: VariableBody = {
    description: variable.description ?? "",
    key: variable.key,
    value: formatValue(variable.value),
  };
  const { editVariable, error, isPending, setError } = useEditVariable(initialVariableValue, {
    onSuccessConfirm: onClose,
  });

  const handleClose = () => {
    setError(undefined);
    onClose();
  };

  return (
    <>
      <ActionButton
        actionName={translate("variables.edit")}
        disabled={disabled}