Merge branch 'landing-page-redesign' of github.com:grafana/synthetic-…

…monitoring-app into landing-page-redesign
grafana · Apr 26, 2024 · 5c96bba · 5c96bba
2 parents bbd79d0 + a18a4b3
commit 5c96bba
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 61 deletions.
diff --git a/src/components/CheckEditor/FormComponents/ScriptedCheckScript.tsx b/src/components/CheckEditor/FormComponents/ScriptedCheckScript.tsx
@@ -1,24 +1,66 @@
 import React from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
+import { Tab, TabContent, TabsBar } from '@grafana/ui';
 
 import { CheckFormValuesScripted } from 'types';
 import { CodeEditor } from 'components/CodeEditor';
-import { ScriptExamplesMenu } from 'components/ScriptExamplesMenu/ScriptExamplesMenu';
+import { CodeSnippet } from 'components/CodeSnippet';
+import { SCRIPT_EXAMPLES } from 'components/WelcomeTabs/constants';
+
+enum ScriptEditorTabs {
+  Script = 'script',
+  Examples = 'examples',
+}
 
 export const ScriptedCheckScript = () => {
-  const { control, setValue, getValues } = useFormContext<CheckFormValuesScripted>();
-  const id = getValues('id');
+  const { control } = useFormContext<CheckFormValuesScripted>();
+  const [selectedTab, setSelectedTab] = React.useState(ScriptEditorTabs.Script);
 
   return (
     <>
-      {!id && <ScriptExamplesMenu onSelectExample={(script) => setValue('settings.scripted.script', script)} />}
-      <Controller
-        name="settings.scripted.script"
-        control={control}
-        render={({ field }) => {
-          return <CodeEditor {...field} />;
-        }}
-      />
+      <TabsBar>
+        <Tab
+          label="Script"
+          onChangeTab={() => setSelectedTab(ScriptEditorTabs.Script)}
+          active={selectedTab === ScriptEditorTabs.Script}
+        />
+        <Tab
+          label="Examples"
+          onChangeTab={() => setSelectedTab(ScriptEditorTabs.Examples)}
+          active={selectedTab === ScriptEditorTabs.Examples}
+        />
+      </TabsBar>
+      <TabContent>
+        {selectedTab === ScriptEditorTabs.Script && (
+          <Controller
+            name="settings.scripted.script"
+            control={control}
+            render={({ field }) => {
+              return <CodeEditor {...field} />;
+            }}
+          />
+        )}
+        {selectedTab === ScriptEditorTabs.Examples && (
+          <CodeSnippet
+            hideHeader
+            canCopy={true}
+            tabs={[
+              {
+                value: 'Example scripts',
+                label: '',
+                groups: SCRIPT_EXAMPLES.map(({ label, script }) => ({
+                  value: label,
+                  label,
+                  code: script,
+                  lang: 'js',
+                })),
+              },
+            ]}
+            dedent={true}
+            lang="js"
+          />
+        )}
+      </TabContent>
     </>
   );
 };
