Port Kibana Overview from js to ts (#211711)

## Summary
- Moved Synopsis component to ts
- Updated unit tests to use testing-library

src/platform/plugins/private/kibana_overview/public/components/add_data/__snapshots__/add_data.test.tsx.snap

@@ -64,7 +64,6 @@ exports[`AddData render 1`] = `
           description="Ingest data from popular apps and services."
           iconType="indexOpen"
           id="home_tutorial_directory"
-          isBeta={false}
           onClick={[Function]}
           title="Ingest data"
           url="/app/home#/tutorial_directory"
@@ -86,7 +85,6 @@ exports[`AddData render 1`] = `
           description="Add and manage your fleet of Elastic Agents and integrations."
           iconType="indexManagementApp"
           id="ingestManager"
-          isBeta={false}
           onClick={[Function]}
           title="Add Elastic Agent"
           url="/app/ingestManager"
@@ -108,7 +106,6 @@ exports[`AddData render 1`] = `
           description="Import your own CSV, NDJSON, or log file"
           iconType="document"
           id="ml_file_data_visualizer"
-          isBeta={false}
           onClick={[Function]}
           title="Upload a file"
           url="/app/ml#/filedatavisualizer"

src/platform/plugins/private/kibana_overview/public/components/manage_data/__snapshots__/manage_data.test.tsx.snap

@@ -45,7 +45,6 @@ exports[`ManageData render 1`] = `
             description="Control who has access and what tasks they can perform."
             iconType="securityApp"
             id="security"
-            isBeta={false}
             onClick={[Function]}
             title="Protect your data"
             url="path-to-security-roles"
@@ -68,7 +67,6 @@ exports[`ManageData render 1`] = `
             description="Track the real-time health and performance of your deployment."
             iconType="monitoringApp"
             id="monitoring"
-            isBeta={false}
             onClick={[Function]}
             title="Monitor the stack"
             url="path-to-monitoring"
@@ -91,7 +89,6 @@ exports[`ManageData render 1`] = `
             description="Save snapshots to a backup repository, and restore to recover index and cluster state."
             iconType="storage"
             id="snapshot_restore"
-            isBeta={false}
             onClick={[Function]}
             title="Store & recover backups"
             url="path-to-snapshot-restore"
@@ -114,7 +111,6 @@ exports[`ManageData render 1`] = `
             description="Define lifecycle policies to automatically perform operations as an index ages."
             iconType="indexSettings"
             id="index_lifecycle_management"
-            isBeta={false}
             onClick={[Function]}
             title="Manage index lifecycles"
             url="path-to-index-lifecycle-management"

src/platform/plugins/private/kibana_overview/public/components/synopsis/__snapshots__/synopsis.test.js.snap

@@ -1,88 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`props iconType 1`] = `
-<EuiCard
-  betaBadgeProps={
-    Object {
-      "label": null,
-    }
-  }
-  className="homSynopsis__card homSynopsis__card--noPanel"
-  data-test-subj="homeSynopsisLinktutorial"
-  description="this is a great tutorial about..."
-  href="link_to_item"
-  icon={
-    <EuiIcon
-      color="text"
-      size="l"
-      title=""
-      type="logoApache"
-    />
-  }
-  layout="horizontal"
-  title="Great tutorial"
-  titleElement="h3"
-  titleSize="xs"
-/>
-`;
-
-exports[`props iconUrl 1`] = `
-<EuiCard
-  betaBadgeProps={
-    Object {
-      "label": null,
-    }
-  }
-  className="homSynopsis__card homSynopsis__card--noPanel"
-  data-test-subj="homeSynopsisLinktutorial"
-  description="this is a great tutorial about..."
-  href="link_to_item"
-  icon={
-    <img
-      alt=""
-      className="synopsisIcon"
-      src="icon_url"
-    />
-  }
-  layout="horizontal"
-  title="Great tutorial"
-  titleElement="h3"
-  titleSize="xs"
-/>
-`;
-
-exports[`props isBeta 1`] = `
-<EuiCard
-  betaBadgeProps={
-    Object {
-      "label": "Beta",
-    }
-  }
-  className="homSynopsis__card homSynopsis__card--noPanel"
-  data-test-subj="homeSynopsisLinktutorial"
-  description="this is a great tutorial about..."
-  href="link_to_item"
-  layout="horizontal"
-  title="Great tutorial"
-  titleElement="h3"
-  titleSize="xs"
-/>
-`;
-
-exports[`render 1`] = `
-<EuiCard
-  betaBadgeProps={
-    Object {
-      "label": null,
-    }
-  }
-  className="homSynopsis__card homSynopsis__card--noPanel"
-  data-test-subj="homeSynopsisLinktutorial"
-  description="this is a great tutorial about..."
-  href="link_to_item"
-  layout="horizontal"
-  title="Great tutorial"
-  titleElement="h3"
-  titleSize="xs"
-/>
-`;

src/platform/plugins/private/kibana_overview/public/components/synopsis/synopsis.test.tsx

@@ -8,59 +8,67 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
-
+import { render } from '@testing-library/react';
 import { Synopsis } from './synopsis';
 
-test('render', () => {
-  const component = shallow(
-    <Synopsis
-      id={'tutorial'}
-      description="this is a great tutorial about..."
-      title="Great tutorial"
-      url="link_to_item"
-    />
-  );
-  expect(component).toMatchSnapshot();
-});
+describe('Synopsis component', () => {
+  test('renders', () => {
+    const { getByText } = render(
+      <Synopsis
+        id={'tutorial'}
+        description="this is a great tutorial about..."
+        title="Great tutorial"
+        url="link_to_item"
+        wrapInPanel
+      />
+    );
+    expect(getByText('this is a great tutorial about...')).toBeInTheDocument();
+  });
 
-describe('props', () => {
   test('iconType', () => {
-    const component = shallow(
+    const { container } = render(
       <Synopsis
         id={'tutorial'}
         description="this is a great tutorial about..."
         title="Great tutorial"
         url="link_to_item"
         iconType="logoApache"
+        wrapInPanel
       />
     );
-    expect(component).toMatchSnapshot();
+
+    const icon = container.querySelector('[data-euiicon-type="logoApache"]');
+    expect(icon).toBeInTheDocument();
   });
 
   test('iconUrl', () => {
-    const component = shallow(
+    const { getByRole } = render(
       <Synopsis
         id={'tutorial'}
         description="this is a great tutorial about..."
         title="Great tutorial"
         url="link_to_item"
         iconUrl="icon_url"
+        wrapInPanel
       />
     );
-    expect(component).toMatchSnapshot();
+    const anchorElement = getByRole('link', {
+      name: 'Great tutorial',
+    });
+    expect(anchorElement).toHaveAttribute('href', 'link_to_item');
   });
 
   test('isBeta', () => {
-    const component = shallow(
+    const { getByText } = render(
       <Synopsis
         id={'tutorial'}
         description="this is a great tutorial about..."
         title="Great tutorial"
         url="link_to_item"
         isBeta={true}
+        wrapInPanel
       />
     );
-    expect(component).toMatchSnapshot();
+    expect(getByText('Beta')).toBeInTheDocument();
   });
 });

src/platform/plugins/private/kibana_overview/public/components/synopsis/synopsis.tsx

@@ -8,35 +8,46 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { EuiCard, EuiCardProps, EuiIcon, IconType } from '@elastic/eui';
 
-import { EuiCard, EuiIcon } from '@elastic/eui';
-
+export interface SynopsisProps {
+  id: string;
+  title: string;
+  description: string;
+  iconUrl?: string;
+  iconType?: IconType;
+  url?: string;
+  isBeta?: boolean;
+  onClick?: EuiCardProps['onClick'];
+  wrapInPanel: boolean;
+}
 export function Synopsis({
   id,
+  title,
   description,
   iconUrl,
   iconType,
-  title,
   url,
-  wrapInPanel,
-  onClick,
   isBeta,
-}) {
+  onClick,
+  wrapInPanel,
+}: SynopsisProps) {
   let optionalImg;
+
+  const classes = classNames('homSynopsis__card', {
+    'homSynopsis__card--noPanel': !wrapInPanel,
+  });
+  const betaBadgeProps = isBeta ? { label: 'Beta' } : undefined;
   if (iconUrl) {
     optionalImg = <img alt="" className="synopsisIcon" src={iconUrl} />;
   } else if (iconType) {
     optionalImg = <EuiIcon color="text" size="l" title="" type={iconType} />;
   }
 
-  const classes = classNames('homSynopsis__card', {
-    'homSynopsis__card--noPanel': !wrapInPanel,
-  });
-
   return (
     <EuiCard
+      {...(betaBadgeProps && { betaBadgeProps })}
       className={classes}
       layout="horizontal"
       icon={optionalImg}
@@ -46,22 +57,7 @@ export function Synopsis({
       onClick={onClick}
       href={url}
       data-test-subj={`homeSynopsisLink${id.toLowerCase()}`}
-      betaBadgeProps={{ label: isBeta ? 'Beta' : null }}
       titleElement="h3"
     />
   );
 }
-
-Synopsis.propTypes = {
-  description: PropTypes.string.isRequired,
-  iconUrl: PropTypes.string,
-  iconType: PropTypes.string,
-  title: PropTypes.string.isRequired,
-  url: PropTypes.string,
-  onClick: PropTypes.func,
-  isBeta: PropTypes.bool,
-};
-
-Synopsis.defaultProps = {
-  isBeta: false,
-};