Variables are available in the new DS picker and modal (#66923)

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

@@ -146,11 +146,10 @@ const PickerContent = React.forwardRef<HTMLDivElement, PickerContentProps>((prop
       <div className={styles.dataSourceList}>
         <CustomScrollbar>
           <DataSourceList
-            mixed
-            dashboard
+            {...props}
             current={current}
             onChange={changeCallback}
-            filter={(ds) => !ds.meta.builtIn && ds.name.includes(filterTerm ?? '')}
+            filter={(ds) => ds.name.includes(filterTerm ?? '')}
           ></DataSourceList>
         </CustomScrollbar>
       </div>

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

@@ -60,6 +60,7 @@ export function DataSourceModal({
             <DataSourceList
               dashboard={false}
               mixed={false}
+              variables
               // FIXME: Filter out the grafana data source in a hacky way
               filter={(ds) => ds.name.includes(search) && ds.name !== '-- Grafana --'}
               onChange={onChange}

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

@@ -81,6 +81,7 @@ export class DataSourcePicker extends PureComponent<DataSourcePickerProps, DataS
     return (
       <div>
         <DataSourceDropdown
+          {...this.props}
           datasources={this.getDatasources()}
           onChange={this.onChange}
           recentlyUsed={recentlyUsed}