Chore: Fix two minor bugs related to favorite datasources (#113444)

public/app/features/datasources/components/picker/DataSourceCard.tsx

@@ -41,6 +41,7 @@ export function DataSourceCard({
             <small className={styles.type}>{description || ds.meta.name}</small>
             {onToggleFavorite && !ds.meta.builtIn && (
               <Icon
+                key={(isFavorite ? 'favorite' : 'star') + '-' + ds.uid}
                 name={isFavorite ? 'favorite' : 'star'}
                 onClick={(e) => {
                   e.stopPropagation();

public/app/features/datasources/components/picker/DataSourceList.tsx

@@ -6,7 +6,7 @@ import { Observable } from 'rxjs';
 import { DataSourceInstanceSettings, DataSourceJsonData, DataSourceRef, GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { Trans } from '@grafana/i18n';
-import { getTemplateSrv, reportInteraction, useFavoriteDatasources } from '@grafana/runtime';
+import { FavoriteDatasources, getTemplateSrv, reportInteraction } from '@grafana/runtime';
 import { useStyles2, useTheme2 } from '@grafana/ui';
 
 import { useDatasources, useKeyboardNavigatableList, useRecentlyUsedDataSources } from '../../hooks';
@@ -45,6 +45,7 @@ export interface DataSourceListProps {
   onClickEmptyStateCTA?: () => void;
   enableKeyboardNavigation?: boolean;
   dataSources?: Array<DataSourceInstanceSettings<DataSourceJsonData>>;
+  favoriteDataSources: FavoriteDatasources;
 }
 
 export function DataSourceList(props: DataSourceListProps) {
@@ -58,7 +59,7 @@ export function DataSourceList(props: DataSourceListProps) {
   const theme = useTheme2();
   const styles = getStyles(theme, selectedItemCssSelector);
 
-  const { className, current, onChange, enableKeyboardNavigation, onClickEmptyStateCTA } = props;
+  const { className, current, onChange, enableKeyboardNavigation, onClickEmptyStateCTA, favoriteDataSources } = props;
   const dataSources = useDatasources(
     {
       alerting: props.alerting,
@@ -76,7 +77,6 @@ export function DataSourceList(props: DataSourceListProps) {
   );
 
   const [recentlyUsedDataSources, pushRecentlyUsedDataSource] = useRecentlyUsedDataSources();
-  const favoriteDataSources = useFavoriteDatasources();
 
   const filteredDataSources = props.filter ? dataSources.filter(props.filter) : dataSources;
 

public/app/features/datasources/components/picker/DataSourceModal.tsx

@@ -219,6 +219,7 @@ export function DataSourceModal({
             dashboard={dashboard}
             mixed={mixed}
             dataSources={dataSources}
+            favoriteDataSources={favoriteDataSources}
           />
           <BuiltInList className={styles.appendBuiltInDataSourcesList} />
         </ScrollContainer>

public/app/features/datasources/components/picker/DataSourcePicker.tsx

@@ -11,7 +11,7 @@ import { Observable } from 'rxjs';
 import { DataSourceInstanceSettings, GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { Trans, t } from '@grafana/i18n';
-import { reportInteraction, useFavoriteDatasources } from '@grafana/runtime';
+import { FavoriteDatasources, reportInteraction, useFavoriteDatasources } from '@grafana/runtime';
 import { DataQuery, DataSourceJsonData, DataSourceRef } from '@grafana/schema';
 import { Button, floatingUtils, Icon, Input, ModalsController, Portal, ScrollContainer, useStyles2 } from '@grafana/ui';
 import config from 'app/core/config';
@@ -306,6 +306,7 @@ export function DataSourcePicker(props: DataSourcePickerProps) {
               onDismiss={onClose}
               onNavigateOutsiteFooter={onNavigateOutsiteFooter}
               dataSources={dataSources}
+              favoriteDataSources={favoriteDataSources}
             />
           </div>
         </Portal>
@@ -343,10 +344,11 @@ export interface PickerContentProps extends DataSourcePickerProps {
   footerRef: (element: HTMLElement | null) => void;
   onNavigateOutsiteFooter: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
   dataSources: Array<DataSourceInstanceSettings<DataSourceJsonData>>;
+  favoriteDataSources: FavoriteDatasources;
 }
 
 const PickerContent = React.forwardRef<HTMLDivElement, PickerContentProps>((props, ref) => {
-  const { filterTerm, onChange, onClose, onClickAddCSV, current, filter, dataSources } = props;
+  const { filterTerm, onChange, onClose, onClickAddCSV, current, filter, dataSources, favoriteDataSources } = props;
 
   const changeCallback = useCallback(
     (ds: DataSourceInstanceSettings) => {
@@ -368,6 +370,7 @@ const PickerContent = React.forwardRef<HTMLDivElement, PickerContentProps>((prop
       <ScrollContainer showScrollIndicators>
         <DataSourceList
           {...props}
+          favoriteDataSources={favoriteDataSources}
           enableKeyboardNavigation
           className={styles.dataSourceList}
           current={current}