feat: checks empty state (#1081)

* feat: add empty state component for empty checklist and empty home page

- also changes usage text.

* fix: adjust test

Test is only failing in CI, not when ran locally

Author: w1kman

src/components/CheckUsage.test.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { screen, waitFor } from '@testing-library/react';
+import { DataTestIds } from 'test/dataTestIds';
+import { render } from 'test/render';
+
+import { CheckFormValues, CheckType } from 'types';
+
+import { toFormValues } from './CheckEditor/checkFormTransformations';
+import { CheckFormContextProvider } from './CheckForm/CheckFormContext/CheckFormContext';
+import { CheckUsage } from './CheckUsage';
+import { fallbackCheckMap } from './constants';
+
+function RenderWrapper() {
+  const mockedCheck = fallbackCheckMap[CheckType.HTTP];
+  const defaultValues = toFormValues(mockedCheck, CheckType.HTTP);
+
+  const form = useForm<CheckFormValues>({ defaultValues });
+  return (
+    <FormProvider {...form}>
+      <CheckFormContextProvider disabled={false}>
+        <CheckUsage checkType={CheckType.HTTP} />
+      </CheckFormContextProvider>
+    </FormProvider>
+  );
+}
+
+async function renderComponent() {
+  const result = render(<RenderWrapper />);
+  await waitFor(() => screen.findByTestId(DataTestIds.CHECK_USAGE), { timeout: 3000 });
+
+  return result;
+}
+
+describe('CheckUsage', () => {
+  it('should render', async () => {
+    const { container } = await renderComponent();
+    expect(container).toBeInTheDocument();
+  });
+
+  it('should render the correct label', async () => {
+    await renderComponent();
+
+    expect(await screen.findByText('Estimated usage for this check', { selector: 'label > div' })).toBeInTheDocument();
+  });
+});

src/components/CheckUsage.tsx

@@ -3,6 +3,7 @@ import { useFormContext } from 'react-hook-form';
 import { GrafanaTheme2 } from '@grafana/data';
 import { Icon, Label, useStyles2 } from '@grafana/ui';
 import { css } from '@emotion/css';
+import { DataTestIds } from 'test/dataTestIds';
 
 import { CheckFormValues, CheckType } from 'types';
 import { checkFormValuesToUsageCalcValues } from 'utils';
@@ -46,7 +47,7 @@ export const CheckUsage = ({ checkType }: { checkType: CheckType }) => {
   }
 
   return (
-    <div className={styles.container}>
+    <div data-testid={DataTestIds.CHECK_USAGE} className={styles.container}>
       <Label
         description={
           !hideTelemetry && (
@@ -61,7 +62,7 @@ export const CheckUsage = ({ checkType }: { checkType: CheckType }) => {
           )
         }
       >
-        Approximate expected usage for this check
+        Estimated usage for this check
       </Label>
       <div className={styles.calcList}>
         <div className={styles.section}>

src/components/ChecksEmptyState.test.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import { DataTestIds } from 'test/dataTestIds';
+import { render } from 'test/render';
+
+import { ChecksEmptyState } from './ChecksEmptyState';
+
+async function renderComponent() {
+  const result = render(<ChecksEmptyState />);
+  await waitFor(() => screen.getByTestId(DataTestIds.CHECKS_EMPTY_STATE), { timeout: 3000 });
+
+  return result;
+}
+
+describe('ChecksEmptyState', () => {
+  it('should render', async () => {
+    const { container } = await renderComponent();
+    expect(container).toBeInTheDocument();
+  });
+
+  it('should render the correct message', async () => {
+    await renderComponent();
+
+    expect(await screen.findByText("You haven't created any checks yet")).toBeInTheDocument();
+  });
+
+  it('should render the correct button', async () => {
+    await renderComponent();
+
+    expect(await screen.findByText('Create check')).toBeInTheDocument();
+  });
+
+  it('should render the correct link', async () => {
+    await renderComponent();
+
+    expect(await screen.findByText('Synthetic Monitoring docs')).toBeInTheDocument();
+  });
+
+  it('should render the correct link href', async () => {
+    await renderComponent();
+
+    expect(await screen.findByText('Synthetic Monitoring docs')).toHaveAttribute(
+      'href',
+      'https://grafana.com/docs/grafana-cloud/synthetic-monitoring/'
+    );
+  });
+
+  it('should render the correct link target', async () => {
+    await renderComponent();
+
+    expect(await screen.findByText('Synthetic Monitoring docs')).toHaveAttribute('target', '_blank');
+  });
+});

src/components/ChecksEmptyState.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Button, EmptyState, TextLink } from '@grafana/ui';
+import { DataTestIds } from 'test/dataTestIds';
+
+import { ROUTES } from 'routing/types';
+import { useNavigation } from 'hooks/useNavigation';
+
+interface ChecksEmptyStatePageProps {
+  className?: string;
+}
+
+export function ChecksEmptyState({ className }: ChecksEmptyStatePageProps) {
+  const navigate = useNavigation();
+  const handleCallToAction = () => navigate(ROUTES.ChooseCheckGroup);
+
+  return (
+    <div className={className} data-testid={DataTestIds.CHECKS_EMPTY_STATE}>
+      <EmptyState
+        variant="call-to-action"
+        message="You haven't created any checks yet"
+        button={
+          <Button onClick={handleCallToAction} icon="plus">
+            Create check
+          </Button>
+        }
+      >
+        <p>
+          Create a check to start monitoring your services with Grafana Cloud, or check out the{' '}
+          <TextLink external href="https://grafana.com/docs/grafana-cloud/synthetic-monitoring/">
+            Synthetic Monitoring docs
+          </TextLink>
+          .
+        </p>
+      </EmptyState>
+    </div>
+  );
+}

src/page/CheckList/CheckList.test.tsx

@@ -18,6 +18,7 @@ import { Check, FeatureName } from 'types';
 import { ROUTES } from 'routing/types';
 import { generateRoutePath } from 'routing/utils';
 
+import { DataTestIds } from '../../test/dataTestIds';
 import { CheckList } from './CheckList';
 
 jest.mock('hooks/useNavigation', () => {
@@ -64,9 +65,14 @@ test('renders empty state', async () => {
 
   render(<CheckList />);
 
-  const emptyWarning = await screen.findByText('This account does not currently have any checks configured', {
-    exact: false,
-  });
+  const emptyWarning = await waitFor(
+    () =>
+      screen.findByTestId(DataTestIds.CHECKS_EMPTY_STATE, {
+        exact: false,
+      }),
+    { timeout: 10000 }
+  );
+
   expect(emptyWarning).toBeInTheDocument();
 });
 

src/page/CheckList/CheckList.tsx

@@ -14,14 +14,14 @@ import { useSuspenseProbes } from 'data/useProbes';
 import { useChecksReachabilitySuccessRate } from 'data/useSuccessRates';
 import { findCheckinMetrics } from 'data/utils';
 import { useQueryParametersState } from 'hooks/useQueryParametersState';
+import { ChecksEmptyState } from 'components/ChecksEmptyState';
 import { QueryErrorBoundary } from 'components/QueryErrorBoundary';
 import { CHECK_LIST_STATUS_OPTIONS } from 'page/CheckList/CheckList.constants';
 import { useCheckFilters } from 'page/CheckList/CheckList.hooks';
 import { matchesAllFilters } from 'page/CheckList/CheckList.utils';
 import { CheckListHeader } from 'page/CheckList/components/CheckListHeader';
 import { CheckListItem } from 'page/CheckList/components/CheckListItem';
 import { CheckListScene } from 'page/CheckList/components/CheckListScene';
-import { EmptyCheckList } from 'page/CheckList/components/EmptyCheckList';
 
 const CHECKS_PER_PAGE_CARD = 15;
 const CHECKS_PER_PAGE_LIST = 50;
@@ -175,7 +175,7 @@ const CheckListContent = ({ onChangeViewType, viewType }: CheckListContentProps)
   };
 
   if (checks.length === 0) {
-    return <EmptyCheckList />;
+    return <ChecksEmptyState />;
   }
 
   const showHeaders = viewType !== CheckListViewType.Viz;

src/page/CheckList/components/EmptyCheckList.tsx

@@ -1,73 +1,17 @@
-import React from 'react';
-import { GrafanaTheme2 } from '@grafana/data';
 import { EmbeddedScene, SceneReactObject } from '@grafana/scenes';
-import { Button, Card, TextLink, useStyles2 } from '@grafana/ui';
 import { css } from '@emotion/css';
 
-import { CheckType } from 'types';
-import { ROUTES } from 'routing/types';
-import { useNavigation } from 'hooks/useNavigation';
+import { ChecksEmptyState } from 'components/ChecksEmptyState';
 
-function getStyles(theme: GrafanaTheme2) {
-  return {
-    container: css`
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      min-height: 100%;
-    `,
-    cardHeader: css`
-      text-align: center;
-      justify-content: center;
-    `,
-    emptyCard: css`
-      min-height: 200px;
-      max-width: 800px;
-      padding: ${theme.spacing(4)};
-    `,
-    cardButtons: css`
-      display: flex;
-      justify-content: center;
-    `,
-  };
-}
-
-function EmptyScene({ checkType }: { checkType?: CheckType }) {
-  const styles = useStyles2(getStyles);
-  const navigate = useNavigation();
-
-  return (
-    <div className={styles.container}>
-      <Card className={styles.emptyCard}>
-        <Card.Heading className={styles.cardHeader}>
-          <p>
-            You don&apos;t have any {checkType ? checkType.toUpperCase() : ''} checks running. Click the Create a check
-            button to start monitoring your services with Grafana Cloud, or{' '}
-            <TextLink href="https://grafana.com/docs/grafana-cloud/synthetic-monitoring/" external={true}>
-              check out the Synthetic Monitoring docs.
-            </TextLink>
-          </p>
-        </Card.Heading>
-        <Card.Actions className={styles.cardButtons}>
-          <Button
-            onClick={() => {
-              navigate(checkType ? ROUTES.NewCheck + '/' + checkType : ROUTES.ChooseCheckGroup);
-            }}
-          >
-            Create a check
-          </Button>
-        </Card.Actions>
-      </Card>
-    </div>
-  );
-}
+const wrapperStyles = css`
+  width: 100%;
+`;
 
-export function getEmptyScene(checkType?: CheckType) {
+export function getEmptyScene() {
   return new EmbeddedScene({
     body: new SceneReactObject({
-      component: EmptyScene,
-      props: { checkType },
+      component: ChecksEmptyState,
+      props: { className: wrapperStyles },
     }),
   });
 }

src/scenes/Common/emptyScene.tsx

@@ -24,4 +24,6 @@ export enum DataTestIds {
   PREFORMATTED = 'preformatted',
   CHECK_FORM_SUBMIT_BUTTON = 'check-form-submit-button',
   CONFIRM_UNSAVED_MODAL_HEADING = 'confirm-unsaved-modal-heading',
+  CHECK_USAGE = 'check-usage',
+  CHECKS_EMPTY_STATE = 'checks-empty-state',
 }