@akemona-org/strapi-admin 3.7.0

package/admin/src/containers/LeftMenu/utils/generateModelsLinks.js

@@ -0,0 +1,61 @@
+import { chain, get } from 'lodash';
+import { stringify } from 'qs';
+
+const generateLinks = (links, type, configurations = []) => {
+  return links
+    .filter(link => link.isDisplayed)
+    .map(link => {
+      const collectionTypesPermissions = [
+        { action: 'plugins::content-manager.explorer.create', subject: link.uid },
+        { action: 'plugins::content-manager.explorer.read', subject: link.uid },
+      ];
+      const singleTypesPermissions = [
+        { action: 'plugins::content-manager.explorer.read', subject: link.uid },
+      ];
+      const permissions =
+        type === 'collectionTypes' ? collectionTypesPermissions : singleTypesPermissions;
+
+      const currentContentTypeConfig = configurations.find(({ uid }) => uid === link.uid);
+
+      let search = null;
+
+      if (currentContentTypeConfig) {
+        const searchParams = {
+          page: 1,
+          pageSize: currentContentTypeConfig.settings.pageSize,
+          _sort: `${currentContentTypeConfig.settings.defaultSortBy}:${currentContentTypeConfig.settings.defaultSortOrder}`,
+        };
+
+        search = stringify(searchParams, { encode: false });
+      }
+
+      return {
+        icon: 'circle',
+        destination: `/plugins/content-manager/${link.kind}/${link.uid}`,
+        isDisplayed: true,
+        label: link.info.label,
+        permissions,
+        search,
+      };
+    });
+};
+
+const generateModelsLinks = (models, modelsConfigurations) => {
+  const [collectionTypes, singleTypes] = chain(models)
+    .groupBy('kind')
+    .map((value, key) => ({ name: key, links: value }))
+    .sortBy('name')
+    .value();
+
+  return {
+    collectionTypesSectionLinks: generateLinks(
+      get(collectionTypes, 'links', []),
+      'collectionTypes',
+      modelsConfigurations
+    ),
+    singleTypesSectionLinks: generateLinks(get(singleTypes, 'links', []), 'singleTypes'),
+  };
+};
+
+export default generateModelsLinks;
+export { generateLinks };

package/admin/src/containers/LeftMenu/utils/getCtOrStLinks.js

@@ -0,0 +1,49 @@
+import { request } from 'strapi-helper-plugin';
+import generateModelsLinks from './generateModelsLinks';
+import checkPermissions from './checkPermissions';
+
+const getCtOrStLinks = async userPermissions => {
+  const requestURL = '/content-manager/content-types';
+
+  try {
+    const {
+      data: contentTypeConfigurations,
+    } = await request('/content-manager/content-types-settings', { method: 'GET' });
+
+    const { data } = await request(requestURL, { method: 'GET' });
+    const { collectionTypesSectionLinks, singleTypesSectionLinks } = generateModelsLinks(
+      data,
+      contentTypeConfigurations
+    );
+
+    // Content Types verifications
+    const ctLinksPermissionsPromises = checkPermissions(
+      userPermissions,
+      collectionTypesSectionLinks
+    );
+    const ctLinksPermissions = await Promise.all(ctLinksPermissionsPromises);
+    const authorizedCtLinks = collectionTypesSectionLinks.filter(
+      (_, index) => ctLinksPermissions[index]
+    );
+
+    // Single Types verifications
+    const stLinksPermissionsPromises = checkPermissions(userPermissions, singleTypesSectionLinks);
+    const stLinksPermissions = await Promise.all(stLinksPermissionsPromises);
+    const authorizedStLinks = singleTypesSectionLinks.filter(
+      (_, index) => stLinksPermissions[index]
+    );
+
+    return { authorizedCtLinks, authorizedStLinks, contentTypes: data };
+  } catch (err) {
+    console.error(err);
+
+    strapi.notification.toggle({
+      type: 'warning',
+      message: { id: 'notification.error' },
+    });
+
+    return { authorizedCtLinks: [], authorizedStLinks: [], contentTypes: [] };
+  }
+};
+
+export default getCtOrStLinks;

package/admin/src/containers/LeftMenu/utils/getGeneralLinks.js