diff --git a/src/components/CodeSnippet/CodeSnippet.tsx b/src/components/CodeSnippet/CodeSnippet.tsx
@@ -60,6 +60,7 @@ export const CodeSnippet = ({
   initialTab,
   tabs = [],
   className,
+  hideHeader,
 }: CodeSnippetProps) => {
   const [activeTab, setActiveTab] = useState<string | undefined>(initialTab);
   const [activeGroup, setActiveGroup] = useState<string | undefined>();
@@ -97,6 +98,7 @@ export const CodeSnippet = ({
 
   return (
     <SnippetWindow
+      hideHeader={hideHeader}
       titleContent={
         tabs.length > 0 && (
           <TabsBar className={styles.tabsBar}>

diff --git a/src/components/CodeSnippet/CodeSnippet.types.ts b/src/components/CodeSnippet/CodeSnippet.types.ts
@@ -27,6 +27,7 @@ export interface CodeSnippetProps {
   tabs?: CodeSnippetTab[];
   height?: string;
   className?: string;
+  hideHeader?: boolean;
 }
 
 export interface CodeSnippetTabProps {

diff --git a/src/components/CodeSnippet/SnippetWindow.tsx b/src/components/CodeSnippet/SnippetWindow.tsx
@@ -7,6 +7,7 @@ interface SnippetWindowProps {
   titleContent?: ReactNode;
   children?: ReactNode;
   className?: string;
+  hideHeader?: boolean;
 }
 
 interface TitleBarProps {
@@ -28,12 +29,12 @@ function TitleBar({ children }: TitleBarProps) {
   );
 }
 
-export function SnippetWindow({ titleContent, className, children }: SnippetWindowProps) {
+export function SnippetWindow({ titleContent, className, children, hideHeader }: SnippetWindowProps) {
   const styles = useStyles2(getStyles);
 
   return (
     <div className={cx(styles.appWindowStyled, className)}>
-      <TitleBar>{titleContent}</TitleBar>
+      {!hideHeader && <TitleBar>{titleContent}</TitleBar>}
       <div className={styles.contentContainer}>{children}</div>
     </div>
   );
@@ -70,7 +71,6 @@ export function getStyles(theme: GrafanaTheme2) {
       marginRight: '5px',
     }),
     contentContainer: css({
-      width: '100%',
       display: 'flex',
       flexDirection: 'column',
       border: `1px ${theme.colors.border.medium} solid`,

diff --git a/src/components/ScriptExamplesMenu/ScriptExamplesMenu.tsx b/src/components/ScriptExamplesMenu/ScriptExamplesMenu.tsx
diff --git a/src/components/WelcomeTabs/WelcomeTabContent.tsx b/src/components/WelcomeTabs/WelcomeTabContent.tsx
@@ -20,7 +20,7 @@ export function WelcomeTabContent({ activeTab }: Props) {
     case WelcomeTab.Protocol:
       return (
         <>
-          <p>Send individual requests via HTTP, DNS, TCP, PING or traceroute</p>
+          <p className={styles.text}>Send individual requests via HTTP, DNS, TCP, PING or traceroute</p>
 
           <img
             src={config.theme2.isDark ? dashboardDark : dashboardLight}
@@ -32,7 +32,7 @@ export function WelcomeTabContent({ activeTab }: Props) {
     case WelcomeTab.K6:
       return (
         <>
-          <p>Use k6 scripts to monitor your services flexibly</p>
+          <p className={styles.text}>Use k6 scripts to monitor your services flexibly</p>
           <CodeSnippet
             canCopy={true}
             className={styles.codeSnippet}
@@ -56,7 +56,7 @@ export function WelcomeTabContent({ activeTab }: Props) {
     case WelcomeTab.PrivateProbes:
       return (
         <>
-          <p>
+          <p className={styles.text}>
             In addition to the locations we provide out of the box, you can set up your own probes to run inside your
             network or from a location of your choosing
           </p>
@@ -70,7 +70,7 @@ export function WelcomeTabContent({ activeTab }: Props) {
     case WelcomeTab.AsCode:
       return (
         <>
-          <p>
+          <p className={styles.text}>
             Manage your checks as code, either via{' '}
             <a
               href="https://registry.terraform.io/providers/grafana/grafana/latest/docs/resources/synthetic_monitoring_check"
@@ -114,8 +114,15 @@ export function WelcomeTabContent({ activeTab }: Props) {
 
 function getStyles(theme: GrafanaTheme2) {
   return {
-    screenshot: css({ maxHeight: '700px', maxWidth: '100%', marginBottom: theme.spacing(5) }),
+    screenshot: css({ maxWidth: '100%' }),
     tabContent: css({ marginTop: theme.spacing(4) }),
     codeSnippet: css({ height: '700px' }),
+    text: css({
+      fontSize: theme.typography.h5.fontSize,
+      marginLeft: `auto`,
+      marginRight: `auto`,
+      marginBottom: theme.spacing(4),
+      maxWidth: `640px`,
+    }),
   };
 }
diff --git a/src/components/WelcomeTabs/WelcomeTabs.tsx b/src/components/WelcomeTabs/WelcomeTabs.tsx
@@ -60,7 +60,7 @@ export function WelcomeTabs() {
 
 function getStyles(theme: GrafanaTheme2) {
   return {
-    tabContent: css({ marginTop: theme.spacing(4), maxWidth: '100%', minHeight: '500px' }),
-    tabBar: css({ maxWidth: '560px', width: '100%' }),
+    tabContent: css({ margin: theme.spacing(4, 0, 8) }),
+    tabBar: css({ maxWidth: '560px', width: '100%', margin: `auto` }),
   };
 }
diff --git a/src/page/WelcomePage.tsx b/src/page/WelcomePage.tsx
@@ -202,7 +202,7 @@ export const WelcomePage: FC<Props> = () => {
     <PluginPage layout={PageLayoutType.Canvas}>
       <div className={styles.container}>
         <div className={styles.header}>
-          <img src={meta?.info.logos.large} className={styles.logo} />
+          <img src={meta?.info.logos.large} className={styles.logo} role="presentation" />
           <h1 className={styles.title}>
             Proactively monitor your endpoints and user flows from locations around the world
           </h1>
@@ -271,7 +271,7 @@ function getStyles(theme: GrafanaTheme2) {
       textAlign: 'center',
     }),
     header: css({
-      maxWidth: '520px',
+      maxWidth: '660px',
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'flex-start',
@@ -292,18 +292,15 @@ function getStyles(theme: GrafanaTheme2) {
       color: theme.colors.text.secondary,
     }),
     getStartedButton: css({
-      marginTop: theme.spacing(8),
+      marginTop: theme.spacing(4),
     }),
     divider: css({
       width: '100%',
     }),
     valueProp: css({
       marginTop: theme.spacing(6),
-      maxWidth: '700px',
+      maxWidth: '860px',
       width: '100%',
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
     }),
     valuePropHeader: css({ marginBottom: theme.spacing(4) }),
   };