Show feedback modal on restore

x-pack/plugins/observability_solution/apm/public/components/shared/entity_enablement/feedback_modal.tsx

@@ -0,0 +1,69 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import { EuiButton, EuiConfirmModal } from '@elastic/eui';
+
+export function FeedbackModal({
+  isFeedbackModalVisiable,
+  setsIsFeedbackModalVisiable,
+  refetch,
+}: {
+  isFeedbackModalVisiable: boolean;
+  setsIsFeedbackModalVisiable: (value: boolean) => void;
+  refetch: () => void;
+}) {
+  const closeModal = () => {
+    setsIsFeedbackModalVisiable(false);
+    refetch();
+  };
+
+  return (
+    <>
+      {isFeedbackModalVisiable && (
+        <EuiConfirmModal
+          title={i18n.translate('xpack.apm.eemFeedback.title', {
+            defaultMessage: 'Thank you',
+          })}
+          onCancel={closeModal}
+          onConfirm={closeModal}
+          cancelButtonText={i18n.translate('xpack.apm.eemFeedback.button.cancel', {
+            defaultMessage: 'Maybe later',
+          })}
+          confirmButtonText={
+            <EuiButton
+              data-test-subj="xpack.apm.eemFeedback.button.open"
+              fill
+              iconType="discuss"
+              size="s"
+              href="https://ela.st/services-feedback" // FIXME update with the new one
+            >
+              {i18n.translate('xpack.apm.eemFeedback.button.openSurvey', {
+                defaultMessage: 'Open survey',
+              })}
+            </EuiButton>
+          }
+          defaultFocusedButton="confirm"
+        >
+          <p>
+            {i18n.translate('xpack.apm.feedbackModal.body.thanks', {
+              defaultMessage:
+                'Thank you for trying the new services experience. Check back often as we continue to update this page. ',
+            })}
+          </p>
+          <p>
+            {i18n.translate('xpack.apm.feedbackModal.body.feedback', {
+              defaultMessage:
+                'Have any feedback or ideas for improvement? Let us know in a short survey.',
+            })}
+          </p>
+        </EuiConfirmModal>
+      )}
+    </>
+  );
+}

x-pack/plugins/observability_solution/apm/public/components/shared/entity_enablement/index.tsx

@@ -4,7 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import React from 'react';
+import React, { useState } from 'react';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import useToggle from 'react-use/lib/useToggle';
 import {
@@ -26,11 +26,14 @@ import { useEntityManagerEnablementContext } from '../../../context/entity_manag
 import { FeedbackModal } from './feedback_modal';
 
 export function EntityEnablement() {
+  const [isFeedbackModalVisiable, setsIsFeedbackModalVisiable] = useState(false);
+
   const {
     services: { entityManager },
   } = useKibana<ApmPluginStartDeps>();
 
-  const { isEntityManagerEnabled, isEnablementPending } = useEntityManagerEnablementContext();
+  const { isEntityManagerEnabled, isEnablementPending, refetch } =
+    useEntityManagerEnablementContext();
 
   const [isPopoverOpen, togglePopover] = useToggle(false);
   const [isLoading, setIsLoading] = useToggle(false);
@@ -41,10 +44,11 @@ export function EntityEnablement() {
       const response = await entityManager.entityClient.disableManagedEntityDiscovery();
       if (response.success) {
         setIsLoading(false);
-        window.location.reload();
+        setsIsFeedbackModalVisiable(true);
       }
     } catch (error) {
       setIsLoading(false);
+      setsIsFeedbackModalVisiable(true);
       console.error(error);
     }
   };
@@ -55,7 +59,7 @@ export function EntityEnablement() {
       const response = await entityManager.entityClient.enableManagedEntityDiscovery();
       if (response.success) {
         setIsLoading(false);
-        window.location.reload();
+        refetch();
       }
     } catch (error) {
       setIsLoading(false);
@@ -132,7 +136,11 @@ export function EntityEnablement() {
           </EuiLink>
         </EuiFlexItem>
       )}
-      <FeedbackModal />
+      <FeedbackModal
+        isFeedbackModalVisiable={isFeedbackModalVisiable}
+        setsIsFeedbackModalVisiable={setsIsFeedbackModalVisiable}
+        refetch={refetch}
+      />
     </EuiFlexGroup>
   );
 }

x-pack/plugins/observability_solution/apm/public/context/entity_manager_context/entity_manager_context.tsx

@@ -11,6 +11,7 @@ export interface EntityManagerEnablementContextValue {
   isEntityManagerEnabled: boolean;
   entityManagerEnablementStatus: ENTITY_FETCH_STATUS;
   isEnablementPending: boolean;
+  refetch: () => void;
 }
 
 export const EntityManagerEnablementContext = createContext(
@@ -22,14 +23,15 @@ export function EntityManagerEnablementContextProvider({
 }: {
   children: React.ReactChild;
 }) {
-  const { isEnabled, status } = useEntityManager();
+  const { isEnabled, status, refetch } = useEntityManager();
 
   return (
     <EntityManagerEnablementContext.Provider
       value={{
         isEntityManagerEnabled: isEnabled,
         entityManagerEnablementStatus: status,
         isEnablementPending: status === ENTITY_FETCH_STATUS.LOADING,
+        refetch,
       }}
     >
       {children}

x-pack/plugins/observability_solution/apm/public/hooks/use_entity_manager.ts

@@ -6,7 +6,7 @@
  */
 
 import { useKibana } from '@kbn/kibana-react-plugin/public';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { ApmPluginStartDeps } from '../plugin';
 
 export enum ENTITY_FETCH_STATUS {
@@ -20,7 +20,7 @@ export function useEntityManager() {
   const {
     services: { entityManager },
   } = useKibana<ApmPluginStartDeps>();
-
+  const [counter, setCounter] = useState(0);
   const [result, setResult] = useState({
     isEnabled: false,
     status: ENTITY_FETCH_STATUS.NOT_INITIATED,
@@ -41,7 +41,15 @@ export function useEntityManager() {
     }
 
     isManagedEntityDiscoveryEnabled();
-  }, [entityManager]);
-
-  return { ...result };
+  }, [entityManager, counter]);
+
+  return useMemo(() => {
+    return {
+      ...result,
+      refetch: () => {
+        // this will invalidate the deps to `useEffect` and will result in a new request
+        setCounter((count) => count + 1);
+      },
+    };
+  }, [result]);
 }