feature(multi-bucket): add multi-bucket support to storage components #5562

jordanvn · 2024-08-10T03:47:42Z

Description of changes

Changes:

Adds optional property "bucket" to <StorageImage /> and <StorageManager />.
- This property accepts the argument of either:
  - A string of the "friendly name" of the bucket
  - A StorageBucket object containing the bucket name generated on S3 and the region it exists in
- If omitted, these storage components will use whichever bucket the user has designated as their "default" bucket in their configuration.

Issue #, if available

N/A

Description of how you validated changes

Functionality of the backend support of multiple buckets was validated
Example apps were modified to use multi-bucket setup
Multi-bucket support was confirmed in example apps

Checklist

Have read the Pull Request Guidelines
PR description included
yarn test passes and tests are updated/added
PR title and commit messages follow conventional commit syntax
If this change should result in a version bump, changeset added (This can be done after creating the PR.) This does not apply to changes made to docs, e2e, examples, or other private packages.

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

changeset-bot · 2024-08-10T03:47:46Z

🦋 Changeset detected

Latest commit: f6645f1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@aws-amplify/ui-react-storage	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

dbanksdesign

Looks good!

dbanksdesign · 2024-08-13T17:01:21Z

packages/react-storage/src/components/StorageManager/types.ts

@@ -12,6 +12,15 @@ import {
 } from './ui';
 import { StorageManagerDisplayText, PathCallback, UploadTask } from './utils';

