Fixes #25309 - Switcher for ansible roles (#217)

.eslintrc

@@ -1,15 +1,17 @@
 {
-  "root": true,
-  "extends": "airbnb-base",
-  "plugins": [
-    "react"
-  ],
-  "env": {
-    "browser": true,
-    "es6": true,
-    "node": true,
-    "jasmine": true,
-    "jest": true
+  "plugins": ["patternfly-react"],
+  "extends": ["plugin:patternfly-react/recommended"],
+  "rules": {
+    "prettier/prettier": ["error", {
+      "singleQuote": true,
+      "trailingComma": "es5"
+    }],
+    "import/no-unresolved": ["error", {
+      "ignore": ['foremanReact/.*']
+    }],
+    "import/extensions": ["error", {
+      "ignore": ['foremanReact/.*']
+    }],
   },
   "globals": {
     "document": false,
@@ -19,31 +21,8 @@
     "window": false,
     "$": true,
     "_": true,
-    "__": true
-  },
-  "parser": "babel-eslint",
-  "rules": {
-    "react/jsx-uses-vars": "error",
-    "react/jsx-uses-react": "error",
-    "no-unused-vars": [
-      "error",
-      {
-        "vars": "all",
-        "args": "none"
-      }
-    ],
-    "no-underscore-dangle": "off",
-    "no-use-before-define": "off",
-    "import/prefer-default-export": "off",
-    "import/no-extraneous-dependencies": [
-      "error",
-      {
-        // Allow importing devDependencies like @storybook
-        "devDependencies": true
-      }
-    ],
-    // Import rules off for now due to HoundCI issue
-    "import/no-unresolved": "off",
-    "import/extensions": "off"
+    "__": true,
+    "n__": true,
+    "d3": true
   }
 }

.travis.yml

@@ -0,0 +1,5 @@
+language: node_js
+node_js:
+  - '8' # current LTS
+  - '10' # future LTS
+script: ./script/travis_run_js_tests.sh

app/controllers/ui_ansible_roles_controller.rb

@@ -0,0 +1,14 @@
+class UiAnsibleRolesController < ::Api::V2::BaseController
+  def resource_name(resource = 'AnsibleRole')
+    super resource
+  end
+
+  def index
+    @ui_ansible_roles = resource_scope_for_index(:permission => :view_ansible_roles)
+  end
+
+  # restore original method from find_common to ignore resource nesting
+  def resource_scope(options = {})
+    @resource_scope ||= scope_for(resource_class, options)
+  end
+end

app/helpers/foreman_ansible/ansible_roles_helper.rb

@@ -20,5 +20,9 @@ def ansible_proxy_import(hash)
     def import_time(role)
       _('%s ago') % time_ago_in_words(role.updated_at)
     end
+
+    def roles_attrs(roles)
+      roles.map { |item| { :id => item.id, :name => item.name } }
+    end
   end
 end

app/models/ansible_role.rb

@@ -17,6 +17,7 @@ class AnsibleRole < ApplicationRecord
                                :class_name => 'AnsibleVariable'
 
   scoped_search :on => :name, :complete_value => true
+  scoped_search :on => :id, :complete_value => false
   scoped_search :on => :updated_at
   scoped_search :relation => :hosts,
                 :on => :id, :rename => :host_id, :only_explicit => true

app/views/foreman_ansible/ansible_roles/_select_tab_content.html.erb

@@ -1,15 +1,15 @@
+<%= webpacked_plugins_js_for :foreman_ansible %>
+<%= webpacked_plugins_css_for :foreman_ansible %>
+
 <div class='tab-pane' id='ansible_roles'>
-  <%= multiple_selects(
-    f,
-    :ansible_roles,
-    AnsibleRole,
-    f.object.is_a?(Hostgroup) ? (f.object.inherited_and_own_ansible_roles).map(&:id) : f.object.all_ansible_roles.map(&:id),
-    {
-      :disabled => f.object.inherited_ansible_roles.map(&:id),
-      :label => _('Available roles'),
-      :label_help => _('This list of roles will be applied when the host finishes<br/> '\
-            'provisioning. Users can also play these roles through the API<br/>'\
-            'or by clicking on the Play Roles button on the Host page ').html_safe
-    },
-    { 'data-inheriteds' => f.object.inherited_ansible_roles.map(&:id).to_json }) %>
+  <div id='ansible_roles_switcher'></div>
+  <% roles = f.object.is_a?(Hostgroup) ? roles_attrs(f.object.inherited_and_own_ansible_roles) : roles_attrs(f.object.all_ansible_roles) %>
+  <% class_name = f.object.is_a?(Hostgroup) ? 'Hostgroup' : 'Host' %>
+  <%= mount_react_component('AnsibleRolesSwitcher', '#ansible_roles_switcher', { :initialAssignedRoles => roles,
+                                                                                 :inheritedRoleIds => f.object.inherited_ansible_roles.map(&:id),
+                                                                                 :availableRolesUrl => ui_ansible_roles_path,
+                                                                                 :resourceId => f.object.id,
+                                                                                 :resourceName => class_name,
+                                                                                 :canView => User.current.can?(:view_ansible_roles)
+                                                                                }.to_json) %>
 </div>

app/views/ui_ansible_roles/index.json.rabl

@@ -0,0 +1,3 @@
+collection @ui_ansible_roles
+
+extends "ui_ansible_roles/main"

app/views/ui_ansible_roles/main.json.rabl

@@ -0,0 +1,3 @@
+object @ansible_role
+
+extends "ui_ansible_roles/show"

app/views/ui_ansible_roles/show.json.rabl

@@ -0,0 +1,3 @@
+object @ansible_role
+
+extends "api/v2/ansible_roles/show"

config/routes.rb

@@ -58,6 +58,8 @@
       end
     end
 
+    resources :ui_ansible_roles, :only => [:index]
+
     resources :ansible_variables, :except => [:show, :new, :create] do
       resources :lookup_values, :only => [:index, :create, :update, :destroy]
       collection do

lib/foreman_ansible/register.rb

@@ -17,7 +17,8 @@
                :resource_type => 'Hostgroup'
     permission :view_ansible_roles,
                { :ansible_roles => [:index, :auto_complete_search],
-                 :'api/v2/ansible_roles' => [:index, :show, :fetch] },
+                 :'api/v2/ansible_roles' => [:index, :show, :fetch],
+                 :ui_ansible_roles => [:index] },
                :resource_type => 'AnsibleRole'
     permission :destroy_ansible_roles,
                { :ansible_roles => [:destroy],

package.json

@@ -7,34 +7,75 @@
     "test": "test"
   },
   "dependencies": {
-    "react-json-tree": "^0.11.0"
+    "babel-polyfill": "^6.26.0",
+    "classnames": "^2.2.6",
+    "lodash": "4.17.10",
+    "patternfly": "^3.58.0",
+    "patternfly-react": "^2.25.4",
+    "prop-types": "^15.7.2",
+    "react": "^16.6.3",
+    "react-bootstrap": "^0.32.4",
+    "react-dom": "^16.6.3",
+    "react-json-tree": "^0.11.0",
+    "reselect": "^3.0.1",
+    "seamless-immutable": "7.1.2"
   },
   "devDependencies": {
     "babel-eslint": "^8.2.1",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-react": "^6.24.1",
     "babel-plugin-lodash": "^3.3.2",
-    "babel-plugin-transform-object-assign": "^6.22.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-object-assign": "^6.22.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-react": "^6.24.1",
+    "enzyme": "^3.7.0",
+    "enzyme-adapter-react-16": "^1.7.0",
+    "enzyme-to-json": "^3.3.5",
     "eslint": "^4.18.1",
     "eslint-config-airbnb": "^16.0.0",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-jest": "^21.2.0",
     "eslint-plugin-jsx-a11y": "^6.0.2",
-    "eslint-plugin-react": "^7.4.0"
+    "eslint-plugin-patternfly-react": "^0.2.1",
+    "eslint-plugin-react": "^7.4.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^23.6.0",
+    "prettier": "^1.16.4",
+    "react-redux": "^6.0.0",
+    "react-redux-test-utils": "^0.1.1",
+    "redux": "^4.0.1",
+    "redux-thunk": "^2.3.0"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "node node_modules/.bin/jest webpack",
+    "lint": "./node_modules/.bin/eslint -c .eslintrc webpack/ || exit 0"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/bastilian/foreman_ansible.git"
+    "url": "git+https://github.com/theforeman/foreman_ansible.git"
   },
   "author": "",
   "license": "ISC",
   "bugs": {
-    "url": "https://github.com/bastilian/foreman_ansible/issues"
+    "url": "https://projects.theforeman.org/projects/ansible"
   },
