Cw/readme scroll

src/chrome/ContentBoxTitle.tsx

@@ -1,13 +1,22 @@
 import React from 'react'
 
+import IconLink from './IconLink'
+
 interface ContentBoxTitleProps {
   title: string
+  editLink?: string
+  editTitle?: string
 }
 
 const ContentBoxTitle: React.FC<ContentBoxTitleProps> = ({
-  title
+  title,
+  editLink = '',
+  editTitle = ''
 }) => (
-  <div className='text-sm text-qrigray-400 font-semibold mb-2'>{title}</div>
+  <div className='flex'>
+    <div className='text-sm text-qrigray-400 font-semibold mb-2 flex-grow'>{title}</div>
+    {editLink !== '' && <IconLink icon='edit' size='xs' colorClassName='text-qrigray-400' to={editLink} title={editTitle} />}
+  </div>
 )
 
 export default ContentBoxTitle

src/chrome/Icon.tsx

@@ -55,6 +55,7 @@ import Info from './icon/Info'
 import Integer from './icon/Integer'
 import Lock from './icon/Lock'
 import More from './icon/More'
+import MoreVertical from './icon/MoreVertical'
 import MyDatasets from './icon/MyDatasets'
 import Null from './icon/Null'
 import Number from './icon/Number'
@@ -149,6 +150,7 @@ const Icon: React.FunctionComponent<IconProps> = (props) => {
     loader: <Loader {...props} />,
     lock: <Lock {...props} />,
     more: <More {...props} />,
+    moreVertical: <MoreVertical {...props} />,
     myDatasets: <MyDatasets {...props} />,
     null: <Null {...props} />,
     number: <Number {...props} />,

src/chrome/IconLink.tsx

@@ -5,7 +5,7 @@ import Icon, { IconSize } from './Icon'
 
 interface IconLinkProps {
   icon: string
-  link?: string
+  to?: string
   size?: IconSize
   className?: string
   colorClassName?: string
@@ -15,7 +15,7 @@ interface IconLinkProps {
 
 const IconLink: React.FC<IconLinkProps> = ({
   icon,
-  link,
+  to,
   size = 'sm',
   className,
   colorClassName = 'text-black hover:text-qripink-600',
@@ -24,10 +24,10 @@ const IconLink: React.FC<IconLinkProps> = ({
 }) => {
   const linkClassNames = `${colorClassName} hover:cursor-pointer`
 
-  if (link) {
+  if (to) {
     return (
       <div title={title} className={classNames('ml-2', className)} onClick={onClick}>
-        <Link to={link} className={linkClassNames} colorClassName={colorClassName}>
+        <Link to={to} className={linkClassNames} colorClassName={colorClassName}>
           <Icon icon={icon} size={size} />
         </Link>
       </div>

src/chrome/icon/MoreVertical.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import CustomIcon, { CustomIconProps } from '../CustomIcon'
+
+const MoreVertical: React.FC<CustomIconProps> = (props) => (
+  <CustomIcon {...props}>
+    <path d="M10.5 12.6194C10.5 13.3097 11.0596 13.8694 11.75 13.8694C12.4404 13.8694 13 13.3097 13 12.6194C13 11.929 12.4404 11.3694 11.75 11.3694C11.0596 11.3694 10.5 11.929 10.5 12.6194Z" fill="currentColor" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <path d="M10.5 21.3694C10.5 22.0597 11.0596 22.6194 11.75 22.6194C12.4404 22.6194 13 22.0597 13 21.3694C13 20.679 12.4404 20.1194 11.75 20.1194C11.0596 20.1194 10.5 20.679 10.5 21.3694Z" fill="currentColor" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <path d="M10.5 3.86938C10.5 4.55974 11.0596 5.11938 11.75 5.11938C12.4404 5.11938 13 4.55974 13 3.86938C13 3.17903 12.4404 2.61938 11.75 2.61938C11.0596 2.61938 10.5 3.17903 10.5 3.86938Z" fill="currentColor" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </CustomIcon>
+)
+
+export default MoreVertical

src/features/app/App.css

@@ -117,3 +117,16 @@ html {
   75%  { content: '...'; }
   100% { content: ''; }
 }
+
+/* Override default behavior of simplemede-markdown-editor */
+/* Makes readme editor 100% height with overflow-scrolling textarea */
+
+#readme-editor-wrapper,
+.EasyMDEContainer,
+.CodeMirror-scroll {
+  height: 100%;
+}
+
+.EasyMDEContainer .CodeMirror {
+  height: calc(100% - 49px);
+}

src/features/collection/CollectionTable.tsx

@@ -161,7 +161,7 @@ const CollectionTable: React.FC<CollectionTableProps> = ({
       selector: (row: VersionInfo) => row.commitTime,
       omit: simplified,
       sortable: true,
-      width: '180px',
+      width: '130px',
       // eslint-disable-next-line react/display-name
       cell: (row: VersionInfo) => {
         // TODO (ramfox): the activity feed expects more content than currently exists
@@ -218,7 +218,7 @@ const CollectionTable: React.FC<CollectionTableProps> = ({
         flexShrink: 0
       },
       omit: simplified,
-      width: '100px',
+      width: '88px',
       // eslint-disable-next-line react/display-name
       cell: (row: VersionInfo) => (
         <div className='mx-auto text-qrigray-400'>
@@ -230,19 +230,16 @@ const CollectionTable: React.FC<CollectionTableProps> = ({
     },
     {
       name: '',
-      style: {
-        flexShrink: 0
-      },
       omit: simplified,
-      width: '60px',
+      width: '10px',
       // eslint-disable-next-line react/display-name
       cell: (row: VersionInfo, i: number) => {
         const isLastRow = (i === (filteredWorkflows.length - 1) && filteredWorkflows.length !== 1)
         return (
-          <div className='mx-auto text-qrigray-400'>
+          <div className='mx-auto text-qrigray-400 flex items-center'>
             <DropdownMenu
               id={row.name}
-              icon={<Icon icon='more' />}
+              icon={<Icon icon='moreVertical' size='sm'/>}
               dropUp={isLastRow}
               oneItem={filteredWorkflows.length === 1}
               items={[

src/features/commits/CommitSummaryHeader.tsx

@@ -23,7 +23,7 @@ const CommitSummaryHeader: React.FC<CommitSummaryHeaderProps> = ({
 
   return (
     <div className='min-height-200 py-4 px-8 rounded-lg bg-white flex'>
-      <div className='commit_summary_header_container'>
+      <div className='commit_summary_header_container flex-shrink overflow-ellipsis min-w-0 pr-3'>
         { loading
           ? <>
             <div className='text-sm text-qrigray-400 font-semibold mb-2'>Version Info</div>
@@ -39,7 +39,7 @@ const CommitSummaryHeader: React.FC<CommitSummaryHeaderProps> = ({
           </>
           }
       </div>
-      <div className='flex-grow flex items-center justify-end'>
+      <div className='flex-grow flex-shrink-0 flex items-center justify-end'>
         {children}
       </div>
     </div>

src/features/commits/DatasetCommitList.tsx

@@ -50,21 +50,23 @@ const DatasetCommits: React.FC<DatasetCommitsProps> = ({
           <HistorySearchBox />
           {editable && <NewVersionButton qriRef={qriRef} />}
         */}
+
+        {userCanEditDataset && (
         <li className='flex items-stretch text-black tracking-wider'>
           <div className='relative w-4 mr-5 flex-shrink-0'>
             <div className={classNames('absolute top-2.5 w-4 h-4 rounded-3xl border border-qritile-600')}>&nbsp;</div>
             <div className='relative line-container w-0.5 mx-auto h-full'>
               <div className='absolute -bottom-2 w-full h-11 bg-gray-300 rounded'>&nbsp;</div>
             </div>
           </div>
-          {userCanEditDataset && (
-            <div className='w-full'>
-              <Link to={`/${qriRef.username}/${qriRef.name}/edit`}>
-                <Button className='mb-6' block disabled={loading || (commits.length ? path !== commits[0].path : false)} type='primary-outline' icon='edit'>Edit</Button>
-              </Link>
-            </div>
-          )}
+          <div className='w-full'>
+            <Link to={`/${qriRef.username}/${qriRef.name}/edit`}>
+              <Button className='mb-6' block disabled={loading || (commits.length ? path !== commits[0].path : false)} type='primary-outline' icon='edit'>Edit</Button>
+            </Link>
+          </div>
         </li>
+        )}
+
         {loading
           ? Array(3).fill('').map((_, i) => (
             <DatasetCommitListItem

src/features/datasetEditor/DatasetEditorLayout.tsx

@@ -23,6 +23,7 @@ interface DatasetEditorLayoutProps {
   onCommitTitleChange: (commitTitle: string) => void
   onCommit: () => void
   onClose?: () => void
+  commitButtonDisabled?: boolean
 }
 
 const DatasetEditorLayout: React.FC<DatasetEditorLayoutProps> = ({
@@ -37,7 +38,8 @@ const DatasetEditorLayout: React.FC<DatasetEditorLayoutProps> = ({
   onTitleChange,
   onCommitTitleChange,
   onCommit,
-  onClose
+  onClose,
+  commitButtonDisabled = false
 }) => {
   // used to parse the selected tab
   const qriRef = newQriRef(refParamsFromLocation(useParams(), useLocation()))
@@ -60,7 +62,7 @@ const DatasetEditorLayout: React.FC<DatasetEditorLayoutProps> = ({
         >
           <IconLink icon='close' size='lg' className='pb-6' onClick={handleCloseClick} />
         </DatasetHeaderLayout>
-        <div className='flex flex-grow'>
+        <div className='flex flex-grow min-h-0'>
           <TabbedComponentViewer
             preview
             showLoadingState={false}
@@ -76,6 +78,7 @@ const DatasetEditorLayout: React.FC<DatasetEditorLayoutProps> = ({
         commitTitle={commitTitle}
         onCommitTitleChange={onCommitTitleChange}
         onCommit={onCommit}
+        disabled={commitButtonDisabled}
       />}
     </div>
   )

src/features/datasetEditor/ExistingDatasetEditor.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react"
 import { useHistory } from 'react-router'
 import { useDispatch, useSelector } from "react-redux"
+import { useLocation } from 'react-router-dom'
 
 import DatasetEditorLayout from './DatasetEditorLayout'
 import { loadDataset } from '../dataset/state/datasetActions'
@@ -16,11 +17,12 @@ import { newQriRef } from '../../qri/ref'
 import { NewDataset } from '../../qri/dataset'
 import Head from '../app/Head'
 
-const DEFAULT_DATASET_COMMIT_TITLE = 'manually updated dataset'
+const DEFAULT_DATASET_COMMIT_TITLE = ''
 
 const ExistingDatasetEditor: React.FC<{}> = () => {
   const dispatch = useDispatch()
   const history = useHistory()
+  const location = useLocation()
 
   const dataset = useSelector(selectDatasetEditorDataset)
   const isLoading = useSelector(selectDatasetEditorLoading)
@@ -56,6 +58,15 @@ const ExistingDatasetEditor: React.FC<{}> = () => {
     <>Edit your dataset here and press Commit</>
   )
 
+  let commitButtonDisabled = false
+
+  if (commitTitle === DEFAULT_DATASET_COMMIT_TITLE) {
+    commitBarContent = (
+      <>Enter a message to commit your changes</>
+    )
+    commitButtonDisabled = true
+  }
+
   if (error) {
     commitBarContent = (
       <span className='text-warningyellow'>{error}</span>
@@ -67,7 +78,7 @@ const ExistingDatasetEditor: React.FC<{}> = () => {
   }
 
   const handleClose = () => {
-    history.push(`/${dataset.username}/${dataset.name}/history`)
+    history.push(`/${dataset.username}/${dataset.name}/history${location.hash}`)
   }
 
   return (
@@ -86,6 +97,7 @@ const ExistingDatasetEditor: React.FC<{}> = () => {
         onCommitTitleChange={(commitTitle: string) => { setCommitTitle(commitTitle) }}
         onCommit={handleCommit}
         onClose={handleClose}
+        commitButtonDisabled={commitButtonDisabled}
       />
     </>
   )

src/features/download/DownloadDatasetButton.tsx

@@ -50,7 +50,7 @@ const DownloadDatasetButton: React.FC<DownloadDatasetButtonProps> = ({
     if (user.username === 'new') {
       return <IconLink title={title} icon='download' onClick={handleDownloadClick} />
     } else {
-      return <IconLink title={title} icon='download' link={downloadLink} onClick={() => {
+      return <IconLink title={title} icon='download' to={downloadLink} onClick={() => {
         // preview-download-body
         trackGoal('MUBGTLL9', 0)
       }} />

src/features/dsComponents/DatasetComponent.tsx

@@ -118,20 +118,33 @@ const DatasetComponent: React.FC<DatasetComponentProps> = ({
       {component}
     </div>
   )
+  let componentHeaderBorder = true
+  let overflowScroll = true
 
   // exclude the default padding for some components
   if (['body', 'structure', 'transform'].includes(componentName)) {
     componentContent = component
+    componentHeaderBorder = false
+  }
+
+  // no padding on readme editor
+  if (editor && (componentName === 'readme')) {
+    componentContent = component
+    componentHeaderBorder = false
+    overflowScroll = false
   }
 
   return (
     <div
       className={classNames('rounded-md bg-white h-full w-full overflow-auto rounded-tl-none rounded-tr-none flex flex-col pb-4', {})}
     >
-      <ComponentHeader border={!['body', 'structure', 'transform'].includes(componentName)}>
+      <ComponentHeader border={componentHeaderBorder}>
         {componentHeader}
       </ComponentHeader>
-      <div className='overflow-auto flex-grow'>
+      <div className={classNames({
+        'flex-grow overflow-auto': overflowScroll,
+        'h-full overflow-hidden': !overflowScroll
+      })}>
         {componentContent}
       </div>