2767 automate tab include deeplink technique update (#2801)

* feature(frontend): Automate Tab - Deep Link Technique * feature(frontend): Automate Tab - Deep Link Technique * feature(frontend): fixing jest parser * feature(frontend): Updating Deep Link logic
kubeshop · Jun 23, 2023 · 5342f36 · 5342f36
1 parent e1170d1
commit 5342f36
Show file tree

Hide file tree

Showing 11 changed files with 61 additions and 36 deletions.
diff --git a/web/src/components/CodeBlock/CodeBlock.styled.ts b/web/src/components/CodeBlock/CodeBlock.styled.ts
@@ -42,8 +42,16 @@ export const CopyButton = styled(Button)`
     background: ${({theme}) => theme.color.white};
     font-weight: 600;
 
-    &:hover, &:focus, &:active {
+    &:hover,
+    &:focus,
+    &:active {
       background: ${({theme}) => theme.color.white};
     }
   }
 `;
+
+export const ActionsContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`;
diff --git a/web/src/components/CodeBlock/FramedCodeBlock.tsx b/web/src/components/CodeBlock/FramedCodeBlock.tsx
@@ -4,18 +4,22 @@ import useCopy from '../../hooks/useCopy';
 
 interface IProps extends ICodeBlockProps {
   title: string;
+  actions?: React.ReactNode;
 }
 
-const FramedCodeBlock = ({title, ...props}: IProps) => {
+const FramedCodeBlock = ({title, actions, ...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.ActionsContainer>
+          {actions}
+          <S.CopyButton ghost type="primary" onClick={() => copy(props.value)}>
+            Copy
+          </S.CopyButton>
+        </S.ActionsContainer>
       </S.FrameHeader>
       <CodeBlock {...props} />
     </S.FrameContainer>

diff --git a/web/src/components/Router/Router.tsx b/web/src/components/Router/Router.tsx
@@ -29,7 +29,7 @@ const Router = () => (
         <Route path=":mode" element={<RunDetail />} />
       </Route>
 
-      <Route path="/test/:testId/version/:version/run" element={<AutomatedTestRun />} />
+      <Route path="/test/:testId/run" element={<AutomatedTestRun />} />
 
       <Route path="/transaction/:transactionId" element={<Transaction />} />
       <Route path="/transaction/:transactionId/run/:runId" element={<TransactionRunDetail />} />

diff --git a/web/src/components/RunDetailAutomateMethods/methods/CLICommand/Controls.tsx b/web/src/components/RunDetailAutomateMethods/methods/CLICommand/Controls.tsx
@@ -45,7 +45,7 @@ const Controls = ({onChange, test, environmentId}: IProps) => {
         format: CliCommandFormat.Pretty,
       }}
       layout="horizontal"
-      name="DEEP_LINK"
+      name="CLI_COMMAND"
     >
       <S.ControlsContainer>
         <S.OptionsContainer>

diff --git a/web/src/components/RunDetailAutomateMethods/methods/DeepLink/Controls.tsx b/web/src/components/RunDetailAutomateMethods/methods/DeepLink/Controls.tsx
@@ -22,15 +22,15 @@ const Controls = ({onChange, environment: {values} = Environment({}), test, envi
   const defaultValues = useMemo(
     () => ({
       variables: values,
-      useEnvironmentId: false,
+      useEnvironmentId: true,
     }),
     [values]
   );
 
   useEffect(() => {
     onChange({
       variables: variables ?? [],
-      useEnvironmentId: useEnvironmentId ?? false,
+      useEnvironmentId: useEnvironmentId ?? true,
       environmentId,
       test,
     });

diff --git a/web/src/components/RunDetailAutomateMethods/methods/DeepLink/DeepLink.styled.ts b/web/src/components/RunDetailAutomateMethods/methods/DeepLink/DeepLink.styled.ts
@@ -45,13 +45,7 @@ export const ControlsContainer = styled.div`
 
 export const OptionsContainer = styled.div``;
 
-export const EntryContainer = styled.div`
-  // align-items: center;
-  // display: grid;
-  // justify-content: center;
-  // grid-template-columns: 1fr auto;
-  // margin-bottom: 8px;
-`;
+export const EntryContainer = styled.div``;
 
 export const ValuesContainer = styled.div`
   align-items: center;
@@ -78,3 +72,17 @@ export const DeleteVariableButton = styled(Button)``;
 export const VariablesContainer = styled.div`
   margin: 16px 0;
 `;
+
+export const TryItButton = styled(Button)`
+  && {
+    padding: 0 8px;
+    background: ${({theme}) => theme.color.white};
+    font-weight: 600;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background: ${({theme}) => theme.color.white};
+    }
+  }
+`;
diff --git a/web/src/components/RunDetailAutomateMethods/methods/DeepLink/DeepLink.tsx b/web/src/components/RunDetailAutomateMethods/methods/DeepLink/DeepLink.tsx
@@ -1,7 +1,5 @@
-import {FramedCodeBlock} from 'components/CodeBlock';
 import {Typography} from 'antd';
-// import {ReadOutlined} from '@ant-design/icons';
-// import {CLI_RUNNING_TESTS_URL} from 'constants/Common.constants';
+import {FramedCodeBlock} from 'components/CodeBlock';
 import * as S from './DeepLink.styled';
 import Controls from './Controls';
 import {IMethodProps} from '../../RunDetailAutomateMethods';
@@ -14,9 +12,6 @@ const DeepLink = ({test, environmentId, run: {environment}}: IMethodProps) => {
     <S.Container>
       <S.TitleContainer>
         <S.Title>Deep Link Usage</S.Title>
-        {/* <a href={CLI_RUNNING_TESTS_URL} target="_blank">
-          <ReadOutlined />
-        </a> */}
       </S.TitleContainer>
       <Typography.Paragraph>
         The deep link below enables you to run this test via a browser. It is useful as you can create dashboards to run
@@ -28,6 +23,13 @@ const DeepLink = ({test, environmentId, run: {environment}}: IMethodProps) => {
         value={deepLink}
         minHeight="80px"
         maxHeight="80px"
+        actions={
+          <a target="_blank" href={deepLink}>
+            <S.TryItButton ghost type="primary">
+              Try it
+            </S.TryItButton>
+          </a>
+        }
       />
       <Controls onChange={onGetDeepLink} environment={environment} test={test} environmentId={environmentId} />
     </S.Container>

diff --git a/web/src/components/WithAnalytics/WithAnalytics.tsx b/web/src/components/WithAnalytics/WithAnalytics.tsx
@@ -1,5 +1,5 @@
 import {useEffect} from 'react';
-import AnalyticsService from '../../services/Analytics/Analytics.service';
+import AnalyticsService from 'services/Analytics/Analytics.service';
 
 const withAnalytics = <P extends object>(Component: React.ComponentType<P>, name: string) => {
   const FunctionComponent = (props: P) => {

diff --git a/web/src/pages/AutomatedTestRun/AutomatedTestRun.tsx b/web/src/pages/AutomatedTestRun/AutomatedTestRun.tsx
@@ -1,4 +1,4 @@
-import {useParams} from 'react-router-dom';
+import {useParams, useSearchParams} from 'react-router-dom';
 
 import Layout from 'components/Layout';
 import TestSpecFormProvider from 'components/TestSpecForm/TestSpecForm.provider';
@@ -7,11 +7,13 @@ import TestProvider from 'providers/Test/Test.provider';
 import Content from './Content';
 
 const AutomatedTestRun = () => {
-  const {testId = '', version = '1'} = useParams();
+  const {testId = ''} = useParams();
+  const [query] = useSearchParams();
+  const version = query.get('version') ? Number(query.get('version')) : undefined;
 
   return (
     <Layout hasMenu>
-      <TestProvider testId={testId} version={Number(version)}>
+      <TestProvider testId={testId} version={version}>
         <TestSpecFormProvider testId={testId}>
           <Content />
         </TestSpecFormProvider>

diff --git a/web/src/providers/Test/Test.provider.tsx b/web/src/providers/Test/Test.provider.tsx
@@ -49,14 +49,15 @@ const TestProvider = ({children, testId, version = 0}: IProps) => {
   } = useGetTestVersionByIdQuery({testId, version}, {skip: !version});
   const {data: latestTest, isLoading: isLatestLoading, isError: isLatestError} = useGetTestByIdQuery({testId});
 
-  const isLatestVersion = useMemo(
-    () => Boolean(version) && version === latestTest?.version,
-    [latestTest?.version, version]
-  );
   const isLoading = isLatestLoading || isCurrentLoading;
   const isError = isLatestError || isCurrentError;
   const currentTest = (version ? test : latestTest)!;
 
+  const isLatestVersion = useMemo(
+    () => (Boolean(version) && version === latestTest?.version) || currentTest?.version === latestTest?.version,
+    [currentTest?.version, latestTest?.version, version]
+  );
+
   const onEdit = useCallback(
     (values: TDraftTest) => {
       if (isLatestVersion) edit(test!, values);
@@ -73,15 +74,15 @@ const TestProvider = ({children, testId, version = 0}: IProps) => {
     (request: Partial<TTestRunRequest> = {}) => {
       if (isLatestVersion)
         runTest({
-          test: test!,
+          test: currentTest,
           ...request,
         });
       else {
         setAction('run');
         setIsVersionModalOpen(true);
       }
     },
-    [isLatestVersion, runTest, test]
+    [currentTest, isLatestVersion, runTest]
   );
 
   const onConfirm = useCallback(() => {

diff --git a/web/src/services/DeepLink.service.ts b/web/src/services/DeepLink.service.ts
@@ -10,14 +10,14 @@ export type TDeepLinkConfig = {
 };
 
 const DeepLinkService = () => ({
-  getLink({variables, useEnvironmentId, test: {id: testId, version}, environmentId}: TDeepLinkConfig) {
+  getLink({variables, useEnvironmentId, test: {id: testId}, environmentId}: TDeepLinkConfig) {
     const baseUrl = getServerBaseUrl();
     const filteredVariables = variables.filter(variable => !!variable && variable.key);
     const stringVariables = encodeURI(JSON.stringify(filteredVariables));
 
-    const url = `${baseUrl}test/${testId}/version/${version}/run?${
-      filteredVariables.length ? `variables=${stringVariables}` : ''
-    }${useEnvironmentId && environmentId ? `&environmentId=${environmentId}` : ''}`;
+    const url = `${baseUrl}test/${testId}/run?${filteredVariables.length ? `variables=${stringVariables}` : ''}${
+      useEnvironmentId && environmentId ? `&environmentId=${environmentId}` : ''
+    }`;
 
     return url;
   },