fixes bugs with breaking NotFound error messages, builds frontend Global views

src/client/components/Routes.js

@@ -13,6 +13,7 @@ import CreateFirstUser from './views/CreateFirstUser';
 import MediaLibrary from './views/MediaLibrary';
 import Edit from './views/collections/Edit';
 import List from './views/collections/List';
+import EditGlobal from './views/globals/Edit';
 import { requests } from '../api';
 
 const Routes = () => {
@@ -123,6 +124,23 @@ const Routes = () => {
                             />
                           );
                         })}
+                        {config.globals.map((global) => {
+                          return (
+                            <Route
+                              key={`${global.slug}`}
+                              path={`${match.url}/globals/${global.slug}`}
+                              exact
+                              render={(routeProps) => {
+                                return (
+                                  <EditGlobal
+                                    {...routeProps}
+                                    global={global}
+                                  />
+                                );
+                              }}
+                            />
+                          );
+                        })}
                         <Route path={`${match.url}*`}>
                           <NotFound />
                         </Route>

src/client/components/views/globals/Edit/index.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import getSanitizedConfig from '../../../../config/getSanitizedConfig';
+import DefaultTemplate from '../../../layout/DefaultTemplate';
+import usePayloadAPI from '../../../../hooks/usePayloadAPI';
+import Form from '../../../forms/Form';
+import StickyHeader from '../../../modules/StickyHeader';
+import APIURL from '../../../modules/APIURL';
+import Button from '../../../controls/Button';
+import FormSubmit from '../../../forms/Submit';
+import RenderFields from '../../../forms/RenderFields';
+
+import './index.scss';
+
+const {
+  serverURL,
+  routes: {
+    admin
+  }
+} = getSanitizedConfig();
+
+const baseClass = 'global-edit';
+
+const EditView = (props) => {
+  const { global } = props;
+
+  const [{ data }] = usePayloadAPI(
+    `${serverURL}/globals/${global.slug}`,
+    { initialParams: { 'fallback-locale': 'null' } }
+  );
+
+  const nav = [{
+    url: `${admin}/globals/${global.slug}`,
+    label: global.label,
+  }];
+
+  return (
+    <DefaultTemplate
+      className={baseClass}
+      stepNav={nav}
+    >
+      <header className={`${baseClass}__header`}>
+        <h1>
+          Edit {global.label}
+        </h1>
+      </header>
+      <Form className={`${baseClass}__form`} method={data ? 'put' : 'post'} action={`${serverURL}/globals/${global.slug}`}>
+        <StickyHeader showStatus={true}
+          content={
+            <APIURL url={`${serverURL}/globals/${global.slug}`} />
+          } action={
+            <>
+              <Button type="secondary">Preview</Button>
+              <FormSubmit>Save</FormSubmit>
+            </>
+          } />
+        <RenderFields fields={global.fields} initialData={data} />
+      </Form>
+    </DefaultTemplate>
+  );
+};
+
+EditView.propTypes = {
+  global: PropTypes.shape({
+    label: PropTypes.string,
+    slug: PropTypes.string,
+  }).isRequired,
+};
+
+export default EditView;

src/client/components/views/globals/Edit/index.scss

@@ -0,0 +1,16 @@
+@import '~payload/client/scss/styles';
+
+.global-edit {
+  &__header {
+
+    h1 {
+      margin: 0;
+    }
+  }
+
+  .sticky-header {
+    &:before {
+      left: - base(1.5);
+    }
+  }
+}

src/globals/registerSchema.js

@@ -17,7 +17,7 @@ const registerSchema = (globalConfigs, config) => {
 
     globalConfig.fields.forEach((field) => {
       const fieldSchema = fieldToSchemaMap[field.type];
-      if (fieldSchema) globalFields[globalConfig.slug][field.name] = fieldSchema(field, { path: globalConfig.slug, localization: config.localization });
+      if (fieldSchema) globalFields[globalConfig.slug][field.name] = fieldSchema(field, config);
     });
     globalSchemaGroups[globalConfig.slug] = globalFields[globalConfig.slug];
   });

src/globals/requestHandlers.js

@@ -1,11 +1,11 @@
 const httpStatus = require('http-status');
 const { findOne } = require('../mongoose/resolvers');
 const { NotFound } = require('../errors');
