rewrote to use react.sfc

public/app/core/components/LayoutSelector/LayoutSelector.tsx

@@ -1,24 +1,39 @@
-import React from 'react';
+import React, { SFC } from 'react';
 
-export default function LayoutSelector({ mode, onLayoutModeChanged }) {
+export type LayoutMode = LayoutModes.Grid | LayoutModes.List;
+
+export enum LayoutModes {
+  Grid = 'grid',
+  List = 'list',
+}
+
+interface Props {
+  mode: LayoutMode;
+  onLayoutModeChanged: (mode: LayoutMode) => {};
+}
+
+const LayoutSelector: SFC<Props> = props => {
+  const { mode, onLayoutModeChanged } = props;
   return (
     <div className="layout-selector">
       <button
         onClick={() => {
-          onLayoutModeChanged('list');
+          onLayoutModeChanged(LayoutModes.List);
         }}
-        className={mode === 'list' ? 'active' : ''}
+        className={mode === LayoutModes.List ? 'active' : ''}
       >
         <i className="fa fa-list" />
       </button>
       <button
         onClick={() => {
-          onLayoutModeChanged('grid');
+          onLayoutModeChanged(LayoutModes.Grid);
         }}
-        className={mode === 'grid' ? 'active' : ''}
+        className={mode === LayoutModes.Grid ? 'active' : ''}
       >
         <i className="fa fa-th" />
       </button>
     </div>
   );
-}
+};
+
+export default LayoutSelector;

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

