hide mobile app verification tab in the user settings modal for unauthed users (#970)

CHANGELOG.md

@@ -5,7 +5,7 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## v1.2.0 (TBD)
+## v1.2.0 (2022-12-12)
 
 ### Added
 
@@ -21,6 +21,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Got 500 error when saving Outgoing Webhook ([#890](https://github.com/grafana/oncall/issues/890))
 - v1.0.13 helm chart - update the OnCall backend pods image pull policy to "Always" (and explicitly set tag to `latest`).
   This should resolve some recent issues experienced where the frontend/backend versions are not aligned.
+- Mobile App Verification tab in the user settings modal is now hidden for users that do not have proper
+  permissions to use it
 
 ### Changed
 

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

@@ -7,7 +7,9 @@ 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 { isUserActionAllowed, UserActions } from 'utils/authorization';
 import { BREAKPOINT_TABS } from 'utils/consts';
 
 import { UserSettingsTab } from './UserSettings.types';
@@ -19,13 +21,12 @@ 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, showMobileAppScreen, onHide, tab = UserSettingsTab.UserInfo }: UserFormProps) => {
+const UserSettings = observer(({ id, onHide, tab = UserSettingsTab.UserInfo }: UserFormProps) => {
   const store = useStore();
   const { userStore, teamStore } = store;
 
@@ -59,7 +60,7 @@ const UserSettings = observer(({ id, showMobileAppScreen, onHide, tab = UserSett
       !isDesktopOrLaptop,
       isCurrent && teamStore.currentTeam?.slack_team_identity && !storeUser.slack_user_identity,
       isCurrent && !storeUser.telegram_configuration,
-      showMobileAppScreen,
+      isCurrent && store.hasFeature(AppFeature.MobileApp) && isUserActionAllowed(UserActions.UserSettingsWrite),
     ];
 
   return (

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

@@ -21,7 +21,6 @@ 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';
@@ -117,11 +116,7 @@ class Users extends React.Component<UsersProps, UsersState> {
 
   render() {
     const { usersFilters, userPkToEdit, page, errorData } = this.state;
-    const {
-      store,
-      query,
-      query: { id },
-    } = this.props;
+    const { store, query } = this.props;
     const { userStore } = store;
 
     const columns = [
@@ -162,8 +157,6 @@ 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()}>
@@ -239,13 +232,7 @@ class Users extends React.Component<UsersProps, UsersState> {
                     />
                   )}
                 </div>
-                {userPkToEdit && (
-                  <UserSettings
-                    id={userPkToEdit}
-                    onHide={this.handleHideUserSettings}
-                    showMobileAppScreen={showMobileAppScreen}
-                  />
-                )}
+                {userPkToEdit && <UserSettings id={userPkToEdit} onHide={this.handleHideUserSettings} />}
               </div>
             </>
           )}