Toast on CustomPanels

.cypress/integration/3_panels.spec.ts

@@ -77,7 +77,7 @@ describe('Creating visualizations', () => {
   });
 });
 
-describe('Testing panels table', () => {
+describe.only('Testing panels table', () => {
   beforeEach(() => {
     eraseTestPanels();
     moveToPanelHome();
@@ -567,6 +567,7 @@ const eraseLegacyPanels = () => {
       'osd-xsrf': true,
     },
   }).then((response) => {
+    console.log("legacy panels to erase", response.body)
     response.body.panels.map((panel) => {
       cy.request({
         method: 'DELETE',
@@ -596,6 +597,7 @@ const eraseSavedObjectPaenls = () => {
       },
     })
     .then((response) => {
+      console.log("saved objects to erase", response.body)
       response.body.saved_objects.map((soPanel) => {
         cy.request({
           method: 'DELETE',
@@ -605,6 +607,9 @@ const eraseSavedObjectPaenls = () => {
             'content-type': 'application/json;charset=UTF-8',
             'osd-xsrf': true,
           },
+        }).then((response) => {
+          const deletedId = response;
+          console.log('erased SO Panel', response)
         });
       });
     });
@@ -681,9 +686,10 @@ const openActionsDropdown = () => {
 };
 
 const selectThePanel = () => {
-  cy.get('.euiCheckbox__input[title="Select this row"]').then(() => {
-    cy.get('.euiCheckbox__input[title="Select this row"]').check({ force: true });
-  });
+  // cy.get('.euiCheckbox__input[title="Select this row"]').then(() => {
+  cy.get('.euiCheckbox__input[title="Select this row"]').check({ force: true });
+  cy.get('.euiTableRow-isSelected').should('exist')
+  // });
 };
 
 const expectToastWith = (title) => {

common/types/shared.ts

@@ -0,0 +1,5 @@
+import { CoreStart, ToastsStart } from '../../../../src/core/public';
+
+export interface ObservabilityAppServices extends CoreStart {
+  toasts: ToastsStart;
+}

public/components/app.tsx

@@ -18,6 +18,8 @@ import { EventAnalytics } from './event_analytics';
 import { Home as MetricsHome } from './metrics/index';
 import { Main as NotebooksHome } from './notebooks/components/main';
 import { Home as TraceAnalyticsHome } from './trace_analytics/home';
+import { ObservabilityAppServices } from '../../common/types/shared';
+import { OpenSearchDashboardsContextProvider } from '../../../../src/plugins/opensearch_dashboards_react/public';
 
 interface ObservabilityAppDeps {
   CoreStartProp: CoreStart;
@@ -28,6 +30,7 @@ interface ObservabilityAppDeps {
   timestampUtils: any;
   queryManager: QueryManager;
   startPage: string;
+  services: ObservabilityAppServices;
 }
 
 // for cypress to test redux store
@@ -53,6 +56,7 @@ export const App = ({
   timestampUtils,
   queryManager,
   startPage,
+  services,
 }: ObservabilityAppDeps) => {
   const { chrome, http, notifications, savedObjects: coreSavedObjects } = CoreStartProp;
   const parentBreadcrumb = {
@@ -65,26 +69,28 @@ export const App = ({
   return (
     <Provider store={store}>
       <I18nProvider>
-        <MetricsListener http={http}>
-          <ModuleComponent
-            http={http}
-            chrome={chrome}
-            notifications={notifications}
-            CoreStartProp={CoreStartProp}
-            DepsStart={DepsStart}
-            DashboardContainerByValueRenderer={
-              DepsStart.dashboard.DashboardContainerByValueRenderer
-            }
-            pplService={pplService}
-            dslService={dslService}
-            savedObjects={savedObjects}
-            timestampUtils={timestampUtils}
-            queryManager={queryManager}
-            parentBreadcrumb={parentBreadcrumb}
-            parentBreadcrumbs={[parentBreadcrumb]}
-            setBreadcrumbs={chrome.setBreadcrumbs}
-          />
-        </MetricsListener>
+        <OpenSearchDashboardsContextProvider services={services}>
+          <MetricsListener http={http}>
+            <ModuleComponent
+              http={http}
+              chrome={chrome}
+              notifications={notifications}
+              CoreStartProp={CoreStartProp}
+              DepsStart={DepsStart}
+              DashboardContainerByValueRenderer={
+                DepsStart.dashboard.DashboardContainerByValueRenderer
+              }
+              pplService={pplService}
+              dslService={dslService}
+              savedObjects={savedObjects}
+              timestampUtils={timestampUtils}
+              queryManager={queryManager}
+              parentBreadcrumb={parentBreadcrumb}
+              parentBreadcrumbs={[parentBreadcrumb]}
+              setBreadcrumbs={chrome.setBreadcrumbs}
+            />
+          </MetricsListener>
+        </OpenSearchDashboardsContextProvider>
       </I18nProvider>
     </Provider>
   );

public/components/common/toast/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { useOpenSearchDashboards } from '../../../../../../src/plugins/opensearch_dashboards_react/public';
+import { ToastInputFields } from '../../../../../../src/core/public';
+import { ObservabilityAppServices } from '../../../../common/types/shared';
+
+type Color = 'success' | 'primary' | 'warning' | 'danger' | undefined;
+
+export const useToast = () => {
+  const {
+    services: { toasts },
+  } = useOpenSearchDashboards<ObservabilityAppServices>();
+
+  const setToast = (title: string, color: Color = 'success', text?, side?: string) => {
+    const newToast: ToastInputFields = {
+      id: new Date().toISOString(),
+      title,
+      text,
+    };
+    switch (color) {
+      case 'danger': {
+        toasts.addDanger(newToast);
+        break;
+      }
+      case 'warning': {
+        toasts.addWarning(newToast);
+        break;
+      }
+      default: {
+        toasts.addSuccess(newToast);
+        break;
+      }
+    }
+  };
+
+  return { setToast };
+};