@@ -1,11 +1,12 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { PluginActionBar, Props } from './PluginActionBar';
+import { LayoutModes } from '../../core/components/LayoutSelector/LayoutSelector';
 
 const setup = (propOverrides?: object) => {
   const props: Props = {
     searchQuery: '',
-    layoutMode: 'grid',
+    layoutMode: LayoutModes.Grid,
     setLayoutMode: jest.fn(),
     setPluginsSearchQuery: jest.fn(),
   };

public/app/features/plugins/PluginActionBar.tsx

@@ -1,12 +1,12 @@
 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
-import LayoutSelector from '../../core/components/LayoutSelector/LayoutSelector';
+import LayoutSelector, { LayoutMode } from '../../core/components/LayoutSelector/LayoutSelector';
 import { setLayoutMode, setPluginsSearchQuery } from './state/actions';
 import { getPluginsSearchQuery, getLayoutMode } from './state/selectors';
 
 export interface Props {
   searchQuery: string;
-  layoutMode: string;
+  layoutMode: LayoutMode;
   setLayoutMode: typeof setLayoutMode;
   setPluginsSearchQuery: typeof setPluginsSearchQuery;
 }
@@ -32,7 +32,7 @@ export class PluginActionBar extends PureComponent<Props> {
             />
             <i className="gf-form-input-icon fa fa-search" />
           </label>
-          <LayoutSelector mode={layoutMode} onLayoutModeChanged={mode => setLayoutMode(mode)} />
+          <LayoutSelector mode={layoutMode} onLayoutModeChanged={(mode: LayoutMode) => setLayoutMode(mode)} />
         </div>
         <div className="page-action-bar__spacer" />
         <a

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

@@ -2,12 +2,13 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import PluginList from './PluginList';
 import { getMockPlugins } from './__mocks__/pluginMocks';
+import { LayoutModes } from '../../core/components/LayoutSelector/LayoutSelector';
 
 const setup = (propOverrides?: object) => {
   const props = Object.assign(
     {
       plugins: getMockPlugins(5),
-      layout: 'grid',
+      layoutMode: LayoutModes.Grid,
     },
     propOverrides
   );

public/app/features/plugins/PluginList.tsx

@@ -1,12 +1,21 @@
-import React from 'react';
+import React, { SFC } from 'react';
 import classNames from 'classnames/bind';
 import PluginListItem from './PluginListItem';
+import { Plugin } from 'app/types';
+import { LayoutMode, LayoutModes } from '../../core/components/LayoutSelector/LayoutSelector';
+
+interface Props {
+  plugins: Plugin[];
+  layoutMode: LayoutMode;
+}
+
+const PluginList: SFC<Props> = props => {
+  const { plugins, layoutMode } = props;
 
-export default function PluginList({ plugins, layout }) {
   const listStyle = classNames({
     'card-section': true,
-    'card-list-layout-grid': layout === 'grid',
-    'card-list-layout-list': layout === 'list',
+    'card-list-layout-grid': layoutMode === LayoutModes.Grid,
+    'card-list-layout-list': layoutMode === LayoutModes.List,
   });
 
   return (
@@ -18,4 +27,6 @@ export default function PluginList({ plugins, layout }) {
       </ol>
     </section>
   );
-}
+};
+
+export default PluginList;

public/app/features/plugins/PluginListItem.tsx

@@ -1,6 +1,13 @@
-import React from 'react';
+import React, { SFC } from 'react';
+import { Plugin } from 'app/types';
+
+interface Props {
+  plugin: Plugin;
+}
+
+const PluginListItem: SFC<Props> = props => {
+  const { plugin } = props;
 
-export default function PluginListItem({ plugin }) {
   return (
     <li className="card-item-wrapper">
       <a className="card-item" href={`plugins/${plugin.id}/edit`}>
@@ -27,4 +34,6 @@ export default function PluginListItem({ plugin }) {
       </a>
     </li>
   );
-}
+};
+
+export default PluginListItem;

public/app/features/plugins/PluginListPage.tsx

@@ -8,11 +8,12 @@ import { NavModel, Plugin } from '../../types';
 import { loadPlugins } from './state/actions';
 import { getNavModel } from '../../core/selectors/navModel';
 import { getLayoutMode, getPlugins } from './state/selectors';
+import { LayoutMode } from '../../core/components/LayoutSelector/LayoutSelector';
 
 export interface Props {
   navModel: NavModel;
   plugins: Plugin[];
-  layoutMode: string;
+  layoutMode: LayoutMode;
   loadPlugins: typeof loadPlugins;
 }
 
@@ -33,7 +34,7 @@ export class PluginListPage extends PureComponent<Props> {
         <PageHeader model={navModel} />
         <div className="page-container page-body">
           <PluginActionBar />
-          {plugins && <PluginList plugins={plugins} layout={layoutMode} />}
+          {plugins && <PluginList plugins={plugins} layoutMode={layoutMode} />}
         </div>
       </div>
     );

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

@@ -10,7 +10,7 @@ exports[`Render should render component 1`] = `
   >
     <Connect(PluginActionBar) />
     <PluginList
-      layout="grid"
+      layoutMode="grid"
       plugins={Array []}
     />
   </div>

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

@@ -1,6 +1,7 @@
 import { Plugin, StoreState } from 'app/types';
 import { ThunkAction } from 'redux-thunk';
 import { getBackendSrv } from '../../../core/services/backend_srv';
+import { LayoutMode } from '../../../core/components/LayoutSelector/LayoutSelector';
 
 export enum ActionTypes {
   LoadPlugins = 'LOAD_PLUGINS',
@@ -20,10 +21,10 @@ export interface SetPluginsSearchQueryAction {
 
 export interface SetLayoutModeAction {
   type: ActionTypes.SetLayoutMode;
-  payload: string;
+  payload: LayoutMode;
 }
 
-export const setLayoutMode = (mode: string): SetLayoutModeAction => ({
+export const setLayoutMode = (mode: LayoutMode): SetLayoutModeAction => ({
   type: ActionTypes.SetLayoutMode,
   payload: mode,
 });

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

@@ -1,7 +1,8 @@
 import { Action, ActionTypes } from './actions';
 import { Plugin, PluginsState } from 'app/types';
+import { LayoutModes } from '../../../core/components/LayoutSelector/LayoutSelector';
 
-export const initialState: PluginsState = { plugins: [] as Plugin[], searchQuery: '', layoutMode: 'grid' };
+export const initialState: PluginsState = { plugins: [] as Plugin[], searchQuery: '', layoutMode: LayoutModes.Grid };
 
 export const pluginsReducer = (state = initialState, action: Action): PluginsState => {
   switch (action.type) {