Add README.md

catalog/app/components/FileEditor/FileEditor.tsx

@@ -23,7 +23,7 @@ function useRedirect() {
   const { add, next } = parseSearch(location.search, true)
   return React.useCallback(
     ({ bucket, key, size, version }: Model.S3File) => {
-      if (add) {
+      if (add && addToPackage?.append) {
         addToPackage.append({ bucket, key, size, version })
       }
       history.push(next || urls.bucketFile(bucket, key, { version }))
@@ -55,10 +55,10 @@ export function useState(handle: S3HandleBase): EditorState {
   const writeFile = useWriteData(handle)
   const redirect = useRedirect()
   const onSave = React.useCallback(async () => {
-    setSaving(true)
     // XXX: implement custom MUI Dialog-based confirm?
     // eslint-disable-next-line no-restricted-globals, no-alert
     if (!value && !window.confirm('You are about to save empty file')) return
+    setSaving(true)
     try {
       setError(null)
       const h = await writeFile(value || '')
@@ -67,9 +67,13 @@ export function useState(handle: S3HandleBase): EditorState {
       redirect(h)
     } catch (e) {
       setError(e instanceof Error ? e : new Error(`${e}`))
+      setSaving(false)
     }
   }, [redirect, value, writeFile])
-  const onCancel = React.useCallback(() => setEditing(false), [])
+  const onCancel = React.useCallback(() => {
+    setEditing(false)
+    setError(null)
+  }, [])
   const onEdit = React.useCallback(() => setEditing(true), [])
   return React.useMemo(
     () => ({

catalog/app/containers/AddToPackage/Provider.tsx

@@ -7,11 +7,9 @@ import type * as Model from 'model'
 
 const Ctx = React.createContext<{
   append: (file: Model.S3File) => void
+  clear: () => void
   entries: Record<string, Model.S3File>
-}>({
-  append: () => {},
-  entries: {},
-})
+} | null>(null)
 
 interface ProviderProps {
   children: React.ReactNode
@@ -26,7 +24,14 @@ export function Provider({ children }: ProviderProps) {
       }),
     )
   }, [])
-  return <Ctx.Provider value={{ entries, append }}>{children}</Ctx.Provider>
+  const clear = React.useCallback(() => setEntries({}), [])
+
+  const value = React.useMemo(
+    () => ({ append, clear, entries }),
+    [append, clear, entries],
+  )
+
+  return <Ctx.Provider value={value}>{children}</Ctx.Provider>
 }
 
 const useAddToPackage = () => React.useContext(Ctx)

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

@@ -339,6 +339,7 @@ function PackageCreationForm({
       }
       return await onSubmitWeb(args as SubmitWebArgs)
     } finally {
+      addToPackage?.clear()
       setSubmitting(false)
     }
   }

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

@@ -18,8 +18,7 @@ function clearActions(searchParams: URLSearchParams, history: H.History) {
 }
 
 function isActions(actions: string[]): actions is Action[] {
-  const unsupportedActions = actions.filter((a) => !Actions[a as Action])
-  return !unsupportedActions.length
+  return actions.every((a) => !!Actions[a as Action])
 }
 
 export default function useInitialActions(): Action[] {

catalog/app/containers/Bucket/Summary.js

@@ -1,4 +1,4 @@
-import { basename } from 'path'
+import path from 'path'
 
 import * as R from 'ramda'
 import * as React from 'react'
@@ -21,17 +21,18 @@ const useAddReadmeSectionStyles = M.makeStyles((t) => ({
   root: {
     display: 'flex',
     justifyContent: 'flex-end',
-    padding: t.spacing(2, 0),
+    margin: t.spacing(2, 0),
   },
 }))
 
 function AddReadmeSection({ packageHandle: { bucket, name } }) {
   const classes = useAddReadmeSectionStyles()
   const { urls } = NamedRoutes.use()
-  const next = urls.bucketPackageDetail(bucket, name)
+  const next = urls.bucketPackageDetail(bucket, name, { action: 'revisePackage' })
   const toConfig = urls.bucketFile(bucket, path.join(name, 'README.md'), {
-    next,
     add: true,
+    edit: true,
+    next,
   })
   return (
     <div className={classes.root}>
@@ -108,7 +109,7 @@ function SummaryItemFile({ handle, name, mkUrl }) {
     <Container>
       <Header>
         <StyledLink to={mkUrl(handle)}>
-          {name || basename(handle.logicalKey || handle.key)}
+          {name || path.basename(handle.logicalKey || handle.key)}
         </StyledLink>
       </Header>
       <M.CardContent>{withData(Preview.display({ renderContents }))}</M.CardContent>
@@ -170,8 +171,8 @@ function Thumbnails({ images, mkUrl }) {
                   <Thumbnail
                     handle={resolved}
                     className={classes.img}
-                    alt={basename(i.logicalKey || i.key)}
-                    title={basename(i.logicalKey || i.key)}
+                    alt={path.basename(i.logicalKey || i.key)}
+                    title={path.basename(i.logicalKey || i.key)}
                   />
                 ),
               })}
@@ -209,18 +210,16 @@ export default function BucketSummary({ files, mkUrl: mkUrlProp, packageHandle }
   )
   const { readme, images, summarize } = extractSummary(files)
 
-  const canAddReadme = false // !readme && !!packageHandle AND can open RevisePackage with url
-
   return (
     <>
       {readme && (
         <SummaryItemFile
-          title={basename(readme.logicalKey || readme.key)}
+          title={path.basename(readme.logicalKey || readme.key)}
           handle={readme}
           mkUrl={mkUrl}
         />
       )}
-      {canAddReadme && <AddReadmeSection packageHandle={packageHandle} />}
+      {!readme && !!packageHandle && <AddReadmeSection packageHandle={packageHandle} />}
       {!!images.length && <Thumbnails {...{ images, mkUrl }} />}
       {summarize && (
         <Summarize.SummaryNested