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/Dir.tsx

@@ -120,7 +120,7 @@ function DirContents({ response, locked, bucket, path, loadMore }: DirContentsPr
       />
       {/* Remove TS workaround when Summary will be converted to .tsx */}
       {/* @ts-expect-error */}
-      <Summary files={response.files} mkUrl={null} />
+      <Summary files={response.files} mkUrl={null} path={path} />
     </>
   )
 }

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/PackageTree/PackageTree.tsx

@@ -448,6 +448,7 @@ function DirDisplay({
               <M.Box mt={2}>
                 {preferences?.ui?.blocks?.browser && <Listing items={items} key={hash} />}
                 <Summary
+                  path={path}
                   files={summaryHandles}
                   mkUrl={mkUrl}
                   packageHandle={packageHandle}

catalog/app/containers/Bucket/Summary.js

@@ -1,4 +1,4 @@
-import { basename } from 'path'
+import { basename, join } 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 toConfig = urls.bucketFile(bucket, path.join(name, 'README.md'), {
-    next,
+  const next = urls.bucketPackageDetail(bucket, name, { action: 'revisePackage' })
+  const toConfig = urls.bucketFile(bucket, join(name, 'README.md'), {
     add: true,
+    edit: true,
+    next,
   })
   return (
     <div className={classes.root}>
@@ -198,7 +199,7 @@ function Thumbnails({ images, mkUrl }) {
 }
 
 // files: Array of s3 handles
-export default function BucketSummary({ files, mkUrl: mkUrlProp, packageHandle }) {
+export default function BucketSummary({ files, mkUrl: mkUrlProp, packageHandle, path }) {
   const { urls } = NamedRoutes.use()
   const mkUrl = React.useCallback(
     (handle) =>
@@ -209,8 +210,6 @@ 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 && (
@@ -220,7 +219,9 @@ export default function BucketSummary({ files, mkUrl: mkUrlProp, packageHandle }
           mkUrl={mkUrl}
         />
       )}
-      {canAddReadme && <AddReadmeSection packageHandle={packageHandle} />}
+      {!readme && !path && !!packageHandle && (
+        <AddReadmeSection packageHandle={packageHandle} />
+      )}
       {!!images.length && <Thumbnails {...{ images, mkUrl }} />}
       {summarize && (
         <Summarize.SummaryNested

catalog/app/embed/Dir.js

@@ -184,7 +184,7 @@ export default function Dir({
                   />
                 }
               />
-              <Summary files={res.files} />
+              <Summary files={res.files} path={path} />
             </>
           )
         },