Merge branch 'convertTestsReportingViz' of github.com:bhavyarm/kibana…

… into convertTestsReportingViz
elastic · Jun 21, 2021 · 4f1130c · 4f1130c
2 parents 20ddeb3 + 3cc35f4
commit 4f1130c
Show file tree

Hide file tree

Showing 62 changed files with 1,146 additions and 456 deletions.
diff --git a/...plugins/enterprise_search/public/applications/__mocks__/kea_logic/licensing_logic.mock.ts b/...plugins/enterprise_search/public/applications/__mocks__/kea_logic/licensing_logic.mock.ts
@@ -11,8 +11,11 @@ export const mockLicensingValues = {
   license: licensingMock.createLicense(),
   hasPlatinumLicense: false,
   hasGoldLicense: false,
+  isTrial: false,
+  canManageLicense: true,
 };
 
 jest.mock('../../shared/licensing', () => ({
+  ...(jest.requireActual('../../shared/licensing') as object),
   LicensingLogic: { values: mockLicensingValues },
 }));
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/app_logic.test.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/app_logic.test.ts
@@ -6,7 +6,11 @@
  */
 
 import { DEFAULT_INITIAL_APP_DATA } from '../../../common/__mocks__';
-import { LogicMounter } from '../__mocks__/kea_logic';
+import { LogicMounter } from '../__mocks__/kea_logic/logic_mounter.test_helper';
+
+jest.mock('../shared/licensing', () => ({
+  LicensingLogic: { selectors: { hasPlatinumLicense: () => false } },
+}));
 
 import { AppLogic } from './app_logic';
 

diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/app_logic.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/app_logic.ts
@@ -9,6 +9,8 @@ import { kea, MakeLogicType } from 'kea';
 
 import { InitialAppData } from '../../../common/types';
 
+import { LicensingLogic } from '../shared/licensing';
+
 import { ConfiguredLimits, Account, Role } from './types';
 
 import { getRoleAbilities } from './utils/role';
@@ -43,8 +45,8 @@ export const AppLogic = kea<MakeLogicType<AppValues, AppActions, Required<Initia
   }),
   selectors: {
     myRole: [
-      (selectors) => [selectors.account],
-      ({ role }) => (role ? getRoleAbilities(role) : {}),
+      (selectors) => [selectors.account, LicensingLogic.selectors.hasPlatinumLicense],
+      ({ role }, hasPlatinumLicense) => (role ? getRoleAbilities(role, hasPlatinumLicense) : {}),
     ],
   },
 });
diff --git a/...erprise_search/public/applications/app_search/components/credentials/credentials.test.tsx b/...erprise_search/public/applications/app_search/components/credentials/credentials.test.tsx
@@ -12,14 +12,15 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { EuiCopy, EuiLoadingContent, EuiPageContentBody } from '@elastic/eui';
+import { EuiCopy, EuiLoadingContent } from '@elastic/eui';
 
 import { DEFAULT_META } from '../../../shared/constants';
 import { externalUrl } from '../../../shared/enterprise_search_url';
 
 import { Credentials } from './credentials';
 
 import { CredentialsFlyout } from './credentials_flyout';
