Skip to content

Commit c39f110

Browse files
lexi-taylorlexi-taylor
committed
add option to hide feedbackform
1 parent 8a83108 commit c39f110

6 files changed

Lines changed: 195 additions & 114 deletions

File tree

‎__tests__/html2/fluentTheme/defaultFeedback.activity.html‎

Lines changed: 109 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -1,132 +1,130 @@
11
<!doctype html>
22
<html lang="en-US">
3-
4-
<head>
5-
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
6-
<script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
7-
<script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
8-
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js"></script>
9-
<script crossorigin="anonymous" src="/test-harness.js"></script>
10-
<script crossorigin="anonymous" src="/test-page-object.js"></script>
11-
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
12-
<script crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
13-
</head>
14-
15-
<body>
16-
<main id="webchat"></main>
17-
<script type="text/babel">
18-
run(async function () {
19-
const {
20-
React,
21-
ReactDOM: { render },
22-
WebChat: { FluentThemeProvider, ReactWebChat }
23-
} = window; // Imports in UMD fashion.
24-
25-
const { directLine, store } = testHelpers.createDirectLineEmulator();
26-
27-
const App = () => <ReactWebChat directLine={directLine} store={store} />;
28-
29-
render(
30-
<FluentThemeProvider>
31-
<App />
32-
</FluentThemeProvider>,
33-
document.getElementById('webchat')
34-
);
35-
36-
await pageConditions.uiConnected();
37-
38-
await directLine.emulateIncomingActivity({
39-
type: 'message',
40-
id: 'a-00000',
41-
timestamp: 0,
42-
text: 'This is a test message to show feedback buttons',
43-
from: {
44-
role: 'bot'
45-
},
46-
locale: 'en-US',
47-
entities: [],
48-
channelData: {
49-
feedbackLoop: {
50-
type: 'default',
51-
disclaimer: 'This is a test disclaimer message'
3+
<head>
4+
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
5+
<script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
6+
<script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
7+
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js"></script>
8+
<script crossorigin="anonymous" src="/test-harness.js"></script>
9+
<script crossorigin="anonymous" src="/test-page-object.js"></script>
10+
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
11+
<script crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
12+
</head>
13+
14+
<body>
15+
<main id="webchat"></main>
16+
<script type="text/babel">
17+
run(async function () {
18+
const {
19+
React,
20+
ReactDOM: { render },
21+
WebChat: { FluentThemeProvider, ReactWebChat }
22+
} = window; // Imports in UMD fashion.
23+
24+
const { directLine, store } = testHelpers.createDirectLineEmulator();
25+
26+
const App = () => <ReactWebChat directLine={directLine} store={store} />;
27+
28+
render(
29+
<FluentThemeProvider>
30+
<App />
31+
</FluentThemeProvider>,
32+
document.getElementById('webchat')
33+
);
34+
35+
await pageConditions.uiConnected();
36+
37+
await directLine.emulateIncomingActivity({
38+
type: 'message',
39+
id: 'a-00000',
40+
timestamp: 0,
41+
text: 'This is a test message to show feedback buttons',
42+
from: {
43+
role: 'bot'
44+
},
45+
locale: 'en-US',
46+
entities: [],
47+
channelData: {
48+
feedbackLoop: {
49+
type: 'default',
50+
disclaimer: 'This is a test disclaimer message'
51+
}
5252
}
53-
}
54-
});
55-
56-
await pageConditions.numActivitiesShown(1);
57-
58-
pageElements.byTestId('send box text area').focus();
59-
await host.sendShiftTab(2);
53+
});
6054

61-
await host.sendKeys('ENTER');
62-
await host.sendKeys('ENTER');
55+
await pageConditions.numActivitiesShown(1);
6356

64-
await host.snapshot('local');
57+
pageElements.byTestId('send box text area').focus();
58+
await host.sendShiftTab(2);
6559

66-
// Dismiss like button
67-
await host.sendShiftTab(2);
68-
await host.sendKeys('ENTER');
69-
70-
// Click like button
71-
await host.sendKeys('ENTER');
72-
73-
await pageConditions.became(
74-
'feedback form is open',
75-
() => document.activeElement === pageElements.byTestId('feedback sendbox'),
76-
1000
77-
);
60+
await host.sendKeys('ENTER');
61+
await host.sendKeys('ENTER');
7862

79-
// Go to cancel button
80-
await host.sendTab(2);
81-
await host.sendKeys('ENTER');
63+
await host.snapshot('local');
8264

83-
await host.snapshot('local');
65+
// Dismiss like button
66+
await host.sendShiftTab(2);
67+
await host.sendKeys('ENTER');
8468

85-
pageElements.byTestId('send box text area').focus();
86-
await host.sendShiftTab(2);
69+
// Click like button
70+
await host.sendKeys('ENTER');
8771

88-
await host.sendKeys('ENTER');
89-
// Send dislike
90-
await host.sendTab(1);
91-
await host.sendKeys('ENTER');
72+
await pageConditions.became(
73+
'feedback form is open',
74+
() => document.activeElement === pageElements.byTestId('feedback sendbox'),
75+
1000
76+
);
9277

93-
await pageConditions.became(
94-
'feedback form is open',
95-
() => document.activeElement === pageElements.byTestId('feedback sendbox'),
96-
1000
97-
);
78+
// Go to cancel button
79+
await host.sendTab(2);
80+
await host.sendKeys('ENTER');
9881

99-
await host.sendKeys('Test feedback');
82+
await host.snapshot('local');
10083

101-
await host.snapshot('local');
84+
pageElements.byTestId('send box text area').focus();
85+
await host.sendShiftTab(2);
10286

103-
const { activity } = await directLine.actPostActivity(async () => {
87+
await host.sendKeys('ENTER');
88+
// Send dislike
10489
await host.sendTab(1);
10590
await host.sendKeys('ENTER');
106-
});
10791

108-
expect(activity).toEqual(
109-
expect.objectContaining({
110-
type: 'invoke',
111-
name: 'message/submitAction',
112-
value: {
113-
actionName: 'feedback',
114-
actionValue: {
115-
reaction: 'dislike',
116-
feedback: {
117-
feedbackText: 'Test feedback'
92+
await pageConditions.became(
93+
'feedback form is open',
94+
() => document.activeElement === pageElements.byTestId('feedback sendbox'),
95+
1000
96+
);
97+
98+
await host.sendKeys('Test feedback');
99+
100+
await host.snapshot('local');
101+
102+
const { activity } = await directLine.actPostActivity(async () => {
103+
await host.sendTab(1);
104+
await host.sendKeys('ENTER');
105+
});
106+
107+
expect(activity).toEqual(
108+
expect.objectContaining({
109+
type: 'invoke',
110+
name: 'message/submitAction',
111+
value: {
112+
actionName: 'feedback',
113+
actionValue: {
114+
reaction: 'dislike',
115+
feedback: {
116+
feedbackText: 'Test feedback'
117+
}
118118
}
119119
}
120-
}
121-
})
122-
);
120+
})
121+
);
123122

124-
await expect(pageElements.byTestId('feedback sendbox')).toBeFalsy();
123+
await expect(pageElements.byTestId('feedback sendbox')).toBeFalsy();
125124

126-
// Feedback button state should persist
127-
await host.snapshot('local');
128-
});
129-
</script>
130-
</body>
131-
132-
</html>
125+
// Feedback button state should persist
126+
await host.snapshot('local');
127+
});
128+
</script>
129+
</body>
130+
</html>

‎__tests__/html2/fluentTheme/feedbackform.hidden.html‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!doctype html>
2+
<html lang="en-US">
3+
4+
<head>
5+
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
6+
<script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
7+
<script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
8+
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js"></script>
9+
<script crossorigin="anonymous" src="/test-harness.js"></script>
10+
<script crossorigin="anonymous" src="/test-page-object.js"></script>
11+
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
12+
<script crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
13+
</head>
14+
15+
<body>
16+
<main id="webchat"></main>
17+
<script type="text/babel">
18+
run(async function () {
19+
const {
20+
React,
21+
ReactDOM: { render },
22+
WebChat: { FluentThemeProvider, ReactWebChat }
23+
} = window; // Imports in UMD fashion.
24+
25+
const { directLine, store } = testHelpers.createDirectLineEmulator();
26+
27+
const App = () => <ReactWebChat directLine={directLine} store={store} styleOptions={{ hideFeedbackForm: true }} />;
28+
29+
render(
30+
<FluentThemeProvider>
31+
<App />
32+
</FluentThemeProvider>,
33+
document.getElementById('webchat')
34+
);
35+
36+
await pageConditions.uiConnected();
37+
38+
await directLine.emulateIncomingActivity({
39+
type: 'message',
40+
id: 'a-00000',
41+
timestamp: 0,
42+
text: 'This is a test message to show feedback buttons without a feedback form',
43+
from: {
44+
role: 'bot'
45+
},
46+
locale: 'en-US',
47+
entities: [],
48+
// Even if feedback loop is present, feedback form will not be shown
49+
channelData: {
50+
feedbackLoop: {
51+
type: 'default',
52+
disclaimer: 'This is a test disclaimer message'
53+
}
54+
}
55+
});
56+
57+
await pageConditions.numActivitiesShown(1);
58+
59+
pageElements.byTestId('send box text area').focus();
60+
await host.sendShiftTab(2);
61+
await host.sendKeys('ENTER');
62+
63+
// Click like button
64+
await host.sendKeys('ENTER');
65+
66+
await expect(pageElements.byTestId('feedback sendbox')).toBeNull();
67+
68+
// Except feedback form to be hidden
69+
await host.snapshot('local');
70+
});
71+
</script>
72+
</body>
73+
74+
</html>

‎__tests__/html2/fluentTheme/feedbackform.hidden.html.snap-1.png‎

15.3 KB
Loading

‎packages/api/src/StyleOptions.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -932,7 +932,7 @@ type StyleOptions = {
932932
/**
933933
* (EXPERIMENTAL) Feedback buttons placement
934934
*
935-
* - `'activity-actions'` - place feedback buttons inside activity actions - will show feedback form
935+
* - `'activity-actions'` - place feedback buttons inside activity actions - Includes feedback form
936936
* - `'activity-status'` - place feedback buttons inside activity status
937937
*
938938
* @default 'activity-status'
@@ -943,6 +943,13 @@ type StyleOptions = {
943943
*/
944944
feedbackActionsPlacement?: 'activity-actions' | 'activity-status';
945945

946+
/**
947+
* Feedback form is on by default but can be hidden
948+
* @default false
949+
*
950+
*/
951+
hideFeedbackForm?: boolean;
952+
946953
/**
947954
* Use continuous mode for speech recognition. Default to `false`.
948955
*

‎packages/api/src/defaultStyleOptions.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -308,6 +308,8 @@ const DEFAULT_OPTIONS: Required<StyleOptions> = {
308308

309309
feedbackActionsPlacement: 'activity-status' as const,
310310

311+
hideFeedbackForm: false,
312+
311313
// Speech recognition
312314
speechRecognitionContinuous: false
313315
};

‎packages/component/src/Activity/ActivityFeedback.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const defaultFeedbackEntities = {
4242
};
4343

4444
function ActivityFeedback({ activity }: ActivityFeedbackProps) {
45-
const [{ feedbackActionsPlacement }] = useStyleOptions();
45+
const [{ feedbackActionsPlacement, hideFeedbackForm }] = useStyleOptions();
4646
const [{ feedbackForm }] = useStyleSet();
4747

4848
const [selectedAction, setSelectedAction] = useState<OrgSchemaAction | undefined>();
@@ -138,7 +138,7 @@ function ActivityFeedback({ activity }: ActivityFeedbackProps) {
138138
[activity, handleFeedbackFormReset, selectedAction]
139139
);
140140

141-
if (feedbackActionsPlacement === 'activity-actions' && isFeedbackLoopSupported) {
141+
if (!hideFeedbackForm && feedbackActionsPlacement === 'activity-actions' && isFeedbackLoopSupported) {
142142
return (
143143
<div className={classNames('webchat__feedback-form__root-container', feedbackForm + '')}>
144144
<div className={classNames('webchat__feedback-form__root-container__child', feedbackForm + '')}>

0 commit comments

Comments
 (0)