@strapi/plugin-documentation 4.3.4 → 4.4.0-alpha.0

package/__tests__/build-component-schema.test.js

@@ -79,8 +79,8 @@ describe('Build Component Schema', () => {
     }
 
     const schemaNames = Object.keys(schemas);
-    const pluginListResponseValue = schemas['UsersPermissionsRoleListResponse'];
-    const apiListResponseValue = schemas['RestaurantListResponse'];
+    const pluginListResponseValue = schemas.UsersPermissionsRoleListResponse;
+    const apiListResponseValue = schemas.RestaurantListResponse;
 
     const expectedShape = {
       type: 'object',
@@ -144,8 +144,8 @@ describe('Build Component Schema', () => {
     }
 
     const schemaNames = Object.keys(schemas);
-    const pluginListResponseValue = schemas['UsersPermissionsRoleRequest'];
-    const apiListResponseValue = schemas['RestaurantRequest'];
+    const pluginListResponseValue = schemas.UsersPermissionsRoleRequest;
+    const apiListResponseValue = schemas.RestaurantRequest;
 
     const expectedShape = {
       type: 'object',
@@ -192,8 +192,8 @@ describe('Build Component Schema', () => {
     }
 
     const schemaNames = Object.keys(schemas);
-    const pluginListResponseValue = schemas['UsersPermissionsRoleLocalizationResponse'];
-    const apiListResponseValue = schemas['RestaurantLocalizationResponse'];
+    const pluginListResponseValue = schemas.UsersPermissionsRoleLocalizationResponse;
+    const apiListResponseValue = schemas.RestaurantLocalizationResponse;
 
     const expectedShape = {
       type: 'object',
@@ -236,8 +236,8 @@ describe('Build Component Schema', () => {
     }
 
     const schemaNames = Object.keys(schemas);
-    const pluginListResponseValue = schemas['UsersPermissionsRoleLocalizationRequest'];
-    const apiListResponseValue = schemas['RestaurantLocalizationRequest'];
+    const pluginListResponseValue = schemas.UsersPermissionsRoleLocalizationRequest;
+    const apiListResponseValue = schemas.RestaurantLocalizationRequest;
 
     const expectedShape = {
       type: 'object',

package/admin/src/index.js

@@ -22,7 +22,7 @@ export default {
         defaultMessage: 'Documentation',
       },
       permissions: pluginPermissions.main,
-      Component: async () => {
+      async Component() {
         const component = await import(
           /* webpackChunkName: "documentation-page" */ './pages/PluginPage'
         );
@@ -44,7 +44,7 @@ export default {
       },
       id: 'documentation',
       to: `/settings/${pluginId}`,
-      Component: async () => {
+      async Component() {
         const component = await import(
           /* webpackChunkName: "documentation-settings" */ './pages/SettingsPage'
         );
@@ -56,7 +56,7 @@ export default {
   },
   async registerTrads({ locales }) {
     const importedTrads = await Promise.all(
-      locales.map(locale => {
+      locales.map((locale) => {
         return import(
           /* webpackChunkName: "documentation-translation-[request]" */ `./translations/${locale}.json`
         )

package/admin/src/pages/PluginPage/index.js

@@ -49,7 +49,7 @@ const PluginPage = () => {
     openWithNewTab(`${slash}${data?.prefix}/v${data?.currentVersion}`);
   };
 
-  const handleRegenerateDoc = version => {
+  const handleRegenerateDoc = (version) => {
     regenerateDocMutation.mutate({ version, prefix: data?.prefix });
   };
 
@@ -64,7 +64,7 @@ const PluginPage = () => {
     setIsConfirmButtonLoading(false);
   };
 
-  const handleClickDelete = version => {
+  const handleClickDelete = (version) => {
     setVersionToDelete(version);
     setShowConfirmDelete(!showConfirmDelete);
   };
@@ -123,7 +123,7 @@ const PluginPage = () => {
               <Tbody>
                 {data.docVersions
                   .sort((a, b) => (a.generatedDate < b.generatedDate ? 1 : -1))
-                  .map(doc => (
+                  .map((doc) => (
                     <Tr key={doc.version}>
                       <Td width="50%">
                         <Typography>{doc.version}</Typography>

package/admin/src/pages/PluginPage/tests/index.test.js

@@ -23,7 +23,7 @@ const client = new QueryClient({
   },
 });
 
-const makeApp = history => (
+const makeApp = (history) => (
   <Router history={history}>
     <ThemeProvider theme={lightTheme}>
       <QueryClientProvider client={client}>

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

@@ -36,7 +36,7 @@ const SettingsPage = () => {
   const { submitMutation, data, isLoading } = useReactQuery();
   const [passwordShown, setPasswordShown] = useState(false);
 
-  const handleUpdateSettingsSubmit = body => {
+  const handleUpdateSettingsSubmit = (body) => {
     submitMutation.mutate({
       prefix: data?.prefix,
       body,
@@ -143,9 +143,9 @@ const SettingsPage = () => {
                               }
                               endAction={
                                 <FieldActionWrapper
-                                  onClick={e => {
+                                  onClick={(e) => {
                                     e.stopPropagation();
-                                    setPasswordShown(prev => !prev);
+                                    setPasswordShown((prev) => !prev);
                                   }}
                                   label={formatMessage(
                                     passwordShown

package/admin/src/pages/SettingsPage/tests/index.test.js

@@ -23,7 +23,7 @@ const client = new QueryClient({
   },
 });
 
-const makeApp = history => (
+const makeApp = (history) => (
   <Router history={history}>
     <ThemeProvider theme={lightTheme}>
       <QueryClientProvider client={client}>

package/admin/src/pages/utils/api.js

@@ -5,7 +5,7 @@ const deleteDoc = ({ prefix, version }) => {
   return request(`${prefix}/deleteDoc/${version}`, { method: 'DELETE' });
 };
 
-const fetchDocumentationVersions = async toggleNotification => {
+const fetchDocumentationVersions = async (toggleNotification) => {
   try {
     const data = await request(`/${pluginId}/getInfos`, { method: 'GET' });
 

package/admin/src/pages/utils/useReactQuery.js

@@ -10,7 +10,7 @@ const useReactQuery = () => {
     fetchDocumentationVersions(toggleNotification)
   );
 
-  const handleError = err => {
+  const handleError = (err) => {
     toggleNotification({
       type: 'warning',
       message: err.response.payload.message,
@@ -27,7 +27,7 @@ const useReactQuery = () => {
 
   const deleteMutation = useMutation(deleteDoc, {
     onSuccess: () => handleSuccess('info', 'notification.delete.success'),
-    onError: error => handleError(error),
+    onError: (error) => handleError(error),
   });
 
   const submitMutation = useMutation(updateSettings, {
@@ -37,7 +37,7 @@ const useReactQuery = () => {
 
   const regenerateDocMutation = useMutation(regenerateDoc, {
     onSuccess: () => handleSuccess('info', 'notification.generate.success'),
-    onError: error => handleError(error),
+    onError: (error) => handleError(error),
   });
 
   return { data, isLoading, deleteMutation, submitMutation, regenerateDocMutation };

package/admin/src/utils/getTrad.js

@@ -1,5 +1,5 @@
 import pluginId from '../pluginId';
 
-const getTrad = id => `${pluginId}.${id}`;
+const getTrad = (id) => `${pluginId}.${id}`;
 
 export default getTrad;

package/admin/src/utils/openWithNewTab.js

@@ -1,6 +1,6 @@
 import { startsWith } from 'lodash';
 
-const openWithNewTab = path => {
+const openWithNewTab = (path) => {
   const url = (() => {
     if (startsWith(path, '/')) {
       return `${strapi.backendURL}${path}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/plugin-documentation",
-  "version": "4.3.4",
+  "version": "4.4.0-alpha.0",
   "description": "Create an OpenAPI Document and visualize your API with SWAGGER UI.",
   "repository": {
     "type": "git",
@@ -24,8 +24,8 @@
     "test": "echo \"no tests yet\""
   },
   "dependencies": {
-    "@strapi/helper-plugin": "4.3.4",
-    "@strapi/utils": "4.3.4",
+    "@strapi/helper-plugin": "4.4.0-alpha.0",
+    "@strapi/utils": "4.4.0-alpha.0",
     "bcryptjs": "2.4.3",
     "cheerio": "^1.0.0-rc.12",
     "fs-extra": "10.0.0",
@@ -36,7 +36,7 @@
     "react": "^17.0.2",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^17.0.2",
-    "react-intl": "5.20.2",
+    "react-intl": "5.25.1",
     "react-redux": "7.2.8",
     "react-router": "^5.2.0",
     "react-router-dom": "5.2.0",
@@ -48,6 +48,10 @@
   "peerDependencies": {
     "@strapi/strapi": "^4.0.0"
   },
+  "devDependencies": {
+    "@testing-library/react": "11.2.7",
+    "msw": "0.42.3"
+  },
   "engines": {
     "node": ">=14.19.1 <=16.x.x",
     "npm": ">=6.0.0"
@@ -58,5 +62,5 @@
     "description": "Create an OpenAPI Document and visualize your API with SWAGGER UI.",
     "kind": "plugin"
   },
-  "gitHead": "28a2a00db8234ffcf644661c4c8092aa82f8c119"
+  "gitHead": "fc78298ae4f9b247d636beda568734d5f8ed7b3e"
 }

package/server/bootstrap.js

@@ -1,4 +1,5 @@
 /* eslint-disable no-unreachable */
+
 'use strict';
 
 // Add permissions
@@ -49,8 +50,5 @@ module.exports = async ({ strapi }) => {
     pluginStore.set({ key: 'config', value: { restrictedAccess: false } });
   }
 
-  await strapi
-    .plugin('documentation')
-    .service('documentation')
-    .generateFullDoc();
+  await strapi.plugin('documentation').service('documentation').generateFullDoc();
 };

package/server/controllers/documentation.js

@@ -43,10 +43,7 @@ module.exports = {
       const version =
         major && minor && patch
           ? `${major}.${minor}.${patch}`
-          : strapi
-              .plugin('documentation')
-              .service('documentation')
-              .getDocumentationVersion();
+          : strapi.plugin('documentation').service('documentation').getDocumentationVersion();
 
       const openAPISpecsPath = path.join(
         strapi.dirs.app.extensions,
@@ -177,7 +174,7 @@ module.exports = {
 
     const service = strapi.service('plugin::documentation.documentation');
 
-    const documentationVersions = service.getDocumentationVersions().map(el => el.version);
+    const documentationVersions = service.getDocumentationVersions().map((el) => el.version);
 
     if (_.isEmpty(version)) {
       return ctx.badRequest('Please provide a version.');
@@ -201,7 +198,7 @@ module.exports = {
 
     const service = strapi.service('plugin::documentation.documentation');
 
-    const documentationVersions = service.getDocumentationVersions().map(el => el.version);
+    const documentationVersions = service.getDocumentationVersions().map((el) => el.version);
 
     if (_.isEmpty(version)) {
       return ctx.badRequest('Please provide a version.');

package/server/public/index.html

@@ -1,12 +1,27 @@
-<!-- HTML for static distribution bundle build --><!DOCTYPE html><html lang="en"><head>
-    <meta charset="UTF-8">
+<!-- HTML for static distribution bundle build --><!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
     <title>Swagger UI</title>
-    <link rel="stylesheet" type="text/css" href="<%=backendUrl%>/plugins/documentation/swagger-ui.css">
-    <link rel="icon" type="image/png" href="<%=backendUrl%>/plugins/documentation/favicon-32x32.png" sizes="32x32">
-    <link rel="icon" type="image/png" href="<%=backendUrl%>/plugins/documentation/favicon-16x16.png" sizes="16x16">
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="<%=backendUrl%>/plugins/documentation/swagger-ui.css"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      href="<%=backendUrl%>/plugins/documentation/favicon-32x32.png"
+      sizes="32x32"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      href="<%=backendUrl%>/plugins/documentation/favicon-16x16.png"
+      sizes="16x16"
+    />
     <style>
-      html
-      {
+      html {
         box-sizing: border-box;
         overflow: -moz-scrollbars-vertical;
         overflow-y: scroll;
@@ -14,14 +29,12 @@
 
       *,
       *:before,
-      *:after
-      {
+      *:after {
         box-sizing: inherit;
       }
 
-      body
-      {
-        margin:0;
+      body {
+        margin: 0;
         background: #fafafa;
       }
     </style>
@@ -51,7 +64,7 @@
       }
     </script>
 
-    <script src="<%=backendUrl%>/plugins/documentation/swagger-ui-bundle.js"> </script>
-    <script src="<%=backendUrl%>/plugins/documentation/swagger-ui-standalone-preset.js"> </script>
+    <script src="<%=backendUrl%>/plugins/documentation/swagger-ui-bundle.js"></script>
+    <script src="<%=backendUrl%>/plugins/documentation/swagger-ui-standalone-preset.js"></script>
   </body>
 </html>

package/server/public/login.html

@@ -1,135 +1,145 @@
-<!DOCTYPE html><html><head>
-      <title>Login - Documentation</title>
-      <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
-      <style>
-        html {
-          font-size: 62.5%;
-          height: 100%;
-          margin: 0;
-          padding: 0;
-        }
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Login - Documentation</title>
+    <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" />
+    <style>
+      html {
+        font-size: 62.5%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+      }
 
-        body {
-          height: 100%;
-          margin: 0;
-          background-color: #ffffff;
-          font-family: 'Lato';
-          font-size: 1.4rem;
-          font-weight: 400;
-          text-rendering: optimizeLegibility;
-          -webkit-font-smoothing: antialiased;
-          -moz-osx-font-smoothing: grayscale;
-        }
+      body {
+        height: 100%;
+        margin: 0;
+        background-color: #ffffff;
+        font-family: 'Lato';
+        font-size: 1.4rem;
+        font-weight: 400;
+        text-rendering: optimizeLegibility;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
 
-        .login {
-          height: 100%;
-          background-color: #F6F9FC;
-        }
+      .login {
+        height: 100%;
+        background-color: #f6f9fc;
+      }
 
-        .login .login-form {
-          height: calc(100% - 70px);
-          padding: 68px 0 0;
-          text-align: center;
-        }
+      .login .login-form {
+        height: calc(100% - 70px);
+        padding: 68px 0 0;
+        text-align: center;
+      }
 
-        .login .login-form form {
-          position: relative;
-          max-width: 460px;
-          padding: 26px 30px;
-          margin: 55px auto 0;
-          background-color: #ffffff;
-          border-radius: 3px;
-          box-shadow: 0px 2px 4px rgba(91, 107, 174, .15);
-          text-align: center;
-        }
+      .login .login-form form {
+        position: relative;
+        max-width: 460px;
+        padding: 26px 30px;
+        margin: 55px auto 0;
+        background-color: #ffffff;
+        border-radius: 3px;
+        box-shadow: 0px 2px 4px rgba(91, 107, 174, 0.15);
+        text-align: center;
+      }
 
-        .login .login-form form:before {
-          position: absolute;
-          content: '';
-          top: 0px;
-          left: 0;
-          display: inline-block;
-          width: 100%;
-          height: 2px;
-          background-color: #2B66CC;
-        }
+      .login .login-form form:before {
+        position: absolute;
+        content: '';
+        top: 0px;
+        left: 0;
+        display: inline-block;
+        width: 100%;
+        height: 2px;
+        background-color: #2b66cc;
+      }
 
-        .login .login-form form .error {
-          display: block;
-          color: #FF4E00;
-          padding-bottom: 20px;
-        }
+      .login .login-form form .error {
+        display: block;
+        color: #ff4e00;
+        padding-bottom: 20px;
+      }
 
-        .login .login-form .sub-title {
-          margin-top: 35px;
-          font-size: 1.6rem;
-          font-weight: 400;
-        }
+      .login .login-form .sub-title {
+        margin-top: 35px;
+        font-size: 1.6rem;
+        font-weight: 400;
+      }
 
-        .login .login-form .logo{
-          max-height: 40px;
-        }
+      .login .login-form .logo {
+        max-height: 40px;
+      }
 
-        .login .login-form form label {
-          display: block;
-          margin-bottom: 18px;
-          width: 100%;
-          text-align: left;
-          font-weight: 600;
-        }
+      .login .login-form form label {
+        display: block;
+        margin-bottom: 18px;
+        width: 100%;
+        text-align: left;
+        font-weight: 600;
+      }
 
-        .login .login-form form input {
-          outline: none;
-          width: calc(100% - 30px);
-          height: 36px;
-          padding: 0 15px;
-          border: 1px solid #ECECEC;
-          border-radius: 2px;
-          margin-bottom: 20px;
-          line-height: 36px;
-          text-align: left;
-        }
+      .login .login-form form input {
+        outline: none;
+        width: calc(100% - 30px);
+        height: 36px;
+        padding: 0 15px;
+        border: 1px solid #ececec;
+        border-radius: 2px;
+        margin-bottom: 20px;
+        line-height: 36px;
+        text-align: left;
+      }
 
-        .login .login-form form input[type=submit] {
-          cursor: pointer;
-          display: inline-block;
-          width: auto;
-          margin: 12px auto 0;
-          padding: 0 75px;
-          background: transparent;
-          border-radius: 36px;
-          border: 1px solid #2B66CC;
-          color: #2B66CC;
-          text-transform: uppercase;
-          font-size: 1.4rem;
-          font-weight: 700;
-          transition: all .2s ease-out;
-        }
+      .login .login-form form input[type='submit'] {
+        cursor: pointer;
+        display: inline-block;
+        width: auto;
+        margin: 12px auto 0;
+        padding: 0 75px;
+        background: transparent;
+        border-radius: 36px;
+        border: 1px solid #2b66cc;
+        color: #2b66cc;
+        text-transform: uppercase;
+        font-size: 1.4rem;
+        font-weight: 700;
+        transition: all 0.2s ease-out;
+      }
 
-        .login .login-form form input[type=submit]:hover {
-          background: #2B66CC;
-          color: #ffffff;
-        }
-      </style>
-    </head>
-    <body>
-      <div class="login">
-        <section class="login-form">
-          <div class="container">
-            <div class="row">
-              <div class="col-lg-6 col-lg-offset-3 col-md-12">
-                <img alt="Strapi logo" class="logo" src="https://strapi.io/assets/images/logo_login.png">
-                <h2 class="sub-title">Enter the password to access the documentation.</h2>
-                <form method="post" action="<%=actionUrl%>">
-                  <span class="error">Wrong password...</span>
-                  <label>Password</label>
-                  <input type="password" name="password" placeholder="&#x2022;&#x2022;&#x2022;&#x2022;&#x2022;&#x2022;&#x2022;&#x2022;&#x2022;">
-                  <input type="submit" value="Login">
-                </form>
-              </div>
+      .login .login-form form input[type='submit']:hover {
+        background: #2b66cc;
+        color: #ffffff;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="login">
+      <section class="login-form">
+        <div class="container">
+          <div class="row">
+            <div class="col-lg-6 col-lg-offset-3 col-md-12">
+              <img
+                alt="Strapi logo"
+                class="logo"
+                src="https://strapi.io/assets/images/logo_login.png"
+              />
+              <h2 class="sub-title">Enter the password to access the documentation.</h2>
+              <form method="post" action="<%=actionUrl%>">
+                <span class="error">Wrong password...</span>
+                <label>Password</label>
+                <input
+                  type="password"
+                  name="password"
+                  placeholder="&#x2022;&#x2022;&#x2022;&#x2022;&#x2022;&#x2022;&#x2022;&#x2022;&#x2022;"
+                />
+                <input type="submit" value="Login" />
+              </form>
             </div>
           </div>
-        </section>
-      </div>
-
-</body></html>
+        </div>
+      </section>
+    </div>
+  </body>
+</html>

package/server/routes/index.js

@@ -1,4 +1,5 @@
 'use strict';
+
 const restrictAccess = require('../middlewares/restrict-access');
 
 module.exports = [

package/server/services/documentation.js

@@ -38,7 +38,7 @@ module.exports = ({ strapi }) => {
     getDocumentationVersions() {
       return fs
         .readdirSync(this.getFullDocumentationPath())
-        .map(version => {
+        .map((version) => {
           try {
             const doc = JSON.parse(
               fs.readFileSync(
@@ -52,7 +52,7 @@ module.exports = ({ strapi }) => {
             return null;
           }
         })
-        .filter(x => x);
+        .filter((x) => x);
     },
 
     /**
@@ -99,7 +99,7 @@ module.exports = ({ strapi }) => {
 
     getPluginAndApiInfo() {
       const plugins = _.get(config, 'x-strapi-config.plugins');
-      const pluginsToDocument = plugins.map(plugin => {
+      const pluginsToDocument = plugins.map((plugin) => {
         return {
           name: plugin,
           getter: 'plugin',
@@ -107,7 +107,7 @@ module.exports = ({ strapi }) => {
         };
       });
 
-      const apisToDocument = Object.keys(strapi.api).map(api => {
+      const apisToDocument = Object.keys(strapi.api).map((api) => {
         return {
           name: api,
           getter: 'api',
@@ -186,7 +186,7 @@ module.exports = ({ strapi }) => {
 
       const finalDoc = { ...config, paths };
 
-      registeredDocs.forEach(doc => {
+      registeredDocs.forEach((doc) => {
         // Add tags
         finalDoc.tags = finalDoc.tags || [];
         finalDoc.tags.push(...(doc.tags || []));

package/server/services/helpers/build-api-endpoint-path.js

@@ -15,12 +15,12 @@ const { hasFindMethod, isLocalizedPath } = require('./utils/routes');
  * @param {string} routePath - The route's path property
  * @returns {string}
  */
-const parsePathWithVariables = routePath => {
+const parsePathWithVariables = (routePath) => {
   return pathToRegexp
     .parse(routePath)
-    .map(token => {
+    .map((token) => {
       if (_.isObject(token)) {
-        return token.prefix + '{' + token.name + '}';
+        return `${token.prefix}{${token.name}}`;
       }
 
       return token;
@@ -35,11 +35,11 @@ const parsePathWithVariables = routePath => {
  *
  * @returns {object } Swagger path params object
  */
-const getPathParams = routePath => {
+const getPathParams = (routePath) => {
   return pathToRegexp
     .parse(routePath)
-    .filter(token => _.isObject(token))
-    .map(param => {
+    .filter((token) => _.isObject(token))
+    .map((param) => {
       return {
         name: param.name,
         in: 'path',
@@ -83,7 +83,7 @@ const getPathWithPrefix = (prefix, route) => {
  */
 const getPaths = ({ routeInfo, uniqueName, contentTypeInfo }) => {
   // Get the routes for the current content type
-  const contentTypeRoutes = routeInfo.routes.filter(route => {
+  const contentTypeRoutes = routeInfo.routes.filter((route) => {
     return (
       route.path.includes(contentTypeInfo.pluralName) ||
       route.path.includes(contentTypeInfo.singularName)
@@ -152,7 +152,7 @@ const getPaths = ({ routeInfo, uniqueName, contentTypeInfo }) => {
  *
  * @returns {object} Open API paths
  */
-const getAllPathsForContentType = apiInfo => {
+const getAllPathsForContentType = (apiInfo) => {
   let paths = {};
 
   const pathsObject = getPaths(apiInfo);
@@ -175,7 +175,7 @@ const getAllPathsForContentType = apiInfo => {
  *
  * @returns {object}
  */
-const buildApiEndpointPath = api => {
+const buildApiEndpointPath = (api) => {
   // A reusable loop for building paths and component schemas
   // Uses the api param to build a new set of params for each content type
   // Passes these new params to the function provided

package/server/services/helpers/build-component-schema.js

@@ -1,4 +1,5 @@
 'use strict';
+
 const _ = require('lodash');
 
 const cleanSchemaAttributes = require('./utils/clean-schema-attributes');
@@ -19,10 +20,24 @@ const { hasFindMethod, isLocalizedPath } = require('./utils/routes');
 const getAllSchemasForContentType = ({ routeInfo, attributes, uniqueName }) => {
   // Store response and request schemas in an object
   let schemas = {};
+  let componentSchemas = {};
+  // adds a ComponentSchema to the Schemas so it can be used as Ref
+  const addComponentSchema = (schemaName, schema) => {
+    if (!Object.keys(schema) || !Object.keys(schema.properties)) {
+      return false;
+    }
+    componentSchemas = {
+      ...componentSchemas,
+      [schemaName]: schema,
+    };
+    return true;
+  };
   // Get all the route methods
-  const routeMethods = routeInfo.routes.map(route => route.method);
+  const routeMethods = routeInfo.routes.map((route) => route.method);
   // Check for localized paths
-  const hasLocalizationPath = routeInfo.routes.filter(route => isLocalizedPath(route.path)).length;
+  const hasLocalizationPath = routeInfo.routes.filter((route) =>
+    isLocalizedPath(route.path)
+  ).length;
   // When the route methods contain any post or put requests
   if (routeMethods.includes('POST') || routeMethods.includes('PUT')) {
     const attributesToOmit = [
@@ -53,7 +68,10 @@ const getAllSchemasForContentType = ({ routeInfo, attributes, uniqueName }) => {
         [`${pascalCase(uniqueName)}LocalizationRequest`]: {
           required: [...requiredAttributes, 'locale'],
           type: 'object',
-          properties: cleanSchemaAttributes(attributesForRequest, { isRequest: true }),
+          properties: cleanSchemaAttributes(attributesForRequest, {
+            isRequest: true,
+            addComponentSchema,
+          }),
         },
       };
     }
@@ -68,7 +86,10 @@ const getAllSchemasForContentType = ({ routeInfo, attributes, uniqueName }) => {
           data: {
             required: requiredAttributes,
             type: 'object',
-            properties: cleanSchemaAttributes(attributesForRequest, { isRequest: true }),
+            properties: cleanSchemaAttributes(attributesForRequest, {
+              isRequest: true,
+              addComponentSchema,
+            }),
           },
         },
       },
@@ -82,29 +103,49 @@ const getAllSchemasForContentType = ({ routeInfo, attributes, uniqueName }) => {
         type: 'object',
         properties: {
           id: { type: 'string' },
-          ...cleanSchemaAttributes(attributes),
+          ...cleanSchemaAttributes(attributes, { addComponentSchema }),
         },
       },
     };
   }
 
   // Check for routes that need to return a list
-  const hasListOfEntities = routeInfo.routes.filter(route => hasFindMethod(route.handler)).length;
+  const hasListOfEntities = routeInfo.routes.filter((route) => hasFindMethod(route.handler)).length;
   if (hasListOfEntities) {
     // Build the list response schema
     schemas = {
       ...schemas,
-      [`${pascalCase(uniqueName)}ListResponse`]: {
+      [`${pascalCase(uniqueName)}ListResponseDataItem`]: {
+        type: 'object',
+        properties: {
+          id: { type: 'string' },
+          attributes: {
+            type: 'object',
+            properties: cleanSchemaAttributes(attributes, {
+              addComponentSchema,
+              componentSchemaRefName: `#/components/schemas/${pascalCase(
+                uniqueName
+              )}ListResponseDataItemLocalized`,
+            }),
+          },
+        },
+      },
+      [`${pascalCase(uniqueName)}ListResponseDataItemLocalized`]: {
         type: 'object',
+        properties: {
+          id: { type: 'string' },
+          attributes: {
+            type: 'object',
+            properties: cleanSchemaAttributes(attributes, { addComponentSchema }),
+          },
+        },
+      },
+      [`${pascalCase(uniqueName)}ListResponse`]: {
         properties: {
           data: {
             type: 'array',
             items: {
-              type: 'object',
-              properties: {
-                id: { type: 'string' },
-                attributes: { type: 'object', properties: cleanSchemaAttributes(attributes) },
-              },
+              $ref: `#/components/schemas/${pascalCase(uniqueName)}ListResponseDataItem`,
             },
           },
           meta: {
@@ -128,25 +169,44 @@ const getAllSchemasForContentType = ({ routeInfo, attributes, uniqueName }) => {
   // Build the response schema
   schemas = {
     ...schemas,
-    [`${pascalCase(uniqueName)}Response`]: {
+    [`${pascalCase(uniqueName)}ResponseDataObject`]: {
       type: 'object',
       properties: {
-        data: {
+        id: { type: 'string' },
+        attributes: {
           type: 'object',
-          properties: {
-            id: { type: 'string' },
-            attributes: { type: 'object', properties: cleanSchemaAttributes(attributes) },
-          },
+          properties: cleanSchemaAttributes(attributes, {
+            addComponentSchema,
+            componentSchemaRefName: `#/components/schemas/${pascalCase(
+              uniqueName
+            )}ResponseDataObjectLocalized`,
+          }),
+        },
+      },
+    },
+    [`${pascalCase(uniqueName)}ResponseDataObjectLocalized`]: {
+      type: 'object',
+      properties: {
+        id: { type: 'string' },
+        attributes: {
+          type: 'object',
+          properties: cleanSchemaAttributes(attributes, { addComponentSchema }),
+        },
+      },
+    },
+    [`${pascalCase(uniqueName)}Response`]: {
+      properties: {
+        data: {
+          $ref: `#/components/schemas/${pascalCase(uniqueName)}ResponseDataObject`,
         },
         meta: { type: 'object' },
       },
     },
   };
-
-  return schemas;
+  return { ...schemas, ...componentSchemas };
 };
 
-const buildComponentSchema = api => {
+const buildComponentSchema = (api) => {
   // A reusable loop for building paths and component schemas
   // Uses the api param to build a new set of params for each content type
   // Passes these new params to the function provided

package/server/services/helpers/utils/clean-schema-attributes.js

@@ -2,18 +2,26 @@
 
 const _ = require('lodash');
 const getSchemaData = require('./get-schema-data');
-
+const pascalCase = require('./pascal-case');
 /**
  * @description - Converts types found on attributes to OpenAPI acceptable data types
  *
  * @param {object} attributes - The attributes found on a contentType
- * @param {{ typeMap: Map, isRequest: boolean }} opts
+ * @param {{ typeMap: Map, isRequest: boolean, addComponentSchema: function, componentSchemaRefName: string }} opts
  * @returns Attributes using OpenAPI acceptable data types
  */
-const cleanSchemaAttributes = (attributes, { typeMap = new Map(), isRequest = false } = {}) => {
+const cleanSchemaAttributes = (
+  attributes,
+  {
+    typeMap = new Map(),
+    isRequest = false,
+    addComponentSchema = () => {},
+    componentSchemaRefName = '',
+  } = {}
+) => {
   const attributesCopy = _.cloneDeep(attributes);
 
-  for (const prop in attributesCopy) {
+  for (const prop of Object.keys(attributesCopy)) {
     const attribute = attributesCopy[prop];
     if (attribute.default) {
       delete attributesCopy[prop].default;
@@ -86,43 +94,53 @@ const cleanSchemaAttributes = (attributes, { typeMap = new Map(), isRequest = fa
       }
       case 'component': {
         const componentAttributes = strapi.components[attribute.component].attributes;
-
+        const rawComponentSchema = {
+          type: 'object',
+          properties: {
+            ...(isRequest ? {} : { id: { type: 'string' } }),
+            ...cleanSchemaAttributes(componentAttributes, {
+              typeMap,
+              isRequest,
+            }),
+          },
+        };
+        const refComponentSchema = {
+          $ref: `#/components/schemas/${pascalCase(attribute.component)}Component`,
+        };
+        const componentExists = addComponentSchema(
+          `${pascalCase(attribute.component)}Component`,
+          rawComponentSchema
+        );
+        const finalComponentSchema = componentExists ? refComponentSchema : rawComponentSchema;
         if (attribute.repeatable) {
           attributesCopy[prop] = {
             type: 'array',
-            items: {
-              type: 'object',
-              properties: {
-                ...(isRequest ? {} : { id: { type: 'string' } }),
-                ...cleanSchemaAttributes(componentAttributes, { typeMap, isRequest }),
-              },
-            },
+            items: finalComponentSchema,
           };
         } else {
-          attributesCopy[prop] = {
-            type: 'object',
-            properties: {
-              ...(isRequest ? {} : { id: { type: 'string' } }),
-              ...cleanSchemaAttributes(componentAttributes, {
-                typeMap,
-                isRequest,
-              }),
-            },
-          };
+          attributesCopy[prop] = finalComponentSchema;
         }
         break;
       }
       case 'dynamiczone': {
-        const components = attribute.components.map(component => {
+        const components = attribute.components.map((component) => {
           const componentAttributes = strapi.components[component].attributes;
-          return {
+          const rawComponentSchema = {
             type: 'object',
             properties: {
               ...(isRequest ? {} : { id: { type: 'string' } }),
               __component: { type: 'string' },
-              ...cleanSchemaAttributes(componentAttributes, { typeMap, isRequest }),
+              ...cleanSchemaAttributes(componentAttributes, {
+                typeMap,
+                isRequest,
+                addComponentSchema,
+              }),
             },
           };
+          const refComponentSchema = { $ref: `#/components/schemas/${pascalCase(component)}` };
+          const componentExists = addComponentSchema(pascalCase(component), rawComponentSchema);
+          const finalComponentSchema = componentExists ? refComponentSchema : rawComponentSchema;
+          return finalComponentSchema;
         });
 
         attributesCopy[prop] = {
@@ -171,8 +189,13 @@ const cleanSchemaAttributes = (attributes, { typeMap = new Map(), isRequest = fa
 
         if (prop === 'localizations') {
           attributesCopy[prop] = {
-            type: 'array',
-            items: { type: 'object', properties: {} },
+            type: 'object',
+            properties: {
+              data: {
+                type: 'array',
+                items: componentSchemaRefName.length ? { $ref: componentSchemaRefName } : {},
+              },
+            },
           };
           break;
         }

package/server/services/helpers/utils/loop-content-type-names.js

@@ -1,4 +1,5 @@
 'use strict';
+
 const _ = require('lodash');
 
 /**

package/server/services/helpers/utils/pascal-case.js

@@ -2,7 +2,7 @@
 
 const _ = require('lodash');
 
-const pascalCase = string => {
+const pascalCase = (string) => {
   return _.upperFirst(_.camelCase(string));
 };
 

package/server/services/helpers/utils/routes.js

@@ -1,8 +1,8 @@
 'use strict';
 
-const hasFindMethod = handler => handler.split('.').pop() === 'find';
+const hasFindMethod = (handler) => handler.split('.').pop() === 'find';
 
-const isLocalizedPath = routePath => routePath.includes('localizations');
+const isLocalizedPath = (routePath) => routePath.includes('localizations');
 
 module.exports = {
   isLocalizedPath,