-  "homepage": "https://github.com/bastilian/foreman_ansible#readme"
+  "homepage": "https://theforeman.org/plugins/foreman_ansible/",
+  "jest": {
+    "verbose": true,
+    "moduleDirectories": [
+      "node_modules",
+      "webpack"
+    ],
+    "setupFiles": [
+      "raf/polyfill",
+      "./webpack/test_setup.js"
+    ],
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "<rootDir>/foreman/"
+    ],
+    "moduleNameMapper": {
+      "^.+\\.(css|scss)$": "identity-obj-proxy"
+    }
+  }
 }

script/travis_run_js_tests.sh

@@ -0,0 +1,4 @@
+#!/bin/bash
+set -ev
+npm run lint;
+npm run test;

test/functional/ui_ansible_roles_controller_test.rb

@@ -0,0 +1,14 @@
+require 'test_plugin_helper'
+
+class UiAnsibleRolesControllerTest < ActionController::TestCase
+  setup do
+    @role = FactoryBot.create(:ansible_role)
+  end
+
+  test 'should respond with roles' do
+    get :index, :params => {}, :session => set_session_user
+    assert_response :success
+    res = JSON.parse @response.body
+    assert_equal res['total'], res['results'].size
+  end
+end

webpack/__mocks__/foremanReact/components/Pagination/PaginationWrapper.js

@@ -0,0 +1,2 @@
+const PaginationWrapper = () => jest.fn();
+export default PaginationWrapper;

webpack/__mocks__/foremanReact/components/common/EmptyState.js

@@ -0,0 +1,5 @@
+const EmptyState = () => jest.fn();
+
+export const EmptyStatePattern = () => jest.fn();
+
+export default EmptyState;