chore(frontend): model types update (#1907)

* chore(frontend): model types proposal

* chore(frontend): improve model types management

* chore(frontend): fixing key value type

web/.eslintrc.js

@@ -20,6 +20,8 @@ module.exports = {
     'react-hooks/exhaustive-deps': 'warn', // Checks effect dependencies
     'no-console': 'warn',
     'no-undef': 'off',
+    'no-redeclare': 'off',
+    'no-shadow': 'off',
     semi: 'error',
     'no-unused-vars': 'off',
     '@typescript-eslint/no-unused-vars': ['warn'],

web/src/components/AttributeList/AttributeList.tsx

@@ -3,7 +3,7 @@ import {OtelReference} from 'components/TestSpecForm/hooks/useGetOTELSemanticCon
 import {TResultAssertions} from 'types/Assertion.types';
 import {TSpanFlatAttribute} from 'types/Span.types';
 import TraceAnalyticsService from 'services/Analytics/TestRunAnalytics.service';
-import {TTestOutput} from 'types/TestOutput.types';
+import TestOutput from 'models/TestOutput.model';
 import * as S from './AttributeList.styled';
 import EmptyAttributeList from './EmptyAttributeList';
 
@@ -14,7 +14,7 @@ interface IProps {
   searchText?: string;
   semanticConventions: OtelReference;
   onCreateOutput(attribute: TSpanFlatAttribute): void;
-  outputs: TTestOutput[];
+  outputs: TestOutput[];
 }
 
 const AttributeList = ({

web/src/components/AttributeRow/AttributeRow.tsx

@@ -9,7 +9,7 @@ import {OtelReference} from 'components/TestSpecForm/hooks/useGetOTELSemanticCon
 import SpanAttributeService from 'services/SpanAttribute.service';
 import {TResultAssertions} from 'types/Assertion.types';
 import {TSpanFlatAttribute} from 'types/Span.types';
-import {TTestOutput} from 'types/TestOutput.types';
+import TestOutput from 'models/TestOutput.model';
 import * as S from './AttributeRow.styled';
 import AssertionResultChecks from '../AssertionResultChecks/AssertionResultChecks';
 
@@ -21,7 +21,7 @@ interface IProps {
   onCreateTestSpec(attribute: TSpanFlatAttribute): void;
   onCreateOutput(attribute: TSpanFlatAttribute): void;
   semanticConventions: OtelReference;
-  outputs: TTestOutput[];
+  outputs: TestOutput[];
 }
 
 enum Action {

web/src/components/EditTest/EditTest.tsx

@@ -4,14 +4,15 @@ import {TriggerTypeToPlugin} from 'constants/Plugins.constants';
 import useValidateTestDraft from 'hooks/useValidateTestDraft';
 import {useTest} from 'providers/Test/Test.provider';
 import {useCallback, useState} from 'react';
-import {TDraftTest, TTest} from 'types/Test.types';
+import {TDraftTest} from 'types/Test.types';
 import {TestState} from 'constants/TestRun.constants';
 import {useTestRun} from 'providers/TestRun/TestRun.provider';
 import TestRunAnalyticsService from 'services/Analytics/TestRunAnalytics.service';
+import Test from 'models/Test.model';
 import * as S from './EditTest.styled';
 
 interface IProps {
-  test: TTest;
+  test: Test;
 }
 
 const EditTest = ({test}: IProps) => {

web/src/components/EditTestForm/EditTestForm.tsx

@@ -1,7 +1,8 @@
 import {Form} from 'antd';
 import {useMemo} from 'react';
-import {TDraftTest, TDraftTestForm, TTest} from 'types/Test.types';
-import TestService from '../../services/Test.service';
+import {TDraftTest, TDraftTestForm} from 'types/Test.types';
+import Test from 'models/Test.model';
+import TestService from 'services/Test.service';
 import BasicDetailsForm from '../CreateTestPlugins/Default/steps/BasicDetails/BasicDetailsForm';
 import EditRequestDetails from './EditRequestDetails/EditRequestDetails';
 import * as S from './EditTestForm.styled';
@@ -10,7 +11,7 @@ export const FORM_ID = 'edit-test';
 
 interface IProps {
   form: TDraftTestForm;
-  test: TTest;
+  test: Test;
   onSubmit(values: TDraftTest): Promise<void>;
   onValidation(allValues: any, values: TDraftTest): void;
 }

web/src/components/EditTransaction/EditTransaction.tsx

@@ -3,15 +3,14 @@ import {useCallback, useState} from 'react';
 import {TDraftTransaction} from 'types/Transaction.types';
 import {useTransaction} from 'providers/Transaction/Transaction.provider';
 import useValidateTransactionDraft from 'hooks/useValidateTransactionDraft';
-import {TTransactionRun} from 'types/TransactionRun.types';
 import {TestState} from 'constants/TestRun.constants';
-
+import TransactionRun from 'models/TransactionRun.model';
 import * as S from './EditTransaction.styled';
 import EditTransactionForm from '../EditTransactionForm';
 
 interface IProps {
   transaction: TDraftTransaction;
-  transactionRun: TTransactionRun;
+  transactionRun: TransactionRun;
 }
 
 const EditTransaction = ({transaction, transactionRun}: IProps) => {

web/src/components/EnvironmentForm/EnvironmentForm.tsx

@@ -2,18 +2,18 @@ import {Form, FormInstance, Input} from 'antd';
 
 import RequestDetailsHeadersInput from 'components/CreateTestPlugins/Rest/steps/RequestDetails/RequestDetailsHeadersInput';
 import {DEFAULT_VALUES} from 'pages/Environments/EnvironmentModal';
-import {TEnvironment} from 'types/Environment.types';
+import Environment from 'models/Environment.model';
 
 interface IProps {
-  form: FormInstance<TEnvironment>;
-  initialValues?: TEnvironment;
-  onSubmit(values: TEnvironment): void;
-  onValidate(changedValues: any, values: TEnvironment): void;
+  form: FormInstance<Environment>;
+  initialValues?: Environment;
+  onSubmit(values: Environment): void;
+  onValidate(changedValues: any, values: Environment): void;
 }
 
 const EnvironmentForm = ({form, initialValues, onSubmit, onValidate}: IProps) => {
   return (
-    <Form<TEnvironment>
+    <Form<Environment>
       initialValues={{...initialValues}}
       form={form}
       layout="vertical"

web/src/components/FailedTrace/FailedTrace.tsx

@@ -1,11 +1,11 @@
 import {Typography} from 'antd';
 import {DISCORD_URL, GITHUB_ISSUES_URL} from 'constants/Common.constants';
-import {TTestRun} from 'types/TestRun.types';
+import TestRun from 'models/TestRun.model';
 import * as S from './FailedTrace.styled';
 
 interface IProps {
   isDisplayingError: boolean;
-  run: TTestRun;
+  run: TestRun;
 }
 
 const FailedTrace = ({isDisplayingError, run: {lastErrorState}}: IProps) => {

web/src/components/MissingVariablesModal/MissingVariablesModal.tsx

@@ -2,7 +2,7 @@ import {useEffect} from 'react';
 import {Form} from 'antd';
 import VariablesService from 'services/Variables.service';
 import {TDraftVariables, TTestVariablesMap} from 'types/Variables.types';
-import {TEnvironmentValue} from 'types/Environment.types';
+import {TEnvironmentValue} from 'models/Environment.model';
 import * as S from './MissingVariablesModal.styled';
 import MissingVariablesModalFooter from './MissingVariablesModalFooter';
 import MissingVariablesModalForm from './MissingVariablesModalForm';
@@ -41,7 +41,7 @@ const MissingVariablesModal = ({isOpen, onClose, onSubmit, testVariables, name}:
         form={form}
         layout="vertical"
         name="testOutput"
-        onFinish={(draft) => onSubmit(VariablesService.getSubmitValues(draft))}
+        onFinish={draft => onSubmit(VariablesService.getSubmitValues(draft))}
         onValuesChange={onValidate}
       >
         <S.Description>

web/src/components/ResourceCard/ResourceCardSummary.tsx

@@ -1,10 +1,10 @@
 import {Tooltip} from 'antd';
-import {TSummary} from 'types/Test.types';
 import Date from 'utils/Date';
+import Summary from 'models/Summary.model';
 import * as S from './ResourceCard.styled';
 
 interface IProps {
-  summary: TSummary;
+  summary: Summary;
 }
 
 const ResourceCardSummary = ({

web/src/components/ResourceCard/TestCard.tsx

@@ -1,11 +1,10 @@
 import {DownOutlined, RightOutlined} from '@ant-design/icons';
 import {useMemo} from 'react';
-
 import TestRunCard from 'components/RunCard/TestRunCard';
 import {useLazyGetRunListQuery} from 'redux/apis/TraceTest.api';
 import {ResourceType} from 'types/Resource.type';
-import {TTest} from 'types/Test.types';
-import {TTestRun} from 'types/TestRun.types';
+import Test from 'models/Test.model';
+import TestRun from 'models/TestRun.model';
 import * as S from './ResourceCard.styled';
 import ResourceCardActions from './ResourceCardActions';
 import ResourceCardRuns from './ResourceCardRuns';
@@ -15,14 +14,14 @@ import useRuns from './useRuns';
 interface IProps {
   onEdit(id: string, lastRunId: number, type: ResourceType): void;
   onDelete(id: string, name: string, type: ResourceType): void;
-  onRun(test: TTest, type: ResourceType): void;
+  onRun(test: Test, type: ResourceType): void;
   onViewAll(id: string, type: ResourceType): void;
-  test: TTest;
+  test: Test;
 }
 
 const TestCard = ({onEdit, onDelete, onRun, onViewAll, test}: IProps) => {
   const queryParams = useMemo(() => ({take: 5, testId: test.id}), [test.id]);
-  const {isCollapsed, isLoading, list, onClick} = useRuns<TTestRun, {testId: string}>(
+  const {isCollapsed, isLoading, list, onClick} = useRuns<TestRun, {testId: string}>(
     useLazyGetRunListQuery,
     queryParams
   );

web/src/components/ResourceCard/TransactionCard.tsx

@@ -4,8 +4,8 @@ import {useMemo} from 'react';
 import TransactionRunCard from 'components/RunCard/TransactionRunCard';
 import {useLazyGetTransactionRunsQuery} from 'redux/apis/TraceTest.api';
 import {ResourceType} from 'types/Resource.type';
-import {TTransactionRun} from 'types/TransactionRun.types';
-import {TTransaction} from 'types/Transaction.types';
+import Transaction from 'models/Transaction.model';
+import TransactionRun from 'models/TransactionRun.model';
 import * as S from './ResourceCard.styled';
 import ResourceCardActions from './ResourceCardActions';
 import ResourceCardRuns from './ResourceCardRuns';
@@ -15,9 +15,9 @@ import useRuns from './useRuns';
 interface IProps {
   onEdit(id: string, lastRunId: number, type: ResourceType): void;
   onDelete(id: string, name: string, type: ResourceType): void;
-  onRun(transaction: TTransaction, type: ResourceType): void;
+  onRun(transaction: Transaction, type: ResourceType): void;
   onViewAll(id: string, type: ResourceType): void;
-  transaction: TTransaction;
+  transaction: Transaction;
 }
 
 const TransactionCard = ({
@@ -29,7 +29,7 @@ const TransactionCard = ({
   transaction,
 }: IProps) => {
   const queryParams = useMemo(() => ({take: 5, transactionId}), [transactionId]);
-  const {isCollapsed, isLoading, list, onClick} = useRuns<TTransactionRun, {transactionId: string}>(
+  const {isCollapsed, isLoading, list, onClick} = useRuns<TransactionRun, {transactionId: string}>(
     useLazyGetTransactionRunsQuery,
     queryParams
   );

web/src/components/RunCard/TestRunCard.tsx

@@ -1,20 +1,19 @@
 import {Tooltip} from 'antd';
 import {Link} from 'react-router-dom';
-
 import RunActionsMenu from 'components/RunActionsMenu';
 import TestState from 'components/TestState';
 import {TestState as TestStateEnum} from 'constants/TestRun.constants';
-import {TTestRun} from 'types/TestRun.types';
+import TestRun from 'models/TestRun.model';
 import Date from 'utils/Date';
 import * as S from './RunCard.styled';
 
 interface IProps {
-  run: TTestRun;
+  run: TestRun;
   testId: string;
   linkTo: string;
 }
 
-function getIcon(state: TTestRun['state'], failedAssertions: number) {
+function getIcon(state: TestRun['state'], failedAssertions: number) {
   if (state !== TestStateEnum.FAILED && state !== TestStateEnum.FINISHED) {
     return null;
   }

web/src/components/RunCard/TransactionRunCard.tsx

@@ -1,21 +1,20 @@
 import {Tooltip} from 'antd';
 import {Link} from 'react-router-dom';
-
 import TestState from 'components/TestState';
 import TransactionRunActionsMenu from 'components/TransactionRunActionsMenu';
 import {TestState as TestStateEnum} from 'constants/TestRun.constants';
-import {TTestRun} from 'types/TestRun.types';
-import {TTransactionRun} from 'types/TransactionRun.types';
+import TransactionRun from 'models/TransactionRun.model';
+import TestRun from 'models/TestRun.model';
 import Date from 'utils/Date';
 import * as S from './RunCard.styled';
 
 interface IProps {
   linkTo: string;
-  run: TTransactionRun;
+  run: TransactionRun;
   transactionId: string;
 }
 
-function getIcon(state: TTestRun['state'], fail: number) {
+function getIcon(state: TestRun['state'], fail: number) {
   if (state !== TestStateEnum.FAILED && state !== TestStateEnum.FINISHED) {
     return null;
   }

web/src/components/RunDetailLayout/RunDetailLayout.tsx

@@ -8,13 +8,13 @@ import {RunDetailModes} from 'constants/TestRun.constants';
 import TestRunAnalyticsService from 'services/Analytics/TestRunAnalytics.service';
 import {useTestRun} from 'providers/TestRun/TestRun.provider';
 import useDocumentTitle from 'hooks/useDocumentTitle';
-import {TTest} from 'types/Test.types';
+import Test from 'models/Test.model';
 import HeaderLeft from './HeaderLeft';
 import HeaderRight from './HeaderRight';
 import * as S from './RunDetailLayout.styled';
 
 interface IProps {
-  test: TTest;
+  test: Test;
 }
 
 const renderTabBar: TabsProps['renderTabBar'] = (props, DefaultTabBar) => (

web/src/components/RunDetailTest/RunDetailTest.tsx

@@ -2,7 +2,6 @@ import {Tabs} from 'antd';
 import {useCallback, useState} from 'react';
 import {useSearchParams} from 'react-router-dom';
 import {useMount} from 'react-use';
-
 import Drawer from 'components/Drawer';
 import {VisualizationType} from 'components/RunDetailTrace/RunDetailTrace';
 import SetupAlert from 'components/SetupAlert';
@@ -21,8 +20,8 @@ import {useTestSpecs} from 'providers/TestSpecs/TestSpecs.provider';
 import AssertionAnalyticsService from 'services/Analytics/AssertionAnalytics.service';
 import TestRunAnalytics from 'services/Analytics/TestRunAnalytics.service';
 import AssertionService from 'services/Assertion.service';
-import {TAssertionResultEntry} from 'types/Assertion.types';
-import {TTestRun} from 'types/TestRun.types';
+import TestRun from 'models/TestRun.model';
+import {TAssertionResultEntry} from 'models/AssertionResults.model';
 import * as S from './RunDetailTest.styled';
 import Visualization from './Visualization';
 
@@ -32,7 +31,7 @@ const TABS = {
 } as const;
 
 interface IProps {
-  run: TTestRun;
+  run: TestRun;
   testId: string;
 }
 

web/src/components/RunDetailTest/Visualization.tsx

@@ -13,12 +13,12 @@ import {initNodes, onNodesChange as onNodesChangeAction} from 'redux/slices/DAG.
 import DAGSelectors from 'selectors/DAG.selectors';
 import TraceAnalyticsService from 'services/Analytics/TestRunAnalytics.service';
 import TraceDiagramAnalyticsService from 'services/Analytics/TraceDiagramAnalytics.service';
-import {TSpan} from 'types/Span.types';
 import {TTestRunState} from 'types/TestRun.types';
+import Span from 'models/Span.model';
 
 export interface IProps {
   runState: TTestRunState;
-  spans: TSpan[];
+  spans: Span[];
   type: VisualizationType;
 }
 

web/src/components/RunDetailTrace/RunDetailTrace.tsx

@@ -1,22 +1,21 @@
 import {useCallback, useState} from 'react';
 import {useNavigate} from 'react-router-dom';
 import {useAppSelector} from 'redux/hooks';
-
 import Drawer from 'components/Drawer';
 import SpanDetail from 'components/SpanDetail';
 import Switch from 'components/Visualization/components/Switch';
 import {TestState} from 'constants/TestRun.constants';
 import SpanSelectors from 'selectors/Span.selectors';
 import TraceSelectors from 'selectors/Trace.selectors';
 import TraceAnalyticsService from 'services/Analytics/TestRunAnalytics.service';
-import {TTestRun} from 'types/TestRun.types';
+import TestRun from 'models/TestRun.model';
 import * as S from './RunDetailTrace.styled';
 import Search from './Search';
 import Visualization from './Visualization';
 import SetupAlert from '../SetupAlert';
 
 interface IProps {
-  run: TTestRun;
+  run: TestRun;
   testId: string;
 }
 

web/src/components/RunDetailTrace/Visualization.tsx

@@ -7,16 +7,16 @@ import {changeNodes, initNodes, selectSpan} from 'redux/slices/Trace.slice';
 import TraceSelectors from 'selectors/Trace.selectors';
 import TraceAnalyticsService from 'services/Analytics/TestRunAnalytics.service';
 import TraceDiagramAnalyticsService from 'services/Analytics/TraceDiagramAnalytics.service';
-import {TSpan} from 'types/Span.types';
 import {TTestRunState} from 'types/TestRun.types';
+import Span from 'models/Span.model';
 import {useDrawer} from '../Drawer/Drawer';
 import DAG from '../Visualization/components/DAG';
 import Timeline from '../Visualization/components/Timeline';
 import {VisualizationType} from './RunDetailTrace';
 
 interface IProps {
   runState: TTestRunState;
-  spans: TSpan[];
+  spans: Span[];
   type: VisualizationType;
 }