Feature: Add Graph Explorer header (#1682)

* Task: page layout (#1683) * Task: Profile callout styles (#1686) * Task: Extend sidebar content space (#1709) * Fix: panel overlay (#1714) * remove scrollbar from menu (#1717) * Fix: align right header items (#1720) * remove flex-wrap property (#1737) * Task: Move permissions button (#1755) * Task: Increase help and settings box sizes (#1756) * fix auth icon size (#1759) * Fix: Restore permissions styles (#1761) * Limits sidebar resize (#1769) * Task: tenant name ellipsis (#1799) * Revert "Task: tenant name ellipsis (#1799)" (#1818)
microsoftgraph · Jun 9, 2022 · 39b8bcc · 39b8bcc
1 parent 55d2228
commit 39b8bcc
Show file tree

Hide file tree

Showing 42 changed files with 1,143 additions and 737 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
                 "@babel/core": "7.17.9",
                 "@babel/runtime": "7.18.3",
                 "@fluentui/react": "8.72.1",
+                "@fluentui/react-icons-mdl2": "1.3.8",
                 "@microsoft/applicationinsights-react-js": "3.3.4",
                 "@microsoft/applicationinsights-web": "2.7.6",
                 "@microsoft/microsoft-graph-client": "3.0.2",

diff --git a/src/app/services/actions/profile-action-creators.ts b/src/app/services/actions/profile-action-creators.ts
@@ -7,14 +7,14 @@ import {
   BETA_USER_INFO_URL,
   DEFAULT_USER_SCOPES,
   USER_INFO_URL,
+  USER_ORGANIZATION_URL,
   USER_PICTURE_URL
 } from '../graph-constants';
 import {
   PROFILE_REQUEST_ERROR,
   PROFILE_REQUEST_SUCCESS
 } from '../redux-constants';
 import { makeGraphRequest, parseResponse } from './query-action-creator-util';
-import { queryRunningStatus } from './query-loading-action-creators';
 
 interface IBetaProfile {
   ageGroup: number;
@@ -54,13 +54,13 @@ const query: IQuery = {
 
 export function getProfileInfo(): Function {
   return async (dispatch: Function) => {
-    dispatch(queryRunningStatus(true));
     try {
       const profile: IUser = await getProfileInformation();
       const { profileType, ageGroup } = await getBetaProfile();
       profile.profileType = profileType;
       profile.ageGroup = ageGroup;
       profile.profileImageUrl = await getProfileImage();
+      profile.tenant= await getTenantInfo(profileType);
       dispatch(profileRequestSuccess(profile));
     } catch (error) {
       dispatch(profileRequestError({ error }));
@@ -75,7 +75,8 @@ export async function getProfileInformation(): Promise<IUser> {
     emailAddress: '',
     profileImageUrl: '',
     profileType: ACCOUNT_TYPE.UNDEFINED,
-    ageGroup: 0
+    ageGroup: 0,
+    tenant: ''
   };
   try {
     query.sampleUrl = USER_INFO_URL;
@@ -148,3 +149,19 @@ export async function getProfileResponse(): Promise<IProfileResponse> {
     response
   };
 }
+
+export async function getTenantInfo(profileType: ACCOUNT_TYPE) {
+  if(profileType===ACCOUNT_TYPE.AAD) {
+    try{
+      query.sampleUrl = USER_ORGANIZATION_URL;
+      const { userInfo: tenant } = await getProfileResponse();
+      return  tenant.value[0]?.displayName;
+    } catch (error: any) {
+      return '';
+    }
+  }
+  if(profileType===ACCOUNT_TYPE.MSA) {
+    return 'Personal';
+  }
+  return '';
+}
diff --git a/src/app/services/graph-constants.ts b/src/app/services/graph-constants.ts
@@ -26,3 +26,4 @@ export const ADAPTIVE_CARD_URL =
 export const GRAPH_TOOOLKIT_EXAMPLE_URL = 'https://mgt.dev/?path=/story';
 export const MOZILLA_CORS_DOCUMENTATION_LINK =
   'https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS';
+export const USER_ORGANIZATION_URL = `${GRAPH_URL}/v1.0/organization`;
diff --git a/src/app/services/reducers/dimensions-reducers.ts b/src/app/services/reducers/dimensions-reducers.ts
@@ -5,11 +5,11 @@ import { RESIZE_SUCCESS } from '../redux-constants';
 const initialState: IDimensions = {
   request: {
     width: '100%',
-    height: '40%'
+    height: '38%'
   },
   response: {
     width: '100%',
-    height: '60%'
+    height: '50%'
   },
   sidebar: {
     width: '26%',

diff --git a/src/app/views/App.styles.ts b/src/app/views/App.styles.ts
@@ -6,10 +6,10 @@ export const appStyles = (theme: ITheme) => {
       background: theme.semanticColors.bodyBackground,
       color: theme.semanticColors.bodyText,
       paddingTop: theme.spacing.s1,
-      width: '100%',
       height: '100%',
       paddingRight: '15px',
       paddingLeft: '4px',
+      paddingBottom: '5px',
       marginLeft: 'auto',
       marginRight: 'auto'
     },
@@ -24,13 +24,16 @@ export const appStyles = (theme: ITheme) => {
     sidebar: {
       background: theme.palette.neutralLighter,
       paddingRight: 10,
-      marginRight: 10
+      paddingLeft: 10,
+      marginRight: 10,
+      marginBottom: 9
     },
     sidebarMini: {
       background: theme.palette.neutralLighter,
       maxWidth: '65px',
       minWidth: '55px',
-      padding: 10
+      padding: 10,
+      marginBottom: 9
     },
     layoutExtra: {
       minWidth: '95%',
@@ -69,7 +72,9 @@ export const appStyles = (theme: ITheme) => {
       marginTop: 5
     },
     statusAreaFullScreen: {
-      marginTop: 10
+      marginTop: 6,
+      position: 'relative',
+      bottom: 0
     },
     vResizeHandle: {
       zIndex: 1,

diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx
@@ -1,4 +1,4 @@
-import { Announced, getTheme, IStackTokens, ITheme, styled } from '@fluentui/react';
+import { Announced, getTheme, ITheme, styled } from '@fluentui/react';
 import { Resizable } from 're-resizable';
 import React, { Component } from 'react';
 import { injectIntl } from 'react-intl';
@@ -24,24 +24,18 @@ import { GRAPH_URL } from '../services/graph-constants';
 import { parseSampleUrl } from '../utils/sample-url-generation';
 import { substituteTokens } from '../utils/token-helpers';
 import { translateMessage } from '../utils/translate-messages';
-import {
-  appTitleDisplayOnFullScreen,
-  appTitleDisplayOnMobileScreen
-} from './app-sections/AppTitle';
 import { headerMessaging } from './app-sections/HeaderMessaging';
 import { StatusMessages, TermsOfUseMessage } from './app-sections';
 import { appStyles } from './App.styles';
-import { Authentication } from './authentication';
 import { classNames } from './classnames';
 import { createShareLink } from './common/share';
 import { QueryResponse } from './query-response';
 import { QueryRunner } from './query-runner';
 import { parse } from './query-runner/util/iframe-message-parser';
-import { Settings } from './settings';
 import { Sidebar } from './sidebar/Sidebar';
-import { FeedbackButton } from './app-sections/FeedbackButton';
+import { MainHeader } from './main-header/MainHeader';
 
-interface IAppProps {
+export interface IAppProps {
   theme?: ITheme;
   styles?: object;
   intl: any;
@@ -295,30 +289,6 @@ class App extends Component<IAppProps, IAppState> {
 
   };
 
-  public displayAuthenticationSection = (minimised: boolean) => {
-    return (
-      <div
-        style={{
-          display: minimised ? 'block' : 'flex',
-          justifyContent: minimised ? '' : 'center',
-          alignItems: minimised ? '' : 'center',
-          marginLeft: minimised ? '' : '-0.9em'
-        }}>
-        <div className={minimised ? '' : 'col-9'}>
-          <Authentication />
-        </div>
-        {minimised &&
-          <div className={minimised ? '' : 'col-2'} style={{ position: 'relative', left: '-9px' }}>
-            <FeedbackButton />
-          </div>
-        }
-        <div className={minimised ? '' : 'col-2'}>
-          <Settings />
-        </div>
-      </div>
-    );
-  };
-
   private setSidebarProperties() {
     const { sidebarProperties } = this.props;
     const properties = { ...sidebarProperties };
@@ -409,11 +379,6 @@ class App extends Component<IAppProps, IAppState> {
       mobileScreen, showSidebar
     });
 
-    const stackTokens: IStackTokens = {
-      childrenGap: 10,
-      padding: 10
-    };
-
     if (mobileScreen) {
       layout = sidebarWidth = 'ms-Grid-col ms-sm12';
       sideWidth = '100%';
@@ -431,6 +396,11 @@ class App extends Component<IAppProps, IAppState> {
       // @ts-ignore
       <ThemeContext.Provider value={this.props.appTheme}>
         <div className={`ms-Grid ${classes.app}`} style={{ paddingLeft: mobileScreen && '15px' }}>
+          <MainHeader
+            minimised={minimised}
+            toggleSidebar={this.toggleSidebar}
+            mobileScreen={mobileScreen}
+          />
           <Announced
             message={
               !showSidebar
@@ -443,7 +413,6 @@ class App extends Component<IAppProps, IAppState> {
             marginRight: showSidebar || (graphExplorerMode === Mode.TryIt) && '-20px',
             flexDirection: (graphExplorerMode === Mode.TryIt) ? 'column' : 'row'
           }}>
-
             {graphExplorerMode === Mode.Complete && (
               <Resizable
                 onResize={(e: any, direction: any, ref: any) => {
@@ -452,40 +421,24 @@ class App extends Component<IAppProps, IAppState> {
                   }
                 }}
                 className={`ms-Grid-col ms-sm12 ms-md4 ms-lg4 ${sidebarWidth} resizable-sidebar`}
-                minWidth={'4'}
+                minWidth={'71'}
                 maxWidth={maxWidth}
                 enable={{
                   right: true
                 }}
                 handleClasses={{
                   right: classes.vResizeHandle
                 }}
-                bounds={'window'}
+                bounds={'parent'}
                 size={{
                   width: sideWidth,
                   height: ''
                 }}
               >
-
-                {mobileScreen && appTitleDisplayOnMobileScreen(
-                  stackTokens,
-                  classes,
-                  this.toggleSidebar
-                )}
-
-                {!mobileScreen && appTitleDisplayOnFullScreen(
-                  classes,
-                  minimised,
-                  this.toggleSidebar
-                )}
-
-                <hr className={classes.separator} />
-
-                {this.displayAuthenticationSection(minimised)}
-                <hr className={classes.separator} />
-
-                {showSidebar && ( <Sidebar currentTab = { this.state.sidebarTabSelection }
-                  setSidebarTabSelection = { this.setSidebarTabSelection } /> ) }
+                <Sidebar currentTab = { this.state.sidebarTabSelection }
+                  setSidebarTabSelection = { this.setSidebarTabSelection } showSidebar={showSidebar}
+                  toggleSidebar={this.toggleSidebar}
+                  mobileScreen={mobileScreen}/>
               </Resizable>
             )}
             {graphExplorerMode === Mode.TryIt &&
@@ -502,13 +455,10 @@ class App extends Component<IAppProps, IAppState> {
                   width: graphExplorerMode === Mode.TryIt ? '100%' : contentWidth,
                   height: contentHeight
                 }}
-                style={!sidebarProperties.showSidebar && !mobileScreen ? { marginLeft: '8px' } : {}}
+                style={!sidebarProperties.showSidebar && !mobileScreen ? { marginLeft: '8px', flex: 1 } : {flex: 1}}
               >
-                <div style={{ marginBottom: 8 }} >
+                <div style={{ marginBottom: 8}} >
                   <QueryRunner onSelectVerb={this.handleSelectVerb} />
-                  <div style={mobileScreen ? this.statusAreaMobileStyle : this.statusAreaFullScreenStyle}>
-                    <TermsOfUseMessage />
-                  </div>
                 </div>
 
                 <div>
@@ -520,6 +470,9 @@ class App extends Component<IAppProps, IAppState> {
               </Resizable>
             )}
           </div>
+          <div style={mobileScreen ? this.statusAreaMobileStyle : this.statusAreaFullScreenStyle}>
+            <TermsOfUseMessage />
+          </div>
         </div>
       </ThemeContext.Provider>
     );