Merge branch 'feat-storage-browser/main' into feat-storage-browser/ta…

…ble-load-state

examples/next/pages/ui/components/storage/storage-browser/composable-playground/index.page.tsx

@@ -1,16 +1,18 @@
 import React from 'react';
 
 import {
+  createManagedAuthAdapter,
   CreateStorageBrowserInput,
   createStorageBrowser,
 } from '@aws-amplify/ui-react-storage/browser';
 
-import { auth, managedAuthAdapter } from '../managedAuthAdapter';
+import { Auth } from '../managedAuthAdapter';
 
 import { Button, Flex, Breadcrumbs } from '@aws-amplify/ui-react';
 
-import '@aws-amplify/ui-react-storage/storage-browser-styles.css';
+import '@aws-amplify/ui-react/styles/reset.css';
 import '@aws-amplify/ui-react-storage/styles.css';
+import '@aws-amplify/ui-react-storage/storage-browser-styles.css';
 
 const components: CreateStorageBrowserInput['components'] = {
   Navigation: ({ items }) => (
@@ -26,15 +28,64 @@ const components: CreateStorageBrowserInput['components'] = {
   ),
 };
 
-const { StorageBrowser } = createStorageBrowser({
+export const auth = new Auth({ persistCredentials: true });
+
+const config = createManagedAuthAdapter({
+  credentialsProvider: auth.credentialsProvider,
+  region: process.env.NEXT_PUBLIC_MANAGED_AUTH_REGION,
+  accountId: process.env.NEXT_PUBLIC_MANAGED_AUTH_ACCOUNT_ID,
+  registerAuthListener: auth.registerAuthListener,
+});
+
+const { StorageBrowser, useView } = createStorageBrowser({
   components,
-  config: managedAuthAdapter,
+  config,
 });
 
-function LocationActionView() {
+const { CreateFolderView, DeleteView, LocationActionView } = StorageBrowser;
+
+const MyCreateFolderView = () => {
+  const viewState = useView('CreateFolder');
+  const { isProcessing } = viewState;
+  return (
+    <CreateFolderView.Provider {...viewState}>
+      {isProcessing ? <h1>Folder creation in progress</h1> : null}
+      <CreateFolderView.Start />
+      <CreateFolderView.NameField />
+    </CreateFolderView.Provider>
+  );
+};
+
+const MyDeleteView = () => {
+  const viewState = useView('Delete');
+  const { isProcessing } = viewState;
+  return (
+    <DeleteView.Provider {...viewState}>
+      {isProcessing ? <h1>Delete in progress</h1> : null}
+      <DeleteView.Start />
+      <DeleteView.TasksTable />
+    </DeleteView.Provider>
+  );
+};
+
+function MyLocationActionView({ type }: { type?: string }) {
+  let DialogContent = null;
+  if (!type) return DialogContent;
+
+  switch (type) {
+    case 'createFolder':
+      DialogContent = MyCreateFolderView;
+      break;
+    case 'delete':
+      DialogContent = MyDeleteView;
+      break;
+    default:
+      DialogContent = LocationActionView;
+  }
+
   return (
     <dialog open>
-      <StorageBrowser.LocationActionView />
+      <DialogContent />
     </dialog>
   );
 }
@@ -50,11 +101,12 @@ function MyStorageBrowser() {
       <Flex minWidth={'50vw'} direction={'column'}>
         <StorageBrowser.LocationDetailView
           onActionSelect={(actionType) => {
+            console.log(actionType);
             setActionType(actionType);
           }}
         />
       </Flex>
-      {type ? <LocationActionView /> : null}
+      <MyLocationActionView type={type} />
     </Flex>
   );
 }

examples/next/pages/ui/components/storage/storage-browser/default-auth/index.page.tsx

@@ -2,8 +2,15 @@ import React from 'react';
 import { Amplify } from 'aws-amplify';
 import { signOut } from 'aws-amplify/auth';
 
-import { Button, Flex, View, withAuthenticator } from '@aws-amplify/ui-react';
+import {
+  Button,
+  Flex,
+  IconsProvider,
+  View,
+  withAuthenticator,
+} from '@aws-amplify/ui-react';
 import { StorageBrowser } from '@aws-amplify/ui-react-storage';
+
 import '@aws-amplify/ui-react/styles/reset.css';
 import '@aws-amplify/ui-react-storage/styles.css';
 import '@aws-amplify/ui-react-storage/storage-browser-styles.css';
@@ -12,6 +19,26 @@ import config from './aws-exports';
 
 Amplify.configure(config);
 
+const IndeterminateIcon = () => (
+  <View as="span" className="amplify-icon" width="1em" height="1em">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      width="24"
+      viewBox="0 0 24 24"
+    >
+      <line
+        x1="4"
+        x2="20"
+        y1="12"
+        y2="12"
+        stroke="currentColor"
+        strokeWidth="3"
+      />
+    </svg>
+  </View>
+);
+
 function Example() {
   return (
     <Flex
@@ -32,9 +59,15 @@ function Example() {
         Sign Out
       </Button>
       <View flex="1" overflow="hidden">
-        <StorageBrowser
-          displayText={{ LocationsView: { title: 'Home - Amplify Auth' } }}
-        />
+        <IconsProvider
+          icons={{
+            storageBrowser: { 'sort-indeterminate': <IndeterminateIcon /> },
+          }}
+        >
+          <StorageBrowser
+            displayText={{ LocationsView: { title: 'Home - Amplify Auth' } }}
+          />
+        </IconsProvider>
       </View>
     </Flex>
   );

packages/e2e/cypress/integration/common/shared.ts

@@ -288,6 +288,12 @@ Then('I see the button containing {string}', (name: string) => {
   }).should('exist');
 });
 
+Then('I do not see the button containing {string}', (name: string) => {
+  cy.findByRole('button', {
+    name: new RegExp(`${escapeRegExp(name)}`, 'i'),
+  }).should('not.exist');
+});
+
 Then('I see the first button containing {string}', (name: string) => {
   cy.findAllByRole('button', {
     name: new RegExp(`${escapeRegExp(name)}`, 'i'),
@@ -546,6 +552,13 @@ When('I type my new password', () => {
   cy.findInputField('New Password').type(Cypress.env('VALID_PASSWORD'));
 });
 
+When(
+  'I see input with placeholder {string} and type {string}',
+  (name: string, value: string) => {
+    cy.findByPlaceholderText(name).type(value);
+  }
+);
+
 Then('I click the submit button', () => {
   /**
    * Submit button text differs on React/Vue vs Angular. Testing for both for

packages/e2e/features/ui/components/storage/storage-browser/drag-and-drop.feature

@@ -10,7 +10,7 @@ Feature: Drag and drop files within Storage Browser
       Then I click the "Sign in" button
       When I click the first button containing "public"
       When I drag and drop a file into the storage browser with file name "test.txt"
-      Then I see "Upload Files"
+      Then I see "Upload"
       Then I see "test.txt"
 
   @react
@@ -20,23 +20,22 @@ Feature: Drag and drop files within Storage Browser
       Then I click the "Sign in" button
       When I click the first button containing "public"
       When I drag and drop a folder into the storage browser with name "test"
-      Then I see "Upload Folder"
+      Then I see "Upload"
       Then I see "test"
 
-  """
-  Comment out for now upload is integrated
+
   @react
   Scenario: Drag and drop file into Upload Action view
     When I type my "email" with status "CONFIRMED"
     Then I type my password
     Then I click the "Sign in" button
     When I click the first button containing "public"
-    Then I see the "Actions" button
-    When I click the "Actions" button
-    Then I see the "Upload Files" menuitem
-    Then I click the "Upload Files" menuitem
+    Then I see the "Menu Toggle" button
+    When I click the "Menu Toggle" button
+    Then I see the "Upload" menuitem
+    Then I click the "Upload" menuitem
     # Close the file select menu
     Then I press the "{esc}" key
     When I drag and drop a file into the storage browser with file name "test.txt"
     Then I see "test.txt"
-  """
+

packages/e2e/features/ui/components/storage/storage-browser/filter-locations.feature

@@ -0,0 +1,18 @@
+Feature: StorageBrowser Filter Locations
+
+  Background:
+    Given I'm running the example "ui/components/storage/storage-browser/default-auth"
+
+  @react
+  Scenario: Filter locations
+    When I type my "email" with status "CONFIRMED"
+    Then I type my password
+    Then I click the "Sign in" button
+    Then I see the first button containing "private"
+    When I see input with placeholder "Filter folders and files" and type "pu"
+    Then I click the "Submit" button
+    Then I see the first button containing "public"
+    Then I do not see the button containing "private"
+    When I click the button containing "Clear search"
+    Then I see the first button containing "private"
+

packages/react-core/src/utils/createContextUtilities.tsx

@@ -99,7 +99,11 @@ export default function createContextUtilities<
     throw new Error(INVALID_OPTIONS_MESSAGE);
   }
 
+  const contextDisplayName = `${contextName}Context`;
+  const providerDisplayName = `${contextName}Provider`;
+
   const Context = React.createContext<ContextType | undefined>(defaultValue);
+  Context.displayName = contextDisplayName;
 
   function Provider(props: React.PropsWithChildren<ContextType>) {
     const { children, ...context } = props;
@@ -113,8 +117,7 @@ export default function createContextUtilities<
     return <Context.Provider value={value}>{children}</Context.Provider>;
   }
 
-  Provider.displayName = `${contextName}Provider`;
-
+  Provider.displayName = providerDisplayName;
   return {
     [`use${contextName}`]: function (params?: HookParams) {
       const context = React.useContext(Context);
@@ -125,7 +128,7 @@ export default function createContextUtilities<
 
       return context;
     },
-    [`${contextName}Provider`]: Provider,
-    [`${contextName}Context`]: Context,
+    [providerDisplayName]: Provider,
+    [contextDisplayName]: Context,
   } as CreateContextUtilitiesReturn<ContextType, ContextName>;
 }

packages/react-storage/package.json

@@ -70,7 +70,7 @@
       "name": "createStorageBrowser",
       "path": "dist/esm/browser.mjs",
       "import": "{ createStorageBrowser }",
-      "limit": "30 kB",
+      "limit": "37 kB",
       "ignore": [
         "@aws-amplify/storage"
       ]
@@ -79,7 +79,7 @@
       "name": "FileUploader",
       "path": "dist/esm/index.mjs",
       "import": "{ FileUploader }",
-      "limit": "21.6 kB"
+      "limit": "25.00 kB"
     },
     {
       "name": "StorageImage",

packages/react-storage/src/components/StorageBrowser/ComponentsProvider.tsx

@@ -5,9 +5,7 @@ import { ElementsProvider } from '@aws-amplify/ui-react-core/elements';
 import { ComposablesProvider, Composables } from './composables';
 import { StorageBrowserElements } from './context/elements';
 
-export interface Components
-  // omitted values have not yet been integrated with views
-  extends Omit<Partial<Composables>, 'Message'> {}
+export interface Components extends Partial<Composables> {}
 
 export interface ComponentsProviderProps {
   children?: React.ReactNode;

packages/react-storage/src/components/StorageBrowser/StorageBrowserAmplify.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
 
 import { elementsDefault } from './context/elements';
-import {
-  createStorageBrowser,
-  StorageBrowserProps as StorageBrowserPropsBase,
-} from './createStorageBrowser';
+import { createStorageBrowser } from './createStorageBrowser';
+import { StorageBrowserProps as StorageBrowserPropsBase } from './types';
 import { createAmplifyAuthAdapter } from './adapters';
 import { TextField } from '@aws-amplify/ui-react';