feat(protocol-designer): implement "metadata.created" in JSON file (#…

…2403)

Closes #2189

protocol-designer/src/components/FilePage.js

@@ -8,13 +8,12 @@ import {
   OutlineButton,
   PrimaryButton,
 } from '@opentrons/components'
-import type {FileMetadataFields} from '../file-data'
 import type {FormConnector} from '../utils'
 import styles from './FilePage.css'
 import formStyles from '../components/forms.css'
 
 export type FilePageProps = {
-  formConnector: FormConnector<FileMetadataFields>,
+  formConnector: FormConnector<any>,
   isFormAltered: boolean,
   instruments: React.ElementProps<typeof InstrumentGroup>,
   goToDesignPage: () => mixed,
@@ -35,7 +34,7 @@ const FilePage = ({formConnector, isFormAltered, instruments, saveFileMetadata,
         <form onSubmit={handleSubmit} className={styles.card_content}>
           <div className={formStyles.row_wrapper}>
             <FormGroup label='Protocol Name:' className={formStyles.column_1_2}>
-              <InputField placeholder='Untitled' {...formConnector('name')} />
+              <InputField placeholder='Untitled' {...formConnector('protocol-name')} />
             </FormGroup>
 
             <FormGroup label='Organization/Author:' className={formStyles.column_1_2}>

protocol-designer/src/components/FileSidebar/ConnectedFileSidebar.js

@@ -22,7 +22,7 @@ type MP = {
 export default connect(mapStateToProps, null, mergeProps)(FileSidebar)
 
 function mapStateToProps (state: BaseState): SP & MP {
-  const protocolName = fileDataSelectors.fileMetadata(state).name || 'untitled'
+  const protocolName = fileDataSelectors.getFileMetadata(state)['protocol-name'] || 'untitled'
   const fileData = fileDataSelectors.createFile(state)
   const canDownload = selectors.currentPage(state) !== 'file-splash'
 

protocol-designer/src/containers/ConnectedFilePage.js

@@ -12,12 +12,12 @@ import {formConnectorFactory, type FormConnector} from '../utils'
 type SP = {
   instruments: $PropertyType<FilePageProps, 'instruments'>,
   isFormAltered: $PropertyType<FilePageProps, 'isFormAltered'>,
-  _values: {[accessor: FileMetadataFieldAccessors]: string},
+  _values: {[accessor: FileMetadataFieldAccessors]: any},
 }
 
 type DP = {
   _updateFileMetadataFields: typeof actions.updateFileMetadataFields,
-  _saveFileMetadata: ({[accessor: FileMetadataFieldAccessors]: string}) => mixed,
+  _saveFileMetadata: ({[accessor: FileMetadataFieldAccessors]: mixed}) => mixed,
   goToDesignPage: $PropertyType<FilePageProps, 'goToDesignPage'>,
   swapPipettes: $PropertyType<FilePageProps, 'swapPipettes'>,
 }
@@ -46,7 +46,7 @@ const mergeProps = (
   {_updateFileMetadataFields, _saveFileMetadata, goToDesignPage, swapPipettes}: DP
 ): FilePageProps => {
   const onChange = (accessor) => (e: SyntheticInputEvent<*>) => {
-    if (accessor === 'name' || accessor === 'description' || accessor === 'author') {
+    if (accessor === 'protocol-name' || accessor === 'description' || accessor === 'author') {
       _updateFileMetadataFields({[accessor]: e.target.value})
     } else {
       console.warn('Invalid accessor in ConnectedFilePage:', accessor)

protocol-designer/src/file-data/actions.js

@@ -1,12 +1,12 @@
 // @flow
 import type {FileMetadataFieldAccessors} from './types'
 
-export const updateFileMetadataFields = (payload: {[accessor: FileMetadataFieldAccessors]: string}) => ({
+export const updateFileMetadataFields = (payload: {[accessor: FileMetadataFieldAccessors]: mixed}) => ({
   type: 'UPDATE_FILE_METADATA_FIELDS',
   payload,
 })
 
-export const saveFileMetadata = (payload: {[accessor: FileMetadataFieldAccessors]: string}) => ({
+export const saveFileMetadata = (payload: {[accessor: FileMetadataFieldAccessors]: mixed}) => ({
   type: 'SAVE_FILE_METADATA',
   payload,
 })

protocol-designer/src/file-data/reducers/index.js

@@ -10,7 +10,7 @@ import type {FileMetadataFields} from '../types'
 import type {LoadFileAction, NewProtocolFields} from '../../load-file'
 
 const defaultFields = {
-  name: '',
+  'protocol-name': '',
   author: '',
   description: '',
 }
@@ -20,11 +20,7 @@ const updateMetadataFields = (
   action: LoadFileAction
 ): FileMetadataFields => {
   const {metadata} = action.payload
-  return {
-    author: metadata.author,
-    description: metadata.description,
-    name: metadata['protocol-name'],
-  }
+  return metadata
 }
 
 function newProtocolMetadata (
@@ -33,7 +29,8 @@ function newProtocolMetadata (
 ): FileMetadataFields {
   return {
     ...defaultFields,
-    name: action.payload.name || '',
+    'protocol-name': action.payload.name || '',
+    created: Date.now(),
   }
 }
 
@@ -57,6 +54,10 @@ const fileMetadata = handleActions({
     ...state,
     ...action.payload,
   }),
+  SAVE_PROTOCOL_FILE: (state: FileMetadataFields): FileMetadataFields => {
+    // NOTE: 'last-modified' is updated "on-demand", in response to user clicking "save/export"
+    return {...state, 'last-modified': Date.now()}
+  },
 }, defaultFields)
 
 export type RootState = {

protocol-designer/src/file-data/selectors/fileCreator.js

@@ -2,7 +2,7 @@
 import {createSelector} from 'reselect'
 import mapValues from 'lodash/mapValues'
 import {getPropertyAllPipettes} from '@opentrons/shared-data'
-import {fileMetadata} from './fileFields'
+import {getFileMetadata} from './fileFields'
 import {getInitialRobotState, robotStateTimeline} from './commands'
 import {selectors as dismissSelectors} from '../../dismiss'
 import {selectors as ingredSelectors} from '../../labware-ingred/reducers'
@@ -32,7 +32,7 @@ const executionDefaults = {
 }
 
 export const createFile: BaseState => ProtocolFile = createSelector(
-  fileMetadata,
+  getFileMetadata,
   getInitialRobotState,
   robotStateTimeline,
   dismissSelectors.getAllDismissedWarnings,
@@ -50,8 +50,9 @@ export const createFile: BaseState => ProtocolFile = createSelector(
     savedStepForms,
     orderedSteps
   ) => {
-    const {author, description} = fileMetadata
-    const name = fileMetadata.name || 'untitled'
+    const {author, description, created} = fileMetadata
+    const name = fileMetadata['protocol-name'] || 'untitled'
+    const lastModified = fileMetadata['last-modified']
 
     const instruments = mapValues(
       initialRobotState.instruments,
@@ -83,8 +84,10 @@ export const createFile: BaseState => ProtocolFile = createSelector(
         'protocol-name': name,
         author,
         description,
-        created: Date.now(),
-        'last-modified': null,
+        created,
+        'last-modified': lastModified,
+
+        // TODO LATER
         category: null,
         subcategory: null,
         tags: [],

protocol-designer/src/file-data/selectors/fileFields.js

@@ -16,8 +16,8 @@ export const isUnsavedMetadatFormAltered = createSelector(
   state => !isEqual(state.unsavedMetadataForm, state.fileMetadata)
 )
 
-export const protocolName = createSelector(rootSelector, state => state.fileMetadata.name)
-export const fileMetadata = createSelector(
+export const protocolName = createSelector(rootSelector, state => state.fileMetadata['protocol-name'])
+export const getFileMetadata = createSelector(
   rootSelector,
   state => state.fileMetadata
 )

protocol-designer/src/file-data/types.js

@@ -1,8 +1,5 @@
 // @flow
-export type FileMetadataFields = {
-  name: string,
-  author: string,
-  description: string,
-}
+import type {ProtocolFile} from '../file-types'
+export type FileMetadataFields = $PropertyType<ProtocolFile, 'metadata'>
 
 export type FileMetadataFieldAccessors = $Keys<FileMetadataFields>

protocol-designer/src/file-types.js

@@ -48,12 +48,12 @@ export type ProtocolFile = {
     'protocol-name': string,
     author: string,
     description: string,
-    created: MsSinceEpoch,
-    'last-modified': MsSinceEpoch | null,
+    created?: MsSinceEpoch,
+    'last-modified'?: MsSinceEpoch | null,
     // TODO LATER string enums for category/subcategory? Or just strings?
-    category: string | null,
-    subcategory: string | null,
-    tags: Array<string>,
+    category?: string | null,
+    subcategory?: string | null,
+    tags?: Array<string>,
   },
 
   'default-values': {