Resolve merge conflict by incorporating both suggestions

packages/react-storage/src/components/StorageBrowser/composables/Title.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { HeadingElement } from '../context/elements';
+import { CLASS_BASE } from '../views/constants';
+
+export interface TitleProps {
+  title?: string;
+}
+
+export const Title = ({ title }: TitleProps): React.JSX.Element => (
+  <HeadingElement className={`${CLASS_BASE}__title`}>{title}</HeadingElement>
+);

packages/react-storage/src/components/StorageBrowser/composables/__tests__/Title.spec.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Title } from '../Title';
+import { CLASS_BASE } from '../../views/constants';
+
+describe('Title', () => {
+  it('renders and has the given classname', () => {
+    const expectedTitle = 'StorageBrowser';
+    const BLOCK_NAME = `${CLASS_BASE}__title`;
+
+    render(<Title title={expectedTitle} />);
+
+    const [renderedTitle] = screen.getAllByRole('heading');
+
+    expect(renderedTitle).toHaveTextContent('StorageBrowser');
+    expect(renderedTitle).toHaveClass(BLOCK_NAME);
+  });
+});

packages/react-storage/src/components/StorageBrowser/composables/types.ts

@@ -6,6 +6,7 @@ import { DropZoneProps } from './DropZone';
 import { NavigationProps } from './Navigation';
 import { StatusDisplayProps } from './StatusDisplay';
 import { SearchProps } from './Search';
