[Behavorial Analytics] Analytics view integrate steps (#147388)

## Summary This adds the better onboarding documentation as designed [here](https://whimsical.com/integration-instructions-2vVfq7qwQovGuEsdZtxNye) https://user-images.githubusercontent.com/49480/207130384-41c48dfc-7b50-481c-bf93-90ac91ac03e8.mov
elastic · Dec 13, 2022 · 6146d57 · 6146d57
1 parent 28841a1
commit 6146d57
Show file tree

Hide file tree

Showing 12 changed files with 585 additions and 168 deletions.
diff --git a/...ns/analytics/components/analytics_collection_view/analytics_collection_integrate.test.tsx b/...ns/analytics/components/analytics_collection_view/analytics_collection_integrate.test.tsx
diff --git a/...cations/analytics/components/analytics_collection_view/analytics_collection_integrate.tsx b/...cations/analytics/components/analytics_collection_view/analytics_collection_integrate.tsx
diff --git a/...cs_collection_view/analytics_collection_integrate/analytics_collection_integrate.test.tsx b/...cs_collection_view/analytics_collection_integrate/analytics_collection_integrate.test.tsx
@@ -0,0 +1,51 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import '../../../../__mocks__/shallow_useeffect.mock';
+
+import React from 'react';
+
+import { EuiCodeBlock } from '@elastic/eui';
+import { mountWithIntl } from '@kbn/test-jest-helpers';
+
+import { AnalyticsCollection } from '../../../../../../common/types/analytics';
+
+import { AnalyticsCollectionIntegrate } from './analytics_collection_integrate';
+
+describe('AnalyticsCollectionIntegrate', () => {
+  const analyticsCollections: AnalyticsCollection = {
+    event_retention_day_length: 180,
+    events_datastream: 'analytics-events-example',
+    id: '1',
+    name: 'example',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders', () => {
+    const wrapper = mountWithIntl(
+      <AnalyticsCollectionIntegrate collection={analyticsCollections} />
+    );
+    expect(wrapper.find(EuiCodeBlock)).toHaveLength(3);
+    wrapper.find('[data-test-subj="searchuiEmbed"]').at(0).simulate('click');
+    expect(wrapper.find(EuiCodeBlock)).toHaveLength(3);
+    wrapper.find('[data-test-subj="javascriptClientEmbed"]').at(0).simulate('click');
+    expect(wrapper.find(EuiCodeBlock)).toHaveLength(5);
+  });
+
+  it('check value of analyticsDNSUrl & webClientSrc', () => {
+    const wrapper = mountWithIntl(
+      <AnalyticsCollectionIntegrate collection={analyticsCollections} />
+    );
+    expect(wrapper.find(EuiCodeBlock).at(0).text()).toContain(
+      'data-dsn="/analytics/api/collections/1"'
+    );
+    expect(wrapper.find(EuiCodeBlock).at(0).text()).toContain('src="/analytics.js"');
+  });
+});
diff --git a/...alytics_collection_view/analytics_collection_integrate/analytics_collection_integrate.tsx b/...alytics_collection_view/analytics_collection_integrate/analytics_collection_integrate.tsx
@@ -0,0 +1,107 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { EuiPanel, EuiSpacer, EuiSteps, EuiTab, EuiTabs, EuiTitle } from '@elastic/eui';
+
+import { EuiContainedStepProps } from '@elastic/eui/src/components/steps/steps';
+import { i18n } from '@kbn/i18n';
+
+import { AnalyticsCollection } from '../../../../../../common/types/analytics';
+import { getEnterpriseSearchUrl } from '../../../../shared/enterprise_search_url';
+
+import { javascriptClientEmbedSteps } from './analytics_collection_integrate_javascript_client_embed';
+import { javascriptEmbedSteps } from './analytics_collection_integrate_javascript_embed';
+import { searchUIEmbedSteps } from './analytics_collection_integrate_searchui';
+
+interface AnalyticsCollectionIntegrateProps {
+  collection: AnalyticsCollection;
+}
+
+export type TabKey = 'javascriptEmbed' | 'searchuiEmbed' | 'javascriptClientEmbed';
+
+export const AnalyticsCollectionIntegrate: React.FC<AnalyticsCollectionIntegrateProps> = ({
+  collection,
+}) => {
+  const analyticsDNSUrl = getEnterpriseSearchUrl(`/analytics/api/collections/${collection.id}`);
+  const webClientSrc = getEnterpriseSearchUrl('/analytics.js');
+
+  const [selectedTab, setSelectedTab] = React.useState<TabKey>('javascriptEmbed');
+
+  const tabs: Array<{
+    key: TabKey;
+    title: string;
+  }> = [
+    {
+      key: 'javascriptEmbed',
+      title: i18n.translate(
+        'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.javascriptEmbed.title',
+        {
+          defaultMessage: 'Javascript Embed',
+        }
+      ),
+    },
+    {
+      key: 'javascriptClientEmbed',
+      title: i18n.translate(
+        'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.javascriptClientEmbed.title',
+        {
+          defaultMessage: 'Javascript Client',
+        }
+      ),
+    },
+    {
+      key: 'searchuiEmbed',
+      title: i18n.translate(
+        'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.searchuiEmbed.title',
+        {
+          defaultMessage: 'Search UI',
+        }
+      ),
+    },
+  ];
+
+  const steps: Record<TabKey, EuiContainedStepProps[]> = {
+    javascriptClientEmbed: javascriptClientEmbedSteps(analyticsDNSUrl),
+    javascriptEmbed: javascriptEmbedSteps(webClientSrc, analyticsDNSUrl),
+    searchuiEmbed: searchUIEmbedSteps(setSelectedTab),
+  };
+
+  return (
+    <EuiPanel hasBorder paddingSize="l">
+      <EuiTitle size="s">
+        <h2>
+          {i18n.translate(
+            'xpack.enterpriseSearch.analytics.collections.collectionsView.integrateTab.title',
+            {
+              defaultMessage: 'Start tracking events',
+            }
+          )}
+        </h2>
+      </EuiTitle>
+      <EuiSpacer size="m" />
+      <EuiTabs>
+        {tabs.map((tab) => (
+          <EuiTab
+            key={tab.key}
+            onClick={() => {
+              setSelectedTab(tab.key);
+            }}
+            isSelected={selectedTab === tab.key}
+            data-test-subj={tab.key}
+            data-telemetry-id={`entSearch-analytics-integrate-${tab.key}-tab`}
+          >
+            {tab.title}
+          </EuiTab>
+        ))}
+      </EuiTabs>
+      <EuiSpacer size="xxl" />
+      <EuiSteps steps={steps[selectedTab]} />
+    </EuiPanel>
+  );
+};