feat: add favorite star to dashboard and chart lists (#10510)

superset-frontend/src/explore/components/ExploreChartHeader.jsx

@@ -20,6 +20,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import PropTypes from 'prop-types';
+import styled from '@superset-ui/style';
 import { t } from '@superset-ui/translation';
 
 import { chartPropShape } from '../../dashboard/util/propShapes';
@@ -55,6 +56,33 @@ const propTypes = {
   chart: chartPropShape,
 };
 
+const StyledHeader = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  span[role='button'] {
+    display: flex;
+    height: 100%;
+  }
+
+  .right-button-panel {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    justify-content: flex-end;
+
+    .btn-group {
+      flex: 0 0 auto;
+    }
+  }
+`;
+
+const StyledButtons = styled.span`
+  display: flex;
+  align-items: center;
+`;
+
 export class ExploreChartHeader extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -103,7 +131,7 @@ export class ExploreChartHeader extends React.PureComponent {
       this.props.chart.chartStatus,
     );
     return (
-      <div id="slice-header" className="clearfix panel-title-large">
+      <StyledHeader id="slice-header" className="clearfix panel-title-large">
         <EditableTitle
           title={this.getSliceName()}
           canEdit={!this.props.slice || this.props.can_overwrite}
@@ -111,12 +139,13 @@ export class ExploreChartHeader extends React.PureComponent {
         />
 
         {this.props.slice && (
-          <span>
+          <StyledButtons>
             <FaveStar
               itemId={this.props.slice.slice_id}
               fetchFaveStar={this.props.actions.fetchFaveStar}
               saveFaveStar={this.props.actions.saveFaveStar}
               isStarred={this.props.isStarred}
+              showTooltip
             />
             <PropertiesModal
               show={this.state.isPropertiesModalOpen}
@@ -137,15 +166,16 @@ export class ExploreChartHeader extends React.PureComponent {
                 <i className="fa fa-edit" />
               </span>
             </TooltipWrapper>
-          </span>
+          </StyledButtons>
         )}
         {this.props.chart.sliceFormData && (
           <AlteredSliceTag
+            className="altered"
             origFormData={this.props.chart.sliceFormData}
             currentFormData={formData}
           />
         )}
-        <div className="pull-right">
+        <div className="right-button-panel">
           {chartFinished && queryResponse && (
             <RowCountLabel
               rowcount={Number(queryResponse.rowcount) || 0}
@@ -174,7 +204,7 @@ export class ExploreChartHeader extends React.PureComponent {
             queryResponse={queryResponse}
           />
         </div>
-      </div>
+      </StyledHeader>
     );
   }
 }