refactor: icon to icons for favestar component (#15371)

* initial commit

* initial commit

* fix cypress test

* fix favstar cypress test

* fix card view

* fix other card view

superset-frontend/cypress-base/cypress/integration/chart_list/card_view.test.ts

@@ -34,36 +34,36 @@ describe('chart card view', () => {
   it('should allow to favorite/unfavorite chart card', () => {
     cy.get("[data-test='card-actions']")
       .first()
-      .find("[data-test='favorite-selected']")
+      .find("[aria-label='favorite-selected']")
       .should('not.exist');
     cy.get("[data-test='card-actions']")
-      .find("[data-test='favorite-unselected']")
+      .find("[aria-label='favorite-unselected']")
       .first()
       .click();
     cy.get("[data-test='card-actions']")
       .first()
-      .find("[data-test='favorite-selected']")
+      .find("[aria-label='favorite-selected']")
       .should('be.visible');
     cy.get("[data-test='card-actions']")
       .first()
-      .find("[data-test='favorite-unselected']")
+      .find("[aria-label='favorite-unselected']")
       .should('not.exist');
 
     cy.get("[data-test='card-actions']")
       .first()
-      .find("[data-test='favorite-unselected']")
+      .find("[aria-label='favorite-unselected']")
       .should('not.exist');
     cy.get("[data-test='card-actions']")
       .first()
-      .find("[data-test='favorite-selected']")
+      .find("[aria-label='favorite-selected']")
       .click();
     cy.get("[data-test='card-actions']")
       .first()
-      .find("[data-test='favorite-unselected']")
+      .find("[aria-label='favorite-unselected']")
       .should('be.visible');
     cy.get("[data-test='card-actions']")
       .first()
-      .find("[data-test='favorite-selected']")
+      .find("[aria-label='favorite-selected']")
       .should('not.exist');
   });
 

superset-frontend/cypress-base/cypress/integration/dashboard/fav_star.test.js

@@ -38,23 +38,23 @@ describe('Dashboard add to favorite', () => {
   it('should allow favor/unfavor', () => {
     if (!isFavoriteDashboard) {
       cy.get('[data-test="fave-unfave-icon"]')
-        .find('svg')
-        .should('have.attr', 'data-test', 'favorite-unselected');
+        .find('span')
+        .should('have.attr', 'aria-label', 'favorite-unselected');
       cy.get('[data-test="fave-unfave-icon"]').trigger('click');
       cy.get('[data-test="fave-unfave-icon"]')
-        .find('svg')
-        .should('have.attr', 'data-test', 'favorite-selected')
-        .and('not.have.attr', 'data-test', 'favorite-unselected');
+        .find('span')
+        .should('have.attr', 'aria-label', 'favorite-selected')
+        .and('not.have.attr', 'aria-label', 'favorite-unselected');
     } else {
       cy.get('[data-test="fave-unfave-icon"]')
-        .find('svg')
-        .should('have.attr', 'data-test', 'favorite-unselected')
-        .and('not.have.attr', 'data-test', 'favorite-selected');
+        .find('span')
+        .should('have.attr', 'aria-label', 'favorite-unselected')
+        .and('not.have.attr', 'aria-label', 'favorite-selected');
       cy.get('[data-test="fave-unfave-icon"]').trigger('click');
       cy.get('[data-test="fave-unfave-icon"]')
-        .find('svg')
-        .should('have.attr', 'data-test', 'favorite-unselected')
-        .and('not.have.attr', 'data-test', 'favorite-selected');
+        .find('span')
+        .should('have.attr', 'aria-label', 'favorite-unselected')
+        .and('not.have.attr', 'aria-label', 'favorite-selected');
     }
 
     // reset to original fav state

superset-frontend/cypress-base/cypress/integration/dashboard_list/card_view.test.ts

@@ -34,36 +34,36 @@ describe('Dashboard card view', () => {
   it('should allow to favorite/unfavorite dashboard card', () => {
     cy.get("[data-test='card-actions']")
       .first()
-      .find("[data-test='favorite-selected']")
+      .find("[aria-label='favorite-selected']")
       .should('not.exist');
     cy.get("[data-test='card-actions']")
-      .find("[data-test='favorite-unselected']")
+      .find("[aria-label='favorite-unselected']")
       .first()
       .click();
     cy.get("[data-test='card-actions']")
       .first()
-      .find("[data-test='favorite-selected']")
+      .find("[aria-label='favorite-selected']")
       .should('be.visible');
     cy.get("[data-test='card-actions']")
       .first()
-      .find("[data-test='favorite-unselected']")
+      .find("[aria-label='favorite-unselected']")
       .should('not.exist');
 
     cy.get("[data-test='card-actions']")
       .first()
-      .find("[data-test='favorite-unselected']")
+      .find("[aria-label='favorite-unselected']")
       .should('not.exist');
     cy.get("[data-test='card-actions']")
       .first()
-      .find("[data-test='favorite-selected']")
+      .find("[aria-label='favorite-selected']")
       .click();
     cy.get("[data-test='card-actions']")
       .first()
-      .find("[data-test='favorite-unselected']")
+      .find("[aria-label='favorite-unselected']")
       .should('be.visible');
     cy.get("[data-test='card-actions']")
       .first()
-      .find("[data-test='favorite-selected']")
+      .find("[aria-label='favorite-selected']")
       .should('not.exist');
   });
 

superset-frontend/src/components/FaveStar/FaveStar.test.tsx

@@ -41,11 +41,9 @@ test('render right content', () => {
 
   const { rerender } = render(<FaveStar {...props} isStarred />);
   expect(screen.getByRole('button')).toBeInTheDocument();
-  expect(screen.getByTestId('icon')).toBeInTheDocument();
-  expect(screen.getByTestId('icon')).toHaveAttribute(
-    'data-name',
-    'favorite-selected',
-  );
+  expect(
+    screen.getByRole('img', { name: 'favorite-selected' }),
+  ).toBeInTheDocument();
 
   expect(props.saveFaveStar).toBeCalledTimes(0);
   userEvent.click(screen.getByRole('button'));
@@ -53,11 +51,9 @@ test('render right content', () => {
   expect(props.saveFaveStar).toBeCalledWith(props.itemId, true);
 
   rerender(<FaveStar {...props} />);
-  expect(screen.getByTestId('icon')).toBeInTheDocument();
-  expect(screen.getByTestId('icon')).toHaveAttribute(
-    'data-name',
-    'favorite-unselected',
-  );
+  expect(
+    screen.getByRole('img', { name: 'favorite-unselected' }),
+  ).toBeInTheDocument();
 
   expect(props.saveFaveStar).toBeCalledTimes(1);
   userEvent.click(screen.getByRole('button'));

superset-frontend/src/components/FaveStar/index.tsx

@@ -21,7 +21,7 @@ import React, { useCallback } from 'react';
 import { t, styled } from '@superset-ui/core';
 import { Tooltip } from 'src/components/Tooltip';
 import { useComponentDidMount } from 'src/common/hooks/useComponentDidMount';
-import Icon from '../Icon';
+import Icons from 'src/components/Icons';
 
 interface FaveStarProps {
   itemId: number;
@@ -66,7 +66,7 @@ const FaveStar = ({
       data-test="fave-unfave-icon"
       role="button"
     >
-      <Icon name={isStarred ? 'favorite-selected' : 'favorite-unselected'} />
+      {isStarred ? <Icons.FavoriteSelected /> : <Icons.FavoriteUnselected />}
     </StyledLink>
   );