@strapi/admin 4.6.0-beta.0 → 4.6.0-beta.2

package/server/services/user.js

@@ -43,6 +43,8 @@ const create = async (attributes) => {
 
   getService('metrics').sendDidInviteUser();
 
+  strapi.eventHub.emit('user.create', { user: sanitizeUser(createdUser) });
+
   return createdUser;
 };
 
@@ -76,7 +78,7 @@ const updateById = async (id, attributes) => {
   if (_.has(attributes, 'password')) {
     const hashedPassword = await getService('auth').hashPassword(attributes.password);
 
-    return strapi.query('admin::user').update({
+    const updatedUser = await strapi.query('admin::user').update({
       where: { id },
       data: {
         ...attributes,
@@ -84,13 +86,21 @@ const updateById = async (id, attributes) => {
       },
       populate: ['roles'],
     });
+
+    strapi.eventHub.emit('user.update', { user: sanitizeUser(updatedUser) });
+
+    return updatedUser;
   }
 
-  return strapi.query('admin::user').update({
+  const updatedUser = await strapi.query('admin::user').update({
     where: { id },
     data: attributes,
     populate: ['roles'],
   });
+
+  strapi.eventHub.emit('user.update', { user: sanitizeUser(updatedUser) });
+
+  return updatedUser;
 };
 
 /**
@@ -226,7 +236,13 @@ const deleteById = async (id) => {
     }
   }
 
-  return strapi.query('admin::user').delete({ where: { id }, populate: ['roles'] });
+  const deletedUser = await strapi
+    .query('admin::user')
+    .delete({ where: { id }, populate: ['roles'] });
+
+  strapi.eventHub.emit('user.delete', { user: sanitizeUser(deletedUser) });
+
+  return deletedUser;
 };
 
 /** Delete a user
@@ -257,6 +273,10 @@ const deleteByIds = async (ids) => {
     deletedUsers.push(deletedUser);
   }
 
+  strapi.eventHub.emit('user.delete', {
+    users: deletedUsers.map((deletedUser) => sanitizeUser(deletedUser)),
+  });
+
   return deletedUsers;
 };
 

package/webpack.alias.js

@@ -7,8 +7,6 @@ const aliasExactMatch = [
   '@strapi/design-system',
   '@strapi/helper-plugin',
   '@strapi/icons',
-  '@fortawesome/fontawesome-svg-core',
-  '@fortawesome/free-solid-svg-icons',
   'date-fns',
   'formik',
   'history',

package/webpack.config.js

@@ -10,6 +10,7 @@ const { ESBuildMinifyPlugin } = require('esbuild-loader');
 const WebpackBar = require('webpackbar');
 const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+const browserslistToEsbuild = require('browserslist-to-esbuild');
 
 const alias = require('./webpack.alias');
 const getClientEnvironment = require('./env');
@@ -52,6 +53,8 @@ module.exports = ({
 
   const excludeRegex = createPluginsExcludePath(pluginsPath);
 
+  const buildTarget = browserslistToEsbuild();
+
   return {
     mode: isProduction ? 'production' : 'development',
     bail: !!isProduction,
@@ -72,7 +75,7 @@ module.exports = ({
       minimize: optimize,
       minimizer: [
         new ESBuildMinifyPlugin({
-          target: 'es2015',
+          target: buildTarget,
           css: true, // Apply minification to CSS assets
         }),
       ],
@@ -88,7 +91,7 @@ module.exports = ({
           exclude: excludeRegex,
           options: {
             loader: 'tsx',
-            target: 'es2015',
+            target: buildTarget,
           },
         },
         {
@@ -152,7 +155,7 @@ module.exports = ({
                 loader: require.resolve('esbuild-loader'),
                 options: {
                   loader: 'jsx',
-                  target: 'es2015',
+                  target: buildTarget,
                 },
               },
             },
@@ -165,7 +168,7 @@ module.exports = ({
             loader: require.resolve('esbuild-loader'),
             options: {
               loader: 'jsx',
-              target: 'es2015',
+              target: buildTarget,
             },
           },
         },

package/admin/src/content-manager/components/BackHeader/index.js

@@ -1,8 +0,0 @@
-import styled from 'styled-components';
-import { BackHeader as BaseBackHeader } from '@strapi/helper-plugin';
-
-const BackHeader = styled(BaseBackHeader)`
-  left: 24rem;
-`;
-
-export default BackHeader;

package/admin/src/content-manager/components/Block/components.js

@@ -1,28 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  margin-bottom: 35px;
-  background: #ffffff;
-  padding: 22px 28px 18px;
-  padding-bottom: 13px;
-  border-radius: 2px;
-  box-shadow: 0 2px 4px #e3e9f3;
-  -webkit-font-smoothing: antialiased;
-`;
-
-const Sub = styled.div`
-  padding-top: 0px;
-  line-height: 18px;
-  > p:first-child {
-    margin-bottom: 1px;
-    font-weight: 700;
-    color: #333740;
-    font-size: 1.8rem;
-  }
-  > p {
-    color: #787e8f;
-    font-size: 13px;
-  }
-`;
-
-export { Wrapper, Sub };

package/admin/src/content-manager/components/Block/index.js

@@ -1,43 +0,0 @@
-/**
- *
- * Block
- */
-
-import React, { memo } from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import { Wrapper, Sub } from './components';
-
-const renderMsg = (msg) => <p>{msg}</p>;
-
-const Block = ({ children, description, style, title }) => (
-  <div className="col-md-12">
-    <Wrapper style={style}>
-      <Sub>
-        {!!title && (
-          <p>
-            <FormattedMessage id={title} />
-          </p>
-        )}
-        {!!description && <FormattedMessage id={description}>{renderMsg}</FormattedMessage>}
-      </Sub>
-      {children}
-    </Wrapper>
-  </div>
-);
-
-Block.defaultProps = {
-  children: null,
-  description: null,
-  style: {},
-  title: null,
-};
-
-Block.propTypes = {
-  children: PropTypes.any,
-  description: PropTypes.string,
-  style: PropTypes.object,
-  title: PropTypes.string,
-};
-
-export default memo(Block);

package/admin/src/content-manager/components/Container/index.js

@@ -1,7 +0,0 @@
-import styled from 'styled-components';
-
-const Container = styled.div`
-  padding: 18px 30px 66px 30px;
-`;
-
-export default Container;

package/admin/src/content-manager/components/CustomInputCheckbox/components.js

@@ -1,77 +0,0 @@
-import styled, { css } from 'styled-components';
-/* eslint-disable */
-
-const Label = styled.label`
-  cursor: pointer;
-  position: relative;
-  vertical-align: middle;
-  > input {
-    display: none;
-  }
-  &:before {
-    content: '';
-    position: absolute;
-    left: 15px;
-    top: calc(50% - 8px);
-    width: 14px;
-    height: 14px;
-    border: 1px solid rgba(16, 22, 34, 0.15);
-    background-color: #fdfdfd;
-    border-radius: 3px;
-  }
-
-  ${({ shouldDisplaySomeChecked }) => {
-    if (shouldDisplaySomeChecked) {
-      return css`
-        &:after {
-          content: '\f068';
-          position: absolute;
-          top: calc(50% - 8px);
-          left: 18px;
-          font-size: 10px;
-          font-family: 'FontAwesome';
-          font-weight: 100;
-          color: #1c5de7;
-        }
-      `;
-    }
-  }}
-
-  ${({ shouldDisplayAllChecked }) => {
-    if (shouldDisplayAllChecked) {
-      return css`
-        &:after {
-          content: '\f00c';
-          position: absolute;
-          top: calc(50% - 9px);
-          left: 17px;
-          font-size: 10px;
-          font-family: 'FontAwesome';
-          font-weight: 100;
-          color: #1c5de7;
-          transition: all 0.2s;
-        }
-      `;
-    }
-  }}
-
-  ${({ isChecked }) => {
-    if (isChecked) {
-      return css`
-        &:after {
-          content: '\f00c';
-          position: absolute;
-          top: calc(50% - 11px);
-          left: 17px;
-          font-size: 10px;
-          font-family: 'FontAwesome';
-          font-weight: 100;
-          color: #1c5de7;
-          transition: all 0.2s;
-        }
-      `;
-    }
-  }}
-`;
-
-export { Label };

package/admin/src/content-manager/components/CustomInputCheckbox/index.js

@@ -1,53 +0,0 @@
-/**
- *
- * CustomInputCheckbox
- */
-
-import React, { memo } from 'react';
-import PropTypes from 'prop-types';
-import { Label } from './components';
-
-function CustomInputCheckbox({ entriesToDelete, isAll, name, onChange, value }) {
-  const shouldDisplaySomeChecked = isAll && entriesToDelete.length > 0 && !value;
-
-  const shouldDisplayAllChecked = isAll && value;
-
-  return (
-    <span className="form-check" style={{ marginLeft: '-15px' }}>
-      <Label
-        className="form-check-label"
-        isAll={isAll}
-        shouldDisplaySomeChecked={shouldDisplaySomeChecked}
-        shouldDisplayAllChecked={shouldDisplayAllChecked}
-        isChecked={value && !isAll}
-        htmlFor={name}
-      >
-        <input
-          className="form-check-input"
-          checked={value}
-          id={name}
-          name={name}
-          onChange={onChange}
-          type="checkbox"
-        />
-      </Label>
-    </span>
-  );
-}
-
-CustomInputCheckbox.defaultProps = {
-  entriesToDelete: [],
-  isAll: false,
-  name: '',
-  value: false,
-};
-
-CustomInputCheckbox.propTypes = {
-  entriesToDelete: PropTypes.array,
-  isAll: PropTypes.bool,
-  name: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  onChange: PropTypes.func.isRequired,
-  value: PropTypes.bool,
-};
-
-export default memo(CustomInputCheckbox);

package/admin/src/content-manager/components/DynamicComponentCard/Wrapper.js

@@ -1,63 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  position: relative;
-  height: 90px;
-  width: 139px !important;
-  margin: 0 10px 10px 0;
-  padding: 18px 10px;
-  background-color: #ffffff;
-  color: #919bae;
-  text-align: center;
-  border-radius: 2px;
-  cursor: pointer;
-  border: 1px solid #ffffff;
-
-  button {
-    outline: 0;
-  }
-
-  .component-uid {
-    width: 119px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    color: #919bae;
-    font-weight: 500;
-    font-size: 13px;
-    line-height: normal;
-  }
-
-  .component-icon {
-    width: 35px;
-    height: 35px;
-    margin-bottom: 5px;
-    line-height: 35px;
-    align-self: center;
-    border-radius: 50%;
-    background-color: #e9eaeb;
-    color: #b4b6ba;
-    padding: 0;
-    i,
-    svg {
-      margin: auto;
-      display: block;
-    }
-  }
-
-  &:hover {
-    background-color: #e6f0fb;
-    color: #007eff;
-    border: 1px solid #aed4fb;
-
-    .component-icon {
-      background-color: #aed4fb;
-      color: #007eff;
-    }
-    .component-uid {
-      color: #007eff;
-    }
-  }
-`;
-
-export default Wrapper;

package/admin/src/content-manager/components/FilterOptionsCTA/index.js

@@ -1,14 +0,0 @@
-import styled from 'styled-components';
-
-const FilterOptionsCTA = styled.button`
-  display: flex;
-  justify-content: center;
-  height: 20px;
-  width: 20px;
-  margin: 8px 5px 0px 0px;
-  border-radius: 50%;
-  border: 1px solid #e3e9f3;
-  cursor: pointer;
-`;
-
-export default FilterOptionsCTA;

package/admin/src/content-manager/components/FormTitle/index.js

@@ -1,22 +0,0 @@
-import React, { memo } from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-
-const FormTitle = ({ description, title }) => (
-  <>
-    {!!title && <FormattedMessage id={title} />}
-    {!!description && <FormattedMessage id={description}>{(msg) => <p>{msg}</p>}</FormattedMessage>}
-  </>
-);
-
-FormTitle.propTypes = {
-  description: PropTypes.string,
-  title: PropTypes.string,
-};
-
-FormTitle.defaultProps = {
-  description: null,
-  title: null,
-};
-
-export default memo(FormTitle);

package/admin/src/content-manager/components/FormWrapper/index.js

@@ -1,20 +0,0 @@
-import styled from 'styled-components';
-
-const FormWrapper = styled.div`
-  padding: 22px 10px 0 10px;
-  background: #ffffff;
-  border-radius: 2px;
-  box-shadow: 0 2px 4px #e3e9f3;
-  margin-bottom: 17px;
-  > div {
-    margin-right: 0;
-    margin-left: 0;
-  }
-  .row {
-    &:last-of-type {
-      margin-bottom: 0;
-    }
-  }
-`;
-
-export default FormWrapper;

package/admin/src/content-manager/components/InputJSON/FieldError.js

@@ -1,38 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { Typography } from '@strapi/design-system/Typography';
-
-export const FieldError = ({ id, error, name }) => {
-  const { formatMessage } = useIntl();
-  const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';
-
-  if (!error) {
-    return null;
-  }
-
-  return (
-    <Typography
-      as="p"
-      variant="pi"
-      id={`${id || name}-error`}
-      textColor="danger600"
-      data-strapi-field-error
-    >
-      {errorMessage}
-    </Typography>
-  );
-};
-
-FieldError.defaultProps = {
-  id: undefined,
-  error: undefined,
-};
-
-FieldError.propTypes = {
-  error: PropTypes.string,
-  id: PropTypes.string,
-  name: PropTypes.string.isRequired,
-};
-
-export default FieldError;

package/admin/src/content-manager/components/LayoutTitle/index.js

@@ -1,19 +0,0 @@
-import styled from 'styled-components';
-
-const LayoutTitle = styled.div`
-  color: #333740;
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 18px;
-
-  p {
-    margin-top: 2px;
-    margin-bottom: 13px;
-    color: #9ea7b8;
-    font-size: 12px;
-    font-weight: 400;
-    line-height: normal;
-  }
-`;
-
-export default LayoutTitle;

package/admin/src/content-manager/components/PlusButton/index.js

@@ -1,52 +0,0 @@
-import styled from 'styled-components';
-
-const beforeStyle = `
-  content: ' ';
-  position: absolute;
-  display: block;
-  width: 14px;
-  height: 2px;
-  left: 11px;
-  top: 17px;
-  bottom: 10px;
-  z-index: 9;
-`;
-
-const afterStyle = `
-  content: ' ';
-  position: absolute;
-  display: block;
-  height: 14px;
-  width: 2px;
-  left: 17px;
-  top: 11px;
-  right: 10px;
-  z-index: 9;
-`;
-
-const Button = styled.button`
-  position: relative;
-  height: 36px;
-  width: 36px;
-  background-color: #f3f4f4;
-  border-radius: 50%;
-  text-align: center;
-
-  :focus {
-    outline: 0;
-  }
-
-  :before {
-    ${beforeStyle}
-  }
-  :after {
-    ${afterStyle}
-  }
-
-  :before,
-  :after {
-    background-color: #b4b6ba;
-  }
-`;
-
-export default Button;

package/admin/src/content-manager/components/PreviewCarret/components.js

@@ -1,27 +0,0 @@
-import styled from 'styled-components';
-
-/* eslint-disable indent */
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  height: 30px;
-  width: 100%;
-  padding: 0 5px;
-
-  ${({ isComponent }) =>
-    isComponent &&
-    `
-    height: 34px;
-    padding: 0;
-  `}
-
-  border-radius: 2px;
-  > div {
-    width: 100%;
-    height: 2px;
-    background: #007eff;
-  }
-`;
-
-export default Wrapper;

package/admin/src/content-manager/components/PreviewCarret/index.js

@@ -1,22 +0,0 @@
-import React, { memo } from 'react';
-import PropTypes from 'prop-types';
-
-import Wrapper from './components';
-
-const PreviewCarret = ({ isComponent, style }) => (
-  <Wrapper isComponent={isComponent} style={style}>
-    <div />
-  </Wrapper>
-);
-
-PreviewCarret.defaultProps = {
-  isComponent: false,
-  style: {},
-};
-
-PreviewCarret.propTypes = {
-  isComponent: PropTypes.bool,
-  style: PropTypes.object,
-};
-
-export default memo(PreviewCarret);

package/admin/src/content-manager/components/SectionTitle/Title.js

@@ -1,11 +0,0 @@
-import styled from 'styled-components';
-
-const Title = styled.div`
-  color: #787e8f;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.77px;
-  text-transform: uppercase;
-`;
-
-export default Title;

package/admin/src/content-manager/components/SectionTitle/index.js

@@ -1,26 +0,0 @@
-import React, { memo } from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import { getTrad } from '../../utils';
-import Title from './Title';
-
-const SectionTitle = ({ isSettings }) => {
-  const suffix = isSettings ? 'settings' : 'view';
-  const msgId = getTrad(`containers.SettingPage.${suffix}`);
-
-  return (
-    <div style={{ marginBottom: '18px' }}>
-      <FormattedMessage id={msgId}>{(msg) => <Title>{msg}</Title>}</FormattedMessage>
-    </div>
-  );
-};
-
-SectionTitle.propTypes = {
-  isSettings: PropTypes.bool,
-};
-
-SectionTitle.defaultProps = {
-  isSettings: false,
-};
-
-export default memo(SectionTitle);