1405 [Transactions] Display parsed value when hovering over Interpolations#1405

web/src/components/Editor/Expression/hooks/useAutoComplete.ts

@@ -28,7 +28,7 @@ const useAutoComplete = ({testId, runId, onSelect = noop}: IProps) => {
   const getSelectedEnvironmentEntryList = useCallback(() => {
     const state = getState();
 
-    return EnvironmentSelectors.selectSelectedEnvironmentEntryList(state);
+    return EnvironmentSelectors.selectSelectedEnvironmentValues(state);
   }, [getState]);
 
   return useCallback(

web/src/components/Editor/Interpolation/hooks/useAutoComplete.ts

@@ -11,7 +11,7 @@ const useAutoComplete = () => {
   const getSelectedEnvironmentEntryList = useCallback(() => {
     const state = getState();
 
-    return EnvironmentSelectors.selectSelectedEnvironmentEntryList(state);
+    return EnvironmentSelectors.selectSelectedEnvironmentValues(state);
   }, [getState]);
 
   return useCallback(

web/src/components/Editor/hooks/useTooltip.ts

@@ -26,7 +26,7 @@ const useTooltip = ({testId = '', runId = ''}: IProps = {}) => {
   const getSelectedEnvironmentEntryList = useCallback(() => {
     const state = getState();
 
-    return EnvironmentSelectors.selectSelectedEnvironmentEntryList(state);
+    return EnvironmentSelectors.selectSelectedEnvironmentValues(state);
   }, [getState]);
 
   return useCallback(

web/src/components/EnvironmentForm/EnvironmentForm.styled.ts

@@ -3,5 +3,5 @@ import styled from 'styled-components';
 export const Footer = styled.div`
   display: flex;
   justify-content: flex-end;
-  gap: 8px;
+  gap: 16px;
 `;

web/src/components/EnvironmentForm/EnvironmentForm.tsx

@@ -1,61 +1,44 @@
-import {Button, Form, FormInstance, Input} from 'antd';
+import {Form, FormInstance, Input} from 'antd';
+
 import RequestDetailsHeadersInput from 'components/CreateTestPlugins/Rest/steps/RequestDetails/RequestDetailsHeadersInput';
-import {useEffect, useMemo} from 'react';
-import {TEnvironment} from '../../types/Environment.types';
-import {useCreateEnvironmentMutation, useLazyGetEnvironmentSecretListQuery} from '../../redux/apis/TraceTest.api';
-import {Footer} from './EnvironmentForm.styled';
+import {DEFAULT_VALUES} from 'pages/Environments/EnvironmentModal';
+import {TEnvironment} from 'types/Environment.types';
 
 interface IProps {
   form: FormInstance<TEnvironment>;
-  environment?: TEnvironment;
-  onCancel: () => void;
+  initialValues?: TEnvironment;
+  onSubmit(values: TEnvironment): void;
+  onValidate(changedValues: any, values: TEnvironment): void;
 }
 
-const EnvironmentForm: React.FC<IProps> = ({environment, form, onCancel}) => {
-  const [createEnvironment] = useCreateEnvironmentMutation();
-  const [loadResultList, {data}] = useLazyGetEnvironmentSecretListQuery();
-  const isDisabled = useMemo(
-    () => !form.isFieldsTouched(true) || form.getFieldsError().filter(({errors}: any) => errors.length).length > 0,
-    [form]
-  );
-  useEffect(() => {
-    if (environment) loadResultList({environmentId: environment?.id || ''});
-  }, [loadResultList, environment]);
-  useEffect(() => form.setFieldsValue({variables: data || []}), [form, data]);
-  useEffect(() => {
-    form.setFieldsValue({name: environment?.name, description: environment?.description});
-  }, [form, environment?.name, environment?.description]);
+const EnvironmentForm = ({form, initialValues, onSubmit, onValidate}: IProps) => {
   return (
     <Form<TEnvironment>
-      name="basic"
-      layout="vertical"
+      initialValues={{...initialValues}}
       form={form}
-      onFinish={s => {
-        createEnvironment(s);
-        onCancel();
-      }}
+      layout="vertical"
+      name="basic"
+      onFinish={onSubmit}
+      onValuesChange={onValidate}
     >
-      <Form.Item label="Name" name="name" rules={[{required: true, message: 'Please input your name!'}]}>
+      <Form.Item label="Name" name="name" rules={[{required: true, message: 'Please input a name'}]}>
         <Input />
       </Form.Item>
+
       <Form.Item
         label="Description"
         name="description"
-        rules={[{required: true, message: 'Please input your description!'}]}
+        rules={[{required: true, message: 'Please input a description'}]}
       >
         <Input />
       </Form.Item>
-      <RequestDetailsHeadersInput name="variables" unit="Key" initialValue={undefined} label="Entry" />
-      <Footer>
-        <Button style={{marginRight: 16}} data-cy="create-test-cancel" type="primary" ghost onClick={onCancel}>
-          Cancel
-        </Button>
-        <Form.Item shouldUpdate className="submit">
-          <Button type="primary" htmlType="submit" disabled={isDisabled}>
-            Create
-          </Button>
-        </Form.Item>
-      </Footer>
+
+      <RequestDetailsHeadersInput
+        initialValue={form.getFieldValue('values') || DEFAULT_VALUES}
+        label="Values"
+        name="values"
+        unit="Key"
+      />
     </Form>
   );
 };

web/src/models/Environment.model.ts

@@ -1,10 +1,12 @@
 import {TEnvironment, TRawEnvironment} from 'types/Environment.types';
 
-const Environment = ({id = '', name = '', description = '', variables = []}: TRawEnvironment): TEnvironment => ({
-  id,
-  name,
-  description,
-  variables,
-});
+function Environment({id = '', name = '', description = '', values = []}: TRawEnvironment): TEnvironment {
+  return {
+    id,
+    name,
+    description,
+    values: values?.map(value => ({key: value?.key ?? '', value: value?.value ?? ''})),
+  };
+}
 
 export default Environment;

web/src/pages/Environments/Environment.styled.tsx

@@ -29,7 +29,7 @@ export const ActionContainer = styled.div`
   gap: 8px;
 `;
 
-export const TestListContainer = styled.div`
+export const ListContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -92,20 +92,6 @@ export const InfoContainer = styled.div`
   padding: 16px 24px;
 `;
 
-export const EnvironmentDetails = styled.div`
-  text-align: right;
-  width: 100%;
-  margin-top: 8px;
-`;
-
-export const EnvironmentDetailsLink = styled(Button).attrs({
-  type: 'link',
-})`
-  color: ${({theme}) => theme.color.primary};
-  font-weight: 600;
-  padding: 0;
-`;
-
 export const ResultListContainer = styled.div`
   margin: 0 68px 54px 70px;
 `;

web/src/pages/Environments/Environment.tsx

@@ -1,13 +1,11 @@
 import Layout from 'components/Layout';
-import withAnalytics from '../../components/WithAnalytics/WithAnalytics';
+import withAnalytics from 'components/WithAnalytics/WithAnalytics';
 import EnvironmentContent from './EnvironmentContent';
 
-const Environment = (): JSX.Element => {
-  return (
-    <Layout hasMenu>
-      <EnvironmentContent />
-    </Layout>
-  );
-};
+const Environment = () => (
+  <Layout hasMenu>
+    <EnvironmentContent />
+  </Layout>
+);
 
 export default withAnalytics(Environment, 'environments');

web/src/pages/Environments/EnvironmentCard.tsx

@@ -1,52 +1,29 @@
 import {DownOutlined, RightOutlined} from '@ant-design/icons';
 import {Dropdown, Menu, Typography} from 'antd';
-import {Dispatch, SetStateAction, useCallback, useState} from 'react';
-import {useLazyGetEnvironmentSecretListQuery} from 'redux/apis/TraceTest.api';
-import * as T from '../../components/TestCard/TestCard.styled';
-import EnvironmentsAnalytics from '../../services/Analytics/EnvironmentsAnalytics.service';
+import {useState} from 'react';
+
+import * as T from 'components/TestCard/TestCard.styled';
+import {TEnvironment} from 'types/Environment.types';
 import * as E from './Environment.styled';
-import {TEnvironment} from '../../types/Environment.types';
 
 interface IProps {
-  setIsFormOpen: Dispatch<SetStateAction<boolean>>;
   environment: TEnvironment;
-  setEnvironment: Dispatch<SetStateAction<TEnvironment | undefined>>;
+  onDelete(id: string): void;
+  onEdit(values: TEnvironment): void;
 }
 
-export const EnvironmentCard = ({
-  setIsFormOpen,
-  setEnvironment,
-  environment: {name, id, description},
-}: IProps): React.ReactElement => {
+export const EnvironmentCard = ({environment: {description, id, name, values}, onDelete, onEdit}: IProps) => {
   const [isCollapsed, setIsCollapsed] = useState(false);
-  const [loadResultList, {data: resultList = []}] = useLazyGetEnvironmentSecretListQuery();
-  const onCollapse = useCallback(async () => {
-    EnvironmentsAnalytics.onEnvironmentClick(id);
-
-    if (resultList.length > 0) {
-      setIsCollapsed(true);
-      return;
-    }
-    await loadResultList({environmentId: id, take: 5});
-    setIsCollapsed(true);
-  }, [loadResultList, resultList.length, id]);
 
-  const toggleColapsed = useCallback(() => {
-    if (isCollapsed) {
-      setIsCollapsed(false);
-      return;
-    }
-    onCollapse();
-  }, [onCollapse, isCollapsed, setIsCollapsed]);
   return (
     <E.EnvironmentCard $isCollapsed={isCollapsed}>
-      <E.InfoContainer onClick={toggleColapsed}>
-        {isCollapsed ? <DownOutlined /> : <RightOutlined data-cy={`collapse-environment-${id}`} />}
+      <E.InfoContainer onClick={() => setIsCollapsed(preCollapsed => !preCollapsed)}>
+        {isCollapsed ? <DownOutlined /> : <RightOutlined />}
         <E.TextContainer>
           <E.NameText>{name}</E.NameText>
         </E.TextContainer>
         <E.TextContainer />
-        <E.TextContainer data-cy={`environment-description-${id}`}>
+        <E.TextContainer>
           <T.Text>{description}</T.Text>
         </E.TextContainer>
         <E.TextContainer />
@@ -58,11 +35,18 @@ export const EnvironmentCard = ({
               items={[
                 {
                   key: 'edit',
-                  label: <span data-cy="environment-card-edit">Edit</span>,
+                  label: <span>Edit</span>,
+                  onClick: e => {
+                    e.domEvent.stopPropagation();
+                    onEdit({id, name, description, values});
+                  },
+                },
+                {
+                  key: 'delete',
+                  label: <span>Delete</span>,
                   onClick: e => {
                     e.domEvent.stopPropagation();
-                    setEnvironment({id, name, description, variables: []});
-                    setIsFormOpen(true);
+                    onDelete(id);
                   },
                 },
               ]}
@@ -71,46 +55,32 @@ export const EnvironmentCard = ({
           placement="bottomLeft"
           trigger={['click']}
         >
-          <span
-            data-cy={`environment-actions-button-${id}`}
-            className="ant-dropdown-link"
-            onClick={e => e.stopPropagation()}
-          >
+          <span onClick={e => e.stopPropagation()}>
             <T.ActionButton />
           </span>
         </Dropdown>
       </E.InfoContainer>
 
-      {isCollapsed && Boolean(resultList.length) && (
+      {isCollapsed && Boolean(values.length) && (
         <E.ResultListContainer>
           <E.VariablesMainContainer>
             <E.HeaderContainer>
               <E.HeaderText>Key</E.HeaderText>
               <E.HeaderTextRight>Value</E.HeaderTextRight>
             </E.HeaderContainer>
             <E.VariablesContainer>
-              {resultList.map(secret => (
-                <div
-                  key={secret.key + secret.value}
-                  style={{display: 'flex', justifyContent: 'space-between', width: '100%'}}
-                >
-                  <E.VariablesText>{secret.key}</E.VariablesText>
-                  <E.VariablesText>{secret.value}</E.VariablesText>
+              {values.map(value => (
+                <div key={value.key} style={{display: 'flex', justifyContent: 'space-between', width: '100%'}}>
+                  <E.VariablesText>{value.key}</E.VariablesText>
+                  <E.VariablesText>{value.value}</E.VariablesText>
                 </div>
               ))}
             </E.VariablesContainer>
           </E.VariablesMainContainer>
-          {resultList.length === 5 && (
-            <E.EnvironmentDetails>
-              <E.EnvironmentDetailsLink data-cy="environment-details-link">
-                Explore all environments details
-              </E.EnvironmentDetailsLink>
-            </E.EnvironmentDetails>
-          )}
         </E.ResultListContainer>
       )}
 
-      {isCollapsed && !resultList.length && (
+      {isCollapsed && !values.length && (
         <T.EmptyStateContainer>
           <T.EmptyStateIcon />
           <Typography.Text disabled>No Variables</Typography.Text>