ListView

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

@@ -102,6 +102,11 @@ function LeftMenuLinkContainer({ plugins, ...rest }) {
       label: messages.installNewPlugin.id,
       destination: '/marketplace',
     },
+    {
+      icon: 'cog',
+      label: messages.settings.id,
+      destination: '/settings/webhooks',
+    },
   ];
 
   return (

packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/messages.json

@@ -22,5 +22,9 @@
   "noPluginsInstalled": {
     "id": "app.components.LeftMenuLinkContainer.noPluginsInstalled",
     "defaultMessage": "No plugins installed yet"
+  },
+  "settings": {
+    "id": "app.components.LeftMenuLinkContainer.settings",
+    "defaultMessage": "Settings"
   }
 }

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

@@ -32,6 +32,7 @@ import HomePage from '../HomePage';
 import Marketplace from '../Marketplace';
 import NotFoundPage from '../NotFoundPage';
 import Onboarding from '../Onboarding';
+import SettingsPage from '../SettingsPage';
 import PluginDispatcher from '../PluginDispatcher';
 import {
   disableGlobalOverlayBlocker,
@@ -115,6 +116,8 @@ export class Admin extends React.Component {
 
   renderMarketPlace = props => <Marketplace {...props} {...this.props} />;
 
+  renderSettings = props => <SettingsPage {...props} {...this.props} />;
+
   renderPluginDispatcher = props => {
     // NOTE: Send the needed props instead of everything...
 
@@ -185,6 +188,7 @@ export class Admin extends React.Component {
                   render={this.renderMarketPlace}
                   exact
                 />
+                <Route path="/settings" render={this.renderSettings} />
                 <Route path="/configuration" component={ComingSoonPage} exact />
                 <Route key="7" path="" component={NotFoundPage} />
                 <Route key="8" path="404" component={NotFoundPage} />

packages/strapi-admin/admin/src/containers/SettingsPage/Wrapper.js

@@ -0,0 +1,20 @@
+/**
+ *
+ * Wrapper
+ *
+ */
+
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  .container {
+    margin: 0;
+    padding-left: 0;
+    padding-right: 0;
+    .col-md-9 {
+      padding-top: 18px;
+    }
+  }
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,59 @@
+/**
+ *
+ * SettingsPage
+ *
+ */
+
+import React from 'react';
+import { Redirect, Route, Switch, useRouteMatch } from 'react-router-dom';
+import { LeftMenu, LeftMenuList } from 'strapi-helper-plugin';
+
+import Webhooks from '../Webhooks';
+import Wrapper from './Wrapper';
+
+function SettingsPage() {
+  let { path } = useRouteMatch();
+  const renderSettings = props => <Webhooks {...props} />;
+
+  const menuItems = [
+    {
+      name: 'General',
+      searchable: false,
+      links: [
+        {
+          title: 'webhooks',
+          to: '/settings/webhooks',
+          name: 'webhooks',
+        },
+      ],
+    },
+  ];
+
+  return (
+    <Wrapper>
+      <div className="container">
+        <div className="row">
+          <div className="col-md-3">
+            <LeftMenu>
+              {menuItems.map(item => {
+                return <LeftMenuList {...item} key={item.name} />;
+              })}
+            </LeftMenu>
+          </div>
+          <div className="col-md-9">
+            <Switch>
+              <Redirect exact from={`${path}`} to={`${path}/webhooks`} />
+              <Route
+                exact
+                path={`${path}/webhooks`}
+                render={renderSettings}
+              ></Route>
+            </Switch>
+          </div>
+        </div>
+      </div>
+    </Wrapper>
+  );
+}
+
+export default SettingsPage;

packages/strapi-admin/admin/src/containers/Webhooks/EditView.js

@@ -0,0 +1,18 @@
+/**
+ *
+ * EditView
+ *
+ */
+
+import React from 'react';
+
+function EditView() {
+  console.log('hellooo');
+  return (
+    <div>
+      <p>Edit</p>
+    </div>
+  );
+}
+
+export default EditView;

packages/strapi-admin/admin/src/containers/Webhooks/ListView.js

@@ -0,0 +1,43 @@
+/**
+ *
+ * ListView
+ *
+ */
+
+import React from 'react';
+import { Header } from '@buffetjs/custom';
+import { useGlobalContext } from 'strapi-helper-plugin';
+
+function ListView() {
+  const { formatMessage } = useGlobalContext();
+
+  const actions = [
+    {
+      title: formatMessage({ id: `Settings.webhook.list.button` }),
+      onClick: () => {},
+      color: 'primary',
+      type: 'button',
+      icon: true,
+      style: {
+        paddingLeft: 15,
+        paddingRight: 15,
+      },
+    },
+  ];
+
+  const headerProps = {
+    title: {
+      label: formatMessage({ id: `Settings.webhook.list.title` }),
+    },
+    content: formatMessage({ id: `Settings.webhook.list.description` }),
+    actions: actions,
+  };
+
+  return (
+    <div>
+      <Header {...headerProps} />
+    </div>
+  );
+}
+
+export default ListView;

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

@@ -0,0 +1,28 @@
+/**
+ *
+ * Webhooks
+ *
+ */
+
+import React from 'react';
+import { Switch, Route, useRouteMatch } from 'react-router-dom';
+
+import ListView from './ListView';
+import EditView from './EditView';
+
+function Webhooks() {
+  let { path } = useRouteMatch();
+
+  return (
+    <Switch>
+      <Route exact path={`${path}`}>
+        <ListView />
+      </Route>
+      <Route path={`${path}/:id`}>
+        Edit <EditView />
+      </Route>
+    </Switch>
+  );
+}
+
+export default Webhooks;

packages/strapi-admin/admin/src/translations/en.json

@@ -77,6 +77,7 @@
   "app.components.LeftMenuLinkContainer.listPlugins": "Plugins",
   "app.components.LeftMenuLinkContainer.noPluginsInstalled": "No plugins installed yet",
   "app.components.LeftMenuLinkContainer.plugins": "Plugins",
+  "app.components.LeftMenuLinkContainer.settings": "Settings",
   "app.components.ListPluginsPage.description": "List of the installed plugins in the project.",
   "app.components.ListPluginsPage.helmet.title": "List plugins",
   "app.components.ListPluginsPage.title": "Plugins",
@@ -216,6 +217,9 @@
   "Auth.header.register.description": "To finish setup and secure your app, please create the first user (root admin) by entering the necessary information below.",
   "Auth.link.forgot-password": "Forgot your password?",
   "Auth.link.ready": "Ready to sign in?",
+  "Settings.webhook.list.title": "Webhooks",
+  "Settings.webhook.list.description": "Get POST changes notifications.",
+  "Settings.webhook.list.button": "Add new webhook",
   "app.containers.App.notification.error.init": "An error occured while requesting the API",
   "components.Input.error.password.noMatch": "Passwords do not match",
   "form.button.done": "Done",

packages/strapi-admin/admin/src/translations/fr.json

@@ -78,6 +78,7 @@
   "app.components.LeftMenuLinkContainer.listPlugins": "Plugins",
   "app.components.LeftMenuLinkContainer.noPluginsInstalled": "Aucun plugin installé",
   "app.components.LeftMenuLinkContainer.plugins": "Plugins",
+  "app.components.LeftMenuLinkContainer.settings": "Paramètres",
   "app.components.ListPluginsPage.description": "Liste des plugins installés dans le projet.",
   "app.components.ListPluginsPage.helmet.title": "List plugins",
   "app.components.Logout.profile": "Profil",
@@ -216,6 +217,9 @@
   "Auth.header.register.description": "Pour finir le setup et sécuriser votre app, merci de créer le premier utilisateur (root admin) en remplissant le formulaire suivant.",
   "Auth.link.forgot-password": "Mot de passe oublié ?",
   "Auth.link.ready": "Prêt à vous connecter ?",
+  "Settings.webhook.list.title": "Webhooks",
+  "Settings.webhook.list.description": "Get POST changes notifications.",
+  "Settings.webhook.list.button": "Ajouter nouveau webhook",
   "app.containers.App.notification.error.init": "Une erreur est survenue en requêtant l'API",
   "components.Input.error.password.noMatch": "Le mot de passe ne correspond pas",
   "form.button.done": "Terminer",

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

@@ -0,0 +1,24 @@
+/**
+ *
+ * LeftMenu
+ *
+ */
+
+import styled from 'styled-components';
+
+import colors from '../../assets/styles/colors';
+import sizes from '../../assets/styles/sizes';
+
+const LeftMenu = styled.div`
+  width: 100%;
+  min-height: calc(100vh - ${sizes.header.height});
+  background-color: ${colors.leftMenu.mediumGrey};
+  padding-top: 3.4rem;
+  padding-left: 2rem;
+  padding-right: 2rem;
+  > div {
+    margin-bottom: 29px;
+  }
+`;
+
+export default LeftMenu;

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

@@ -12,7 +12,7 @@ import Search from './Search';
 import LeftMenuLink from '../LeftMenuLink';
 import LeftMenuSubList from '../LeftMenuSubList';
 
-function LeftMenuList({ customLink, links, title }) {
+function LeftMenuList({ customLink, links, name, title }) {
   const [search, setSearch] = useState('');
   const [showSearch, setShowSearch] = useState(false);
   const ref = createRef();
@@ -66,8 +66,16 @@ function LeftMenuList({ customLink, links, title }) {
     return matchSorter(links, search, { keys: ['title'] });
   };
 
-  const getTitle = () =>
+  const getTitle = () => {
-    getCount() > 1 ? `${title.id}plural` : `${title.id}singular`;
+    if (title) {
+      return getCount() > 1 ? (
+        <FormattedMessage id={`${title.id}plural`} />
+      ) : (
+        <FormattedMessage id={`${title.id}singular`} />
+      );
+    }
+    return <span>{name}</span>;
+  };
 
   const renderCompo = (link, i) => {
     const { links, name, title, ...rest } = link;
@@ -99,15 +107,19 @@ function LeftMenuList({ customLink, links, title }) {
         {!showSearch ? (
           <div className="title-wrapper">
             <h3>
-              <FormattedMessage id={getTitle()} />
+              {getTitle()}
               &nbsp;&nbsp;
-              <span className="count-info" datadescr={getCount()}>
+              {!!title && (
-                {getCount()}
+                <span className="count-info" datadescr={getCount()}>
-              </span>
+                  {getCount()}
+                </span>
+              )}
             </h3>
-            <button onClick={toggleSearch}>
+            {!!title && (
-              <FontAwesomeIcon icon="search" />
+              <button onClick={toggleSearch}>
-            </button>
+                <FontAwesomeIcon icon="search" />
+              </button>
+            )}
           </div>
         ) : (
           <div className="search-wrapper">
@@ -138,7 +150,7 @@ function LeftMenuList({ customLink, links, title }) {
 LeftMenuList.defaultProps = {
   customLink: null,
   links: [],
-  title: 'models',
+  title: null,
 };
 
 LeftMenuList.propTypes = {
@@ -150,6 +162,7 @@ LeftMenuList.propTypes = {
     }),
   }),
   links: PropTypes.array,
+  name: PropTypes.string.isRequired,
   title: PropTypes.string,
 };
 

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

@@ -1,107 +0,0 @@
-/**
- *
- * StyledLeftMenu
- *
- */
-
-import styled from 'styled-components';
-
-import colors from '../../assets/styles/colors';
-import sizes from '../../assets/styles/sizes';
-
-const StyledLeftMenu = styled.div`
-  width: 100%;
-  min-height: calc(100vh - ${sizes.header.height});
-  background-color: ${colors.leftMenu.mediumGrey};
-  padding-top: 0.5rem;
-  padding-left: 2rem;
-  padding-right: 2rem;
-  h3 {
-    margin: 0;
-    padding-left: 1rem;
-    line-height: 1.3rem;
-    color: #919bae;
-    letter-spacing: 0.1rem;
-    font-family: Lato;
-    font-size: 1.1rem;
-    font-weight: bold;
-    text-transform: uppercase;
-  }
-  section {
-    margin-top: 3.2rem;
-    font-size: 1.3rem;
-    ul.menu-list {
-      margin-top: 1.1rem;
-      padding: 0;
-      font-size: 1.3rem;
-      list-style-type: none;
-      li {
-        margin-bottom: 0.2rem;
-      }
-      button,
-      a {
-        padding: 0.9rem 1rem;
-        width: 100%;
-        outline: none;
-        p {
-          position: relative;
-          display: flex;
-          justify-content: space-between;
-          width: 100%;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          line-height: 1.6rem;
-          padding-left: ${sizes.margin * 2.2}px;
-          margin-bottom: 0;
-          span {
-            font-style: italic;
-            &:first-of-type {
-              text-transform: capitalize;
-              font-style: inherit;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              white-space: nowrap;
-              margin-right: 5px;
-            }
-          }
-          i,
-          svg {
-            position: absolute;
-            left: 0;
-            margin-right: 1rem;
-          }
-        }
-      }
-      button {
-        i,
-        svg {
-          top: calc(50% - ${sizes.margin * 0.6}px);
-        }
-      }
-      a {
-        display: block;
-        text-decoration: none;
-        p {
-          color: ${colors.leftMenu.black};
-        }
-        i,
-        svg {
-          font-size: 11px;
-          top: calc(50% - ${sizes.margin * 0.5}px);
-          color: ${colors.leftMenu.grey};
-        }
-        &.active {
-          background-color: ${colors.leftMenu.lightGrey};
-          font-weight: 700;
-          i,
-          svg {
-            color: ${colors.leftMenu.black};
-          }
-        }
-      }
-    }
-  }
-`;
-
-export default StyledLeftMenu;

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

@@ -73,6 +73,7 @@ export {
 } from './components/InputToggleWithErrors';
 
 export { default as Label } from './components/Label';
+export { default as LeftMenu } from './components/LeftMenu';
 export { default as LeftMenuList } from './components/LeftMenuList';
 export { default as LiLink } from './components/LiLink';
 export { default as List } from './components/List';