Merge pull request #24 from bowtie-co/feature/182014579/add-doc-link

Feature/182014579/add doc link

.env.development

@@ -8,3 +8,4 @@ REACT_APP_PUBNUB_PUBLISH_KEY=pub-c-e105347a-9b3a-4ff1-9eb7-409196f14298
 REACT_APP_PUBNUB_SUBSCRIBE_KEY=sub-c-55fe4dcc-03b7-11e9-989c-8ee1f208b3b7
 REACT_APP_STORAGE_DRIVER=local
 REACT_APP_ENV=development
+REACT_APP_DOCS_URL=https://houndstooth.work

src/ecosystems/Github/WithAuth.jsx

@@ -10,7 +10,6 @@ export const WithGithubAuth = ({ children, ...props }) => {
 
   useEffect(() => {
     auth.on('authorized', (authResult) => {
-      console.error('AUTHORIZED!', authResult);
       setToken(authResult.access_token);
       setIsAuthorized(true);
     });

src/ecosystems/Github/WithPulls.jsx

@@ -8,7 +8,7 @@ export const WithGithubPulls = ({ children, ...props }) => {
   const { github, pageProps, translate } = props;
 
   const approveChanges = useCallback((pull_number) => {
-    console.log('WithGithubRepoControls.approveChanges()', pull_number);
+    // console.debug('WithGithubRepoControls.approveChanges()', pull_number);
 
     // TODO: Check / enforce admin repo access here? Permissions should ultimately rely on remote repository
 
@@ -23,7 +23,7 @@ export const WithGithubPulls = ({ children, ...props }) => {
 
         setPulls(pulls.filter(pr => pr.number !== pull_number));
 
-        console.log('WithGithubRepoControls.mergePull()', { result });
+        console.debug('WithGithubRepoControls.mergePull()', { result });
       } catch (err) {
         console.warn('WithGithubRepoControls.mergePull(): Caught', err.message || err);
         notifier.bad(err);

src/ecosystems/Github/WithRepo.jsx

@@ -3,7 +3,7 @@ import { notifier, storage } from '../../lib';
 import { WithLoader, WithChildren, WithServicePubnub, WithGithubRepoControls } from '../';
 
 export const WithGithubRepo = ({ children, ...props }) => {
-  console.debug('WithGithubRepo', { children, props });
+  // console.debug('WithGithubRepo', { children, props });
 
   // const { user } = props;
   const [ repo, setRepo ] = useState();

src/ecosystems/Github/WithRepoControls.jsx

@@ -19,7 +19,7 @@ export const WithGithubRepoControls = ({ children, ...props }) => {
     if (branch) {
       github.sumStatuses(Object.assign({}, repoProps, { ref: branch, only: GithubCommitStatus.success })).then(statusSummary => {
         setBranchStatus(statusSummary);
-        console.log('set statusSummary', statusSummary);
+        // console.debug('set statusSummary', statusSummary);
 
         if (statusSummary && statusSummary.deploy && statusSummary.deploy.target_url) {
           setDeployedUrl(statusSummary.deploy.target_url);
@@ -64,7 +64,7 @@ export const WithGithubRepoControls = ({ children, ...props }) => {
           title: `${translate('changes.pr_ready_title')} ${branch}`,
         }));
 
-        console.log('WithGithubRepoControls.updatePull()', { result });
+        // console.debug('WithGithubRepoControls.updatePull()', { result });
 
         setOpenPull(result.data);
 
@@ -113,7 +113,7 @@ export const WithGithubRepoControls = ({ children, ...props }) => {
           currentPull = result.data;
         }
 
-        console.log('WithGithubRepoControls.updatePull()', { currentPull });
+        // console.debug('WithGithubRepoControls.updatePull()', { currentPull });
 
         setOpenPull(currentPull);
 
@@ -133,7 +133,7 @@ export const WithGithubRepoControls = ({ children, ...props }) => {
   }, [ github, repo, branch, repoProps, translate ]);
 
   const approveChanges = useCallback((pull_number) => {
-    console.log('WithGithubRepoControls.approveChanges()', pull_number);
+    // console.debug('WithGithubRepoControls.approveChanges()', pull_number);
 
     // TODO: Check / enforce admin repo access here? Permissions should ultimately rely on remote repository
 
@@ -148,7 +148,7 @@ export const WithGithubRepoControls = ({ children, ...props }) => {
 
         setPulls(pulls.filter(pr => pr.number !== pull_number));
 
-        console.log('WithGithubRepoControls.mergePull()', { result });
+        console.debug('WithGithubRepoControls.mergePull()', { result });
       } catch (err) {
         console.warn('WithGithubRepoControls.mergePull(): Caught', err.message || err);
         notifier.bad(err);
@@ -197,7 +197,7 @@ export const WithGithubRepoControls = ({ children, ...props }) => {
           }).catch(next);
         }).catch(err => {
           console.warn(err);
-          console.warn('Skipping force resolve overwrite (unable to compare/resolve conflict)', fileConflict);
+          // console.debug('Skipping force resolve overwrite (unable to compare/resolve conflict)', fileConflict);
           next();
         });
       }, err => {
@@ -228,7 +228,7 @@ export const WithGithubRepoControls = ({ children, ...props }) => {
     github.pulls(repoProps).then(data => {
       setPulls(data);
 
-      console.log('Loaded pulls', { data });
+      // console.debug('Loaded pulls', { data });
 
       // TODO: Find or create PR (based on current user/branch)
       // const open = data.find(pr => pr.)
@@ -242,13 +242,13 @@ export const WithGithubRepoControls = ({ children, ...props }) => {
 
   useEffect(() => {
     if (!pulls) {
-      console.log('Skip pull find (missing/invalid pulls)');
+      // console.debug('Skip pull find (missing/invalid pulls)');
       return;
     }
 
     const findPull = pulls.find(pull => pull.head && pull.head.ref === branch);
 
-    console.log('findPull', { findPull });
+    // console.debug('findPull', { findPull });
 
     setOpenPull(findPull);
   }, [ branch, pulls ]);

src/ecosystems/Github/WithRepoUsers.jsx

@@ -47,7 +47,7 @@ export const WithGithubRepoUsers = ({ children, ...props }) => {
         const collabUserIds = data.map(u => u.id);
         const filteredMembers = members.data.filter(m => !collabUserIds.includes(m.id));
 
-        console.log('GH ORG Members', members, collabUserIds, filteredMembers);
+        // console.debug('GH ORG Members', members, collabUserIds, filteredMembers);
 
         setOtherMembers(filteredMembers);
       });
@@ -67,7 +67,7 @@ export const WithGithubRepoUsers = ({ children, ...props }) => {
           team_slug: team.slug,
           username,
         }).then(resp => {
-          console.log('remove user from team resp', resp);
+          // console.debug('remove user from team resp', resp);
           next();
         }).catch(err => {
           console.warn('remove user from team error', err);
@@ -77,7 +77,7 @@ export const WithGithubRepoUsers = ({ children, ...props }) => {
         if (err) {
           console.warn('Failed revoking user team access', err);
         } else {
-          console.log('User team access revoked.', username, teams);
+          // console.debug('User team access revoked.', username, teams);
         }
 
         if (refresh) {

src/ecosystems/Global/WithPubnub.jsx

@@ -23,7 +23,7 @@ export const WithServicePubnub = ({ children, ...props }) => {
         console.debug('PN MSG', { channel, action, subject });
 
         if (message.service !== serviceName) {
-          // console.debug('Ignoring message', message);
+          console.debug('Ignoring message', message);
           return;
         }
       }

src/ecosystems/Global/WithSidebar.jsx

@@ -25,14 +25,14 @@ export const WithSidebar = ({ children, className, ...props }) => {
 
   useEffect(() => {
     if (!pubnub) {
-      console.debug('Skip effect, PubNub is not configured');
+      // console.debug('Skip effect, PubNub is not configured');
       return;
     }
 
     if (branchRef) {
       const listener = {
         status: (statusEvent) => {
-          console.debug('PN Status', statusEvent);
+          // console.debug('PN Status', statusEvent);
         },
         message: (msg) => {
           const { channel, message } = msg;
@@ -44,18 +44,18 @@ export const WithSidebar = ({ children, className, ...props }) => {
             case 'builds':
               // setBuilds(createOrUpdate(builds, subject));
               if (subject && subject.source_version === branchRef) {
-                console.log('Build update for ref', branchRef, subject);
+                // console.debug('Build update for ref', branchRef, subject);
                 storage.set(`build-${branchRef}`, subject);
                 setBuildData(subject);
               } else {
-                console.log('IGNORE: Msg not for ref', branchRef, subject);
+                console.debug('IGNORE: Msg not for ref', branchRef, subject);
               }
               break;
             case 'deploys':
               // setDeploys(createOrUpdate(deploys, subject));
               break;
             default:
-              console.warn('Received message for unexpected channel:', channel);
+              console.debug('Received message for unexpected channel:', channel);
               break;
           }
         }

src/ecosystems/Jekyll/WithCollectionItem.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import * as yaml from 'js-yaml';
 import slugify from 'slugify';
 import { WithLoader, WithChildren } from '../';
@@ -12,6 +12,7 @@ export const WithCollectionItem = ({ children, ...props }) => {
   const [itemFields, setItemFields] = useState({});
   const [itemContent, setItemContent] = useState('');
   const [loading, setLoading] = useState(true);
+  const editorRef = useRef(null);
   const isItemNew = () => (entry === '_new');
 
   const mergeFile = useCallback((updates) => {
@@ -43,7 +44,7 @@ export const WithCollectionItem = ({ children, ...props }) => {
 
     if (newName && newName !== '' && !/\.(html|md)$/i.test(newName)) newName += '.md';
 
-    console.log('updateItemName', rawName, newName);
+    // console.debug('updateItemName', rawName, newName);
 
     setItemName(newName);
   }, [setItemName]);
@@ -87,7 +88,7 @@ export const WithCollectionItem = ({ children, ...props }) => {
     const { name, path, sha } = itemFile;
 
     const message = `[HT] ${sha ? 'Updated' : 'Created'} file: ${path}`;
-    const content = Buffer.from(`---\n${yaml.safeDump(itemFields)}\n---\n${itemContent ? itemContent.trim() : ''}\n`).toString('base64');
+    const content = Buffer.from(`---\n${yaml.safeDump(itemFields)}\n---\n${editorRef.current ? editorRef.current.getContent() : ''}\n`).toString('base64');
     const params = Object.assign({}, repoProps, {
       sha,
       path,
@@ -180,6 +181,7 @@ export const WithCollectionItem = ({ children, ...props }) => {
   };
 
   const itemProps = {
+    editorRef,
     isItemNew,
     itemName,
     setItemName,

src/lib/language/en.js

@@ -46,7 +46,8 @@ export const en = {
     language: 'Language',
     source: 'Source',
     login: 'Login with',
-    exit: 'Exit'
+    exit: 'Exit',
+		docs: 'Docs'
   },
   sidebar: {
     repos: 'Repos',

src/lib/language/es.js

@@ -44,7 +44,8 @@ export const es = {
     language: 'Idioma',
     source: 'Fuente',
     login: 'Iniciar con',
-    exit: 'Salir'
+    exit: 'Salir',
+		docs: 'Documentos'
   },
   sidebar: {
     repos: 'Repositorios',

src/lib/notifier.js

@@ -211,7 +211,7 @@ class Notifier extends EventEmitter {
       color
     };
 
-    console.log('Notifier.msg()', { msg });
+    // console.debug('Notifier.msg()', { msg });
 
     this.msgs.push(msg);
 

src/molecules/CollectionItem/Card.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { AppLink, CardBasic } from '../../atoms';
 
 export const CollectionItemCard = ({ entry, ...props }) => {
-  console.debug('CollectionItemCard', { entry, props });
+  // console.debug('CollectionItemCard', { entry, props });
 
   const { repo, linkWithQueryParams, pageProps } = props;
   const { collection } = pageProps;

src/molecules/CollectionItem/Editor.jsx

@@ -8,11 +8,8 @@ import { notifier } from '../../lib';
 export const CollectionItemEditor = (props) => {
   // console.debug('CollectionItemEditor', { props });
 
-  const { api, itemContent, setItemContent, repo, disabled = false } = props;
+  const { api, itemContent, editorRef, repo, disabled = false } = props;
 
-  const onEditorChange = (data) => setItemContent(data);
-
-  // TODO: Upgrade inline wysiwyg uploads to use dedicated s3 asset uploads
   const onUpload = (blobInfo, success, failure) => {
     const blob = blobInfo.blob();
 
@@ -40,10 +37,10 @@ export const CollectionItemEditor = (props) => {
     <div className='wysiwyg-section tab-content-card'>
       <Editor
         // inline
+        onInit={(evt, editor) => editorRef.current = editor}
         apiKey={process.env.REACT_APP_TINY_API_KEY}
         disabled={disabled}
         initialValue={itemContent}
-        onEditorChange={onEditorChange}
         init={{
           height: '100%',
           toolbar_drawer: 'floating',

src/molecules/Form/Field/ImageUpload.jsx

@@ -21,8 +21,8 @@ const handleFileDrop = ({ name, onChange, togglePreview }) => (accepted, rejecte
       onChange({ target: { name, value: documentBase64 } });
     };
 
-    reader.onabort = () => console.log('file reading was aborted');
-    reader.onerror = () => console.log('file reading has failed');
+    reader.onabort = () => console.debug('file reading was aborted');
+    reader.onerror = () => console.debug('file reading has failed');
 
     reader.readAsDataURL(file);
     togglePreview(true);

src/molecules/Form/Field/Select.jsx

@@ -4,7 +4,7 @@ import AsyncSelect from 'react-select/async';
 import { FormGroup } from '../';
 
 export const FormFieldSelect = (props) => {
-  console.log('FormFieldSelect', { props });
+  // console.debug('FormFieldSelect', { props });
 
   const { id, col, options, async, name, onChange, value, list, className = '', edited, ...rest } = props;
   const { valueKey, labelKey } = rest;

src/molecules/Form/Field/SelectMulti.jsx

@@ -5,7 +5,7 @@ import CreatableSelect from 'react-select/creatable';
 import { FormGroup } from '../';
 
 export const FormFieldSelectMulti = (props) => {
-  console.log('FormFieldSelectMulti', { props });
+  // console.debug('FormFieldSelectMulti', { props });
 
   const { id, name, async, onChange, creatable, options, optionsFrom, className = '', edited, value = [], ...rest } = props;
 
@@ -35,7 +35,7 @@ export const FormFieldSelectMulti = (props) => {
     options: options || defaultValue,
     defaultValue,
     onChange: (val) => {
-      console.log('SelectMulti.onChange()', val);
+      // console.debug('SelectMulti.onChange()', val);
       onChange({ target: { name, value: val ? val.map(v => v.value) : [] }});
     }
   };

src/molecules/Form/Field/Upload.jsx

@@ -8,7 +8,7 @@ import { notifier } from '../../../lib';
 
 const getFileExt = (filename) => {
   if (!filename || !/[^.]+\.[^.]/.test(filename)) {
-    console.warn('WithDocuments.getFileExt() - Cannot get ext from filename:', filename);
+    // console.debug('WithDocuments.getFileExt() - Cannot get ext from filename:', filename);
     return null;
   }
 

src/molecules/Form/Recursive.jsx

@@ -50,7 +50,7 @@ export const FormRecursive = (props) => {
     if (typeof onChange === 'function') {
       onChange(fieldsCopy);
     } else {
-      console.log('handleChange - onChange is not a function:', { onChange });
+      // console.debug('handleChange - onChange is not a function:', { onChange });
     }
   };
 

src/organisms/App/Navbar.jsx

@@ -12,10 +12,10 @@ import {
 } from 'reactstrap';
 import { HoundstoothLogo, AppIcon, AppButton } from '../../atoms';
 import { BranchSelect, LanguageSelect, RepoSelect } from '../../molecules';
+const { REACT_APP_DOCS_URL = 'https://houndstooth.work' } = process.env;
 
 export const AppNavbar = ({ children, ...props }) => {
   const { auth, languages, translate, user, repo, branch, openPull, deployedUrl, isPullPending, submitChanges, pulls } = props;
-
   // console.debug('AppNavbar', { props });
 
   const [ isNavOpen, setIsNavOpen ] = useState(false);
@@ -111,6 +111,15 @@ export const AppNavbar = ({ children, ...props }) => {
             <LanguageSelect {...props} />
           )}
 
+					<NavItem>
+						<NavLink href={REACT_APP_DOCS_URL} target='_blank' rel='noopener noreferrer'>
+							<section>
+								<AppIcon className='fas fa-code' color='white' size='sm'/>
+								<div className="small">{translate('navbar.docs')}</div>
+							</section>
+						</NavLink>
+					</NavItem>
+
           {repo && (
             <NavItem>
               <NavLink href={repo.html_url} target='_blank' rel='noopener noreferrer'>

src/organisms/Repo/Modal/Resolve.jsx

@@ -3,7 +3,7 @@ import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { AppButton } from '../../../atoms';
 
 export const RepoModalResolve = (props) => {
-  console.debug('RepoModalResolve', props);
+  // console.debug('RepoModalResolve', props);
 
   const { branchConflicts, resolveConflicts, translate } = props;
   // const [ showModal, setShowModal ] = useState(true);