GettingStarted: Improve styling and add tracking (#80410)

* refactor: remove icons and related styling

* refactor: remove cut off on the left side

* fix: aria-labels

* feat: add tracking

* refactor: adjust button position

* refactor: move previous button back

* refactor: use emotion object syntax

* feat: add tracking

* refactor: remove console.log()

.betterer.results

@@ -6051,19 +6051,6 @@ exports[`better eslint`] = {
     "public/app/plugins/panel/geomap/utils/tooltip.ts:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
-    "public/app/plugins/panel/gettingstarted/GettingStarted.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"],
-      [0, 0, 0, "Styles should be written using objects.", "3"],
-      [0, 0, 0, "Styles should be written using objects.", "4"],
-      [0, 0, 0, "Styles should be written using objects.", "5"],
-      [0, 0, 0, "Styles should be written using objects.", "6"],
-      [0, 0, 0, "Styles should be written using objects.", "7"],
-      [0, 0, 0, "Styles should be written using objects.", "8"],
-      [0, 0, 0, "Styles should be written using objects.", "9"],
-      [0, 0, 0, "Styles should be written using objects.", "10"]
-    ],
     "public/app/plugins/panel/gettingstarted/components/DocsCard.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"],
       [0, 0, 0, "Styles should be written using objects.", "1"],
@@ -6086,8 +6073,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Styles should be written using objects.", "5"]
     ],
     "public/app/plugins/panel/gettingstarted/components/sharedStyles.ts:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
+      [0, 0, 0, "Styles should be written using objects.", "0"]
     ],
     "public/app/plugins/panel/heatmap/HeatmapPanel.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],

public/app/plugins/panel/gettingstarted/GettingStarted.tsx

@@ -3,7 +3,7 @@ import { css, cx } from '@emotion/css';
 import React, { PureComponent } from 'react';
 
 import { PanelProps } from '@grafana/data';
-import { config } from '@grafana/runtime';
+import { config, reportInteraction } from '@grafana/runtime';
 import { Button, Spinner, stylesFactory } from '@grafana/ui';
 import { contextSrv } from 'app/core/core';
 import { backendSrv } from 'app/core/services/backend_srv';
