@akemona-org/strapi-admin 3.7.0

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

@@ -0,0 +1,73 @@
+import React from 'react';
+import { useGlobalContext, request } from 'strapi-helper-plugin';
+import { Header, List } from '@buffetjs/custom';
+import PageTitle from '../../components/PageTitle';
+import ContainerFluid from '../../components/ContainerFluid';
+import ListWrapper from './ListWrapper';
+import Row from './Row';
+import generateRows from './utils/generateRows';
+
+const InstalledPluginsPage = () => {
+  const { formatMessage, plugins } = useGlobalContext();
+  const onConfirm = async id => {
+    try {
+      const requestUrl = `/admin/plugins/uninstall/${id}`;
+      // Force the Overlayblocker to be displayed
+      const overlayblockerParams = {
+        enabled: true,
+        title: 'app.components.ListPluginsPage.deletePlugin.title',
+        description: 'app.components.ListPluginsPage.deletePlugin.description',
+      };
+      // Lock the app
+      strapi.lockApp(overlayblockerParams);
+      const response = await request(requestUrl, { method: 'DELETE' }, overlayblockerParams);
+
+      if (response.ok) {
+        // Reload the app
+        window.location.reload();
+      }
+    } catch (err) {
+      strapi.unlockApp();
+      strapi.notification.toggle({
+        type: 'warning',
+        message: { id: 'app.components.listPluginsPage.deletePlugin.error' },
+      });
+    }
+  };
+
+  const rows = generateRows(plugins, onConfirm);
+
+  return (
+    <div>
+      <PageTitle
+        title={formatMessage({
+          id: 'app.components.ListPluginsPage.helmet.title',
+        })}
+      />
+      <ContainerFluid>
+        <Header
+          title={{
+            label: formatMessage({
+              id: 'app.components.ListPluginsPage.title',
+            }),
+          }}
+          content={formatMessage({
+            id: 'app.components.ListPluginsPage.description',
+          })}
+        />
+        <ListWrapper>
+          <List
+            title={formatMessage(
+              { id: 'app.components.listPlugins.title.plural' },
+              { number: rows.length }
+            )}
+            items={rows}
+            customRowComponent={Row}
+          />
+        </ListWrapper>
+      </ContainerFluid>
+    </div>
+  );
+};
+
+export default InstalledPluginsPage;

package/admin/src/containers/InstalledPluginsPage/utils/generateRows.js

@@ -0,0 +1,19 @@
+import { sortBy } from 'lodash';
+
+const generateRows = (obj, onConfirm) => {
+  const rows = Object.values(obj).map(({ name, pluginLogo, id, description, isRequired, icon }) => {
+    return {
+      name,
+      logo: pluginLogo,
+      id,
+      description,
+      isRequired,
+      icon,
+      onConfirm,
+    };
+  });
+
+  return sortBy(rows, [obj => obj.name.toLowerCase()]);
+};
+
+export default generateRows;

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

@@ -0,0 +1,16 @@
+/*
+ *
+ * LanguageProvider actions
+ *
+ */
+
+/* eslint-disable */
+
+import { CHANGE_LOCALE } from './constants';
+
+export function changeLocale(languageLocale) {
+  return {
+    type: CHANGE_LOCALE,
+    locale: languageLocale,
+  };
+}

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

@@ -0,0 +1,8 @@
+/*
+ *
+ * LanguageProvider constants
+ *
+ */
+
+/* eslint-disable */
+export const CHANGE_LOCALE = 'app/LanguageToggle/CHANGE_LOCALE';

package/admin/src/containers/LanguageProvider/hooks/useChangeLanguage.js

@@ -0,0 +1,14 @@
+import { useDispatch } from 'react-redux';
+import { changeLocale } from '../actions';
+
+const useChangeLanguage = () => {
+  const dispatch = useDispatch();
+
+  const changeLanguage = nextLocale => {
+    dispatch(changeLocale(nextLocale));
+  };
+
+  return changeLanguage;
+};
+
+export default useChangeLanguage;

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

