fix(frontend): fix bug in test specs virtual list (#3657)

web/src/components/Layout/Layout.styled.ts

@@ -4,13 +4,13 @@ import styled, {css} from 'styled-components';
 export const Content = styled(LayoutAntd.Content)<{$hasMenu: boolean}>`
   display: flex;
   flex-direction: column;
-  padding-bottom: 40px;
 
   ${({$hasMenu}) =>
     $hasMenu &&
     css`
       height: 100%;
       overflow-y: scroll;
+      padding-bottom: 40px;
     `}
 `;
 

web/src/components/TestResults/TestResults.styled.ts

@@ -2,6 +2,8 @@ import {Button, Typography} from 'antd';
 import styled from 'styled-components';
 
 export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
   height: 100%;
   position: relative;
 `;

web/src/components/TestSpec/TestSpec.styled.ts

@@ -57,7 +57,10 @@ export const Selector = styled.div`
 
 export const Title = styled(Typography.Text)`
   color: ${({theme}) => theme.color.text};
+  font-family: monospace;
   font-size: ${({theme}) => theme.size.md};
+  line-height: 1.4;
+  padding: 4px 0;
 `;
 
 export const WarningIcon = styled(InfoCircleFilled)`

web/src/components/TestSpecs/TestSpecs.styled.ts

@@ -29,3 +29,22 @@ export const EmptyTitle = styled(Typography.Title).attrs({level: 3})``;
 export const SnippetsContainer = styled.div`
   margin: 16px 0;
 `;
+
+export const ListContainer = styled.div`
+  flex: 1;
+`;
+
+export const HiddenElementContainer = styled.div`
+  position: absolute;
+  visibility: hidden;
+  z-index: -1;
+`;
+
+export const HiddenElement = styled.div`
+  font-family: monospace;
+  font-size: ${({theme}) => theme.size.md};
+  line-height: 1.4;
+  padding: 4px 96px 76px 4px;
+  visibility: hidden;
+  width: 100%;
+`;

web/src/components/TestSpecs/TestSpecs.tsx

@@ -1,8 +1,12 @@
 import TestSpec from 'components/TestSpec';
-import AutoSizer, {Size} from 'react-virtualized-auto-sizer';
-import {FixedSizeList as List} from 'react-window';
 import AssertionResults, {TAssertionResultEntry} from 'models/AssertionResults.model';
+import {useCallback, useRef} from 'react';
+import AutoSizer, {Size} from 'react-virtualized-auto-sizer';
+import {VariableSizeList as List} from 'react-window';
+import {useAppSelector} from 'redux/hooks';
+import TestSpecsSelectors from 'selectors/TestSpecs.selectors';
 import Empty from './Empty';
+import * as S from './TestSpecs.styled';
 
 interface IProps {
   assertionResults?: AssertionResults;
@@ -13,37 +17,67 @@ interface IProps {
 }
 
 const TestSpecs = ({assertionResults, onDelete, onEdit, onOpen, onRevert}: IProps) => {
+  const hiddenElementRef = useRef<HTMLDivElement>(null);
+  const specs = useAppSelector(state => TestSpecsSelectors.selectSpecs(state));
+
+  const getItemSize = useCallback(
+    index => {
+      const item = assertionResults?.resultList?.[index];
+      const selector = item?.selector ?? '';
+      const {name = ''} = specs.find(spec => spec.selector === selector) ?? {};
+      const label = name || selector || 'All Spans';
+
+      if (hiddenElementRef.current) {
+        hiddenElementRef.current.innerText = label;
+        return hiddenElementRef.current.offsetHeight;
+      }
+
+      return 0;
+    },
+    [assertionResults?.resultList, specs]
+  );
+
   if (!assertionResults?.resultList?.length) {
     return <Empty />;
   }
 
   return (
-    <AutoSizer>
-      {({height, width}: Size) => (
-        <List
-          height={height}
-          itemCount={assertionResults.resultList.length}
-          itemData={assertionResults.resultList}
-          itemSize={10}
-          width={width}
-        >
-          {({index, data}) => {
-            const specResult = data[index];
-
-            return specResult.resultList.length ? (
-              <TestSpec
-                key={specResult.id}
-                onDelete={onDelete}
-                onEdit={onEdit}
-                onOpen={onOpen}
-                onRevert={onRevert}
-                testSpec={specResult}
-              />
-            ) : null;
-          }}
-        </List>
-      )}
-    </AutoSizer>
+    <>
+      <S.ListContainer>
+        <AutoSizer>
+          {({height, width}: Size) => (
+            <List
+              height={height}
+              itemCount={assertionResults.resultList.length}
+              itemData={assertionResults.resultList}
+              itemSize={getItemSize}
+              width={width}
+            >
+              {({index, data, style}) => {
+                const specResult = data[index];
+
+                return specResult.resultList.length ? (
+                  <div style={style}>
+                    <TestSpec
+                      key={specResult.id}
+                      onDelete={onDelete}
+                      onEdit={onEdit}
+                      onOpen={onOpen}
+                      onRevert={onRevert}
+                      testSpec={specResult}
+                    />
+                  </div>
+                ) : null;
+              }}
+            </List>
+          )}
+        </AutoSizer>
+      </S.ListContainer>
+
+      <S.HiddenElementContainer>
+        <S.HiddenElement ref={hiddenElementRef} />
+      </S.HiddenElementContainer>
+    </>
   );
 };