From 48c8b93e985d0eca4b08983bfcb50ba660453155 Mon Sep 17 00:00:00 2001
From: AmbrishRamachandiran <ambrish.r@infosys.com>
Date: Mon, 16 Oct 2023 11:48:00 +0530
Subject: [PATCH] Adding tooltip to like dislike feedback buttons

Signed-off-by: AmbrishRamachandiran <ambrish.r@infosys.com>
---
 .changeset/long-flies-battle.md               |  5 +++
 .../LikeDislikeButtons/LikeDislikeButtons.tsx | 45 ++++++++++---------
 2 files changed, 30 insertions(+), 20 deletions(-)
 create mode 100644 .changeset/long-flies-battle.md

diff --git a/.changeset/long-flies-battle.md b/.changeset/long-flies-battle.md
new file mode 100644
index 0000000000..d143658004
--- /dev/null
+++ b/.changeset/long-flies-battle.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-entity-feedback': patch
+---
+
+Added tooltip to like dislike buttons
diff --git a/plugins/entity-feedback/src/components/LikeDislikeButtons/LikeDislikeButtons.tsx b/plugins/entity-feedback/src/components/LikeDislikeButtons/LikeDislikeButtons.tsx
index 2d38e60ac2..718e32f357 100644
--- a/plugins/entity-feedback/src/components/LikeDislikeButtons/LikeDislikeButtons.tsx
+++ b/plugins/entity-feedback/src/components/LikeDislikeButtons/LikeDislikeButtons.tsx
@@ -24,6 +24,7 @@ import {
 } from '@backstage/core-plugin-api';
 import { useAsyncEntity } from '@backstage/plugin-catalog-react';
 import { IconButton } from '@material-ui/core';
+import Tooltip from '@material-ui/core/Tooltip';
 import ThumbDownIcon from '@material-ui/icons/ThumbDown';
 import ThumbUpIcon from '@material-ui/icons/ThumbUp';
 import ThumbDownOutlinedIcon from '@material-ui/icons/ThumbDownOutlined';
@@ -122,26 +123,30 @@ export const LikeDislikeButtons = (props: LikeDislikeButtonsProps) => {
 
   return (
     <>
-      <IconButton
-        data-testid="entity-feedback-like-button"
-        onClick={() => applyRating(FeedbackRatings.like)}
-      >
-        {rating === FeedbackRatings.like ? (
-          <ThumbUpIcon fontSize="small" />
-        ) : (
-          <ThumbUpOutlinedIcon fontSize="small" />
-        )}
-      </IconButton>
-      <IconButton
-        data-testid="entity-feedback-dislike-button"
-        onClick={() => applyRating(FeedbackRatings.dislike)}
-      >
-        {rating === FeedbackRatings.dislike ? (
-          <ThumbDownIcon fontSize="small" />
-        ) : (
-          <ThumbDownOutlinedIcon fontSize="small" />
-        )}
-      </IconButton>
+      <Tooltip title="Like">
+        <IconButton
+          data-testid="entity-feedback-like-button"
+          onClick={() => applyRating(FeedbackRatings.like)}
+        >
+          {rating === FeedbackRatings.like ? (
+            <ThumbUpIcon fontSize="small" />
+          ) : (
+            <ThumbUpOutlinedIcon fontSize="small" />
+          )}
+        </IconButton>
+      </Tooltip>
+      <Tooltip title="Dislike">
+        <IconButton
+          data-testid="entity-feedback-dislike-button"
+          onClick={() => applyRating(FeedbackRatings.dislike)}
+        >
+          {rating === FeedbackRatings.dislike ? (
+            <ThumbDownIcon fontSize="small" />
+          ) : (
+            <ThumbDownOutlinedIcon fontSize="small" />
+          )}
+        </IconButton>
+      </Tooltip>
       <FeedbackResponseDialog
         entity={entity!}
         open={openFeedbackDialog}