Show mobile tab only if it's feature and the user has permissions (#961)

# What this PR does
- Show/Hide mobile app screen only if user has permission
- Show/Hide mobile app screen only for current user

## Which issue(s) this PR fixes

#926

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

@@ -7,7 +7,6 @@ import { useMediaQuery } from 'react-responsive';
 
 import { Tabs, TabsContent } from 'containers/UserSettings/parts';
 import { User as UserType } from 'models/user/user.types';
-import { AppFeature } from 'state/features';
 import { useStore } from 'state/useStore';
 import { BREAKPOINT_TABS } from 'utils/consts';
 
@@ -20,12 +19,13 @@ const cx = cn.bind(styles);
 interface UserFormProps {
   onHide: () => void;
   id: UserType['pk'] | 'new';
+  showMobileAppScreen: boolean;
   onCreate?: (data: UserType) => void;
   onUpdate?: () => void;
   tab?: UserSettingsTab;
 }
 
-const UserSettings = observer(({ id, onHide, tab = UserSettingsTab.UserInfo }: UserFormProps) => {
+const UserSettings = observer(({ id, showMobileAppScreen, onHide, tab = UserSettingsTab.UserInfo }: UserFormProps) => {
   const store = useStore();
   const { userStore, teamStore } = store;
 
@@ -54,17 +54,13 @@ const UserSettings = observer(({ id, onHide, tab = UserSettingsTab.UserInfo }: U
     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,
-    store.hasFeature(AppFeature.MobileApp),
-  ];
+  const [showNotificationSettingsTab, showSlackConnectionTab, showTelegramConnectionTab, showMobileAppVerificationTab] =
+    [
+      !isDesktopOrLaptop,
+      isCurrent && teamStore.currentTeam?.slack_team_identity && !storeUser.slack_user_identity,
+      isCurrent && !storeUser.telegram_configuration,
+      showMobileAppScreen,
+    ];
 
   return (
     <>
@@ -82,7 +78,7 @@ const UserSettings = observer(({ id, onHide, tab = UserSettingsTab.UserInfo }: U
             showNotificationSettingsTab={showNotificationSettingsTab}
             showSlackConnectionTab={showSlackConnectionTab}
             showTelegramConnectionTab={showTelegramConnectionTab}
-            showMobileAppVerificationTab={true}
+            showMobileAppVerificationTab={showMobileAppVerificationTab}
           />
           <TabsContent id={id} activeTab={activeTab} onTabChange={onTabChange} isDesktopOrLaptop={isDesktopOrLaptop} />
         </div>

grafana-plugin/src/pages/users/Users.tsx

@@ -21,6 +21,7 @@ import UserSettings from 'containers/UserSettings/UserSettings';
 import { WithPermissionControl } from 'containers/WithPermissionControl/WithPermissionControl';
 import { User as UserType } from 'models/user/user.types';
 import { pages } from 'pages';
+import { AppFeature } from 'state/features';
 import { PageProps, WithStoreProps } from 'state/types';
 import { withMobXProviderContext } from 'state/withStore';
 import LocationHelper from 'utils/LocationHelper';
@@ -116,7 +117,11 @@ class Users extends React.Component<UsersProps, UsersState> {
 
   render() {
     const { usersFilters, userPkToEdit, page, errorData } = this.state;
-    const { store, query } = this.props;
+    const {
+      store,
+      query,
+      query: { id },
+    } = this.props;
     const { userStore } = store;
 
     const columns = [
@@ -157,6 +162,8 @@ class Users extends React.Component<UsersProps, UsersState> {
       });
 
     const { count, results } = userStore.getSearchResult();
+    const showMobileAppScreen: boolean =
+      id !== undefined && id !== 'me' && id === userStore.currentUserPk && store.hasFeature(AppFeature.MobileApp);
 
     return (
       <PluginPage pageNav={pages['users'].getPageNav()}>
@@ -232,7 +239,13 @@ class Users extends React.Component<UsersProps, UsersState> {
                     />
                   )}
                 </div>
-                {userPkToEdit && <UserSettings id={userPkToEdit} onHide={this.handleHideUserSettings} />}
+                {userPkToEdit && (
+                  <UserSettings
+                    id={userPkToEdit}
+                    onHide={this.handleHideUserSettings}
+                    showMobileAppScreen={showMobileAppScreen}
+                  />
+                )}
               </div>
             </>
           )}