Skip to content

Commit fbe666a

Browse files
committed
smart search: acknowledge feedback
test plan: - use the thumbs-up/thumbs-down buttons - once the feedback has been submitted, the icon should show the liked/disliked status flag=smart_search closes ADV-122 Change-Id: I0bf94d55b6c977d27c11a6d5f024601426b735b3 Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/349214 Reviewed-by: Jonathan Featherstone <[email protected]> QA-Review: Jonathan Featherstone <[email protected]> Product-Review: Jonathan Featherstone <[email protected]> Tested-by: Service Cloud Jenkins <[email protected]>
1 parent 2742434 commit fbe666a

File tree

2 files changed

+15
-5
lines changed

2 files changed

+15
-5
lines changed

ui/features/search/react/SearchApp.jsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ export default function SearchApp() {
5050
const [searchResults, setSearchResults] = useState([])
5151
const [indexingProgress, setIndexingProgress] = useState(null)
5252
const [isTrayOpen, setIsTrayOpen] = useState(false)
53+
const [resolveFeedback, setResolveFeedback] = useState(null)
5354

5455
useEffect(() => {
5556
doUrlSearch(false) // init the box but don't actually do the search until we've checked index status
@@ -93,6 +94,7 @@ export default function SearchApp() {
9394

9495
setFeedbackOpen(true)
9596
setFeedback({...feedback, action: 'DISLIKE', objectId: id, objectType: type})
97+
return new Promise(resolve => setResolveFeedback(() => resolve))
9698
}
9799

98100
const onExplain = ({id, type}) => {
@@ -104,6 +106,7 @@ export default function SearchApp() {
104106

105107
setFeedbackOpen(true)
106108
setFeedback({...feedback, action: 'LIKE', objectId: id, objectType: type})
109+
return new Promise(resolve => setResolveFeedback(() => resolve))
107110
}
108111

109112
const onCloseFeedback = () => {
@@ -124,6 +127,9 @@ export default function SearchApp() {
124127
)
125128
setFeedback({action: null, comment: '', objectId: null, objectType: null})
126129
setFeedbackOpen(false)
130+
if (resolveFeedback) {
131+
resolveFeedback()
132+
}
127133
}
128134

129135
const onSearch = e => {

ui/features/search/react/SearchResult.jsx

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
* with this program. If not, see <http://www.gnu.org/licenses/>.
1717
*/
1818

19-
import React, { useEffect, useRef } from 'react'
19+
import React, { useState } from 'react'
2020
import {Text} from '@instructure/ui-text'
2121
import {IconButton} from '@instructure/ui-buttons'
2222
import {Link} from '@instructure/ui-link'
@@ -25,6 +25,7 @@ import {Heading} from '@instructure/ui-heading'
2525
import {Flex} from '@instructure/ui-flex'
2626
import {
2727
IconLikeLine,
28+
IconLikeSolid,
2829
IconAssignmentLine,
2930
IconDocumentLine,
3031
IconAnnouncementLine,
@@ -121,6 +122,9 @@ export default function SearchResult({onExplain, onLike, onDislike, result, sear
121122
'<span data-testid="highlighted-search-item" style="background-color: rgba(0,142,226,0.2); border-radius: .25rem; padding-bottom: 3px; padding-top: 1px;">$1</span>'
122123
)
123124
}
125+
126+
const [feedback, setFeedback] = useState()
127+
124128
return (
125129
<View as="li" borderColor="primary" borderWidth="small 0 0 0" padding="medium 0">
126130
<Flex alignItems="start" as="div" gap="large" justifyItems="space-between">
@@ -165,17 +169,17 @@ export default function SearchResult({onExplain, onLike, onDislike, result, sear
165169
</Flex.Item>
166170
<Flex.Item>
167171
<IconButton
168-
onClick={_ => onLike({id: content_id, type: content_type})}
172+
onClick={_ => onLike({id: content_id, type: content_type}).then(_ => setFeedback("liked"))}
169173
screenReaderLabel={I18n.t('I like this result')}
170-
renderIcon={<IconLikeLine />}
174+
renderIcon={feedback === "liked" ? <IconLikeSolid color="brand" />: <IconLikeLine />}
171175
withBackground={false}
172176
withBorder={false}
173177
/>
174178
<span style={{display: 'inline-block', transform: 'rotate(180deg)'}}>
175179
<IconButton
176-
onClick={_ => onDislike({id: content_id, type: content_type})}
180+
onClick={_ => onDislike({id: content_id, type: content_type}).then(_ => setFeedback("disliked"))}
177181
screenReaderLabel={I18n.t('I do not like this result')}
178-
renderIcon={<IconLikeLine />}
182+
renderIcon={feedback === "disliked" ? <IconLikeSolid color="brand" /> : <IconLikeLine />}
179183
withBackground={false}
180184
withBorder={false}
181185
/>

0 commit comments

Comments
 (0)