message: t()

in frontend/src/containers/EditMetric.tsx [67:187]


          message: t("EditMetricScreen.MetricSuccessfullyEdited"),
        },
        metrics: newMetrics,
        showTitle: state.showTitle !== false,
        oneMetricPerRow: state.oneMetricPerRow === true,
        metricTitle: state.metricTitle || "",
        datasetType: state.datasetType || undefined,
      }
    );
  };

  const handleSymbol = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.value === "Percentage") {
      setsymbolType("Percentage");
    } else if (e.target.value === "Currency") {
      setsymbolType("Currency");
    } else if (e.target.value === "") {
      setsymbolType("SelectAnOption");
    }
  };

  const onCancel = () => {
    history.push(
      (state && state.origin) || `/admin/dashboard/${dashboardId}/add-metrics`,
      {
        metrics: state && state.metrics ? [...state.metrics] : [],
        showTitle: state && state.showTitle !== false,
        oneMetricPerRow: state && state.oneMetricPerRow === true,
        metricTitle: (state && state.metricTitle) || "",
        datasetType: state.datasetType || undefined,
      }
    );
  };

  if (!state || !state.metrics || !state.metric) {
    setTimeout(onCancel, 1000);
    return null;
  }

  const crumbs = [
    {
      label: t("Dashboards"),
      url: "/admin/dashboards",
    },
    {
      label: dashboard?.name,
      url: `/admin/dashboard/edit/${dashboardId}`,
    },
  ];

  if (!loading) {
    crumbs.push({
      label: t("EditMetricScreen.EditMetric"),
      url: "",
    });
  }

  return (
    <>
      <Breadcrumbs crumbs={crumbs} />

      {loading || loadingSettings ? (
        <Spinner
          className="text-center margin-top-9"
          label={t("LoadingSpinnerLabel")}
        />
      ) : (
        <>
          <div className="grid-row">
            <div className="grid-col-auto">
              <h1 id="editMetricFormHeader">
                {t("EditMetricScreen.EditMetric")}
              </h1>

              <form
                aria-labelledby="editMetricFormHeader"
                onSubmit={handleSubmit(onSubmit)}
                className="usa-form usa-form--large"
                data-testid="EditMetricForm"
              >
                <fieldset className="usa-fieldset">
                  <legend className="usa-hint grid-col-6">
                    {t("EditMetricScreen.Configure")}
                  </legend>

                  <TextField
                    id="title"
                    name="title"
                    label={t("EditMetricScreen.MetricTitle")}
                    hint={t("EditMetricScreen.MetricTitleHint")}
                    register={register}
                    defaultValue={state.metric.title}
                    error={
                      errors.title && t("EditMetricScreen.MetricTitleError")
                    }
                    required
                  />

                  <NumberField
                    id="value"
                    name="value"
                    label={t("EditMetricScreen.MetricValue")}
                    hint={t("EditMetricScreen.MetricValueHint")}
                    register={register}
                    error={
                      errors.value && t("EditMetricScreen.MetricValueError")
                    }
                    className="width-50"
                    defaultValue={state.metric.value}
                    step={0.01}
                    required
                  />

                  <Dropdown
                    id="percentage"
                    name="percentage"
                    label={t("NumberFormat")}
                    hint={t("AddMetricScreen.MetricFormatHint")}
                    options={[
                      { value: "", label: t("SelectAnOption") },
                      {