[App Search] Credentials: add FlashMessages, stub out credentials fly…

…out (#81391)

* Added an empty Flyout

* Refactor CredentialsFlyout to its own component folder
+ split out child sub components for easier testing/reading

* Add initial FlashMessages setup

- mostly just DELETE_MESSAGE currently, since that's what's already wired up
- CREATE_MESSAGE and UPDATE_MESSAGE will be used in an upcoming commit

+ adds FlashMessages in flyout, which will show returned form errors from the API

* Fix flash messages appearing on flyout open
e.g. deletion success messages

+ incidental linting/cleanup

Co-authored-by: Jason Stoltzfus <jastoltz24@gmail.com>

x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/constants.ts

@@ -11,6 +11,16 @@ export enum ApiTokenTypes {
   Search = 'search',
 }
 
+export const CREATE_MESSAGE = i18n.translate('xpack.enterpriseSearch.appSearch.tokens.created', {
+  defaultMessage: 'Successfully created key.',
+});
+export const UPDATE_MESSAGE = i18n.translate('xpack.enterpriseSearch.appSearch.tokens.update', {
+  defaultMessage: 'Successfully updated API Key.',
+});
+export const DELETE_MESSAGE = i18n.translate('xpack.enterpriseSearch.appSearch.tokens.deleted', {
+  defaultMessage: 'Successfully deleted key.',
+});
+
 export const SEARCH_DISPLAY = i18n.translate(
   'xpack.enterpriseSearch.appSearch.tokens.permissions.display.search',
   {
@@ -81,3 +91,5 @@ export const TOKEN_TYPE_INFO = [
   { value: ApiTokenTypes.Private, text: TOKEN_TYPE_DISPLAY_NAMES[ApiTokenTypes.Private] },
   { value: ApiTokenTypes.Admin, text: TOKEN_TYPE_DISPLAY_NAMES[ApiTokenTypes.Admin] },
 ];
+
+export const FLYOUT_ARIA_LABEL_ID = 'credentialsFlyoutTitle';

x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials.test.tsx

@@ -14,6 +14,7 @@ import { Credentials } from './credentials';
 import { EuiCopy, EuiLoadingContent, EuiPageContentBody } from '@elastic/eui';
 
 import { externalUrl } from '../../../shared/enterprise_search_url';
+import { CredentialsFlyout } from './credentials_flyout';
 
 describe('Credentials', () => {
   // Kea mocks
@@ -71,4 +72,16 @@ describe('Credentials', () => {
     button.props().onClick();
     expect(actions.showCredentialsForm).toHaveBeenCalledTimes(1);
   });
+
+  it('will render CredentialsFlyout if shouldShowCredentialsForm is true', () => {
+    setMockValues({ shouldShowCredentialsForm: true });
+    const wrapper = shallow(<Credentials />);
+    expect(wrapper.find(CredentialsFlyout)).toHaveLength(1);
+  });
+
+  it('will NOT render CredentialsFlyout if shouldShowCredentialsForm is false', () => {
+    setMockValues({ shouldShowCredentialsForm: false });
+    const wrapper = shallow(<Credentials />);
+    expect(wrapper.find(CredentialsFlyout)).toHaveLength(0);
+  });
 });

x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials.tsx

@@ -24,16 +24,19 @@ import {
 import { i18n } from '@kbn/i18n';
 
 import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
+import { FlashMessages } from '../../../shared/flash_messages';
+
 import { CredentialsLogic } from './credentials_logic';
 import { externalUrl } from '../../../shared/enterprise_search_url/external_url';
 import { CredentialsList } from './credentials_list';
+import { CredentialsFlyout } from './credentials_flyout';
 
 export const Credentials: React.FC = () => {
   const { initializeCredentialsData, resetCredentials, showCredentialsForm } = useActions(
     CredentialsLogic
   );
 
-  const { dataLoading } = useValues(CredentialsLogic);
+  const { dataLoading, shouldShowCredentialsForm } = useValues(CredentialsLogic);
 
   useEffect(() => {
     initializeCredentialsData();
@@ -63,6 +66,7 @@ export const Credentials: React.FC = () => {
         </EuiPageHeaderSection>
       </EuiPageHeader>
       <EuiPageContentBody>
+        {shouldShowCredentialsForm && <CredentialsFlyout />}
         <EuiPanel className="eui-textCenter">
           <EuiTitle size="s">
             <h2>
@@ -120,7 +124,8 @@ export const Credentials: React.FC = () => {
             )}
           </EuiPageContentHeaderSection>
         </EuiPageContentHeader>
-        <EuiSpacer size="s" />
+        <EuiSpacer size="m" />
+        <FlashMessages />
         <EuiPanel>{!!dataLoading ? <EuiLoadingContent lines={3} /> : <CredentialsList />}</EuiPanel>
       </EuiPageContentBody>
     </>

x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_flyout/body.test.tsx

@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { EuiFlyoutBody } from '@elastic/eui';
+
+import { CredentialsFlyoutBody } from './body';
+
+describe('CredentialsFlyoutBody', () => {
+  it('renders', () => {
+    const wrapper = shallow(<CredentialsFlyoutBody />);
+    expect(wrapper.find(EuiFlyoutBody)).toHaveLength(1);
+  });
+});

x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_flyout/body.tsx

@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiFlyoutBody } from '@elastic/eui';
+
+import { FlashMessages } from '../../../../shared/flash_messages';
+
+export const CredentialsFlyoutBody: React.FC = () => {
+  return (
+    <EuiFlyoutBody>
+      <FlashMessages />
+      Details go here
+    </EuiFlyoutBody>
+  );
+};

x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_flyout/footer.test.tsx

@@ -0,0 +1,64 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { setMockValues, setMockActions } from '../../../../__mocks__/kea.mock';
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { EuiFlyoutFooter, EuiButtonEmpty } from '@elastic/eui';
+
+import { CredentialsFlyoutFooter } from './footer';
+
+describe('CredentialsFlyoutFooter', () => {
+  const values = {
+    activeApiTokenExists: false,
+  };
+  const actions = {
+    hideCredentialsForm: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    setMockValues(values);
+    setMockActions(actions);
+  });
+
+  it('renders', () => {
+    const wrapper = shallow(<CredentialsFlyoutFooter />);
+    expect(wrapper.find(EuiFlyoutFooter)).toHaveLength(1);
+  });
+
+  it('closes the flyout', () => {
+    const wrapper = shallow(<CredentialsFlyoutFooter />);
+    const button = wrapper.find(EuiButtonEmpty);
+    button.simulate('click');
+    expect(button.prop('children')).toEqual('Close');
+    expect(actions.hideCredentialsForm).toHaveBeenCalled();
+  });
+
+  it('renders action button text for new tokens', () => {
+    const wrapper = shallow(<CredentialsFlyoutFooter />);
+    const button = wrapper.find('[data-test-subj="APIKeyActionButton"]');
+
+    expect(button.prop('children')).toEqual('Save');
+  });
+
+  it('renders action button text for existing tokens', () => {
+    setMockValues({ activeApiTokenExists: true });
+    const wrapper = shallow(<CredentialsFlyoutFooter />);
+    const button = wrapper.find('[data-test-subj="APIKeyActionButton"]');
+
+    expect(button.prop('children')).toEqual('Update');
+  });
+
+  it('calls onApiTokenChange on action button press', () => {
+    const wrapper = shallow(<CredentialsFlyoutFooter />);
+    const button = wrapper.find('[data-test-subj="APIKeyActionButton"]');
+    button.simulate('click');
+
+    // TODO: Expect onApiTokenChange to have been called
+  });
+});

x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_flyout/footer.tsx

@@ -0,0 +1,54 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { useValues, useActions } from 'kea';
+import {
+  EuiFlyoutFooter,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonEmpty,
+  EuiButton,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import { CredentialsLogic } from '../credentials_logic';
+
+export const CredentialsFlyoutFooter: React.FC = () => {
+  const { hideCredentialsForm } = useActions(CredentialsLogic);
+  const { activeApiTokenExists } = useValues(CredentialsLogic);
+
+  return (
+    <EuiFlyoutFooter>
+      <EuiFlexGroup justifyContent="spaceBetween">
+        <EuiFlexItem grow={false}>
+          <EuiButtonEmpty iconType="cross" onClick={hideCredentialsForm}>
+            {i18n.translate('xpack.enterpriseSearch.appSearch.credentials.flyout.closeText', {
+              defaultMessage: 'Close',
+            })}
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            onClick={() => window.alert('submit')}
+            fill={true}
+            color="secondary"
+            iconType="check"
+            data-test-subj="APIKeyActionButton"
+          >
+            {activeApiTokenExists
+              ? i18n.translate('xpack.enterpriseSearch.appSearch.credentials.flyout.updateText', {
+                  defaultMessage: 'Update',
+                })
+              : i18n.translate('xpack.enterpriseSearch.appSearch.credentials.flyout.saveText', {
+                  defaultMessage: 'Save',
+                })}
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFlyoutFooter>
+  );
+};

x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_flyout/header.test.tsx

@@ -0,0 +1,55 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { setMockValues } from '../../../../__mocks__/kea.mock';
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { EuiFlyoutHeader } from '@elastic/eui';
+
+import { ApiTokenTypes } from '../constants';
+import { IApiToken } from '../types';
+
+import { CredentialsFlyoutHeader } from './header';
+
+describe('CredentialsFlyoutHeader', () => {
+  const apiToken: IApiToken = {
+    name: '',
+    type: ApiTokenTypes.Private,
+    read: true,
+    write: true,
+    access_all_engines: true,
+  };
+  const values = {
+    activeApiToken: apiToken,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    setMockValues(values);
+  });
+
+  it('renders', () => {
+    const wrapper = shallow(<CredentialsFlyoutHeader />);
+
+    expect(wrapper.find(EuiFlyoutHeader)).toHaveLength(1);
+    expect(wrapper.find('h2').prop('id')).toEqual('credentialsFlyoutTitle');
+    expect(wrapper.find('h2').prop('children')).toEqual('Create a new key');
+  });
+
+  it('changes the title text if editing an existing token', () => {
+    setMockValues({
+      activeApiToken: {
+        ...apiToken,
+        id: 'some-id',
+        name: 'search-key',
+      },
+    });
+    const wrapper = shallow(<CredentialsFlyoutHeader />);
+
+    expect(wrapper.find('h2').prop('children')).toEqual('Update search-key');
+  });
+});

x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_flyout/header.tsx

@@ -0,0 +1,34 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { useValues } from 'kea';
+import { EuiFlyoutHeader, EuiTitle } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import { CredentialsLogic } from '../credentials_logic';
+import { FLYOUT_ARIA_LABEL_ID } from '../constants';
+
+export const CredentialsFlyoutHeader: React.FC = () => {
+  const { activeApiToken } = useValues(CredentialsLogic);
+
+  return (
+    <EuiFlyoutHeader hasBorder={true}>
+      <EuiTitle size="m">
+        <h2 id={FLYOUT_ARIA_LABEL_ID}>
+          {activeApiToken.id
+            ? i18n.translate('xpack.enterpriseSearch.appSearch.credentials.flyout.updateTitle', {
+                defaultMessage: 'Update {tokenName}',
+                values: { tokenName: activeApiToken.name },
+              })
+            : i18n.translate('xpack.enterpriseSearch.appSearch.credentials.flyout.createTitle', {
+                defaultMessage: 'Create a new key',
+              })}
+        </h2>
+      </EuiTitle>
+    </EuiFlyoutHeader>
+  );
+};

x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_flyout/index.test.tsx

@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { setMockActions } from '../../../../__mocks__/kea.mock';
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { EuiFlyout } from '@elastic/eui';
+
+import { CredentialsFlyout } from './';
+
+describe('CredentialsFlyout', () => {
+  const actions = {
+    hideCredentialsForm: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    setMockActions(actions);
+  });
+
+  it('renders', () => {
+    const wrapper = shallow(<CredentialsFlyout />);
+    const flyout = wrapper.find(EuiFlyout);
+
+    expect(flyout).toHaveLength(1);
+    expect(flyout.prop('aria-labelledby')).toEqual('credentialsFlyoutTitle');
+    expect(flyout.prop('onClose')).toEqual(actions.hideCredentialsForm);
+  });
+});