+const formatErrorResponse = require('../responses/formatError');
 
 const upsert = (req, res) => {
   if (!req.model.schema.tree[req.params.slug]) {
-    res.status(httpStatus.NOT_FOUND).json(new NotFound());
-    return;
+    return res.status(httpStatus.NOT_FOUND).json(formatErrorResponse(new NotFound(), 'APIError'));
   }
 
   req.model.findOne({}, (findErr, doc) => {
@@ -18,7 +18,7 @@ const upsert = (req, res) => {
       }
 
       return req.model.create(global, (createErr, result) => {
-        if (createErr) return res.status(httpStatus.INTERNAL_SERVER_ERROR).json({ error: createErr });
+        if (createErr) return res.status(httpStatus.INTERNAL_SERVER_ERROR).json(formatErrorResponse(createErr, 'mongoose'));
 
         return res.status(httpStatus.CREATED)
           .json({
@@ -35,11 +35,11 @@ const upsert = (req, res) => {
     Object.assign(doc[req.params.slug], req.body);
 
     return doc.save((err) => {
-      if (err) return res.status(httpStatus.INTERNAL_SERVER_ERROR).json({ error: err });
+      if (err) return res.status(httpStatus.INTERNAL_SERVER_ERROR).json(formatErrorResponse(err, 'mongoose'));
 
       return res.json({
-        message: 'success',
-        result: doc.toJSON({ virtuals: true }),
+        message: 'Saved successfully.',
+        doc: doc.toJSON({ virtuals: true }),
       });
     });
   });
@@ -55,16 +55,16 @@ const fetch = (req, res) => {
 
   findOne(query)
     .then((doc) => {
-      const globals = { ...doc };
-
-      if (globals[req.params.key]) {
-        return res.json(globals[req.params.key]);
-      } if (req.params.key) {
-        return res.status(httpStatus.NOT_FOUND).json(new NotFound());
+      if (doc[req.params.slug]) {
+        return res.json(doc[req.params.slug]);
+      } if (req.params.slug) {
+        return res.status(httpStatus.NOT_FOUND).json(formatErrorResponse(new NotFound(), 'APIError'));
       }
-      return res.json(globals);
+      return res.json(doc);
     })
-    .catch(err => res.status(httpStatus.INTERNAL_SERVER_ERROR).json({ error: err }));
+    .catch((err) => {
+      return res.status(httpStatus.NOT_FOUND).json(formatErrorResponse(err, 'APIError'));
+    });
 };
 
 module.exports = {

src/mongoose/requestHandlers/findOne.js

@@ -1,4 +1,6 @@
+const httpStatus = require('http-status');
 const { modelById } = require('../resolvers');
+const formatErrorResponse = require('../../responses/formatError');
 
 const findOne = (req, res) => {
   const query = {
@@ -11,7 +13,7 @@ const findOne = (req, res) => {
 
   modelById(query)
     .then(doc => res.json(doc))
-    .catch(err => res.status(err.status).json(err));
+    .catch(err => res.status(httpStatus.INTERNAL_SERVER_ERROR).json(formatErrorResponse(err, 'mongoose')));
 };
 
 module.exports = findOne;

src/mongoose/requestHandlers/query.js

@@ -1,4 +1,5 @@
 const httpStatus = require('http-status');
+const formatErrorResponse = require('../../responses/formatError');
 
 const query = (req, res) => {
   const queryOptions = {};
@@ -11,8 +12,7 @@ const query = (req, res) => {
 
   req.model.paginate(req.model.apiQuery(req.query, req.locale), { options: queryOptions }, (err, result) => {
     if (err) {
-      res.status(httpStatus.INTERNAL_SERVER_ERROR).json(err);
-      return;
+      return res.status(httpStatus.INTERNAL_SERVER_ERROR).json(formatErrorResponse(err, 'mongoose'));
     }
     res.status(httpStatus.OK).json({
       ...result,

src/mongoose/resolvers/findOne.js

@@ -1,6 +1,6 @@
 const { NotFound } = require('../../errors');
 
-const find = ({
+const findOne = ({
   Model, locale, fallback, depth,
 }) => {
   const options = {};
@@ -30,4 +30,4 @@ const find = ({
   });
 };
 
-module.exports = find;
+module.exports = findOne;

src/mongoose/resolvers/modelById.js

@@ -13,7 +13,7 @@ const modelById = (query) => {
   return new Promise((resolve, reject) => {
     query.Model.findOne({ _id: query.id }, {}, options, (err, doc) => {
       if (err || !doc) {
-        reject(new NotFound());
+        reject(err);
         return;
       }
 

src/responses/formatError.js

@@ -10,6 +10,7 @@ const formatErrorResponse = (incoming, source) => {
         }, []),
       };
 
+
     case 'APIError':
       return {
         errors: [