feat(dashboard): Add tooltip for star/unstar action (#8276)

getsentry · May 5, 2018 · 1e98e09 · 1e98e09
1 parent 8d2fb47
commit 1e98e09
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 14 deletions.
diff --git a/src/sentry/static/sentry/app/views/organizationDashboard/projectCard.jsx b/src/sentry/static/sentry/app/views/organizationDashboard/projectCard.jsx
@@ -5,8 +5,10 @@ import {withRouter} from 'react-router';
 import {Flex} from 'grid-emotion';
 
 import SentryTypes from 'app/proptypes';
-import Link from 'app/components/link';
 import {Client} from 'app/api';
+import Link from 'app/components/link';
+import Tooltip from 'app/components/tooltip';
+import {t} from 'app/locale';
 
 import PlatformList from 'app/views/organizationDashboard/platformList';
 import Chart from 'app/views/organizationDashboard/chart';
@@ -35,17 +37,23 @@ class ProjectCard extends React.Component {
   render() {
     const {project, stats, params} = this.props;
 
+    const bookmarkText = project.isBookmarked
+      ? t('Remove from bookmarks')
+      : t('Add to bookmarks');
+
     return (
       <StyledProjectCard>
         <Flex justify="space-between" p={2} align="center">
           <StyledLink to={`/${params.orgId}/${project.slug}/`}>
             <strong>{project.slug}</strong>
           </StyledLink>
-          <Star
-            active={project.isBookmarked}
-            className="project-select-bookmark icon icon-star-solid"
-            onClick={this.toggleProjectBookmark}
-          />
+          <Tooltip title={bookmarkText}>
+            <Star
+              active={project.isBookmarked}
+              className="project-select-bookmark icon icon-star-solid"
+              onClick={this.toggleProjectBookmark}
+            />
+          </Tooltip>
         </Flex>
         <Chart stats={stats} />
         <PlatformList platforms={project.platforms} />

diff --git a/tests/js/spec/views/organizationDashboard/__snapshots__/projectCard.spec.jsx.snap b/tests/js/spec/views/organizationDashboard/__snapshots__/projectCard.spec.jsx.snap
@@ -78,16 +78,22 @@ exports[`ProjectCard renders 1`] = `
                 </Link>
               </Link>
             </StyledLink>
-            <Star
-              active={false}
-              className="project-select-bookmark icon icon-star-solid"
-              onClick={[Function]}
+            <Tooltip
+              title="Add to bookmarks"
             >
-              <a
-                className="project-select-bookmark icon icon-star-solid css-syj8e8-Star efesc7i2"
+              <Star
+                active={false}
+                className="tip project-select-bookmark icon icon-star-solid"
                 onClick={[Function]}
-              />
-            </Star>
+                title="Add to bookmarks"
+              >
+                <a
+                  className="tip project-select-bookmark icon icon-star-solid css-syj8e8-Star efesc7i2"
+                  onClick={[Function]}
+                  title="Add to bookmarks"
+                />
+              </Star>
+            </Tooltip>
           </div>
         </Base>
       </Flex>