feat(frontend): add transaction automate page

kubeshop · Jul 13, 2023 · 2b5ffe2 · 2b5ffe2
1 parent 06ba21a
commit 2b5ffe2
Show file tree

Hide file tree

Showing 32 changed files with 374 additions and 487 deletions.
diff --git a/web/src/components/Router/Router.tsx b/web/src/components/Router/Router.tsx
@@ -8,7 +8,8 @@ import RunDetail from 'pages/RunDetail';
 import Settings from 'pages/Settings';
 import Test from 'pages/Test';
 import Transaction from 'pages/Transaction';
-import TransactionRunDetail from 'pages/TransactionRunDetail';
+import TransactionRunTrigger from 'pages/TransactionRunTrigger';
+import TransactionRunAutomate from 'pages/TransactionRunAutomate';
 import AutomatedTestRun from 'pages/AutomatedTestRun';
 import Env from 'utils/Env';
 
@@ -32,7 +33,10 @@ const Router = () => (
       <Route path="/test/:testId/run" element={<AutomatedTestRun />} />
 
       <Route path="/transaction/:transactionId" element={<Transaction />} />
-      <Route path="/transaction/:transactionId/run/:runId" element={<TransactionRunDetail />} />
+      <Route path="/transaction/:transactionId/run/:runId" element={<TransactionRunTrigger />}>
+        <Route path="trigger" element={<TransactionRunTrigger />} />
+      </Route>
+      <Route path="/transaction/:transactionId/run/:runId/automate" element={<TransactionRunAutomate />} />
 
       <Route path="*" element={<Navigate to="/" />} />
     </Routes>

diff --git a/web/src/components/RunActionsMenu/RunActionsMenu.tsx b/web/src/components/RunActionsMenu/RunActionsMenu.tsx
@@ -17,9 +17,7 @@ interface IProps {
 
 const RunActionsMenu = ({resultId, testId, transactionId, transactionRunId, isRunView = false}: IProps) => {
   const {onJUnit} = useFileViewerModal();
-
   const navigate = useNavigate();
-
   const onDelete = useDeleteResourceRun({id: testId, isRunView, type: ResourceType.Test});
 
   return (

diff --git a/web/src/components/RunCard/TransactionRunCard.tsx b/web/src/components/RunCard/TransactionRunCard.tsx
@@ -72,7 +72,7 @@ const TransactionRunCard = ({
         )}
 
         <div>
-          <TransactionRunActionsMenu runId={runId} transactionId={transactionId} transactionVersion={version} />
+          <TransactionRunActionsMenu runId={runId} transactionId={transactionId} />
         </div>
       </S.Container>
     </Link>

diff --git a/web/src/components/RunDetailAutomate/RunDetailAutomate.styled.ts b/web/src/components/RunDetailAutomate/RunDetailAutomate.styled.ts
@@ -8,21 +8,18 @@ export const Container = styled.div`
 
 export const Section = styled.div`
   flex: 1;
-`;
-
-export const SectionLeft = styled(Section)`
   background-color: ${({theme}) => theme.color.white};
   overflow-y: scroll;
-  z-index: 1;
   flex-basis: 50%;
   max-width: 50vw;
 `;
 
+export const SectionLeft = styled(Section)`
+  z-index: 1;
+`;
+
 export const SectionRight = styled(Section)`
-  background-color: ${({theme}) => theme.color.white};
   border-left: 1px solid rgba(3, 24, 73, 0.1);
-  overflow-y: scroll;
   z-index: 2;
-  flex-basis: 50%;
-  max-width: 50vw;
+  padding: 24px;
 `;
diff --git a/web/src/components/RunDetailAutomate/RunDetailAutomate.tsx b/web/src/components/RunDetailAutomate/RunDetailAutomate.tsx
@@ -1,10 +1,15 @@
 import {snakeCase} from 'lodash';
-import Test from 'models/Test.model';
 import {useState} from 'react';
+import RunDetailAutomateDefinition from 'components/RunDetailAutomateDefinition';
+import RunDetailAutomateMethods from 'components/RunDetailAutomateMethods';
+import CliCommand from 'components/RunDetailAutomateMethods/methods/CLICommand';
+import DeepLink from 'components/RunDetailAutomateMethods/methods/DeepLink';
+import {CLI_RUNNING_TESTS_URL} from 'constants/Common.constants';
+import Test from 'models/Test.model';
 import TestRun from 'models/TestRun.model';
+import {useEnvironment} from 'providers/Environment/Environment.provider';
+import {ResourceType} from 'types/Resource.type';
 import * as S from './RunDetailAutomate.styled';
-import RunDetailAutomateDefinition from '../RunDetailAutomateDefinition';
-import RunDetailAutomateMethods from '../RunDetailAutomateMethods/RunDetailAutomateMethods';
 
 interface IProps {
   test: Test;
@@ -13,14 +18,43 @@ interface IProps {
 
 const RunDetailAutomate = ({test, run}: IProps) => {
   const [fileName, setFileName] = useState<string>(`${snakeCase(test.name)}.yaml`);
+  const {selectedEnvironment: {id: environmentId} = {}} = useEnvironment();
 
   return (
     <S.Container>
       <S.SectionLeft>
-        <RunDetailAutomateDefinition onFileNameChange={setFileName} fileName={fileName} test={test} />
+        <RunDetailAutomateDefinition
+          id={test.id}
+          version={test.version}
+          resourceType={ResourceType.Test}
+          fileName={fileName}
+          onFileNameChange={setFileName}
+        />
       </S.SectionLeft>
       <S.SectionRight>
-        <RunDetailAutomateMethods fileName={fileName} test={test} run={run} />
+        <RunDetailAutomateMethods
+          resourceType={ResourceType.Test}
+          methods={[
+            {
+              id: 'cli',
+              name: 'CLI',
+              component: (
+                <CliCommand
+                  id={test.id}
+                  environmentId={environmentId}
+                  fileName={fileName}
+                  resourceType={ResourceType.Test}
+                  docsUrl={CLI_RUNNING_TESTS_URL}
+                />
+              ),
+            },
+            {
+              id: 'deeplink',
+              name: 'Deep Link',
+              component: <DeepLink test={test} environmentId={environmentId} run={run} />,
+            },
+          ]}
+        />
       </S.SectionRight>
     </S.Container>
   );

diff --git a/web/src/components/RunDetailAutomateDefinition/RunDetailAutomateDefinition.tsx b/web/src/components/RunDetailAutomateDefinition/RunDetailAutomateDefinition.tsx
@@ -1,34 +1,36 @@
-import {useCallback, useEffect} from 'react';
 import {DownloadOutlined} from '@ant-design/icons';
 import {Button} from 'antd';
-import {downloadFile} from 'utils/Common';
+import {capitalize} from 'lodash';
+import {useCallback, useEffect} from 'react';
+import {FramedCodeBlock} from 'components/CodeBlock';
+import InputOverlay from 'components/InputOverlay/InputOverlay';
 import useDefinitionFile from 'hooks/useDefinitionFile';
 import {ResourceType} from 'types/Resource.type';
-import Test from 'models/Test.model';
+import {downloadFile} from 'utils/Common';
 import * as S from './RunDetailAutomateDefinition.styled';
-import {FramedCodeBlock} from '../CodeBlock';
-import InputOverlay from '../InputOverlay/InputOverlay';
 
 interface IProps {
-  test: Test;
-  onFileNameChange(value: string): void;
+  id: string;
+  version: number;
+  resourceType: ResourceType;
   fileName: string;
+  onFileNameChange(value: string): void;
 }
 
-const RunDetailAutomateDefinition = ({test: {id, version}, onFileNameChange, fileName}: IProps) => {
+const RunDetailAutomateDefinition = ({id, version, resourceType, fileName, onFileNameChange}: IProps) => {
   const {definition, loadDefinition} = useDefinitionFile();
 
   const onDownload = useCallback(() => {
     downloadFile(definition, fileName);
   }, [definition, fileName]);
 
   useEffect(() => {
-    loadDefinition(ResourceType.Test, id, version);
-  }, [id, loadDefinition, version]);
+    loadDefinition(resourceType, id, version);
+  }, [id, loadDefinition, resourceType, version]);
 
   return (
     <S.Container>
-      <S.Title>Test Definition</S.Title>
+      <S.Title>{capitalize(resourceType)} Definition</S.Title>
       <S.FileName>
         <InputOverlay value={fileName} onChange={onFileNameChange} />
       </S.FileName>

diff --git a/web/src/components/RunDetailAutomateMethods/RunDetailAutomateMethods.styled.ts b/web/src/components/RunDetailAutomateMethods/RunDetailAutomateMethods.styled.ts
@@ -1,12 +1,10 @@
 import {Typography} from 'antd';
 import styled from 'styled-components';
-import noResultsIcon from 'assets/SpanAssertionsEmptyState.svg';
 
 export const Container = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
-  padding: 24px;
 `;
 
 export const TitleContainer = styled.div`
@@ -44,99 +42,3 @@ export const TabsContainer = styled.div`
     padding: 0;
   }
 `;
-
-export const StatusText = styled(Typography.Text)`
-  && {
-    font-size: ${({theme}) => theme.size.md};
-  }
-`;
-
-export const LoadingResponseBody = styled.div`
-  margin-top: 24px;
-  display: flex;
-  flex-direction: column;
-  justify-items: center;
-  gap: 16px;
-  padding: 0.4em 0.6em;
-`;
-
-export const TextHolder = styled.div<{$width?: number}>`
-  @keyframes skeleton-loading {
-    0% {
-      background-color: hsl(200, 20%, 80%);
-    }
-    100% {
-      background-color: hsl(200, 20%, 95%);
-    }
-  }
-
-  animation: skeleton-loading 1s linear infinite alternate;
-  height: 16px;
-  border-radius: 2px;
-  width: ${({$width = 100}) => $width}%;
-`;
-
-export const TextContainer = styled.div`
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-`;
-
-export const Text = styled(Typography.Text)`
-  font-size: ${({theme}) => theme.size.sm};
-`;
-
-export const HeadersList = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 16px 0;
-`;
-
-export const Actions = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  margin-top: 16px;
-  gap: 10px;
-`;
-
-export const ResponseEnvironmentContainer = styled.div`
-  padding: 16px 0;
-`;
-
-export const EmptyContainer = styled.div`
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  margin-top: 100px;
-  text-align: center;
-`;
-
-export const EmptyIcon = styled.img.attrs({
-  src: noResultsIcon,
-})`
-  height: auto;
-  margin-bottom: 16px;
-  width: 90px;
-`;
-
-export const EmptyText = styled(Typography.Text)`
-  color: ${({theme}) => theme.color.textSecondary};
-`;
-
-export const EmptyTitle = styled(Typography.Title).attrs({level: 3})``;
-
-export const ResponseBodyContainer = styled.div`
-  display: flex;
-  width: 100%;
-`;
-
-export const ResponseBodyContent = styled.div`
-  flex: 1;
-`;
-
-export const ResponseBodyActions = styled.div`
-  margin: 16px 0 0 4px;
-`;
diff --git a/web/src/components/RunDetailAutomateMethods/RunDetailAutomateMethods.tsx b/web/src/components/RunDetailAutomateMethods/RunDetailAutomateMethods.tsx
@@ -1,48 +1,41 @@
 import {Tabs} from 'antd';
 import {useSearchParams} from 'react-router-dom';
-import Test from 'models/Test.model';
-import TestRun from 'models/TestRun.model';
-import {useEnvironment} from 'providers/Environment/Environment.provider';
-import CliCommand from './methods/CLICommand';
+import {ResourceType} from 'types/Resource.type';
 import * as S from './RunDetailAutomateMethods.styled';
-import DeepLink from './methods/DeepLink/DeepLink';
 
-const TabsKeys = {
-  CLI: 'cli',
-  DeepLink: 'deeplink',
-};
+interface IProps {
+  resourceType: ResourceType;
+  methods?: IMethodProps[];
+}
 
-export interface IMethodProps {
-  environmentId?: string;
-  test: Test;
-  run: TestRun;
-  fileName?: string;
+interface IMethodProps {
+  id: string;
+  name: string;
+  component: React.ReactNode;
 }
 
-const RunDetailAutomateMethods = ({test, run, fileName}: IMethodProps) => {
+const RunDetailAutomateMethods = ({resourceType, methods = []}: IProps) => {
   const [query, updateQuery] = useSearchParams();
-  const {selectedEnvironment: {id: environmentId} = {}} = useEnvironment();
 
   return (
     <S.Container>
       <S.TitleContainer>
-        <S.Title>Running Techniques</S.Title> <S.Subtitle>Methods to automate the running of this test</S.Subtitle>
+        <S.Title>Running Techniques</S.Title>
+        <S.Subtitle>Methods to automate the running of this {resourceType}</S.Subtitle>
       </S.TitleContainer>
       <S.TabsContainer>
         <Tabs
-          defaultActiveKey={query.get('tab') || TabsKeys.CLI}
-          data-cy="run-detail-automate-methods"
+          defaultActiveKey={query.get('tab') || methods[0]?.id}
           size="small"
-          onChange={newTab => {
-            updateQuery([['tab', newTab]]);
+          onChange={activeKey => {
+            updateQuery([['tab', activeKey]]);
           }}
         >
-          <Tabs.TabPane key={TabsKeys.CLI} tab="CLI">
-            <CliCommand test={test} environmentId={environmentId} run={run} fileName={fileName} />
-          </Tabs.TabPane>
-          <Tabs.TabPane key={TabsKeys.DeepLink} tab="Deep Link">
-            <DeepLink test={test} environmentId={environmentId} run={run} />
-          </Tabs.TabPane>
+          {methods.map(({id, name, component}) => (
+            <Tabs.TabPane key={id} tab={name}>
+              {component}
+            </Tabs.TabPane>
+          ))}
         </Tabs>
       </S.TabsContainer>
     </S.Container>