fix(frontend): multiple UX-UI fixes (#1869)

* fix(frontend): multiple UX-UI fixes * fixing e2e tests
kubeshop · Jan 24, 2023 · fae430e · fae430e
1 parent cf6b5fb
commit fae430e
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 13 deletions.
diff --git a/web/src/components/CreateTestPlugins/TraceID/steps/VariableName/VariableName.tsx b/web/src/components/CreateTestPlugins/TraceID/steps/VariableName/VariableName.tsx
@@ -21,14 +21,7 @@ const VariableName = () => {
   const onRefreshData = useCallback(async () => {
     const {id} = draftTest as ITraceIDValues;
     form.setFieldsValue({id});
-
-    try {
-      form.validateFields();
-      onIsFormValid(true);
-    } catch (err) {
-      onIsFormValid(false);
-    }
-  }, [draftTest, form, onIsFormValid]);
+  }, [draftTest, form]);
 
   useEffect(() => {
     onRefreshData();
@@ -38,13 +31,16 @@ const VariableName = () => {
     <Step.Step>
       <Step.FormContainer>
         <Step.Title>Enter the variable name to use for the Trace ID</Step.Title>
-        <Step.Subtitle>Please enter a variable name for the Trace ID or accept the default &apos;traceId&apos; name</Step.Subtitle>
+        <Step.Subtitle>
+          Please enter a variable name for the Trace ID or accept the default &apos;traceId&apos; name
+        </Step.Subtitle>
         <Form<ITraceIDValues>
           id={ComponentNames.TraceIdVariableName}
           autoComplete="off"
           form={form}
           layout="vertical"
           onFinish={handleSubmit}
+          onValuesChange={(_, {id}) => onIsFormValid(!!id)}
         >
           <VariableNameForm />
         </Form>

diff --git a/web/src/components/KeyValueRow/KeyValueRow.styled.ts b/web/src/components/KeyValueRow/KeyValueRow.styled.ts
@@ -8,7 +8,7 @@ export const Container = styled.div`
   border-radius: 2px;
   display: grid;
   gap: 16px;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr 80%;
   margin-bottom: 8px;
   min-height: 58px;
   padding: 7px 16px;

diff --git a/web/src/components/TestSpecForm/TestSpecForm.tsx b/web/src/components/TestSpecForm/TestSpecForm.tsx
@@ -1,5 +1,5 @@
 import {Button, Form, Tag} from 'antd';
-import {useState} from 'react';
+import {useEffect, useState} from 'react';
 
 import {SELECTOR_LANGUAGE_CHEAT_SHEET_URL} from 'constants/Common.constants';
 import {CompareOperator} from 'constants/Operator.constants';
@@ -12,6 +12,7 @@ import {TStructuredAssertion} from 'types/Assertion.types';
 import {singularOrPlural} from 'utils/Common';
 import AssertionCheckList from './AssertionCheckList';
 import useOnFieldsChange from './hooks/useOnFieldsChange';
+import useOnValuesChange from './hooks/useOnValuesChange';
 import SelectorInput from './SelectorInput';
 import SelectorSuggestions from './SelectorSuggestions';
 import * as S from './TestSpecForm.styled';
@@ -59,8 +60,13 @@ const TestSpecForm = ({
     AssertionSelectors.selectAttributeList(state, testId, runId, spanIdList)
   );
 
+  const onValuesChange = useOnValuesChange({setIsValid});
   const onFieldsChange = useOnFieldsChange();
 
+  useEffect(() => {
+    onValuesChange(null, {assertions, selector});
+  }, []);
+
   const selectorSuggestions = useAppSelector(TestSpecsSelectors.selectSelectorSuggestions);
   const prevSelector = useAppSelector(TestSpecsSelectors.selectPrevSelector);
 
@@ -83,6 +89,7 @@ const TestSpecForm = ({
         layout="vertical"
         data-cy="assertion-form"
         onFieldsChange={onFieldsChange}
+        onValuesChange={onValuesChange}
       >
         <S.FormSection>
           <S.FormSectionHeaderSelector>

diff --git a/web/src/components/TestSpecForm/hooks/useOnValuesChange.ts b/web/src/components/TestSpecForm/hooks/useOnValuesChange.ts
@@ -0,0 +1,18 @@
+import {useCallback} from 'react';
+import {IValues} from '../TestSpecForm';
+
+interface IProps {
+  setIsValid(isValid: boolean): void;
+}
+
+const useOnValuesChange = ({setIsValid}: IProps) => {
+  return useCallback(
+    (_: any, {assertions = []}: IValues) => {
+      const isValid = !assertions.find(assertion => !assertion?.left || !assertion?.right);
+      setIsValid(!!assertions.length && isValid);
+    },
+    [setIsValid]
+  );
+};
+
+export default useOnValuesChange;
diff --git a/web/src/components/TransactionRunResult/ExecutionStep.tsx b/web/src/components/TransactionRunResult/ExecutionStep.tsx
@@ -45,7 +45,7 @@ const ExecutionStep = ({
           <S.ExecutionStepName>{`${name} v${testVersion}`}</S.ExecutionStepName>
           <S.TagContainer>
             <S.TextTag>{trigger.method}</S.TextTag>
-            <S.TextTag $isLight>{trigger.entryPoint}</S.TextTag>
+            <S.EntryPointTag $isLight>{trigger.entryPoint}</S.EntryPointTag>
             {!stateIsFinished && <S.TextTag>{capitalize(state)}</S.TextTag>}
           </S.TagContainer>
         </S.Info>

diff --git a/web/src/components/TransactionRunResult/TransactionRunResult.styled.ts b/web/src/components/TransactionRunResult/TransactionRunResult.styled.ts
@@ -46,7 +46,7 @@ export const IconFail = styled(CloseCircleFilled)`
 
 export const TagContainer = styled.div`
   display: grid;
-  grid-template-columns: fit-content(8ch) fit-content(8ch) fit-content(8ch);
+  grid-template-columns: fit-content(20%) fit-content(100%) fit-content(20%);
 
   > span:nth-child(1) {
     border-radius: 2px 0px 0px 2px;
@@ -66,6 +66,13 @@ export const TextTag = styled(Tag)<{$isLight?: boolean}>`
   }
 `;
 
+export const EntryPointTag = styled(TextTag)`
+  && {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+
 export const ExecutionStepStatus = styled.div`
   color: ${({theme}) => theme.color.textLight};
   font-weight: 700;