Replace angular-based fonticon picker with a react component

app/assets/stylesheets/application.scss

@@ -2,6 +2,7 @@
 
 @import "font-fabulous-sprockets";
 @import "font-fabulous";
+@import "fonticon_picker";
 @import "patternfly-sprockets";
 @import "patternfly";
 @import "patternfly_overrides";

app/assets/stylesheets/fonticon_picker.scss

@@ -0,0 +1,18 @@
+.fonticon-picker-modal {
+  height: calc(100vh - 260px);
+  overflow-y: auto !important;
+  overflow-x: hidden;
+
+  div.fonticon {
+    font-size: 24px;
+    text-align: center;
+
+    span.active {
+      i {
+        padding: 3px 5px 3px 5px;
+        background-color: #0088ce;
+        color: #fff;
+      }
+    }
+  }
+}

app/javascript/components/fonticon-picker/icon-list.jsx

@@ -0,0 +1,57 @@
+import React, { useMemo } from 'react';
+import { Grid, Row, Col } from 'patternfly-react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const isFontIcon = (value, family) => value.selectorText && value.selectorText.includes(`.${family}-`) && value.cssText.includes('content:');
+
+const clearRule = (rule, family) => {
+  const re = new RegExp(`.*(${family}\-[a-z0-9\-\_]+).*`);
+  return rule.replace(re, '$1');
+};
+
+const findIcons = family => _.chain(document.styleSheets)
+  .map(oneSheet => oneSheet.cssRules)
+  .map(rule => _.filter(rule, value => isFontIcon(value, family)))
+  .filter(rules => rules.length !== 0)
+  .map(rules => _.map(rules, value => clearRule(value.selectorText, family)))
+  .flatten()
+  .value()
+  .map(icon => `${family} ${icon}`);
+
+const IconList = ({ type, activeIcon, activeTab, setState }) => {
+  const icons = useMemo(() => findIcons(type), [type]);
+
+  // Short path for not rendering the icons if the tab isn't active
+  if (activeTab !== type) {
+    return <div />;
+  }
+
+  return (
+    <Grid fluid>
+      <Row>
+        { icons.map(icon => (
+          <Col xs={1} key={icon} className="fonticon" onClick={() => setState(state => ({ ...state, activeIcon: icon }))}>
+            <span className={classNames({ active: icon === activeIcon })}>
+              <i className={icon} title={icon.replace(' ', '.')} />
+            </span>
+          </Col>
+        )) }
+      </Row>
+    </Grid>
+  );
+};
+
+IconList.propTypes = {
+  type: PropTypes.string.isRequired,
+  activeIcon: PropTypes.string,
+  activeTab: PropTypes.string,
+  setState: PropTypes.func.isRequired,
+};
+
+IconList.defaultProps = {
+  activeIcon: undefined,
+  activeTab: undefined,
+};
+
+export default IconList;

app/javascript/components/fonticon-picker/index.jsx

@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+import {
+  Button,
+  Modal,
+  ButtonGroup,
+  Icon,
+  Tabs,
+  Tab,
+} from 'patternfly-react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import IconList from './icon-list';
+
+const FontIconPicker = ({ iconTypes, selected, onChangeURL }) => {
+  const [{
+    showModal,
+    selectedIcon,
+    activeTab,
+    activeIcon,
+  }, setState] = useState({
+    showModal: false,
+    selectedIcon: selected,
+    activeIcon: selected,
+    activeTab: selected ? selected.split(' ')[0] : Object.keys(iconTypes)[0],
+  });
+
+  const onModalApply = () => {
+    // This is required to connect the old session-backed form with the component
+    window.miqObserveRequest(onChangeURL, { data: { button_icon: activeIcon } });
+    setState(state => ({ ...state, showModal: false, selectedIcon: activeIcon }));
+  };
+
+  const hideModal = () => setState(state => ({ ...state, showModal: false }));
+
+  return (
+    <div className="fonticon-picker">
+      <ButtonGroup>
+        <Button className="icon-picker-btn">
+          { selectedIcon ? (<i id="selected-icon" className={classNames('fa-lg', selectedIcon)} />) : __('No icon') }
+        </Button>
+        <Button onClick={() => setState(state => ({ ...state, showModal: true }))}><Icon type="fa" name="angle-down" /></Button>
+      </ButtonGroup>
+      <Modal show={showModal} onHide={hideModal} bsSize="large">
+        <Modal.Header>
+          <button
+            id="close-icon-picker-modal"
+            type="button"
+            className="close"
+            onClick={hideModal}
+            aria-label={__('Close')}
+          >
+            <Icon type="pf" name="close" />
+          </button>
+          <Modal.Title>{ __('Select an icon') }</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <div className="fonticon-picker-modal">
+            <Tabs id="font-icon-tabs" activeKey={activeTab} animation={false} onSelect={activeTab => setState(state => ({ ...state, activeTab }))}>
+              { Object.keys(iconTypes).map(type => (
+                <Tab eventKey={type} key={type} title={iconTypes[type]}>
+                  <IconList {...{
+                    type,
+                    activeIcon,
+                    activeTab,
+                    setState,
+                  }} />
+                </Tab>
+              )) }
+            </Tabs>
+          </div>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button
+            id="apply-icon-picker-icon"
+            bsStyle="primary"
+            onClick={onModalApply}
+            disabled={selectedIcon === activeIcon || activeIcon === undefined}
+          >
+            { __('Apply') }
+          </Button>
+          <Button id="cancel-icon-picker-modal" bsStyle="default" className="btn-cancel" onClick={hideModal}>
+            { __('Cancel') }
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </div>
+  );
+};
+
+FontIconPicker.propTypes = {
+  iconTypes: PropTypes.any,
+  selected: PropTypes.string,
+  onChangeURL: PropTypes.string.isRequired,
+};
+
+FontIconPicker.defaultProps = {
+  selected: undefined,
+  iconTypes: {
+    ff: 'Font Fabulous',
+    pficon: 'PatternFly',
+    fa: 'Font Awesome',
+  },
+};
+
+export default FontIconPicker;

