Improve button library and fix db connector

packages/strapi-helper-plugin/lib/src/components/Button/index.js

@@ -6,32 +6,79 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { isEmpty } from 'lodash';
 import { FormattedMessage } from 'react-intl';
+import cn from 'classnames';
+
 import styles from './styles.scss';
 
-class Button extends React.Component {
+function Button(props) {
-  // eslint-disable-line react/prefer-stateless-function
+  const buttonProps = Object.assign({}, props);
-  render() {
+  const propsToDelete = ['loader', 'primary', 'primaryAddShape', 'secondary', 'secondaryHotline', 'secondaryHotlineAdd', 'kind', 'labelValues'];
-    const label = this.props.handlei18n ? <FormattedMessage id={this.props.label} values={this.props.labelValues} /> : this.props.label;
-    const addShape = this.props.addShape ? <i className="fa fa-plus" /> : '';
 
+  propsToDelete.map((value) => delete buttonProps[value]);
+
+  if (props.loader) {
     return (
       <button
-        className={`${styles[this.props.buttonSize]} ${styles[this.props.buttonBackground]} ${styles.button}`}
+        type="button"
-        onClick={this.props.onClick}
+        className={cn(
-        >
+          styles.loader,
-        {addShape}{label}
+          props.primary && styles.primary,
+          props.secondary && styles.secondary,
+          props.secondaryHotline && styles.secondaryHotline,
+          props.primaryAddShape && styles.primaryAddShape,
+          props.kind && styles[props.kind],
+          props.className,
+
+        )}
+        disabled
+        {...buttonProps}
+      >
+        <div className={styles.saving}>
+          <span>.</span><span>.</span><span>.</span>
+        </div>
       </button>
     );
   }
+
+  const label = !isEmpty(props.label) && !props.children ? <FormattedMessage id={props.label} values={props.labelValues} /> : props.children;
+  return (
+    <button
+      className={cn(
+        styles.button,
+        props.primary && styles.primary,
+        props.secondary && styles.secondary,
+        props.secondaryHotline && styles.secondaryHotline,
+        props.secondaryHotlineAdd && styles.secondaryHotlineAdd,
+        props.primaryAddShape && styles.primaryAddShape,
+        props.kind && styles[props.kind],
+        props.className,
+      )}
+      type={props.type || 'button'}
+      {...buttonProps}
+    >
+      {label}
+    </button>
+  );
 }
 
 Button.propTypes = {
-  addShape: PropTypes.bool,
+  children: PropTypes.node,
-  buttonBackground: PropTypes.string,
+  className: PropTypes.any,
-  buttonSize: PropTypes.string,
+  kind: PropTypes.oneOfType([
-  handlei18n: PropTypes.bool,
+    PropTypes.string,
-  label: PropTypes.string.isRequired,
+    PropTypes.bool,
+  ]),
+  label: PropTypes.string,
+  labelValues: PropTypes.object,
+  loader: PropTypes.bool,
+  primary: PropTypes.bool,
+  primaryAddShape: PropTypes.bool,
+  secondary: PropTypes.bool,
+  secondaryHotline: PropTypes.bool,
+  secondaryHotlineAdd: PropTypes.bool,
+  type: PropTypes.string,
 };
 
 export default Button;

packages/strapi-helper-plugin/lib/src/components/Button/styles.scss

@@ -1,76 +1,4 @@
-.button {
+  .back {
-  -webkit-font-smoothing: antialiased;
-  height: 3rem;
-  position: relative;
-  border-radius: 0.3rem;
-  margin-right: 1.8rem;
-  line-height: 30px;
-  cursor: pointer;
-  font-family: Lato;
-  &:focus {
-    outline: 0;
-  }
-  > i {
-    margin-right: 1.3rem;
-  }
-  &:hover {
-   &::after {
-     position: absolute;
-     width: 100%;
-     height: 100%;
-     top: 0;
-     left: 0;
-     border-radius: 0.3rem;
-     content: '';
-     opacity: 0.1;
-     background: #FFFFFF;
-   }
- }
-}
-
-.buttonLg {
-  min-width: 15rem;
-  padding: 0 15px;
-}
-
-.buttonMd {
-  min-width: 10rem;
-  padding: 0 15px;
-}
-
-.primary {
-  font-weight: 500;
-  background: linear-gradient(315deg, #0097F6 0%, #005EEA 100%);
-  color: white;
-  &:active {
-   box-shadow: inset 1px 1px 3px rgba(0,0,0,.15);
- }
-}
-
-.secondary {
-  // height: 32px !important;
-  color: #F64D0A;
-  border: 0.1rem solid #F64D0A;
-  position: relative;
-  border-radius: 3px;
-  overflow: hidden;
-  &:active {
-   border: 0.15rem solid #F64D0A;
- }
-}
-
-.secondaryAddType {
-  height: 2.6rem;
-  color: #1C5DE7;
-  line-height: 1.6rem;
-  border: 0.1rem solid #1C5DE7;
-  font-weight: 500;
-  font-size: 1.3rem;
-  padding-left: 1.6rem;
-  padding-right: 1.6rem;
-}
-
-.back {
   background: #F3F3F3;
   color: #323740;
   font-weight: 500;
@@ -93,3 +21,158 @@
     box-shadow: inset 1px 1px 5px rgba(0,0,0,.1);
   }
 }
+
+.button {
+  height: 3rem;
+  position: relative;
+  border-radius: 0.3rem;
+  text-transform: capitalize;
+  margin-right: 1.8rem;
+  cursor: pointer;
+  font-family: Lato;
+  -webkit-font-smoothing: antialiased;
+  &:focus {
+    outline: 0;
+  }
+  > i {
+    margin-right: 1.3rem;
+    font-weight: 600;
+    padding-top: 1px;
+  }
+  &:hover {
+   &::after {
+     position: absolute;
+     width: 100%;
+     height: 100%;
+     top: 0;
+     left: 0;
+     border-radius: 0.3rem;
+     content: '';
+     opacity: 0.1;
+     background: #FFFFFF;
+   }
+ }
+}
+
+.primary {
+  font-weight: 500;
+  min-width: 15rem;
+  background: linear-gradient(315deg, #0097F6 0%, #005EEA 100%);
+  -webkit-font-smoothing: antialiased;
+  color: white;
+  &:active {
+   box-shadow: inset 1px 1px 3px rgba(0,0,0,.15);
+ }
+}
+
+.primaryAddShape {
+  font-weight: 500;
+  min-width: 15rem;
+  background: linear-gradient(315deg, #0097F6 0%, #005EEA 100%);
+  -webkit-font-smoothing: antialiased;
+  color: white;
+  &:active {
+   box-shadow: inset 1px 1px 3px rgba(0,0,0,.15);
+ }
+ padding-top: 4px;
+ padding-left: 1.6rem;
+ padding-right: 1.6rem;
+ &:before {
+   content: '\F067';
+   font-family: 'FontAwesome';
+   font-weight: 600;
+   font-size: 1.3rem;
+   margin-right: 13px;
+ }
+}
+
+.secondary {
+  // height: 32px !important;
+  min-width: 10rem;
+  color: #F64D0A;
+  border: 0.1rem solid #F64D0A;
+  position: relative;
+  border-radius: 3px;
+  overflow: hidden;
+  &:active {
+   border: 0.15rem solid #F64D0A;
+ }
+}
+
+.secondaryHotline {
+  height: 2.6rem;
+  min-width: 15rem;
+  color: #1C5DE7;
+  line-height: 1.6rem;
+  border: 0.1rem solid #1C5DE7;
+  font-weight: 500;
+  font-size: 1.3rem;
+  padding-left: 1.6rem;
+  padding-right: 1.6rem;
+}
+
+.secondaryHotlineAdd {
+  height: 2.6rem;
+  min-width: auto;
+  padding: 0 15px 0px;
+  color: #1C5DE7;
+  line-height: 1.6rem;
+  border: 0.1rem solid #1C5DE7;
+  font-weight: 500;
+  font-size: 1.3rem;
+  &:before {
+    content: '\F067';
+    font-family: 'FontAwesome';
+    font-weight: 600;
+    font-size: 1.3rem;
+    margin-right: 13px;
+  }
+}
+
+@keyframes blink {
+  0% {
+    opacity: .2;
+  }
+  20% {
+    opacity: 1;
+  }
+  100% {
+    opacity: .2;
+  }
+}
+
+.saving {
+  margin-top: -2.35rem;
+  padding-left: 4px;
+  line-height: 3.8rem;
+  font-size: 4rem;
+}
+
+.loader {
+  height: 3rem;
+  padding: 0;
+  border-radius: 0.3rem;
+  letter-spacing: .5rem;
+  font-family: Lato;
+  cursor: not-allowed;
+  opacity: .65;
+  &:focus {
+    outline: 0;
+  }
+}
+
+.saving span {
+  animation-name: blink;
+  animation-duration: 1.4s;
+  animation-iteration-count: infinite;
+  animation-fill-mode: both;
+  // font-size: 5rem;
+}
+
+.saving span:nth-child(2) {
+  animation-delay: .2s;
+}
+
+.saving span:nth-child(3) {
+  animation-delay: .4s;
+}

packages/strapi-helper-plugin/lib/src/components/PluginHeaderActions/index.js

@@ -17,9 +17,7 @@ class PluginHeaderActions extends React.Component { // eslint-disable-line react
       <Button
         {...action}
         key={action.label}
-      >
+      />
-        <FormattedMessage id={action.label} defaultMessage={action.label} />
-      </Button>
     ));
 
     return (

packages/strapi-plugin-content-manager/admin/src/containers/Edit/index.js

@@ -79,16 +79,12 @@ export class Edit extends React.Component {
     this.pluginHeaderActions = [
       {
         label: 'content-manager.containers.Edit.cancel',
-        handlei18n: true,
+        kind: 'secondary',
-        buttonBackground: 'secondary',
-        buttonSize: 'buttonMd',
         onClick: this.props.cancelChanges,
         type: 'button',
       },
       {
-        handlei18n: true,
+        kind: 'primary',
-        buttonBackground: 'primary',
-        buttonSize: 'buttonLg',
         label: this.props.editing ? 'content-manager.containers.Edit.editing' : 'content-manager.containers.Edit.submit',
         onClick: this.handleSubmit,
         disabled: this.props.editing,
@@ -99,8 +95,7 @@ export class Edit extends React.Component {
     this.pluginHeaderSubActions = [
       {
         label: 'content-manager.containers.Edit.returnList',
-        handlei18n: true,
+        kind: 'back',
-        buttonBackground: 'back',
         onClick: () => router.goBack(),
         type: 'button',
       },

packages/strapi-plugin-content-manager/admin/src/containers/List/index.js

@@ -212,10 +212,7 @@ export class List extends React.Component {
         labelValues: {
           entity: pluginHeaderTitle,
         },
-        handlei18n: true,
+        kind: 'primaryAddShape',
-        addShape: true,
-        buttonBackground: 'primary',
-        buttonSize: 'buttonLg',
         onClick: () => this.context.router.history.push(this.addRoute),
       },
     ];

packages/strapi/lib/core/configurations.js

@@ -286,15 +286,26 @@ const enableHookNestedDependencies = function (name, flattenHooksConfig) {
 
   // Couldn't find configurations for this hook.
   if (isEmpty(get(flattenHooksConfig, name, true))) {
-
     // Check if database connector is used
-    const modelUsed = Object.keys(this.api || {})
+    const modelsUsed = Object.keys(this.api || {})
       .filter(x => isObject(this.api[x].models)) // Filter API with models
       .map(x => this.api[x].models) // Keep models
-      .filter(model => get(this.connection, model.connection, {}).connector === name) || 0; // Filter model with the right connector
+      .filter(models => {
+        const apiModelsUsed = Object.keys(models).filter(model => {
+          const connector = get(this.config.connections, models[model].connection, {}).connector;
+
+          if (connector) {
+            return connector.replace('strapi-', '') === name;
+          }
+
+          return false;
+        });
+
+        return apiModelsUsed.length !== 0
+      }) || 0; // Filter model with the right connector
 
     flattenHooksConfig[name] = {
-      enabled: modelUsed.length > 0 // Will return false if there is no model, else true.
+      enabled: modelsUsed.length > 0 // Will return false if there is no model, else true.
     };
 
     // Enabled dependencies.