Two Schemas for workflows/config.yaml, package validation, default package name

catalog/app/containers/Bucket/PackageCopyDialog.js

@@ -81,7 +81,7 @@ function DialogForm({
   validate: validateMetaInput,
   workflowsConfig,
 }) {
-  const nameValidator = PD.useNameValidator()
+  const nameValidator = PD.useNameValidator(selectedWorkflow)
   const nameExistence = PD.useNameExistence(successor.slug)
   const [nameWarning, setNameWarning] = React.useState('')
   const [metaHeight, setMetaHeight] = React.useState(0)
@@ -142,14 +142,18 @@ function DialogForm({
   const [editorElement, setEditorElement] = React.useState()
 
   const onFormChange = React.useCallback(
-    async ({ values }) => {
+    async ({ modified, values }) => {
       if (document.body.contains(editorElement)) {
         setMetaHeight(editorElement.clientHeight)
       }
 
+      if (modified.workflow && values.workflow !== selectedWorkflow) {
+        setWorkflow(values.workflow)
+      }
+
       handleNameChange(values.name)
     },
-    [editorElement, handleNameChange, setMetaHeight],
+    [editorElement, handleNameChange, selectedWorkflow, setMetaHeight, setWorkflow],
   )
 
   React.useEffect(() => {
@@ -212,6 +216,7 @@ function DialogForm({
               <RF.Field
                 component={PD.PackageNameInput}
                 name="name"
+                workflow={selectedWorkflow || workflowsConfig}
                 validate={validators.composeAsync(
                   validators.required,
                   nameValidator.validate,
@@ -220,6 +225,7 @@ function DialogForm({
                 errors={{
                   required: 'Enter a package name',
                   invalid: 'Invalid package name',
+                  pattern: `Name should match ${selectedWorkflow?.packageNamePattern}`,
                 }}
                 helperText={nameWarning}
                 initialValue={initialName}

catalog/app/containers/Bucket/PackageCreateDialog.tsx

@@ -1,8 +1,6 @@
 import * as R from 'ramda'
 import * as React from 'react'
-import * as redux from 'react-redux'
 
-import * as authSelectors from 'containers/Auth/selectors'
 import * as AWS from 'utils/AWS'
 import AsyncResult from 'utils/AsyncResult'
 import * as BucketPreferences from 'utils/BucketPreferences'
@@ -40,15 +38,11 @@ export function usePackageCreateDialog({
     _: R.identity,
   })
 
-  const username = redux.useSelector(authSelectors.username)
-  const usernamePrefix = React.useMemo(() => PD.getUsernamePrefix(username), [username])
-
   return PD.usePackageCreationDialog({
     bucket,
     data,
     delayHashing: true,
     disableStateDisplay: true,
-    name: usernamePrefix,
     onExited,
     ui: {
       successTitle: 'Package created',

catalog/app/containers/Bucket/PackageDialog/MetaInputErrorHelper.js

@@ -18,9 +18,9 @@ function SingleError({ error }) {
 
   return (
     <Lab.Alert severity="error">
-      {error.dataPath && (
+      {error.instancePath && (
         <>
-          <code className={classes.code}>{error.dataPath}</code>
+          <code className={classes.code}>{error.instancePath}</code>
         </>
       )}
       {error.message}
@@ -34,7 +34,7 @@ export default function ErrorHelper({ className, error }) {
   return (
     <div className={className}>
       {Array.isArray(error) ? (
-        error.map((e) => <SingleError error={e} key={e.dataPath + e.message} />)
+        error.map((e) => <SingleError error={e} key={e.instancePath + e.message} />)
       ) : (
         <SingleError error={error} />
       )}

catalog/app/containers/Bucket/PackageDialog/PackageCreationForm.tsx

@@ -1,3 +1,5 @@
+import type { ErrorObject } from 'ajv'
+import cx from 'classnames'
 import * as FF from 'final-form'
 import * as FP from 'fp-ts'
 import * as R from 'ramda'
@@ -18,6 +20,7 @@ import DialogLoading from './DialogLoading'
 import DialogSuccess, { DialogSuccessRenderMessageProps } from './DialogSuccess'
 import * as FI from './FilesInput'
 import * as Layout from './Layout'
+import MetaInputErrorHelper from './MetaInputErrorHelper'
 import * as PD from './PackageDialog'
 import { isS3File, S3File } from './S3FilePicker'
 import { FormSkeleton, MetaInputSkeleton } from './Skeleton'
@@ -56,6 +59,14 @@ const useStyles = M.makeStyles((t) => ({
   files: {
     height: '100%',
   },
+  filesWithError: {
+    height: `calc(90% - ${t.spacing()}px)`,
+  },
+  filesError: {
+    marginTop: t.spacing(),
+    maxHeight: t.spacing(9),
+    overflowY: 'auto',
+  },
   form: {
     height: '100%',
   },
@@ -106,14 +117,18 @@ export function PackageCreationForm({
   disableStateDisplay,
   ui = {},
 }: PackageCreationFormProps & PD.SchemaFetcherRenderProps) {
-  const nameValidator = PD.useNameValidator()
+  const nameValidator = PD.useNameValidator(selectedWorkflow)
   const nameExistence = PD.useNameExistence(bucket)
   const [nameWarning, setNameWarning] = React.useState<React.ReactNode>('')
   const [metaHeight, setMetaHeight] = React.useState(0)
   const classes = useStyles()
   const dialogContentClasses = PD.useContentStyles({ metaHeight })
   const validateWorkflow = PD.useWorkflowValidator(workflowsConfig)
 
+  const [entriesError, setEntriesError] = React.useState<(Error | ErrorObject)[] | null>(
+    null,
+  )
+
   const [selectedBucket, selectBucket] = React.useState(sourceBuckets.getDefault)
 
   const existingEntries = initial?.manifest?.entries ?? EMPTY_MANIFEST_ENTRIES
@@ -137,6 +152,7 @@ export function PackageCreationForm({
   )
 
   const createPackage = requests.useCreatePackage()
+  const validateEntries = PD.useEntriesValidator(selectedWorkflow)
 
   const onSubmit = async ({
     name,
@@ -167,6 +183,24 @@ export function PackageCreationForm({
       return !e || e.hash !== file.hash.value
     })
 
+    const entries = FP.function.pipe(
+      R.mergeLeft(files.added, files.existing),
+      R.omit(Object.keys(files.deleted)),
+      Object.entries,
+      R.map(([path, file]) => ({
+        logical_key: path,
+        size: file.size,
+      })),
+    )
+
+    const error = await validateEntries(entries)
+    if (error && error.length) {
+      setEntriesError(error)
+      return {
+        files: 'schema',
+      }
+    }
+
     let uploadedEntries
     try {
       uploadedEntries = await uploads.upload({
@@ -230,7 +264,7 @@ export function PackageCreationForm({
       // eslint-disable-next-line no-console
       console.log('error creating manifest', e)
       // TODO: handle specific cases?
-      const errorMessage = e instanceof Error ? e.message : null
+      const errorMessage = e instanceof Error ? (e as Error).message : null
       return { [FF.FORM_ERROR]: errorMessage || PD.ERROR_MESSAGES.MANIFEST }
     }
   }
@@ -269,6 +303,7 @@ export function PackageCreationForm({
   const onFormChange = React.useCallback(
     async ({ dirtyFields, values }) => {
       if (dirtyFields?.name) handleNameChange(values.name)
+      if (dirtyFields?.files) setEntriesError(null)
     },
     [handleNameChange],
   )
@@ -328,7 +363,7 @@ export function PackageCreationForm({
               <RF.FormSpy
                 subscription={{ modified: true, values: true }}
                 onChange={({ modified, values }) => {
-                  if (modified!.workflow) {
+                  if (modified!.workflow && values.workflow !== selectedWorkflow) {
                     setWorkflow(values.workflow)
                   }
                 }}
@@ -354,6 +389,7 @@ export function PackageCreationForm({
 
                   <RF.Field
                     component={PD.PackageNameInput}
+                    workflow={selectedWorkflow || workflowsConfig}
                     initialValue={initial?.name}
                     name="name"
                     validate={validators.composeAsync(
@@ -364,6 +400,7 @@ export function PackageCreationForm({
                     errors={{
                       required: 'Enter a package name',
                       invalid: 'Invalid package name',
+                      pattern: `Name should match ${selectedWorkflow?.packageNamePattern}`,
                     }}
                     helperText={nameWarning}
                     validating={nameValidator.processing}
@@ -400,14 +437,17 @@ export function PackageCreationForm({
 
                 <Layout.RightColumn>
                   <RF.Field
-                    className={classes.files}
+                    className={cx(classes.files, {
+                      [classes.filesWithError]: !!entriesError,
+                    })}
                     // @ts-expect-error
                     component={FI.FilesInput}
                     name="files"
                     validate={validateFiles as FF.FieldValidator<$TSFixMe>}
                     validateFields={['files']}
                     errors={{
                       nonEmpty: 'Add files to create a package',
+                      schema: 'Files should match schema',
                       [FI.HASHING]: 'Please wait while we hash the files',
                       [FI.HASHING_ERROR]:
                         'Error hashing files, probably some of them are too large. Please try again or contact support.',
@@ -424,6 +464,11 @@ export function PackageCreationForm({
                     disableStateDisplay={disableStateDisplay}
                     ui={{ reset: ui.resetFiles }}
                   />
+
+                  <MetaInputErrorHelper
+                    className={classes.filesError}
+                    error={entriesError}
+                  />
                 </Layout.RightColumn>
               </Layout.Container>
 

catalog/app/containers/Bucket/PackageDialog/PackageDialog.spec.ts

@@ -55,7 +55,7 @@ describe('containers/Bucket/PackageDialog/PackageDialog', () => {
 
     test("should return error when metadata isn't compliant with Schema", () => {
       expect(PD.mkMetaValidator({ type: 'array' })({ any: 'thing' })).toMatchObject([
-        { message: 'should be array' },
+        { message: 'must be array' },
       ])
     })