bring back test for outgoing webhooks

grafana-plugin/src/PluginPage.tsx

@@ -3,10 +3,10 @@ import React from 'react';
 import { PluginPageProps, PluginPage as RealPluginPage } from '@grafana/runtime';
 import Header from 'navbar/Header/Header';
 
+import { pages } from 'pages';
 import { isTopNavbar } from 'plugin/GrafanaPluginRootPage.helpers';
 import { useStore } from 'state/useStore';
 import { useQueryParams } from 'utils/hooks';
-import { pages } from 'pages';
 
 export const PluginPage = (isTopNavbar() ? RealPlugin : PluginPageFallback) as React.ComponentType<PluginPageProps>;
 

grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.tsx

@@ -18,9 +18,9 @@ import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_
 import { Alert } from 'models/alertgroup/alertgroup.types';
 import { makeRequest } from 'network';
 import { UserAction } from 'state/userAction';
+import LocationHelper from 'utils/LocationHelper';
 
 import styles from './AlertTemplatesForm.module.css';
-import LocationHelper from 'utils/LocationHelper';
 
 const cx = cn.bind(styles);
 

grafana-plugin/src/containers/DefaultPageLayout/DefaultPageLayout.tsx

@@ -11,6 +11,7 @@ import { getIfChatOpsConnected } from 'containers/DefaultPageLayout/helper';
 import { AppFeature } from 'state/features';
 import { useStore } from 'state/useStore';
 import { UserAction } from 'state/userAction';
+import LocationHelper from 'utils/LocationHelper';
 import { GRAFANA_LICENSE_OSS } from 'utils/consts';
 import { useForceUpdate } from 'utils/hooks';
 import { getItem, setItem } from 'utils/localStorage';
@@ -19,7 +20,6 @@ import sanitize from 'utils/sanitize';
 import { getSlackMessage } from './DefaultPageLayout.helpers';
 import styles from './DefaultPageLayout.module.scss';
 import { SlackError } from './DefaultPageLayout.types';
-import LocationHelper from 'utils/LocationHelper';
 
 const cx = cn.bind(styles);
 

grafana-plugin/src/containers/IntegrationSettings/IntegrationSettings.tsx

@@ -14,12 +14,12 @@ import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_
 import { Alert } from 'models/alertgroup/alertgroup.types';
 import { useStore } from 'state/useStore';
 import { openNotification } from 'utils';
+import LocationHelper from 'utils/LocationHelper';
 
 import { IntegrationSettingsTab } from './IntegrationSettings.types';
 import Autoresolve from './parts/Autoresolve';
 
 import styles from 'containers/IntegrationSettings/IntegrationSettings.module.css';
-import LocationHelper from 'utils/LocationHelper';
 
 const cx = cn.bind(styles);
 

grafana-plugin/src/containers/IntegrationSettings/parts/Autoresolve.tsx

@@ -14,9 +14,9 @@ import { Team } from 'models/team/team.types';
 import { useStore } from 'state/useStore';
 import { UserAction } from 'state/userAction';
 import { openErrorNotification, openNotification } from 'utils';
+import LocationHelper from 'utils/LocationHelper';
 
 import styles from 'containers/IntegrationSettings/parts/Autoresolve.module.css';
-import LocationHelper from 'utils/LocationHelper';
 
 const cx = cn.bind(styles);
 

grafana-plugin/src/pages/escalation-chains/EscalationChains.tsx

@@ -30,9 +30,9 @@ import { pages } from 'pages';
 import { WithStoreProps } from 'state/types';
 import { UserAction } from 'state/userAction';
 import { withMobXProviderContext } from 'state/withStore';
+import LocationHelper from 'utils/LocationHelper';
 
 import styles from './EscalationChains.module.css';
-import LocationHelper from 'utils/LocationHelper';
 
 const cx = cn.bind(styles);
 

grafana-plugin/src/pages/incident/Incident.tsx

@@ -52,12 +52,12 @@ import { useStore } from 'state/useStore';
 import { UserAction } from 'state/userAction';
 import { withMobXProviderContext } from 'state/withStore';
 import { openNotification } from 'utils';