+interface BucketInfo {


Nit: should we share this type between components?

Yes, that makes sense to me. It didn't seem substantial enough to create a new shared types file for storage components, so I went with the definition in the Storage Manager types. There are already exported types and interfaces in that file, and none aside from props in Storage Image types.

Can we just import and extend FileUploaderProps in the assignment of StorageManagerProps and dedupe this file?

Are you suggesting the removal of this file and providing its exports from FileUploader types? Or reducing StorageManagerProps to export interface StorageManagerProps extends FileUploaderProps {}?

Keeping this file and doing the latter

Got it. Thanks for the clarification

Updated file to extend FileUploaderProps instead of duplicating type declaration

jordanvn · 2024-09-26T22:53:05Z

docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/BucketExact.tsx

+    <FileUploader
+      acceptedFileTypes={['image/*']}
+      bucket={{
+        bucketName: 'my-bucket-96e87892835c413e9963f3004a44e1ff',


Note: this is not an actual bucket name

Can you add a note so we don't wonder about that later, or make it more obvious like "my-bucket-xxxxxxx"

Yep, I like going with "my-bucket-xxxxxxxx"

jordanvn · 2024-09-26T22:56:38Z

packages/react-storage/src/components/StorageImage/__tests__/StorageImage.test.tsx

@@ -170,6 +170,27 @@ describe('StorageImage', () => {
    );
  });

+  it('should pass bucket to getUrl when supplied', () => {


Note: we're not duplicating the testing of the functionality of the API supporting this, so this test is just confirming that the "bucket" property is successfully passed from the component to the API in the expected format.

reesscot · 2024-09-30T17:44:02Z

docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx

@@ -168,6 +168,26 @@ You can limit what users upload with these 3 props:
  </ExampleCode>
 </Example>

+## Setting a Bucket
+
+If you have configured your Amplify project to use multiple S3 buckets, you can use the `bucket` prop to choose which of the buckets the component will use:


Can we link to Multibucket setup in main docs from here?

Good call. Added a link

calebpollman · 2024-09-30T18:38:25Z

packages/react-storage/src/components/StorageImage/types.ts

@@ -36,6 +38,7 @@ export interface StorageImageProps extends Omit<ImageProps, 'src'> {

 type OmittedPropKey =
  | 'accessLevel'
+  | 'bucket'


Why are we omitting bucket here?

+1, think its related to my comment above.

Good point. This was an oversight on my part

calebpollman · 2024-09-30T18:40:03Z

packages/react-storage/src/components/StorageImage/StorageImage.tsx

-    [accessLevel, imgKey, identityId, onError, path, validateObjectExistence]
+    [
+      accessLevel,
+      bucket,


If bucket is a non-memoized object will it cause any side effects in useGetUrl?

I tested the object input for bucket on the Storage Image locally, and I don't see any different behavior in the network

calebpollman · 2024-09-30T18:42:04Z

packages/react-storage/src/components/StorageManager/types.ts

@@ -12,6 +12,15 @@ import {
 } from './ui';
 import { StorageManagerDisplayText, PathCallback, UploadTask } from './utils';

+interface BucketInfo {


Can we just import and extend FileUploaderProps in the assignment of StorageManagerProps and dedupe this file?

reesscot · 2024-09-30T19:21:54Z

packages/react-storage/src/components/StorageImage/types.ts

@@ -15,6 +16,7 @@ export interface StorageImageProps extends Omit<ImageProps, 'src'> {
   * `accessLevel` will be replaced with `path` in a future major version of Amplify UI. See https://ui.docs.amplify.aws/react/connected-components/storage/storageimage#props
   */
  accessLevel: StorageAccessLevel;
+  bucket?: StorageBucket;


Do we bucket here if it's only supported in Gen2? (StorageImagePathProps)

No, we shouldn't. This was a misunderstanding on my part. I've removed this

reesscot · 2024-09-30T19:26:57Z

packages/react-storage/src/components/FileUploader/types.ts

+  /**
+   * Designates the bucket to upload to, if the user has multiple buckets configured
+   */
+  bucket?: StorageBucket;


Same comment as the one on StorageManager, not sure this is needed since multi bucket support doesn't exist in Gen1?

initial commit to add 'bucket' property to storage components

82099b3

jordanvn changed the title ~~feature(multi-bucket): initial commit to add 'bucket' property to storage components~~ feature(multi-bucket): add 'bucket' property to storage components Aug 10, 2024

jordanvn changed the title ~~feature(multi-bucket): add 'bucket' property to storage components~~ feature(multi-bucket): add multi-bucket support to storage components Aug 10, 2024

chore: use StorageBucket type in StorageImagePathProps

f45e688

dbanksdesign reviewed Aug 13, 2024

View reviewed changes

jordanvn added 15 commits August 20, 2024 08:06

remove duplicate StorageBucket type declaration

130914d

chore: update aws-amplify version to include multi-bucket support

6759502

docs: include references to new 'bucket' prop and its usage

6d200a9

Merge branch 'main' into multi-bucket-support

77de102

more explicitly clarifying that can be a string in docs example

5ea81d5

Merge branch 'main' into multi-bucket-support

98b51db

chore: changing reference of storage manager to file uploader

79d1209

chore: updating yarn.lock

9916524

chore: undoing unnecessary linting changes

bb0c2f7

chore: moving yarn.lock from main branch parity

0fab899

Merge branch 'main' into multi-bucket-support

77119df

chore: updating yarn.lock to main

cd12258

chore: add missing references to 'bucket'

4c6eae2

chore: adding tests and new example app

d36d03e

Merge branch 'main' into multi-bucket-support

f3953b6

jordanvn temporarily deployed to ci September 26, 2024 22:46 — with GitHub Actions Inactive

jordanvn had a problem deploying to ci September 26, 2024 22:46 — with GitHub Actions Failure

jordanvn temporarily deployed to ci September 26, 2024 22:46 — with GitHub Actions Inactive

jordanvn marked this pull request as ready for review September 26, 2024 22:49

jordanvn requested a review from a team as a code owner September 26, 2024 22:49

jordanvn marked this pull request as draft September 26, 2024 22:51

jordanvn commented Sep 26, 2024

View reviewed changes

jordanvn temporarily deployed to ci September 27, 2024 14:43 — with GitHub Actions Inactive

jordanvn had a problem deploying to ci September 27, 2024 14:43 — with GitHub Actions Failure

jordanvn temporarily deployed to ci September 27, 2024 14:43 — with GitHub Actions Inactive

jordanvn temporarily deployed to ci September 27, 2024 19:43 — with GitHub Actions Inactive

chore: add changeset

8cbbd05

jordanvn temporarily deployed to ci September 27, 2024 20:52 — with GitHub Actions Inactive

dbanksdesign previously approved these changes Sep 30, 2024

View reviewed changes

reesscot reviewed Sep 30, 2024

View reviewed changes

jordanvn added 2 commits September 30, 2024 10:57

chore: setting more obviously fake bucket name as example

757226b

chore: adding link for setting up multi-bucket configuration to docs

f825df3

jordanvn dismissed dbanksdesign’s stale review via f825df3 September 30, 2024 17:58

jordanvn temporarily deployed to ci September 30, 2024 18:07 — with GitHub Actions Inactive

jordanvn requested review from dbanksdesign and reesscot September 30, 2024 18:42

calebpollman reviewed Sep 30, 2024

View reviewed changes

reesscot reviewed Sep 30, 2024

View reviewed changes

jordanvn added 3 commits September 30, 2024 15:38

chore: removing unnecessary type definitions

e96c3f3

chore: removing unnecessary type from Storage Image props

a5c3d5e

Merge branch 'main' into multi-bucket-support

68c0a84

jordanvn requested review from reesscot and calebpollman October 2, 2024 17:21

jordanvn added 2 commits October 2, 2024 10:22

Merge branch 'main' into multi-bucket-support

21c0763

chore: adding bucket as omitted prop to gen1 props

f6645f1

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feature(multi-bucket): add multi-bucket support to storage components #5562

feature(multi-bucket): add multi-bucket support to storage components #5562

jordanvn commented Aug 10, 2024

changeset-bot bot commented Aug 10, 2024 •

edited

Loading

dbanksdesign left a comment

dbanksdesign Aug 13, 2024

jordanvn Aug 20, 2024

calebpollman Sep 30, 2024

jordanvn Sep 30, 2024

calebpollman Sep 30, 2024

jordanvn Sep 30, 2024

jordanvn Sep 30, 2024

jordanvn Sep 26, 2024

reesscot Sep 30, 2024

jordanvn Sep 30, 2024

jordanvn Sep 26, 2024

reesscot Sep 30, 2024

jordanvn Sep 30, 2024

calebpollman Sep 30, 2024

reesscot Sep 30, 2024

jordanvn Sep 30, 2024

jordanvn Sep 30, 2024

calebpollman Sep 30, 2024

jordanvn Oct 2, 2024

calebpollman Sep 30, 2024

reesscot Sep 30, 2024 •

edited

Loading

jordanvn Sep 30, 2024 •

edited

Loading

reesscot Sep 30, 2024

jordanvn Sep 30, 2024

feature(multi-bucket): add multi-bucket support to storage components #5562

Are you sure you want to change the base?

feature(multi-bucket): add multi-bucket support to storage components #5562

Conversation

jordanvn commented Aug 10, 2024

Description of changes

Issue #, if available

Description of how you validated changes

Checklist

changeset-bot bot commented Aug 10, 2024 • edited Loading

🦋 Changeset detected

dbanksdesign left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

reesscot Sep 30, 2024 • edited Loading

Choose a reason for hiding this comment

jordanvn Sep 30, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

changeset-bot bot commented Aug 10, 2024 •

edited

Loading

reesscot Sep 30, 2024 •

edited

Loading

jordanvn Sep 30, 2024 •

edited

Loading