feat(frontend): Adding Github actions info (#3495)

* feat(frontend): Adding Github actions info

* feat(frontend): adding constant

* fixing messaging

web/src/components/RunDetailAutomate/RunDetailAutomate.tsx

@@ -5,6 +5,7 @@ import RunDetailAutomateMethods from 'components/RunDetailAutomateMethods';
 import CliCommand from 'components/RunDetailAutomateMethods/methods/CLICommand';
 import Cypress from 'components/RunDetailAutomateMethods/methods/Cypress';
 import DeepLink from 'components/RunDetailAutomateMethods/methods/DeepLink';
+import GithubActions from 'components/RunDetailAutomateMethods/methods/GithubActions';
 import {CLI_RUNNING_TESTS_URL} from 'constants/Common.constants';
 import {TriggerTypes} from 'constants/Test.constants';
 import Test from 'models/Test.model';
@@ -35,6 +36,11 @@ function getMethods(triggerType: TriggerTypes) {
           label: 'Deep Link',
           component: DeepLink,
         },
+        {
+          id: 'githubAction',
+          label: 'GitHub Actions',
+          component: GithubActions,
+        },
       ];
   }
 }

web/src/components/RunDetailAutomateMethods/methods/GithubActions/GithubActions.styled.ts

@@ -0,0 +1,28 @@
+import {Typography} from 'antd';
+import styled from 'styled-components';
+
+export const Title = styled(Typography.Title).attrs({
+  level: 3,
+})`
+  && {
+    font-size: ${({theme}) => theme.size.md};
+    font-weight: 600;
+    margin-bottom: 16px;
+  }
+`;
+
+export const Subtitle = styled(Typography.Paragraph)`
+  && {
+    margin-top: 16px;
+  }
+`;
+
+export const TitleContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const Container = styled.div`
+  margin: 16px 0;
+`;

web/src/components/RunDetailAutomateMethods/methods/GithubActions/GithubActions.tsx

@@ -0,0 +1,39 @@
+import {Typography} from 'antd';
+import {getServerBaseUrl} from 'utils/Common';
+import {GITHUB_ACTION_URL, CLI_DOCS_URL} from 'constants/Common.constants';
+import {withCustomization} from 'providers/Customization';
+import {FramedCodeBlock} from 'components/CodeBlock';
+import * as S from './GithubActions.styled';
+
+const actionConfig = `- name: Configure Tracetest CLI
+  uses: kubeshop/tracetest-github-action@v1
+  with:
+    endpoint: ${getServerBaseUrl()}
+`;
+
+const GithubActions = () => {
+  return (
+    <S.Container>
+      <S.TitleContainer>
+        <S.Title>GitHub Action Configuration</S.Title>
+      </S.TitleContainer>
+      <Typography.Paragraph>
+        Integrate Tracetest into your GitHub pipeline by adding this snippet to your workflow steps to utilize{' '}
+        <a href={CLI_DOCS_URL} target="__blank">
+          Tracetest CLI
+        </a>{' '}
+        for test runs:
+      </Typography.Paragraph>
+      <FramedCodeBlock title="Snippet" language="yaml" value={actionConfig} minHeight="120px" maxHeight="120px" />
+      <S.Subtitle type="secondary">
+        The endpoint parameter is the base address where your Tracetest Core Server is installed. <br /> Here&apos;s a
+        full example of how to use it:{' '}
+        <a href={GITHUB_ACTION_URL} target="__blank">
+          tracetest-cli-with-tracetest-core.yml
+        </a>
+      </S.Subtitle>
+    </S.Container>
+  );
+};
+
+export default withCustomization(GithubActions, 'githubActions');

web/src/components/RunDetailAutomateMethods/methods/GithubActions/index.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
+export {default} from './GithubActions';

web/src/constants/Common.constants.ts

@@ -30,6 +30,8 @@ export const TEST_RUNNER_DOCUMENTATION_URL = 'https://docs.tracetest.io/configur
 export const ANALYZER_RULES_DOCUMENTATION_URL = 'https://docs.tracetest.io/analyzer/rules';
 export const EXPRESSIONS_DOCUMENTATION_URL = 'https://docs.tracetest.io/concepts/expressions';
 export const VARIABLE_SET_DOCUMENTATION_URL = 'https://docs.tracetest.io/concepts/variable-sets';
+export const GITHUB_ACTION_URL = 'https://github.com/kubeshop/tracetest-github-action/tree/main/examples/tracetest-cli-with-tracetest-core';
+export const CLI_DOCS_URL = 'https://docs.tracetest.io/cli/cli-installation-reference';
 
 export const SELECTOR_LANGUAGE_CHEAT_SHEET_URL = `${process.env.PUBLIC_URL}/SL_cheat_sheet.pdf`;