app/javascript/packs/component-definitions-common.js

@@ -15,6 +15,7 @@ import FirmwareRegistryForm from '../components/firmware-registry/firmware-regis
 import FormButtonsRedux from '../forms/form-buttons-redux';
 import GenericGroupWrapper from '../react/generic_group_wrapper';
 import { HierarchicalTreeView } from '../components/tree-view';
+import FonticonPicker from '../components/fonticon-picker';
 import ImportDatastoreViaGit from '../components/automate-import-export-form/import-datastore-via-git';
 import MainMenu from '../components/main-menu/main-menu';
 import MiqAboutModal from '../components/miq-about-modal';
@@ -64,6 +65,7 @@ ManageIQ.component.addReact('GenericGroup', GenericGroup);
 ManageIQ.component.addReact('GenericGroupWrapper', GenericGroupWrapper);
 ManageIQ.component.addReact('navbar.Help', navbar.Help);
 ManageIQ.component.addReact('HierarchicalTreeView', HierarchicalTreeView);
+ManageIQ.component.addReact('FonticonPicker', FonticonPicker);
 ManageIQ.component.addReact('ImportDatastoreViaGit', ImportDatastoreViaGit);
 ManageIQ.component.addReact('MainMenu', MainMenu);
 ManageIQ.component.addReact('MiqAboutModal', MiqAboutModal);

app/views/shared/buttons/_ab_options_form.html.haml

@@ -45,11 +45,8 @@
     .form-group
       %label.control-label.col-md-2
         = _('Icon')
-      .col-md-8#button-icon-picker{'ng-controller' => 'fonticonPickerController as vm'}
-        %miq-fonticon-picker{'input-name' => 'button_icon', :selected => @edit[:new][:button_icon], 'icon-changed' => 'vm.select(selected);'}
-          %miq-fonticon-family{:selector => 'ff', :title => 'Font Fabulous'}
-          %miq-fonticon-family{:selector => 'pficon', :title => 'PatternFly'}
-          %miq-fonticon-family{:selector => 'fa', :title => 'Font Awesome'}
+      .col-md-8#button-icon-picker
+        = react 'FonticonPicker', :selected => @edit[:new][:button_icon], :onChangeURL => url
     .form-group
       %label.control-label.col-md-2
         = _('Icon Color')
@@ -102,15 +99,3 @@
   miqSelectPickerEvent('dialog_id', '#{url}');
   miqSelectPickerEvent('display_for', '#{url}');
   miqSelectPickerEvent('submit_how', '#{url}');
-  miq_bootstrap('#button-icon-picker');
-
-  // This is an ugly hack to be able to use this component in a non-angular context with miq-observe
-  // FIXME: Remove this when the form is converted to angular
-  $(function() {
-    $('#button-icon-picker input[type="hidden"]').on('change', _.debounce(function() {
-      miqObserveRequest('#{url}', {
-        no_encoding: true,
-        data: 'button_icon' + '=' + $(this).val(),
-      });
-    }, 700, {leading: true, trailing: true}));
-  });

app/views/shared/buttons/_group_form.html.haml

@@ -31,11 +31,8 @@
     .form-group
       %label.control-label.col-md-2
         = _('Icon')
-      .col-md-8#button-icon-picker{'ng-controller' => 'fonticonPickerController as vm'}
-        %miq-fonticon-picker{'input-name' => 'button_icon', :selected => @edit[:new][:button_icon], 'icon-changed' => 'vm.select(selected);'}
-          %miq-fonticon-family{:selector => 'ff', :title => 'Font Fabulous'}
-          %miq-fonticon-family{:selector => 'pficon', :title => 'PatternFly'}
-          %miq-fonticon-family{:selector => 'fa', :title => 'Font Awesome'}
+      .col-md-8#button-icon-picker
+        = react 'FonticonPicker', :selected => @edit[:new][:button_icon], :onChangeURL => url
     .form-group
       %label.control-label.col-md-2
         = _('Icon Color')
@@ -51,16 +48,3 @@
     %h3
       = _('Assign Buttons')
     = render :partial => "shared/buttons/column_lists"
-
-:javascript
-  miq_bootstrap('#button-icon-picker');
-  // This is an ugly hack to be able to use this component in a non-angular context with miq-observe
-  // FIXME: Remove this when the form is converted to angular
-  $(function() {
-    $('#button-icon-picker input[type="hidden"]').on('change', _.debounce(function() {
-      miqObserveRequest('#{url}', {
-        no_encoding: true,
-        data: 'button_icon' + '=' + $(this).val(),
-      });
-    }, 700, {leading: true, trailing: true}));
-  });