@@ -0,0 +1,49 @@
+/*
+ *
+ * LanguageProvider
+ *
+ * this component connects the redux state language locale to the
+ * IntlProvider component and i18n messages (loaded from `app/translations`)
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { IntlProvider } from 'react-intl';
+import { defaultsDeep } from 'lodash';
+import { selectLocale } from './selectors';
+
+// eslint-disable-next-line react/prefer-stateless-function
+export class LanguageProvider extends React.Component {
+  render() {
+    const messages = defaultsDeep(this.props.messages[this.props.locale], this.props.messages.en);
+
+    return (
+      <IntlProvider
+        locale={this.props.locale}
+        defaultLocale="en"
+        messages={messages}
+        textComponent="span"
+      >
+        {React.Children.only(this.props.children)}
+      </IntlProvider>
+    );
+  }
+}
+
+LanguageProvider.propTypes = {
+  children: PropTypes.element.isRequired,
+  locale: PropTypes.string.isRequired,
+  messages: PropTypes.object.isRequired,
+};
+
+const mapStateToProps = createSelector(selectLocale(), locale => ({ locale }));
+
+function mapDispatchToProps(dispatch) {
+  return {
+    dispatch,
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(LanguageProvider);

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

@@ -0,0 +1,52 @@
+/*
+ *
+ * LanguageProvider reducer
+ *
+ */
+
+import { fromJS } from 'immutable';
+import { get, includes, split } from 'lodash';
+
+// Import supported languages from the translations folder
+import trads from '../../translations';
+import { CHANGE_LOCALE } from './constants';
+
+const languages = Object.keys(trads);
+
+// Define a key to store and get user preferences in local storage.
+const localStorageKey = 'strapi-admin-language';
+
+// Detect user language.
+const userLanguage =
+  window.localStorage.getItem(localStorageKey) ||
+  window.navigator.language ||
+  window.navigator.userLanguage;
+
+let foundLanguage = includes(languages, userLanguage) && userLanguage;
+
+if (!foundLanguage) {
+  // Split user language in a correct format.
+  const userLanguageShort = get(split(userLanguage, '-'), '0');
+
+  // Check that the language is included in the admin configuration.
+  foundLanguage = includes(languages, userLanguageShort) && userLanguageShort;
+}
+
+const initialState = fromJS({
+  locale: foundLanguage || 'en',
+});
+
+function languageProviderReducer(state = initialState, action) {
+  switch (action.type) {
+    case CHANGE_LOCALE:
+      // Set user language in local storage.
+      window.localStorage.setItem(localStorageKey, action.locale);
+      strapi.currentLanguage = action.locale;
+
+      return state.set('locale', action.locale);
+    default:
+      return state;
+  }
+}
+
+export default languageProviderReducer;

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

@@ -0,0 +1,25 @@
+import { createSelector } from 'reselect';
+
+/**
+ * Direct selector to the languageToggle state domain
+ */
+const selectLanguage = () => state => state.get('language');
+
+/**
+ * Select the language locale
+ */
+
+const selectLocale = () =>
+  createSelector(
+    selectLanguage(),
+    languageState => languageState.get('locale'),
+  );
+
+const makeSelectLocale = () =>
+  createSelector(
+    selectLocale(),
+    locale => ({ locale }),
+  );
+
+export default makeSelectLocale;
+export { selectLanguage, selectLocale };

package/admin/src/containers/LeftMenu/Loader.js

@@ -0,0 +1,34 @@
+/*
+ *
+ * This component is used to show a global loader while permissions are being checked
+ * it prevents from lifting the state up in order to avoid setting more logic into the Admin container
+ * this way we can show a global loader without modifying the Admin code
+ *
+ */
+
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { LoadingIndicatorPage } from 'strapi-helper-plugin';
+import PropTypes from 'prop-types';
+import LoaderWrapper from './LoaderWrapper';
+
+const MOUNT_NODE = document.getElementById('app') || document.createElement('div');
+
+const Loader = ({ show }) => {
+  if (show) {
+    return createPortal(
+      <LoaderWrapper>
+        <LoadingIndicatorPage />
+      </LoaderWrapper>,
+      MOUNT_NODE
+    );
+  }
+
+  return null;
+};
+
+Loader.propTypes = {
+  show: PropTypes.bool.isRequired,
+};
+
+export default Loader;

