fix(commit, MetadataEditor): fix meta editing and the flow after you …

…commit (#394)

* fix(commit, MetadataEditor): fix meta editing and the flow after you commit

Adjust the `saveWorkingDatasetAndFetch` and `Commit` components, along with the `mutations` reducer and actions to fix the flow after you commit.

We need to wait for both the commit to be successful and for the history list to update, inorder to show the user a clean commit experience. To do that, we've added a `saveComplete`/`SAVE_COMPLETE` action to the `mutations` reducer that gets called when save & history fetching is complete

Also adjusts the MetadataEditor to fix a content jumping problem

* fix(setWorkingDataset): don't clear workingDataset when setWorkingDataset is called
Also adds an e2e test to confirm behavior

RELEASE_PROCESS.md

@@ -23,4 +23,5 @@ This will only work if you are internal to Qri and have the correct keys
     - app-builder is modifying the contents of the zip, which is messing up the notarization. The -o flag indicates an output file that app-builder can futz with without ruining the integrity of the original app
   - take the updated file into from size, sha512 and blockMapSize
   - update the `/release/latest-mac.yml` with that info
-  - replace `FILENAME.zip` to the release page
+  - replace `FILENAME.zip` to the release page
+12) **remember to change website link give details of where here** 

app/actions/api.ts

@@ -6,6 +6,7 @@ import { CALL_API, ApiAction, ApiActionThunk, chainSuccess } from '../store/api'
 import { SelectedComponent, MyDatasets } from '../models/store'
 import { actionWithPagination } from '../utils/pagination'
 import { openToast, setImportFileDetails } from './ui'