+import LocationHelper from 'utils/LocationHelper';
 import sanitize from 'utils/sanitize';
 
 import { getActionButtons, getIncidentStatusTag, renderRelatedUsers } from './Incident.helpers';
 
 import styles from './Incident.module.css';
-import LocationHelper from 'utils/LocationHelper';
 
 const cx = cn.bind(styles);
 

grafana-plugin/src/pages/incidents/Incidents.tsx

@@ -27,11 +27,11 @@ import { move } from 'state/helpers';
 import { PageProps, WithStoreProps } from 'state/types';
 import { UserAction } from 'state/userAction';
 import { withMobXProviderContext } from 'state/withStore';
+import LocationHelper from 'utils/LocationHelper';
 
 import SilenceDropdown from './parts/SilenceDropdown';
 
 import styles from './Incidents.module.css';
-import LocationHelper from 'utils/LocationHelper';
 
 const cx = cn.bind(styles);
 

grafana-plugin/src/pages/integrations/Integrations.tsx

@@ -29,9 +29,9 @@ import { pages } from 'pages';
 import { WithStoreProps } from 'state/types';
 import { UserAction } from 'state/userAction';
 import { withMobXProviderContext } from 'state/withStore';
+import LocationHelper from 'utils/LocationHelper';
 
 import styles from './Integrations.module.css';
-import LocationHelper from 'utils/LocationHelper';
 
 const cx = cn.bind(styles);
 

grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.test.tsx

@@ -0,0 +1,86 @@
+import 'jest/matchMedia.ts';
+import React from 'react';
+
+import { describe, expect, test } from '@jest/globals';
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import outgoingWebhooksStub from 'jest/outgoingWebhooksStub';
+
+import { OutgoingWebhook } from 'models/outgoing_webhook/outgoing_webhook.types';
+import { OutgoingWebhooks } from 'pages/outgoing_webhooks/OutgoingWebhooks';
+
+const outgoingWebhooks = outgoingWebhooksStub as OutgoingWebhook[];
+const outgoingWebhookStore = () => ({
+  loadItem: () => Promise.resolve(outgoingWebhooks[0]),
+  updateItems: () => Promise.resolve(),
+  getSearchResult: () => outgoingWebhooks,
+  items: outgoingWebhooks.reduce((prev, current) => {
+    prev[current.id] = current;
+    return prev;
+  }, {}),
+});
+
+jest.mock('plugin/GrafanaPluginRootPage.helpers', () => ({
+  isTopNavbar: () => false,
+}));
+
+jest.mock('@grafana/runtime', () => ({
+  config: {
+    featureToggles: {
+      topNav: false,
+    },
+  },
+}));
+
+jest.mock('state/useStore', () => ({
+  useStore: () => ({
+    outgoingWebhookStore: outgoingWebhookStore(),
+    isUserActionAllowed: jest.fn().mockReturnValue(true),
+  }),
+}));
+
+jest.mock('@grafana/runtime', () => ({
+  getLocationSrv: jest.fn(),
+}));
+
+describe('OutgoingWebhooks', () => {
+  const storeMock = {
+    isUserActionAllowed: jest.fn().mockReturnValue(true),
+    outgoingWebhookStore: outgoingWebhookStore(),
+  };
+
+  beforeAll(() => {
+    console.warn = () => {};
+    console.error = () => {};
+  });
+
+  test('It renders all retrieved webhooks', async () => {
+    render(<OutgoingWebhooks {...getProps()} />);
+
+    const gTable = screen.queryByTestId('test__gTable');
+    const rows = gTable.querySelectorAll('tbody tr');
+
+    await waitFor(() => {
+      expect(() => queryEditForm()).toThrow(); // edit doesn't show for [id=undefined]
+      expect(rows.length).toBe(outgoingWebhooks.length);
+    });
+  });
+
+  test('It opens Edit View if [id] is supplied', async () => {
+    const id = outgoingWebhooks[0].id;
+    render(<OutgoingWebhooks {...getProps(id)} />);
+
+    expect(() => queryEditForm()).toThrow(); // before updates kick in
+    await waitFor(() => {
+      expect(queryEditForm()).toBeDefined(); // edit shows for [id=?]
+    });
+  });
+
+  function getProps(id: OutgoingWebhook['id'] = undefined): any {
+    return { store: storeMock, query: { id } };
+  }
+
+  function queryEditForm(): HTMLElement {
+    return screen.getByTestId<HTMLElement>('test__outgoingWebhookEditForm');
+  }
+});

grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx

@@ -23,9 +23,9 @@ import { pages } from 'pages';
 import { PageProps, WithStoreProps } from 'state/types';
 import { UserAction } from 'state/userAction';
 import { withMobXProviderContext } from 'state/withStore';
+import LocationHelper from 'utils/LocationHelper';
 
 import styles from './OutgoingWebhooks.module.css';
-import LocationHelper from 'utils/LocationHelper';
 
 const cx = cn.bind(styles);
 

grafana-plugin/src/pages/schedule/Schedule.tsx

@@ -25,11 +25,11 @@ import { pages } from 'pages';
 import { PageProps, WithStoreProps } from 'state/types';
 import { UserAction } from 'state/userAction';
 import { withMobXProviderContext } from 'state/withStore';
+import LocationHelper from 'utils/LocationHelper';
 
 import { getStartOfWeek } from './Schedule.helpers';
 
 import styles from './Schedule.module.css';
-import LocationHelper from 'utils/LocationHelper';
 
 const cx = cn.bind(styles);
 

grafana-plugin/src/pages/schedules/Schedules.tsx

@@ -30,9 +30,9 @@ import { getStartOfWeek } from 'pages/schedule/Schedule.helpers';
 import { WithStoreProps } from 'state/types';
 import { UserAction } from 'state/userAction';
 import { withMobXProviderContext } from 'state/withStore';
+import LocationHelper from 'utils/LocationHelper';
 
 import styles from './Schedules.module.css';
-import LocationHelper from 'utils/LocationHelper';
 
 const cx = cn.bind(styles);
 

grafana-plugin/src/pages/settings/tabs/Cloud/CloudPage.tsx

@@ -14,9 +14,9 @@ import { WithStoreProps } from 'state/types';
 import { useStore } from 'state/useStore';
 import { withMobXProviderContext } from 'state/withStore';
 import { openErrorNotification } from 'utils';
+import LocationHelper from 'utils/LocationHelper';
 
 import styles from './CloudPage.module.css';
-import LocationHelper from 'utils/LocationHelper';
 
 const cx = cn.bind(styles);
 

grafana-plugin/src/pages/users/Users.tsx

@@ -25,11 +25,11 @@ import { pages } from 'pages';
 import { PageProps, WithStoreProps } from 'state/types';
 import { UserAction } from 'state/userAction';
 import { withMobXProviderContext } from 'state/withStore';
+import LocationHelper from 'utils/LocationHelper';
 
 import { getRealFilters, getUserRowClassNameFn } from './Users.helpers';
 
 import styles from './Users.module.css';
-import LocationHelper from 'utils/LocationHelper';
 
 const cx = cn.bind(styles);
 

grafana-plugin/src/state/types.ts

@@ -1,4 +1,5 @@
 import { AppPluginMeta, KeyValue } from '@grafana/data';
+
 import { RootStore } from 'state/index';
 
 export interface WithStoreProps {
@@ -7,7 +8,7 @@ export interface WithStoreProps {
 
 export interface PageProps<T extends KeyValue = KeyValue> {
   meta: AppPluginMeta<T>;
-  query: KeyValue
+  query: KeyValue;
 }
 
 export interface SelectOption {

grafana-plugin/src/style/global.css

@@ -42,4 +42,4 @@
 
 .page-title {
   margin-bottom: 16px;
-}
+}

grafana-plugin/src/utils/LocationHelper.ts

@@ -1,5 +1,6 @@
 import { KeyValue } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
+
 import { getQueryParams } from 'plugin/GrafanaPluginRootPage.helpers';
 
 class LocationHelper {