@@ -0,0 +1,42 @@
+import cloneDeep from 'lodash/cloneDeep';
+import checkPermissions from './checkPermissions';
+import { SETTINGS_BASE_URL } from '../../../config';
+import getSettingsMenuLinksPermissions from './getSettingsMenuLinksPermissions';
+
+const getGeneralLinks = async (
+  permissions,
+  generalSectionRawLinks,
+  settingsMenu,
+  shouldUpdateStrapi
+) => {
+  const generalSectionPermissionsPromises = checkPermissions(permissions, generalSectionRawLinks);
+  const generalSectionLinksPermissions = await Promise.all(generalSectionPermissionsPromises);
+
+  const authorizedGeneralSectionLinks = generalSectionRawLinks.filter(
+    (_, index) => generalSectionLinksPermissions[index]
+  );
+
+  const settingsLinkPermissions = getSettingsMenuLinksPermissions(settingsMenu);
+  const settingsLinkIndex = authorizedGeneralSectionLinks.findIndex(
+    obj => obj.destination === SETTINGS_BASE_URL
+  );
+
+  if (settingsLinkIndex === -1) {
+    return [];
+  }
+
+  const hasPermission = settingsLinkPermissions.every(Boolean);
+
+  if (!hasPermission) {
+    return [];
+  }
+
+  const authorizedGeneralLinksClone = cloneDeep(authorizedGeneralSectionLinks);
+
+  authorizedGeneralLinksClone[settingsLinkIndex].permissions = settingsLinkPermissions;
+  authorizedGeneralLinksClone[settingsLinkIndex].notificationCount = shouldUpdateStrapi ? 1 : 0;
+
+  return authorizedGeneralLinksClone;
+};
+
+export default getGeneralLinks;

package/admin/src/containers/LeftMenu/utils/getPluginSectionLinks.js

@@ -0,0 +1,17 @@
+import checkPermissions from './checkPermissions';
+
+const getPluginSectionLinks = async (userPermissions, pluginsSectionRawLinks) => {
+  const pluginSectionPermissionsPromises = checkPermissions(
+    userPermissions,
+    pluginsSectionRawLinks
+  );
+  const pluginSectionLinksPermissions = await Promise.all(pluginSectionPermissionsPromises);
+
+  const authorizedPluginSectionLinks = pluginsSectionRawLinks.filter(
+    (_, index) => pluginSectionLinksPermissions[index]
+  );
+
+  return authorizedPluginSectionLinks;
+};
+
+export default getPluginSectionLinks;

package/admin/src/containers/LeftMenu/utils/getSettingsMenuLinksPermissions.js

@@ -0,0 +1,20 @@
+import { get, isEmpty } from 'lodash';
+
+const getSettingsMenuLinksPermissions = menu =>
+  menu.reduce((acc, current) => {
+    const links = get(current, 'links', []);
+
+    const permissions = links.reduce((acc, current) => {
+      let currentPermissions = get(current, 'permissions', null);
+
+      if (isEmpty(currentPermissions)) {
+        return [...acc, null];
+      }
+
+      return [...acc, ...currentPermissions];
+    }, []);
+
+    return [...acc, ...permissions];
+  }, []);
+
+export default getSettingsMenuLinksPermissions;

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

@@ -0,0 +1,2 @@
+export { default as generateModelsLinks } from './generateModelsLinks';
+export { default as getSettingsMenuLinksPermissions } from './getSettingsMenuLinksPermissions';

package/admin/src/containers/LeftMenu/utils/toPluginLinks.js

@@ -0,0 +1,19 @@
+import get from 'lodash/get';
+import omit from 'lodash/omit';
+import sortLinks from '../../../utils/sortLinks';
+
+const toPluginLinks = plugins => {
+  const pluginsLinks = Object.values(plugins).reduce((acc, current) => {
+    const pluginsSectionLinks = get(current, 'menu.pluginsSectionLinks', []);
+
+    return [...acc, ...pluginsSectionLinks];
+  }, []);
+
+  const sortedLinks = sortLinks(pluginsLinks).map(link => {
+    return { ...omit(link, 'name') };
+  });
+
+  return sortedLinks;
+};
+
+export default toPluginLinks;

package/admin/src/containers/LocaleToggle/Wrapper.js

