diff --git a/package-lock.json b/package-lock.json
index dcf1a0e48a..1091c34db0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7073,6 +7073,12 @@
"esutils": "^2.0.2"
}
},
+ "dom-accessibility-api": {
+ "version": "0.5.11",
+ "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.11.tgz",
+ "integrity": "sha512-7X6GvzjYf4yTdRKuCVScV+aA9Fvh5r8WzWrXBH9w82ZWB/eYDMGCnazoC/YAqAzUJWHzLOnZqr46K3iEyUhUvw==",
+ "dev": true
+ },
"dom-converter": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
diff --git a/package.json b/package.json
index a7e910c72b..f991ae6971 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/views/app-sections/AppTitle.tsx b/src/app/views/app-sections/AppTitle.tsx
index 23cc3a3551..303a883cec 100644
--- a/src/app/views/app-sections/AppTitle.tsx
+++ b/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
}
+
+ {!minimised &&
+ <>
+
+ >
+ }
+
;
}
@@ -51,6 +59,9 @@ export function appTitleDisplayOnMobileScreen(
{displayGraphLabel(classes)}
+
+
+
>
;
}
diff --git a/src/app/views/app-sections/FeedbackButton.tsx b/src/app/views/app-sections/FeedbackButton.tsx
new file mode 100644
index 0000000000..a5cd164d87
--- /dev/null
+++ b/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_ = {translateMessage('Feedback')}
+
+ const feedbackIconStyles = {
+ root:{
+ height: '50px',
+ width: '50px'
+ }
+ }
+ const calloutProps = {
+ gapSpace: 0
+ };
+ const hostStyles = { root: {
+ display: 'inline-block',
+ padding: '15px'
+ }
+ };
+
+ return (
+
+ {profile?.profileType !== ACCOUNT_TYPE.AAD &&
+
+
+
+
+
+
+ }
+
+ )
+}
\ No newline at end of file
diff --git a/src/app/views/query-runner/request/Request.tsx b/src/app/views/query-runner/request/Request.tsx
index 343f99d456..cea03bbbab 100644
--- a/src/app/views/query-runner/request/Request.tsx
+++ b/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 {
const {
handleOnEditorChange,
mode,
- profile,
intl: { messages }
}: any = this.props;
@@ -124,23 +122,6 @@ export class Request extends Component {
,
);
}
- if (profile !== ACCOUNT_TYPE.AAD) {
- pivotItems.push(
-
-
- )
- }
return pivotItems;
}
@@ -163,17 +144,7 @@ export class Request extends Component {
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) => {
diff --git a/src/messages/GE.json b/src/messages/GE.json
index 7a89104c67..a4ab6dddc4 100644
--- a/src/messages/GE.json
+++ b/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",
diff --git a/src/tests/components/FeedbackButton.spec.tsx b/src/tests/components/FeedbackButton.spec.tsx
new file mode 100644
index 0000000000..09559925d7
--- /dev/null
+++ b/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 (
+
+ )
+}
+
+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 Feedback
+})
+
+describe('Tests Feedback button', () => {
+ it('Renders feedback button without crashing', () => {
+ const { getByText } = renderFeedbackButton();
+ expect(getByText(/Feedback/)).toBeDefined();
+
+ });
+})
\ No newline at end of file