fix(frontend): add AttributeActions icon to status and duration fields (

#2706)
kubeshop · Jun 12, 2023 · c868df6 · c868df6
1 parent 2e8c2e4
commit c868df6
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 16 deletions.
diff --git a/web/src/components/RunDetailTriggerResponse/RunDetailTriggerResponse.styled.ts b/web/src/components/RunDetailTriggerResponse/RunDetailTriggerResponse.styled.ts
@@ -42,7 +42,6 @@ export const TabsContainer = styled.div`
 
 export const StatusText = styled(Typography.Text)`
   && {
-    margin-left: 14px;
     font-size: ${({theme}) => theme.size.md};
   }
 `;

diff --git a/web/src/components/RunDetailTriggerResponse/RunDetailTriggerResponse.tsx b/web/src/components/RunDetailTriggerResponse/RunDetailTriggerResponse.tsx
@@ -1,4 +1,4 @@
-import {Tabs} from 'antd';
+import {Divider, Space, Tabs} from 'antd';
 import {useCallback} from 'react';
 import {useNavigate, useSearchParams} from 'react-router-dom';
 
@@ -90,29 +90,31 @@ const RunDetailTriggerResponse = ({
     <S.Container>
       <S.TitleContainer>
         <S.Title>Response Data</S.Title>
-        <div>
-          <AttributeActions
-            attribute={{key: 'tracetest.response.status', value: `${statusCode}`}}
-            onCreateTestOutput={handleCreateTestOutput}
-            onCreateTestSpec={handleCreateTestSpec}
-          >
+        <Space split={<Divider type="vertical" />}>
+          <Space align="center">
             <S.StatusText>
               Status: <S.StatusSpan $isError={statusCode >= 400}>{statusCode}</S.StatusSpan>
             </S.StatusText>
-          </AttributeActions>
-          <AttributeActions
-            attribute={{key: 'tracetest.span.duration', value: `${triggerTime}ms`}}
-            onCreateTestOutput={handleCreateTestOutput}
-            onCreateTestSpec={handleCreateTestSpec}
-          >
+            <AttributeActions
+              attribute={{key: 'tracetest.response.status', value: `${statusCode}`}}
+              onCreateTestOutput={handleCreateTestOutput}
+              onCreateTestSpec={handleCreateTestSpec}
+            />
+          </Space>
+          <Space align="center">
             <S.StatusText>
               Time:{' '}
               <S.StatusSpan $isError={triggerTime > 1000}>
                 {state === TestState.CREATED || state === TestState.EXECUTING ? '-' : `${triggerTime}ms`}
               </S.StatusSpan>
             </S.StatusText>
-          </AttributeActions>
-        </div>
+            <AttributeActions
+              attribute={{key: 'tracetest.span.duration', value: `${triggerTime}ms`}}
+              onCreateTestOutput={handleCreateTestOutput}
+              onCreateTestSpec={handleCreateTestSpec}
+            />
+          </Space>
+        </Space>
       </S.TitleContainer>
       <S.TabsContainer data-tour={StepsID.Response}>
         <Tabs