Fix: Corrects position of feedback button and GE title (#1492)

* add feedback button to side menu * fix app title section
microsoftgraph · Feb 28, 2022 · a4c6126 · a4c6126
1 parent ebfbaf8
commit a4c6126
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 30 deletions.
diff --git a/src/app/views/App.styles.ts b/src/app/views/App.styles.ts
@@ -66,6 +66,15 @@ export const appStyles = (theme: ITheme) => {
  '&:hover': {
  borderRight: '3px solid silver'
  }
+ },
+ feedbackButtonFullScreenDisplay: {
+ position: 'relative',
+ top: '5px'
+ },
+ feedbackButtonMobileDisplay: {
+ position: 'absolute',
+ top: '-1px',
+ right: '15px'
  }
  };
 };
diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx
@@ -39,6 +39,7 @@ 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';
 
 interface IAppProps {
  theme?: ITheme;
@@ -294,9 +295,14 @@ class App extends Component<IAppProps, IAppState> {
  alignItems: minimised ? '' : 'center',
  marginLeft: minimised ? '' : '-0.9em'
  }}>
- <div className={minimised ? '' : 'col-10'}>
+ <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>
@@ -387,7 +393,7 @@ class App extends Component<IAppProps, IAppState> {
  <div className='row'>
  {graphExplorerMode === Mode.Complete && (
  <Resizable
- onResize={(e: any, direction: any, ref: any, d: any) => {
+ onResize={(e: any, direction: any, ref: any) => {
  if (ref?.style?.width) {
  this.resizeSideBar(ref.style.width);
  }

diff --git a/src/app/views/app-sections/AppTitle.tsx b/src/app/views/app-sections/AppTitle.tsx
@@ -24,6 +24,7 @@ export function appTitleDisplayOnFullScreen(
  iconProps={{ iconName: 'GlobalNavButton' }}
  className={classes.sidebarToggle}
  ariaLabel={!minimised ? 'Minimize sidebar' : 'Maximize sidebar'}
+ styles={{root: { position:'relative', top: '3px'}}}
  onClick={() => toggleSidebar()} />
  </TooltipHost>
  <div className={classes.graphExplorerLabelContainer} role={'heading'} aria-level={1}>
@@ -32,11 +33,11 @@ export function appTitleDisplayOnFullScreen(
  {displayGraphLabel(classes)}
  </>}
  </div>
- <div style={{position: 'relative', top: '10px'}}>
+ <div>
  {!minimised &&
- <>
+ <div className={classes.feedbackButtonFullScreenDisplay}>
  <FeedbackButton/>
- </>
+ </div>
  }
  </div>
  </div>;
@@ -59,7 +60,7 @@ export function appTitleDisplayOnMobileScreen(
  <div style={{ padding: 10 }} role={'heading'} aria-level={1}>
  {displayGraphLabel(classes)}
  </div>
- <div style={{position:'absolute', top: '10px', right: '15px'}}>
+ <div className={classes.feedbackButtonMobileDisplay}>
  <FeedbackButton/>
  </div>
  </>

diff --git a/src/app/views/app-sections/FeedbackButton.tsx b/src/app/views/app-sections/FeedbackButton.tsx
@@ -7,18 +7,14 @@ import { IRootState } from '../../../types/root';
 import { ACCOUNT_TYPE } from '../../services/graph-constants';
 
 export const FeedbackButton = () => {
- const [enableSurvey, setEnableShowSurvey] = useState(false);
+ const [enableSurvey, setEnableSurvey] = useState(false);
  const { profile } = useSelector( (state: IRootState) => state );
 
- const toggleFeedback = () => {
- setEnableShowSurvey(prevState => !prevState);
- }
-
  const feedbackIcon : IIconProps = {
  iconName : 'Feedback'
  }
  const feedbackTitle = translateMessage('Feedback');
- const content_ = <div style={{padding:'3px'}}>{translateMessage('Feedback')}</div>
+ const content = <div style={{padding:'3px'}}>{translateMessage('Feedback')}</div>
 
  const feedbackIconStyles = {
  root:{
@@ -30,22 +26,29 @@ export const FeedbackButton = () => {
  gapSpace: 0
  };
  const hostStyles = { root: {
- display: 'inline-block',
- padding: '15px'
+ display: 'inline-block'
  }
  };
 
+ const toggleSurvey = () => {
+ setEnableSurvey(prevState => !prevState);
+ }
+
+ const disableSurvey = () => {
+ setEnableSurvey(false);
+ }
+
  return (
  <div>
  {profile?.profileType !== ACCOUNT_TYPE.AAD &&
  <div>
  <TooltipHost
- content={content_}
+ content={content}
  calloutProps={calloutProps}
  styles={hostStyles}
- directionalHint={DirectionalHint.leftBottomEdge}
+ directionalHint={DirectionalHint.leftCenter}
  >
- <IconButton onClick={toggleFeedback}
+ <IconButton onClick={toggleSurvey}
  iconProps={feedbackIcon}
  ariaDescription={feedbackTitle}
  ariaLabel={feedbackTitle}
@@ -54,7 +57,9 @@ export const FeedbackButton = () => {
  disabled={enableSurvey}
  />
  </TooltipHost>
- <FeedbackForm dismissSurvey={toggleFeedback} activated={enableSurvey} />
+
+ <FeedbackForm onDismissSurvey={toggleSurvey}
+ activated={enableSurvey} onDisableSurvey={disableSurvey} />
  </div>
  }
  </div>

diff --git a/src/app/views/query-runner/request/Request.tsx b/src/app/views/query-runner/request/Request.tsx
@@ -20,7 +20,6 @@ import { translateMessage } from '../../../utils/translate-messages';
 import { convertPxToVh, convertVhToPx } from '../../common/dimensions/dimensions-adjustment';
 import { Auth } from './auth';
 import { RequestBody } from './body';
-import FeedbackForm from './feedback/FeedbackForm';
 import { RequestHeaders } from './headers';
 import { Permission } from './permissions';
 import './request.scss';
@@ -209,9 +208,6 @@ export class Request extends Component<IRequestComponent, any> {
  </Pivot>
  </div>
  </Resizable>
- <div id={'feedback-tab'}>
- <FeedbackForm activated={this.state.enableShowSurvey} dismissSurvey={this.toggleCustomSurvey} />
- </div>
  </>
  );
  }

diff --git a/src/app/views/query-runner/request/feedback/FeedbackForm.tsx b/src/app/views/query-runner/request/feedback/FeedbackForm.tsx
@@ -2,7 +2,7 @@ import { makeFloodgate } from '@ms-ofb/officebrowserfeedbacknpm/Floodgate';
 import { AuthenticationType } from '@ms-ofb/officebrowserfeedbacknpm/scripts/app/Configuration/IInitOptions';
 import { OfficeBrowserFeedback } from '@ms-ofb/officebrowserfeedbacknpm/scripts/app/Window/Window';
 import { getTheme, MessageBarType } from '@fluentui/react';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { geLocale } from '../../../../../appLocale';
@@ -15,7 +15,7 @@ import { getVersion } from '../../../../utils/version';
 import CampaignDefinitions from './campaignDefinitions';
 import { uiStringMap } from './uiStrings';
 
-export default function FeedbackForm({ activated, dismissSurvey }: any) {
+export default function FeedbackForm({ activated, onDismissSurvey, onDisableSurvey }: any) {
  const dispatch = useDispatch();
  const [officeBrowserFeedback, setOfficeBrowserFeedback] = useState<any>(undefined);
  const currentTheme = getTheme();
@@ -33,7 +33,9 @@ export default function FeedbackForm({ activated, dismissSurvey }: any) {
  });
  }
 
- initializeFeedback();
+ useEffect(() => {
+ initializeFeedback();
+ }, []);
 
  const showCustomSurvey = () => {
  const customSurvey: OfficeBrowserFeedback.ICustomSurvey = {
@@ -55,10 +57,13 @@ export default function FeedbackForm({ activated, dismissSurvey }: any) {
  surveyType: 2,
  title: translateMessage('title')
  }
-
- officeBrowserFeedback.floodgate.showCustomSurvey(customSurvey).catch(
- (error: any) => { throw error; }
- );
+ if(officeBrowserFeedback){
+ officeBrowserFeedback.floodgate.showCustomSurvey(customSurvey).catch(
+ (error: any) => {
+ onDisableSurvey();
+ throw error; }
+ );
+ }
  }
 
  if (activated) {
@@ -107,7 +112,7 @@ export default function FeedbackForm({ activated, dismissSurvey }: any) {
  }));
 
  }
- dismissSurvey();
+ onDismissSurvey();
  },
  uIStringGetter: (str: string): any => { return uiStringMap[str]; }
  };