🐛🦟 1003 fixing minor frontend bugs (#1008)

* 1003 fixing minor frontend bugs|

* 1003 fixing minor frontend bugs|

web/src/App.less

@@ -29,4 +29,5 @@ code {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  width: inherit;
 }

web/src/components/AdvancedEditor/hooks/useAutoComplete.ts

@@ -55,7 +55,7 @@ const useAutoComplete = ({testId, runId}: IProps) => {
         const uniqueList = uniqBy(attributeList, 'key');
         const identifierText = state.doc.sliceString(nodeBefore.from, nodeBefore.to);
         const isIdentifier = nodeBefore.name === Tokens.Identifier;
-        const list = isIdentifier ? uniqueList.filter(({key}) => key.startsWith(identifierText)) : uniqueList;
+        const list = isIdentifier ? uniqueList.filter(({key}) => key.toLowerCase().includes(identifierText.toLowerCase())) : uniqueList;
 
         return {
           from: isIdentifier ? nodeBefore.from : word.from,

web/src/components/AssertionForm/AssertionForm.tsx

@@ -134,7 +134,9 @@ const AssertionForm: React.FC<TAssertionFormProps> = ({
         />
 
         <div style={{marginBottom: 8}}>
-          <Typography.Text>Define the checks to run against each span selected</Typography.Text>
+          <Typography.Text>
+            Define the checks to run as some checks are against the collection ({spanIdList.length} spans)
+          </Typography.Text>
           <TooltipQuestion
             title={`
             Add one of more checks to be run against the span(s) that match your filter.

web/src/components/CreateTestPlugins/Rpc/index.ts → web/src/components/CreateTestPlugins/Grpc/index.ts

@@ -1,2 +1,2 @@
 // eslint-disable-next-line no-restricted-exports
-export {default} from './Rpc';
+export {default} from './Grpc';

web/src/components/CreateTestPlugins/Rpc/steps/RequestDetails/RequestDetailsForm.tsx → web/src/components/CreateTestPlugins/Grpc/steps/RequestDetails/RequestDetailsForm.tsx

@@ -1,7 +1,7 @@
 import {Col, Form, Input, Row, Select} from 'antd';
 import * as Step from 'components/CreateTestPlugins/Step.styled';
 import {useCallback, useEffect, useState} from 'react';
-import RpcService from 'services/Triggers/Rpc.service';
+import GrpcService from 'services/Triggers/Grpc.service';
 import {IRpcValues, TDraftTestForm} from 'types/Test.types';
 import RequestDetailsAuthInput from '../../../Rest/steps/RequestDetails/RequestDetailsAuthInput/RequestDetailsAuthInput';
 import RequestDetailsUrlInput from '../../../Rest/steps/RequestDetails/RequestDetailsUrlInput';
@@ -19,7 +19,7 @@ const RequestDetailsForm = ({form}: IProps) => {
   const getMethodList = useCallback(async () => {
     if (protoFile) {
       const fileText = await protoFile.text();
-      const list = RpcService.getMethodList(fileText);
+      const list = GrpcService.getMethodList(fileText);
 
       setMethodList(list);
     } else {

web/src/components/CreateTestPlugins/Plugins.ts

@@ -2,12 +2,12 @@ import {IPluginComponentMap} from 'types/Plugins.types';
 import {SupportedPlugins} from 'constants/Plugins.constants';
 import Postman from './Postman';
 import Rest from './Rest';
-import Rpc from './Rpc';
+import Grpc from './Grpc';
 
 export const PluginsComponentMap: Record<SupportedPlugins, IPluginComponentMap> = {
   [SupportedPlugins.REST]: Rest,
   [SupportedPlugins.Messaging]: {},
-  [SupportedPlugins.RPC]: Rpc,
+  [SupportedPlugins.GRPC]: Grpc,
   [SupportedPlugins.Postman]: Postman,
   [SupportedPlugins.OpenAPI]: {},
 };

web/src/components/CreateTestPlugins/Postman/steps/UploadCollection/fields/CollectionFileField.tsx

@@ -1,5 +1,5 @@
 import {Form} from 'antd';
-import RequestDetailsFileInput from 'components/CreateTestPlugins/Rpc/steps/RequestDetails/RequestDetailsFileInput';
+import RequestDetailsFileInput from 'components/CreateTestPlugins/Grpc/steps/RequestDetails/RequestDetailsFileInput';
 import React from 'react';
 import {IPostmanValues, TDraftTestForm} from '../../../../../../types/Test.types';
 import {useUploadCollectionCallback} from '../hooks/useUploadCollectionCallback';

web/src/components/CreateTestPlugins/Postman/steps/UploadCollection/fields/EnvFileField.tsx

@@ -1,6 +1,6 @@
 import {Form} from 'antd';
 import {IPostmanValues, TDraftTestForm} from 'types/Test.types';
-import RequestDetailsFileInput from '../../../../Rpc/steps/RequestDetails/RequestDetailsFileInput';
+import RequestDetailsFileInput from '../../../../Grpc/steps/RequestDetails/RequestDetailsFileInput';
 import {useUploadEnvFileCallback} from '../hooks/useUploadEnvFileCallback';
 
 interface IProps {

web/src/components/EditTestForm/EditRequestDetails/Grpc/Grpc.tsx

@@ -1,5 +1,5 @@
 import {useCallback, useEffect} from 'react';
-import RequestDetailsForm from 'components/CreateTestPlugins/Rpc/steps/RequestDetails/RequestDetailsForm';
+import RequestDetailsForm from 'components/CreateTestPlugins/Grpc/steps/RequestDetails/RequestDetailsForm';
 import {IRpcValues, TDraftTestForm, TGRPCRequest} from 'types/Test.types';
 import * as S from '../../EditTestForm.styled';
 import {IFormProps} from '../EditRequestDetails';

web/src/components/RunTopPanel/RunTopPanel.styled.ts

@@ -1,21 +1,25 @@
+import {ReflexContainer, ReflexElement} from 'react-reflex';
 import styled from 'styled-components';
 
-export const Container = styled.main`
+export const Container = styled(ReflexContainer)`
   display: flex;
   height: 100%;
   width: 100%;
+
+  &.vertical > .reflex-splitter {
+    border-color: transparent;
+    background: transparent;
+  }
 `;
 
-export const LeftPanel = styled.div`
+export const LeftPanel = styled(ReflexElement)`
   display: flex;
-  flex-basis: 50%;
   flex-direction: column;
   padding: 24px;
 `;
 
-export const RightPanel = styled.div`
+export const RightPanel = styled(ReflexElement)`
   background: ${({theme}) => theme.color.white};
   box-shadow: 0 20px 24px rgba(153, 155, 168, 0.18);
-  flex-basis: 50%;
   overflow-y: scroll;
 `;

web/src/components/RunTopPanel/RunTopPanel.tsx

@@ -1,4 +1,5 @@
 import {useState} from 'react';
+import {ReflexSplitter} from 'react-reflex';
 
 import Diagram from 'components/Diagram';
 import {SupportedDiagrams} from 'components/Diagram/Diagram';
@@ -18,8 +19,8 @@ const RunTopPanel = ({run}: IProps) => {
   const {onSearch, selectedSpan} = useSpan();
 
   return (
-    <S.Container>
-      <S.LeftPanel>
+    <S.Container orientation="vertical">
+      <S.LeftPanel minSize={600}>
         <DiagramSwitcher
           onTypeChange={type => {
             TraceAnalyticsService.onSwitchDiagramView(type);
@@ -30,7 +31,8 @@ const RunTopPanel = ({run}: IProps) => {
         />
         <Diagram trace={run.trace!} runState={run.state} type={diagramType} />
       </S.LeftPanel>
-      <S.RightPanel>
+      <ReflexSplitter />
+      <S.RightPanel minSize={500}>
         <SpanDetail span={selectedSpan} />
       </S.RightPanel>
     </S.Container>

web/src/constants/Plugins.constants.ts

@@ -11,7 +11,7 @@ const pokeshopPostmanFile = new File([JSON.stringify(pokeshopPostmanData)], 'pok
 export enum SupportedPlugins {
   REST = 'REST',
   Messaging = 'Messaging',
-  RPC = 'RPC',
+  GRPC = 'GRPC',
   Postman = 'Postman',
   OpenAPI = 'OpenAPI',
 }
@@ -26,7 +26,7 @@ const Default: IPlugin = {
   stepList: [
     {
       id: 'plugin-selection',
-      name: 'Select a plugin',
+      name: 'Select test type',
       title: 'Choose the way of creating a test',
       component: 'SelectPlugin',
       isDefaultValid: true,
@@ -81,10 +81,10 @@ const Rest: IPlugin = {
   ],
 };
 
-const RPC: IPlugin = {
-  name: SupportedPlugins.RPC,
-  title: 'RPC Request',
-  description: 'Test and debug your RPC request',
+const GRPC: IPlugin = {
+  name: SupportedPlugins.GRPC,
+  title: 'GRPC Request',
+  description: 'Test and debug your GRPC request',
   isActive: true,
   type: TriggerTypes.grpc,
   demoList: [
@@ -193,13 +193,13 @@ const OpenAPI: IPlugin = {
 
 export const Plugins: Record<SupportedPlugins, IPlugin> = {
   [SupportedPlugins.REST]: Rest,
-  [SupportedPlugins.RPC]: RPC,
+  [SupportedPlugins.GRPC]: GRPC,
   [SupportedPlugins.Postman]: Postman,
   [SupportedPlugins.Messaging]: Messaging,
   [SupportedPlugins.OpenAPI]: OpenAPI,
 };
 
 export const TriggerTypeToPlugin = {
   [TriggerTypes.http]: Plugins.REST,
-  [TriggerTypes.grpc]: Plugins.RPC,
+  [TriggerTypes.grpc]: Plugins.GRPC,
 } as const;

web/src/pages/CreateTest/CreateTestContent.tsx

@@ -1,3 +1,4 @@
+import {useEffect} from 'react';
 import {useNavigate} from 'react-router-dom';
 import CreateTestHeader from 'components/CreateTestHeader';
 import CreateTestSteps from 'components/CreateTestSteps';
@@ -6,12 +7,24 @@ import * as S from './CreateTest.styled';
 
 const CreateTestContent: React.FC = () => {
   const navigate = useNavigate();
-  const {stepList, activeStep, pluginName, onGoTo, isLoading} = useCreateTest();
+  const {stepList, activeStep, pluginName, onGoTo, onReset, isLoading} = useCreateTest();
+
+  useEffect(() => {
+    return () => {
+      onReset();
+    };
+  }, []);
 
   return (
     <S.Wrapper>
       <CreateTestHeader onBack={() => navigate('/')} />
-      <CreateTestSteps isLoading={isLoading} onGoTo={onGoTo} stepList={stepList} selectedKey={activeStep} pluginName={pluginName} />
+      <CreateTestSteps
+        isLoading={isLoading}
+        onGoTo={onGoTo}
+        stepList={stepList}
+        selectedKey={activeStep}
+        pluginName={pluginName}
+      />
     </S.Wrapper>
   );
 };

web/src/providers/CreateTest/CreateTest.provider.tsx

@@ -2,7 +2,7 @@ import {createContext, useCallback, useContext, useMemo} from 'react';
 import {useNavigate} from 'react-router-dom';
 import {noop} from 'lodash';
 import {IPlugin} from 'types/Plugins.types';
-import {initialState, setDraftTest, setPlugin, setStepNumber} from 'redux/slices/CreateTest.slice';
+import {initialState, setDraftTest, setPlugin, setStepNumber, reset} from 'redux/slices/CreateTest.slice';
 import {useAppDispatch, useAppSelector} from 'redux/hooks';
 import CreateTestSelectors from 'selectors/CreateTest.selectors';
 import {useCreateTestMutation, useRunTestMutation} from 'redux/apis/TraceTest.api';
@@ -20,6 +20,7 @@ interface IContext extends ICreateTestState {
   onUpdateDraftTest(draftTest: TDraftTest): void;
   onUpdatePlugin(plugin: IPlugin): void;
   onGoTo(stepId: string): void;
+  onReset(): void;
 }
 
 export const Context = createContext<IContext>({
@@ -33,6 +34,7 @@ export const Context = createContext<IContext>({
   onUpdateDraftTest: noop,
   onUpdatePlugin: noop,
   onGoTo: noop,
+  onReset: noop,
 });
 
 interface IProps {
@@ -109,6 +111,10 @@ const CreateTestProvider = ({children}: IProps) => {
     [dispatch]
   );
 
+  const onReset = useCallback(() => {
+    dispatch(reset());
+  }, [dispatch]);
+
   const value = useMemo<IContext>(
     () => ({
       stepList,
@@ -124,6 +130,7 @@ const CreateTestProvider = ({children}: IProps) => {
       onCreateTest,
       onUpdateDraftTest,
       onUpdatePlugin,
+      onReset,
     }),
     [
       stepList,
@@ -139,6 +146,7 @@ const CreateTestProvider = ({children}: IProps) => {
       onCreateTest,
       onUpdateDraftTest,
       onUpdatePlugin,
+      onReset,
     ]
   );
 

web/src/redux/slices/CreateTest.slice.ts

@@ -13,6 +13,9 @@ const createTestSlice = createSlice<ICreateTestState, TCreateTestSliceActions, '
   name: 'createTest',
   initialState,
   reducers: {
+    reset() {
+      return initialState;
+    },
     setPlugin(
       state,
       {
@@ -43,5 +46,5 @@ const createTestSlice = createSlice<ICreateTestState, TCreateTestSliceActions, '
   },
 });
 
-export const {setPlugin, setStepNumber, setDraftTest} = createTestSlice.actions;
+export const {setPlugin, setStepNumber, setDraftTest, reset} = createTestSlice.actions;
 export default createTestSlice.reducer;

web/src/services/Test.service.ts

@@ -3,7 +3,7 @@ import {SupportedPlugins} from 'constants/Plugins.constants';
 import {IPlugin} from 'types/Plugins.types';
 import TestDefinitionService from './TestDefinition.service';
 import Validator from '../utils/Validator';
-import RpcService from './Triggers/Rpc.service';
+import GrpcService from './Triggers/Grpc.service';
 import HttpService from './Triggers/Http.service';
 import PostmanService from './Triggers/Postman.service';
 
@@ -25,7 +25,7 @@ const basicDetailsValidation = ({name, description}: TDraftTest): boolean => {
 };
 
 const TriggerServiceMap = {
-  [SupportedPlugins.RPC]: RpcService,
+  [SupportedPlugins.GRPC]: GrpcService,
   [SupportedPlugins.REST]: HttpService,
   [SupportedPlugins.Messaging]: HttpService,
   [SupportedPlugins.OpenAPI]: HttpService,

web/src/types/Test.types.ts

@@ -105,6 +105,7 @@ export interface ICreateTestState {
 }
 
 export type TCreateTestSliceActions = {
+  reset: CaseReducer<ICreateTestState>;
   setPlugin: CaseReducer<ICreateTestState, PayloadAction<{plugin: IPlugin}>>;
   setStepNumber: CaseReducer<ICreateTestState, PayloadAction<{stepNumber: number; completeStep?: boolean}>>;
   setDraftTest: CaseReducer<ICreateTestState, PayloadAction<{draftTest: TDraftTest}>>;