From 31a54e2c09f164952d13bbc85749845fdc65fed1 Mon Sep 17 00:00:00 2001
From: James <james@keen-studio.com>
Date: Fri, 7 Dec 2018 15:19:18 -0800
Subject: [PATCH] streamlines top level collection components, rebuilds
 StickyAction component

---
 demo/Page/components/Archive/index.js         | 14 +++-----
 demo/Page/components/Edit/index.js            | 30 +++++++---------
 demo/client/components/Routes.js              |  9 +++--
 src/components.js                             |  1 +
 src/components/controls/Button/index.scss     |  4 +--
 src/components/data/archive.js                |  4 +--
 src/components/data/edit.js                   |  4 +--
 src/components/field-types/Input/index.scss   | 27 +-------------
 .../field-types/Textarea/index.scss           | 27 +-------------
 src/components/field-types/fieldType/index.js |  8 +++--
 .../field-types/fieldType/index.scss          | 31 ++++++++++++++++
 src/components/layout/Sticky/index.js         |  2 +-
 src/components/layout/Sticky/index.scss       | 14 --------
 src/components/modules/APIUrl/index.js        |  6 ++--
 src/components/modules/APIUrl/index.scss      |  6 ++++
 .../modules/SearchableTable/index.js          |  4 +--
 src/components/modules/StickyAction/index.js  | 19 ++++++++++
 .../modules/StickyAction/index.scss           | 36 +++++++++++++++++++
 src/components/routes/Collections.js          | 11 ++++--
 .../views/collections/Edit/index.scss         | 17 ---------
 src/scss/vars.scss                            |  4 +--
 21 files changed, 143 insertions(+), 135 deletions(-)
 create mode 100644 src/components/field-types/fieldType/index.scss
 create mode 100644 src/components/modules/APIUrl/index.scss
 create mode 100644 src/components/modules/StickyAction/index.js
 create mode 100644 src/components/modules/StickyAction/index.scss

diff --git a/demo/Page/components/Archive/index.js b/demo/Page/components/Archive/index.js
index f6e3b68701..d32f1f4dc2 100644
--- a/demo/Page/components/Archive/index.js
+++ b/demo/Page/components/Archive/index.js
@@ -6,23 +6,17 @@ import {
   SearchableTable,
 } from 'payload/components';
 
-import Page from '../../Page.config';
-import config from '../../../payload.config.json';
-
-const collection = Page;
-
 const Archive = props => {
-
   return (
-    <ArchiveView collection={collection}>
+    <ArchiveView collection={props.collection}>
       <HeadingButton
         heading="Pages"
         buttonLabel="Add New"
-        buttonUrl={`/collections/${collection.slug}/create`}
+        buttonUrl={`/collections/${props.collection.slug}/create`}
         buttonType="link" />
-      <SearchableTable data={props.data} collection={collection} />
+      <SearchableTable data={props.data} collection={props.collection} />
     </ArchiveView>
   );
 }
 
