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]>

Author: jstanley0

ui/features/search/react/SearchApp.jsx

@@ -50,6 +50,7 @@ export default function SearchApp() {
   const [searchResults, setSearchResults] = useState([])
   const [indexingProgress, setIndexingProgress] = useState(null)
   const [isTrayOpen, setIsTrayOpen] = useState(false)
+  const [resolveFeedback, setResolveFeedback] = useState(null)
 
   useEffect(() => {
     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() {
 
     setFeedbackOpen(true)
     setFeedback({...feedback, action: 'DISLIKE', objectId: id, objectType: type})
+    return new Promise(resolve => setResolveFeedback(() => resolve))
   }
 
   const onExplain = ({id, type}) => {
@@ -104,6 +106,7 @@ export default function SearchApp() {
 
     setFeedbackOpen(true)
     setFeedback({...feedback, action: 'LIKE', objectId: id, objectType: type})
+    return new Promise(resolve => setResolveFeedback(() => resolve))
   }
 
   const onCloseFeedback = () => {
@@ -124,6 +127,9 @@ export default function SearchApp() {
     )
     setFeedback({action: null, comment: '', objectId: null, objectType: null})
     setFeedbackOpen(false)
+    if (resolveFeedback) {
+      resolveFeedback()
+    }
   }
 
   const onSearch = e => {

ui/features/search/react/SearchResult.jsx

@@ -16,7 +16,7 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { useEffect, useRef } from 'react'
+import React, { useState } from 'react'
 import {Text} from '@instructure/ui-text'
 import {IconButton} from '@instructure/ui-buttons'
 import {Link} from '@instructure/ui-link'
@@ -25,6 +25,7 @@ import {Heading} from '@instructure/ui-heading'
 import {Flex} from '@instructure/ui-flex'
 import {
   IconLikeLine,
+  IconLikeSolid,
   IconAssignmentLine,
   IconDocumentLine,
   IconAnnouncementLine,
@@ -121,6 +122,9 @@ export default function SearchResult({onExplain, onLike, onDislike, result, sear
       '<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>'
     )
   }
+
+  const [feedback, setFeedback] = useState()
+
   return (
     <View as="li" borderColor="primary" borderWidth="small 0 0 0" padding="medium 0">
       <Flex alignItems="start" as="div" gap="large" justifyItems="space-between">
@@ -165,17 +169,17 @@ export default function SearchResult({onExplain, onLike, onDislike, result, sear
             </Flex.Item>
             <Flex.Item>
               <IconButton
-                onClick={_ => onLike({id: content_id, type: content_type})}
+                onClick={_ => onLike({id: content_id, type: content_type}).then(_ => setFeedback("liked"))}
                 screenReaderLabel={I18n.t('I like this result')}
-                renderIcon={<IconLikeLine />}
+                renderIcon={feedback === "liked" ? <IconLikeSolid color="brand" />: <IconLikeLine />}
                 withBackground={false}
                 withBorder={false}
               />
               <span style={{display: 'inline-block', transform: 'rotate(180deg)'}}>
                 <IconButton
-                  onClick={_ => onDislike({id: content_id, type: content_type})}
+                  onClick={_ => onDislike({id: content_id, type: content_type}).then(_ => setFeedback("disliked"))}
                   screenReaderLabel={I18n.t('I do not like this result')}
-                  renderIcon={<IconLikeLine />}
+                  renderIcon={feedback === "disliked" ? <IconLikeSolid color="brand" /> : <IconLikeLine />}
                   withBackground={false}
                   withBorder={false}
                 />