From 635168afb90204ba5f033f9a531d7d786d737f2d Mon Sep 17 00:00:00 2001
From: Joey Orlando <joey.orlando@grafana.com>
Date: Fri, 9 Dec 2022 12:53:20 +0100
Subject: [PATCH] hide mobile app verification tab in the user settings modal
 for unauthed users (#970)

---
 CHANGELOG.md                                    |  4 +++-
 .../containers/UserSettings/UserSettings.tsx    |  7 ++++---
 grafana-plugin/src/pages/users/Users.tsx        | 17 ++---------------
 3 files changed, 9 insertions(+), 19 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d7c8ead8..2e261c31 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/grafana-plugin/src/containers/UserSettings/UserSettings.tsx b/grafana-plugin/src/containers/UserSettings/UserSettings.tsx
index 2e237915..b66aa7de 100644
--- a/grafana-plugin/src/containers/UserSettings/UserSettings.tsx
+++ b/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 (
diff --git a/grafana-plugin/src/pages/users/Users.tsx b/grafana-plugin/src/pages/users/Users.tsx
index d61fee49..924ad5a0 100644
--- a/grafana-plugin/src/pages/users/Users.tsx
+++ b/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>
             </>
           )}