-export default withArchiveData(Archive, collection, config);
+export default withArchiveData(Archive);
diff --git a/demo/Page/components/Edit/index.js b/demo/Page/components/Edit/index.js
index 99a89399c9..77e12f9eac 100644
--- a/demo/Page/components/Edit/index.js
+++ b/demo/Page/components/Edit/index.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import {
   withEditData,
   EditView,
-  Sticky,
+  StickyAction,
   APIUrl,
   Button,
   Form,
@@ -13,28 +13,22 @@ import {
 } from 'payload/components';
 import { toKebabCase } from 'payload/utils';
 
-import Page from '../../Page.config';
-import config from '../../../payload.config.json';
-
 class Edit extends Component {
 
   constructor(props) {
     super(props);
-    this.collection = Page;
 
     const uid = this.props.match.params.slug;
 
     this.state = {
       uid: uid,
       slug: uid,
-      action: `${config.serverUrl}/${this.collection.slug}${uid ? `/${uid}` : ''}`,
+      action: `${this.props.config.serverUrl}/${this.props.collection.slug}${uid ? `/${uid}` : ''}`,
       method: uid ? 'put' : 'post'
     }
-
-    this.updateSlug = this.updateSlug.bind(this);
   }
 
-  updateSlug(e) {
+  updateSlug = e => {
     this.setState({ slug: toKebabCase(e.target.value) });
   }
 
@@ -43,16 +37,18 @@ class Edit extends Component {
     const initialData = this.props.data ? this.props.data : {};
 
     return (
-      <EditView data={this.props.data} collection={this.collection} slug={this.state.slug} uid={this.state.uid}>
+      <EditView data={this.props.data} collection={this.props.collection} slug={this.state.slug} uid={this.state.uid}>
         <Form method={this.state.method} action={this.state.action}>
-          <Sticky>
-            <APIUrl serverUrl={config.serverUrl}
-              collectionSlug={this.collection.slug} slug={this.state.slug} />
-            <div className="controls">
+          <StickyAction content={
+            <APIUrl serverUrl={this.props.config.serverUrl}
+            collectionSlug={this.props.collection.slug} slug={this.state.slug} />
+          } action={
+            <React.Fragment>
               <Button type="secondary">Preview</Button>
               <FormSubmit>Save</FormSubmit>
-            </div>
-          </Sticky>
+            </React.Fragment>
+          } />
+          <Input type="hidden" name="slug" valueOverride={this.state.slug} />
           <Input onChange={this.updateSlug} type="text" label="Page Title" initialValue={initialData.title} name="title" required />
           <Group heading="Sample Group">
             <Textarea required name="content" label="Page Content" wysiwyg={false} height={100} initialValue={initialData.content} />
@@ -63,4 +59,4 @@ class Edit extends Component {
   }
 }
 
-export default withEditData(Edit, Page, config);
+export default withEditData(Edit);
diff --git a/demo/client/components/Routes.js b/demo/client/components/Routes.js
index 0b0e7cbbdf..ec4797b501 100644
--- a/demo/client/components/Routes.js
+++ b/demo/client/components/Routes.js
@@ -1,9 +1,5 @@
 import React from 'react';
 import { Route, Switch, withRouter } from 'react-router-dom';
-
-import Logo from '../components/graphics/Logo';
-import Icon from '../components/graphics/Icon';
-
 import {
   CollectionRoutes,
   DefaultTemplate,
@@ -11,6 +7,9 @@ import {
   Login,
   CreateUser
 } from 'payload/components';
+import Logo from '../components/graphics/Logo';
+import Icon from '../components/graphics/Icon';
+import config from '../../payload.config.json';
 
 const Routes = props => {
   return (
@@ -22,7 +21,7 @@ const Routes = props => {
           <DefaultTemplate {...routeProps} icon={Icon}>
             <Route path="/create-user" component={CreateUser} />
             <Route path="/" exact component={Dashboard} />
-            <CollectionRoutes collections={props.collections} views={props.views} />
+            <CollectionRoutes collections={props.collections} views={props.views} config={config} />
           </DefaultTemplate>
         );
       }} />
diff --git a/src/components.js b/src/components.js
index df42c04a9a..a8a429d95b 100644
--- a/src/components.js
+++ b/src/components.js
@@ -30,6 +30,7 @@ export { default as ContentBlock } from './components/layout/ContentBlock';
 export { default as Table } from './components/layout/Table';
 
 // Modules
+export { default as StickyAction } from './components/modules/StickyAction';
 export { default as HeadingButton } from './components/modules/HeadingButton';
 export { default as Filter } from './components/modules/Filter';
 export { default as APIUrl } from './components/modules/APIUrl';
diff --git a/src/components/controls/Button/index.scss b/src/components/controls/Button/index.scss
index eb4f88b993..73a6994cb3 100644
--- a/src/components/controls/Button/index.scss
+++ b/src/components/controls/Button/index.scss
@@ -34,7 +34,7 @@
         &:hover {
             background: $primary;
             border: $stroke-width solid $primary;
-            color: white;
+            color: $black;
 
             &.btn-icon {
                 @include color-svg($black);
@@ -63,7 +63,7 @@
     &:hover {
       border: 1px solid $primary;
       background: $primary;
-      color: white;
+      color: $black;
     }
 
     &:focus, &:active {
diff --git a/src/components/data/archive.js b/src/components/data/archive.js
index 2c52056228..ae7aa69119 100644
--- a/src/components/data/archive.js
+++ b/src/components/data/archive.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import api from 'payload/api';
 
-const withArchiveData = (PassedComponent, collection, config) => {
+const withArchiveData = PassedComponent => {
 
   class ArchiveData extends Component {
 
@@ -14,7 +14,7 @@ const withArchiveData = (PassedComponent, collection, config) => {
     }
 
     componentDidMount() {
-      api.requests.get(`${config.serverUrl}/${collection.slug}`).then(
+      api.requests.get(`${this.props.config.serverUrl}/${this.props.collection.slug}`).then(
         res => this.setState({ data: res }),
         err => console.warn(err)
       )
diff --git a/src/components/data/edit.js b/src/components/data/edit.js
index d78e89ae74..995408d191 100644
--- a/src/components/data/edit.js
+++ b/src/components/data/edit.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { withRouter } from 'react-router-dom';
 import api from 'payload/api';
 
-const withEditData = (PassedComponent, collection, config) => {
+const withEditData = PassedComponent => {
 
   class EditData extends Component {
     constructor(props) {
@@ -17,7 +17,7 @@ const withEditData = (PassedComponent, collection, config) => {
       const slug = this.props.match.params.slug;
 
       if (slug) {
-        api.requests.get(`${config.serverUrl}/${collection.slug}/${slug}`).then(
+        api.requests.get(`${this.props.config.serverUrl}/${this.props.collection.slug}/${slug}`).then(
           res => this.setState({ data: res }),
           err => {
             console.warn(err);
diff --git a/src/components/field-types/Input/index.scss b/src/components/field-types/Input/index.scss
index 7da51e7358..a4d17cc679 100644
--- a/src/components/field-types/Input/index.scss
+++ b/src/components/field-types/Input/index.scss
@@ -4,38 +4,13 @@
 	margin-bottom: rem(.5);
 	position: relative;
 
-	label {
-		display: flex;
-
-		.required {
-			color: $error;
-			margin-left: rem(.25);
-			margin-right: auto;
-		}
-	}
-
-	.tooltip {
-		left: auto;
-		right: 0;
-		transform: none;
-		background-color: $error;
-
-		span {
-			border-top-color: $error;
-		}
-	}
-
 	input {
 		@include formInput;
 	}
 
 	&.error {
 		input {
-      background-color: lighten($error, 15%);
+      background-color: lighten($error, 20%);
 		}
 	}
-
-	@include small-break {
-		margin-bottom: rem(.5);
-	}
 }
diff --git a/src/components/field-types/Textarea/index.scss b/src/components/field-types/Textarea/index.scss
index 460a4f51d6..3c7449921b 100644
--- a/src/components/field-types/Textarea/index.scss
+++ b/src/components/field-types/Textarea/index.scss
@@ -4,27 +4,6 @@
   margin-bottom: rem(.5);
   position: relative;
 
-  label {
-    display: flex;
-
-    .required {
-      color: $error;
-      margin-left: rem(.25);
-      margin-right: auto;
-    }
-  }
-
-  .tooltip {
-    left: auto;
-    right: 0;
-    transform: none;
-    background-color: $error;
-
-    span {
-      border-top-color: $error;
-    }
-  }
-
   textarea {
     @include formInput();
     min-height: rem(3);
@@ -32,11 +11,7 @@
 
   &.error {
     textarea {
-      background-color: lighten($error, 15%);
+      background-color: lighten($error, 20%);
     }
   }
-
-  @include small-break {
-    margin-bottom: rem(.5);
-  }
 }
diff --git a/src/components/field-types/fieldType/index.js b/src/components/field-types/fieldType/index.js
index 999aa74ab8..7340c4dbd8 100644
--- a/src/components/field-types/fieldType/index.js
+++ b/src/components/field-types/fieldType/index.js
@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import { FormContext, Tooltip } from 'payload/components';
 
+import './index.scss';
+
 const fieldType = (PassedComponent, slug, validate, errors) => {
 
   class FieldType extends Component {
@@ -24,9 +26,9 @@ const fieldType = (PassedComponent, slug, validate, errors) => {
     }
 
     componentDidMount() {
-      this.sendField(
-        this.props.value ? this.props.value : ''
-      )
+      let value = this.props.value ? this.props.value : '';
+      value = this.props.valueOverride ? this.props.valueOverride : value;
+      this.sendField(value);
 
       this.setState({
         init: true
diff --git a/src/components/field-types/fieldType/index.scss b/src/components/field-types/fieldType/index.scss
new file mode 100644
index 0000000000..1cbc4f4585
--- /dev/null
+++ b/src/components/field-types/fieldType/index.scss
@@ -0,0 +1,31 @@
+@import '~payload/scss/styles';
+
+.field-type {
+  margin-bottom: rem(.5);
+  position: relative;
+
+  label {
+    display: flex;
+
+    .required {
+      color: $error;
+      margin-left: rem(.25);
+      margin-right: auto;
+    }
+  }
+
+  .tooltip {
+    left: auto;
+    right: 0;
+    transform: none;
+    background-color: $error;
+
+    span {
+      border-top-color: $error;
+    }
+  }
+
+  @include small-break {
+    margin-bottom: rem(.5);
+  }
+}
diff --git a/src/components/layout/Sticky/index.js b/src/components/layout/Sticky/index.js
index ae79a10ee7..803b7f7921 100644
--- a/src/components/layout/Sticky/index.js
+++ b/src/components/layout/Sticky/index.js
@@ -4,7 +4,7 @@ import './index.scss';
 
 const Sticky = props => {
   return (
-    <div className="sticky">
+    <div className={`sticky${props.className ? ` ${props.className}` : ''}`}>
       {props.children}
     </div>
   );
diff --git a/src/components/layout/Sticky/index.scss b/src/components/layout/Sticky/index.scss
index 87e3d90ca6..02db8a2413 100644
--- a/src/components/layout/Sticky/index.scss
+++ b/src/components/layout/Sticky/index.scss
@@ -1,24 +1,10 @@
 @import '~payload/scss/styles';
 
 .sticky {
-  @include m;
   z-index: 10;
   padding-top: rem(.75);
   padding-bottom: rem(.75);
   width: 100%;
   position: sticky;
   top: 0;
-  display: flex;
-  justify-content: space-between;
-
-  &:before {
-    content: ' ';
-    background: rgba(white, .95);
-    position: absolute;
-    z-index: -1;
-    top: 0;
-    right: - rem(1);
-    bottom: 0;
-    left: - rem(1);
-  }
 }
diff --git a/src/components/modules/APIUrl/index.js b/src/components/modules/APIUrl/index.js
index 25f9fc923c..59a64c58b8 100644
--- a/src/components/modules/APIUrl/index.js
+++ b/src/components/modules/APIUrl/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
+import { Label } from 'payload/components';
 
-import { Label, Input } from 'payload/components';
+import './index.scss';
 
 const APIUrl = props => {
 
@@ -9,8 +10,7 @@ const APIUrl = props => {
   return (
     <div className="api-url">
       <Label className="uppercase">API URL</Label>
-      <div><a href={apiUrl} rel="noopener noreferrer" target="_blank">{apiUrl}</a></div>
-      <Input type="hidden" name="slug" valueOverride={props.slug} />
+      <div className="url"><a href={apiUrl} rel="noopener noreferrer" target="_blank">{apiUrl}</a></div>
     </div>
   );
 };
diff --git a/src/components/modules/APIUrl/index.scss b/src/components/modules/APIUrl/index.scss
new file mode 100644
index 0000000000..e059962708
--- /dev/null
+++ b/src/components/modules/APIUrl/index.scss
@@ -0,0 +1,6 @@
+.api-url {
+  .url {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
diff --git a/src/components/modules/SearchableTable/index.js b/src/components/modules/SearchableTable/index.js
index 1f47b2a73c..22ccd51bc1 100644
--- a/src/components/modules/SearchableTable/index.js
+++ b/src/components/modules/SearchableTable/index.js
@@ -13,8 +13,8 @@ class SearchableTable extends Component {
         key: 'title',
         label: 'Title'
       }, {
-        key: 'status',
-        label: 'Status'
+        key: '_id',
+        label: 'ID'
       }, {
         key: 'published',
         label: 'Published On'
diff --git a/src/components/modules/StickyAction/index.js b/src/components/modules/StickyAction/index.js
new file mode 100644
index 0000000000..a86fcaa789
--- /dev/null
+++ b/src/components/modules/StickyAction/index.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Sticky } from 'payload/components';
+
+import './index.scss';
+
+const StickyAction = props => {
+  return (
+    <Sticky className="action">
+      <div className="content">
+        {props.content}
+      </div>
+      <div className="controls">
+        {props.action}
+      </div>
+    </Sticky>
+  )
+}
+
+export default StickyAction;
diff --git a/src/components/modules/StickyAction/index.scss b/src/components/modules/StickyAction/index.scss
new file mode 100644
index 0000000000..21cce71238
--- /dev/null
+++ b/src/components/modules/StickyAction/index.scss
@@ -0,0 +1,36 @@
+@import '~payload/scss/styles';
+
+.sticky.action {
+  display: flex;
+  justify-content: space-between;
+
+  > .content {
+    flex-grow: 1;
+    min-width: 0;
+    padding-right: rem(1);
+  }
+
+  .controls {
+    flex-shrink: 0;
+
+    .btn {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    > *:last-child {
+      margin-left: rem(1);
+    }
+  }
+
+  &:before {
+    content: ' ';
+    background: rgba(white, .95);
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    right: - rem(1);
+    bottom: 0;
+    left: - rem(1);
+  }
+}
diff --git a/src/components/routes/Collections.js b/src/components/routes/Collections.js
index b03a4bac66..770bca584e 100644
--- a/src/components/routes/Collections.js
+++ b/src/components/routes/Collections.js
@@ -10,9 +10,14 @@ const CollectionRoutes = props => {
 
       return (
         <Switch key={i}>
-          <Route path={`/collections/${collection.slug}/create`} exact component={Edit} />
-          <Route path={`/collections/${collection.slug}/:slug`} component={Edit} />
-          <Route path={`/collections/${collection.slug}`} exact component={Archive} />
+          <Route path={`/collections/${collection.slug}/create`} exact
+          render={routeProps => <Edit {...routeProps} collection={collection} config={props.config} />} />
+
+          <Route path={`/collections/${collection.slug}/:slug`}
+          render={routeProps => <Edit {...routeProps} collection={collection} config={props.config} />} />
+
+          <Route path={`/collections/${collection.slug}`} exact
+          render={routeProps => <Archive {...routeProps} collection={collection} config={props.config} />} />
         </Switch>
       );
     }
diff --git a/src/components/views/collections/Edit/index.scss b/src/components/views/collections/Edit/index.scss
index 086578427d..bc0680f89f 100644
--- a/src/components/views/collections/Edit/index.scss
+++ b/src/components/views/collections/Edit/index.scss
@@ -6,21 +6,4 @@
       margin: 0;
     }
   }
-
-  .stick-on-scroll .stick .wrap {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .controls {
-
-    .btn {
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-
-    > *:last-child {
-      margin-left: rem(1);
-    }
-  }
 }
diff --git a/src/scss/vars.scss b/src/scss/vars.scss
index 47a24745d5..ed5ef2159a 100644
--- a/src/scss/vars.scss
+++ b/src/scss/vars.scss
@@ -35,13 +35,13 @@ $font-label : 'gt-pressura-web';
 // COLORS
 //////////////////////////////
 
-$primary    : #3bffaa;
+$primary    : #1ff99a;
 
 $light-gray : #f5f5f5;
 $gray       : #afafaf;
 $black      : rgb(60, 60, 60);
 
-$error      : #ff8efc;
+$error      : #fd7373;
 $warning    : #fff93b;
 
 //////////////////////////////