+import { setSaveComplete } from './mutations'
 import { setWorkingDataset, setSelectedListItem, setActiveTab, clearSelection } from './selections'
 import {
   mapDataset,
@@ -443,18 +444,23 @@ export function saveWorkingDatasetAndFetch (): ApiActionThunk {
   return async (dispatch, getState) => {
     const whenOk = chainSuccess(dispatch, getState)
     let response: Action
-
+    let path: string
     try {
       response = await saveWorkingDataset()(dispatch, getState)
-      const path = response.payload.data.dataset.path
+      path = response.payload.data.path
       response = await whenOk(fetchWorkingDatasetDetails())(response)
-      dispatch(setSelectedListItem('commit', path))
-      dispatch(setActiveTab('history'))
-      dispatch(setSelectedListItem('commitComponent', DEFAULT_SELECTED_COMPONENT))
     } catch (action) {
+      dispatch(setSaveComplete(action.payload.err.message))
       dispatch(openToast('error', 'commit', action.payload.err.message))
       throw action
     }
+    if (getActionType(response) === 'success') {
+      dispatch(setSaveComplete())
+      dispatch(openToast('success', 'commit', 'commit success!'))
+      dispatch(setSelectedListItem('commit', path))
+      dispatch(setActiveTab('history'))
+      dispatch(setSelectedListItem('commitComponent', DEFAULT_SELECTED_COMPONENT))
+    }
     return response
   }
 }

app/actions/mutations.ts

@@ -1,6 +1,7 @@
 import {
   SET_COMMIT_TITLE,
-  SET_COMMIT_MESSAGE
+  SET_COMMIT_MESSAGE,
+  SAVE_COMPLETE
 } from '../reducers/mutations'
 
 export function setCommitTitle (title: string) {
@@ -16,3 +17,10 @@ export function setCommitMessage (message: string) {
     message
   }
 }
+
+export function setSaveComplete (error?: string) {
+  return {
+    type: SAVE_COMPLETE,
+    error
+  }
+}

app/components/Body.tsx

@@ -3,8 +3,8 @@ import * as React from 'react'
 import BodyTable from './BodyTable'
 import BodyJson from './BodyJson'
 import { ApiAction } from '../store/api'
+import { Structure } from '../models/dataset'
 
-import Spinner from './chrome/Spinner'
 import { PageInfo, WorkingDataset } from '../models/store'
 import { Action } from 'redux'
 import { DetailsType, Details, StatsDetails } from '../models/details'
@@ -15,6 +15,7 @@ export interface BodyProps {
   name: string
   path: string
   value: any[]
+  structure: Structure
   pageInfo: PageInfo
   history: boolean
   format: string
@@ -35,13 +36,12 @@ export interface Header {
   type: string
 }
 
-const extractColumnHeaders = (workingDataset: WorkingDataset): undefined | object => {
-  const structure = workingDataset.components.structure.value
+const extractColumnHeaders = (structure: any, value: any): undefined | object => {
   const schema = structure.schema
 
   if (!schema) {
     // iterate over first row of body
-    const firstRow = workingDataset.components.body.value && workingDataset.components.body.value[0]
+    const firstRow = value && value[0]
     if (!firstRow) return undefined
 
     // need to take a slice from index 1 because we have mutated the
@@ -63,22 +63,19 @@ const Body: React.FunctionComponent<BodyProps> = (props) => {
   const {
     value,
     pageInfo,
-    workingDataset,
     history,
     fetchBody,
     format,
     fetchCommitBody,
     details,
     setDetailsBar,
-    stats
+    stats,
+    structure
   } = props
 
   const onFetch = history ? fetchCommitBody : fetchBody
 
-  const headers = extractColumnHeaders(workingDataset)
-
-  // if there's no value or format, don't show anything yet
-  const showSpinner = !(value && format)
+  const headers = extractColumnHeaders(structure, value)
 
   const makeStatsDetails = (stats: {[key: string]: any}, title: string, index: number): StatsDetails => {
     return {
@@ -110,31 +107,20 @@ const Body: React.FunctionComponent<BodyProps> = (props) => {
 
   return (
     <div className='transition-group'>
-      <>
-        { showSpinner &&
-          <div className='spinner-container'>
-            <Spinner />
-          </div>
-        }
-        { !showSpinner &&
-          <>
-            {shouldDisplayTable(value, format)
-              ? <BodyTable
-                headers={headers}
-                body={value}
-                pageInfo={pageInfo}
-                highlighedColumnIndex={details.type !== DetailsType.NoDetails ? details.index : undefined}
-                onFetch={onFetch}
-                setDetailsBar={handleToggleDetailsBar}
-              />
-              : <BodyJson
-                body={value}
-                pageInfo={pageInfo}
-              />
-            }
-          </>
-        }
-      </>
+      {shouldDisplayTable(value, format)
+        ? <BodyTable
+          headers={headers}
+          body={value}
+          pageInfo={pageInfo}
+          highlighedColumnIndex={details.type !== DetailsType.NoDetails ? details.index : undefined}
+          onFetch={onFetch}
+          setDetailsBar={handleToggleDetailsBar}
+        />
+        : <BodyJson
+          body={value}
+          pageInfo={pageInfo}
+        />
+      }
     </div>
   )
 }

app/components/Commit.tsx

@@ -91,7 +91,7 @@ const Commit: React.FunctionComponent<CommitProps> = (props: CommitProps) => {
         <div className='submit'>
           {
             isLoading
-              ? <button className='sync-spinner btn btn-primary'><FontAwesomeIcon icon={faSync} /> Saving...</button>
+              ? <button className='sync-spinner btn btn-large btn-primary'><FontAwesomeIcon icon={faSync} /> Saving...</button>
               : <button id='submit' className={classNames('btn btn-primary btn-large', { 'disabled': !isValid })} type='submit'>Commit</button>
           }
         </div>

app/components/DatasetList.tsx

@@ -193,7 +193,7 @@ class DatasetList extends React.Component<DatasetListProps> {
 
         return (<ContextMenuArea menuItems={menuItems} key={`${peername}/${name}`}>
           <div
-            id={`${peername}/${name}`}
+            id={`${peername}-${name}`}
             key={`${peername}/${name}`}
             className={classNames('sidebar-list-item', 'sidebar-list-item-text', {
               'selected': (peername === workingDataset.peername) && (name === workingDataset.name)

app/components/MetadataEditor.tsx

@@ -82,12 +82,6 @@ const MetadataEditor: React.FunctionComponent<MetadataEditorProps> = (props: Met
   const [stateMeta, setStateMeta] = React.useState(meta)
   const [previousMeta, setPreviousMeta] = React.useState(meta)
 
-  // when new meta comes from above, reset local state
-  React.useEffect(() => {
-    setStateMeta(meta)
-    setPreviousMeta(meta)
-  }, [meta])
-
   if (!meta) {
     return <SpinnerWithIcon loading={true} />
   }

app/components/modals/LinkDataset.tsx

@@ -100,7 +100,7 @@ const LinkDataset: React.FunctionComponent<LinkDatasetProps> = ({ peername, name
 
   return (
     <Modal
-      id="remove-dataset"
+      id="checkout-dataset"
       title={`Checkout ${peername}/${name}`}
       onDismissed={onDismissed}
       onSubmit={() => {}}

app/containers/BodyContainer.tsx

@@ -17,7 +17,7 @@ const mapStateToProps = (state: Store) => {
 
   var format = ''
   if (history) {
-    format = workingDataset.components.structure.value.format
+    format = dataset.components.structure.value.format
   } else {
     format = state.workingDataset.status && state.workingDataset.status.body && state.workingDataset.status.body.filepath
       ? path.extname(state.workingDataset.status.body.filepath).slice(1)
@@ -36,7 +36,6 @@ const mapStateToProps = (state: Store) => {
     format,
     history,
     details,
-    workingDataset,
     stats
   }
 }

app/containers/CommitContainer.tsx

@@ -13,7 +13,7 @@ const mapStateToProps = (state: Store) => {
 
   // get data for the currently selected component
   return {
-    isLoading: false,
+    isLoading: mutations.save.isLoading,
     datasetRef: `${peername}/${name}`,
     title,
     message,

app/containers/CommitDetailsContainer.tsx

@@ -6,7 +6,7 @@ import { setSelectedListItem } from '../actions/selections'
 import { fetchCommitDetail } from '../actions/api'
 
 const mapStateToProps = (state: Store) => {
-  const { workingDataset, selections, commitDetails } = state
+  const { selections, commitDetails } = state
 
   const {
     peername,
@@ -15,18 +15,15 @@ const mapStateToProps = (state: Store) => {
     commitComponent: selectedComponent
   } = selections
 
-  // find the currently selected commit
-  const selectedCommit = workingDataset.history.value
-    .find(d => d.path === selectedCommitPath)
-
   return {
     peername,
     name,
     selectedCommitPath: selectedCommitPath,
-    commit: selectedCommit,
+    commit: commitDetails.components.commit.value,
     selectedComponent,
     commitDetails,
-    structure: commitDetails.components.structure.value
+    structure: commitDetails.components.structure.value,
+    isLoading: commitDetails.isLoading
   }
 }
 

app/reducers/mutations.ts

@@ -13,7 +13,8 @@ const initialState: Mutations = {
   }
 }
 
-export const [SAVE_REQ, SAVE_SUCC, SAVE_FAIL] = apiActionTypes('save')
+export const [SAVE_REQ] = apiActionTypes('save')
+export const SAVE_COMPLETE = 'SAVE_COMPLETE'
 export const SET_COMMIT_TITLE = 'SET_COMMIT_TITLE'
 export const SET_COMMIT_MESSAGE = 'SET_COMMIT_MESSAGE'
 
@@ -50,22 +51,15 @@ const mutationsReducer: Reducer = (state = initialState, action: AnyAction): Mut
           error: null
         }
       }
-    case SAVE_SUCC:
-      return {
-        ...state,
-        save: {
-          value: initialState.save.value,
-          isLoading: false,
-          error: null
-        }
-      }
-    case SAVE_FAIL:
+
+    case SAVE_COMPLETE:
       return {
         ...state,
         save: {
           ...state.save,
           isLoading: false,
-          error: action.payload.err
+          error: action.err,
+          value: initialState.save.value
         }
       }
 

app/reducers/selections.ts

@@ -93,6 +93,8 @@ export default (state = initialState, action: AnyAction) => {
     case SELECTIONS_SET_WORKING_DATASET:
       const { peername, name } = action.payload
 
+      if (peername === state.peername && name === state.name) return state
+
       localStore().setItem('peername', peername)
       localStore().setItem('name', name)
       localStore().setItem('commit', '')

app/reducers/ui.ts

@@ -3,7 +3,6 @@ import { ipcRenderer } from 'electron'
 
 import store from '../utils/localStore'
 import { apiActionTypes } from '../utils/actionType'
-import { SAVE_SUCC, SAVE_FAIL } from '../reducers/mutations'
 import { ModalType } from '../models/modals'
 import { DetailsType } from '../models/details'
 import {
@@ -146,27 +145,6 @@ export default (state = initialState, action: AnyAction) => {
         detailsBar: { type: DetailsType.NoDetails }
       }
 
-    // listen for SAVE_SUCC and SAVE_FAIL to set the toast
-    case SAVE_SUCC:
-      return {
-        ...state,
-        toast: {
-          type: 'success',
-          message: 'Commit Successful!',
-          visible: true
-        }
-      }
-
-    case SAVE_FAIL:
-      return {
-        ...state,
-        toast: {
-          type: 'error',
-          message: 'Oops, something went wrong with this commit',
-          visible: true
-        }
-      }
-
     case UI_SIGNOUT:
       store().setItem('qriCloudAuthenticated', 'false')
       return {

app/reducers/workingDataset.ts

@@ -7,8 +7,7 @@ import { ipcRenderer } from 'electron'
 import bodyValue from '../utils/bodyValue'
 
 import {
-  REMOVE_SUCC,
-  SELECTIONS_SET_WORKING_DATASET
+  REMOVE_SUCC
 } from './selections'
 
 const initialState: WorkingDataset = {
@@ -270,9 +269,6 @@ const workingDatasetsReducer: Reducer = (state = initialState, action: AnyAction
         stats: []
       }
 
-    case SELECTIONS_SET_WORKING_DATASET:
-      return initialState
-
     case RENAME_SUCC:
       return {
         ...state,