@ossy/resources 3.10.0 → 3.11.0

package/src/ResourcePanel.jsx

@@ -16,6 +16,7 @@ import {
   Button,
   InputTitle,
   Alert,
+  Form,
   useInputValue,
   useLocale,
   Dropdown,
@@ -35,6 +36,15 @@ import {
   resourceAccessIcon,
   resourceAccessOf,
 } from './resource-share.js'
+import { metadata as OpenShare } from './open-share.action.js'
+import { metadata as OpenRename } from './open-rename.action.js'
+import { metadata as OpenMove } from './open-move.action.js'
+import { metadata as DownloadResource } from './download-resource.action.js'
+import { metadata as DeleteResource } from './delete.action.js'
+import { metadata as UpdateResourceName } from './update-name.action.js'
+import { metadata as RenameForm } from './rename.form.js'
+import renameTemplate from './rename.schema.js'
+import { ResourceDialogMove } from './ResourceDialogMove.jsx'
 
 const ViewMode = {
   Closed: 'Closed',
@@ -63,6 +73,7 @@ export const ResourcePanel = memo(function ResourcePanel ({
   const [accessBusy, setAccessBusy] = useState(false)
   const [accessError, setAccessError] = useState(null)
   const [shareOpen, setShareOpen] = useState(false)
+  const [moveOpen, setMoveOpen] = useState(false)
 
   const { data: resource = {} } = sdk.read(GetResource, { resourceId }, { enabled: !!resourceId })
   const template = useSchema(resource?.type)
@@ -89,12 +100,21 @@ export const ResourcePanel = memo(function ResourcePanel ({
     _onClose()
   }
 
-  const onRenameResource = () => {
-    if (resourceName === resource.name) return
-    renameResource(sdk, resourceId, resourceName)
+  const commitRename = (nextName) => {
+    const name = String(nextName ?? '').trim()
+    if (!name || name === resource.name) {
+      setPanelViewModes(x => ({ ...x, 'panel-header': ViewMode.View }))
+      return
+    }
+    setResourceName(name)
+    renameResource(sdk, resourceId, name)
       .then(() => setPanelViewModes(x => ({ ...x, 'panel-header': ViewMode.View })))
   }
 
+  const onRenameSubmit = (data) => {
+    commitRename(data?.name)
+  }
+
   const onUpdateResource = () => {
     if (template) {
       const result = validateContent(engine, template, form.data)
@@ -242,6 +262,7 @@ export const ResourcePanel = memo(function ResourcePanel ({
               )}
               {shareable && (
                 <Button
+                  {...OpenShare}
                   prefix="share"
                   variant="command"
                   aria-label={t('resources.share.title')}
@@ -250,6 +271,7 @@ export const ResourcePanel = memo(function ResourcePanel ({
               )}
               {downloadHref && (
                 <Button
+                  {...DownloadResource}
                   prefix="software-download"
                   variant="command"
                   href={downloadHref}
@@ -257,27 +279,78 @@ export const ResourcePanel = memo(function ResourcePanel ({
                   aria-label={t('resources.panel.download')}
                 />
               )}
-              <Button prefix="trash-empty"  variant="command-danger" onClick={onRemoveResource}/>
-              <Button prefix="pen" variant="command" onClick={() => setPanelViewModes(x => ({ ...x, 'panel-header': ViewMode.Edit }))} />
+              <Button
+                {...OpenMove}
+                prefix="details-more"
+                variant="command"
+                label={undefined}
+                aria-label={t('resources.panel.move')}
+                onClick={() => setMoveOpen(true)}
+              />
+              <Button
+                {...DeleteResource}
+                prefix="trash-empty"
+                variant="command-danger"
+                aria-label={t('resources.panel.delete')}
+                onClick={onRemoveResource}
+              />
+              <Button
+                {...OpenRename}
+                prefix="pen"
+                variant="command"
+                label={undefined}
+                aria-label={t('resources.panel.rename')}
+                onClick={() => setPanelViewModes(x => ({ ...x, 'panel-header': ViewMode.Edit }))}
+              />
               { !!_onClose && (<Button prefix="close" variant="command" onClick={onCloseResource} /> ) }
 
             </Switch.Case>
 
             <Switch.Case match={[ViewMode.Edit]}>
 
-                <View.Item fill surface="primary" style={{ padding: '4px 8px' }}>
-                  <InputTitle
-                    id="document-name"
-                    type="text"
-                    style={{ display: 'block', width: '100%' }}
-                    value={resourceName}
-                    onChange={setResourceName}
-                    onBlur={onRenameResource} 
+                <Form
+                  id={RenameForm.id}
+                  schemaId={RenameForm.schemaId}
+                  fields={renameTemplate.fields}
+                  data={{ name: resourceName }}
+                  onChange={({ value }) => setResourceName(String(value ?? ''))}
+                  onSubmit={onRenameSubmit}
+                  stack
+                  horizontal
+                  style={{ height: '48px', alignItems: 'center', gap: '4px', flex: 1, minWidth: 0, width: '100%' }}
+                >
+                  <View.Item fill surface="primary" style={{ padding: '4px 8px' }}>
+                    <InputTitle
+                      id="document-name"
+                      name="name"
+                      type="text"
+                      required
+                      style={{ display: 'block', width: '100%' }}
+                      value={resourceName}
+                      onChange={setResourceName}
+                      aria-label={t('resources.panel.rename')}
+                    />
+                  </View.Item>
+
+                  <Button
+                    prefix="close"
+                    variant="command"
+                    type="button"
+                    aria-label={t('design-system.cancel')}
+                    onClick={() => {
+                      setResourceName(resource.name || '')
+                      setPanelViewModes(x => ({ ...x, 'panel-header': ViewMode.View }))
+                    }}
                   />
-               </View.Item>
-
-               <Button prefix="close" variant="command" onClick={() => setPanelViewModes(x => ({ ...x, 'panel-header': ViewMode.View }))} />
-               <Button prefix="check" variant="command" onClick={onRenameResource}/>
+                  <Button
+                    {...UpdateResourceName}
+                    prefix="check"
+                    variant="command"
+                    type="submit"
+                    label={undefined}
+                    aria-label={t('@ossy/resources/actions/update-name.label')}
+                  />
+                </Form>
 
             </Switch.Case>
 
@@ -344,6 +417,12 @@ export const ResourcePanel = memo(function ResourcePanel ({
         onClose={() => setShareOpen(false)}
       />
 
+      <ResourceDialogMove
+        resourceId={resourceId}
+        isVisible={moveOpen}
+        onClose={() => setMoveOpen(false)}
+      />
+
     </View>
   )
 })

package/src/ResourceShareDialog.jsx

@@ -3,6 +3,10 @@ import React, { useEffect, useState } from 'react'
 import { Overlay, View, Text, Button, Guide, useLocale } from '@ossy/design-system'
 import { AsyncStatus, useSdk } from '@ossy/sdk-react'
 import { metadata as GetResource } from './get.action.js'
+import { metadata as MakePublic } from './make-public.action.js'
+import { metadata as MakePrivate } from './make-private.action.js'
+import { metadata as CopyShareLink } from './copy-share-link.action.js'
+import { metadata as CloseShare } from './close-share.action.js'
 import { updateResourceAccess } from './resource.helpers.js'
 import {
   getResourceShareUrl,
@@ -80,12 +84,30 @@ export function ResourceShareDialog ({
     }
   }
 
+  const onMakePrivate = async () => {
+    if (!resourceId || busy) return
+    setError(null)
+    setBusy(true)
+    try {
+      await updateResourceAccess(sdk, { id: resourceId, access: 'restricted' })
+      setMadePublic(false)
+    } catch {
+      setError(t('resources.share.publishError'))
+    } finally {
+      setBusy(false)
+    }
+  }
+
   if (!isVisible || !resourceId) return null
 
   return (
     <Overlay isVisible={true} onClose={onClose}>
       <View layout="off-center-s" style={{ height: '100%' }}>
-        <View data-region="content" style={{ width: 'min(420px, 92vw)' }}>
+        <View
+          data-region="resource-share"
+          data-share-status={loading ? 'loading' : !shareable ? 'unavailable' : isPublic ? 'public' : 'private'}
+          style={{ width: 'min(420px, 92vw)' }}
+        >
           <View surface="primary" roundness="s">
             <View surface="primary" inset="l" roundness="s" gap="m">
               {loading ? (
@@ -94,6 +116,7 @@ export function ResourceShareDialog ({
                   text={t('resources.share.sharing')}
                   actions={[
                     {
+                      ...CloseShare,
                       label: t('resources.share.close'),
                       variant: 'command',
                       onClick: onClose,
@@ -106,6 +129,7 @@ export function ResourceShareDialog ({
                   text={t('resources.share.notShareable')}
                   actions={[
                     {
+                      ...CloseShare,
                       label: t('resources.share.close'),
                       variant: 'command',
                       onClick: onClose,
@@ -125,6 +149,7 @@ export function ResourceShareDialog ({
                     <View gap="xs">
                       <Text
                         variant="small"
+                        data-share-url={shareUrl}
                         style={{
                           wordBreak: 'break-all',
                           fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
@@ -145,22 +170,35 @@ export function ResourceShareDialog ({
                   )}
 
                   <View layout="row" gap="s" style={{ justifyContent: 'flex-end', flexWrap: 'wrap' }}>
-                    <Button variant="command" onClick={onClose} disabled={busy}>
+                    <Button {...CloseShare} variant="command" onClick={onClose} disabled={busy}>
                       {t('resources.share.close')}
                     </Button>
                     {isPublic ? (
-                      <Button
-                        variant="cta"
-                        prefix="link"
-                        disabled={busy || !shareUrl}
-                        onClick={() => copyLink(shareUrl)}
-                      >
-                        {linkCopied
-                          ? t('resources.share.linkCopied')
-                          : t('resources.share.copyLink')}
-                      </Button>
+                      <>
+                        <Button
+                          {...MakePrivate}
+                          variant="neutral"
+                          prefix="lock"
+                          disabled={busy || !resource?.id}
+                          onClick={onMakePrivate}
+                        >
+                          {t('resources.share.makePrivate')}
+                        </Button>
+                        <Button
+                          {...CopyShareLink}
+                          variant="cta"
+                          prefix="link"
+                          disabled={busy || !shareUrl}
+                          onClick={() => copyLink(shareUrl)}
+                        >
+                          {linkCopied
+                            ? t('resources.share.linkCopied')
+                            : t('resources.share.copyLink')}
+                        </Button>
+                      </>
                     ) : (
                       <Button
+                        {...MakePublic}
                         variant="cta"
                         prefix="share"
                         disabled={busy || !resource?.id}

package/src/Upload.jsx

@@ -1,5 +1,8 @@
 import React, { useCallback, useState } from 'react'
 import { Button, View, Text, UploadInput, Icon, LocalFilePreview, DropZone } from '@ossy/design-system'
+import { metadata as CancelUpload } from './cancel-upload.action.js'
+import { metadata as ConfirmUpload } from './confirm-upload.action.js'
+import { metadata as FinishUpload } from './finish-upload.action.js'
 
 const FlowStage = {
   Error: 'Error',
@@ -55,7 +58,11 @@ export const Upload = ({
   }
 
   return (
-    <View gap="s" style={{ height: '100%' }}>
+    <View
+      gap="s"
+      style={{ height: '100%' }}
+      data-flow-stage={flowStageAttr(flowStage, files)}
+    >
       {
         files.length > 0 && (
           <View gap="s" style={{ flexGrow: '1', overflow: 'auto', padding: 'var(--space-m) 0' }}>
@@ -83,6 +90,7 @@ export const Upload = ({
           >
             <UploadInput
               id="upload-resources"
+              data-ossy-upload-input
               type="file"
               multiple
               onChange={onUserInput}
@@ -94,15 +102,15 @@ export const Upload = ({
 
       <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 'var(--space-m)' }}>
         <Button
-          id="cancel"
+          {...CancelUpload}
           onClick={onCancel}
         >Cancel
         </Button>
 
         {
-          flowStage === FlowStage.Preview && (
+          flowStage === FlowStage.Preview && files.length > 0 && (
             <Button
-              id="upload"
+              {...ConfirmUpload}
               variant="cta"
               onClick={uploadFiles}
             >Upload
@@ -113,7 +121,7 @@ export const Upload = ({
         {
           flowStage === FlowStage.Uploading && (
             <Button
-              id="upload"
+              {...ConfirmUpload}
               variant="cta"
               disabled
             >Upploading...
@@ -124,7 +132,7 @@ export const Upload = ({
         {
           flowStage === FlowStage.Error && (
             <Button
-              id="upload"
+              {...ConfirmUpload}
               variant="cta"
               onClick={uploadFiles}
             >Retry failed uploads
@@ -135,7 +143,7 @@ export const Upload = ({
         {
           flowStage === FlowStage.Done && (
             <Button
-              id="upload"
+              {...FinishUpload}
               variant="cta"
               onClick={finishUpload}
             >Done
@@ -170,4 +178,13 @@ function getFlowStage(files = []) {
   if (areAllFilesUploadedSuccessfully) return FlowStage.Done
 
   return FlowStage.Preview
-}
+}
+
+function flowStageAttr(flowStage, files = []) {
+  if (files.length === 0) return 'upload-idle'
+  if (flowStage === FlowStage.Preview) return 'upload-preview'
+  if (flowStage === FlowStage.Uploading) return 'upload-uploading'
+  if (flowStage === FlowStage.Error) return 'upload-error'
+  if (flowStage === FlowStage.Done) return 'upload-done'
+  return 'upload-idle'
+}

package/src/batch-delete.flow.js

@@ -0,0 +1,81 @@
+import { metadata as ConfirmUpload } from './confirm-upload.action.js'
+import { metadata as FinishUpload } from './finish-upload.action.js'
+import { metadata as DeleteResource } from './delete.action.js'
+import { metadata as OpenRemoveSelected } from './open-remove-selected.action.js'
+import { metadata as ToggleSelectionMode } from './toggle-selection-mode.action.js'
+import uploadFileFlow from './upload-file.flow.js'
+
+export const metadata = {
+  id: '@ossy/resources/flows/batch-delete',
+  feature: 'resources',
+  requires: ['server', 'database'],
+  timeout: 180_000,
+}
+
+/**
+ * Upload two files, enter selection mode, select both, confirm batch remove,
+ * and assert both leave storage home.
+ */
+export default {
+  title: 'Batch delete selected files',
+  description:
+    'Signed-in user uploads two files, selects both in selection mode, confirms remove, and sees them leave storage',
+  steps: [
+    ...uploadFileFlow.steps,
+    { page: '@upload-media', search: { location: '/' } },
+    { result: { selector: '#upload-resources', timeout: 15000 } },
+    { result: { selector: '[data-flow-stage="upload-idle"]', timeout: 15000 } },
+    {
+      files: {
+        selector: '#upload-resources',
+        items: [{
+          name: 'e2e-upload-2.txt',
+          mimeType: 'text/plain',
+          content: 'hello from ossy e2e upload two',
+        }],
+      },
+    },
+    { result: { selector: '[data-flow-stage="upload-preview"]', timeout: 15000 } },
+    { result: { action: ConfirmUpload, timeout: 10000 } },
+    { action: ConfirmUpload },
+    { result: { selector: '[data-flow-stage="upload-done"]', timeout: 30000 } },
+    { result: { action: FinishUpload, timeout: 10000 } },
+    { action: FinishUpload },
+    { result: { page: '@storage/home', timeout: 20000 } },
+    { result: { selector: '[data-resource-name="e2e-upload.txt"]', timeout: 20000 } },
+    { result: { selector: '[data-resource-name="e2e-upload-2.txt"]', timeout: 20000 } },
+    { result: { action: ToggleSelectionMode, timeout: 10000 } },
+    { action: ToggleSelectionMode },
+    { result: { selector: '[data-selection-mode="on"]', timeout: 10000 } },
+    {
+      click: {
+        selector: '[data-resource-name="e2e-upload.txt"] [role="checkbox"]',
+      },
+    },
+    {
+      click: {
+        selector: '[data-resource-name="e2e-upload-2.txt"] [role="checkbox"]',
+      },
+    },
+    { result: { selector: '[data-resource-name="e2e-upload.txt"][data-selected]', timeout: 10000 } },
+    { result: { selector: '[data-resource-name="e2e-upload-2.txt"][data-selected]', timeout: 10000 } },
+    { result: { action: OpenRemoveSelected, timeout: 10000 } },
+    { action: OpenRemoveSelected },
+    { result: { action: DeleteResource, timeout: 10000 } },
+    { action: DeleteResource },
+    {
+      result: {
+        selector: '[data-resource-name="e2e-upload.txt"]',
+        hidden: true,
+        timeout: 20000,
+      },
+    },
+    {
+      result: {
+        selector: '[data-resource-name="e2e-upload-2.txt"]',
+        hidden: true,
+        timeout: 20000,
+      },
+    },
+  ],
+}

package/src/batch-download.flow.js

@@ -0,0 +1,69 @@
+import { metadata as ConfirmUpload } from './confirm-upload.action.js'
+import { metadata as FinishUpload } from './finish-upload.action.js'
+import { metadata as DownloadSelected } from './download-selected.action.js'
+import { metadata as ToggleSelectionMode } from './toggle-selection-mode.action.js'
+import uploadFileFlow from './upload-file.flow.js'
+
+export const metadata = {
+  id: '@ossy/resources/flows/batch-download',
+  feature: 'resources',
+  requires: ['server', 'database'],
+  timeout: 180_000,
+}
+
+/**
+ * Upload two files, enter selection mode, select both, and batch-download them.
+ */
+export default {
+  title: 'Batch download selected files',
+  description:
+    'Signed-in user uploads two files, selects both in selection mode, and downloads them together',
+  steps: [
+    ...uploadFileFlow.steps,
+    { page: '@upload-media', search: { location: '/' } },
+    { result: { selector: '#upload-resources', timeout: 15000 } },
+    { result: { selector: '[data-flow-stage="upload-idle"]', timeout: 15000 } },
+    {
+      files: {
+        selector: '#upload-resources',
+        items: [{
+          name: 'e2e-upload-2.txt',
+          mimeType: 'text/plain',
+          content: 'hello from ossy e2e upload two',
+        }],
+      },
+    },
+    { result: { selector: '[data-flow-stage="upload-preview"]', timeout: 15000 } },
+    { result: { action: ConfirmUpload, timeout: 10000 } },
+    { action: ConfirmUpload },
+    { result: { selector: '[data-flow-stage="upload-done"]', timeout: 30000 } },
+    { result: { action: FinishUpload, timeout: 10000 } },
+    { action: FinishUpload },
+    { result: { page: '@storage/home', timeout: 20000 } },
+    { result: { selector: '[data-resource-name="e2e-upload.txt"]', timeout: 20000 } },
+    { result: { selector: '[data-resource-name="e2e-upload-2.txt"]', timeout: 20000 } },
+    { result: { action: ToggleSelectionMode, timeout: 10000 } },
+    { action: ToggleSelectionMode },
+    { result: { selector: '[data-selection-mode="on"]', timeout: 10000 } },
+    {
+      click: {
+        selector: '[data-resource-name="e2e-upload.txt"] [role="checkbox"]',
+      },
+    },
+    {
+      click: {
+        selector: '[data-resource-name="e2e-upload-2.txt"] [role="checkbox"]',
+      },
+    },
+    { result: { action: DownloadSelected, timeout: 10000 } },
+    { result: { selector: '[data-resource-name="e2e-upload.txt"][data-selected]', timeout: 10000 } },
+    { result: { selector: '[data-resource-name="e2e-upload-2.txt"][data-selected]', timeout: 10000 } },
+    {
+      download: {
+        action: DownloadSelected,
+        filenames: ['e2e-upload.txt', 'e2e-upload-2.txt'],
+        timeout: 45000,
+      },
+    },
+  ],
+}

package/src/cancel-upload.action.js

@@ -0,0 +1,4 @@
+export const metadata = {
+  id: '@ossy/resources/actions/cancel-upload',
+  access: 'workspace',
+}

package/src/cancel-upload.flow.js

@@ -0,0 +1,40 @@
+import signUpFlow from '@ossy/authentication/sign-up.flow.js'
+import { metadata as CancelUpload } from './cancel-upload.action.js'
+
+export const metadata = {
+  id: '@ossy/resources/flows/cancel-upload',
+  feature: 'resources',
+  requires: ['server', 'database'],
+  timeout: 120_000,
+}
+
+/**
+ * New user opens upload-media, attaches a file, cancels before confirming,
+ * and returns to storage home without the file listed.
+ */
+export default {
+  title: 'Cancel upload before confirm',
+  description:
+    'Signed-in user opens upload-media, selects a file, cancels, and lands on storage home without the file',
+  steps: [
+    ...signUpFlow.steps,
+    { page: '@upload-media', search: { location: '/' } },
+    { result: { selector: '#upload-resources', timeout: 15000 } },
+    { result: { selector: '[data-flow-stage="upload-idle"]', timeout: 15000 } },
+    {
+      files: {
+        selector: '#upload-resources',
+        items: [{
+          name: 'e2e-cancel-upload.txt',
+          mimeType: 'text/plain',
+          content: 'hello from ossy e2e cancel upload',
+        }],
+      },
+    },
+    { result: { selector: '[data-flow-stage="upload-preview"]', timeout: 15000 } },
+    { result: { action: CancelUpload, timeout: 10000 } },
+    { action: CancelUpload },
+    { result: { page: '@storage/home', timeout: 20000 } },
+    { result: { selector: '[data-resource-name="e2e-cancel-upload.txt"]', hidden: true, timeout: 10000 } },
+  ],
+}

package/src/close-share.action.js

@@ -0,0 +1,4 @@
+export const metadata = {
+  id: '@ossy/resources/actions/close-share',
+  access: 'workspace',
+}

package/src/confirm-upload.action.js

@@ -0,0 +1,4 @@
+export const metadata = {
+  id: '@ossy/resources/actions/confirm-upload',
+  access: 'workspace',
+}

package/src/copy-share-link.action.js

@@ -0,0 +1,4 @@
+export const metadata = {
+  id: '@ossy/resources/actions/copy-share-link',
+  access: 'workspace',
+}

package/src/create-directory.action.js

@@ -0,0 +1,5 @@
+export const metadata = {
+  id: '@ossy/resources/actions/create-directory',
+  access: 'workspace',
+  label: '@ossy/resources/actions/create-directory.label',
+}

package/src/create-directory.flow.js

@@ -0,0 +1,30 @@
+import signUpFlow from '@ossy/authentication/sign-up.flow.js'
+import { metadata as CreateDirectoryAction } from './create-directory.action.js'
+import { metadata as CreateDirectoryForm } from './create-directory.form.js'
+
+export const metadata = {
+  id: '@ossy/resources/flows/create-directory',
+  feature: 'resources',
+  requires: ['server', 'database'],
+  timeout: 120_000,
+}
+
+/**
+ * New user signs up, opens create-directory, names a folder, and sees it on
+ * storage home.
+ */
+export default {
+  title: 'Create directory in storage',
+  description:
+    'Signed-in user opens create-directory, submits a folder name, and lands on storage home with the folder listed',
+  steps: [
+    ...signUpFlow.steps,
+    { page: '@create-directory', search: { location: '/' } },
+    { result: { selector: '[data-flow-stage="create-directory"]', timeout: 15000 } },
+    { result: { action: CreateDirectoryAction, timeout: 10000 } },
+    { form: CreateDirectoryForm, fields: { name: 'e2e-folder' } },
+    { action: CreateDirectoryAction },
+    { result: { page: '@storage/home', timeout: 20000 } },
+    { result: { selector: '[data-resource-name="e2e-folder"]', timeout: 20000 } },
+  ],
+}

package/src/create-directory.form.js

@@ -0,0 +1,5 @@
+export const metadata = {
+  id: '@ossy/resources/form/create-directory',
+  schemaId: '@ossy/resources/schema/create-directory',
+  label: '@ossy/resources/form/create-directory.label',
+}

package/src/create-directory.schema.js

@@ -0,0 +1,9 @@
+/** Create directory form — UI fields and flow faker schema. */
+export default {
+  id: '@ossy/resources/schema/create-directory',
+  name: 'Create directory',
+  icon: 'folder-add',
+  fields: [
+    { name: 'name', type: 'text', required: true },
+  ],
+}