@@ -0,0 +1,147 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  -webkit-font-smoothing: antialiased;
+
+  > div {
+    height: 6rem;
+    line-height: 5.8rem;
+    z-index: 999;
+    > button {
+      width: 100%;
+      padding: 0 30px;
+      background: transparent;
+      border: none;
+      border-radius: 0;
+      color: #333740;
+      font-weight: 500;
+      text-align: right;
+      cursor: pointer;
+      transition: background 0.2s ease-out;
+
+      &:hover,
+      &:focus,
+      &:active {
+        color: #333740;
+        background-color: #fafafb !important;
+      }
+
+      > i,
+      > svg {
+        margin-left: 10px;
+        transition: transform 0.3s ease-out;
+
+        &[alt='true'] {
+          transform: rotateX(180deg);
+        }
+      }
+    }
+  }
+
+  .localeDropdownContent {
+    -webkit-font-smoothing: antialiased;
+    span {
+      color: #333740;
+      font-size: 13px;
+      font-family: Lato;
+      font-weight: 500;
+      letter-spacing: 0.5;
+      vertical-align: baseline;
+    }
+  }
+
+  .localeDropdownMenu {
+    min-width: 90px !important;
+    max-height: 162px !important;
+    overflow: auto !important;
+    margin: 0 !important;
+    padding: 0;
+    line-height: 1.8rem;
+    border: none !important;
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+    box-shadow: 0 1px 4px 0px rgba(40, 42, 49, 0.05);
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: -3px;
+      left: -1px;
+      width: calc(100% + 1px);
+      height: 3px;
+      box-shadow: 0 1px 2px 0 rgba(40, 42, 49, 0.16);
+    }
+
+    > button {
+      height: 40px;
+      padding: 0px 15px;
+      line-height: 40px;
+      color: #f75b1d;
+      font-size: 13px;
+      font-weight: 500;
+      letter-spacing: 0.5;
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: #fafafb !important;
+        border-radius: 0px;
+        cursor: pointer;
+      }
+    }
+
+    > button:first-child {
+      line-height: 50px;
+      margin-bottom: 4px;
+      &:hover,
+      &:active {
+        color: #333740;
+      }
+    }
+
+    > button:not(:first-child) {
+      height: 36px;
+      line-height: 36px;
+      > i,
+      > svg {
+        margin-left: 10px;
+      }
+    }
+  }
+
+  .localeDropdownMenuNotLogged {
+    background: transparent !important;
+    box-shadow: none !important;
+    border: 1px solid #e3e9f3 !important;
+    border-top: 0px !important;
+
+    button {
+      padding-left: 17px;
+      &:hover {
+        background-color: #f7f8f8 !important;
+      }
+    }
+
+    &:before {
+      box-shadow: none !important;
+    }
+  }
+
+  .localeToggleItem {
+    img {
+      max-height: 13.37px;
+      margin-left: 9px;
+    }
+    &:active {
+      color: black;
+    }
+    &:hover {
+      background-color: #fafafb !important;
+    }
+  }
+
+  .localeToggleItemActive {
+    color: #333740 !important;
+  }
+`;
+
+export default Wrapper;

package/admin/src/containers/LocaleToggle/actions.js

@@ -0,0 +1,19 @@
+/**
+ *
+ * LocaleToggle actions
+ */
+
+import { RESET_DEFAULT_CLASSNAME, SET_CUSTOM_CLASSNAME } from './constants';
+
+export function resetLocaleDefaultClassName() {
+  return {
+    type: RESET_DEFAULT_CLASSNAME,
+  };
+}
+
+export function setLocaleCustomClassName(className) {
+  return {
+    type: SET_CUSTOM_CLASSNAME,
+    className,
+  };
+}

package/admin/src/containers/LocaleToggle/constants.js

@@ -0,0 +1,8 @@
+/*
+ *
+ * LocaleToggle constants
+ *
+ */
+
+export const RESET_DEFAULT_CLASSNAME = 'StrapiAdmin/LocaleToggle/RESET_DEFAULT_CLASSNAME';
+export const SET_CUSTOM_CLASSNAME = 'StrapiAdmin/LocaleToggle/SET_CUSTOM_CLASSNAME';

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

@@ -0,0 +1,84 @@
+/*
+ *
+ * LanguageToggle
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { createStructuredSelector } from 'reselect';
+import { bindActionCreators, compose } from 'redux';
+import cn from 'classnames';
+import { ButtonDropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
+import makeSelectLocale from '../LanguageProvider/selectors';
+import { changeLocale } from '../LanguageProvider/actions';
+import { languages, languageNativeNames } from '../../i18n';
+import Wrapper from './Wrapper';
+
+export class LocaleToggle extends React.Component {
+  // eslint-disable-line
+  state = { isOpen: false };
+
+  toggle = () => this.setState(prevState => ({ isOpen: !prevState.isOpen }));
+
+  render() {
+    const {
+      currentLocale: { locale },
+      className,
+    } = this.props;
+    const style = cn('localeDropdownMenu', className);
+
+    return (
+      <Wrapper>
+        <ButtonDropdown isOpen={this.state.isOpen} toggle={this.toggle}>
+          <DropdownToggle className="localeDropdownContent">
+            <span>{languageNativeNames[locale]}</span>
+          </DropdownToggle>
+
+          <DropdownMenu className={style}>
+            {languages.map(language => (
+              <DropdownItem
+                key={language}
+                onClick={() => this.props.changeLocale(language)}
+                className={cn(
+                  'localeToggleItem',
+                  locale === language ? 'localeToggleItemActive' : ''
+                )}
+              >
+                {languageNativeNames[language]}
+              </DropdownItem>
+            ))}
+          </DropdownMenu>
+        </ButtonDropdown>
+      </Wrapper>
+    );
+  }
+}
+
+LocaleToggle.defaultProps = {
+  className: null,
+};
+
+LocaleToggle.propTypes = {
+  className: PropTypes.string,
+  changeLocale: PropTypes.func.isRequired,
+  currentLocale: PropTypes.object.isRequired,
+};
+
+const mapStateToProps = createStructuredSelector({
+  currentLocale: makeSelectLocale(),
+});
+
+export function mapDispatchToProps(dispatch) {
+  return bindActionCreators(
+    {
+      changeLocale,
+    },
+    dispatch
+  );
+}
+
+const withConnect = connect(mapStateToProps, mapDispatchToProps);
+
+export default compose(withConnect)(LocaleToggle);

package/admin/src/containers/LocaleToggle/reducer.js

@@ -0,0 +1,25 @@
+/*
+ *
+ * LocaleToggle reducer
+ *
+ */
+
+import { fromJS } from 'immutable';
+import { RESET_DEFAULT_CLASSNAME, SET_CUSTOM_CLASSNAME } from './constants';
+
+const initialState = fromJS({
+  className: null,
+});
+
+function localeToggleReducer(state = initialState, action) {
+  switch (action.type) {
+    case RESET_DEFAULT_CLASSNAME:
+      return state.update('className', () => initialState.get('className'));
+    case SET_CUSTOM_CLASSNAME:
+      return state.update('className', () => action.className);
+    default:
+      return state;
+  }
+}
+
+export default localeToggleReducer;

package/admin/src/containers/LocaleToggle/selectors.js

@@ -0,0 +1,25 @@
+import { createSelector } from 'reselect';
+
+/**
+ * Direct selector to the localeToggle state domain
+ */
+const selectLocaleToggle = () => state => state.get('localeToggle');
+
+/**
+ * Other specific selectors
+ */
+
+/**
+ * Default selector used by LocaleToggle
+ */
+
+const makeSelectLocaleToggle = () =>
+  createSelector(
+    selectLocaleToggle(),
+    substate => {
+      return substate ? substate.toJS() : substate;
+    }
+  );
+
+export default makeSelectLocaleToggle;
+export { selectLocaleToggle };

package/admin/src/containers/MarketplacePage/MarketplaceBanner/Wrapper.js

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+
+// TODO : To migrate with @strapi/parts
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 2rem;
+  border-radius: 4px;
+  border-left: 4px solid ${({ theme }) => theme.main.colors.mediumBlue};
+  box-shadow: 0 2px 4px ${({ theme }) => theme.main.colors.darkGrey};
+  padding: 8px 16px;
+
+  .bannerImage {
+    margin-right: 1rem;
+    width: 48px;
+    height: 48px;
+    margin-right: 16px;
+  }
+
+  .bannerLink {
+    color: ${({ theme }) => theme.main.colors.mediumBlue};
+    font-weight: ${({ theme }) => theme.main.fontWeights.bold};
+    svg {
+      margin-left: 4px;
+    }
+  }
+`;
+
+export default Wrapper;

package/admin/src/containers/MarketplacePage/MarketplaceBanner/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { useGlobalContext } from 'strapi-helper-plugin';
+import Wrapper from './Wrapper';
+import LogoStrapi from '../../../assets/images/banner_strapi-rocket.png';
+
+const MarketplaceBanner = () => {
+  const { formatMessage } = useIntl();
+  const { emitEvent } = useGlobalContext();
+
+  return (
+    <Wrapper>
+      <img
+        className="bannerImage"
+        src={LogoStrapi}
+        alt={formatMessage({ id: 'app.components.MarketplaceBanner.image.alt' })}
+      />
+      <div>
+        <div>
+          <FormattedMessage id="app.components.MarketplaceBanner" />
+        </div>
+        <a
+          href="https://github.com/strapi/awesome-strapi"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="bannerLink"
+          onClick={() => emitEvent('didGoToStrapiAwesome')}
+        >
+          <FormattedMessage id="app.components.MarketplaceBanner.link" />
+          <i className="fa fa-external-link-alt" />
+        </a>
+      </div>
+    </Wrapper>
+  );
+};
+
+export default MarketplaceBanner;