+import { CredentialsList } from './credentials_list';
 
 describe('Credentials', () => {
   // Kea mocks
@@ -42,7 +43,7 @@ describe('Credentials', () => {
 
   it('renders', () => {
     const wrapper = shallow(<Credentials />);
-    expect(wrapper.find(EuiPageContentBody)).toHaveLength(1);
+    expect(wrapper.find(CredentialsList)).toHaveLength(1);
   });
 
   it('fetches data on mount', () => {

diff --git a/...s/enterprise_search/public/applications/app_search/components/credentials/credentials.tsx b/...s/enterprise_search/public/applications/app_search/components/credentials/credentials.tsx
@@ -10,9 +10,7 @@ import React, { useEffect } from 'react';
 import { useActions, useValues } from 'kea';
 
 import {
-  EuiPageHeader,
   EuiTitle,
-  EuiPageContentBody,
   EuiPanel,
   EuiCopy,
   EuiButtonIcon,
@@ -25,8 +23,7 @@ import {
 import { i18n } from '@kbn/i18n';
 
 import { externalUrl } from '../../../shared/enterprise_search_url/external_url';
-import { FlashMessages } from '../../../shared/flash_messages';
-import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
+import { AppSearchPageTemplate } from '../layout';
 
 import { CREDENTIALS_TITLE } from './constants';
 import { CredentialsFlyout } from './credentials_flyout';
@@ -52,74 +49,72 @@ export const Credentials: React.FC = () => {
   }, []);
 
   return (
-    <>
-      <SetPageChrome trail={[CREDENTIALS_TITLE]} />
-      <EuiPageHeader pageTitle={CREDENTIALS_TITLE} />
-      <EuiPageContentBody>
-        {shouldShowCredentialsForm && <CredentialsFlyout />}
-        <EuiPanel hasBorder className="eui-textCenter">
-          <EuiTitle size="s">
+    <AppSearchPageTemplate
+      pageChrome={[CREDENTIALS_TITLE]}
+      pageHeader={{ pageTitle: CREDENTIALS_TITLE }}
+    >
+      {shouldShowCredentialsForm && <CredentialsFlyout />}
+      <EuiPanel color="subdued" className="eui-textCenter">
+        <EuiTitle size="s">
+          <h2>
+            {i18n.translate('xpack.enterpriseSearch.appSearch.credentials.apiEndpoint', {
+              defaultMessage: 'Endpoint',
+            })}
+          </h2>
+        </EuiTitle>
+        <EuiCopy
+          textToCopy={externalUrl.enterpriseSearchUrl}
+          afterMessage={i18n.translate('xpack.enterpriseSearch.appSearch.credentials.copied', {
+            defaultMessage: 'Copied',
+          })}
+        >
+          {(copy) => (
+            <>
+              <EuiButtonIcon
+                onClick={copy}
+                iconType="copyClipboard"
+                aria-label={i18n.translate(
+                  'xpack.enterpriseSearch.appSearch.credentials.copyApiEndpoint',
+                  {
+                    defaultMessage: 'Copy API Endpoint to clipboard.',
+                  }
+                )}
+              />
+              {externalUrl.enterpriseSearchUrl}
+            </>
+          )}
+        </EuiCopy>
+      </EuiPanel>
+      <EuiSpacer size="xxl" />
+      <EuiPageContentHeader responsive={false}>
+        <EuiPageContentHeaderSection>
+          <EuiTitle size="m">
             <h2>
-              {i18n.translate('xpack.enterpriseSearch.appSearch.credentials.apiEndpoint', {
-                defaultMessage: 'Endpoint',
+              {i18n.translate('xpack.enterpriseSearch.appSearch.credentials.apiKeys', {
+                defaultMessage: 'API Keys',
               })}
             </h2>
           </EuiTitle>
-          <EuiCopy
-            textToCopy={externalUrl.enterpriseSearchUrl}
-            afterMessage={i18n.translate('xpack.enterpriseSearch.appSearch.credentials.copied', {
-              defaultMessage: 'Copied',
-            })}
-          >
-            {(copy) => (
-              <>
-                <EuiButtonIcon
-                  onClick={copy}
-                  iconType="copyClipboard"
-                  aria-label={i18n.translate(
-                    'xpack.enterpriseSearch.appSearch.credentials.copyApiEndpoint',
-                    {
-                      defaultMessage: 'Copy API Endpoint to clipboard.',
-                    }
-                  )}
-                />
-                {externalUrl.enterpriseSearchUrl}
-              </>
-            )}
-          </EuiCopy>
-        </EuiPanel>
-        <EuiSpacer size="xxl" />
-        <EuiPageContentHeader responsive={false}>
-          <EuiPageContentHeaderSection>
-            <EuiTitle size="m">
-              <h2>
-                {i18n.translate('xpack.enterpriseSearch.appSearch.credentials.apiKeys', {
-                  defaultMessage: 'API Keys',
-                })}
-              </h2>
-            </EuiTitle>
-          </EuiPageContentHeaderSection>
-          <EuiPageContentHeaderSection>
-            {!dataLoading && (
-              <EuiButton
-                color="primary"
-                data-test-subj="CreateAPIKeyButton"
-                fill
-                onClick={() => showCredentialsForm()}
-              >
-                {i18n.translate('xpack.enterpriseSearch.appSearch.credentials.createKey', {
-                  defaultMessage: 'Create a key',
-                })}
-              </EuiButton>
-            )}
-          </EuiPageContentHeaderSection>
-        </EuiPageContentHeader>
-        <EuiSpacer size="m" />
-        <FlashMessages />
-        <EuiPanel hasBorder>
-          {!!dataLoading ? <EuiLoadingContent lines={3} /> : <CredentialsList />}
-        </EuiPanel>
-      </EuiPageContentBody>
-    </>
+        </EuiPageContentHeaderSection>
+        <EuiPageContentHeaderSection>
+          {!dataLoading && (
+            <EuiButton
+              color="primary"
+              data-test-subj="CreateAPIKeyButton"
+              fill
+              onClick={() => showCredentialsForm()}
+            >
+              {i18n.translate('xpack.enterpriseSearch.appSearch.credentials.createKey', {
+                defaultMessage: 'Create a key',
+              })}
+            </EuiButton>
+          )}
+        </EuiPageContentHeaderSection>
+      </EuiPageContentHeader>
+      <EuiSpacer size="m" />
+      <EuiPanel hasBorder>
+        {!!dataLoading ? <EuiLoadingContent lines={3} /> : <CredentialsList />}
+      </EuiPanel>
+    </AppSearchPageTemplate>
   );
 };
diff --git a/...nterprise_search/public/applications/app_search/components/data_panel/data_panel.test.tsx b/...nterprise_search/public/applications/app_search/components/data_panel/data_panel.test.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { EuiIcon, EuiButton } from '@elastic/eui';
+import { EuiIcon, EuiButton, EuiTitle, EuiFlexGroup, EuiSpacer } from '@elastic/eui';
 
 import { LoadingOverlay } from '../../../shared/loading';
 
@@ -27,6 +27,16 @@ describe('DataPanel', () => {
     expect(wrapper.find('[data-test-subj="children"]').text()).toEqual('Look at this graph');
   });
 
+  it('conditionally renders a spacer between the header and children', () => {
+    const wrapper = shallow(<DataPanel title={<h1>Test</h1>} />);
+
+    expect(wrapper.find(EuiSpacer)).toHaveLength(0);
+
+    wrapper.setProps({ children: 'hello world' });
+
+    expect(wrapper.find(EuiSpacer)).toHaveLength(1);
+  });
+
   describe('components', () => {
     it('renders with an icon', () => {
       const wrapper = shallow(<DataPanel title={<h1>The Smoke Monster</h1>} iconType="eye" />);
@@ -70,6 +80,26 @@ describe('DataPanel', () => {
   });
 
   describe('props', () => {
+    it('passes titleSize to the title', () => {
+      const wrapper = shallow(<DataPanel title={<h2>Test</h2>} />);
+
+      expect(wrapper.find(EuiTitle).prop('size')).toEqual('xs'); // Default
+
+      wrapper.setProps({ titleSize: 's' });
+
+      expect(wrapper.find(EuiTitle).prop('size')).toEqual('s');
+    });
+
+    it('passes responsive to the header flex group', () => {
+      const wrapper = shallow(<DataPanel title={<h1>Test</h1>} />);
+
+      expect(wrapper.find(EuiFlexGroup).first().prop('responsive')).toEqual(false);
+
+      wrapper.setProps({ responsive: true });
+
+      expect(wrapper.find(EuiFlexGroup).first().prop('responsive')).toEqual(true);
+    });
+
     it('renders panel color based on filled flag', () => {
       const wrapper = shallow(<DataPanel title={<h1>Test</h1>} />);
 

diff --git a/...ins/enterprise_search/public/applications/app_search/components/data_panel/data_panel.tsx b/...ins/enterprise_search/public/applications/app_search/components/data_panel/data_panel.tsx
@@ -13,10 +13,12 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiIcon,
+  EuiIconProps,
   EuiPanel,
   EuiSpacer,
   EuiText,
   EuiTitle,
+  EuiTitleProps,
 } from '@elastic/eui';
 
 import { LoadingOverlay } from '../../../shared/loading';
@@ -25,9 +27,11 @@ import './data_panel.scss';
 
 interface Props {
   title: React.ReactElement; // e.g., h2 tag
-  subtitle?: string;
-  iconType?: string;
+  titleSize?: EuiTitleProps['size'];
+  subtitle?: React.ReactNode;
+  iconType?: EuiIconProps['type'];
   action?: React.ReactNode;
+  responsive?: boolean;
   filled?: boolean;
   hasBorder?: boolean;
   isLoading?: boolean;
@@ -36,9 +40,11 @@ interface Props {
 
 export const DataPanel: React.FC<Props> = ({
   title,
+  titleSize = 'xs',
   subtitle,
   iconType,
   action,
+  responsive = false,
   filled,
   hasBorder,
   isLoading,
@@ -59,7 +65,7 @@ export const DataPanel: React.FC<Props> = ({
       hasShadow={false}
       aria-busy={isLoading}
     >
-      <EuiFlexGroup justifyContent="spaceBetween" alignItems="center" responsive={false}>
+      <EuiFlexGroup justifyContent="spaceBetween" alignItems="center" responsive={responsive}>
         <EuiFlexItem>
           <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
             {iconType && (
@@ -68,7 +74,7 @@ export const DataPanel: React.FC<Props> = ({
               </EuiFlexItem>
             )}
             <EuiFlexItem>
-              <EuiTitle size="xs">{title}</EuiTitle>
+              <EuiTitle size={titleSize}>{title}</EuiTitle>
             </EuiFlexItem>
           </EuiFlexGroup>
           {subtitle && (
@@ -79,8 +85,12 @@ export const DataPanel: React.FC<Props> = ({
         </EuiFlexItem>
         {action && <EuiFlexItem grow={false}>{action}</EuiFlexItem>}
       </EuiFlexGroup>
-      <EuiSpacer />
-      {children}
+      {children && (
+        <>
+          <EuiSpacer />
+          {children}
+        </>
+      )}
       {isLoading && <LoadingOverlay />}
     </EuiPanel>
   );