Copy storagemanager as fileuploader (#5744)

* chore: copy StorageManager component, renaming copy FileUploader

* chore: add FileUploader to component class names

* chore: renaming internal FileUploader references to use its own name

* chore: adding test for default prop in FileControl

* chore: rename test file to use FileUploader reference

* chore: add changeset

* fix: adding reference to correct component class in test

* Update .changeset/small-masks-act.md

Co-authored-by: Scott Rees <[email protected]>

---------

Co-authored-by: Scott Rees <[email protected]>

Author: 2 people

.changeset/small-masks-act.md

@@ -0,0 +1,6 @@
+---
+'@aws-amplify/ui-react-storage': minor
+'@aws-amplify/ui': minor
+---
+
+Adds FileUploader as new default name of StorageManager to avoid confusion with new components

packages/react-storage/src/components/FileUploader/hooks/useFileUploader/__tests__/useFileUploader.test.ts

@@ -167,18 +167,6 @@ describe('useUploadFiles', () => {
     expect(result.current.files.length).toBe(1);
   });
 
-  it('should update a target file key', () => {
-    const { result } = renderHook(() => useStorageManager(defaultFiles));
-
-    const processedKey = 'processedKey';
-
-    expect(result.current.files[0].processedKey).toBeUndefined();
-
-    act(() => result.current.setProcessedKey({ id: 'file1', processedKey }));
-
-    expect(result.current.files[0].processedKey).toBe(processedKey);
-  });
-
   describe('defaultFiles', () => {
     it('should handle good defaultFiles', () => {
       const { result } = renderHook(() =>

packages/react-storage/src/components/FileUploader/hooks/useFileUploader/actions.ts

@@ -23,14 +23,6 @@ export const queueFilesAction = (): Action => ({
   type: FileUploaderActionTypes.QUEUE_FILES,
 });
 
-export const setProcessedKeyAction = (input: {
-  id: string;
-  processedKey: string;
-}): Action => ({
-  ...input,
-  type: StorageManagerActionTypes.SET_PROCESSED_FILE_KEY,
-});
-
 export const setUploadingFileAction = ({
   id,
   uploadTask,

packages/react-storage/src/components/StorageManager/ui/FileList/__tests__/__snapshots__/FileControl.test.tsx.snap

@@ -355,3 +355,108 @@ exports[`FileControl should default to showThumbnails being true 1`] = `
   </div>
 </div>
 `;
+
+exports[`FileControl should default to showThumbnails being true 1`] = `
+<div>
+  <div
+    class="amplify-storagemanager__file"
+  >
+    <div
+      class="amplify-storagemanager__file__wrapper"
+    >
+      <div
+        class="amplify-storagemanager__file__image"
+      >
+        <span
+          class="amplify-icon"
+          style="width: 1em; height: 1em;"
+        >
+          <svg
+            fill="none"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+      </div>
+      <div
+        class="amplify-storagemanager__file__main"
+      >
+        <p
+          class="amplify-text amplify-storagemanager__file__name"
+        >
+          fileName
+        </p>
+      </div>
+      <span
+        class="amplify-text amplify-storagemanager__file__size"
+      />
+      <svg
+        class="amplify-loader amplify-loader--linear amplify-storagemanager__loader"
+        role="img"
+      >
+        <g>
+          <line
+            data-testid="linear-empty"
+            style="stroke: undefined;"
+            x1="0"
+            x2="100%"
+            y1="50%"
+            y2="50%"
+          />
+          <line
+            data-testid="linear-filled"
+            x1="0"
+            x2="100%"
+            y1="50%"
+            y2="50%"
+          />
+        </g>
+      </svg>
+      <button
+        class="amplify-button amplify-field-group__control amplify-button--small"
+        data-testid="storage-manager-remove-button"
+        type="button"
+      >
+        <span
+          class="amplify-visually-hidden"
+        >
+          Remove file fileName
+        </span>
+        <span
+          aria-hidden="true"
+        >
+          <span
+            class="amplify-icon"
+            style="width: 1em; height: 1em;"
+          >
+            <svg
+              fill="none"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
+        </span>
+      </button>
+    </div>
+    <p
+      class="amplify-text amplify-storagemanager__file__status"
+    >
+      Uploading
+    </p>
+  </div>
+</div>
+`;