Plugins: move app/feature/plugin properties into PluginMeta (#16809)

packages/grafana-ui/src/types/plugin.ts

@@ -24,6 +24,10 @@ export interface PluginMeta {
   // Filled in by the backend
   jsonData?: { [str: string]: any };
   enabled?: boolean;
+  defaultNavUrl?: string;
+  hasUpdate?: boolean;
+  latestVersion?: string;
+  pinned?: boolean;
 }
 
 export enum PluginIncludeType {

public/app/features/datasources/NewDataSourcePage.tsx

@@ -2,15 +2,16 @@ import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import { hot } from 'react-hot-loader';
 import Page from 'app/core/components/Page/Page';
-import { NavModel, Plugin, StoreState } from 'app/types';
+import { NavModel, StoreState } from 'app/types';
 import { addDataSource, loadDataSourceTypes, setDataSourceTypeSearchQuery } from './state/actions';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { getDataSourceTypes } from './state/selectors';
 import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
+import { DataSourcePluginMeta } from '@grafana/ui';
 
 export interface Props {
   navModel: NavModel;
-  dataSourceTypes: Plugin[];
+  dataSourceTypes: DataSourcePluginMeta[];
   isLoading: boolean;
   addDataSource: typeof addDataSource;
   loadDataSourceTypes: typeof loadDataSourceTypes;
@@ -23,7 +24,7 @@ class NewDataSourcePage extends PureComponent<Props> {
     this.props.loadDataSourceTypes();
   }
 
-  onDataSourceTypeClicked = (plugin: Plugin) => {
+  onDataSourceTypeClicked = (plugin: DataSourcePluginMeta) => {
     this.props.addDataSource(plugin);
   };
 

public/app/features/datasources/settings/DataSourceSettingsPage.tsx

@@ -21,8 +21,8 @@ import { getNavModel } from 'app/core/selectors/navModel';
 import { getRouteParamsId } from 'app/core/selectors/location';
 
 // Types
-import { NavModel, Plugin, StoreState } from 'app/types/';
-import { DataSourceSettings, DataSourcePlugin } from '@grafana/ui/src/types/';
+import { NavModel, StoreState } from 'app/types/';
+import { DataSourceSettings, DataSourcePlugin, DataSourcePluginMeta } from '@grafana/ui/src/types/';
 import { getDataSourceLoadingNav } from '../state/navModel';
 import PluginStateinfo from 'app/features/plugins/PluginStateInfo';
 import { importDataSourcePlugin } from 'app/features/plugins/plugin_loader';
@@ -30,7 +30,7 @@ import { importDataSourcePlugin } from 'app/features/plugins/plugin_loader';
 export interface Props {
   navModel: NavModel;
   dataSource: DataSourceSettings;
-  dataSourceMeta: Plugin;
+  dataSourceMeta: DataSourcePluginMeta;
   pageId: number;
   deleteDataSource: typeof deleteDataSource;
   loadDataSource: typeof loadDataSource;

public/app/features/datasources/settings/PluginSettings.tsx

 import React, { PureComponent } from 'react';
 import _ from 'lodash';
-import { Plugin } from 'app/types';
-import { DataSourceSettings, DataSourcePlugin } from '@grafana/ui/src/types';
+import { DataSourceSettings, DataSourcePlugin, DataSourcePluginMeta } from '@grafana/ui';
 import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
 
 export interface Props {
   plugin: DataSourcePlugin;
   dataSource: DataSourceSettings;
-  dataSourceMeta: Plugin;
+  dataSourceMeta: DataSourcePluginMeta;
   onModelChange: (dataSource: DataSourceSettings) => void;
 }
 

public/app/features/datasources/state/actions.ts

@@ -5,8 +5,8 @@ import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
 import { LayoutMode } from 'app/core/components/LayoutSelector/LayoutSelector';
 import { updateLocation, updateNavIndex, UpdateNavIndexAction } from 'app/core/actions';
 import { buildNavModel } from './navModel';
-import { DataSourceSettings } from '@grafana/ui/src/types';
-import { Plugin, StoreState, LocationUpdate } from 'app/types';
+import { DataSourceSettings, DataSourcePluginMeta } from '@grafana/ui';
+import { StoreState, LocationUpdate } from 'app/types';
 import { actionCreatorFactory } from 'app/core/redux';
 import { ActionOf, noPayloadActionCreatorFactory } from 'app/core/redux/actionCreatorFactory';
 import { getPluginSettings } from 'app/features/plugins/PluginSettingsCache';
@@ -15,11 +15,11 @@ export const dataSourceLoaded = actionCreatorFactory<DataSourceSettings>('LOAD_D
 
 export const dataSourcesLoaded = actionCreatorFactory<DataSourceSettings[]>('LOAD_DATA_SOURCES').create();
 
-export const dataSourceMetaLoaded = actionCreatorFactory<Plugin>('LOAD_DATA_SOURCE_META').create();
+export const dataSourceMetaLoaded = actionCreatorFactory<DataSourcePluginMeta>('LOAD_DATA_SOURCE_META').create();
 
 export const dataSourceTypesLoad = noPayloadActionCreatorFactory('LOAD_DATA_SOURCE_TYPES').create();
 
-export const dataSourceTypesLoaded = actionCreatorFactory<Plugin[]>('LOADED_DATA_SOURCE_TYPES').create();
+export const dataSourceTypesLoaded = actionCreatorFactory<DataSourcePluginMeta[]>('LOADED_DATA_SOURCE_TYPES').create();
 
 export const setDataSourcesSearchQuery = actionCreatorFactory<string>('SET_DATA_SOURCES_SEARCH_QUERY').create();
 
@@ -35,8 +35,8 @@ export type Action =
   | UpdateNavIndexAction
   | ActionOf<DataSourceSettings>
   | ActionOf<DataSourceSettings[]>
-  | ActionOf<Plugin>
-  | ActionOf<Plugin[]>
+  | ActionOf<DataSourcePluginMeta>
+  | ActionOf<DataSourcePluginMeta[]>
   | ActionOf<LocationUpdate>;
 
 type ThunkResult<R> = ThunkAction<R, StoreState, undefined, Action>;
@@ -51,14 +51,14 @@ export function loadDataSources(): ThunkResult<void> {
 export function loadDataSource(id: number): ThunkResult<void> {
   return async dispatch => {
     const dataSource = await getBackendSrv().get(`/api/datasources/${id}`);
-    const pluginInfo = await getPluginSettings(dataSource.type);
+    const pluginInfo = (await getPluginSettings(dataSource.type)) as DataSourcePluginMeta;
     dispatch(dataSourceLoaded(dataSource));
     dispatch(dataSourceMetaLoaded(pluginInfo));
     dispatch(updateNavIndex(buildNavModel(dataSource, pluginInfo)));
   };
 }
 
-export function addDataSource(plugin: Plugin): ThunkResult<void> {
+export function addDataSource(plugin: DataSourcePluginMeta): ThunkResult<void> {
   return async (dispatch, getStore) => {
     await dispatch(loadDataSources());
 
@@ -84,7 +84,7 @@ export function loadDataSourceTypes(): ThunkResult<void> {
   return async dispatch => {
     dispatch(dataSourceTypesLoad());
     const result = await getBackendSrv().get('/api/plugins', { enabled: 1, type: 'datasource' });
-    dispatch(dataSourceTypesLoaded(result));
+    dispatch(dataSourceTypesLoaded(result as DataSourcePluginMeta[]));
   };
 }
 

public/app/features/datasources/state/reducers.test.ts

@@ -14,8 +14,8 @@ import {
 } from './actions';
 import { getMockDataSources, getMockDataSource } from '../__mocks__/dataSourcesMocks';
 import { LayoutModes } from 'app/core/components/LayoutSelector/LayoutSelector';
-import { DataSourcesState, Plugin } from 'app/types';
-import { PluginMetaInfo, PluginType } from '@grafana/ui';
+import { DataSourcesState } from 'app/types';
+import { PluginMetaInfo, PluginType, PluginMeta } from '@grafana/ui';
 
 const mockPlugin = () =>
   ({
@@ -29,7 +29,7 @@ const mockPlugin = () =>
     pinned: true,
     type: PluginType.datasource,
     module: 'path/to/module',
-  } as Plugin);
+  } as PluginMeta);
 
 describe('dataSourcesReducer', () => {
   describe('when dataSourcesLoaded is dispatched', () => {

public/app/features/datasources/state/reducers.ts

-import { DataSourcesState, Plugin } from 'app/types';
-import { DataSourceSettings } from '@grafana/ui/src/types';
+import { DataSourcesState } from 'app/types';
+import { DataSourceSettings, DataSourcePluginMeta } from '@grafana/ui';
 import {
   dataSourceLoaded,
   dataSourcesLoaded,
@@ -25,7 +25,7 @@ export const initialState: DataSourcesState = {
   dataSourceTypeSearchQuery: '',
   hasFetched: false,
   isLoadingDataSources: false,
-  dataSourceMeta: {} as Plugin,
+  dataSourceMeta: {} as DataSourcePluginMeta,
 };
 
 export const dataSourcesReducer = reducerFactory(initialState)

public/app/features/datasources/state/selectors.ts

-import { DataSourceSettings } from '@grafana/ui/src/types';
+import { DataSourceSettings, DataSourcePluginMeta } from '@grafana/ui/src/types';
 
 export const getDataSources = state => {
   const regex = new RegExp(state.searchQuery, 'i');
@@ -23,12 +23,12 @@ export const getDataSource = (state, dataSourceId): DataSourceSettings | null =>
   return {} as DataSourceSettings;
 };
 
-export const getDataSourceMeta = (state, type): Plugin => {
+export const getDataSourceMeta = (state, type): DataSourcePluginMeta => {
   if (state.dataSourceMeta.id === type) {
     return state.dataSourceMeta;
   }
 
-  return {} as Plugin;
+  return {} as DataSourcePluginMeta;
 };
 
 export const getDataSourcesSearchQuery = state => state.searchQuery;

public/app/features/plugins/PluginList.tsx

 import React, { FC } from 'react';
 import classNames from 'classnames';
 import PluginListItem from './PluginListItem';
-import { Plugin } from 'app/types';
+import { PluginMeta } from '@grafana/ui';
 import { LayoutMode, LayoutModes } from '../../core/components/LayoutSelector/LayoutSelector';
 
 interface Props {
-  plugins: Plugin[];
+  plugins: PluginMeta[];
   layoutMode: LayoutMode;
 }
 

public/app/features/plugins/PluginListItem.tsx

 import React, { FC } from 'react';
-import { Plugin } from 'app/types';
+import { PluginMeta } from '@grafana/ui';
 
 interface Props {
-  plugin: Plugin;
+  plugin: PluginMeta;
 }
 
 const PluginListItem: FC<Props> = props => {

public/app/features/plugins/PluginListPage.test.tsx

 import React from 'react';
 import { shallow } from 'enzyme';
 import { PluginListPage, Props } from './PluginListPage';
-import { NavModel, Plugin } from '../../types';
+import { NavModel } from '../../types';
 import { LayoutModes } from '../../core/components/LayoutSelector/LayoutSelector';
+import { PluginMeta } from '@grafana/ui';
 
 const setup = (propOverrides?: object) => {
   const props: Props = {
@@ -14,7 +15,7 @@ const setup = (propOverrides?: object) => {
         text: 'Plugins',
       },
     } as NavModel,
-    plugins: [] as Plugin[],
+    plugins: [] as PluginMeta[],
     searchQuery: '',
     setPluginsSearchQuery: jest.fn(),
     setPluginsLayoutMode: jest.fn(),

public/app/features/plugins/PluginListPage.tsx

@@ -4,15 +4,16 @@ import { connect } from 'react-redux';
 import Page from 'app/core/components/Page/Page';
 import OrgActionBar from 'app/core/components/OrgActionBar/OrgActionBar';
 import PluginList from './PluginList';
-import { NavModel, Plugin } from 'app/types';
+import { NavModel } from 'app/types';
 import { loadPlugins, setPluginsLayoutMode, setPluginsSearchQuery } from './state/actions';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { getLayoutMode, getPlugins, getPluginsSearchQuery } from './state/selectors';
 import { LayoutMode } from 'app/core/components/LayoutSelector/LayoutSelector';
+import { PluginMeta } from '@grafana/ui';
 
 export interface Props {
   navModel: NavModel;
-  plugins: Plugin[];
+  plugins: PluginMeta[];
   layoutMode: LayoutMode;
   searchQuery: string;
   hasFetched: boolean;

public/app/features/plugins/PluginSettingsCache.ts

 import { getBackendSrv } from 'app/core/services/backend_srv';
-import { Plugin } from 'app/types';
+import { PluginMeta } from '@grafana/ui';
 
 type PluginCache = {
-  [key: string]: Plugin;
+  [key: string]: PluginMeta;
 };
 
 const pluginInfoCache: PluginCache = {};
 
-export function getPluginSettings(pluginId: string): Promise<Plugin> {
+export function getPluginSettings(pluginId: string): Promise<PluginMeta> {
   const v = pluginInfoCache[pluginId];
   if (v) {
     return Promise.resolve(v);

public/app/features/plugins/__mocks__/pluginMocks.ts

-import { Plugin } from 'app/types';
-import { PanelPluginMeta, PluginType, PanelDataFormat } from '@grafana/ui';
+import { PanelPluginMeta, PluginMeta, PluginType, PanelDataFormat } from '@grafana/ui';
 
-export const getMockPlugins = (amount: number): Plugin[] => {
+export const getMockPlugins = (amount: number): PluginMeta[] => {
   const plugins = [];
 
   for (let i = 0; i <= amount; i++) {
@@ -87,5 +86,5 @@ export const getMockPlugin = () => {
     pinned: false,
     type: PluginType.panel,
     module: 'path/to/module',
-  } as Plugin;
+  } as PluginMeta;
 };

public/app/features/plugins/state/actions.ts

-import { Plugin, StoreState } from 'app/types';
+import { StoreState } from 'app/types';
 import { ThunkAction } from 'redux-thunk';
 import { getBackendSrv } from '../../../core/services/backend_srv';
 import { LayoutMode } from '../../../core/components/LayoutSelector/LayoutSelector';
 import { PluginDashboard } from '../../../types/plugins';
+import { PluginMeta } from '@grafana/ui';
 
 export enum ActionTypes {
   LoadPlugins = 'LOAD_PLUGINS',
@@ -14,7 +15,7 @@ export enum ActionTypes {
 
 export interface LoadPluginsAction {
   type: ActionTypes.LoadPlugins;
-  payload: Plugin[];
+  payload: PluginMeta[];
 }
 
 export interface LoadPluginDashboardsAction {
@@ -46,7 +47,7 @@ export const setPluginsSearchQuery = (query: string): SetPluginsSearchQueryActio
   payload: query,
 });
 
-const pluginsLoaded = (plugins: Plugin[]): LoadPluginsAction => ({
+const pluginsLoaded = (plugins: PluginMeta[]): LoadPluginsAction => ({
   type: ActionTypes.LoadPlugins,
   payload: plugins,
 });

public/app/features/plugins/state/reducers.ts

 import { Action, ActionTypes } from './actions';
-import { Plugin, PluginsState } from 'app/types';
+import { PluginsState } from 'app/types';
 import { LayoutModes } from '../../../core/components/LayoutSelector/LayoutSelector';
 import { PluginDashboard } from '../../../types/plugins';
+import { PluginMeta } from '@grafana/ui';
 
 export const initialState: PluginsState = {
-  plugins: [] as Plugin[],
+  plugins: [] as PluginMeta[],
   searchQuery: '',
   layoutMode: LayoutModes.Grid,
   hasFetched: false,

public/app/types/datasources.ts

 import { LayoutMode } from '../core/components/LayoutSelector/LayoutSelector';
-import { Plugin } from './plugins';
-import { DataSourceSettings } from '@grafana/ui/src/types';
+import { DataSourceSettings, DataSourcePluginMeta } from '@grafana/ui/src/types';
 
 export interface DataSourcesState {
   dataSources: DataSourceSettings[];
@@ -8,9 +7,9 @@ export interface DataSourcesState {
   dataSourceTypeSearchQuery: string;
   layoutMode: LayoutMode;
   dataSourcesCount: number;
-  dataSourceTypes: Plugin[];
+  dataSourceTypes: DataSourcePluginMeta[];
   dataSource: DataSourceSettings;
-  dataSourceMeta: Plugin;
+  dataSourceMeta: DataSourcePluginMeta;
   hasFetched: boolean;
   isLoadingDataSources: boolean;
 }

public/app/types/plugins.ts

 import { PluginMeta } from '@grafana/ui';
 
-/**
- * Values we don't want in the public API
- */
-export interface Plugin extends PluginMeta {
-  defaultNavUrl: string;
-  hasUpdate: boolean;
-  latestVersion: string;
-  pinned: boolean;
-}
-
 export interface PluginDashboard {
   dashboardId: number;
   description: string;
@@ -27,7 +17,7 @@ export interface PluginDashboard {
 }
 
 export interface PluginsState {
-  plugins: Plugin[];
+  plugins: PluginMeta[];
   searchQuery: string;
   layoutMode: string;
   hasFetched: boolean;