+import { TitleProps } from './Title';
 
 export interface Composables {
   ActionStart: React.ComponentType<ActionStartProps>;
@@ -16,6 +17,7 @@ export interface Composables {
   Navigation: React.ComponentType<NavigationProps>;
   StatusDisplay: React.ComponentType<StatusDisplayProps>;
   Search: React.ComponentType<SearchProps>;
+  Title: React.ComponentType<TitleProps>;
 }
 
 export interface ComposablesContext {

packages/react-storage/src/components/StorageBrowser/controls/TitleControl.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { Title } from '../composables/Title';
+import { ViewElement } from '../context/elements';
+import { ControlProps } from './types';
+import { useResolvedComposable } from './hooks/useResolvedComposable';
+import { useTitle } from './hooks/useTitle';
+
+export const TitleControl = ({
+  className,
+}: ControlProps): React.JSX.Element => {
+  const props = useTitle();
+  const ResolvedTitle = useResolvedComposable(Title, 'Title');
+
+  return (
+    <ViewElement className={className}>
+      <ResolvedTitle {...props} />
+    </ViewElement>
+  );
+};

packages/react-storage/src/components/StorageBrowser/controls/__tests__/TitleControl.spec.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { TitleControl } from '../TitleControl';
+import { CLASS_BASE } from '../../views/constants';
+import * as useTitleModule from '../hooks/useTitle';
+
+const BLOCK_NAME = `${CLASS_BASE}__title`;
+
+describe('TitleControl', () => {
+  const useTitleSpy = jest.spyOn(useTitleModule, 'useTitle');
+
+  afterEach(() => {
+    useTitleSpy.mockReset();
+  });
+
+  it('renders', () => {
+    useTitleSpy.mockReturnValue({
+      title: 'Amplify',
+    });
+
+    render(<TitleControl />);
+
+    const [renderedTitle] = screen.getAllByRole('heading');
+
+    expect(renderedTitle).toHaveTextContent('Amplify');
+    expect(renderedTitle).toHaveClass(BLOCK_NAME);
+  });
+});

packages/react-storage/src/components/StorageBrowser/controls/hooks/__tests__/useTitle.spec.tsx

@@ -0,0 +1,32 @@
+import { useControlsContext } from '../../../controls/context';
+import { useTitle } from '../useTitle';
+
+jest.mock('../../../controls/context');
+
+describe('useTitle', () => {
+  const data = {
+    title: 'ShinyNewTitle',
+  };
+
+  const mockUseControlsContext = jest.mocked(useControlsContext);
+
+  afterEach(() => {
+    mockUseControlsContext.mockReset();
+  });
+
+  it('returns Title data', () => {
+    mockUseControlsContext.mockReturnValue({ data });
+
+    expect(useTitle()).toStrictEqual({
+      title: 'ShinyNewTitle',
+    });
+  });
+
+  it('returns empty string for children if title is missing from data', () => {
+    mockUseControlsContext.mockReturnValue({ data: {} });
+
+    expect(useTitle()).toStrictEqual({
+      title: undefined,
+    });
+  });
+});

packages/react-storage/src/components/StorageBrowser/controls/hooks/useTitle.tsx

@@ -0,0 +1,10 @@
+import { TitleProps } from '../../composables/Title';
+import { useControlsContext } from '../../controls/context';
+
+export const useTitle = (): TitleProps => {
+  const { data } = useControlsContext();
+
+  return {
+    title: data?.title,
+  };
+};

packages/react-storage/src/components/StorageBrowser/controls/types.ts

@@ -44,6 +44,7 @@ export interface ControlsContext {
     searchPlaceholder?: string;
     tableData?: TableData;
     taskCounts?: TaskCounts;
+    title?: string;
   };
   actionsConfig?: {
     type:

packages/react-storage/src/components/StorageBrowser/views/Controls/Controls.tsx

@@ -6,7 +6,6 @@ import { OverwriteControl } from './Overwrite';
 import { PaginateControl } from './Paginate';
 import { SearchControl } from './Search';
 import { TableControl } from './Table';
-import { TitleControl } from './Title';
 
 export interface Controls {
   EmptyMessage: typeof EmptyMessageControl;
@@ -17,7 +16,6 @@ export interface Controls {
   Paginate: typeof PaginateControl;
   Search: typeof SearchControl;
   Table: typeof TableControl;
-  Title: typeof TitleControl;
 }
 
 export const Controls: Controls = {
@@ -29,5 +27,4 @@ export const Controls: Controls = {
   Paginate: PaginateControl,
   Search: SearchControl,
   Table: TableControl,
-  Title: TitleControl,
 };

packages/react-storage/src/components/StorageBrowser/views/Controls/index.ts

@@ -1,10 +1,7 @@
 export { EmptyMessageControl } from './EmptyMessage';
 export { ExitControl } from './Exit';
 export { LoadingControl } from './Loading';
-export { MessageControl } from './Message';
-export { OverwriteControl } from './Overwrite';
 export { PaginateControl } from './Paginate';
 export { SearchControl } from './Search';
-export { TitleControl } from './Title';
-export { TableControl } from './Table';
+export { TableControl, LocationDetailViewTable } from './Table';
 export { Controls } from './Controls';

packages/react-storage/src/components/StorageBrowser/views/LocationActionView/CopyFilesControls.tsx

@@ -4,25 +4,26 @@ import { ViewElement } from '../../context/elements';
 
 import { Controls } from '../Controls';
 
-import { Title } from './Controls/Title';
 import { displayText } from '../../displayText/en';
 import { CLASS_BASE } from '../constants';
 import { DestinationPicker } from './DestinationPicker';
 
 import { useCopyView } from './CopyView/useCopyView';
-import { DataTableControl } from '../../controls/DataTableControl';
 import { ControlsContextProvider } from '../../controls/context';
-import { getActionViewTableData } from './utils';
+import { getActionViewTableData, GetTitle } from './utils';
 import { useStore } from '../../providers/store';
 import { ControlsContext } from '../../controls/types';
-import { ActionStartControl } from '../../controls/ActionStartControl';
 import { getTasksHaveStarted } from './utils';
 import { DescriptionList } from '../../components/DescriptionList';
-import { StatusDisplayControl } from '../../controls/StatusDisplayControl';
 import { getDestinationListFullPrefix } from './utils/getDestinationPickerDataTable';
-import { ActionCancelControl } from '../../controls/ActionCancelControl';
 import { CopyHandlerData } from '../../actions';
 
+import { ActionCancelControl } from '../../controls/ActionCancelControl';
+import { ActionStartControl } from '../../controls/ActionStartControl';
+import { DataTableControl } from '../../controls/DataTableControl';
+import { StatusDisplayControl } from '../../controls/StatusDisplayControl';
+import { TitleControl } from '../../controls/TitleControl';
+
 const { Exit } = Controls;
 const { actionSetDestination } = displayText;
 
@@ -52,6 +53,7 @@ export const CopyFilesControls = ({
     path: key,
   });
 
+  const title = GetTitle();
   const contextValue: ControlsContext = {
     data: {
       taskCounts,
@@ -60,6 +62,7 @@ export const CopyFilesControls = ({
       isActionStartDisabled: disablePrimary,
       isActionCancelDisabled: disableCancel,
       actionCancelLabel: 'Cancel',
+      title,
     },
     actionsConfig: { type: 'BATCH_ACTION', isCancelable: true },
     onActionStart,
@@ -76,7 +79,7 @@ export const CopyFilesControls = ({
         disabled={disableClose}
       />
 
-      <Title />
+      <TitleControl className={`${CLASS_BASE}__copy-action-view-title`} />
 
       <ViewElement className={`${CLASS_BASE}__table-wrapper`}>
         <DataTableControl className={`${CLASS_BASE}__table`} />

packages/react-storage/src/components/StorageBrowser/views/LocationActionView/CreateFolderControls.tsx

@@ -9,10 +9,12 @@ import { useStore } from '../../providers/store';
 
 import { Controls } from '../Controls';
 
-import { Title } from './Controls/Title';
+import { GetTitle } from './utils';
 import { ActionStartControl } from '../../controls/ActionStartControl';
 import { ControlsContext } from '../../controls/types';
 import { ControlsContextProvider } from '../../controls/context';
+import { TitleControl } from '../../controls/TitleControl';
+
 import { CLASS_BASE } from '../constants';
 
 const { Exit, Message } = Controls;
@@ -95,13 +97,15 @@ export const CreateFolderControls = ({
 
   const hasCompletedStatus = result?.status === 'COMPLETE';
 
+  const title = GetTitle();
   // FIXME: Eventually comes from useView hook
   const contextValue: ControlsContext = {
     data: {
       actionStartLabel: hasCompletedStatus ? 'Folder created' : 'Create Folder',
       isActionStartDisabled: !hasCompletedStatus
         ? !folderName || !!fieldValidationError
         : undefined,
+      title,
     },
     actionsConfig: {
       type: 'SINGLE_ACTION',
@@ -117,7 +121,9 @@ export const CreateFolderControls = ({
           handleClose();
         }}
       />
-      <Title />
+      <TitleControl
+        className={`${CLASS_BASE}__create-folder-action-view-title`}
+      />
       <ActionStartControl
         className={`${CLASS_BASE}__create-folder-action-start`}
       />

packages/react-storage/src/components/StorageBrowser/views/LocationActionView/DeleteFilesControls.tsx

@@ -2,18 +2,18 @@ import React from 'react';
 
 import { Controls } from '../Controls';
 import { ViewElement } from '../../context/elements';
-import { DataTableControl } from '../../controls/DataTableControl';
 import { ControlsContextProvider } from '../../controls/context';
 import { CLASS_BASE } from '../constants';
-import { Title } from './Controls/Title';
 import { useDeleteView } from './DeleteView/useDeleteView';
-import { StatusDisplayControl } from '../../controls/StatusDisplayControl';
 import { ControlsContext } from '../../controls/types';
 import { useStore } from '../../providers/store';
-import { getActionViewTableData } from './utils';
+import { getActionViewTableData, GetTitle } from './utils';
+import { LocationData } from '../../actions';
 import { ActionStartControl } from '../../controls/ActionStartControl';
 import { ActionCancelControl } from '../../controls/ActionCancelControl';
-import { LocationData } from '../../actions';
+import { DataTableControl } from '../../controls/DataTableControl';
+import { StatusDisplayControl } from '../../controls/StatusDisplayControl';
+import { TitleControl } from '../../controls/TitleControl';
 
 const { Exit } = Controls;
 
@@ -38,7 +38,7 @@ export const DeleteFilesControls = (props: {
     taskCounts,
     path: key,
   });
-
+  const title = GetTitle();
   const contextValue: ControlsContext = {
     data: {
       taskCounts,
@@ -47,6 +47,7 @@ export const DeleteFilesControls = (props: {
       actionStartLabel: 'Start',
       actionCancelLabel: 'Cancel',
       isActionCancelDisabled: disableCancel,
+      title,
     },
     actionsConfig: { type: 'BATCH_ACTION', isCancelable: true },
     onActionStart,
@@ -61,7 +62,7 @@ export const DeleteFilesControls = (props: {
         }}
         disabled={disableClose}
       />
-      <Title />
+      <TitleControl className={`${CLASS_BASE}__delete-action-view-title`} />
       <ViewElement className={`${CLASS_BASE}__table-wrapper`}>
         <DataTableControl className={`${CLASS_BASE}__table`} />
       </ViewElement>