feature(frontend): Automate Tab - Deep Link Technique

web/package.json

@@ -97,7 +97,7 @@
   },
   "jest": {
     "transformIgnorePatterns": [
-      "/node_modules/(?!antd|@ant-design|d3-array|d3|internmap|delaunator|robust-predicates|rc-.+?|@babel/runtime).+(js|jsx)$"
+      "/node_modules/(?!antd|@ant-design|d3-array|d3|internmap|delaunator|@codemirror|robust-predicates|rc-.+?|@babel/runtime).+(js|jsx)$"
     ],
     "collectCoverageFrom": [
       "src/**/*.(ts|tsx)",

web/src/components/CodeBlock/CodeBlock.styled.ts

@@ -1,13 +1,14 @@
+import {Button, Typography} from 'antd';
 import styled from 'styled-components';
 
 export const CodeContainer = styled.div<{$maxHeight: string; $minHeight: string}>`
   position: relative;
   border: ${({theme}) => `1px solid ${theme.color.border}`};
   min-height: ${({$minHeight}) => $minHeight || '370px'};
-  cursor: pointer;
 
   pre {
     margin: 0;
+    padding: 13px 16px !important;
     min-height: inherit;
     max-height: ${({$maxHeight}) => $maxHeight || '340px'};
     background: ${({theme}) => theme.color.background} !important;
@@ -17,3 +18,32 @@ export const CodeContainer = styled.div<{$maxHeight: string; $minHeight: string}
     }
   }
 `;
+
+export const FrameContainer = styled.div``;
+export const FrameHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 16px;
+  background: rgba(97, 23, 94, 0.1);
+  border-radius: 2px 2px 0 0;
+  border: 1px solid ${({theme}) => theme.color.border};
+  border-bottom: none;
+`;
+export const FrameTitle = styled(Typography.Paragraph)`
+  && {
+    margin: 0;
+  }
+`;
+
+export const CopyButton = styled(Button)`
+  && {
+    padding: 0 8px;
+    background: ${({theme}) => theme.color.white};
+    font-weight: 600;
+
+    &:hover, &:focus, &:active {
+      background: ${({theme}) => theme.color.white};
+    }
+  }
+`;

web/src/components/CodeBlock/CodeBlock.tsx

@@ -1,11 +1,10 @@
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import {arduinoLight} from 'react-syntax-highlighter/dist/cjs/styles/hljs';
 import {LanguageName, langNames} from '@uiw/codemirror-extensions-langs';
-import useCopy from 'hooks/useCopy';
 import {useMemo} from 'react';
 import * as S from './CodeBlock.styled';
 
-interface IProps {
+export interface IProps {
   value: string;
   language?: string;
   mimeType?: string;
@@ -30,11 +29,10 @@ const formatValue = (value: string, lang?: string): string => {
 };
 
 const CodeBlock = ({value, language, mimeType = '', maxHeight = '', minHeight = ''}: IProps) => {
-  const copy = useCopy();
   const lang = useMemo(() => language || getLang(mimeType), [language, mimeType]);
 
   return (
-    <S.CodeContainer data-cy="code-block" $maxHeight={maxHeight} $minHeight={minHeight} onClick={() => copy(value)}>
+    <S.CodeContainer data-cy="code-block" $maxHeight={maxHeight} $minHeight={minHeight}>
       <SyntaxHighlighter language={lang} style={arduinoLight} wrapLongLines>
         {formatValue(value, lang)}
       </SyntaxHighlighter>

web/src/components/CodeBlock/FramedCodeBlock.tsx

@@ -0,0 +1,25 @@
+import * as S from './CodeBlock.styled';
+import CodeBlock, {IProps as ICodeBlockProps} from './CodeBlock';
+import useCopy from '../../hooks/useCopy';
+
+interface IProps extends ICodeBlockProps {
+  title: string;
+}
+
+const FramedCodeBlock = ({title, ...props}: IProps) => {
+  const copy = useCopy();
+
+  return (
+    <S.FrameContainer>
+      <S.FrameHeader>
+        <S.FrameTitle>{title}</S.FrameTitle>
+        <S.CopyButton ghost type="primary" onClick={() => copy(props.value)}>
+          Copy
+        </S.CopyButton>
+      </S.FrameHeader>
+      <CodeBlock {...props} />
+    </S.FrameContainer>
+  );
+};
+
+export default FramedCodeBlock;

web/src/components/CodeBlock/index.ts

@@ -1,2 +1,5 @@
+import FramedCodeBlock from './FramedCodeBlock';
+
 // eslint-disable-next-line no-restricted-exports
 export {default} from './CodeBlock';
+export {FramedCodeBlock};

web/src/components/FileViewerModal/FileViewerModal.styled.ts

@@ -1,18 +1,6 @@
-import {CopyOutlined} from '@ant-design/icons';
 import {Modal} from 'antd';
 import styled from 'styled-components';
 
-export const CodeContainer = styled.div`
-  position: relative;
-  border: ${({theme}) => `1px solid ${theme.color.border}`};
-  min-height: 370px;
-
-  pre {
-    margin: 0;
-    min-height: inherit;
-  }
-`;
-
 export const FileViewerModal = styled(Modal)`
   top: 50px;
 
@@ -22,22 +10,3 @@ export const FileViewerModal = styled(Modal)`
     overflow: scroll;
   }
 `;
-
-export const SubtitleContainer = styled.div`
-  margin-bottom: 8px;
-`;
-
-export const CopyIcon = styled(CopyOutlined)`
-  color: ${({theme}) => theme.color.primary};
-`;
-
-export const CopyIconContainer = styled.div`
-  position: absolute;
-  right: 8px;
-  top: 9px;
-  padding: 0 2px;
-  border-radius: 2px;
-  cursor: pointer;
-  background-color: ${({theme}) => theme.color.textHighlight};
-  z-index: 101;
-`;

web/src/components/FileViewerModal/FileViewerModal.tsx

@@ -1,12 +1,9 @@
 import {useCallback} from 'react';
 import {Button, Typography} from 'antd';
-import SyntaxHighlighter from 'react-syntax-highlighter';
-import {arduinoLight} from 'react-syntax-highlighter/dist/cjs/styles/hljs';
 import {DownloadOutlined} from '@ant-design/icons';
 import {downloadFile} from 'utils/Common';
-import useCopy from 'hooks/useCopy';
-
 import * as S from './FileViewerModal.styled';
+import {FramedCodeBlock} from '../CodeBlock';
 
 interface IProps {
   data: string;
@@ -23,8 +20,6 @@ const FileViewerModal = ({data, isOpen, onClose, title, language = 'javascript',
     downloadFile(data, fileName);
   }, [data, fileName]);
 
-  const copy = useCopy();
-
   const footer = (
     <>
       <Button ghost onClick={onClose} type="primary" data-cy="file-viewer-close">
@@ -48,17 +43,9 @@ const FileViewerModal = ({data, isOpen, onClose, title, language = 'javascript',
       width="70%"
       visible={isOpen}
     >
-      <S.SubtitleContainer>
-        <Typography.Text>{subtitle}</Typography.Text>
-      </S.SubtitleContainer>
-      <S.CodeContainer data-cy="file-viewer-code-container">
-        <S.CopyIconContainer onClick={() => copy(data)}>
-          <S.CopyIcon />
-        </S.CopyIconContainer>
-        <SyntaxHighlighter language={language} style={arduinoLight}>
-          {data}
-        </SyntaxHighlighter>
-      </S.CodeContainer>
+      <div data-cy="file-viewer-code-container">
+        <FramedCodeBlock title={subtitle} value={data} language={language} />
+      </div>
     </S.FileViewerModal>
   );
 };

web/src/components/RunDetailAutomate/RunDetailAutomate.tsx

@@ -1,23 +1,23 @@
 import Test from 'models/Test.model';
+import TestRun from 'models/TestRun.model';
 import * as S from './RunDetailAutomate.styled';
 import TestDefinition from '../RunDetailAutomateDefinition';
 import RunDetailAutomateMethods from '../RunDetailAutomateMethods/RunDetailAutomateMethods';
 
 interface IProps {
   test: Test;
+  run: TestRun;
 }
 
-const RunDetailAutomate = ({test}: IProps) => {
-  return (
-    <S.Container>
-      <S.SectionLeft>
-        <TestDefinition test={test} />
-      </S.SectionLeft>
-      <S.SectionRight>
-        <RunDetailAutomateMethods />
-      </S.SectionRight>
-    </S.Container>
-  );
-};
+const RunDetailAutomate = ({test, run}: IProps) => (
+  <S.Container>
+    <S.SectionLeft>
+      <TestDefinition test={test} />
+    </S.SectionLeft>
+    <S.SectionRight>
+      <RunDetailAutomateMethods test={test} run={run} />
+    </S.SectionRight>
+  </S.Container>
+);
 
 export default RunDetailAutomate;

web/src/components/RunDetailAutomateDefinition/RunDetailAutomateDefinition.styled.ts

@@ -13,10 +13,6 @@ export const Title = styled(Typography.Title)`
   }
 `;
 
-export const SubtitleContainer = styled.div`
-  margin-bottom: 8px;
-`;
-
 export const Footer = styled.div`
   display: flex;
   justify-content: flex-end;

web/src/components/RunDetailAutomateDefinition/RunDetailAutomateDefinition.tsx

@@ -1,12 +1,12 @@
 import {useCallback, useEffect} from 'react';
 import {DownloadOutlined} from '@ant-design/icons';
-import {Button, Typography} from 'antd';
+import {Button} from 'antd';
 import {downloadFile} from 'utils/Common';
 import useDefinitionFile from 'hooks/useDefinitionFile';
 import {ResourceType} from 'types/Resource.type';
 import Test from 'models/Test.model';
 import * as S from './RunDetailAutomateDefinition.styled';
-import CodeBlock from '../CodeBlock/CodeBlock';
+import {FramedCodeBlock} from '../CodeBlock';
 
 interface IProps {
   test: Test;
@@ -26,10 +26,7 @@ const RunDetailAutomateDefinition = ({test: {id, version}}: IProps) => {
   return (
     <S.Container>
       <S.Title>Test Definition</S.Title>
-      <S.SubtitleContainer>
-        <Typography.Text>Preview your YAML file</Typography.Text>
-      </S.SubtitleContainer>
-      <CodeBlock value={definition} language="yaml" />
+      <FramedCodeBlock title="Preview your YAML file" value={definition} language="yaml" />
       <S.Footer>
         <Button data-cy="file-viewer-download" icon={<DownloadOutlined />} onClick={onDownload} type="primary">
           Download File

web/src/components/RunDetailAutomateMethods/RunDetailAutomateMethods.tsx

@@ -1,14 +1,26 @@
 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 * as S from './RunDetailAutomateMethods.styled';
+import DeepLink from './methods/DeepLink/DeepLink';
 
 const TabsKeys = {
   CLI: 'cli',
+  DeepLink: 'deeplink',
 };
 
-const RunDetailAutomateMethods = () => {
+export interface IMethodProps {
+  environmentId?: string;
+  test: Test;
+  run: TestRun;
+}
+
+const RunDetailAutomateMethods = ({test, run}: IMethodProps) => {
   const [query, updateQuery] = useSearchParams();
+  const {selectedEnvironment: {id: environmentId} = {}} = useEnvironment();
 
   return (
     <S.Container>
@@ -25,7 +37,10 @@ const RunDetailAutomateMethods = () => {
           }}
         >
           <Tabs.TabPane key={TabsKeys.CLI} tab="CLI">
-            <CliCommand />
+            <CliCommand test={test} environmentId={environmentId} run={run} />
+          </Tabs.TabPane>
+          <Tabs.TabPane key={TabsKeys.DeepLink} tab="Deep Link">
+            <DeepLink test={test} environmentId={environmentId} run={run} />
           </Tabs.TabPane>
         </Tabs>
       </S.TabsContainer>

web/src/components/RunDetailAutomateMethods/methods/CLICommand/CliCommand.tsx

@@ -1,11 +1,12 @@
-import CodeBlock from 'components/CodeBlock/CodeBlock';
+import {FramedCodeBlock} from 'components/CodeBlock';
 import {ReadOutlined} from '@ant-design/icons';
 import {CLI_RUNNING_TESTS_URL} from 'constants/Common.constants';
 import * as S from './CliCommand.styled';
 import Controls from './Controls';
 import useCliCommand from './hooks/useCliCommand';
+import {IMethodProps} from '../../RunDetailAutomateMethods';
 
-const CLiCommand = () => {
+const CLiCommand = ({test, environmentId}: IMethodProps) => {
   const {command, onGetCommand} = useCliCommand();
 
   return (
@@ -16,9 +17,14 @@ const CLiCommand = () => {
           <ReadOutlined />
         </a>
       </S.TitleContainer>
-      <S.Subtitle>Tracetest CLI command:</S.Subtitle>
-      <CodeBlock language="bash" value={command} minHeight="80px" maxHeight="80px" />
-      <Controls onChange={onGetCommand} />
+      <FramedCodeBlock
+        title="Tracetest CLI command:"
+        language="bash"
+        value={command}
+        minHeight="100px"
+        maxHeight="100px"
+      />
+      <Controls onChange={onGetCommand} test={test} environmentId={environmentId} />
     </S.Container>
   );
 };