feat: add dataset rename

app/actions/api.ts

@@ -737,3 +737,33 @@ export function fetchReadmePreview (peername: string, name: string): ApiActionTh
  return dispatch(action)
  }
 }
+
+// peername and name are the dataset to be renamed
+// newName is the new dataset's name, which will be in the user's namespace
+export function renameDataset (peername: string, name: string, newName: string): ApiActionThunk {
+ return async (dispatch, getState) => {
+ const { peername: newPeername } = getState().session
+ const whenOk = chainSuccess(dispatch, getState)
+ const action = {
+ type: 'rename',
+ [CALL_API]: {
+ endpoint: 'rename',
+ method: 'POST',
+ body: {
+ current: `${peername}/${name}`,
+ new: `${newPeername}/${newName}`
+ }
+ }
+ }
+ let response: Action
+ try {
+ response = await dispatch(action)
+ response = await whenOk(fetchMyDatasets(-1))(response)
+ dispatch(openToast('success', `Dataset renamed`))
+ } catch (action) {
+ dispatch(openToast('error', action.payload.err.message))
+ throw action
+ }
+ return response
+ }
+}

app/components/Dataset.tsx

@@ -96,11 +96,6 @@ class Dataset extends React.Component<DatasetProps> {
  const { status } = workingDataset
  const { status: prevStatus } = prevProps.workingDataset
 
- if ((this.props.selections.peername !== prevProps.selections.peername) || (this.props.selections.name !== prevProps.selections.name)) {
- this.props.fetchWorkingDatasetDetails()
- return
- }
-
  if (status) {
  // create an array of components that need updating
  const componentsToReset: SelectedComponent[] = []
@@ -321,7 +316,7 @@ class Dataset extends React.Component<DatasetProps> {
  sidebarContent={sidebarContent}
  sidebarWidth={datasetSidebarWidth}
  onSidebarResize={(width) => { setSidebarWidth('dataset', width) }}
- maximumSidebarWidth={300}
+ maximumSidebarWidth={495}
  mainContent={mainContent}
  />
  </>

app/components/DatasetReference.tsx

@@ -0,0 +1,112 @@
+// a component that displays the dataset reference including edit-in-place UI
+// for dataset rename
+import * as React from 'react'
+import classNames from 'classnames'
+
+import { ApiActionThunk } from '../store/api'
+import { validateDatasetName } from '../utils/formValidation'
+
+interface DatasetReferenceProps {
+ peername: string
+ name: string
+ renameDataset: (peername: string, name: string, newName: string) => ApiActionThunk
+}
+
+const DatasetReference: React.FunctionComponent<DatasetReferenceProps> = (props) => {
+ const { peername, name, renameDataset } = props
+ const [ nameEditing, setNameEditing ] = React.useState(false)
+ const [ newName, setNewName ] = React.useState(name)
+ const [ inValid, setInvalid ] = React.useState(null)
+
+ const commitRename = (peername: string, name: string, newName: string) => {
+ // cancel if no change, change invalid, or empty
+ if ((name === newName) || inValid || newName === '') {
+ cancelRename()
+ } else {
+ renameDataset(peername, name, newName)
+ .then(() => {
+ setNameEditing(false)
+ })
+ }
+ }
+
+ const cancelRename = () => {
+ setNewName(name)
+ setInvalid(null)
+ setNameEditing(false)
+ }
+
+ const handleKeyDown = (e: any) => {
+ // cancel on esc
+ if (e.keyCode === 27) {
+ cancelRename()
+ }
+
+ // submit on enter or tab
+ if ((e.keyCode === 13) || (e.keyCode === 9)) {
+ commitRename(peername, name, newName)
+ }
+ }
+
+ // use a ref so we can set up a click handler
+ const nameRef: any = React.useRef(null)
+
+ const handleMousedown = (e: MouseEvent) => {
+ const { target } = e
+ // allows the user to resize the sidebar when editing the dataset name
+ if (target.classList.contains('resize-handle')) return
+
+ if (nameRef.current.isSameNode(target)) {
+ setNameEditing(true)
+ return
+ }
+
+ if (!nameRef.current.contains(target)) {
+ commitRename(peername, name, newName)
+ }
+ }
+
+ React.useEffect(() => {
+ document.addEventListener('keydown', handleKeyDown, false)
+ document.addEventListener('mousedown', handleMousedown, false)
+
+ return () => {
+ document.removeEventListener('keydown', handleKeyDown, false)
+ document.removeEventListener('mousedown', handleMousedown, false)
+ }
+ }, [ name, newName ])
+
+ const handleInputChange = (e: any) => {
+ let { value } = e.target
+ setInvalid(validateDatasetName(value))
+ setNewName(value)
+ }
+
+ // when the input is focused, scroll all the way to the left
+ const onFocus = () => {
+ const el = document.getElementById('dataset-name-input') as HTMLInputElement
+ el.scrollLeft = 0
+ }
+
+ return (
+ <div className='dataset-reference'>
+ <div className='dataset-peername'>{peername}/</div>
+ <div className='dataset-name' ref={nameRef}>
+ { nameEditing && <input
+ id='dataset-name-input'
+ className={classNames({ invalid: inValid })}
+ type='text'
+ value={newName}
+ maxLength={150}
+ onChange={handleInputChange}
+ autoFocus
+ onFocus={onFocus}
+ pattern='^[a-z0-9_]+$'
+ /> }
+ { !nameEditing && (<>{name}</>)}
+ </div>
+ </div>
+ )
+}
+
+export default DatasetReference

app/components/DatasetSidebar.tsx

@@ -7,6 +7,7 @@ import { faClock } from '@fortawesome/free-regular-svg-icons'
 
 import { ApiActionThunk } from '../store/api'
 import ComponentList from './ComponentList'
+import DatasetReference from './DatasetReference'
 
 import classNames from 'classnames'
 import Spinner from './chrome/Spinner'
@@ -71,6 +72,7 @@ export interface DatasetSidebarProps {
  fetchWorkingHistory: (page?: number, pageSize?: number) => ApiActionThunk
  discardChanges: (component: ComponentType) => ApiActionThunk
  setHideCommitNudge: () => Action
+ renameDataset: (peername: string, name: string, newName: string) => ApiActionThunk
 }
 
 const DatasetSidebar: React.FunctionComponent<DatasetSidebarProps> = (props) => {
@@ -81,7 +83,8 @@ const DatasetSidebar: React.FunctionComponent<DatasetSidebarProps> = (props) =>
  setSelectedListItem,
  fetchWorkingHistory,
  discardChanges,
- setModal
+ setModal,
+ renameDataset
  } = props
 
  const { fsiPath, history, status, structure } = workingDataset
@@ -118,7 +121,7 @@ const DatasetSidebar: React.FunctionComponent<DatasetSidebarProps> = (props) =>
  <div className='dataset-sidebar'>
  <div className='dataset-sidebar-header sidebar-padded-container'>
  <p className='pane-title'>Dataset</p>
- <p className='dataset-name'>{peername}/{name}</p>
+ <DatasetReference peername={peername} name={name} renameDataset={renameDataset}/>
  <DatasetDetailsSubtext format={format} lastCommit={lastCommit} commitCount={commitCount} />
  </div>
  <div id='tabs' className='sidebar-padded-container'>

app/containers/DatasetSidebarContainer.tsx

@@ -10,7 +10,8 @@ import {
 
 import {
  fetchWorkingHistory,
- discardChanges
+ discardChanges,
+ renameDataset
 } from '../actions/api'
 
 import {
@@ -49,7 +50,8 @@ const DatasetSidebarContainer = connect(
  setSelectedListItem,
  fetchWorkingHistory,
  discardChanges,
- setHideCommitNudge
+ setHideCommitNudge,
+ renameDataset
  },
  mergeProps
 )(DatasetSidebar)

app/reducers/selections.ts

@@ -32,6 +32,7 @@ export const [, UNPUBLISH_SUCC] = apiActionTypes('unpublish')
 export const [, SIGNIN_SUCC] = apiActionTypes('signin')
 export const [, SIGNUP_SUCC] = apiActionTypes('signup')
 export const [, , HISTORY_FAIL] = apiActionTypes('history')
+export const [, RENAME_SUCC] = apiActionTypes('rename')
 
 export default (state = initialState, action: AnyAction) => {
  switch (action.type) {
@@ -170,6 +171,13 @@ export default (state = initialState, action: AnyAction) => {
  activeTab: 'status'
  }
 
+ case RENAME_SUCC:
+ localStore().setItem('name', action.payload.data.name)
+ return {
+ ...state,
+ name: action.payload.data.name
+ }
+
  default:
  return state
  }

app/reducers/workingDataset.ts

@@ -57,6 +57,7 @@ export const [DATASET_STATUS_REQ, DATASET_STATUS_SUCC, DATASET_STATUS_FAIL] = ap
 const [DATASET_BODY_REQ, DATASET_BODY_SUCC, DATASET_BODY_FAIL] = apiActionTypes('body')
 const [, RESETOTHERCOMPONENTS_SUCC, RESETOTHERCOMPONENTS_FAIL] = apiActionTypes('resetOtherComponents')
 const [STATS_REQ, STATS_SUCC, STATS_FAIL] = apiActionTypes('stats')
+export const [, RENAME_SUCC] = apiActionTypes('rename')
 
 export const RESET_BODY = 'RESET_BODY'
 
@@ -274,6 +275,12 @@ const workingDatasetsReducer: Reducer = (state = initialState, action: AnyAction
  case SELECTIONS_SET_WORKING_DATASET:
  return initialState
 
+ case RENAME_SUCC:
+ return {
+ ...state,
+ name: action.payload.data.name
+ }
+
  default:
  return state
  }

app/scss/_dataset.scss

@@ -208,12 +208,37 @@ $header-font-size: .9rem;
  font-weight: 900;
  }
 
- .dataset-name {
+ .dataset-reference {
  font-size: 1.05rem;
+ display: flex;
+ }
+
+ .dataset-name {
+ flex: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
- display: block;
  overflow: hidden;
+
+ input {
+ background-color: #2f578c;
+ border: none;
+ border-radius: 5px;
+ color: #fff;
+ padding: 0 5px;
+ outline: none;
+ width: 100%;
+ transition: background 0.2s;
+
+ &.invalid {
+ background: #F43535;
+ }
+
+ }
+
+ &:hover {
+ cursor: pointer;
+ text-decoration: underline;
+ }
  }
  }
 
@@ -320,6 +345,13 @@ $header-font-size: .9rem;
  background-color: #38C629;
 }
 
+.edit-icon {
+ font-size: 0.75rem;
+ opacity: 0;
+ transition: opacity 0.1s;
+ color: $light-blue-accent;
+}
+
 
 ////////////////////////////
 // Commit Details //