package/admin/src/containers/LeftMenu/LoaderWrapper.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+const LoaderWrapper = styled.div`
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1140;
+  background: ${({ theme }) => theme.main.colors.white};
+`;
+
+export default LoaderWrapper;

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

@@ -0,0 +1,61 @@
+/**
+ *
+ * Wrapper
+ *
+ */
+
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const Wrapper = styled.div`
+  position: fixed;
+  float: left;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: ${props => props.theme.main.sizes.leftMenu.width};
+  background: ${props => props.theme.main.colors.strapi['blue-darker']};
+
+  /* scrollbar overrides */
+  * {
+    ::-webkit-scrollbar {
+      width: 7px;
+    }
+
+    ::-webkit-scrollbar-track,
+    ::-webkit-scrollbar-track:hover {
+      background-color: transparent;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background-color: ${props => props.theme.main.colors.leftMenu['title-color']};
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+      background-color: ${props => props.theme.main.colors.leftMenu['link-color']};
+    }
+
+    /* firefox */
+    scrollbar-color: ${props => props.theme.main.colors.leftMenu['title-color']} transparent;
+  }
+`;
+
+Wrapper.defaultProps = {
+  theme: {
+    main: {
+      colors: {
+        strapi: {},
+      },
+      sizes: {
+        header: {},
+        leftMenu: {},
+      },
+    },
+  },
+};
+
+Wrapper.propTypes = {
+  theme: PropTypes.object,
+};
+
+export default Wrapper;

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

@@ -0,0 +1,24 @@
+import {
+  TOGGLE_IS_LOADING,
+  SET_CT_OR_ST_LINKS,
+  SET_SECTION_LINKS,
+  UNSET_IS_LOADING,
+} from './constants';
+
+export const setCtOrStLinks = (authorizedCtLinks, authorizedStLinks, contentTypeSchemas) => ({
+  type: SET_CT_OR_ST_LINKS,
+  data: { authorizedCtLinks, authorizedStLinks, contentTypeSchemas },
+});
+
+export const setSectionLinks = (authorizedGeneralLinks, authorizedPluginLinks) => ({
+  type: SET_SECTION_LINKS,
+  data: { authorizedGeneralLinks, authorizedPluginLinks },
+});
+
+export const toggleIsLoading = () => ({
+  type: TOGGLE_IS_LOADING,
+});
+
+export const unsetIsLoading = () => ({
+  type: UNSET_IS_LOADING,
+});

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

@@ -0,0 +1,4 @@
+export const SET_CT_OR_ST_LINKS = 'StrapiAdmin/LeftMenu/SET_CT_OR_ST_LINKS';
+export const SET_SECTION_LINKS = 'StrapiAdmin/LeftMenu/SET_SECTION_LINKS';
+export const TOGGLE_IS_LOADING = 'StrapiAdmin/LeftMenu/TOGGLE_IS_LOADING';
+export const UNSET_IS_LOADING = 'StrapiAdmin/LeftMenu/UNSET_IS_LOADING';

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