@@ -53,12 +53,14 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
   }
 
   onForwardClick = () => {
+    reportInteraction('grafana_getting_started_button_to_advanced_tutorials');
     this.setState((prevState) => ({
       currentStep: prevState.currentStep + 1,
     }));
   };
 
   onPreviousClick = () => {
+    reportInteraction('grafana_getting_started_button_to_basic_tutorials');
     this.setState((prevState) => ({
       currentStep: prevState.currentStep - 1,
     }));
@@ -69,6 +71,8 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
     const dashboard = getDashboardSrv().getCurrent();
     const panel = dashboard?.getPanelById(id);
 
+    reportInteraction('grafana_getting_started_remove_panel');
+
     dashboard?.removePanel(panel!);
 
     backendSrv.put('/api/user/helpflags/1', undefined, { showSuccessAlert: false }).then((res) => {
@@ -97,7 +101,7 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
               <Button
                 className={cx(styles.backForwardButtons, styles.previous)}
                 onClick={this.onPreviousClick}
-                aria-label="To advanced tutorials"
+                aria-label="To basic tutorials"
                 icon="angle-left"
                 variant="secondary"
               />
@@ -109,7 +113,7 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
               <Button
                 className={cx(styles.backForwardButtons, styles.forward)}
                 onClick={this.onForwardClick}
-                aria-label="To basic tutorials"
+                aria-label="To advanced tutorials"
                 icon="angle-right"
                 variant="secondary"
               />
@@ -124,86 +128,83 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
 const getStyles = stylesFactory(() => {
   const theme = config.theme2;
   return {
-    container: css`
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      // background: url(public/img/getting_started_bg_${theme.colors.mode}.svg) no-repeat;
-      background-size: cover;
-      padding: ${theme.spacing(4)} ${theme.spacing(2)} 0;
-    `,
-    content: css`
-      label: content;
-      display: flex;
-      justify-content: center;
+    container: css({
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100%',
+      backgroundSize: 'cover',
+      padding: `${theme.spacing(4)} ${theme.spacing(2)} 0`,
+    }),
+    content: css({
+      label: 'content',
+      display: 'flex',
+      justifyContent: 'center',
 
-      ${theme.breakpoints.down('xxl')} {
-        margin-left: ${theme.spacing(3)};
-        justify-content: flex-start;
-      }
-    `,
-    header: css`
-      label: header;
-      margin-bottom: ${theme.spacing(3)};
-      display: flex;
-      flex-direction: column;
+      [theme.breakpoints.down('xxl')]: {
+        marginLeft: theme.spacing(3),
+        justifyContent: 'flex-start',
+      },
+    }),
+    header: css({
+      label: 'header',
+      marginBottom: theme.spacing(3),
+      display: 'flex',
+      flexDirection: 'column',
 
-      ${theme.breakpoints.down('lg')} {
-        flex-direction: row;
-      }
-    `,
-    headerLogo: css`
-      height: 58px;
-      padding-right: ${theme.spacing(2)};
-      display: none;
+      [theme.breakpoints.down('lg')]: {
+        flexDirection: 'row',
+      },
+    }),
+    headerLogo: css({
+      height: '58px',
+      paddingRight: theme.spacing(2),
+      display: 'none',
 
-      ${theme.breakpoints.up('md')} {
-        display: block;
-      }
-    `,
-    heading: css`
-      label: heading;
-      margin-right: ${theme.spacing(3)};
-      margin-bottom: ${theme.spacing(3)};
-      flex-grow: 1;
-      display: flex;
+      [theme.breakpoints.up('md')]: {
+        display: 'block',
+      },
+    }),
+    heading: css({
+      label: 'heading',
+      marginRight: theme.spacing(3),
+      marginBottom: theme.spacing(3),
+      flexGrow: 1,
+      display: 'flex',
 
-      ${theme.breakpoints.up('md')} {
-        margin-bottom: 0;
-      }
-    `,
-    backForwardButtons: css`
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-    `,
-    previous: css`
-      left: 10px;
-
-      ${theme.breakpoints.down('md')} {
-        left: 0;
-      }
-    `,
-    forward: css`
-      right: 10px;
-
-      ${theme.breakpoints.down('md')} {
-        right: 0;
-      }
-    `,
-    dismiss: css`
-      align-self: flex-end;
-      text-decoration: underline;
-      margin-bottom: ${theme.spacing(1)};
-    `,
-    loading: css`
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 100%;
-    `,
-    loadingText: css`
-      margin-right: ${theme.spacing(1)};
-    `,
+      [theme.breakpoints.up('md')]: {
+        marginBottom: 0,
+      },
+    }),
+    backForwardButtons: css({
+      position: 'absolute',
+      top: '50%',
+      transform: 'translateY(-50%)',
+    }),
+    previous: css({
+      left: '10px',
+      [theme.breakpoints.down('md')]: {
+        left: 0,
+      },
+    }),
+    forward: css({
+      right: '10px',
+      [theme.breakpoints.down('md')]: {
+        right: 0,
+      },
+    }),
+    dismiss: css({
+      alignSelf: 'flex-end',
+      textDecoration: 'underline',
+      marginBottom: theme.spacing(1),
+    }),
+    loading: css({
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100%',
+    }),
+    loadingText: css({
+      marginRight: theme.spacing(1),
+    }),
   };
 });

public/app/plugins/panel/gettingstarted/components/DocsCard.tsx

@@ -2,11 +2,12 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { reportInteraction } from '@grafana/runtime';
 import { Icon, useStyles2 } from '@grafana/ui';
 
 import { Card } from '../types';
 
-import { cardContent, cardStyle, iconStyle } from './sharedStyles';
+import { cardContent, cardStyle } from './sharedStyles';
 
 interface Props {
   card: Card;
@@ -14,17 +15,17 @@ interface Props {
 
 export const DocsCard = ({ card }: Props) => {
   const styles = useStyles2(getStyles, card.done);
-  const iconStyles = useStyles2(iconStyle, card.done);
 
   return (
     <div className={styles.card}>
       <div className={cardContent}>
-        <a href={`${card.href}?utm_source=grafana_gettingstarted`} className={styles.url}>
+        <a
+          href={`${card.href}?utm_source=grafana_gettingstarted`}
+          className={styles.url}
+          onClick={() => reportInteraction('grafana_getting_started_docs', { title: card.title, link: card.href })}
+        >
           <div className={styles.heading}>{card.done ? 'complete' : card.heading}</div>
           <h4 className={styles.title}>{card.title}</h4>
-          <div>
-            <Icon className={iconStyles} name={card.icon} size="xxl" />
-          </div>
         </a>
       </div>
       <a
@@ -32,6 +33,7 @@ export const DocsCard = ({ card }: Props) => {
         className={styles.learnUrl}
         target="_blank"
         rel="noreferrer"
+        onClick={() => reportInteraction('grafana_getting_started_docs', { title: card.title, link: card.learnHref })}
       >
         Learn how in the docs <Icon name="external-link-alt" />
       </a>

public/app/plugins/panel/gettingstarted/components/Step.tsx

@@ -60,11 +60,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       overflow-y: hidden;
       width: 100%;
       display: flex;
-      justify-content: center;
-
-      ${theme.breakpoints.down('xxl')} {
       justify-content: flex-start;
-      }
     `,
   };
 };

public/app/plugins/panel/gettingstarted/components/TutorialCard.tsx

@@ -2,12 +2,13 @@ import { css } from '@emotion/css';
 import React, { MouseEvent } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Icon, useStyles2 } from '@grafana/ui';
+import { reportInteraction } from '@grafana/runtime';
+import { useStyles2 } from '@grafana/ui';
 import store from 'app/core/store';
 
 import { TutorialCardType } from '../types';
 
-import { cardContent, cardStyle, iconStyle } from './sharedStyles';
+import { cardContent, cardStyle } from './sharedStyles';
 
 interface Props {
   card: TutorialCardType;
@@ -15,7 +16,6 @@ interface Props {
 
 export const TutorialCard = ({ card }: Props) => {
   const styles = useStyles2(getStyles, card.done);
-  const iconStyles = useStyles2(iconStyle, card.done);
 
   return (
     <a
@@ -30,7 +30,6 @@ export const TutorialCard = ({ card }: Props) => {
         <div className={styles.heading}>{card.done ? 'complete' : card.heading}</div>
         <h4 className={styles.cardTitle}>{card.title}</h4>
         <div className={styles.info}>{card.info}</div>
-        <Icon className={iconStyles} name={card.icon} size="xxl" />
       </div>
     </a>
   );
@@ -42,6 +41,7 @@ const handleTutorialClick = (event: MouseEvent<HTMLAnchorElement>, card: Tutoria
   if (!isSet) {
     store.set(card.key, true);
   }
+  reportInteraction('grafana_getting_started_tutorial', { title: card.title });
 };
 
 const getStyles = (theme: GrafanaTheme2, complete: boolean) => {

public/app/plugins/panel/gettingstarted/components/sharedStyles.ts

@@ -34,14 +34,6 @@ export const cardStyle = (theme: GrafanaTheme2, complete: boolean) => {
 `;
 };
 
-export const iconStyle = (theme: GrafanaTheme2, complete: boolean) => css`
-  color: ${complete ? theme.v1.palette.blue95 : theme.colors.text.secondary};
-
-  ${theme.breakpoints.down('sm')} {
-    display: none;
-  }
-`;
-
 export const cardContent = css`
   padding: 16px;
 `;