fix(frontend): minor UI issues (#3411)

kubeshop · Nov 29, 2023 · bd99e40 · bd99e40
1 parent 2b49c5c
commit bd99e40
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 5 deletions.
diff --git a/web/src/components/Inputs/TestSelection/TestItem.tsx b/web/src/components/Inputs/TestSelection/TestItem.tsx
@@ -20,9 +20,11 @@ const TestItem = ({test, onDelete, sortableId}: IProps) => {
   return (
     <S.TestItemContainer ref={setNodeRef} style={style} {...attributes}>
       <S.DragHandle {...listeners} />
-      <S.TestLink to={`/test/${test.id}`} target="_blank">
-        <span>{test.name}</span>
-      </S.TestLink>
+      <S.TestNameContainer>
+        <S.TestLink to={`/test/${test.id}`} target="_blank">
+          <span>{test.name}</span>
+        </S.TestLink>
+      </S.TestNameContainer>
       <S.DeleteIcon onClick={() => onDelete(sortableId)} />
     </S.TestItemContainer>
   );

diff --git a/web/src/components/Inputs/TestSelection/TestsSelection.styled.ts b/web/src/components/Inputs/TestSelection/TestsSelection.styled.ts
@@ -40,6 +40,9 @@ export const ItemListContainer = styled.ul`
 export const TestLink = styled(Link)`
   && {
     color: ${({theme}) => theme.color.text};
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 
     &:hover,
     &:visited,
@@ -48,3 +51,7 @@ export const TestLink = styled(Link)`
     }
   }
 `;
+
+export const TestNameContainer = styled.div`
+  overflow: hidden;
+`;
diff --git a/web/src/components/RunDetailTrigger/RunDetailTrigger.tsx b/web/src/components/RunDetailTrigger/RunDetailTrigger.tsx
@@ -14,7 +14,7 @@ import TestRun, {isRunStateFinished} from 'models/TestRun.model';
 import TestRunEvent from 'models/TestRunEvent.model';
 import {useTest} from 'providers/Test/Test.provider';
 import {useTestRun} from 'providers/TestRun/TestRun.provider';
-import {useMemo, useState} from 'react';
+import {useEffect, useMemo, useState} from 'react';
 import TestService from 'services/Test.service';
 import {TDraftTest} from 'types/Test.types';
 import * as S from './RunDetailTrigger.styled';
@@ -47,6 +47,10 @@ const RunDetailTrigger = ({test, run: {id, state, triggerResult, triggerTime}, r
 
   useShortcutWithDefault(form);
 
+  useEffect(() => {
+    form.setFieldsValue(initialValues);
+  }, [form, initialValues]);
+
   return (
     <S.Container>
       <Form<TDraftTest>

diff --git a/web/src/components/SkipTraceCollectionInfo/SkipTraceCollectionInfo.tsx b/web/src/components/SkipTraceCollectionInfo/SkipTraceCollectionInfo.tsx
@@ -1,6 +1,6 @@
 import {InfoCircleOutlined} from '@ant-design/icons';
 import {Typography} from 'antd';
-import {Link} from 'react-router-dom';
+import Link from 'components/Link';
 import * as S from './SkipTraceCollectionInfo.styled';
 
 interface IProps {