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