#1032 - Modal set to modal-wide, renamed AppVerification (#1123)

# What this PR does

Fix for #1032 
- Set `UserSettings` popup to `modal-wide` all the time
- Renamed `AppVerification` to `AppConnection` both in file naming and
UI
- Make telegram tab take `width: 100%` inside modal

grafana-plugin/src/containers/MobileAppConnection/MobileAppConnection.test.tsx

@@ -8,7 +8,7 @@ import { User } from 'models/user/user.types';
 import { RootStore } from 'state';
 import { useStore as useStoreOriginal } from 'state/useStore';
 
-import MobileAppVerification from './MobileAppVerification';
+import MobileAppConnection from './MobileAppConnection';
 
 jest.mock('state/useStore');
 
@@ -36,7 +36,7 @@ const mockUseStore = (rest?: any, connected = false) => {
 const USER_PK = '8585';
 const BACKEND = 'MOBILE_APP';
 
-describe('MobileAppVerification', () => {
+describe('MobileAppConnection', () => {
   beforeEach(() => {
     loadUserMock.mockClear();
   });
@@ -46,7 +46,7 @@ describe('MobileAppVerification', () => {
       sendBackendConfirmationCode: jest.fn().mockResolvedValueOnce('dfd'),
     });
 
-    const component = render(<MobileAppVerification userPk={USER_PK} />);
+    const component = render(<MobileAppConnection userPk={USER_PK} />);
     expect(component.container).toMatchSnapshot();
 
     await waitFor(() => {
@@ -63,7 +63,7 @@ describe('MobileAppVerification', () => {
       true
     );
 
-    const component = render(<MobileAppVerification userPk={USER_PK} />);
+    const component = render(<MobileAppConnection userPk={USER_PK} />);
     expect(component.container).toMatchSnapshot();
 
     await waitFor(() => {
@@ -76,7 +76,7 @@ describe('MobileAppVerification', () => {
       sendBackendConfirmationCode: jest.fn().mockRejectedValueOnce('dfd'),
     });
 
-    const component = render(<MobileAppVerification userPk={USER_PK} />);
+    const component = render(<MobileAppConnection userPk={USER_PK} />);
     await screen.findByText(/.*error fetching your QR code.*/);
 
     await waitFor(() => {
@@ -92,7 +92,7 @@ describe('MobileAppVerification', () => {
       sendBackendConfirmationCode: jest.fn().mockResolvedValueOnce('dfd'),
     });
 
-    const component = render(<MobileAppVerification userPk={USER_PK} />);
+    const component = render(<MobileAppConnection userPk={USER_PK} />);
     expect(component.container).toMatchSnapshot();
 
     await waitFor(() => {
@@ -110,7 +110,7 @@ describe('MobileAppVerification', () => {
       true
     );
 
-    const component = render(<MobileAppVerification userPk={USER_PK} />);
+    const component = render(<MobileAppConnection userPk={USER_PK} />);
     const button = await screen.findByRole('button');
 
     // click the disconnect button, which opens the modal
@@ -138,7 +138,7 @@ describe('MobileAppVerification', () => {
       true
     );
 
-    const component = render(<MobileAppVerification userPk={USER_PK} />);
+    const component = render(<MobileAppConnection userPk={USER_PK} />);
     const button = await screen.findByRole('button');
 
     // click the disconnect button, which opens the modal
@@ -169,7 +169,7 @@ describe('MobileAppVerification', () => {
       true
     );
 
-    const component = render(<MobileAppVerification userPk={USER_PK} />);
+    const component = render(<MobileAppConnection userPk={USER_PK} />);
     const button = await screen.findByTestId('test__disconnect');
 
     // click the disconnect button, which opens the modal
@@ -198,7 +198,7 @@ describe('MobileAppVerification', () => {
       false
     );
 
-    render(<MobileAppVerification userPk={USER_PK} />);
+    render(<MobileAppConnection userPk={USER_PK} />);
 
     await waitFor(
       () => {
@@ -217,7 +217,7 @@ describe('MobileAppVerification', () => {
       true
     );
 
-    render(<MobileAppVerification userPk={USER_PK} />);
+    render(<MobileAppConnection userPk={USER_PK} />);
     const button = await screen.findByRole('button');
 
     loadUserMock.mockClear();

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

@@ -10,7 +10,7 @@ import Text from 'components/Text/Text';
 import { User } from 'models/user/user.types';
 import { useStore } from 'state/useStore';
 
-import styles from './MobileAppVerification.module.scss';
+import styles from './MobileAppConnection.module.scss';
 import DisconnectButton from './parts/DisconnectButton/DisconnectButton';
 import DownloadIcons from './parts/DownloadIcons';
 import QRCode from './parts/QRCode/QRCode';
@@ -28,7 +28,7 @@ const INTERVAL_QUEUE_QR = process.env.MOBILE_APP_QR_INTERVAL_QUEUE
 const INTERVAL_POLLING = 5000;
 const BACKEND = 'MOBILE_APP';
 
-const MobileAppVerification = observer(({ userPk }: Props) => {
+const MobileAppConnection = observer(({ userPk }: Props) => {
   const { userStore } = useStore();
 
   const isMounted = useRef(false);
@@ -233,4 +233,4 @@ function QRLoading() {
   );
 }
 
-export default MobileAppVerification;
+export default MobileAppConnection;

grafana-plugin/src/containers/MobileAppConnection/__snapshots__/MobileAppConnection.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`MobileAppVerification if we disconnect the app, it disconnects and fetches a new QR code 1`] = `
+exports[`MobileAppConnection if we disconnect the app, it disconnects and fetches a new QR code 1`] = `
 <div>
   <div
     class="container"
@@ -2331,7 +2331,7 @@ exports[`MobileAppVerification if we disconnect the app, it disconnects and fetc
 </div>
 `;
 
-exports[`MobileAppVerification it shows a QR code if the app isn't already connected 1`] = `
+exports[`MobileAppConnection it shows a QR code if the app isn't already connected 1`] = `
 <div>
   <div
     class="container"
@@ -2430,7 +2430,7 @@ exports[`MobileAppVerification it shows a QR code if the app isn't already conne
 </div>
 `;
 
-exports[`MobileAppVerification it shows a loading message if it is currently disconnecting 1`] = `
+exports[`MobileAppConnection it shows a loading message if it is currently disconnecting 1`] = `
 <div>
   <div
     class="container"
@@ -2529,7 +2529,7 @@ exports[`MobileAppVerification it shows a loading message if it is currently dis
 </div>
 `;
 
-exports[`MobileAppVerification it shows a loading message if it is currently fetching the QR code 1`] = `
+exports[`MobileAppConnection it shows a loading message if it is currently fetching the QR code 1`] = `
 <div>
   <div
     class="container"
@@ -2628,7 +2628,7 @@ exports[`MobileAppVerification it shows a loading message if it is currently fet
 </div>
 `;
 
-exports[`MobileAppVerification it shows a message when the mobile app is already connected 1`] = `
+exports[`MobileAppConnection it shows a message when the mobile app is already connected 1`] = `
 <div>
   <div
     class="container"
@@ -2774,7 +2774,7 @@ exports[`MobileAppVerification it shows a message when the mobile app is already
 </div>
 `;
 
-exports[`MobileAppVerification it shows an error message if there was an error disconnecting the mobile app 1`] = `
+exports[`MobileAppConnection it shows an error message if there was an error disconnecting the mobile app 1`] = `
 <div>
   <div
     class="container"
@@ -2864,7 +2864,7 @@ exports[`MobileAppVerification it shows an error message if there was an error d
 </div>
 `;
 
-exports[`MobileAppVerification it shows an error message if there was an error fetching the QR code 1`] = `
+exports[`MobileAppConnection it shows an error message if there was an error fetching the QR code 1`] = `
 <div>
   <div
     class="container"

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

@@ -49,25 +49,18 @@ const UserSettings = observer(({ id, onHide, tab = UserSettingsTab.UserInfo }: U
     setActiveTab(tab);
   }, []);
 
-  const isModalWide =
-    !isDesktopOrLaptop ||
-    activeTab === UserSettingsTab.UserInfo ||
-    activeTab === UserSettingsTab.PhoneVerification ||
-    activeTab === UserSettingsTab.MobileAppVerification;
-
-  const [showNotificationSettingsTab, showSlackConnectionTab, showTelegramConnectionTab, showMobileAppVerificationTab] =
-    [
-      !isDesktopOrLaptop,
-      isCurrent && teamStore.currentTeam?.slack_team_identity && !storeUser.slack_user_identity,
-      isCurrent && !storeUser.telegram_configuration,
-      isCurrent && store.hasFeature(AppFeature.MobileApp) && isUserActionAllowed(UserActions.UserSettingsWrite),
-    ];
+  const [showNotificationSettingsTab, showSlackConnectionTab, showTelegramConnectionTab, showMobileAppConnectionTab] = [
+    !isDesktopOrLaptop,
+    isCurrent && teamStore.currentTeam?.slack_team_identity && !storeUser.slack_user_identity,
+    isCurrent && !storeUser.telegram_configuration,
+    isCurrent && store.hasFeature(AppFeature.MobileApp) && isUserActionAllowed(UserActions.UserSettingsWrite),
+  ];
 
   return (
     <>
       <Modal
         title={`${storeUser.username}`}
-        className={cx('modal', { 'modal-wide': isModalWide })}
+        className={cx('modal', 'modal-wide')}
         isOpen
         closeOnEscape={false}
         onDismiss={onHide}
@@ -79,7 +72,7 @@ const UserSettings = observer(({ id, onHide, tab = UserSettingsTab.UserInfo }: U
             showNotificationSettingsTab={showNotificationSettingsTab}
             showSlackConnectionTab={showSlackConnectionTab}
             showTelegramConnectionTab={showTelegramConnectionTab}
-            showMobileAppVerificationTab={showMobileAppVerificationTab}
+            showMobileAppConnectionTab={showMobileAppConnectionTab}
           />
           <TabsContent id={id} activeTab={activeTab} onTabChange={onTabChange} isDesktopOrLaptop={isDesktopOrLaptop} />
         </div>

grafana-plugin/src/containers/UserSettings/UserSettings.types.ts

@@ -6,7 +6,7 @@ export enum UserSettingsTab {
   PhoneVerification,
   SlackInfo,
   TelegramInfo,
-  MobileAppVerification,
+  MobileAppConnection,
 }
 
 export interface UserFormData extends Partial<User> {

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

@@ -21,7 +21,7 @@ const SlackConnector = (props: SlackConnectorProps) => {
   const store = useStore();
 
   const handleClickConfirmMobileAppButton = useCallback(() => {
-    onTabChange(UserSettingsTab.MobileAppVerification);
+    onTabChange(UserSettingsTab.MobileAppConnection);
   }, [onTabChange]);
 
   if (!store.hasFeature(AppFeature.MobileApp)) {

grafana-plugin/src/containers/UserSettings/parts/index.tsx

@@ -5,7 +5,7 @@ import cn from 'classnames/bind';
 import { observer } from 'mobx-react';
 
 import Block from 'components/GBlock/Block';
-import MobileAppVerification from 'containers/MobileAppVerification/MobileAppVerification';
+import MobileAppConnection from 'containers/MobileAppConnection/MobileAppConnection';
 import { UserSettingsTab } from 'containers/UserSettings/UserSettings.types';
 import { SlackTab } from 'containers/UserSettings/parts/tabs//SlackTab/SlackTab';
 import CloudPhoneSettings from 'containers/UserSettings/parts/tabs/CloudPhoneSettings/CloudPhoneSettings';
@@ -25,7 +25,7 @@ interface TabsProps {
   activeTab: UserSettingsTab;
   onTabChange: (tab: UserSettingsTab) => void;
   showNotificationSettingsTab: boolean;
-  showMobileAppVerificationTab: boolean;
+  showMobileAppConnectionTab: boolean;
   showSlackConnectionTab: boolean;
   showTelegramConnectionTab: boolean;
 }
@@ -34,7 +34,7 @@ export const Tabs = ({
   activeTab,
   onTabChange,
   showNotificationSettingsTab,
-  showMobileAppVerificationTab,
+  showMobileAppConnectionTab,
   showSlackConnectionTab,
   showTelegramConnectionTab,
 }: TabsProps) => {
@@ -69,12 +69,12 @@ export const Tabs = ({
         key={UserSettingsTab.PhoneVerification}
         onChangeTab={getTabClickHandler(UserSettingsTab.PhoneVerification)}
       />
-      {showMobileAppVerificationTab && (
+      {showMobileAppConnectionTab && (
         <Tab
-          active={activeTab === UserSettingsTab.MobileAppVerification}
-          label="Mobile App Verification"
-          key={UserSettingsTab.MobileAppVerification}
-          onChangeTab={getTabClickHandler(UserSettingsTab.MobileAppVerification)}
+          active={activeTab === UserSettingsTab.MobileAppConnection}
+          label="Mobile App Connection"
+          key={UserSettingsTab.MobileAppConnection}
+          onChangeTab={getTabClickHandler(UserSettingsTab.MobileAppConnection)}
         />
       )}
       {showSlackConnectionTab && (
@@ -134,7 +134,7 @@ export const TabsContent = observer(({ id, activeTab, onTabChange, isDesktopOrLa
           <PhoneVerification userPk={id} />
         ))}
       {/* TODO: we should probably hide this tab when a user (ie. Admin) is viewing the user settings for another user. Would it make sense for an Admin to be able to link their mobile app to another user's profile */}
-      {activeTab === UserSettingsTab.MobileAppVerification && <MobileAppVerification userPk={id} />}
+      {activeTab === UserSettingsTab.MobileAppConnection && <MobileAppConnection userPk={id} />}
       {activeTab === UserSettingsTab.SlackInfo && <SlackTab />}
       {activeTab === UserSettingsTab.TelegramInfo && <TelegramInfo />}
     </TabContent>

grafana-plugin/src/containers/UserSettings/parts/tabs/TelegramInfo/TelegramInfo.tsx

@@ -39,13 +39,6 @@ const TelegramInfo = observer((_props: TelegramInfoProps) => {
     <>
       {telegramConfigured || !store.hasFeature(AppFeature.LiveSettings) ? (
         <VerticalGroup>
-          {/* <Text.Title level={5}>Connect personal Telegram</Text.Title>
-          <Block bordered withBackground className={cx('automatic-connect-telegram-block')}>
-            <Text type="secondary">Connect Telegram automatically</Text>
-            <a href={`${botLink}/?start=${verificationCode}`} target="_blank" rel="noreferrer">
-              <Button size="sm">Connect account</Button>
-            </a>
-          </Block> */}
           <Text.Title level={5}>Manual connection</Text.Title>
 
           <Text type="secondary">
@@ -79,7 +72,7 @@ const TelegramInfo = observer((_props: TelegramInfoProps) => {
       ) : (
         <VerticalGroup spacing="lg">
           <Text.Title level={2}>Connect Telegram workspace</Text.Title>
-          <Block bordered withBackground className={cx('telegram-infoblock')}>
+          <Block bordered withBackground className={cx('telegram-infoblock', 'u-width-100')}>
             <VerticalGroup align="center" spacing="lg">
               <TelegramColorIcon />
               <Text>You can manage alert groups in your team Telegram channel or from personal direct messages. </Text>