Enhancement: Changes position of feedback button

package.json

@@ -100,6 +100,7 @@
         "not op_mini all"
     ],
     "devDependencies": {
+        "@testing-library/react": "12.1.2",
         "@types/chromedriver": "2.38.0",
         "@types/enzyme": "3.10.10",
         "@types/enzyme-adapter-react-16": "1.0.5",

src/app/views/app-sections/AppTitle.tsx

@@ -1,12 +1,13 @@
 import { getId, IconButton, IStackTokens, Label, Stack, TooltipHost } from '@fluentui/react';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
+import { FeedbackButton } from './FeedbackButton';
 
 export function appTitleDisplayOnFullScreen(
   classes: any,
   minimised: any,
   toggleSidebar: Function,
-): React.ReactNode {
+): React.ReactNode{
 
   return <div style={{ display: 'flex', width: '100%' }}>
     <TooltipHost
@@ -31,6 +32,13 @@ export function appTitleDisplayOnFullScreen(
           {displayGraphLabel(classes)}
         </>}
     </div>
+    <div style={{position: 'relative', top: '10px'}}>
+      {!minimised &&
+      <>
+        <FeedbackButton/>
+      </>
+      }
+    </div>
   </div>;
 }
 
@@ -51,6 +59,9 @@ export function appTitleDisplayOnMobileScreen(
       <div style={{ padding: 10 }} role={'heading'} aria-level={1}>
         {displayGraphLabel(classes)}
       </div>
+      <div style={{position:'absolute', top: '10px', right: '15px'}}>
+        <FeedbackButton/>
+      </div>
     </>
   </Stack>;
 }

src/app/views/app-sections/FeedbackButton.tsx

@@ -0,0 +1,62 @@
+import { DirectionalHint, IconButton, IIconProps, TooltipHost } from '@fluentui/react';
+import React, { useState } from 'react';
+import { translateMessage } from '../../utils/translate-messages';
+import { useSelector } from 'react-redux';
+import FeedbackForm from '../query-runner/request/feedback/FeedbackForm';
+import { IRootState } from '../../../types/root';
+import { ACCOUNT_TYPE } from '../../services/graph-constants';
+
+export const FeedbackButton = () => {
+  const [enableSurvey, setEnableShowSurvey] = 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 feedbackIconStyles = {
+    root:{
+      height: '50px',
+      width: '50px'
+    }
+  }
+  const calloutProps = {
+    gapSpace: 0
+  };
+  const hostStyles = { root: {
+    display: 'inline-block',
+    padding: '15px'
+  }
+  };
+
+  return (
+    <div>
+      {profile?.profileType !== ACCOUNT_TYPE.AAD &&
+      <div>
+        <TooltipHost
+          content={content_}
+          calloutProps={calloutProps}
+          styles={hostStyles}
+          directionalHint={DirectionalHint.leftBottomEdge}
+        >
+          <IconButton onClick={toggleFeedback}
+            iconProps={feedbackIcon}
+            ariaDescription={feedbackTitle}
+            ariaLabel={feedbackTitle}
+            styles={feedbackIconStyles}
+            role={'button'}
+            disabled={enableSurvey}
+          />
+        </TooltipHost>
+        <FeedbackForm dismissSurvey={toggleFeedback} activated={enableSurvey} />
+      </div>
+      }
+    </div>
+  )
+}

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

@@ -16,7 +16,6 @@ import { Mode } from '../../../../types/enums';
 import { IRequestComponent } from '../../../../types/request';
 import { IRootState } from '../../../../types/root';
 import { setDimensions } from '../../../services/actions/dimensions-action-creator';
-import { ACCOUNT_TYPE } from '../../../services/graph-constants';
 import { translateMessage } from '../../../utils/translate-messages';
 import { convertPxToVh, convertVhToPx } from '../../common/dimensions-adjustment';
 import { Auth } from './auth';
@@ -43,7 +42,6 @@ export class Request extends Component<IRequestComponent, any> {
     const {
       handleOnEditorChange,
       mode,
-      profile,
       intl: { messages }
     }: any = this.props;
 
@@ -124,23 +122,6 @@ export class Request extends Component<IRequestComponent, any> {
         </PivotItem>,
       );
     }
-    if (profile !== ACCOUNT_TYPE.AAD) {
-      pivotItems.push(
-        <PivotItem
-          key='feedback'
-          itemIcon='HeartFill'
-          itemKey='feedback'
-          onRenderItemLink={this.getTooltipDisplay}
-          ariaLabel={translateMessage('Feedback')}
-          title={translateMessage('Feedback')}
-          headerText={translateMessage('Feedback')}
-          headerButtonProps={{
-            'aria-controls': 'feedback-tab'
-          }}
-        >
-        </PivotItem>
-      )
-    }
 
     return pivotItems;
   }
@@ -163,17 +144,7 @@ export class Request extends Component<IRequestComponent, any> {
       return;
     }
     this.onPivotItemClick(pivotItem);
-    this.toggleFeedback(pivotItem);
-  }
-
-  private toggleFeedback = (event: any) => {
-    const { key } = event;
-    if (key && key.includes('feedback')) {
-      this.toggleCustomSurvey(true);
-      this.setState({ selectedPivot: 'request-body' })
-    } else {
-      this.setState({ selectedPivot: key })
-    }
+    this.setState({ selectedPivot: pivotItem.props.itemKey });
   }
 
   private onPivotItemClick = (item?: PivotItem) => {

src/messages/GE.json

@@ -392,7 +392,7 @@
   "Resources available": "Resources available",
   "Selected Resources": "Selected Resources",
   "A documentation link for this URL exists. Click learn more to access it": "A documentation link for this URL exists. Click learn more to access it",
-  "Feedback": "Got feedback?",
+  "Feedback": "Help Improve Graph Explorer?",
   "Comment question": "Tell us more about your experience",
   "Prompt question": "We'd love your Feedback",
   "No": "No",

src/tests/components/FeedbackButton.spec.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { cleanup, render } from '@testing-library/react';
+import { FeedbackButton } from '../../app/views/app-sections/FeedbackButton';
+
+afterEach(cleanup);
+const renderFeedbackButton  = () => {
+  return render (
+    <FeedbackButton />
+  )
+}
+
+jest.mock('react-redux', () => ({
+  useSelector: jest.fn(() => {
+    return {
+      profile: {
+        profileType: 'MSA'
+      }
+    }
+  }),
+  useDispatch: jest.fn()
+}));
+
+// eslint-disable-next-line no-console
+console.warn = jest.fn();
+
+// eslint-disable-next-line react/display-name
+jest.mock('../../app/views/query-runner/request/feedback/FeedbackForm.tsx', () => () => {
+  return <div>Feedback</div>
+})
+
+describe('Tests Feedback button', () => {
+  it('Renders feedback button without crashing', () => {
+    const { getByText } = renderFeedbackButton();
+    expect(getByText(/Feedback/)).toBeDefined();
+
+  });
+})