Created plugin card component

packages/strapi-admin/admin/src/components/PluginCard/index.js

@@ -0,0 +1,47 @@
+/**
+*
+* PluginCard
+*
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import styles from './styles.scss';
+
+function PluginCard({ isAlreadyInstalled, plugin, showSupportUsButton }) {
+  return (
+    <div className={cn('col-md-4', styles.pluginCard)}>
+      <div className={styles.wrapper}>
+        <div className={styles.cardTitle}>
+          {plugin.name}
+        </div>
+        <div className={styles.cardDescription}></div>
+        <div className={styles.cardScreenshot}></div>
+        <div className={styles.cardPrice}></div>
+        <div className={styles.cardFooter}>{isAlreadyInstalled} {showSupportUsButton}</div>
+      </div>
+    </div>
+  );
+}
+
+PluginCard.defaultProps = {
+  isAlreadyInstalled: false,
+  plugin: {
+    description: '',
+    id: '',
+    icon: '',
+    name: '',
+    price: 0,
+    ratings: 5,
+  },
+  showSupportUsButton: false,
+};
+
+PluginCard.propTypes = {
+  isAlreadyInstalled: PropTypes.bool,
+  plugin: PropTypes.object,
+  showSupportUsButton: PropTypes.bool,
+};
+
+export default PluginCard;

packages/strapi-admin/admin/src/components/PluginCard/styles.scss

@@ -0,0 +1,27 @@
+.cardDescription {
+
+}
+
+.cardFooter {
+
+}
+
+.cardPrice {
+
+}
+
+.cardScreenshot {
+
+}
+
+.cardTitle {
+
+}
+
+.pluginCard {
+
+}
+
+.wrapper {
+
+}

packages/strapi-admin/admin/src/containers/InstallPluginPage/fakeData.json

@@ -5,28 +5,32 @@
       "id": "content-manager",
       "icon": "plug",
       "name": "Content Manager",
-      "price": 0
+      "price": 0,
+      "ratings": 3
     },
     {
       "description": "content-type-builder.plugin.description",
       "id": "content-type-builder",
       "icon": "brush",
       "name": "content type builder",
-      "price": 0
+      "price": 0,
+      "ratings": 4.4
     },
     {
       "description": "settings-manager.plugin.description",
       "id": "settings-manager",
       "icon": "wrench",
       "name": "settings manager",
-      "price": 0
+      "price": 0,
+      "ratings": 2.5
     },
     {
       "description": "users-permissions.plugin.description",
       "id": "users-permissions",
       "icon": "users",
       "name": "Auth & Permissions",
-      "price": 0
+      "price": 0,
+      "ratings": 3.6
     }
   ]
 }

packages/strapi-admin/admin/src/containers/InstallPluginPage/index.js

@@ -11,9 +11,11 @@ import { Helmet } from 'react-helmet';
 import { FormattedMessage } from 'react-intl';
 import { bindActionCreators, compose } from 'redux';
 import cn from 'classnames';
+import { get, isUndefined, map } from 'lodash';
 
 // Design
 import Input from 'components/Input';
+import PluginCard from 'components/PluginCard';
 import PluginHeader from 'components/PluginHeader';
 
 import injectSaga from 'utils/injectSaga';
@@ -55,7 +57,7 @@ export class InstallPluginPage extends React.Component { // eslint-disable-line
             description={{ id: 'app.components.InstallPluginPage.description' }}
             actions={[]}
           />
-          <div className="row">
+          <div className={cn('row', styles.inputContainer)}>
             <Input
               customBootstrapClass="col-md-12"
               label="app.components.InstallPluginPage.InputSearch.label"
@@ -67,6 +69,16 @@ export class InstallPluginPage extends React.Component { // eslint-disable-line
               value={this.props.search}
             />
           </div>
+          <div className="row">
+            {map(this.props.availablePlugins, (plugin) => (
+              <PluginCard
+                key={plugin.id}
+                plugin={plugin}
+                showSupportUsButton={plugin.id === 'support-us'}
+                isAlreadyInstalled={isUndefined(get(this.context.plugins.toJS(), plugin.id))}
+              />
+            ))}
+          </div>
         </div>
       </div>
     );
@@ -78,6 +90,7 @@ InstallPluginPage.contextTypes = {
 };
 
 InstallPluginPage.propTypes = {
+  availablePlugins: PropTypes.array.isRequired,
   didFetchPlugins: PropTypes.bool.isRequired,
   getPlugins: PropTypes.func.isRequired,
   onChange: PropTypes.func.isRequired,

packages/strapi-admin/admin/src/containers/InstallPluginPage/reducer.js

@@ -21,7 +21,7 @@ function installPluginPageReducer(state = initialState, action) {
     case GET_PLUGINS_SUCCEEDED:
       return state
         .set('didFetchPlugins', true)
-        .set('plugins', List(action.availablePlugins));
+        .set('availablePlugins', List(action.availablePlugins));
     case ON_CHANGE:
       return state.updateIn(action.keys, () => action.value);
     default:

packages/strapi-admin/admin/src/containers/InstallPluginPage/saga.js

@@ -24,6 +24,7 @@ export function* pluginsGet() {
       icon: '',
       name: 'buy a t-shirt',
       price: 30,
+      ratings: 5,
     };
 
     yield put(getPluginsSucceeded(availablePlugins.concat([supportUs])));

packages/strapi-admin/admin/src/containers/InstallPluginPage/styles.scss

@@ -2,5 +2,22 @@
   padding: 18px 30px !important;
   > div:first-child {
     max-height: 33px;
+    margin-bottom: 48px;
+  }
+}
+
+.inputContainer {
+  padding-top: 7px;
+  background-color: #fff;
+  > div {
+    > div {
+      margin-bottom: 0!important;
+    }
+    > div:nth-child(3) {
+      display: none;
+    }
+    > label {
+      display: none!important;
+    }
   }
 }

packages/strapi-plugin-users-permissions/services/UsersPermissions.js

@@ -48,6 +48,7 @@ module.exports = {
   },
 
   getActions: () => {
+    console.log(strapi);
     const generateActions = (data) => (
       Object.keys(data).reduce((acc, key) => {
         acc[key] = { enabled: false, policy: '' };