same for integrations

grafana-plugin/src/models/alert_receive_channel/alert_receive_channel.ts

@@ -70,6 +70,18 @@ export class AlertReceiveChannelStore extends BaseStore {
     );
   }
 
+  @action
+  async loadItem(id: AlertReceiveChannel['id'], skipErrorHandling: boolean = false): Promise<AlertReceiveChannel> {
+    const alertReceiveChannel = await this.getById(id, skipErrorHandling);
+
+    this.items = {
+      ...this.items,
+      [id]: alertReceiveChannel
+    }
+
+    return alertReceiveChannel
+  }
+
   @action
   async updateItems(query = '') {
     const result = await this.getAll(query);

grafana-plugin/src/models/escalation_chain/escalation_chain.ts

@@ -23,7 +23,7 @@ export class EscalationChainStore extends BaseStore {
   }
 
   @action
-  async loadItem(id: EscalationChain['id'], skipErrorHandling: boolean = false) {
+  async loadItem(id: EscalationChain['id'], skipErrorHandling: boolean = false): Promise<EscalationChain> {
     const escalationChain = await this.getById(id, skipErrorHandling);
 
     this.items = {

grafana-plugin/src/network/index.ts

@@ -33,6 +33,7 @@ interface RequestConfig {
 const failPaths = [
   'api/plugin-proxy/grafana-oncall-app/api/internal/v1/users/URPAN2A31CVWQ/',
   'api/plugin-proxy/grafana-oncall-app/api/internal/v1/escalation_chains/FDF7ZQMNKYIQK/',
+  'api/plugin-proxy/grafana-oncall-app/api/internal/v1/alert_receive_channels/CSPE3C7R4Q38G/',
 ];
 
 export const makeRequest = async (path: string, config: RequestConfig) => {

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

@@ -7,6 +7,7 @@ import cn from 'classnames/bind';
 import { debounce } from 'lodash-es';
 import { observer } from 'mobx-react';
 
+import WrongTeamStub from 'components/NotFoundInTeam/WrongTeamStub';
 import GList from 'components/GList/GList';
 import IntegrationsFilters, { Filters } from 'components/IntegrationsFilters/IntegrationsFilters';
 import Text from 'components/Text/Text';
@@ -24,9 +25,9 @@ import { WithStoreProps } from 'state/types';
 import { UserAction } from 'state/userAction';
 import { withMobXProviderContext } from 'state/withStore';
 import { openWarningNotification } from 'utils';
+import { getWrongTeamResponseInfo } from 'components/NotFoundInTeam/WrongTeam.helpers';
 
 import styles from './Integrations.module.css';
-import { convertRelativeToAbsoluteDate } from 'utils/datetime';
 
 const cx = cn.bind(styles);
 
@@ -67,7 +68,7 @@ class Integrations extends React.Component<IntegrationsProps, IntegrationsState>
     getLocationSrv().update({ partial: true, query: { id: alertReceiveChannelId } });
   };
 
-  parseQueryParams = () => {
+  parseQueryParams = async () => {
     const { store, query } = this.props;
 
     const { alertReceiveChannelStore } = store;
@@ -76,14 +77,19 @@ class Integrations extends React.Component<IntegrationsProps, IntegrationsState>
     let selectedAlertReceiveChannel = store.selectedAlertReceiveChannel;
 
     if (query.id) {
-      const alertReceiveChannelId = searchResult && searchResult.find((res) => res.id === query?.id)?.id;
-      if (alertReceiveChannelId) {
-        selectedAlertReceiveChannel = alertReceiveChannelId;
+      let alertReceiveChannel = await alertReceiveChannelStore
+        .loadItem(query.id, true)
+        .catch((error) => this.setState({ ...getWrongTeamResponseInfo(error) }));
+      if (!alertReceiveChannel) return;
+
+      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) {
         this.setState({ integrationSettingsTab: query.tab });
         this.setState({ alertReceiveChannelToShowSettings: query.id });
@@ -123,7 +129,26 @@ class Integrations extends React.Component<IntegrationsProps, IntegrationsState>
       alertReceiveChannelToShowSettings,
       integrationSettingsTab,
       showCreateIntegrationModal,
+      wrongTeamError,
+      teamToSwitch,
+      wrongTeamNoPermissions,
     } = this.state;
+
+    if (wrongTeamError) {
+      const currentTeamId = store.userStore.currentUser?.current_team;
+      const currentTeamName = store.grafanaTeamStore.items[currentTeamId]?.name;
+
+      return (
+        <WrongTeamStub
+          objectName="escalation"
+          pageName="escalations"
+          currentTeam={currentTeamName}
+          switchToTeam={teamToSwitch}
+          wrongTeamNoPermissions={wrongTeamNoPermissions}
+        />
+      );
+    }
+
     const { alertReceiveChannelStore } = store;
     const searchResult = alertReceiveChannelStore.getSearchResult();