[RAC] Adding a dismiss button for the disclaimer experimental message on the alert page (#117283) (#117823)

* Add Eui button with i18n

* Add localStorage flag to ack the experimental message

* Handle the UI feedback

* Update the init state of useState, remove useEffect hook

* Add data-attribute for testing

* Add functional tests

* Fix test value

* get back to original tests order for o11y

* Update tests

* Update localStoreg with JSON.parse to avoid confusion

* Fix check type

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Faisal Kanout <faisal@kanout.com>

x-pack/plugins/observability/public/pages/alerts/alerts_disclaimer.tsx

@@ -5,33 +5,68 @@
  * 2.0.
  */
 
-import React from 'react';
-import { EuiLink, EuiCallOut } from '@elastic/eui';
+import React, { useState } from 'react';
+import { EuiLink, EuiCallOut, EuiButton, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
+const LOCAL_STORAGE_KEY_MSG_ACK = 'xpack.observability.alert.ack.experimental.message';
+
 export function AlertsDisclaimer() {
+  const getCurrentExperimentalMsgAckState = () => {
+    try {
+      const isExperimentalMsgAck = localStorage.getItem(LOCAL_STORAGE_KEY_MSG_ACK);
+      return isExperimentalMsgAck && JSON.parse(isExperimentalMsgAck) === true;
+    } catch {
+      return false;
+    }
+  };
+
+  const [experimentalMsgAck, setExperimentalMsgAck] = useState(getCurrentExperimentalMsgAckState);
+
+  const dismissMessage = () => {
+    setExperimentalMsgAck(true);
+    localStorage.setItem(LOCAL_STORAGE_KEY_MSG_ACK, 'true');
+  };
+
   return (
-    <EuiCallOut
-      title={i18n.translate('xpack.observability.alertsDisclaimerTitle', {
-        defaultMessage: 'Alert history is currently an experimental feature within observability',
-      })}
-      color="warning"
-      iconType="beaker"
-    >
-      <FormattedMessage
-        id="xpack.observability.alertsDisclaimerText"
-        defaultMessage="This functionality may change or be removed completely in a future release. We value your {feedback} as we work to add new capabilities. "
-        values={{
-          feedback: (
-            <EuiLink href="https://discuss.elastic.co/c/observability/82" target="_blank">
-              {i18n.translate('xpack.observability.alertsDisclaimerLinkText', {
-                defaultMessage: 'feedback',
-              })}
-            </EuiLink>
-          ),
-        }}
-      />
-    </EuiCallOut>
+    <>
+      {!experimentalMsgAck && (
+        <EuiCallOut
+          data-test-subj="o11y-experimental-disclaimer"
+          title={i18n.translate('xpack.observability.alertsDisclaimerTitle', {
+            defaultMessage:
+              'Alert history is currently an experimental feature within Observability',
+          })}
+          color="warning"
+        >
+          <FormattedMessage
+            id="xpack.observability.alertsDisclaimerText"
+            defaultMessage="This functionality may change or be removed completely in a future release. We value your {feedback} as we work to add new capabilities. "
+            values={{
+              feedback: (
+                <EuiLink href="https://discuss.elastic.co/c/observability/82" target="_blank">
+                  {i18n.translate('xpack.observability.alertsDisclaimerLinkText', {
+                    defaultMessage: 'feedback',
+                  })}
+                </EuiLink>
+              ),
+            }}
+          />
+
+          <EuiSpacer size="l" />
+          <EuiButton
+            data-test-subj="o11y-experimental-disclaimer-dismiss-btn"
+            color="warning"
+            onClick={dismissMessage}
+            tabIndex={0}
+          >
+            {i18n.translate('xpack.observability.alertsDisclaimerDismissMessage', {
+              defaultMessage: 'Dismiss message',
+            })}
+          </EuiButton>
+        </EuiCallOut>
+      )}
+    </>
   );
 }

x-pack/test/functional/services/observability/alerts/common.ts

@@ -43,6 +43,15 @@ export function ObservabilityAlertsCommonProvider({
     );
   };
 
+  const navigateWithoutFilter = async () => {
+    return await pageObjects.common.navigateToUrlWithBrowserHistory(
+      'observability',
+      '/alerts',
+      `?`,
+      { ensureCurrentUrl: false }
+    );
+  };
+
   const setKibanaTimeZoneToUTC = async () => {
     await kibanaServer.uiSettings.update({
       'dateFormat:tz': 'UTC',
@@ -61,6 +70,10 @@ export function ObservabilityAlertsCommonProvider({
     return await testSubjects.findAll('dataGridRowCell');
   };
 
+  const getExperimentalDisclaimer = async () => {
+    return testSubjects.existOrFail('o11y-experimental-disclaimer');
+  };
+
   const getTableCellsInRows = async () => {
     const columnHeaders = await getTableColumnHeaders();
     if (columnHeaders.length <= 0) {
@@ -243,6 +256,8 @@ export function ObservabilityAlertsCommonProvider({
     typeInQueryBar,
     openActionsMenuForRow,
     getTimeRange,
+    navigateWithoutFilter,
+    getExperimentalDisclaimer,
     getActionsButtonByIndex,
   };
 }

x-pack/test/observability_functional/apps/observability/alerts/alert_disclaimer.ts

@@ -0,0 +1,42 @@
+/*
+ * 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 expect from '@kbn/expect';
+
+import { FtrProviderContext } from '../../../ftr_provider_context';
+
+export default ({ getService, getPageObject }: FtrProviderContext) => {
+  describe('Observability alert experimental disclaimer', function () {
+    this.tags('includeFirefox');
+
+    const observability = getService('observability');
+    const esArchiver = getService('esArchiver');
+    const testSubjects = getService('testSubjects');
+
+    before(async () => {
+      await esArchiver.load('x-pack/test/functional/es_archives/observability/alerts');
+      await esArchiver.load('x-pack/test/functional/es_archives/infra/metrics_and_logs');
+
+      await observability.alerts.common.navigateWithoutFilter();
+    });
+
+    after(async () => {
+      await esArchiver.unload('x-pack/test/functional/es_archives/infra/metrics_and_logs');
+      await esArchiver.unload('x-pack/test/functional/es_archives/observability/alerts');
+    });
+
+    it('Shows experimental disclaimer', async () => {
+      await observability.alerts.common.getExperimentalDisclaimer();
+    });
+
+    it('Dismiss experimental disclaimer', async () => {
+      await testSubjects.click('o11y-experimental-disclaimer-dismiss-btn');
+      const o11yExperimentalDisclaimer = await testSubjects.exists('o11y-experimental-disclaimer');
+      expect(o11yExperimentalDisclaimer).not.to.be(null);
+    });
+  });
+};

x-pack/test/observability_functional/apps/observability/index.ts

@@ -13,6 +13,7 @@ export default function ({ loadTestFile }: FtrProviderContext) {
     loadTestFile(require.resolve('./feature_controls'));
     loadTestFile(require.resolve('./exploratory_view'));
     loadTestFile(require.resolve('./alerts'));
+    loadTestFile(require.resolve('./alerts/alert_disclaimer'));
     loadTestFile(require.resolve('./alerts/workflow_status'));
     loadTestFile(require.resolve('./alerts/pagination'));
     loadTestFile(require.resolve('./alerts/add_to_case'));