@akemona-org/strapi-admin 3.7.0

package/admin/src/containers/SettingsPage/components/ApplicationDetailLink/Notif.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+const Notif = styled.div`
+  margin: auto;
+  margin-right: 15px;
+
+  &:before {
+    content: '';
+    display: flex;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: #007dff;
+  }
+`;
+
+export default Notif;

package/admin/src/containers/SettingsPage/components/ApplicationDetailLink/Wrapper.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  position: relative;
+  margin-bottom: -5px;
+  padding: 25px 20px 0 20px;
+`;
+
+export default Wrapper;

package/admin/src/containers/SettingsPage/components/ApplicationDetailLink/index.js

@@ -0,0 +1,26 @@
+import React, { memo } from 'react';
+import { Text } from '@buffetjs/core';
+import { FormattedMessage } from 'react-intl';
+import { useGlobalContext } from 'strapi-helper-plugin';
+import Icon from './Icon';
+import Link from './Link';
+import Notif from './Notif';
+import Wrapper from './Wrapper';
+
+const ApplicationDetailLink = () => {
+  const { shouldUpdateStrapi } = useGlobalContext();
+
+  return (
+    <Wrapper>
+      <Link to="/settings/application-infos">
+        <Icon />
+        <Text lineHeight="34px">
+          <FormattedMessage id="Settings.application.title" />
+        </Text>
+        {shouldUpdateStrapi && <Notif />}
+      </Link>
+    </Wrapper>
+  );
+};
+
+export default memo(ApplicationDetailLink);

package/admin/src/containers/SettingsPage/components/MenuWrapper/index.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const MenuWrapper = styled.div`
+  background-color: ${props => props.theme.main.colors.mediumGrey};
+  min-height: 100%;
+  height: calc(100vh - ${({ theme }) => theme.main.sizes.header.height});
+`;
+
+export default MenuWrapper;

package/admin/src/containers/SettingsPage/components/SettingDispatcher/index.js

@@ -0,0 +1,27 @@
+import React, { memo } from 'react';
+import { useGlobalContext } from 'strapi-helper-plugin';
+import { get } from 'lodash';
+import { useParams } from 'react-router-dom';
+import PageTitle from '../../../../components/SettingsPageTitle';
+
+const SettingDispatcher = () => {
+  const { plugins } = useGlobalContext();
+  const { pluginId } = useParams();
+
+  const pluginToRender = get(plugins, [pluginId, 'settings', 'mainComponent'], null);
+
+  if (!pluginToRender) {
+    return null;
+  }
+
+  const Compo = pluginToRender;
+
+  return (
+    <>
+      <PageTitle name={pluginId} />
+      <Compo settingsBaseURL="/settings" />
+    </>
+  );
+};
+
+export default memo(SettingDispatcher);

package/admin/src/containers/SettingsPage/components/StyledLeftMenu/index.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+import { LeftMenu } from 'strapi-helper-plugin';
+
+// Min height and height need to be unset to avoid the double overflow on the settings page.
+const StyledLeftMenu = styled(LeftMenu)`
+  > div {
+    margin-bottom: 27px;
+  }
+  min-height: unset;
+  height: unset;
+`;
+
+export default StyledLeftMenu;

package/admin/src/containers/SettingsPage/components/Wrapper/index.js

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

package/admin/src/containers/SettingsPage/components/index.js

@@ -0,0 +1,5 @@
+export { default as ApplicationDetailLink } from './ApplicationDetailLink';
+export { default as MenuWrapper } from './MenuWrapper';
+export { default as SettingDispatcher } from './SettingDispatcher';
+export { default as StyledLeftMenu } from './StyledLeftMenu';
+export { default as Wrapper } from './Wrapper';

package/admin/src/containers/SettingsPage/index.js

@@ -0,0 +1,132 @@
+/**
+ *
+ * SettingsPage
+ *
+ */
+
+// NOTE TO PLUGINS DEVELOPERS:
+// If you modify this file you also need to update the documentation accordingly
+// Here's the file: strapi/docs/3.0.0-beta.x/plugin-development/frontend-settings-api.md
+// IF THE DOC IS NOT UPDATED THE PULL REQUEST WILL NOT BE MERGED
+
+import React, { memo, useMemo, useState } from 'react';
+import {
+  BackHeader,
+  useGlobalContext,
+  LeftMenuList,
+  LoadingIndicatorPage,
+} from 'strapi-helper-plugin';
+import { Switch, Redirect, Route, useParams, useHistory } from 'react-router-dom';
+import { useIntl } from 'react-intl';
+import HeaderSearch from '../../components/HeaderSearch';
+import PageTitle from '../../components/PageTitle';
+import { useSettingsMenu } from '../../hooks';
+import { retrieveGlobalLinks } from '../../utils';
+import SettingsSearchHeaderProvider from '../SettingsHeaderSearchContextProvider';
+import {
+  ApplicationDetailLink,
+  MenuWrapper,
+  SettingDispatcher,
+  StyledLeftMenu,
+  Wrapper,
+} from './components';
+
+import {
+  createRoute,
+  createPluginsLinksRoutes,
+  makeUniqueRoutes,
+  getSectionsToDisplay,
+  routes,
+} from './utils';
+
+function SettingsPage() {
+  const { settingId } = useParams();
+  const { goBack } = useHistory();
+  const { settingsBaseURL, plugins } = useGlobalContext();
+  const [headerSearchState, setShowHeaderSearchState] = useState({ show: false, label: '' });
+  const { isLoading, menu } = useSettingsMenu();
+  const { formatMessage } = useIntl();
+  const pluginsGlobalLinks = useMemo(() => retrieveGlobalLinks(plugins), [plugins]);
+
+  const appRoutes = useMemo(() => {
+    return makeUniqueRoutes(
+      routes.map(({ to, Component, exact }) => createRoute(Component, to, exact))
+    );
+  }, []);
+
+  // Create all the <Route /> that needs to be created by the plugins
+  // For instance the upload plugin needs to create a <Route />
+  const globalSectionCreatedRoutes = useMemo(() => {
+    const routesToCreate = pluginsGlobalLinks.map(({ to, Component, exact }) =>
+      createRoute(Component, to, exact)
+    );
+
+    return makeUniqueRoutes(routesToCreate);
+  }, [pluginsGlobalLinks]);
+
+  // Same here for the plugins sections
+  const pluginsLinksRoutes = useMemo(() => {
+    return createPluginsLinksRoutes(menu);
+  }, [menu]);
+
+  // Only display accessible sections
+  const filteredMenu = useMemo(() => getSectionsToDisplay(menu), [menu]);
+
+  const toggleHeaderSearch = label =>
+    setShowHeaderSearchState(prev => {
+      if (prev.show) {
+        return {
+          show: false,
+          label: '',
+        };
+      }
+
+      return { label, show: true };
+    });
+
+  // Since the useSettingsMenu hook can make API calls in order to check the links permissions
+  // We need to add a loading state to prevent redirecting the user while permissions are being checked
+  if (isLoading) {
+    return <LoadingIndicatorPage />;
+  }
+
+  if (!settingId) {
+    return <Redirect to={`${settingsBaseURL}/application-infos`} />;
+  }
+
+  const settingTitle = formatMessage({ id: 'app.components.LeftMenuLinkContainer.settings' });
+
+  return (
+    <SettingsSearchHeaderProvider value={{ toggleHeaderSearch }}>
+      <PageTitle title={settingTitle} />
+      <Wrapper>
+        <BackHeader onClick={goBack} />
+
+        <div className="row">
+          <div className="col-md-3">
+            <MenuWrapper>
+              <ApplicationDetailLink />
+              <StyledLeftMenu>
+                {filteredMenu.map(item => {
+                  return <LeftMenuList {...item} key={item.id} />;
+                })}
+              </StyledLeftMenu>
+            </MenuWrapper>
+          </div>
+
+          <div className="col-md-9">
+            <Switch>
+              {appRoutes}
+              {globalSectionCreatedRoutes}
+              {pluginsLinksRoutes}
+              <Route path={`${settingsBaseURL}/:pluginId`} component={SettingDispatcher} />
+            </Switch>
+          </div>
+        </div>
+        {headerSearchState.show && <HeaderSearch label={headerSearchState.label} />}
+      </Wrapper>
+    </SettingsSearchHeaderProvider>
+  );
+}
+
+export default memo(SettingsPage);

package/admin/src/containers/SettingsPage/utils/createPluginsLinksRoutes.js

@@ -0,0 +1,23 @@
+import { get } from 'lodash';
+import createRoute from './createRoute';
+
+const retrieveRoutes = links => links.filter(link => typeof link.Component === 'function');
+
+const createPluginsLinksRoutes = menu => {
+  return menu.reduce((acc, current) => {
+    // The global links are handled by another util
+    if (current.id === 'global') {
+      return acc;
+    }
+
+    const filteredLinks = retrieveRoutes(get(current, 'links', []));
+    const routes = filteredLinks.map(link => {
+      return createRoute(link.Component, link.to, link.exact);
+    });
+
+    return [...acc, ...routes];
+  }, []);
+};
+
+export default createPluginsLinksRoutes;
+export { retrieveRoutes };

package/admin/src/containers/SettingsPage/utils/createRoute.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Route } from 'react-router-dom';
+
+const createRoute = (Component, to, exact) => {
+  return <Route component={Component} key={to} path={to} exact={exact || false} />;
+};
+
+export default createRoute;

package/admin/src/containers/SettingsPage/utils/customRoutes.js

@@ -0,0 +1,3 @@
+const customRoutes = [];
+
+export default customRoutes;

package/admin/src/containers/SettingsPage/utils/defaultRoutes.js

@@ -0,0 +1,65 @@
+import RolesCreatePage from 'ee_else_ce/containers/Roles/CreatePage';
+import ProtectedRolesListPage from 'ee_else_ce/containers/Roles/ProtectedListPage';
+import { SETTINGS_BASE_URL } from '../../../config';
+import ApplicationInfosPage from '../../ApplicationInfosPage';
+import UsersEditPage from '../../Users/ProtectedEditPage';
+import UsersListPage from '../../Users/ProtectedListPage';
+import RolesEditPage from '../../Roles/ProtectedEditPage';
+import WebhooksCreateView from '../../Webhooks/ProtectedCreateView';
+import WebhooksEditView from '../../Webhooks/ProtectedEditView';
+import WebhooksListView from '../../Webhooks/ProtectedListView';
+
+const defaultRoutes = [
+  {
+    Component: ApplicationInfosPage,
+    to: `${SETTINGS_BASE_URL}/application-infos`,
+    exact: true,
+  },
+  {
+    Component: ProtectedRolesListPage,
+    to: `${SETTINGS_BASE_URL}/roles`,
+    exact: true,
+  },
+  {
+    Component: RolesCreatePage,
+    to: `${SETTINGS_BASE_URL}/roles/duplicate/:id`,
+    exact: true,
+  },
+  {
+    Component: RolesCreatePage,
+    to: `${SETTINGS_BASE_URL}/roles/new`,
+    exact: true,
+  },
+  {
+    Component: RolesEditPage,
+    to: `${SETTINGS_BASE_URL}/roles/:id`,
+    exact: true,
+  },
+  {
+    Component: UsersListPage,
+    to: `${SETTINGS_BASE_URL}/users`,
+    exact: true,
+  },
+  {
+    Component: UsersEditPage,
+    to: `${SETTINGS_BASE_URL}/users/:id`,
+    exact: true,
+  },
+  {
+    Component: WebhooksCreateView,
+    to: `${SETTINGS_BASE_URL}/webhooks/create`,
+    exact: true,
+  },
+  {
+    Component: WebhooksEditView,
+    to: `${SETTINGS_BASE_URL}/webhooks/:id`,
+    exact: true,
+  },
+  {
+    Component: WebhooksListView,
+    to: `${SETTINGS_BASE_URL}/webhooks`,
+    exact: true,
+  },
+];
+
+export default defaultRoutes;

package/admin/src/containers/SettingsPage/utils/findFirstAllowedEndpoint.js

@@ -0,0 +1,14 @@
+import { flatMap } from 'lodash';
+
+const generateArrayOfLinks = array => flatMap(array, 'links');
+
+const findFirstAllowedEndpoint = menuArray => {
+  const arrayOfLinks = generateArrayOfLinks(menuArray);
+
+  const link = arrayOfLinks.find(link => link.isDisplayed === true);
+
+  return link ? link.to : null;
+};
+
+export default findFirstAllowedEndpoint;
+export { generateArrayOfLinks };

package/admin/src/containers/SettingsPage/utils/getSectionsToDisplay.js

@@ -0,0 +1,5 @@
+const getSectionsToDisplay = menu => {
+  return menu.filter(section => !section.links.every(link => link.isDisplayed === false));
+};
+
+export default getSectionsToDisplay;

package/admin/src/containers/SettingsPage/utils/index.js

@@ -0,0 +1,6 @@
+export { default as createPluginsLinksRoutes } from './createPluginsLinksRoutes';
+export { default as createRoute } from './createRoute';
+export { default as findFirstAllowedEndpoint } from './findFirstAllowedEndpoint';
+export { default as getSectionsToDisplay } from './getSectionsToDisplay';
+export { default as makeUniqueRoutes } from './makeUniqueRoutes';
+export { default as routes } from './routes';

package/admin/src/containers/SettingsPage/utils/makeUniqueRoutes.js

@@ -0,0 +1,6 @@
+const makeUniqueRoutes = routes =>
+  routes.filter((route, index, refArray) => {
+    return refArray.findIndex(obj => obj.key === route.key) === index;
+  });
+
+export default makeUniqueRoutes;

package/admin/src/containers/SettingsPage/utils/routes.js

@@ -0,0 +1,4 @@
+import customRoutes from 'ee_else_ce/containers/SettingsPage/utils/customRoutes';
+import defaultRoutes from './defaultRoutes';
+
+export default [...customRoutes, ...defaultRoutes];

package/admin/src/containers/Theme/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import PropTypes from 'prop-types';
+import themes from '../../themes';
+
+const Theme = ({ children }) => {
+  return <ThemeProvider theme={themes}>{children}</ThemeProvider>;
+};
+
+Theme.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default Theme;

package/admin/src/containers/Users/EditPage/index.js

@@ -0,0 +1,137 @@
+import React from 'react';
+import { useRouteMatch } from 'react-router-dom';
+import { useIntl } from 'react-intl';
+import { get, isEmpty } from 'lodash';
+import { BaselineAlignment, useGlobalContext, SizedInput, auth } from 'strapi-helper-plugin';
+import { Col } from 'reactstrap';
+import { Padded } from '@buffetjs/core';
+import PropTypes from 'prop-types';
+import PageTitle from '../../../components/SettingsPageTitle';
+import ContainerFluid from '../../../components/ContainerFluid';
+import FormBloc from '../../../components/FormBloc';
+import { Header } from '../../../components/Settings';
+import { MagicLink, SelectRoles } from '../../../components/Users';
+import { useSettingsForm } from '../../../hooks';
+import { editValidation } from '../../../validations/users';
+import form from './utils/form';
+
+const EditPage = ({ canUpdate }) => {
+  const { settingsBaseURL } = useGlobalContext();
+  const { formatMessage } = useIntl();
+  const {
+    params: { id },
+  } = useRouteMatch(`${settingsBaseURL}/users/:id`);
+
+  const cbSuccess = data => {
+    const userInfos = auth.getUserInfo();
+
+    // The user is updating themself
+    if (data.id === userInfos.id) {
+      auth.setUserInfo(data);
+    }
+  };
+  const [
+    { formErrors, initialData, isLoading, modifiedData, showHeaderButtonLoader, showHeaderLoader },
+    // eslint-disable-next-line no-unused-vars
+    dispatch,
+    { handleCancel, handleChange, handleSubmit },
+  ] = useSettingsForm(`/admin/users/${id}`, editValidation, cbSuccess, [
+    'email',
+    'firstname',
+    'lastname',
+    'username',
+    'isActive',
+    'roles',
+    'registrationToken',
+  ]);
+  const headerLabelId = isLoading
+    ? 'app.containers.Users.EditPage.header.label-loading'
+    : 'app.containers.Users.EditPage.header.label';
+  const headerLabelName = initialData.username
+    ? initialData.username
+    : `${initialData.firstname} ${initialData.lastname}`;
+  const headerLabel = formatMessage({ id: headerLabelId }, { name: headerLabelName });
+
+  const hasRegistrationToken = modifiedData.registrationToken;
+  const hasRolesError = formErrors.roles && isEmpty(modifiedData.roles);
+
+  return (
+    <>
+      <PageTitle name="Users" />
+      <form onSubmit={handleSubmit}>
+        <ContainerFluid padding="0">
+          <Header
+            isLoading={showHeaderLoader}
+            initialData={initialData}
+            label={headerLabel}
+            modifiedData={modifiedData}
+            onCancel={handleCancel}
+            showHeaderButtonLoader={showHeaderButtonLoader}
+          />
+          {hasRegistrationToken ? (
+            <>
+              <Padded top bottom size="sm">
+                <MagicLink registrationToken={initialData.registrationToken} />
+              </Padded>
+              <BaselineAlignment top size="1px" />
+            </>
+          ) : (
+            <BaselineAlignment top size="3px" />
+          )}
+
+          <FormBloc
+            isLoading={isLoading}
+            title={formatMessage({
+              id: 'app.components.Users.ModalCreateBody.block-title.details',
+            })}
+          >
+            {Object.keys(form).map(key => {
+              return (
+                <SizedInput
+                  {...form[key]}
+                  key={key}
+                  disabled={!canUpdate}
+                  error={formErrors[key]}
+                  name={key}
+                  onChange={handleChange}
+                  value={get(modifiedData, key, '')}
+                />
+              );
+            })}
+          </FormBloc>
+
+          <BaselineAlignment top size="2px" />
+
+          <Padded top size="md">
+            {!isLoading && (
+              <FormBloc
+                title={formatMessage({ id: 'app.containers.Users.EditPage.roles-bloc-title' })}
+              >
+                <Col xs="6">
+                  <Padded top size="sm">
+                    <SelectRoles
+                      name="roles"
+                      isDisabled={!canUpdate}
+                      onChange={handleChange}
+                      error={formErrors.roles}
+                      value={get(modifiedData, 'roles', [])}
+                    />
+                    <BaselineAlignment top size={hasRolesError ? '0' : '17px'} />
+                  </Padded>
+                </Col>
+              </FormBloc>
+            )}
+          </Padded>
+        </ContainerFluid>
+        <Padded bottom size="md" />
+      </form>
+      <BaselineAlignment bottom size="80px" />
+    </>
+  );
+};
+
+EditPage.propTypes = {
+  canUpdate: PropTypes.bool.isRequired,
+};
+
+export default EditPage;

package/admin/src/containers/Users/EditPage/utils/form.js

@@ -0,0 +1,52 @@
+const form = {
+  firstname: {
+    autoFocus: true,
+    label: 'Settings.permissions.users.form.firstname',
+    placeholder: 'e.g. Kai',
+    type: 'text',
+    validations: {
+      required: true,
+    },
+  },
+  lastname: {
+    label: 'Settings.permissions.users.form.lastname',
+    placeholder: 'e.g. Doe',
+    type: 'text',
+    validations: {
+      required: true,
+    },
+  },
+  email: {
+    label: 'Settings.permissions.users.form.email',
+    placeholder: 'e.g. kai.doe@strapi.io',
+    type: 'email',
+    validations: {
+      required: true,
+    },
+  },
+  username: {
+    label: 'Auth.form.username.label',
+    placeholder: 'e.g. Kai_Doe',
+    type: 'text',
+    autoComplete: 'no',
+    validations: {},
+  },
+  password: {
+    label: 'Auth.form.password.label',
+    type: 'password',
+    autoComplete: 'new-password',
+    validations: {},
+  },
+  confirmPassword: {
+    label: 'Auth.form.confirmPassword.label',
+    type: 'password',
+    validations: {},
+  },
+  isActive: {
+    label: 'app.containers.Users.EditPage.form.active.label',
+    type: 'bool',
+    validations: {},
+  },
+};
+
+export default form;