StatsHouse UI: feature confirm change raw tag (#1967)

Author: vauweb

statshouse-ui/src/admin/pages/FormPage.tsx

@@ -29,6 +29,8 @@ import { queryClient } from '@/common/queryClient';
 import { API_HISTORY } from '@/api/history';
 import { HistoryList } from '@/components2/HistoryList';
 import { HistoryDashboardLabel } from '@/components2/HistoryDashboardLabel';
+import { ConfirmButton } from '@/components/UI/ConfirmButton';
+import { useStateBoolean } from '@/hooks';
 
 const METRIC_TYPE_KEYS: MetricType[] = Object.values(METRIC_TYPE) as MetricType[];
 const PATH_VERSION_PARAM = '?mv';
@@ -180,6 +182,26 @@ export function EditForm(props: { isReadonly: boolean; adminMode: boolean; isHis
     return false;
   }, [values.resolution]);
 
+  const [confirmRaw, setConfirmRaw] = useStateBoolean(false);
+
+  const confirm = useMemo(() => {
+    if (confirmRaw) {
+      return (
+        <div>
+          <div>Enabling the Raw option for a tag can make your previous data for this tag uninterpretable.</div>
+          <div>Please ensure that you have not sent data for this tag before.</div>
+        </div>
+      );
+    }
+    return undefined;
+  }, [confirmRaw]);
+
+  useEffect(() => {
+    if (success) {
+      setConfirmRaw.off();
+    }
+  }, [setConfirmRaw, setConfirmRaw.off, success]);
+
   return (
     <form key={values.version}>
       <div className="row mb-3">
@@ -374,7 +396,12 @@ export function EditForm(props: { isReadonly: boolean; adminMode: boolean; isHis
               key={ind}
               tagNumber={ind}
               value={tag}
-              onChange={(v) => dispatch({ type: 'alias', pos: ind, tag: v })}
+              onChange={(v) => {
+                dispatch({ type: 'alias', pos: ind, tag: v });
+                if (v.isRaw != null || v.raw_kind != null) {
+                  setConfirmRaw.on();
+                }
+              }}
               onChangeCustomMapping={(pos, from, to) => dispatch({ type: 'customMapping', tag: ind, pos, from, to })}
               disabled={isReadonly}
             />
@@ -648,9 +675,19 @@ export function EditForm(props: { isReadonly: boolean; adminMode: boolean; isHis
       </div>
 
       <div>
-        <button type="button" disabled={isRunning || isReadonly} className="btn btn-primary me-3" onClick={onSubmit}>
+        {/*<button type="button" disabled={isRunning || isReadonly} className="btn btn-primary me-3" onClick={onSubmit}>*/}
+        {/*  Save*/}
+        {/*</button>*/}
+        <ConfirmButton
+          type="button"
+          disabled={isRunning || isReadonly}
+          className="btn btn-primary me-3"
+          confirmHeader={<div className="fw-bold">Warning!</div>}
+          confirm={confirm}
+          onClick={onSubmit}
+        >
           Save
-        </button>
+        </ConfirmButton>
         {isRunning ? (
           <div className="spinner-border spinner-border-sm" role="status">
             <span className="visually-hidden">Loading...</span>

statshouse-ui/src/components/UI/ConfirmButton.tsx

@@ -0,0 +1,54 @@
+// Copyright 2025 V Kontakte LLC
+//
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+import { Button, type ButtonProps } from '@/components/UI/Button';
+import { Dialog } from '@/components/UI/Dialog';
+import { useStateBoolean } from '@/hooks';
+import { type ReactNode, useCallback } from 'react';
+
+export type ConfirmButtonProps = {
+  confirm?: ReactNode;
+  confirmHeader?: ReactNode;
+  children?: ReactNode;
+  onClick?: () => void;
+} & Omit<ButtonProps, 'ref' | 'onClick'>;
+
+export function ConfirmButton({ confirm, confirmHeader, children, onClick, ...props }: ConfirmButtonProps) {
+  const [open, setOpen] = useStateBoolean(false);
+  const onOpen = useCallback(() => {
+    if (confirm == null) {
+      onClick?.();
+      setOpen.off();
+    } else {
+      setOpen.on();
+    }
+  }, [confirm, onClick, setOpen]);
+  const onConfirm = useCallback(() => {
+    onClick?.();
+    setOpen.off();
+  }, [onClick, setOpen]);
+  return (
+    <>
+      <Button type="button" onClick={onOpen} {...props}>
+        {children}
+      </Button>
+      <Dialog open={open} onClose={setOpen.off}>
+        <div className="card">
+          <div className="card-header">{confirmHeader ?? 'Confirm ?'}</div>
+          <div className="card-body">{confirm}</div>
+          <div className="card-footer d-flex gap-2 justify-content-end">
+            <Button className="btn btn-primary" type="button" onClick={onConfirm}>
+              Confirm
+            </Button>
+            <Button className="btn btn-outline-primary" type="button" onClick={setOpen.off}>
+              Cancel
+            </Button>
+          </div>
+        </div>
+      </Dialog>
+    </>
+  );
+}