@@ -0,0 +1,101 @@
+import React, { memo, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useLocation } from 'react-router-dom';
+import {
+  LeftMenuLinksSection,
+  LeftMenuFooter,
+  LeftMenuHeader,
+  LinksContainer,
+} from '../../components/LeftMenu';
+import Loader from './Loader';
+import Wrapper from './Wrapper';
+import useMenuSections from './useMenuSections';
+
+const LeftMenu = ({ shouldUpdateStrapi, version, plugins, setUpdateMenu }) => {
+  const location = useLocation();
+
+  const {
+    state: {
+      isLoading,
+      collectionTypesSectionLinks,
+      singleTypesSectionLinks,
+      generalSectionLinks,
+      pluginsSectionLinks,
+    },
+    toggleLoading,
+    generateMenu,
+  } = useMenuSections(plugins, shouldUpdateStrapi);
+
+  const filteredCollectionTypeLinks = collectionTypesSectionLinks.filter(
+    ({ isDisplayed }) => isDisplayed
+  );
+  const filteredSingleTypeLinks = singleTypesSectionLinks.filter(({ isDisplayed }) => isDisplayed);
+
+  // This effect is really temporary until we create the menu api
+  // We need this because we need to regenerate the links when the settings are being changed
+  // in the content manager configurations list
+  useEffect(() => {
+    setUpdateMenu(() => {
+      toggleLoading();
+      generateMenu();
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <Wrapper>
+      <Loader show={isLoading} />
+      <LeftMenuHeader />
+      <LinksContainer>
+        {filteredCollectionTypeLinks.length > 0 && (
+          <LeftMenuLinksSection
+            section="collectionType"
+            name="collectionType"
+            links={filteredCollectionTypeLinks}
+            location={location}
+            searchable
+          />
+        )}
+        {filteredSingleTypeLinks.length > 0 && (
+          <LeftMenuLinksSection
+            section="singleType"
+            name="singleType"
+            links={filteredSingleTypeLinks}
+            location={location}
+            searchable
+          />
+        )}
+
+        {pluginsSectionLinks.length > 0 && (
+          <LeftMenuLinksSection
+            section="plugins"
+            name="plugins"
+            links={pluginsSectionLinks}
+            location={location}
+            searchable={false}
+            emptyLinksListMessage="app.components.LeftMenuLinkContainer.noPluginsInstalled"
+          />
+        )}
+        {generalSectionLinks.length > 0 && (
+          <LeftMenuLinksSection
+            section="general"
+            name="general"
+            links={generalSectionLinks}
+            location={location}
+            searchable={false}
+          />
+        )}
+      </LinksContainer>
+      <LeftMenuFooter key="footer" version={version} />
+    </Wrapper>
+  );
+};
+
+LeftMenu.propTypes = {
+  shouldUpdateStrapi: PropTypes.bool.isRequired,
+  version: PropTypes.string.isRequired,
+  plugins: PropTypes.object.isRequired,
+  setUpdateMenu: PropTypes.func.isRequired,
+};
+
+export default memo(LeftMenu);

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

@@ -0,0 +1,79 @@
+/* eslint-disable consistent-return */
+import produce from 'immer';
+import { SETTINGS_BASE_URL } from '../../config';
+import adminPermissions from '../../permissions';
+import {
+  SET_CT_OR_ST_LINKS,
+  SET_SECTION_LINKS,
+  TOGGLE_IS_LOADING,
+  UNSET_IS_LOADING,
+} from './constants';
+
+const initialState = {
+  collectionTypesSectionLinks: [],
+  generalSectionLinks: [
+    {
+      icon: 'list',
+      label: 'app.components.LeftMenuLinkContainer.listPlugins',
+      destination: '/list-plugins',
+      isDisplayed: false,
+      permissions: adminPermissions.marketplace.main,
+      notificationsCount: 0,
+    },
+    {
+      icon: 'shopping-basket',
+      label: 'app.components.LeftMenuLinkContainer.installNewPlugin',
+      destination: '/marketplace',
+      isDisplayed: false,
+      permissions: adminPermissions.marketplace.main,
+      notificationsCount: 0,
+    },
+    {
+      icon: 'cog',
+      label: 'app.components.LeftMenuLinkContainer.settings',
+      isDisplayed: false,
+      destination: SETTINGS_BASE_URL,
+      // Permissions of this link are retrieved in the init phase
+      // using the settings menu
+      permissions: [],
+      notificationsCount: 0,
+    },
+  ],
+  singleTypesSectionLinks: [],
+  pluginsSectionLinks: [],
+  isLoading: true,
+};
+
+const reducer = (state = initialState, action) =>
+  produce(state, draftState => {
+    switch (action.type) {
+      case SET_CT_OR_ST_LINKS: {
+        const { authorizedCtLinks, authorizedStLinks } = action.data;
+        draftState.collectionTypesSectionLinks = authorizedCtLinks;
+        draftState.singleTypesSectionLinks = authorizedStLinks;
+        break;
+      }
+
+      case SET_SECTION_LINKS: {
+        const { authorizedGeneralLinks, authorizedPluginLinks } = action.data;
+        draftState.generalSectionLinks = authorizedGeneralLinks;
+        draftState.pluginsSectionLinks = authorizedPluginLinks;
+        break;
+      }
+
+      case TOGGLE_IS_LOADING: {
+        draftState.isLoading = !state.isLoading;
+        break;
+      }
+      case UNSET_IS_LOADING: {
+        draftState.isLoading = false;
+        break;
+      }
+
+      default:
+        return draftState;
+    }
+  });
+
+export default reducer;
+export { initialState };

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

@@ -0,0 +1,3 @@
+const selectMenuLinks = state => state.get('menu');
+
+export default selectMenuLinks;

package/admin/src/containers/LeftMenu/useMenuSections.js

@@ -0,0 +1,62 @@
+import { useEffect, useRef } from 'react';
+import { useUser } from 'strapi-helper-plugin';
+import { useSelector, useDispatch } from 'react-redux';
+import getCtOrStLinks from './utils/getCtOrStLinks';
+import getPluginSectionLinks from './utils/getPluginSectionLinks';
+import getGeneralLinks from './utils/getGeneralLinks';
+import { setCtOrStLinks, setSectionLinks, toggleIsLoading, unsetIsLoading } from './actions';
+import useSettingsMenu from '../../hooks/useSettingsMenu';
+import toPluginLinks from './utils/toPluginLinks';
+import selectMenuLinks from './selectors';
+
+const useMenuSections = (plugins, shouldUpdateStrapi) => {
+  const state = useSelector(selectMenuLinks);
+  const dispatch = useDispatch();
+  const { userPermissions } = useUser();
+  const { menu: settingsMenu } = useSettingsMenu(true);
+  // We are using a ref because we don't want our effect to have this in its dependencies array
+  const generalSectionLinksRef = useRef(state.generalSectionLinks);
+  const shouldUpdateStrapiRef = useRef(shouldUpdateStrapi);
+  // Since the settingsMenu is not managing any state because of the true argument we can use a ref here
+  // so we don't need to add it to the effect dependencies array
+  const settingsMenuRef = useRef(settingsMenu);
+  // Once in the app lifecycle the plugins should not be added into any dependencies array, in order to prevent
+  // the effect to be run when another plugin is using one plugins internal api for instance
+  // so it's definitely ok to use a ref here
+  const pluginsRef = useRef(plugins);
+
+  const toggleLoading = () => dispatch(toggleIsLoading());
+
+  const resolvePermissions = async (permissions = userPermissions) => {
+    const pluginsSectionLinks = toPluginLinks(pluginsRef.current);
+    const { authorizedCtLinks, authorizedStLinks, contentTypes } = await getCtOrStLinks(
+      permissions
+    );
+
+    const authorizedPluginSectionLinks = await getPluginSectionLinks(
+      permissions,
+      pluginsSectionLinks
+    );
+
+    const authorizedGeneralSectionLinks = await getGeneralLinks(
+      permissions,
+      generalSectionLinksRef.current,
+      settingsMenuRef.current,
+      shouldUpdateStrapiRef.current
+    );
+
+    dispatch(setCtOrStLinks(authorizedCtLinks, authorizedStLinks, contentTypes));
+    dispatch(setSectionLinks(authorizedGeneralSectionLinks, authorizedPluginSectionLinks));
+    dispatch(unsetIsLoading());
+  };
+
+  const resolvePermissionsRef = useRef(resolvePermissions);
+
+  useEffect(() => {
+    resolvePermissionsRef.current(userPermissions);
+  }, [userPermissions, dispatch]);
+
+  return { state, generateMenu: resolvePermissionsRef.current, toggleLoading };
+};
+
+export default useMenuSections;

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

@@ -0,0 +1,13 @@
+import { hasPermissions } from 'strapi-helper-plugin';
+
+/**
+ * This function resolves an array of Promises<boolean>
+ * It puts at a specific index the status of a specific permission.
+ * While this might look weird, we then iterate on this array
+ * and check the different CT/ST/general/plugin sections
+ * and make an index based comparisons
+ */
+const checkPermissions = (userPermissions, permissionsToCheck) =>
+  permissionsToCheck.map(({ permissions }) => hasPermissions(userPermissions, permissions));
+
+export default checkPermissions;