fix(frontend): fix test specs detail list (#3642)

kubeshop · Feb 14, 2024 · ff19525 · ff19525
1 parent 63af769
commit ff19525
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 42 deletions.
diff --git a/web/src/components/RunDetailTest/TestPanel.tsx b/web/src/components/RunDetailTest/TestPanel.tsx
@@ -38,7 +38,7 @@ interface IProps {
 
 const TestPanel = ({run, testId, runEvents}: IProps) => {
   const [query, updateQuery] = useSearchParams();
-  const {selectedSpan, onSetFocusedSpan, onSelectSpan} = useSpan();
+  const {selectedSpan, onSetFocusedSpan} = useSpan();
   const {remove, revert, selectedTestSpec, setSelectedSpec, setSelectorSuggestions, setPrevSelector, specs} =
     useTestSpecs();
   const {isOpen: isTestSpecFormOpen, formProps, onSubmit, open, close, isValid, onIsValid} = useTestSpecForm();

diff --git a/web/src/components/TestSpecDetail/Content.tsx b/web/src/components/TestSpecDetail/Content.tsx
@@ -1,5 +1,5 @@
-import {useEffect, useMemo, useRef} from 'react';
-import {FixedSizeList as List} from 'react-window';
+import {useCallback, useEffect, useMemo, useRef} from 'react';
+import {VariableSizeList as List} from 'react-window';
 import AutoSizer, {Size} from 'react-virtualized-auto-sizer';
 
 import {useAppSelector} from 'redux/hooks';
@@ -10,6 +10,7 @@ import {TAssertionResultEntry} from 'models/AssertionResults.model';
 import Header from './Header';
 import ResultCard from './ResultCard';
 import Search from './Search';
+import * as S from './TestSpecDetail.styled';
 
 interface IProps {
   onClose(): void;
@@ -53,51 +54,58 @@ const Content = ({
     }
   }, [results, selectedSpan]);
 
-  const itemSize = useMemo(() => {
-    const [, checkResults = []] = results[0];
+  const getItemSize = useCallback(
+    index => {
+      const [, checkResults = []] = results[index];
 
-    return checkResults.length * 72.59 + 40 + 16;
-  }, [results]);
+      return checkResults.length * 72.59 + 40 + 16;
+    },
+    [results]
+  );
 
   return (
     <>
-      <Header
-        affectedSpans={spanIds?.length ?? 0}
-        assertionsFailed={totalPassedChecks?.false ?? 0}
-        assertionsPassed={totalPassedChecks?.true ?? 0}
-        isDeleted={isDeleted}
-        isDraft={isDraft}
-        onClose={onClose}
-        onDelete={() => {
-          onDelete(testSpec.selector);
-          onClose();
-        }}
-        onEdit={() => {
-          onEdit(testSpec, name);
-        }}
-        onRevert={() => {
-          onRevert(originalSelector);
-        }}
-        selector={selector}
-        title={!selector && !name ? 'All Spans' : name}
-      />
+      <div>
+        <Header
+          affectedSpans={spanIds?.length ?? 0}
+          assertionsFailed={totalPassedChecks?.false ?? 0}
+          assertionsPassed={totalPassedChecks?.true ?? 0}
+          isDeleted={isDeleted}
+          isDraft={isDraft}
+          onClose={onClose}
+          onDelete={() => {
+            onDelete(testSpec.selector);
+            onClose();
+          }}
+          onEdit={() => {
+            onEdit(testSpec, name);
+          }}
+          onRevert={() => {
+            onRevert(originalSelector);
+          }}
+          selector={selector}
+          title={!selector && !name ? 'All Spans' : name}
+        />
 
-      <Search />
+        <Search />
+      </div>
 
-      <AutoSizer>
-        {({height, width}: Size) => (
-          <List
-            ref={listRef}
-            height={height}
-            itemCount={results.length}
-            itemData={results}
-            itemSize={itemSize}
-            width={width}
-          >
-            {ResultCard}
-          </List>
-        )}
-      </AutoSizer>
+      <S.DrawerRow>
+        <AutoSizer>
+          {({height, width}: Size) => (
+            <List
+              ref={listRef}
+              height={height}
+              itemCount={results.length}
+              itemData={results}
+              itemSize={getItemSize}
+              width={width}
+            >
+              {ResultCard}
+            </List>
+          )}
+        </AutoSizer>
+      </S.DrawerRow>
     </>
   );
 };

diff --git a/web/src/components/TestSpecDetail/TestSpecDetail.styled.ts b/web/src/components/TestSpecDetail/TestSpecDetail.styled.ts
@@ -37,6 +37,15 @@ export const CardContainer = styled(Card)<{$isSelected: boolean; $type: Semantic
 export const DrawerContainer = styled(Drawer)`
   position: absolute;
   overflow: hidden;
+
+  .ant-drawer-body {
+    display: flex;
+    flex-direction: column;
+  }
+`;
+
+export const DrawerRow = styled.div`
+  flex: 1;
 `;
 
 export const GridContainer = styled.div`