Fix: permissions tab UI (#815)

* rename permissions tab

* update missing permissions message

* add sign in message for permissions not found

* add actions and reducers

* create openPermissionsPanel function

* format permissions label message

src/app/services/actions/permissions-panel-action-creator.ts

@@ -0,0 +1,8 @@
+import { PERMISSIONS_PANEL_OPEN } from "../redux-constants";
+
+export function togglePermissionsPanel(open: boolean): any {
+    return {
+        type: PERMISSIONS_PANEL_OPEN,
+        response: open,
+    };
+}

src/app/services/reducers/index.ts

@@ -4,6 +4,7 @@ import { authToken, consentedScopes } from './auth-reducers';
 import { autoComplete } from './autocomplete-reducer';
 import { devxApi } from './devxApi-reducers';
 import { dimensions } from './dimensions-reducers';
+import { permissionsPanelOpen } from './permissions-panel-reducer';
 import { graphExplorerMode } from './graph-explorer-mode-reducer';
 import { scopes } from './permissions-reducer';
 import { profile } from './profile-reducer';
@@ -39,5 +40,6 @@ export default combineReducers({
   snippets,
   termsOfUse,
   theme,
-  dimensions
+  dimensions,
+  permissionsPanelOpen
 });

src/app/services/reducers/permissions-panel-reducer.ts

@@ -0,0 +1,11 @@
+import { IAction } from "../../../types/action";
+import { PERMISSIONS_PANEL_OPEN } from "../redux-constants";
+
+export function permissionsPanelOpen(state: boolean = false, action: IAction): any {
+    switch (action.type) {
+        case PERMISSIONS_PANEL_OPEN:
+            return !!action.response;
+        default:
+            return state;
+    }
+}

src/app/services/redux-constants.ts

@@ -39,4 +39,5 @@ export const AUTOCOMPLETE_FETCH_SUCCESS = 'AUTOCOMPLETE_FETCH_SUCCESS';
 export const AUTOCOMPLETE_FETCH_ERROR = 'AUTOCOMPLETE_FETCH_ERROR';
 export const AUTOCOMPLETE_FETCH_PENDING = 'AUTOCOMPLETE_FETCH_PENDING';
 export const RESIZE_SUCCESS = 'RESIZE_SUCCESS';
-export const RESPONSE_EXPANDED = 'RESPONSE_EXPANDED';
+export const RESPONSE_EXPANDED = 'RESPONSE_EXPANDED';
+export const PERMISSIONS_PANEL_OPEN = 'PERMISSIONS_PANEL_OPEN';

src/app/views/query-runner/request/Request.tsx

@@ -15,6 +15,8 @@ import { telemetry } from '../../../../telemetry';
 import { Mode } from '../../../../types/enums';
 import { IRequestComponent } from '../../../../types/request';
 import { setDimensions } from '../../../services/actions/dimensions-action-creator';
+import { sanitizeQueryUrl } from '../../../utils/query-url-sanitization';
+import { translateMessage } from '../../../utils/translate-messages';
 import { convertVhToPx } from '../../common/dimensions-adjustment';
 import { Monaco } from '../../common/monaco/Monaco';
 import { Auth } from './auth';
@@ -64,7 +66,7 @@ export class Request extends Component<IRequestComponent, any> {
         itemIcon='AzureKeyVault'
         itemKey='modify-permissions'
         onRenderItemLink={this.getTooltipDisplay}
-        title={messages['modify permissions']}
+        title={translateMessage('permissions preview')}
         headerText={messages['modify permissions']}
       >
         <Permission />

src/app/views/query-runner/request/permissions/Permission.styles.ts

@@ -23,11 +23,13 @@ export const permissionStyles = (theme: ITheme) => {
     },
     permissionLength: {
       fontWeight: 'bold',
-      marginBottom: 5
+      marginBottom: 5,
+      paddingLeft: 10
     },
     permissionText: {
       fontSize: FontSizes.small,
-      marginBottom: 5
+      marginBottom: 5,
+      paddingLeft: 10
     },
     toolTipHost: {
       root: {
@@ -41,6 +43,12 @@ export const permissionStyles = (theme: ITheme) => {
     checkIcon: {
       fontSize: theme.fonts.large,
       color: theme.palette.accent
+    },
+    permissionLabel: {
+      marginTop: 10,
+      paddingLeft: 10,
+      paddingRight: 20,
+      minHeight: 200
     }
   };
 };

src/app/views/query-runner/request/permissions/TabList.tsx

@@ -1,8 +1,9 @@
-import { DetailsList, DetailsListLayoutMode, IColumn, Label, SelectionMode } from 'office-ui-fabric-react';
+import { DetailsList, DetailsListLayoutMode, IColumn, Label, Link, SelectionMode } from 'office-ui-fabric-react';
 import React, { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { IPermission } from '../../../../../types/permissions';
+import { togglePermissionsPanel } from '../../../../services/actions/permissions-panel-action-creator';
 
 import { setConsentedStatus } from './util';
 
@@ -15,6 +16,7 @@ interface ITabList {
 }
 
 const TabList = ({ columns, classes, renderItemColumn, renderDetailsHeader, maxHeight }: ITabList) => {
+  const dispatch = useDispatch();
   const { consentedScopes, scopes, authToken } = useSelector((state: any) => state);
   const permissions: IPermission[] = scopes.hasUrl ? scopes.data : [];
   const tokenPresent = !!authToken;
@@ -23,10 +25,36 @@ const TabList = ({ columns, classes, renderItemColumn, renderDetailsHeader, maxH
     setConsentedStatus(tokenPresent, permissions, consentedScopes);
   }, [scopes.data, consentedScopes]);
 
-  if (!scopes.hasUrl) {
+  const openPermissionsPanel = () => {
+    dispatch(togglePermissionsPanel(true));
+  }
+
+  const displayNoPermissionsFoundMessage = () => {
+    return (<Label className={classes.permissionLabel}>
+      <FormattedMessage id='permissions not found in permissions tab' />
+      <Link onClick={openPermissionsPanel}>
+        <FormattedMessage id='open permissions panel' />
+      </Link>
+      <FormattedMessage id='permissions list' />
+    </Label>);
+  }
+
+  const displayNotSignedInMessage = () => {
+    return (<Label className={classes.permissionLabel}>
+      <FormattedMessage id='sign in to view a list of all permissions' />
+    </Label>)
+  }
+
+  if (tokenPresent && !scopes.hasUrl) {
     return displayNoPermissionsFoundMessage();
   }
 
+  if (!tokenPresent && !scopes.hasUrl) {
+    return displayNotSignedInMessage();
+  }
+
+
+
   return (
     <>
       <Label className={classes.permissionLength}>
@@ -52,14 +80,6 @@ const TabList = ({ columns, classes, renderItemColumn, renderDetailsHeader, maxH
 
 export default TabList;
 
-function displayNoPermissionsFoundMessage() {
-  return (<Label style={{
-    display: 'flex',
-    width: '100%',
-    minHeight: '200px',
-    justifyContent: 'center',
-    alignItems: 'center'
-  }}>
-    <FormattedMessage id='permissions not found' />
-  </Label>);
-}
+
+
+

src/app/views/settings/Settings.tsx

@@ -23,17 +23,17 @@ import { AppTheme } from '../../../types/enums';
 import { ISettingsProps } from '../../../types/settings';
 import { signOut } from '../../services/actions/auth-action-creators';
 import { consentToScopes } from '../../services/actions/permissions-action-creator';
+import { togglePermissionsPanel } from '../../services/actions/permissions-panel-action-creator';
 import { changeTheme } from '../../services/actions/theme-action-creator';
 import { Permission } from '../query-runner/request/permissions';
 
 
 function Settings(props: ISettingsProps) {
   const dispatch = useDispatch();
-
+  const { permissionsPanelOpen } = useSelector((state: any) => state);
   const [themeChooserDialogHidden, hideThemeChooserDialog] = useState(true);
   const [items, setItems] = useState([]);
   const [selectedPermissions, setSelectedPermissions] = useState([]);
-  const [panelIsOpen, setPanelState] = useState(false);
 
   const {
     intl: { messages }
@@ -72,7 +72,7 @@ function Settings(props: ISettingsProps) {
           iconProps: {
             iconName: 'AzureKeyVault',
           },
-          onClick: () => togglePermissionsPanel(),
+          onClick: () => changePanelState(),
         },
         {
           key: 'sign-out',
@@ -114,10 +114,10 @@ function Settings(props: ISettingsProps) {
       });
   };
 
-  const togglePermissionsPanel = () => {
-    let open = !!panelIsOpen;
+  const changePanelState = () => {
+    let open = !!permissionsPanelOpen;
     open = !open;
-    setPanelState(open);
+    dispatch(togglePermissionsPanel(open));
     setSelectedPermissions([]);
     trackSelectPermissionsButtonClickEvent();
   };
@@ -171,7 +171,7 @@ function Settings(props: ISettingsProps) {
         >
           <FormattedMessage id='Consent' />
         </PrimaryButton>
-        <DefaultButton onClick={() => togglePermissionsPanel()}>
+        <DefaultButton onClick={() => changePanelState()}>
           <FormattedMessage id='Cancel' />
         </DefaultButton>
       </div>
@@ -241,8 +241,8 @@ function Settings(props: ISettingsProps) {
         </Dialog>
 
         <Panel
-          isOpen={panelIsOpen}
-          onDismiss={() => togglePermissionsPanel()}
+          isOpen={permissionsPanelOpen}
+          onDismiss={() => changePanelState()}
           type={PanelType.medium}
           hasCloseButton={true}
           headerText={messages.Permissions}

src/messages/GE.json

@@ -65,7 +65,7 @@
   "Key": "Key",
   "Value": "Value",
   "Login to try this request": "Login to try this request",
-  "modify permissions": "Modify permissions",
+  "modify permissions": "Modify permissions (Preview)",
   "Save changes": "Save changes",
   "To change permissions, you will need to log-in again.": "To change permissions, you will need to log-in again.",
   "all the items in my drive": "all the items in my drive",
@@ -334,7 +334,10 @@
   "Sidebar minimized": "Sidebar minimized",
   "Sidebar maximized": "Sidebar maximized",
   "Response area expanded": "Response area expanded",
-  "Close expanded response area": "Close expanded response area"
-
-}
-
+  "Close expanded response area": "Close expanded response area",
+  "permissions not found in permissions tab": "Permissions for the query are missing on this tab. ",
+  "permissions preview": "This feature is in preview and might not currently show all permissions for some queries.",
+  "sign in to view a list of all permissions": "Permissions for the query are missing on this tab. Sign in to use the Select permissions option in the settings icon next to your profile to see the full list of Microsoft Graph permissions and select the permission(s) you want and consent to them from there.",
+  "open permissions panel": "Open the permissions panel",
+  "permissions list": " to see the full list of Microsoft Graph permissions and select the permission(s) you want and consent to them from there."
+}