Release: 4.1.10 documentation

CONTRIBUTING.md

@@ -36,7 +36,7 @@ The core team will review your pull request and will either merge it, request ch
 
 <!-- TODO Update warning about using yarn when npm v7 is out since it will support yarn.lock files — see https://blog.npmjs.org/post/621733939456933888/npm-v7-series-why-keep-package-lockjson.html -->
 - You installed the following softwares:
-  - [Node](https://nodejs.org/en/) at v12 only (Node v13+ are not supported)
+  - [Node](https://nodejs.org/en/) at v14 only (Node v15+ are not supported)
   - [Yarn](https://yarnpkg.com/en/) at v1.2.0+. **Please use yarn**, not npm, as we maintain a `yarn.lock` file instead of `package-lock.json`
 - You are familiar with Git.
 

README.md

@@ -24,7 +24,7 @@ Strapi is a free and open-source headless CMS delivering your content anywhere y
 
 The following are required if you are submitting pull requests to the documentation. For more information on how to contribute please see our [contribution guide](./CONTRIBUTING.md)
 
-- NodeJS >=12.x <=14.x
+- NodeJS >=12.22.0 <=14.x
 - NPM >= 6.x
 - Yarn >= 1.22.x
 

docs/.vuepress/config/plugins.js

@@ -43,6 +43,12 @@ const plugins = [
     },
   ],
   ['@vuepress/back-to-top', {}],
+  [
+    '@vuepress/html-redirect',
+    {
+      duration: 0,
+    },
+  ],
   [
     'vuepress-plugin-container',
     {
@@ -149,25 +155,29 @@ const plugins = [
       type: 'grid',
       defaultTitle: '',
     },
-  ],  [
+  ],
+  [
     'vuepress-plugin-container',
     {
       type: 'grid-top-left',
       defaultTitle: '',
     },
-  ],  [
+  ],
+  [
     'vuepress-plugin-container',
     {
       type: 'grid-top-right',
       defaultTitle: '',
     },
-  ],  [
+  ],
+  [
     'vuepress-plugin-container',
     {
       type: 'grid-bottom-left',
       defaultTitle: '',
     },
-  ],  [
+  ],
+  [
     'vuepress-plugin-container',
     {
       type: 'grid-bottom-right',

docs/.vuepress/redirects

@@ -0,0 +1,2 @@
+/developer-docs/latest/update-migration-guides/migration-guides/v4/migration-guide-4.0.x-to4.0.6.html /developer-docs/latest/update-migration-guides/migration-guides/v4/migration-guide-4.0.0+-to-4.0.6.html
+/developer-docs/latest/update-migration-guides/migration-guides/v4/migration-guide-4.0.x-to-4.1.8.html /developer-docs/latest/update-migration-guides/migration-guides/v4/migration-guide-4.0.6+-to-4.1.8.html

docs/developer-docs/latest/developer-resources/database-apis-reference/rest/populating-fields.md

@@ -91,10 +91,6 @@ Queries can accept a `populate` parameter to explicitly define which fields to p
 If the users-permissions plugin is installed, the `find` permission must be enabled for the content-types that are being populated. **If a role doesn't have access to a content-type it will not be populated.**
 :::
 
-:::note
-https://github.com/ljharb/qs
-:::
-
 #### Populate 1 level for all relations
 
 To populate one-level deep for all relations, use the `*` wildcard in combination with the `populate` parameter:

docs/developer-docs/latest/developer-resources/plugin-api-reference/admin-panel.md

@@ -617,37 +617,42 @@ export default {
 
 #### Predefined hook
 
-Strapi includes a predefined `cm/inject-column-in-table` hook that can be used to add or mutate a column of the List View of the [Content Manager](/user-docs/latest/content-manager/introduction-to-content-manager.md).
+Strapi includes a predefined `Admin/CM/pages/ListView/inject-column-in-table` hook that can be used to add or mutate a column of the List View of the [Content Manager](/user-docs/latest/content-manager/introduction-to-content-manager.md).
 
-::: details Example: 'cm/inject-column-in-table' hook, as used by the Internationalization plugin to add the 'Content available in' column
+::: details Example: 'Admin/CM/pages/ListView/inject-column-in-table' hook, as used by the Internationalization plugin to add the 'Content available in' column
 
 ```jsx
 // ./plugins/my-plugin/admin/src/index.js
+import get from 'lodash/get';
+import cellFormatter from './components/cellFormatter';
 
 export default {
   bootstrap(app) {
-	  app.registerHook('cm/inject-column-in-table', ({ displayedHeaders, layout }) => {
+	  app.registerHook('Admin/CM/pages/ListView/inject-column-in-table', ({ displayedHeaders, layout }) => {
 			const isFieldLocalized = get(layout, 'contentType.pluginOptions.i18n.localized', false);
 
 			if (!isFieldLocalized) {
-			  return displayedHeaders;
+			  return { displayedHeaders, layout };
 			}
 
-			return [
-			  ...displayedHeaders,
-			  {
-			    key: '__locale_key__', // Needed for the table
-			    fieldSchema: { type: 'string' }, // Schema of the attribute
-			    metadatas: {
-						label: 'Content available in', // Label of the header,
-						sortable: false|true // Define in the column is sortable
-					}, // Metadatas for the label
-					// Name of the key in the data we will display
-			    name: 'locales',
-					// Custom renderer
-			    cellFormatter: props => <div>Object.keys(props).map(key => <p key={key}>key</p>)</div>,
-			  },
-			];
+			return {
+        layout,
+        displayedHeaders: [
+          ...displayedHeaders,
+          {
+            key: '__locale_key__', // Needed for the table
+            fieldSchema: { type: 'string' }, // Schema of the attribute
+            metadatas: {
+              label: 'Content available in', // Label of the header,
+              sortable: true|false // Define if the column is sortable
+            }, // Metadatas for the label
+            // Name of the key in the data we will display
+            name: 'locales',
+            // Custom renderer: props => Object.keys(props).map(key => <p key={key}>key</p>)
+            cellFormatter,
+          },
+			  ]
+      };
     });
   },
 }

docs/developer-docs/latest/development/backend-customization/models.md

@@ -76,8 +76,8 @@ The `info` key in the model's schema describes information used to display the m
 | Parameter            | Type   | Description                                                                                                                                 |
 | -------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
 | `displayName`  | String | Default name to use in the admin panel                                                                                                      |
-| `singularName` | String | Singular form of the collection type name.<br>Used to generate the API routes and databases/tables collection.<br><br>Should be kebab-case. |
-| `pluralName`   | String | Plural form of the collection type name.<br>Used to generate the API routes and databases/tables collection.<br><br>Should be kebab-case.    |
+| `singularName` | String | Singular form of the content-type name.<br>Used to generate the API routes and databases/tables collection.<br><br>Should be kebab-case. |
+| `pluralName`   | String | Plural form of the content-type name.<br>Used to generate the API routes and databases/tables collection.<br><br>Should be kebab-case.    |
 | `description`  | String | Description of the model                                                                                                                   |
 | `icon`<br><br>_Optional,_<br>_only for Components_       | String      | [FontAwesome](https://fontawesome.com/) (v5) icon name to use for the component's icon in the admin panel
 
@@ -540,7 +540,6 @@ The `options` key is used to define specific behaviors and accepts the following
 | Parameter                     | Type                        | Description                                                                                                                                                                                                                                                                                                                                  |
 | ----------------------- | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `privateAttributes`     | Array of strings            | Allows treating a set of attributes as private, even if they're not actually defined as attributes in the model. It could be used to remove them from API responses timestamps.<br><br>The set of `privateAttributes` defined in the model are merged with the `privateAttributes` defined in the global Strapi configuration. |
-| `populateCreatorFields` | Boolean                     | Toggles including the `created_by` and `updated_by` fields in the API response.<br><br>Default value: `false`                                                                                                                                                                                                                 |
 | `draftAndPublish`       | Boolean                     | Enables the draft and publish feature.<br><br>Default value: `false`                                                                                                                                                                                                                                                                          |
 
 ```json
@@ -549,7 +548,6 @@ The `options` key is used to define specific behaviors and accepts the following
 {
   "options": {
     "privateAttributes": ["id", "created_at"],
-    "populateCreatorFields": true,
     "draftAndPublish": false
   }
 }

docs/developer-docs/latest/development/backend-customization/services.md

@@ -84,7 +84,7 @@ const transporter = nodemailer.createTransport({
   },
 });
 
-module.exports = createCoreService('api::restaurant.restaurant', ({ strapi }) => ({
+module.exports = createCoreService('api::email.email', ({ strapi }) => ({
   send(from, to, subject, text) {
     // Setup e-mail data.
     const options = {

docs/developer-docs/latest/development/plugins-extension.md

@@ -89,7 +89,7 @@ module.exports = (plugin) => {
 
   plugin.policies[newPolicy] = (ctx) => {};
 
-  plugin.routes.push({
+  plugin.routes['content-api'].routes.push({
     method: 'GET',
     path: '/route-path',
     handler: 'controller.action',

docs/developer-docs/latest/development/plugins/graphql.md

@@ -85,13 +85,15 @@ Please note the setting for GraphQL `tracing` as changed and has been moved to `
 module.exports = {
   //
   graphql: {
-    endpoint: '/graphql',
-    shadowCRUD: true,
-    playgroundAlways: false,
-    depthLimit: 7,
-    amountLimit: 100,
-    apolloServer: {
-      tracing: false,
+    config: {
+      endpoint: '/graphql',
+      shadowCRUD: true,
+      playgroundAlways: false,
+      depthLimit: 7,
+      amountLimit: 100,
+      apolloServer: {
+        tracing: false,
+      },
     },
   },
 };

docs/developer-docs/latest/plugins/upload.md

@@ -107,13 +107,15 @@ module.exports = ({ env }) => ({
 
 ## Upload files
 
-To upload files into your application.
+To upload files to your application.
 
 ### Parameters
 
 - `files`: The file(s) to upload. The value(s) can be a Buffer or Stream.
 
-### Code example
+<code-group>
+
+<code-block title="BROWSER">
 
 ```html
 <form>
@@ -123,20 +125,48 @@ To upload files into your application.
 </form>
 
 <script type="text/javascript">
-  const formElement = document.querySelector('form');
+  const form = document.querySelector('form');
 
-  formElement.addEventListener('submit', (e) => {
+  form.addEventListener('submit', async (e) => {
     e.preventDefault();
 
-    const request = new XMLHttpRequest();
-
-    request.open('POST', '/upload');
-
-    request.send(new FormData(formElement));
+    await fetch('/api/upload', {
+      method: 'post',
+      body: new FormData(e.target)
+    });
   });
 </script>
 ```
 
+</code-block>
+
+<code-block title="NODE.JS">
+
+```js
+import { FormData, Blob } from "formdata-node"
+import { FormDataEncoder } from  "form-data-encoder"
+import { Readable } from "stream"
+import fetch from 'node-fetch';
+import fs from 'fs';
+
+const file = fs.createReadStream('path-to-your-file');
+const form = new FormData();
+
+form.append('files', file);
+
+const encoder = new FormDataEncoder(form);
+
+await fetch('http://localhost:1337/api/upload', {
+    method: "post",
+    headers: encoder.headers,
+    body: Readable.from(encoder)
+});
+```
+
+</code-block>
+
+</code-group>
+
 :::caution
 You have to send FormData in your request body.
 :::
@@ -189,16 +219,15 @@ Code
 </form>
 
 <script type="text/javascript">
-  const formElement = document.querySelector('form');
+  const form = document.querySelector('form');
 
-  formElement.addEventListener('submit', (e) => {
+  form.addEventListener('submit', async (e) => {
     e.preventDefault();
 
-    const request = new XMLHttpRequest();
-
-    request.open('POST', '/upload');
-
-    request.send(new FormData(formElement));
+    await fetch('/api/upload', {
+      method: 'post',
+      body: new FormData(e.target)
+    });
   });
 </script>
 ```
@@ -245,44 +274,36 @@ Code
 </form>
 
 <script type="text/javascript">
-  const formElement = document.querySelector('form');
+  const form = document.querySelector('form');
 
-  formElement.addEventListener('submit', (e) => {
+  form.addEventListener('submit', async (e) => {
     e.preventDefault();
 
-    const request = new XMLHttpRequest();
-
-    const formData = new FormData();
-
-    const formElements = formElement.elements;
-
     const data = {};
+    const formData = new FormData();
 
-    for (let i = 0; i < formElements.length; i++) {
-      const currentElement = formElements[i];
-      if (!['submit', 'file'].includes(currentElement.type)) {
-        data[currentElement.name] = currentElement.value;
-      } else if (currentElement.type === 'file') {
-        for (let i = 0; i < currentElement.files.length; i++) {
-          const file = currentElement.files[i];
-          formData.append(`files.${currentElement.name}`, file, file.name);
+    form.elements
+      .forEach(({ name, type, value, files, ...element }) => {
+        if (!['submit', 'file'].includes(type)) {
+          data[name] = value;
+        } else if (type === 'file') {
+          files.forEach((file) => {
+            formData.append(`files.${name}`, file, file.name);
+          });
         }
-      }
-    }
+      });
 
     formData.append('data', JSON.stringify(data));
 
-    request.open('POST', `${HOST}/restaurants`);
-
-    request.send(formData);
+    await fetch('/api/restaurants', {
+      method: 'post',
+      body: formData
+    });
   });
 </script>
 ```
 
-Your entry data has to be contained in a `data` key. You have to `JSON.stringify` your data object.
-
-And for your files, they have to be prefixed by `files`.
-Example here with cover attribute `files.cover`.
+Your entry data has to be contained in a `data` key and you need to `JSON.stringify` this object. The keys for files, need to be prefixed with `files` (example with a cover attribute: `files.cover`).
 
 ::: tip
 If you want to upload files for a component, you will have to specify the index of the item you want to add the file to.

docs/developer-docs/latest/setup-deployment-guides/configurations/optional/environment.md

@@ -7,6 +7,7 @@ canonicalUrl: https://docs.strapi.io/developer-docs/latest/setup-deployment-guid
 # Environment configuration and variables
 
 Strapi provides environment variables that can be used in configuration files.  An `env()` utility can be used to [retrieve the value of environment variables](#configuration-using-environment-variables) and [cast variables to different types](#casting-environment-variables), and  specific [configurations for different environments](#environment-configurations) can be created.
+
 ## Strapi's environment variables
 
 Strapi provides the following environment variables:
@@ -17,7 +18,7 @@ Strapi provides the following environment variables:
 | `STRAPI_HIDE_STARTUP_MESSAGE`                              | Don't show the startup message in the terminal                                                                                                                                                                                                                                                             | `Boolean` | `false`         |
 | `STRAPI_TELEMETRY_DISABLED`                                | Don't send telemetry usage data to Strapi                                                                                                                                                                                                                                                                  | `Boolean` | `false`         |
 | `STRAPI_LICENSE`                                           | The license key to activate the Enterprise Edition                                                                                                                                                                                                                                                         | `String`  | `undefined`     |
-| `NODE_ENV`                                                 | Type of environment where the app is running                                                                                                                                                                                                                                                               | `String`  | `'development'` |
+| `NODE_ENV`                                                 | Type of environment where the app is running.<br/><br/>`production` enables specific behaviors (see  [Node.js documentation](https://nodejs.dev/learn/nodejs-the-difference-between-development-and-production) for details)                                                                                                                                                                                                                                                            | `String`  | `'development'` |
 | `BROWSER`                                                  | Open the admin panel in the browser after startup                                                                                                                                                                                                                                                          | `Boolean` | `true`          |
 | `ENV_PATH`                                                 | Path to the file that contains your environment variables                                                                                                                                                                                                                                                  | `String`  | `'./.env'`      |
 | `STRAPI_PLUGIN_I18N_INIT_LOCALE_CODE` <br/><br/>_Optional_ | Initialization locale for the app, if the [Internationalization (i18n) plugin](/developer-docs/latest/plugins/i18n.md) is installed and enabled on Content-Types (see [Configuration of i18n in production environments](/developer-docs/latest/plugins/i18n.md#configuration-of-the-default-locale)) | `String`  | `'en'`          |
@@ -115,7 +116,7 @@ With these configuration files the server will start on various ports depending
 
 ```bash
 yarn start                                   # uses host 127.0.0.1
-NODE_ENV=production yarn start               # uses host 0.0.0.0
+NODE_ENV=production yarn start               # uses host defined in .env. If not defined, uses 0.0.0.0
 HOST=10.0.0.1 NODE_ENV=production yarn start # uses host 10.0.0.1
 ```