Add plugin header from buffet to users plugin hp

packages/strapi-plugin-users-permissions/admin/src/containers/HomePage/index.js

@@ -10,11 +10,11 @@ import { connect } from 'react-redux';
 import { injectIntl } from 'react-intl';
 import { bindActionCreators, compose } from 'redux';
 import { clone, get, includes, isEqual, isEmpty } from 'lodash';
-
-import { GlobalContext, HeaderNav, PluginHeader } from 'strapi-helper-plugin';
+import { Header } from '@buffetjs/custom';
+import { GlobalContext, HeaderNav } from 'strapi-helper-plugin';
 
 import pluginId from '../../pluginId';
-
+import getTrad from '../../utils/getTrad';
 import { HomePageContextProvider } from '../../contexts/HomePage';
 
 // Design
@@ -152,19 +152,19 @@ export class HomePage extends React.Component {
 
   headerNavLinks = [
     {
-      name: 'users-permissions.HeaderNav.link.roles',
+      name: getTrad('HeaderNav.link.roles'),
       to: '/plugins/users-permissions/roles',
     },
     {
-      name: 'users-permissions.HeaderNav.link.providers',
+      name: getTrad('HeaderNav.link.providers'),
       to: '/plugins/users-permissions/providers',
     },
     {
-      name: 'users-permissions.HeaderNav.link.emailTemplates',
+      name: getTrad('HeaderNav.link.emailTemplates'),
       to: '/plugins/users-permissions/email-templates',
     },
     {
-      name: 'users-permissions.HeaderNav.link.advancedSettings',
+      name: getTrad('HeaderNav.link.advancedSettings'),
       to: '/plugins/users-permissions/advanced',
     },
   ];
@@ -175,16 +175,22 @@ export class HomePage extends React.Component {
 
   pluginHeaderActions = [
     {
-      label: 'users-permissions.EditPage.cancel',
-      kind: 'secondary',
+      label: this.context.formatMessage({
+        id: getTrad('EditPage.cancel'),
+      }),
+      color: 'cancel',
       onClick: () => this.props.cancelChanges(),
       type: 'button',
+      key: 'button-cancel',
     },
     {
-      kind: 'primary',
-      label: 'users-permissions.EditPage.submit',
+      color: 'success',
+      label: this.context.formatMessage({
+        id: getTrad('EditPage.submit'),
+      }),
       onClick: () => this.props.submit(this.props.match.params.settingType),
       type: 'submit',
+      key: 'button-submit',
     },
   ];
 
@@ -211,6 +217,7 @@ export class HomePage extends React.Component {
       match,
       dataToEdit,
     } = this.props;
+    const { formatMessage } = this.context;
     const headerActions =
       match.params.settingType === 'advanced' &&
       !isEqual(modifiedData, initialData)
@@ -231,14 +238,21 @@ export class HomePage extends React.Component {
       >
         <form onSubmit={e => e.preventDefault()}>
           <Wrapper className="container-fluid">
-            <PluginHeader
-              title={{ id: 'users-permissions.HomePage.header.title' }}
-              description={{
-                id: 'users-permissions.HomePage.header.description',
+            <Header
+              title={{
+                label: formatMessage({
+                  id: getTrad('HomePage.header.title'),
+                }),
               }}
+              content={formatMessage({
+                id: getTrad('HomePage.header.description'),
+              })}
               actions={headerActions}
             />
-            <HeaderNav links={this.headerNavLinks} />
+            <HeaderNav
+              links={this.headerNavLinks}
+              style={{ marginTop: '4.6rem' }}
+            />
             {!this.isAdvanded() ? (
               <List
                 data={get(data, this.getEndPoint(), [])}

packages/strapi-plugin-users-permissions/admin/src/utils/getTrad.js

@@ -0,0 +1,5 @@
+import pluginId from '../pluginId';
+
+const getTrad = id => `${pluginId}.${id}`;
+
+export default getTrad;