fixes

VKCOM · Jan 29, 2025 · b76d653 · b76d653
1 parent 9f890b4
commit b76d653
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 31 deletions.
diff --git a/statshouse-ui/src/admin/Admin.tsx b/statshouse-ui/src/admin/Admin.tsx
@@ -16,7 +16,8 @@ export function Admin(props: { yAxisSize: number; adminMode: boolean }) {
   return (
     <Routes>
       <Route path="create" element={<CreatePage yAxisSize={yAxisSize} />} />
-      <Route path="edit/:metricName" element={<FormPage adminMode={adminMode} yAxisSize={yAxisSize} />} />
+      <Route path="edit/:metricName/*" element={<FormPage adminMode={adminMode} yAxisSize={yAxisSize} />} />
+
       <Route path="dash/" element={<AdminDashControl />} />
     </Routes>
   );

diff --git a/statshouse-ui/src/admin/pages/FormPage.tsx b/statshouse-ui/src/admin/pages/FormPage.tsx
@@ -5,7 +5,7 @@
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
 import { Dispatch, useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import { Link, Route, Routes, useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import { IBackendMetric, IKind, IMetric, ITagAlias } from '../models/metric';
 import { MetricFormValuesContext, MetricFormValuesStorage } from '../storages/MetricFormValues';
 import { ReactComponent as SVGTrash } from 'bootstrap-icons/icons/trash.svg';
@@ -38,12 +38,15 @@ const METRIC_TYPE_KEYS: MetricType[] = Object.values(METRIC_TYPE) as MetricType[
 export function FormPage(props: { yAxisSize: number; adminMode: boolean }) {
   const { yAxisSize, adminMode } = props;
   const { metricName } = useParams();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const isHistoryRoute = location.pathname.endsWith('/history');
+  const mainPath = useMemo(() => `/admin/edit/${metricName}`, [metricName]);
 
   const [searchParams] = useSearchParams();
   const historicalMetricVersion = useMemo(() => searchParams.get('mv'), [searchParams]);
 
   const [initMetric, setInitMetric] = useState<Partial<IMetric> | null>(null);
-  const [isShowHistory, setIsShowHistory] = useState(false);
 
   const isHistoricalMetric = useMemo(
     () => !!initMetric?.version && !!historicalMetricVersion && initMetric.version !== Number(historicalMetricVersion),
@@ -81,19 +84,15 @@ export function FormPage(props: { yAxisSize: number; adminMode: boolean }) {
   }, [metricName]);
 
   const handleShowHistory = () => {
-    setIsShowHistory(true);
+    navigate('history');
   };
 
   const handleShowEdit = () => {
-    setIsShowHistory(false);
+    if (isHistoryRoute) {
+      navigate(mainPath);
+    }
   };
 
-  const onVersionClick = useCallback(() => {
-    handleShowEdit?.();
-  }, []);
-
-  const mainPath = useMemo(() => `/admin/edit/${metricName}`, [metricName]);
-
   return (
     <div className="container-xl pt-3 pb-3" style={{ paddingLeft: `${yAxisSize}px` }}>
       <StickyTop className="mb-3">
@@ -105,15 +104,15 @@ export function FormPage(props: { yAxisSize: number; adminMode: boolean }) {
             >
               {metricName}
               <span
-                className={`me-4 ${isShowHistory ? 'text-primary fw-normal small cursor-pointer' : 'text-secondary'}`}
-                style={{ cursor: isShowHistory ? 'pointer' : 'default' }}
+                className={`me-4 ${isHistoryRoute ? 'text-primary fw-normal small cursor-pointer' : 'text-secondary'}`}
+                style={{ cursor: isHistoryRoute ? 'pointer' : 'default' }}
                 onClick={handleShowEdit}
               >
                 : edit
               </span>
               <span
-                className={`me-4 ${isShowHistory ? 'text-secondary' : 'text-primary fw-normal small cursor-pointer'}`}
-                style={{ cursor: isShowHistory ? 'default' : 'pointer' }}
+                className={`me-4 ${isHistoryRoute ? 'text-secondary' : 'text-primary fw-normal small cursor-pointer'}`}
+                style={{ cursor: isHistoryRoute ? 'default' : 'pointer' }}
                 onClick={handleShowHistory}
               >
                 history
@@ -127,27 +126,23 @@ export function FormPage(props: { yAxisSize: number; adminMode: boolean }) {
           {isHistoricalMetric && <HistoryDashboardLabel />}
         </div>
       </StickyTop>
-
+      {initMetric?.id && (
+        <Routes>
+          <Route
+            path="history"
+            element={<HistoryList id={initMetric?.id.toString()} mainPath={mainPath} pathVersionParam={'?mv'} />}
+          />
+        </Routes>
+      )}
       {metricName && !initMetric ? (
         <div className="d-flex justify-content-center align-items-center mt-5">
           <div className="spinner-border text-secondary" role="status">
             <span className="visually-hidden">Loading...</span>
           </div>
         </div>
-      ) : isShowHistory && initMetric?.id ? (
-        <HistoryList
-          id={initMetric.id.toString()}
-          mainPath={mainPath}
-          onVersionClick={onVersionClick}
-          pathVersionParam={'?mv'}
-        />
       ) : (
         <MetricFormValuesStorage initialMetric={initMetric || {}}>
-          <EditForm
-            isReadonly={false} // !!metricName && metricName.startsWith('__')
-            adminMode={adminMode}
-            isHistoricalMetric={isHistoricalMetric}
-          />
+          <EditForm isReadonly={false} adminMode={adminMode} isHistoricalMetric={isHistoricalMetric} />
         </MetricFormValuesStorage>
       )}
     </div>

diff --git a/statshouse-ui/src/components2/HistoryList/HistoryLink.tsx b/statshouse-ui/src/components2/HistoryList/HistoryLink.tsx
@@ -7,7 +7,7 @@ import { HistoryShortInfo } from '@/api/history';
 export type IHistoryLink = {
   mainPath: string;
   pathVersionParam: string;
-  onVersionClick: () => void;
+  onVersionClick?: () => void;
   event?: HistoryShortInfo;
   timeChange?: string | 0 | undefined;
   isActualVersion?: boolean;

diff --git a/statshouse-ui/src/components2/HistoryList/HistoryList.tsx b/statshouse-ui/src/components2/HistoryList/HistoryList.tsx
@@ -7,7 +7,7 @@ import { fmtInputDateTime } from '@/view/utils2';
 
 export type IHistoryList = {
   id: string;
-  onVersionClick: () => void;
+  onVersionClick?: () => void;
   mainPath: string;
   pathVersionParam: string;
 };

diff --git a/statshouse-ui/src/store2/urlStore/urlStore.ts b/statshouse-ui/src/store2/urlStore/urlStore.ts
@@ -230,7 +230,7 @@ export const urlStore: StoreSlice<StatsHouseStore, UrlStore> = (setState, getSta
         s.dashboardLayoutEdit = status;
       });
       if (!status) {
-        setUrlStore((s) => {
+        setState((s) => {
           if (s.params.tabNum === '-2' || s.params.tabNum === '-3') {
             s.params.tabNum = '-1';
           }