Rares/1083 fix integrations (#1256)

# What this PR does

- Fix for #1083 
- Fix for #1257 

- [x] `CHANGELOG.md` updated

CHANGELOG.md

@@ -17,6 +17,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- Fix issue on Integrations where you were redirected back once escalation chain was loaded ([#1083](https://github.com/grafana/oncall/issues/1083))
+  ([#1257](https://github.com/grafana/oncall/issues/1257))
+
 ## v1.1.20 (2023-01-30)
 
 ### Added

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

@@ -255,7 +255,7 @@ class AlertRules extends React.Component<AlertRulesProps, AlertRulesState> {
                     tooltip="Settings"
                     tooltipPlacement="top"
                     onClick={() => {
-                      onShowSettings();
+                      onShowSettings(IntegrationSettingsTab.Templates);
                     }}
                   />
                   <WithPermissionControl userAction={UserActions.EscalationChainsWrite}>

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

@@ -54,11 +54,6 @@ const IntegrationSettings = observer((props: IntegrationSettingsProps) => {
     alertReceiveChannelStore.updateItem(id);
   }, []);
 
-  useEffect(() => {
-    setActiveTab(startTab || IntegrationSettingsTab.Templates);
-    LocationHelper.update({ tab: startTab || IntegrationSettingsTab.Templates }, 'partial');
-  }, [startTab]);
-
   const integration = alertReceiveChannelStore.getIntegration(alertReceiveChannel);
 
   const [expanded, _setExpanded] = useState(false);

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

@@ -51,20 +51,23 @@ class Integrations extends React.Component<IntegrationsProps, IntegrationsState>
     errorData: initErrorDataState(),
   };
 
-  alertReceiveChanneltoPoll: { [key: string]: number } = {};
-  alertReceiveChannelTimerId: ReturnType<typeof setTimeout>;
+  private alertReceiveChanneltoPoll: { [key: string]: number } = {};
+  private alertReceiveChannelTimerId: ReturnType<typeof setTimeout>;
 
   async componentDidMount() {
-    this.update().then(this.parseQueryParams);
+    this.update().then(() => this.parseQueryParams(true));
   }
 
-  setSelectedAlertReceiveChannel = (alertReceiveChannelId: AlertReceiveChannel['id']) => {
+  setSelectedAlertReceiveChannel = (alertReceiveChannelId: AlertReceiveChannel['id'], shouldRedirect = false) => {
     const { store, history } = this.props;
     store.selectedAlertReceiveChannel = alertReceiveChannelId;
-    history.push(`${PLUGIN_ROOT}/integrations/${alertReceiveChannelId || ''}`);
+
+    if (shouldRedirect) {
+      history.push(`${PLUGIN_ROOT}/integrations/${alertReceiveChannelId || ''}`);
+    }
   };
 
-  parseQueryParams = async () => {
+  parseQueryParams = async (isMounting = false) => {
     this.setState({ errorData: initErrorDataState() }); // reset wrong team error to false on query parse // reset wrong team error to false
 
     const {
@@ -103,7 +106,7 @@ class Integrations extends React.Component<IntegrationsProps, IntegrationsState>
     }
 
     if (selectedAlertReceiveChannel) {
-      this.setSelectedAlertReceiveChannel(selectedAlertReceiveChannel);
+      this.setSelectedAlertReceiveChannel(selectedAlertReceiveChannel, isMounting);
     }
   };
 
@@ -112,15 +115,6 @@ class Integrations extends React.Component<IntegrationsProps, IntegrationsState>
     return store.alertReceiveChannelStore.updateItems();
   };
 
-  componentDidUpdate(prevProps: IntegrationsProps) {
-    if (this.props.match.params.id !== prevProps.match.params.id) {
-      this.parseQueryParams();
-    }
-    if (this.props.query.tab !== prevProps.query.tab) {
-      this.parseQueryParams();
-    }
-  }
-
   componentWillUnmount() {
     clearInterval(this.alertReceiveChannelTimerId);
   }
@@ -201,6 +195,8 @@ class Integrations extends React.Component<IntegrationsProps, IntegrationsState>
                           alertReceiveChannelToShowSettings: store.selectedAlertReceiveChannel,
                           integrationSettingsTab,
                         });
+
+                        LocationHelper.update({ tab: integrationSettingsTab }, 'partial');
                       }}
                     />
                   </div>
@@ -268,7 +264,7 @@ class Integrations extends React.Component<IntegrationsProps, IntegrationsState>
       .then(async (alertReceiveChannel: AlertReceiveChannel) => {
         await store.alertReceiveChannelStore.updateItems();
 
-        this.setSelectedAlertReceiveChannel(alertReceiveChannel.id);
+        this.setSelectedAlertReceiveChannel(alertReceiveChannel.id, true);
 
         this.setState({
           alertReceiveChannelToShowSettings: alertReceiveChannel.id,
@@ -315,7 +311,7 @@ class Integrations extends React.Component<IntegrationsProps, IntegrationsState>
       if (alertReceiveChannelId === store.selectedAlertReceiveChannel) {
         const searchResult = alertReceiveChannelStore.getSearchResult();
 
-        this.setSelectedAlertReceiveChannel(searchResult && searchResult[0]?.id);
+        this.setSelectedAlertReceiveChannel(searchResult && searchResult[0]?.id, true);
       }
     });
   };
@@ -345,7 +341,7 @@ class Integrations extends React.Component<IntegrationsProps, IntegrationsState>
   };
 
   handleAlertReceiveChannelSelect = (id: AlertReceiveChannel['id']) => {
-    this.setSelectedAlertReceiveChannel(id);
+    this.setSelectedAlertReceiveChannel(id, true);
   };
 }