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/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' },
       ])
     })
 

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

@@ -1,16 +1,20 @@
+import { basename } from 'path'
+
 import cx from 'classnames'
 import { FORM_ERROR } from 'final-form'
 import mime from 'mime-types'
 import * as R from 'ramda'
 import * as React from 'react'
 import { useDropzone } from 'react-dropzone'
 import type * as RF from 'react-final-form'
+import * as redux from 'react-redux'
 import * as M from '@material-ui/core'
 import { fade } from '@material-ui/core/styles'
 import * as Lab from '@material-ui/lab'
 
 import JsonEditor from 'components/JsonEditor'
 import { parseJSON, stringifyJSON } from 'components/JsonEditor/utils'
+import * as authSelectors from 'containers/Auth/selectors'
 import * as Notifications from 'containers/Notifications'
 import { useData } from 'utils/Data'
 import Delay from 'utils/Delay'
@@ -19,6 +23,8 @@ import * as AWS from 'utils/AWS'
 import * as Sentry from 'utils/Sentry'
 import useDragging from 'utils/dragging'
 import { JsonSchema, makeSchemaValidator } from 'utils/json-schema'
+import * as packageHandleUtils from 'utils/packageHandle'
+import * as s3paths from 'utils/s3paths'
 import * as spreadsheets from 'utils/spreadsheets'
 import { readableBytes } from 'utils/string'
 import * as workflows from 'utils/workflows'
@@ -127,7 +133,7 @@ const validateName = (req: ApiRequest) =>
     return undefined
   }, 200)
 
-export function useNameValidator() {
+export function useNameValidator(workflow?: workflows.Workflow) {
   const req: ApiRequest = APIConnector.use()
   const [counter, setCounter] = React.useState(0)
   const [processing, setProcessing] = React.useState(false)
@@ -137,6 +143,10 @@ export function useNameValidator() {
 
   const validate = React.useCallback(
     async (name: string) => {
+      if (workflow?.packageNamePattern?.test(name) === false) {
+        return 'pattern'
+      }
+
       setProcessing(true)
       try {
         const error = await validator(name)
@@ -148,7 +158,7 @@ export function useNameValidator() {
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [counter, validator],
+    [counter, validator, workflow?.packageNamePattern],
   )
 
   return React.useMemo(() => ({ validate, processing, inc }), [validate, processing, inc])
@@ -237,35 +247,64 @@ export function Field({
 interface PackageNameInputOwnProps {
   errors: Record<string, React.ReactNode>
   input: RF.FieldInputProps<string>
+  directory?: string
   meta: RF.FieldMetaState<string>
   validating: boolean
+  workflow: { packageName: packageHandleUtils.NameTemplates }
 }
 
 type PackageNameInputProps = PackageNameInputOwnProps &
   Omit<Parameters<typeof Field>[0], keyof PackageNameInputOwnProps>
 
 export function PackageNameInput({
   errors,
-  input,
+  input: { value, onChange },
   meta,
+  workflow,
+  directory,
   validating,
   ...rest
 }: PackageNameInputProps) {
-  const readyForValidation = (input.value && meta.modified) || meta.submitFailed
+  const readyForValidation = (value && meta.modified) || meta.submitFailed
   const errorCode = readyForValidation && meta.error
   const error = errorCode ? errors[errorCode] || errorCode : ''
+  const [modified, setModified] = React.useState(meta.modified)
+  const handleChange = React.useCallback(
+    (event) => {
+      setModified(true)
+      onChange(event)
+    },
+    [onChange, setModified],
+  )
   const props = {
     disabled: meta.submitting || meta.submitSucceeded,
     error,
     fullWidth: true,
     label: 'Name',
     margin: 'normal' as const,
+    onChange: handleChange,
     placeholder: 'e.g. user/package',
     // NOTE: react-form doesn't change `FormState.validating` on async validation when field loses focus
     validating,
-    ...input,
+    value,
     ...rest,
   }
+  const username = redux.useSelector(authSelectors.username)
+  React.useEffect(() => {
+    if (modified) return
+
+    const packageName = getDefaultPackageName(workflow, {
+      username,
+      directory,
+    })
+    if (!packageName) return
+
+    onChange({
+      target: {
+        value: packageName,
+      },
+    })
+  }, [directory, workflow, modified, onChange, username])
   return <Field {...props} />
 }
 
@@ -775,6 +814,18 @@ export function getUsernamePrefix(username?: string | null) {
   return validParts ? `${validParts.join('')}/` : ''
 }
 
+const getDefaultPackageName = (
+  workflow: { packageName: packageHandleUtils.NameTemplates },
+  { directory, username }: { directory?: string; username: string },
+) =>
+  directory
+    ? packageHandleUtils.execTemplate(workflow?.packageName, 'files', {
+        directory: basename(directory),
+      })
+    : packageHandleUtils.execTemplate(workflow?.packageName, 'packages', {
+        username: s3paths.ensureNoSlash(getUsernamePrefix(username)),
+      })
+
 const usePackageNameWarningStyles = M.makeStyles({
   root: {
     marginRight: '4px',
@@ -819,3 +870,20 @@ export function DialogWrapper({
   )
   return <M.Dialog {...props} />
 }
+
+export function useEntriesValidator(workflow?: workflows.Workflow) {
+  const s3 = AWS.S3.use()
+
+  return React.useCallback(
+    async (entries: $TSFixMe) => {
+      const schemaUrl = workflow?.entriesSchema
+      if (!schemaUrl) return undefined
+      const entriesSchema = await requests.objectSchema({ s3, schemaUrl })
+      // TODO: Show error if there is network error
+      if (!entriesSchema) return undefined
+
+      return makeSchemaValidator(entriesSchema)(entries)
+    },
+    [workflow, s3],
+  )
+}