Package create file (#3127)

quiltdata · Oct 10, 2022 · edf30b0 · edf30b0
1 parent 13e22c0
commit edf30b0
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 34 deletions.
diff --git a/catalog/app/components/FileEditor/CreateFile.tsx b/catalog/app/components/FileEditor/CreateFile.tsx
@@ -0,0 +1,78 @@
+import { join, extname } from 'path'
+
+import * as React from 'react'
+import * as RRDom from 'react-router-dom'
+
+import * as Dialog from 'components/Dialog'
+import * as NamedRoutes from 'utils/NamedRoutes'
+import type { PackageHandle } from 'utils/packageHandle'
+
+import { isSupportedFileType } from './loader'
+
+function validateFileName(value: string) {
+  if (!value) {
+    return new Error('File name is required')
+  }
+  if (!isSupportedFileType(value) || extname(value) === '.' || !extname(value)) {
+    // TODO: get list of supported extensions from FileEditor
+    return new Error('Supported file formats are JSON, Markdown, YAML and text')
+  }
+}
+
+export function useCreateFileInBucket(bucket: string, path: string) {
+  const { urls } = NamedRoutes.use()
+  const history = RRDom.useHistory()
+
+  const toFile = React.useCallback(
+    (name: string) => urls.bucketFile(bucket, join(path, name), { edit: true }),
+    [bucket, path, urls],
+  )
+
+  const createFile = React.useCallback(
+    (name: string) => {
+      if (!name) return
+      history.push(toFile(name))
+    },
+    [history, toFile],
+  )
+
+  return Dialog.usePrompt({
+    onSubmit: createFile,
+    initialValue: 'README.md',
+    title: 'Enter file name',
+    validate: validateFileName,
+  })
+}
+
+export function useCreateFileInPackage({ bucket, name }: PackageHandle) {
+  const { urls } = NamedRoutes.use()
+  const history = RRDom.useHistory()
+
+  const toFile = React.useCallback(
+    (fileName: string) => {
+      const next = urls.bucketPackageDetail(bucket, name, { action: 'revisePackage' })
+      const key = join(name, fileName)
+      return urls.bucketFile(bucket, key, {
+        add: fileName,
+        edit: true,
+        next,
+      })
+    },
+    [bucket, name, urls],
+  )
+
+  const createFile = React.useCallback(
+    (fileName: string) => {
+      if (!fileName) return
+      history.push(toFile(fileName))
+    },
+    [history, toFile],
+  )
+
+  return Dialog.usePrompt({
+    onSubmit: createFile,
+    initialValue: 'README.md',
+    title: 'Enter file name',
+    validate: validateFileName,
+  })
+}
diff --git a/catalog/app/components/FileEditor/index.ts b/catalog/app/components/FileEditor/index.ts
@@ -1,2 +1,3 @@
-export * from './FileEditor'
 export * from './Controls'
+export * from './CreateFile'
+export * from './FileEditor'
diff --git a/catalog/app/containers/Bucket/Dir.tsx b/catalog/app/containers/Bucket/Dir.tsx
@@ -1,4 +1,4 @@
-import { basename, join, extname } from 'path'
+import { basename, join } from 'path'
 
 import dedent from 'dedent'
 import * as R from 'ramda'
@@ -8,7 +8,6 @@ import * as M from '@material-ui/core'
 
 import { Crumb, copyWithoutSpaces, render as renderCrumbs } from 'components/BreadCrumbs'
 import type * as DG from 'components/DataGrid'
-import * as Dialog from 'components/Dialog'
 import * as FileEditor from 'components/FileEditor'
 import * as Bookmarks from 'containers/Bookmarks'
 import AsyncResult from 'utils/AsyncResult'
@@ -39,35 +38,7 @@ interface DirectoryMenuProps {
 }
 
 function DirectoryMenu({ bucket, path, className }: DirectoryMenuProps) {
-  const { urls } = NamedRoutes.use<RouteMap>()
-  const history = RRDom.useHistory()
-
-  const createFile = React.useCallback(
-    (name: string) => {
-      if (!name) return
-      history.push(urls.bucketFile(bucket, join(path, name), { edit: true }))
-    },
-    [bucket, history, path, urls],
-  )
-  const validateFileName = React.useCallback((value: string) => {
-    if (!value) {
-      return new Error('File name is required')
-    }
-    if (
-      !FileEditor.isSupportedFileType(value) ||
-      extname(value) === '.' ||
-      !extname(value)
-    ) {
-      // TODO: get list of supported extensions from FileEditor
-      return new Error('Supported file formats are JSON, Markdown, YAML and text')
-    }
-  }, [])
-  const prompt = Dialog.usePrompt({
-    onSubmit: createFile,
-    initialValue: 'README.md',
-    title: 'Enter file name',
-    validate: validateFileName,
-  })
+  const prompt = FileEditor.useCreateFileInBucket(bucket, path)
   const menuItems = React.useMemo(
     () => [
       {

diff --git a/catalog/app/containers/Bucket/PackageTree/PackageTree.tsx b/catalog/app/containers/Bucket/PackageTree/PackageTree.tsx
@@ -298,6 +298,8 @@ function DirDisplay({
 
   const openInDesktopState = OpenInDesktop.use(packageHandle, size)
 
+  const prompt = FileEditor.useCreateFileInPackage(packageHandle)
+
   return (
     <>
       <OpenInDesktop.Dialog
@@ -416,6 +418,7 @@ function DirDisplay({
 
           return (
             <>
+              {prompt.render()}
               <TopBar crumbs={crumbs}>
                 {hasReviseButton && (
                   <M.Button
@@ -448,6 +451,7 @@ function DirDisplay({
                   className={classes.button}
                   onDelete={confirmDelete}
                   onDesktop={openInDesktopState.confirm}
+                  onCreateFile={prompt.open}
                 />
               </TopBar>
               {preferences?.ui?.blocks?.code && (

diff --git a/catalog/app/containers/Bucket/PackageTree/RevisionMenu.tsx b/catalog/app/containers/Bucket/PackageTree/RevisionMenu.tsx
@@ -7,20 +7,27 @@ import Menu from '../Menu'
 
 interface RevisionMenuProps {
   className: string
+  onCreateFile: () => void
   onDelete: () => void
   onDesktop: () => void
 }
 
 export default function RevisionMenu({
   className,
+  onCreateFile,
   onDelete,
   onDesktop,
 }: RevisionMenuProps) {
   const preferences = BucketPreferences.use()
   const { desktop }: { desktop: boolean } = Config.use()
 
   const items = React.useMemo(() => {
-    const menu = []
+    const menu = [
+      {
+        onClick: onCreateFile,
+        title: 'Create file',
+      },
+    ]
     if (preferences?.ui?.actions?.deleteRevision) {
       menu.push({
         onClick: onDelete,
@@ -34,7 +41,7 @@ export default function RevisionMenu({
       })
     }
     return menu
-  }, [desktop, onDelete, onDesktop, preferences])
+  }, [desktop, onCreateFile, onDelete, onDesktop, preferences])
 
   if (!items.length) return null
 

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -34,6 +34,7 @@
 * [Added] Edit button for text files in packages ([#3070](https://github.com/quiltdata/quilt/pull/3070))
 * [Added] Add execution context for Athena query execution ([#3062](https://github.com/quiltdata/quilt/pull/3062))
 * [Added] Add confirmation if now every row is valid for creating package from Athena results ([#3073](https://github.com/quiltdata/quilt/pull/3073))
+* [Added] Create file menu item for package ([#3127](https://github.com/quiltdata/quilt/pull/3127))
 * [Fixed] Fix package creation in S3 buckets with SSE-KMS enabled ([#2754](https://github.com/quiltdata/quilt/pull/2754))
 * [Fixed] Fix creation of packages with large (4+ GiB) files ([#2933](https://github.com/quiltdata/quilt/pull/2933))
 * [Fixed] Fix pre-popullation of default dates when using "dateformat" + {"format": "date"} ([#3082](https://github.com/quiltdata/quilt/pull/3082))