Fix unlink Slack and Telegram API calls (#4106)

# What this PR does

Fix unlink Slack and Telegram API calls

## Which issue(s) this PR closes

Closes https://github.com/grafana/oncall/issues/4102


## Checklist

- [ ] Unit, integration, and e2e (if applicable) tests updated
- [ ] Documentation added (or `pr:no public docs` PR label added if not
required)
- [ ] Added the relevant release notes label (see labels prefixed w/
`release:`). These labels dictate how your PR will
    show up in the autogenerated release notes.

grafana-plugin/src/containers/UserSettings/parts/connectors/Connectors.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 
 import { Legend } from '@grafana/ui';
+import { observer } from 'mobx-react';
 
 import { UserSettingsTab } from 'containers/UserSettings/UserSettings.types';
 import { ApiSchemas } from 'network/oncall-api/api.types';
@@ -19,7 +20,7 @@ interface ConnectorsProps {
   onTabChange: (tab: UserSettingsTab) => void;
 }
 
-export const Connectors: FC<ConnectorsProps> = (props) => {
+export const Connectors: FC<ConnectorsProps> = observer((props) => {
   const store = useStore();
   return (
     <>
@@ -32,4 +33,4 @@ export const Connectors: FC<ConnectorsProps> = (props) => {
       <ICalConnector {...props} />
     </>
   );
-};
+});

grafana-plugin/src/containers/UserSettings/parts/connectors/MobileAppConnector.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
 
 import { Button, InlineField } from '@grafana/ui';
+import { observer } from 'mobx-react';
 
 import { UserSettingsTab } from 'containers/UserSettings/UserSettings.types';
 import { ApiSchemas } from 'network/oncall-api/api.types';
@@ -11,7 +12,7 @@ interface MobileAppConnectorProps {
   onTabChange: (tab: UserSettingsTab) => void;
 }
 
-export const MobileAppConnector = (props: MobileAppConnectorProps) => {
+export const MobileAppConnector = observer((props: MobileAppConnectorProps) => {
   const { onTabChange, id } = props;
   const store = useStore();
   const { userStore } = store;
@@ -35,4 +36,4 @@ export const MobileAppConnector = (props: MobileAppConnectorProps) => {
       )}
     </InlineField>
   );
-};
+});

grafana-plugin/src/containers/UserSettings/parts/connectors/PhoneConnector.tsx

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 
 import { Alert, Button, HorizontalGroup, InlineField, Input, VerticalGroup } from '@grafana/ui';
 import cn from 'classnames/bind';
+import { observer } from 'mobx-react';
 
 import { Tag } from 'components/Tag/Tag';
 import { Text } from 'components/Text/Text';
@@ -21,7 +22,7 @@ interface PhoneConnectorProps {
   onTabChange: (tab: UserSettingsTab) => void;
 }
 
-export const PhoneConnector = (props: PhoneConnectorProps) => {
+export const PhoneConnector = observer((props: PhoneConnectorProps) => {
   const { id, onTabChange } = props;
 
   const store = useStore();
@@ -174,4 +175,4 @@ export const PhoneConnector = (props: PhoneConnectorProps) => {
       )}
     </div>
   );
-};
+});

grafana-plugin/src/containers/UserSettings/parts/connectors/SlackConnector.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 
 import { Button, HorizontalGroup, InlineField, Input } from '@grafana/ui';
+import { observer } from 'mobx-react';
 
 import { WithConfirm } from 'components/WithConfirm/WithConfirm';
 import { UserSettingsTab } from 'containers/UserSettings/UserSettings.types';
@@ -13,7 +14,7 @@ interface SlackConnectorProps {
   onTabChange: (tab: UserSettingsTab) => void;
 }
 
-export const SlackConnector = (props: SlackConnectorProps) => {
+export const SlackConnector = observer((props: SlackConnectorProps) => {
   const { id, onTabChange } = props;
 
   const store = useStore();
@@ -93,4 +94,4 @@ export const SlackConnector = (props: SlackConnectorProps) => {
       )}
     </>
   );
-};
+});

grafana-plugin/src/containers/UserSettings/parts/connectors/TelegramConnector.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
 
 import { Button, HorizontalGroup, InlineField, Input } from '@grafana/ui';
+import { observer } from 'mobx-react';
 
 import { WithConfirm } from 'components/WithConfirm/WithConfirm';
 import { UserSettingsTab } from 'containers/UserSettings/UserSettings.types';
@@ -12,7 +13,7 @@ interface TelegramConnectorProps {
   onTabChange: (tab: UserSettingsTab) => void;
 }
 
-export const TelegramConnector = (props: TelegramConnectorProps) => {
+export const TelegramConnector = observer((props: TelegramConnectorProps) => {
   const { id, onTabChange } = props;
 
   const store = useStore();
@@ -58,4 +59,4 @@ export const TelegramConnector = (props: TelegramConnectorProps) => {
       </InlineField>
     </div>
   );
-};
+});

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

@@ -129,12 +129,12 @@ export class UserStore {
   }
 
   async unlinkSlack(userPk: ApiSchemas['User']['pk']) {
-    await onCallApi().POST('/users/{id}/unlink_slack/', undefined);
+    await onCallApi().POST('/users/{id}/unlink_slack/', { params: { path: { id: userPk } } });
     await this.fetchItemById({ userPk });
   }
 
   async unlinkTelegram(userPk: ApiSchemas['User']['pk']) {
-    await onCallApi().POST('/users/{id}/unlink_telegram/', undefined);
+    await onCallApi().POST('/users/{id}/unlink_telegram/', { params: { path: { id: userPk } } });
     await this.fetchItemById({ userPk });
   }