added splitter open and close

apps/web-tss/src/components/features/ShareMenu/WorkspaceAvatar.tsx

@@ -1,5 +1,5 @@
 import type React from 'react';
-import ApartmentBuilding from '@/components/ui/icons/NucleoIconFilled/apartment-building';
+import ApartmentBuilding from '@/components/ui/icons/NucleoIconOutlined/apartment-building';
 import { cn } from '@/lib/classMerge';
 
 export const WorkspaceAvatar: React.FC<{

apps/web-tss/src/components/features/sidebars/SidebarSettings.tsx

@@ -1,11 +1,11 @@
 import React, { useMemo } from 'react';
 import { useIsUserAdmin, useIsUserRegistered } from '@/api/buster_rest/users/useGetUserInfo';
 import { BackButton } from '@/components/ui/buttons/BackButton';
+import ApartmentBuilding from '@/components/ui/icons/NucleoIconOutlined/apartment-building';
 import CircleUser from '@/components/ui/icons/NucleoIconOutlined/circle-user';
 import { createSidebarGroup } from '@/components/ui/sidebar/create-sidebar-item';
-import ApartmentBuilding from '../../ui/icons/NucleoIconOutlined/apartment-building';
 import LockCircle from '../../ui/icons/NucleoIconOutlined/lock-circle';
-import { type ISidebarGroup, type ISidebarItem, Sidebar } from '../../ui/sidebar';
+import { type ISidebarGroup, Sidebar } from '../../ui/sidebar';
 import { SidebarUserFooter } from './SidebarUserFooter';
 
 const accountItems: ISidebarGroup = createSidebarGroup({

apps/web-tss/src/context/BusterAssets/metric-server/metricChartEditServerAssetContext.tsx

@@ -0,0 +1,19 @@
+import { lazy, Suspense } from 'react';
+import { CircleSpinnerLoaderContainer } from '../../../components/ui/loaders';
+import { useGetMetricParams } from './useGetMetricParams';
+
+const MetricEditController = lazy(() =>
+  import('@/controllers/MetricController/MetricViewChart/MetricEditController').then((x) => ({
+    default: x.MetricEditController,
+  }))
+);
+
+export const component = () => {
+  const { metricId, metric_version_number } = useGetMetricParams();
+
+  return (
+    <Suspense fallback={<CircleSpinnerLoaderContainer />}>
+      <MetricEditController metricId={metricId} />
+    </Suspense>
+  );
+};

apps/web-tss/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricEditControllerHeader.tsx

@@ -1,31 +1,26 @@
-import React from 'react';
+import type React from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { Button } from '@/components/ui/buttons';
 import { Xmark } from '@/components/ui/icons';
 import { AppTooltip } from '@/components/ui/tooltip';
 import { Text } from '@/components/ui/typography';
+import { useMetricEditToggle } from '@/layouts/AssetContainer/MetricAssetContainer/MetricContextProvider';
 
-export const MetricEditControllerHeader: React.FC = React.memo(() => {
-  const closeSecondaryView = () => {
-    alert('TODO: Implement');
-    //useChatLayoutContextSelector((x) => x.closeSecondaryView)
-  };
-  const selectedFileViewSecondary = () => {
-    alert('TODO: Implement');
-  };
+export const MetricEditControllerHeader: React.FC = () => {
+  const toggleEditMode = useMetricEditToggle();
 
-  useHotkeys('esc', () => closeSecondaryView(), {
-    enabled: !!selectedFileViewSecondary,
+  useHotkeys('esc', () => toggleEditMode(false), {
+    enabled: true,
   });
 
   return (
     <div className={'flex h-[38px] min-h-[38px] items-center justify-between border-b px-4 py-2.5'}>
       <Text>Edit chart</Text>
       <AppTooltip title="Close" shortcuts={['esc']}>
-        <Button onClick={closeSecondaryView} variant="ghost" prefix={<Xmark />} />
+        <Button onClick={() => toggleEditMode(false)} variant="ghost" prefix={<Xmark />} />
       </AppTooltip>
     </div>
   );
-});
+};
 
 MetricEditControllerHeader.displayName = 'MetricEditControllerHeader';

apps/web-tss/src/layouts/AssetContainer/MetricAssetContainer/MetricContextProvider.tsx

@@ -1,13 +1,16 @@
-import { type ParsedLocation, useLocation } from '@tanstack/react-router';
+import { type ParsedLocation, useLocation, useNavigate } from '@tanstack/react-router';
 import { useCallback, useRef } from 'react';
 import { createContext, useContextSelector } from 'use-context-selector';
 import type { AppSplitterRef } from '@/components/ui/layouts/AppSplitter';
+import { useGetMetricParams } from '@/context/Metrics/useGetMetricParams';
 import { useMemoizedFn } from '@/hooks/useMemoizedFn';
 
 const useMetricAssetContext = () => {
   const splitterRef = useRef<AppSplitterRef>(null);
   const pathname = useLocation({ select: useCallback((x: ParsedLocation) => x.pathname, []) });
   const isMetricEditMode = pathname.includes('/chart/edit');
+  const { metricId } = useGetMetricParams();
+  const navigate = useNavigate();
 
   const toggleEditMode = useMemoizedFn(async (v?: boolean) => {
     const toggleOff = v !== undefined ? v : !isMetricEditMode;
@@ -19,8 +22,21 @@ const useMetricAssetContext = () => {
 
     if (!toggleOff) {
       await splitterRef.current?.animateWidth('0px', 'right', 300);
+      await navigate({
+        to: '/app/metrics/$metricId/chart',
+        params: { metricId },
+      });
     } else {
-      await splitterRef.current?.animateWidth('300px', 'right', 300);
+      splitterRef.current?.animateWidth('300px', 'right', 300);
+      await navigate({
+        to: '/app/metrics/$metricId/chart/edit',
+        mask: {
+          to: '/app/metrics/$metricId/chart/edit',
+          params: { metricId },
+          unmaskOnReload: true,
+        },
+        params: { metricId },
+      });
     }
   });
 

apps/web-tss/src/layouts/AssetContainer/MetricAssetContainer/MetricHeaderButtons.tsx

@@ -37,7 +37,7 @@ export const MetricContainerHeaderButtons: React.FC<{
 
   return (
     <FileButtonContainer>
-      {isEditor && !isViewingOldVersion && <EditChartButton metricId={metricId} />}
+      {isEditor && !isViewingOldVersion && <EditChartButton />}
       {isEffectiveOwner && !isViewingOldVersion && <ShareMetricButton metricId={metricId} />}
       <ThreeDotMenuButton
         metricId={metricId}
@@ -54,32 +54,18 @@ export const MetricContainerHeaderButtons: React.FC<{
 
 MetricContainerHeaderButtons.displayName = 'MetricContainerHeaderButtons';
 
-const EditChartButton = React.memo(({ metricId }: { metricId: string }) => {
+const EditChartButton = React.memo(() => {
   const isChartEditMode = useIsMetricEditMode();
   const toggleEditMode = useMetricEditToggle();
 
   return (
-    <Link
-      to={isChartEditMode ? '/app/metrics/$metricId/chart' : '/app/metrics/$metricId/chart/edit'}
-      mask={
-        isChartEditMode
-          ? {
-              to: '/app/metrics/$metricId/chart',
-              params: { metricId },
-              unmaskOnReload: true,
-            }
-          : undefined
-      }
-      params={{ metricId }}
+    <SelectableButton
+      tooltipText="Edit chart"
+      icon={<SquareChartPen />}
       data-testid="edit-chart-button"
       onClick={() => toggleEditMode()}
-    >
-      <SelectableButton
-        tooltipText="Edit chart"
-        icon={<SquareChartPen />}
-        selected={isChartEditMode}
-      />
-    </Link>
+      selected={isChartEditMode}
+    />
   );
 });
 EditChartButton.displayName = 'EditChartButton';

apps/web-tss/src/routes/app/_app/_asset/metrics.$metricId.chart.edit.tsx

@@ -1,9 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router';
+import * as ServerEditChartAsset from '@/context/BusterAssets/metric-server/metricChartEditServerAssetContext';
 
 export const Route = createFileRoute('/app/_app/_asset/metrics/$metricId/chart/edit')({
-  component: RouteComponent,
+  ...ServerEditChartAsset,
 });
-
-function RouteComponent() {
-  return <div>Hello "/app/_app/_asset/metrics/$metricId/chart/edit"!</div>;
-}