feat(frontend): add help info in settings pages (#3558)

kubeshop · Jan 24, 2024 · 01c2974 · 01c2974
1 parent 969efca
commit 01c2974
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 23 deletions.
diff --git a/web/src/components/Settings/DataStore/DataStore.styled.ts b/web/src/components/Settings/DataStore/DataStore.styled.ts
@@ -10,9 +10,11 @@ export const Title = styled(Typography.Title)`
 `;
 
 export const Wrapper = styled.div`
+  background: ${({theme}) => theme.color.white};
+  border-radius: 2px;
+  border: ${({theme}) => `1px solid ${theme.color.borderLight}`};
   display: flex;
   flex-direction: column;
-  background: ${({theme}) => theme.color.white};
 `;
 
 export const FormContainer = styled.div`

diff --git a/web/src/components/Settings/Demo/Demo.tsx b/web/src/components/Settings/Demo/Demo.tsx
@@ -1,20 +1,30 @@
-import {OTEL_DEMO_GITHUB, POKESHOP_GITHUB} from 'constants/Common.constants';
+import DocsBanner from 'components/DocsBanner';
+import {DEMO_DOCUMENTATION_URL, OTEL_DEMO_GITHUB, POKESHOP_GITHUB} from 'constants/Common.constants';
 import DemoForm from './DemoForm';
 import * as S from '../common/Settings.styled';
 
 const Demo = () => (
   <S.Container>
+    <S.Title level={2}>Demo</S.Title>
     <S.Description>
-      Tracetest has the option to enable Test examples for our{' '}
-      <a href={POKESHOP_GITHUB} target="_blank">
-        Pokeshop Demo App
-      </a>{' '}
-      or the{' '}
-      <a href={OTEL_DEMO_GITHUB} target="_blank">
-        OpenTelemetry Astronomy Shop Demo
-      </a>
-      . You will require an instance of those applications running alongside your Tracetest server to be able to use
-      them. You can adjust the demo values below:
+      <p>
+        Tracetest has the option to enable Test examples for our{' '}
+        <a href={POKESHOP_GITHUB} target="_blank">
+          Pokeshop Demo App
+        </a>{' '}
+        or the{' '}
+        <a href={OTEL_DEMO_GITHUB} target="_blank">
+          OpenTelemetry Astronomy Shop Demo
+        </a>
+        . You will require an instance of those applications running alongside your Tracetest server to be able to use
+        them.
+      </p>
+      <DocsBanner>
+        Need more information about the Demos?{' '}
+        <a href={DEMO_DOCUMENTATION_URL} target="__blank">
+          Learn more in our docs
+        </a>
+      </DocsBanner>
     </S.Description>
     <S.FormContainer>
       <DemoForm />

diff --git a/web/src/components/Settings/Linter/Linter.tsx b/web/src/components/Settings/Linter/Linter.tsx
@@ -5,6 +5,7 @@ import * as S from '../common/Settings.styled';
 
 const Linter = () => (
   <S.Container>
+    <S.Title level={2}>Analyzer (Beta)</S.Title>
     <S.Description>
       <p>
         The Tracetest Analyzer is a plugin based framework used to audit OpenTelemetry traces to help teams improve
@@ -13,9 +14,9 @@ const Linter = () => (
         Add to this <a href={OCTOLIINT_ISSUE_URL}>Issue</a> or call us on <a href={COMMUNITY_SLACK_URL}>Slack</a>!
       </p>
       <DocsBanner>
-        Need more information about Analyzer?{' '}
+        Need more information about the Analyzer?{' '}
         <a href={ANALYZER_DOCUMENTATION_URL} target="_blank">
-          Go to our docs
+          Learn more in our docs
         </a>
       </DocsBanner>
     </S.Description>

diff --git a/web/src/components/Settings/Polling/Polling.tsx b/web/src/components/Settings/Polling/Polling.tsx
@@ -1,11 +1,19 @@
+import DocsBanner from 'components/DocsBanner';
+import {TRACE_POLLING_DOCUMENTATION_URL} from 'constants/Common.constants';
 import PollingForm from './PollingForm';
 import * as S from '../common/Settings.styled';
 
 const Polling = () => (
   <S.Container>
+    <S.Title level={2}>Trace Polling</S.Title>
     <S.Description>
-      Tracetest uses polling to gather the distributed trace associated with each test run. You can adjust the polling
-      values below:
+      <p>Tracetest uses polling to gather the distributed trace associated with each test run.</p>
+      <DocsBanner>
+        Need more information about Trace Polling?{' '}
+        <a href={TRACE_POLLING_DOCUMENTATION_URL} target="__blank">
+          Learn more in our docs
+        </a>
+      </DocsBanner>
     </S.Description>
     <S.FormContainer>
       <PollingForm />

diff --git a/web/src/components/Settings/TestRunner/TestRunner.tsx b/web/src/components/Settings/TestRunner/TestRunner.tsx
@@ -6,12 +6,13 @@ import TestRunnerForm from './TestRunnerForm';
 const TestRunner = () => {
   return (
     <S.Container>
+      <S.Title level={2}>Test Runner</S.Title>
       <S.Description>
-        <p>The Test Runner allows you to configure the behavior used to execute your tests and generate the results</p>
+        <p>The Test Runner allows you to configure the behavior used to execute your tests and generate the results.</p>
         <DocsBanner>
-          Need more information about Test Runner?{' '}
+          Need more information about the Test Runner?{' '}
           <a href={TEST_RUNNER_DOCUMENTATION_URL} target="_blank">
-            Go to our docs
+            Learn more in our docs
           </a>
         </DocsBanner>
       </S.Description>

diff --git a/web/src/components/Settings/common/Settings.styled.ts b/web/src/components/Settings/common/Settings.styled.ts
@@ -3,10 +3,12 @@ import styled from 'styled-components';
 
 export const Container = styled.div`
   background: ${({theme}) => theme.color.white};
+  border: ${({theme}) => `1px solid ${theme.color.borderLight}`};
+  border-radius: 2px;
   display: flex;
   flex-direction: column;
   margin-bottom: 24px;
-  padding: 16px;
+  padding: 24px;
 `;
 
 export const FormContainer = styled.div`
@@ -21,7 +23,7 @@ export const FooterContainer = styled.div`
   border-top: 1px solid ${({theme}) => theme.color.borderLight};
 `;
 
-export const Description = styled(Typography.Text)`
+export const Description = styled(Typography.Paragraph)`
   && {
     color: ${({theme}) => theme.color.textSecondary};
   }
@@ -50,3 +52,9 @@ export const SwitchLabel = styled.label<{$disabled?: boolean}>`
   cursor: ${({$disabled}) => ($disabled ? 'not-allowed' : 'pointer')};
   margin-bottom: 24px;
 `;
+
+export const Title = styled(Typography.Title)`
+  && {
+    margin-bottom: 16px;
+  }
+`;
diff --git a/web/src/constants/Common.constants.ts b/web/src/constants/Common.constants.ts
@@ -30,8 +30,11 @@ 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 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 TRACE_POLLING_DOCUMENTATION_URL = 'https://docs.tracetest.io/configuration/trace-polling/';
+export const DEMO_DOCUMENTATION_URL = 'https://docs.tracetest.io/configuration/demo/';
 
 export const SELECTOR_LANGUAGE_CHEAT_SHEET_URL = `${process.env.PUBLIC_URL}/SL_cheat_sheet.pdf`;
 

diff --git a/web/src/constants/TracetestAttributes.constants.ts b/web/src/constants/TracetestAttributes.constants.ts
@@ -16,7 +16,7 @@ export default {
   },
   'tracetest.span.type': {
     description:
-      'Tracetest attribute based on the [OTel Trace Semantic Conventions](https://github.com/open-telemetry/opentelemetry-specification/tree/main/specification/trace/semantic_conventions)',
+      'Tracetest attribute based on the [OTel Trace Semantic Conventions](https://github.com/open-telemetry/semantic-conventions/blob/main/docs/README.md)',
     note: '',
     tags: ['general', 'http', 'database', 'rpc', 'messaging', 'faas', 'exception'],
   },