Forms migration: LayoutSelector (#23790)

packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx

@@ -3,6 +3,7 @@ import { css } from 'emotion';
 import uniqueId from 'lodash/uniqueId';
 import { SelectableValue } from '@grafana/data';
 import { RadioButtonSize, RadioButton } from './RadioButton';
+import { Icon } from '../../Icon/Icon';
 
 const getRadioButtonGroupStyles = () => {
   return {
@@ -67,19 +68,20 @@ export function RadioButtonGroup<T>({
 
   return (
     <div className={styles.radioGroup}>
-      {options.map(o => {
+      {options.map((o, i) => {
         const isItemDisabled = disabledOptions && o.value && disabledOptions.includes(o.value);
         return (
           <RadioButton
             size={size}
             disabled={isItemDisabled || disabled}
             active={value === o.value}
-            key={o.label}
+            key={`o.label-${i}`}
             onChange={handleOnChange(o)}
             id={`option-${o.value}-${id}`}
             name={groupName.current}
             fullWidth={fullWidth}
           >
+            {o.icon && <Icon name={o.icon} />}
             {o.label}
           </RadioButton>
         );

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

 import React, { FC } from 'react';
-import { Icon } from '@grafana/ui';
+import { RadioButtonGroup } from '@grafana/ui';
 
 export type LayoutMode = LayoutModes.Grid | LayoutModes.List;
 
@@ -13,28 +13,15 @@ interface Props {
   onLayoutModeChanged: (mode: LayoutMode) => {};
 }
 
-const LayoutSelector: FC<Props> = props => {
-  const { mode, onLayoutModeChanged } = props;
-  return (
+const options = [
+  { icon: 'table', value: LayoutModes.Grid },
+  { icon: 'list-ul', value: LayoutModes.List },
+];
+
+const LayoutSelector: FC<Props> = ({ mode, onLayoutModeChanged }) => (
   <div className="layout-selector">
-      <button
-        onClick={() => {
-          onLayoutModeChanged(LayoutModes.List);
-        }}
-        className={mode === LayoutModes.List ? 'active' : ''}
-      >
-        <Icon name="list-ul" />
-      </button>
-      <button
-        onClick={() => {
-          onLayoutModeChanged(LayoutModes.Grid);
-        }}
-        className={mode === LayoutModes.Grid ? 'active' : ''}
-      >
-        <Icon name="table" />
-      </button>
+    <RadioButtonGroup value={mode} options={options} onChange={onLayoutModeChanged} />
   </div>
-  );
-};
+);
 
 export default LayoutSelector;

public/app/core/components/OrgActionBar/OrgActionBar.tsx

 import React, { PureComponent } from 'react';
 import LayoutSelector, { LayoutMode } from '../LayoutSelector/LayoutSelector';
 import { FilterInput } from '../FilterInput/FilterInput';
+import { LinkButton } from '@grafana/ui';
 
 export interface Props {
   searchQuery: string;
@@ -33,9 +34,7 @@ export default class OrgActionBar extends PureComponent<Props> {
           <LayoutSelector mode={layoutMode} onLayoutModeChanged={(mode: LayoutMode) => onSetLayoutMode(mode)} />
         </div>
         <div className="page-action-bar__spacer" />
-        <a className="btn btn-primary" {...linkProps}>
-          {linkButton.title}
-        </a>
+        <LinkButton {...linkProps}>{linkButton.title}</LinkButton>
       </div>
     );
   }

public/app/core/components/OrgActionBar/__snapshots__/OrgActionBar.test.tsx.snap

@@ -21,12 +21,11 @@ exports[`Render should render component 1`] = `
   <div
     className="page-action-bar__spacer"
   />
-  <a
-    className="btn btn-primary"
+  <LinkButton
     href="some/url"
     target="_blank"
   >
     test
-  </a>
+  </LinkButton>
 </div>
 `;

public/app/core/components/layout_selector/layout_selector.ts

-import store from 'app/core/store';
-import coreModule from 'app/core/core_module';
-import { GrafanaRootScope } from 'app/routes/GrafanaCtrl';
-import { CoreEvents } from 'app/types';
-
-const template = `
-<div class="layout-selector">
-  <button ng-click="ctrl.listView()" ng-class="{active: ctrl.mode === 'list'}">
-    <i class="fa fa-list"></i>
-  </button>
-  <button ng-click="ctrl.gridView()" ng-class="{active: ctrl.mode === 'grid'}">
-    <icon name="table"></i>
-  </button>
-</div>
-`;
-
-export class LayoutSelectorCtrl {
-  mode: string;
-
-  /** @ngInject */
-  constructor(private $rootScope: GrafanaRootScope) {
-    this.mode = store.get('grafana.list.layout.mode') || 'grid';
-  }
-
-  listView() {
-    this.mode = 'list';
-    store.set('grafana.list.layout.mode', 'list');
-    this.$rootScope.appEvent(CoreEvents.layoutModeChanged, 'list');
-  }
-
-  gridView() {
-    this.mode = 'grid';
-    store.set('grafana.list.layout.mode', 'grid');
-    this.$rootScope.appEvent(CoreEvents.layoutModeChanged, 'grid');
-  }
-}
-
-/** @ngInject */
-export function layoutSelector() {
-  return {
-    restrict: 'E',
-    controller: LayoutSelectorCtrl,
-    bindToController: true,
-    controllerAs: 'ctrl',
-    scope: {},
-    template: template,
-  };
-}
-
-/** @ngInject */
-export function layoutMode($rootScope: GrafanaRootScope) {
-  return {
-    restrict: 'A',
-    scope: {},
-    link: (scope: any, elem: any) => {
-      const layout = store.get('grafana.list.layout.mode') || 'grid';
-      let className = 'card-list-layout-' + layout;
-      elem.addClass(className);
-
-      $rootScope.onAppEvent(
-        CoreEvents.layoutModeChanged,
-        (evt: any, newLayout: any) => {
-          elem.removeClass(className);
-          className = 'card-list-layout-' + newLayout;
-          elem.addClass(className);
-        },
-        scope
-      );
-    },
-  };
-}
-
-coreModule.directive('layoutSelector', layoutSelector);
-coreModule.directive('layoutMode', layoutMode);

public/app/core/core.ts

@@ -23,7 +23,6 @@ import { infoPopover } from './components/info_popover';
 import { arrayJoin } from './directives/array_join';
 import { liveSrv } from './live/live_srv';
 import { Emitter } from './utils/emitter';
-import { layoutSelector } from './components/layout_selector/layout_selector';
 import { switchDirective } from './components/switch';
 import { dashboardSelector } from './components/dashboard_selector';
 import { queryPartEditorDirective } from './components/query_part/query_part_editor';
@@ -54,7 +53,6 @@ export {
   coreModule,
   searchDirective,
   liveSrv,
-  layoutSelector,
   switchDirective,
   infoPopover,
   Emitter,