From d2f103d698fe215b92115bda801b75508aca18f7 Mon Sep 17 00:00:00 2001
From: Henry Harding <henry.harding@elastic.co>
Date: Tue, 28 Apr 2020 14:42:46 -0400
Subject: [PATCH] add alpha messaging flyout

---
 .../components/alpha_flyout.tsx               | 105 ++++++++++++++++++
 .../components/alpha_messaging.tsx            |  53 +++++----
 2 files changed, 137 insertions(+), 21 deletions(-)
 create mode 100644 x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx

diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx
new file mode 100644
index 0000000000000..062c1a38494aa
--- /dev/null
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx
@@ -0,0 +1,105 @@
+/*
+ * 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, { useState } from 'react';
+import {
+  EuiCallOut,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutHeader,
+  EuiSpacer,
+  EuiTitle,
+  EuiIcon,
+  EuiText,
+  EuiTextColor,
+  EuiLink,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonEmpty,
+  EuiButton,
+  EuiFlyoutFooter,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+interface Props {
+  onClose: () => void;
+}
+
+export const AlphaFlyout: React.FunctionComponent<Props> = ({ onClose }) => {
+  return (
+    <EuiFlyout onClose={onClose} size="m" maxWidth={640}>
+      <EuiFlyoutHeader hasBorder aria-labelledby="AlphaMessagingFlyoutTitle">
+        <EuiTitle size="m">
+          <h2 id="AlphaMessagingFlyoutTitle">
+            <FormattedMessage
+              id="xpack.ingestManager.alphaMessaging.flyoutTitle"
+              defaultMessage="About this release"
+            />
+          </h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody>
+        <EuiText size="m">
+          <p>
+            <FormattedMessage
+              id="xpack.ingestManager.alphaMessaging.intro"
+              defaultMessage="This Alpha release is designed for users to test and offer feedback on the new Ingest
+            Manager and Elastic Agent. It is not intended for use in a production environments and
+            these features are not officially supported. We encourage you to read our {docsLink} or to ask for help and other feedback in our {forumLink}."
+              values={{
+                docsLink: (
+                  <EuiLink href="https://ela.st/ingest-manager-docs" external target="_blank">
+                    <FormattedMessage
+                      id="xpack.ingestManager.alphaMessaging.docsLink"
+                      defaultMessage="documentation"
+                    />
+                  </EuiLink>
+                ),
+                forumLink: (
+                  <EuiLink href="https://ela.st/ingest-manager-forum" external target="_blank">
+                    <FormattedMessage
+                      id="xpack.ingestManager.alphaMessaging.forumLink"
+                      defaultMessage="Discuss forum"
+                    />
+                  </EuiLink>
+                ),
+              }}
+            />
+          </p>
+
+          <p>
+            <FormattedMessage
+              id="xpack.ingestManager.alphaMessaging.warning"
+              defaultMessage=" {note}: you should not store important data with Ingest Manager
+              since you will have limited visibility to it in a future release. This version uses an
+              indexing strategy that will be deprecated in the next release and there is no migration
+              path. Also, the licensing for features is under consideration and may change before our
+              GA release. As a result, you may lose access to certain features based on your license
+              tier."
+              values={{
+                note: (
+                  <strong>
+                    <FormattedMessage
+                      id="xpack.ingestManager.alphaMessaging.warningNote"
+                      defaultMessage="Please note"
+                    />
+                  </strong>
+                ),
+              }}
+            />
+          </p>
+        </EuiText>
+      </EuiFlyoutBody>
+      <EuiFlyoutFooter>
+        <EuiButtonEmpty iconType="cross" onClick={onClose} flush="left">
+          <FormattedMessage
+            id="xpack.ingestManager.agentEnrollment.cancelButtonLabel"
+            defaultMessage="Close"
+          />
+        </EuiButtonEmpty>
+      </EuiFlyoutFooter>
+    </EuiFlyout>
+  );
+};
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_messaging.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_messaging.tsx
index 0f3ddee29fa44..64f9e807fb699 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_messaging.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_messaging.tsx
@@ -3,10 +3,11 @@
  * 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 React, { useState } from 'react';
 import styled from 'styled-components';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiText } from '@elastic/eui';
+import { EuiText, EuiLink } from '@elastic/eui';
+import { AlphaFlyout } from './alpha_flyout';
 
 const Message = styled(EuiText).attrs(props => ({
   color: 'subdued',
@@ -15,23 +16,33 @@ const Message = styled(EuiText).attrs(props => ({
   padding: ${props => props.theme.eui.paddingSizes.m};
 `;
 
-export const AlphaMessaging: React.FC<{}> = () => (
-  <Message>
-    <p>
-      <small>
-        <strong>
-          <FormattedMessage
-            id="xpack.ingestManager.alphaMessageTitle"
-            defaultMessage="Alpha release"
-          />
-        </strong>
-        {' – '}
-        <FormattedMessage
-          id="xpack.ingestManager.alphaMessageDescription"
-          defaultMessage="Ingest Manager is under active development and is not
+export const AlphaMessaging: React.FC<{}> = () => {
+  const [isAlphaFlyoutOpen, setIsAlphaFlyoutOpen] = useState<boolean>(false);
+
+  return (
+    <>
+      <Message>
+        <p>
+          <small>
+            <strong>
+              <FormattedMessage
+                id="xpack.ingestManager.alphaMessageTitle"
+                defaultMessage="Alpha release"
+              />
+            </strong>
+            {' – '}
+            <FormattedMessage
+              id="xpack.ingestManager.alphaMessageDescription"
+              defaultMessage="Ingest Manager is under active development and is not
           intended for production purposes."
-        />
-      </small>
-    </p>
-  </Message>
-);
+            />{' '}
+            <EuiLink color="subdued" onClick={() => setIsAlphaFlyoutOpen(true)}>
+              View more details.
+            </EuiLink>
+          </small>
+        </p>
+      </Message>
+      {isAlphaFlyoutOpen && <AlphaFlyout onClose={() => setIsAlphaFlyoutOpen(false)} />}
+    </>
+  );
+};