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);
+    }
+  }
+}