Add resize of Span Detail drawer (#1232)

kubeshop · Sep 19, 2022 · 0d6e8c7 · 0d6e8c7
1 parent 9f773ce
commit 0d6e8c7
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 83 deletions.
diff --git a/web/package.json b/web/package.json
@@ -70,7 +70,7 @@
     "types:generate": "openapi-typescript ../api/openapi.yaml --output ./src/types/Generated.types.ts",
     "grammar:generate": "lezer-generator ./src/utils/grammar/syntax.grammar -o ./src/utils/grammar/grammar.js",
     "types": "tsc",
-    "eslint": "eslint --ext=.js,.ts,.tsx ./src/**/* ./cypress/integration/**/*",
+    "eslint": "eslint --ext=.js,.ts,.tsx ./src/**/* ./cypress/e2e/**/*",
     "eject": "react-scripts eject",
     "cy:open": "cypress open",
     "cy:run": "cypress run",

diff --git a/web/src/components/Drawer/Drawer.styled.ts b/web/src/components/Drawer/Drawer.styled.ts
@@ -1,40 +1,37 @@
-import styled, {css} from 'styled-components';
+import styled, {createGlobalStyle, css} from 'styled-components';
+
+export const GlobalStyle = createGlobalStyle`
+  .reflex-container.vertical > .reflex-splitter {
+    border-left: ${({theme}) => `1px solid ${theme.color.borderLight}`};
+    border-right: ${({theme}) => `1px solid ${theme.color.borderLight}`};
+    position: relative;
+  }
+`;
 
 export const ButtonContainer = styled.div`
   position: absolute;
   right: -12px;
   top: 48px;
 `;
 
-export const Container = styled.div<{$isOpen: boolean}>`
+export const Content = styled.div<{$isOpen: boolean}>`
   background-color: ${({theme}) => theme.color.white};
   box-shadow: 0 20px 24px rgba(153, 155, 168, 0.18);
   height: 100%;
-  min-width: 30px;
   overflow: visible;
   position: relative;
-  transition: width ease 0.2s, min-width ease 0.2s;
-  width: 30px;
-  z-index: 2;
 
-  > div:first-child {
+  > div {
     opacity: 0;
+    pointer-events: none;
   }
 
   ${({$isOpen}) =>
     $isOpen &&
     css`
-      min-width: 270px;
-      transition: width ease 0.2s 0.05s, min-width ease 0.2s 0.05s;
-      width: 270px;
-
-      > div:first-child {
+      > div {
         opacity: 1;
+        pointer-events: auto;
       }
     `}
 `;
-
-export const Content = styled.div`
-  height: 100%;
-  overflow: hidden;
-`;
diff --git a/web/src/components/Drawer/Drawer.tsx b/web/src/components/Drawer/Drawer.tsx
@@ -1,29 +1,74 @@
 import {DoubleLeftOutlined, DoubleRightOutlined} from '@ant-design/icons';
 import {Button} from 'antd';
-import React, {useState} from 'react';
+import React, {ReactNode, useCallback, useState} from 'react';
+import {HandlerProps, ReflexContainer, ReflexElement, ReflexSplitter} from 'react-reflex';
 
 import * as S from './Drawer.styled';
 
+const LEFT_PANEL_MIN_SIZE = 30;
+const RIGHT_PANEL_MIN_SIZE = 400;
+
+const LEFT_PANEL_SIZES = {
+  CLOSE: LEFT_PANEL_MIN_SIZE,
+  OPEN: 270,
+};
+
 interface IProps {
-  children?: React.ReactNode;
+  leftPanel: ReactNode;
+  rightPanel: ReactNode;
 }
 
-const Drawer = ({children}: IProps) => {
-  const [isAsideOpen, setIsAsideOpen] = useState(false);
+const Drawer = ({leftPanel, rightPanel}: IProps) => {
+  const [sizeLeftPanel, setSizeLeftPanel] = useState(LEFT_PANEL_SIZES.CLOSE);
+  const [lastSizeLeftPanel, setLastSizeLeftPanel] = useState(0);
+
+  const toggleLeftPanel = useCallback(
+    lastSize => {
+      if (sizeLeftPanel <= LEFT_PANEL_SIZES.CLOSE) {
+        setSizeLeftPanel(lastSize || LEFT_PANEL_SIZES.OPEN);
+        return;
+      }
+      setSizeLeftPanel(LEFT_PANEL_SIZES.CLOSE);
+    },
+    [sizeLeftPanel]
+  );
+
+  const handleOnStopResize = useCallback(({domElement}: HandlerProps) => {
+    const element = domElement as HTMLElement;
+    const size = Math.round(element?.offsetWidth ?? 0);
+    setSizeLeftPanel(size);
+    setLastSizeLeftPanel(size <= LEFT_PANEL_SIZES.CLOSE ? 0 : size);
+  }, []);
+
+  const isOpen = sizeLeftPanel > LEFT_PANEL_SIZES.CLOSE;
 
   return (
-    <S.Container $isOpen={isAsideOpen}>
-      <S.Content>{children}</S.Content>
-      <S.ButtonContainer>
-        <Button
-          icon={isAsideOpen ? <DoubleLeftOutlined /> : <DoubleRightOutlined />}
-          onClick={() => setIsAsideOpen(isOpen => !isOpen)}
-          shape="circle"
-          size="small"
-          type="primary"
-        />
-      </S.ButtonContainer>
-    </S.Container>
+    <>
+      <S.GlobalStyle />
+      <ReflexContainer orientation="vertical">
+        <ReflexElement minSize={LEFT_PANEL_MIN_SIZE} onStopResize={handleOnStopResize} size={sizeLeftPanel}>
+          <S.Content $isOpen={isOpen}>{leftPanel}</S.Content>
+        </ReflexElement>
+
+        <ReflexSplitter>
+          <S.ButtonContainer>
+            <Button
+              icon={isOpen ? <DoubleLeftOutlined /> : <DoubleRightOutlined />}
+              onClick={event => {
+                event.stopPropagation();
+                toggleLeftPanel(lastSizeLeftPanel);
+              }}
+              onMouseDown={event => event.stopPropagation()}
+              shape="circle"
+              size="small"
+              type="primary"
+            />
+          </S.ButtonContainer>
+        </ReflexSplitter>
+
+        <ReflexElement minSize={RIGHT_PANEL_MIN_SIZE}>{rightPanel}</ReflexElement>
+      </ReflexContainer>
+    </>
   );
 };
 

diff --git a/web/src/components/RunDetailTest/RunDetailTest.tsx b/web/src/components/RunDetailTest/RunDetailTest.tsx
@@ -4,8 +4,8 @@ import TestResults from 'components/TestResults';
 import TestSpecForm from 'components/TestSpecForm';
 import {useTestSpecForm} from 'components/TestSpecForm/TestSpecForm.provider';
 import {useSpan} from 'providers/Span/Span.provider';
+import {useTestSpecs} from 'providers/TestSpecs/TestSpecs.provider';
 import {TTestRun} from 'types/TestRun.types';
-import { useTestSpecs } from '../../providers/TestSpecs/TestSpecs.provider';
 import * as S from './RunDetailTest.styled';
 import Visualization from './Visualization';
 
@@ -21,30 +21,31 @@ const RunDetailTest = ({run, testId}: IProps) => {
 
   return (
     <S.Container>
-      <Drawer>
-        <SpanDetail span={selectedSpan} />
-      </Drawer>
-
-      <S.Container>
-        <S.SectionLeft>
-          <Visualization runState={run.state} spans={run?.trace?.spans ?? []} />
-        </S.SectionLeft>
-        <S.SectionRight $shouldScroll={!selectedTestSpec}>
-          {isTestSpecFormOpen ? (
-            <TestSpecForm
-              onSubmit={onSubmit}
-              runId={run.id}
-              testId={testId}
-              {...formProps}
-              onCancel={() => {
-                close();
-              }}
-            />
-          ) : (
-            <TestResults />
-          )}
-        </S.SectionRight>
-      </S.Container>
+      <Drawer
+        leftPanel={<SpanDetail span={selectedSpan} />}
+        rightPanel={
+          <S.Container>
+            <S.SectionLeft>
+              <Visualization runState={run.state} spans={run?.trace?.spans ?? []} />
+            </S.SectionLeft>
+            <S.SectionRight $shouldScroll={!selectedTestSpec}>
+              {isTestSpecFormOpen ? (
+                <TestSpecForm
+                  onSubmit={onSubmit}
+                  runId={run.id}
+                  testId={testId}
+                  {...formProps}
+                  onCancel={() => {
+                    close();
+                  }}
+                />
+              ) : (
+                <TestResults />
+              )}
+            </S.SectionRight>
+          </S.Container>
+        }
+      />
     </S.Container>
   );
 };

diff --git a/web/src/components/RunDetailTrace/RunDetailTrace.styled.ts b/web/src/components/RunDetailTrace/RunDetailTrace.styled.ts
@@ -13,13 +13,14 @@ export const SearchContainer = styled.div`
 
 export const Section = styled.div`
   flex: 1;
+  height: 100%;
   overflow: hidden;
   width: 100%;
   z-index: 1;
 `;
 
 export const VisualizationContainer = styled.div`
-  height: calc(100% - 80px);
+  height: calc(100% - 52px);
   position: relative;
 `;
 

diff --git a/web/src/components/RunDetailTrace/RunDetailTrace.tsx b/web/src/components/RunDetailTrace/RunDetailTrace.tsx
@@ -37,30 +37,31 @@ const RunDetailTrace = ({run, testId}: IProps) => {
 
   return (
     <S.Container>
-      <Drawer>
-        <SpanDetail onCreateTestSpec={handleOnCreateSpec} searchText={searchText} span={span} />
-      </Drawer>
+      <Drawer
+        leftPanel={<SpanDetail onCreateTestSpec={handleOnCreateSpec} searchText={searchText} span={span} />}
+        rightPanel={
+          <S.Section>
+            <S.SearchContainer>
+              <Search runId={run.id} testId={testId} />
+            </S.SearchContainer>
 
-      <S.Section>
-        <S.SearchContainer>
-          <Search runId={run.id} testId={testId} />
-        </S.SearchContainer>
-
-        <S.VisualizationContainer>
-          <S.SwitchContainer $hasSpace={visualizationType === VisualizationType.Timeline}>
-            {run.state === TestState.FINISHED && (
-              <Switch
-                onChange={type => {
-                  TraceAnalyticsService.onSwitchDiagramView(type);
-                  setVisualizationType(type);
-                }}
-                type={visualizationType}
-              />
-            )}
-          </S.SwitchContainer>
-          <Visualization runState={run.state} spans={run?.trace?.spans ?? []} type={visualizationType} />
-        </S.VisualizationContainer>
-      </S.Section>
+            <S.VisualizationContainer>
+              <S.SwitchContainer $hasSpace={visualizationType === VisualizationType.Timeline}>
+                {run.state === TestState.FINISHED && (
+                  <Switch
+                    onChange={type => {
+                      TraceAnalyticsService.onSwitchDiagramView(type);
+                      setVisualizationType(type);
+                    }}
+                    type={visualizationType}
+                  />
+                )}
+              </S.SwitchContainer>
+              <Visualization runState={run.state} spans={run?.trace?.spans ?? []} type={visualizationType} />
+            </S.VisualizationContainer>
+          </S.Section>
+        }
+      />
     </S.Container>
   );
 };