From 761a79e1166229f4b77f866aef57d4e906e36bbb Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Wed, 21 Sep 2022 13:43:13 +0300
Subject: [PATCH] not found notification

---
 .../WrongTeamDisplayWrapper.helpers.tsx       |  4 +++
 .../WrongTeamDisplayWrapper.tsx               | 15 ++++++---
 .../escalation-chains/EscalationChains.tsx    | 22 +++++++------
 .../src/pages/incident/Incident.tsx           | 31 ++++++-------------
 .../src/pages/integrations/Integrations.tsx   | 20 +++++++-----
 .../outgoing_webhooks/OutgoingWebhooks.tsx    | 16 +++++++---
 .../src/pages/schedules/Schedules.tsx         | 18 +++++++----
 grafana-plugin/src/pages/users/Users.tsx      | 16 +++++++---
 8 files changed, 84 insertions(+), 58 deletions(-)

diff --git a/grafana-plugin/src/components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers.tsx b/grafana-plugin/src/components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers.tsx
index 5b72008a..5c7b5dac 100644
--- a/grafana-plugin/src/components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers.tsx
+++ b/grafana-plugin/src/components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers.tsx
@@ -1,5 +1,9 @@
 import { WrongTeamData } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
 
+export function initWrongTeamDataState(): Partial<WrongTeamData> {
+  return { isError: false, wrongTeamNoPermissions: false };
+}
+
 export function getWrongTeamResponseInfo({ response }): Partial<WrongTeamData> {
   if (response) {
     if (response.status === 404) {
diff --git a/grafana-plugin/src/components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.tsx b/grafana-plugin/src/components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.tsx
index d427f65a..6a41c025 100644
--- a/grafana-plugin/src/components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.tsx
+++ b/grafana-plugin/src/components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { Button, VerticalGroup } from '@grafana/ui';
 import cn from 'classnames/bind';
@@ -10,6 +10,7 @@ import { GrafanaTeam } from 'models/grafana_team/grafana_team.types';
 import { useStore } from 'state/useStore';
 
 import styles from './WrongTeamDisplayWrapper.module.css';
+import { openWarningNotification } from 'utils';
 
 const cx = cn.bind(styles);
 
@@ -24,21 +25,25 @@ export interface WrongTeamData {
   switchToTeam?: { name: string; id: string };
 }
 
-export function initWrongTeamDataState(): Partial<WrongTeamData> {
-  return { isError: false, wrongTeamNoPermissions: false };
-}
-
 export default function WrongTeamDisplayWrapper({
   wrongTeamData,
   objectName,
   pageName,
+  itemNotFoundMessage,
   children,
 }: {
   wrongTeamData: WrongTeamData;
   objectName: string;
   pageName: string;
+  itemNotFoundMessage: string;
   children: () => JSX.Element;
 }) {
+  useEffect(() => {
+    if (!wrongTeamData.isError && wrongTeamData.notFound) {
+      openWarningNotification(itemNotFoundMessage);
+    }
+  }, [wrongTeamData.notFound]);
+
   if (!wrongTeamData.isError) return children();
 
   const store = useStore();
diff --git a/grafana-plugin/src/pages/escalation-chains/EscalationChains.tsx b/grafana-plugin/src/pages/escalation-chains/EscalationChains.tsx
index bf54b75b..7cd64739 100644
--- a/grafana-plugin/src/pages/escalation-chains/EscalationChains.tsx
+++ b/grafana-plugin/src/pages/escalation-chains/EscalationChains.tsx
@@ -16,8 +16,11 @@ import Text from 'components/Text/Text';
 import Tutorial from 'components/Tutorial/Tutorial';
 import { TutorialStep } from 'components/Tutorial/Tutorial.types';
 import WithConfirm from 'components/WithConfirm/WithConfirm';
-import WrongTeamDisplayWrapper, { initWrongTeamDataState, PageBaseState, WrongTeamData } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
-import { getWrongTeamResponseInfo } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
+import WrongTeamDisplayWrapper, { PageBaseState } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
+import {
+  getWrongTeamResponseInfo,
+  initWrongTeamDataState,
+} from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
 import EscalationChainCard from 'containers/EscalationChainCard/EscalationChainCard';
 import EscalationChainForm from 'containers/EscalationChainForm/EscalationChainForm';
 import EscalationChainSteps from 'containers/EscalationChainSteps/EscalationChainSteps';
@@ -60,7 +63,7 @@ class EscalationChainsPage extends React.Component<EscalationChainsPageProps, Es
   }
 
   parseQueryParams = async () => {
-    this.setState({ wrongTeamData: initWrongTeamDataState() }); // reset wrong team error to false on query parse
+    this.setState({ wrongTeamData: initWrongTeamDataState() }); // reset on query parse
 
     const { store, query } = this.props;
     const { escalationChainStore } = store;
@@ -83,10 +86,6 @@ class EscalationChainsPage extends React.Component<EscalationChainsPageProps, Es
       escalationChain = escalationChainStore.items[query.id];
       if (escalationChain) {
         selectedEscalationChain = escalationChain.id;
-      } else {
-        openWarningNotification(
-          `Escalation chain with id=${query?.id} is not found. Please select escalation chain from the list.`
-        );
       }
     }
 
@@ -123,7 +122,7 @@ class EscalationChainsPage extends React.Component<EscalationChainsPageProps, Es
   }
 
   render() {
-    const { store } = this.props;
+    const { store, query } = this.props;
     const {
       showCreateEscalationChainModal,
       escalationChainIdToCopy,
@@ -136,7 +135,12 @@ class EscalationChainsPage extends React.Component<EscalationChainsPageProps, Es
     const searchResult = escalationChainStore.getSearchResult(escalationChainsFilters.searchTerm);
 
     return (
-      <WrongTeamDisplayWrapper wrongTeamData={wrongTeamData} objectName="escalation" pageName="escalations">
+      <WrongTeamDisplayWrapper
+        wrongTeamData={wrongTeamData}
+        objectName="escalation"
+        pageName="escalations"
+        itemNotFoundMessage={`Escalation chain with id=${query?.id} is not found. Please select escalation chain from the list.`}
+      >
         {() => (
           <>
             <div className={cx('root')}>
diff --git a/grafana-plugin/src/pages/incident/Incident.tsx b/grafana-plugin/src/pages/incident/Incident.tsx
index 2fd4431f..dde6d254 100644
--- a/grafana-plugin/src/pages/incident/Incident.tsx
+++ b/grafana-plugin/src/pages/incident/Incident.tsx
@@ -29,8 +29,8 @@ import IntegrationLogo from 'components/IntegrationLogo/IntegrationLogo';
 import PluginLink from 'components/PluginLink/PluginLink';
 import SourceCode from 'components/SourceCode/SourceCode';
 import Text from 'components/Text/Text';
-import WrongTeamDisplayWrapper, { initWrongTeamDataState, PageBaseState } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
-import { getWrongTeamResponseInfo } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
+import WrongTeamDisplayWrapper, { PageBaseState } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
+import { getWrongTeamResponseInfo, initWrongTeamDataState } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
 import AttachIncidentForm from 'containers/AttachIncidentForm/AttachIncidentForm';
 import IntegrationSettings from 'containers/IntegrationSettings/IntegrationSettings';
 import { IntegrationSettingsTab } from 'containers/IntegrationSettings/IntegrationSettings.types';
@@ -89,7 +89,7 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
   }
 
   update = () => {
-    this.setState({ wrongTeamData: initWrongTeamDataState() }); // reset wrong team error to false on query parse // reset wrong team error to false
+    this.setState({ wrongTeamData: initWrongTeamDataState() }); // reset wrong team error to false
 
     const {
       store,
@@ -114,24 +114,6 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
 
     const incident = alerts.get(id);
 
-    // if (notFound) {
-    //   return (
-    //     <div className={cx('root')}>
-    //       <div className={cx('not-found')}>
-    //         <VerticalGroup spacing="lg" align="center">
-    //           <Text.Title level={1}>404</Text.Title>
-    //           <Text.Title level={4}>Incident not found</Text.Title>
-    //           <PluginLink query={{ page: 'incidents', cursor, start, perpage }}>
-    //             <Button variant="secondary" icon="arrow-left" size="md">
-    //               Go to incidents page
-    //             </Button>
-    //           </PluginLink>
-    //         </VerticalGroup>
-    //       </div>
-    //     </div>
-    //   );
-    // }
-
     if (!incident && !wrongTeamData.isError) {
       return (
         <div className={cx('root')}>
@@ -141,7 +123,12 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
     }
 
     return (
-      <WrongTeamDisplayWrapper wrongTeamData={wrongTeamData} objectName="alert group" pageName="incidents">
+      <WrongTeamDisplayWrapper
+        wrongTeamData={wrongTeamData}
+        objectName="alert group"
+        pageName="incidents"
+        itemNotFoundMessage={`Incident with id=${id} is not found. Please select incident from the list.`}
+      >
         {() => (
           <>
             <div className={cx('root')}>
diff --git a/grafana-plugin/src/pages/integrations/Integrations.tsx b/grafana-plugin/src/pages/integrations/Integrations.tsx
index 93073e66..85b8c2b5 100644
--- a/grafana-plugin/src/pages/integrations/Integrations.tsx
+++ b/grafana-plugin/src/pages/integrations/Integrations.tsx
@@ -12,8 +12,11 @@ import IntegrationsFilters, { Filters } from 'components/IntegrationsFilters/Int
 import Text from 'components/Text/Text';
 import Tutorial from 'components/Tutorial/Tutorial';
 import { TutorialStep } from 'components/Tutorial/Tutorial.types';
-import WrongTeamDisplayWrapper, { initWrongTeamDataState, PageBaseState, WrongTeamData } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
-import { getWrongTeamResponseInfo } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
+import WrongTeamDisplayWrapper, { PageBaseState } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
+import {
+  getWrongTeamResponseInfo,
+  initWrongTeamDataState,
+} from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
 import AlertReceiveChannelCard from 'containers/AlertReceiveChannelCard/AlertReceiveChannelCard';
 import AlertRules from 'containers/AlertRules/AlertRules';
 import CreateAlertReceiveChannelContainer from 'containers/CreateAlertReceiveChannelContainer/CreateAlertReceiveChannelContainer';
@@ -81,10 +84,6 @@ class Integrations extends React.Component<IntegrationsProps, IntegrationsState>
 
       if (alertReceiveChannel.id) {
         selectedAlertReceiveChannel = alertReceiveChannel.id;
-      } else {
-        openWarningNotification(
-          `Integration with id=${query?.id} is not found. Please select integration from the list.`
-        );
       }
 
       if (query.tab) {
@@ -119,7 +118,7 @@ class Integrations extends React.Component<IntegrationsProps, IntegrationsState>
   }
 
   render() {
-    const { store } = this.props;
+    const { store, query } = this.props;
     const {
       integrationsFilters,
       alertReceiveChannelToShowSettings,
@@ -132,7 +131,12 @@ class Integrations extends React.Component<IntegrationsProps, IntegrationsState>
     const searchResult = alertReceiveChannelStore.getSearchResult();
 
     return (
-      <WrongTeamDisplayWrapper wrongTeamData={wrongTeamData} objectName="integration" pageName="integrations">
+      <WrongTeamDisplayWrapper
+        wrongTeamData={wrongTeamData}
+        objectName="integration"
+        pageName="integrations"
+        itemNotFoundMessage={`Integration with id=${query?.id} is not found. Please select integration from the list.`}
+      >
         {() => (
           <>
             <div className={cx('root')}>
diff --git a/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx b/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx
index 7fb3f643..849fd39a 100644
--- a/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx
+++ b/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx
@@ -10,8 +10,11 @@ import GTable from 'components/GTable/GTable';
 import PluginLink from 'components/PluginLink/PluginLink';
 import Text from 'components/Text/Text';
 import WithConfirm from 'components/WithConfirm/WithConfirm';
-import WrongTeamDisplayWrapper, { initWrongTeamDataState, PageBaseState, WrongTeamData } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
-import { getWrongTeamResponseInfo } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
+import WrongTeamDisplayWrapper, { PageBaseState } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
+import {
+  getWrongTeamResponseInfo,
+  initWrongTeamDataState,
+} from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
 import OutgoingWebhookForm from 'containers/OutgoingWebhookForm/OutgoingWebhookForm';
 import { WithPermissionControl } from 'containers/WithPermissionControl/WithPermissionControl';
 import { ActionDTO } from 'models/action';
@@ -73,7 +76,7 @@ class OutgoingWebhooks extends React.Component<OutgoingWebhooksProps, OutgoingWe
   };
 
   render() {
-    const { store } = this.props;
+    const { store, query } = this.props;
     const { outgoingWebhookIdToEdit, wrongTeamData } = this.state;
 
     const webhooks = store.outgoingWebhookStore.getSearchResult();
@@ -97,7 +100,12 @@ class OutgoingWebhooks extends React.Component<OutgoingWebhooksProps, OutgoingWe
     ];
 
     return (
-      <WrongTeamDisplayWrapper wrongTeamData={wrongTeamData} objectName="outgoing webhook" pageName="outgoing_webhooks">
+      <WrongTeamDisplayWrapper
+        wrongTeamData={wrongTeamData}
+        objectName="outgoing webhook"
+        pageName="outgoing_webhooks"
+        itemNotFoundMessage={`Outgoing webhook with id=${query?.id} is not found. Please select outgoing webhook from the list.`}
+      >
         {() => (
           <>
             <div className={cx('root')}>
diff --git a/grafana-plugin/src/pages/schedules/Schedules.tsx b/grafana-plugin/src/pages/schedules/Schedules.tsx
index de35df6d..86d59213 100644
--- a/grafana-plugin/src/pages/schedules/Schedules.tsx
+++ b/grafana-plugin/src/pages/schedules/Schedules.tsx
@@ -28,14 +28,15 @@ import { SchedulesFiltersType } from 'components/SchedulesFilters/SchedulesFilte
 import Text from 'components/Text/Text';
 import Tutorial from 'components/Tutorial/Tutorial';
 import { TutorialStep } from 'components/Tutorial/Tutorial.types';
-import WrongTeamDisplayWrapper, { initWrongTeamDataState, PageBaseState, WrongTeamData } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
-import { getWrongTeamResponseInfo } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
-import GSelect from 'containers/GSelect/GSelect';
+import WrongTeamDisplayWrapper, { PageBaseState } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
+import {
+  getWrongTeamResponseInfo,
+  initWrongTeamDataState,
+} from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
 import ScheduleForm from 'containers/ScheduleForm/ScheduleForm';
 import ScheduleICalSettings from 'containers/ScheduleIcalLink/ScheduleIcalLink';
 import { WithPermissionControl } from 'containers/WithPermissionControl/WithPermissionControl';
 import { Schedule, ScheduleEvent } from 'models/schedule/schedule.types';
-import { PRIVATE_CHANNEL_NAME } from 'models/slack_channel/slack_channel.config';
 import { getSlackChannelName } from 'models/slack_channel/slack_channel.helpers';
 import { WithStoreProps } from 'state/types';
 import { UserAction } from 'state/userAction';
@@ -111,7 +112,7 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
   };
 
   render() {
-    const { store } = this.props;
+    const { store, query } = this.props;
     const { expandedSchedulesKeys, scheduleIdToDelete, scheduleIdToEdit, scheduleIdToExport } = this.state;
     const { filters, wrongTeamData } = this.state;
     const { scheduleStore } = store;
@@ -161,7 +162,12 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
     const offset = moment().tz(timezoneStr).format('Z');
 
     return (
-      <WrongTeamDisplayWrapper wrongTeamData={wrongTeamData} objectName="schedule" pageName="schedules">
+      <WrongTeamDisplayWrapper
+        wrongTeamData={wrongTeamData}
+        objectName="schedule"
+        pageName="schedules"
+        itemNotFoundMessage={`Schedule with id=${query?.id} is not found. Please select schedule from the list.`}
+      >
         {() => (
           <>
             <div className={cx('root')}>
diff --git a/grafana-plugin/src/pages/users/Users.tsx b/grafana-plugin/src/pages/users/Users.tsx
index 7878e753..aeba9f35 100644
--- a/grafana-plugin/src/pages/users/Users.tsx
+++ b/grafana-plugin/src/pages/users/Users.tsx
@@ -12,8 +12,11 @@ import GTable from 'components/GTable/GTable';
 import PluginLink from 'components/PluginLink/PluginLink';
 import Text from 'components/Text/Text';
 import UsersFilters from 'components/UsersFilters/UsersFilters';
-import WrongTeamDisplayWrapper, { initWrongTeamDataState, PageBaseState, WrongTeamData } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
-import { getWrongTeamResponseInfo } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
+import WrongTeamDisplayWrapper, { PageBaseState } from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper';
+import {
+  getWrongTeamResponseInfo,
+  initWrongTeamDataState,
+} from 'components/WrongTeamDisplayWrapper/WrongTeamDisplayWrapper.helpers';
 import UserSettings from 'containers/UserSettings/UserSettings';
 import { WithPermissionControl } from 'containers/WithPermissionControl/WithPermissionControl';
 import { getRole } from 'models/user/user.helpers';
@@ -116,7 +119,7 @@ class Users extends React.Component<UsersProps, UsersState> {
 
   render() {
     const { usersFilters, userPkToEdit, page, wrongTeamData } = this.state;
-    const { store } = this.props;
+    const { store, query } = this.props;
     const { userStore } = store;
 
     const columns = [
@@ -168,7 +171,12 @@ class Users extends React.Component<UsersProps, UsersState> {
     const { count, results } = userStore.getSearchResult();
 
     return (
-      <WrongTeamDisplayWrapper wrongTeamData={wrongTeamData} objectName="user" pageName="users">
+      <WrongTeamDisplayWrapper
+        wrongTeamData={wrongTeamData}
+        objectName="user"
+        pageName="users"
+        itemNotFoundMessage={`User with id=${query?.id} is not found. Please select user from the list.`}
+      >
         {() => (
           <>
             <div className={cx('root')}>