Revert "Resolve merge conflict by incorporating both suggestions"

This reverts commit 26252ff, reversing
changes made to 98af62e.

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

@@ -6,7 +6,6 @@ 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>;
@@ -17,7 +16,6 @@ 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/types.ts

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

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

@@ -6,6 +6,7 @@ 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;
@@ -16,6 +17,7 @@ export interface Controls {
   Paginate: typeof PaginateControl;
   Search: typeof SearchControl;
   Table: typeof TableControl;
+  Title: typeof TitleControl;
 }
 
 export const Controls: Controls = {
@@ -27,4 +29,5 @@ export const Controls: Controls = {
   Paginate: PaginateControl,
   Search: SearchControl,
   Table: TableControl,
+  Title: TitleControl,
 };

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

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { HeadingElement } from '../../context/elements/definitions';
+import { CLASS_BASE } from '../constants';
+
+const BLOCK_NAME = `${CLASS_BASE}__title`;
+
+interface TitleControlProps {
+  children?: React.ReactNode;
+}
+
+export const TitleControl = ({
+  children,
+}: TitleControlProps): React.JSX.Element => (
+  <HeadingElement className={BLOCK_NAME}>{children}</HeadingElement>
+);

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { TitleControl } from '../Title';
+
+describe('TitleControl', () => {
+  it('renders the TitleControl', () => {
+    render(<TitleControl />);
+
+    const title = screen.getByRole('heading');
+    expect(title).toBeInTheDocument();
+  });
+});

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

@@ -1,7 +1,10 @@
 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 { TableControl, LocationDetailViewTable } from './Table';
+export { TitleControl } from './Title';
+export { TableControl } from './Table';
 export { Controls } from './Controls';

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

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { TitleControl } from '../../Controls/Title';
+import { useStore } from '../../../providers/store';
+import { useTempActions } from '../../../do-not-import-from-here/createTempActionsProvider';
+
+export const Title = (): React.JSX.Element | null => {
+  const [{ actionType }] = useStore();
+  const actions = useTempActions();
+  const action = actionType ? actions[actionType] : undefined;
+  const title = action?.options?.displayName ?? '-';
+
+  return <TitleControl>{title}</TitleControl>;
+};

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

@@ -4,25 +4,24 @@ 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, GetTitle } from './utils';
+import { getActionViewTableData } 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 { 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';
+import { CopyHandlerData } from '../../actions';
 
 const { Exit } = Controls;
 const { actionSetDestination } = displayText;
@@ -53,7 +52,6 @@ export const CopyFilesControls = ({
     path: key,
   });
 
-  const title = GetTitle();
   const contextValue: ControlsContext = {
     data: {
       taskCounts,
@@ -62,7 +60,6 @@ export const CopyFilesControls = ({
       isActionStartDisabled: disablePrimary,
       isActionCancelDisabled: disableCancel,
       actionCancelLabel: 'Cancel',
-      title,
     },
     actionsConfig: { type: 'BATCH_ACTION', isCancelable: true },
     onActionStart,
@@ -79,7 +76,7 @@ export const CopyFilesControls = ({
         disabled={disableClose}
       />
 
-      <TitleControl className={`${CLASS_BASE}__copy-action-view-title`} />
+      <Title />
 
       <ViewElement className={`${CLASS_BASE}__table-wrapper`}>
         <DataTableControl className={`${CLASS_BASE}__table`} />

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

@@ -9,12 +9,10 @@ import { useStore } from '../../providers/store';
 
 import { Controls } from '../Controls';
 
-import { GetTitle } from './utils';
+import { Title } from './Controls/Title';
 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;
@@ -97,15 +95,13 @@ 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',
@@ -121,9 +117,7 @@ export const CreateFolderControls = ({
           handleClose();
         }}
       />
-      <TitleControl
-        className={`${CLASS_BASE}__create-folder-action-view-title`}
-      />
+      <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, GetTitle } from './utils';
-import { LocationData } from '../../actions';
+import { getActionViewTableData } from './utils';
 import { ActionStartControl } from '../../controls/ActionStartControl';
 import { ActionCancelControl } from '../../controls/ActionCancelControl';
-import { DataTableControl } from '../../controls/DataTableControl';
-import { StatusDisplayControl } from '../../controls/StatusDisplayControl';
-import { TitleControl } from '../../controls/TitleControl';
+import { LocationData } from '../../actions';
 
 const { Exit } = Controls;
 
@@ -38,7 +38,7 @@ export const DeleteFilesControls = (props: {
     taskCounts,
     path: key,
   });
-  const title = GetTitle();
+
   const contextValue: ControlsContext = {
     data: {
       taskCounts,
@@ -47,7 +47,6 @@ export const DeleteFilesControls = (props: {
       actionStartLabel: 'Start',
       actionCancelLabel: 'Cancel',
       isActionCancelDisabled: disableCancel,
-      title,
     },
     actionsConfig: { type: 'BATCH_ACTION', isCancelable: true },
     onActionStart,
@@ -62,7 +61,7 @@ export const DeleteFilesControls = (props: {
         }}
         disabled={disableClose}
       />
-      <TitleControl className={`${CLASS_BASE}__delete-action-view-title`} />
+      <Title />
       <ViewElement className={`${CLASS_BASE}__table-wrapper`}>
         <DataTableControl className={`${CLASS_BASE}__table`} />
       </ViewElement>