refactor(react-storage): Primary to composable ActionStart

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ButtonElement } from '../context/elements';
+import { CLASS_BASE } from '../views/constants';
+
+export interface ActionStartProps {
+  onStart?: () => void;
+  isDisabled?: boolean;
+  label?: string;
+}
+
+export const ActionStart = ({
+  onStart,
+  isDisabled,
+  label,
+}: ActionStartProps): React.JSX.Element => (
+  <ButtonElement
+    variant="primary"
+    className={`${CLASS_BASE}__action-start`}
+    onClick={onStart}
+    disabled={isDisabled}
+  >
+    {label}
+  </ButtonElement>
+);

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ActionStart } from '../ActionStart';
+import { CLASS_BASE } from '../../views/constants';
+
+describe('ActionStart', () => {
+  it('renders a button element', () => {
+    render(<ActionStart />);
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('renders a button with the expected className', () => {
+    render(<ActionStart />);
+    const button = screen.getByRole('button');
+    expect(button).toHaveClass(`${CLASS_BASE}__action-start`);
+  });
+
+  it('renders a button with the expected text', () => {
+    render(<ActionStart label="Start" />);
+    const button = screen.getByRole('button');
+    expect(button).toHaveTextContent('Start');
+  });
+
+  it('renders a button with the expected disabled state', () => {
+    render(<ActionStart isDisabled />);
+    const button = screen.getByRole('button');
+    expect(button).toBeDisabled();
+  });
+});

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

@@ -1,11 +1,13 @@
 import { DataTableProps } from './DataTable';
 import { StatusDisplayProps } from './StatusDisplay';
 import { DataRefreshProps } from './DataRefresh';
+import { ActionStartProps } from './ActionStart';
 
 export interface Composables {
   DataRefresh: React.ComponentType<DataRefreshProps>;
   DataTable: React.ComponentType<DataTableProps>;
   StatusDisplay: React.ComponentType<StatusDisplayProps>;
+  ActionStart: React.ComponentType<ActionStartProps>;
 }
 
 export interface ComposablesContext {

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

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { ControlProps } from './types';
+import { useResolvedComposable } from './hooks/useResolvedComposable';
+import { ActionStart } from '../composables/ActionStart';
+import { useActionStart } from './hooks/useActionStart';
+import { ViewElement } from '../context/elements';
+
+export const ActionStartControl = ({
+  className,
+}: ControlProps): React.JSX.Element | null => {
+  const props = useActionStart();
+  const ResolvedActionStart = useResolvedComposable(ActionStart, 'ActionStart');
+
+  return (
+    <ViewElement className={className}>
+      <ResolvedActionStart {...props} />
+    </ViewElement>
+  );
+};

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ActionStartControl } from '../ActionStartControl';
+import * as useActionStartModule from '../hooks/useActionStart';
+
+describe('ActionStartControl', () => {
+  const useActionStartSpy = jest.spyOn(useActionStartModule, 'useActionStart');
+
+  afterEach(() => {
+    useActionStartSpy.mockClear();
+  });
+
+  afterAll(() => {
+    useActionStartSpy.mockRestore();
+  });
+
+  it('renders', () => {
+    useActionStartSpy.mockReturnValue({
+      isDisabled: false,
+      onStart: jest.fn(),
+      label: 'Start',
+    });
+    render(<ActionStartControl />);
+
+    const button = screen.getByRole('button', {
+      name: 'Start',
+    });
+
+    expect(button).toBeInTheDocument();
+  });
+
+  it('renders with custom label', () => {
+    useActionStartSpy.mockReturnValue({
+      isDisabled: false,
+      onStart: jest.fn(),
+      label: 'Custom Label',
+    });
+    render(<ActionStartControl />);
+
+    const button = screen.getByRole('button', {
+      name: 'Custom Label',
+    });
+
+    expect(button).toBeInTheDocument();
+  });
+
+  it('calls onStart when button is clicked', () => {
+    const mockOnStart = jest.fn();
+    useActionStartSpy.mockReturnValue({
+      isDisabled: false,
+      onStart: mockOnStart,
+      label: 'Start',
+    });
+    render(<ActionStartControl />);
+
+    const button = screen.getByRole('button', {
+      name: 'Start',
+    });
+
+    button.click();
+
+    expect(mockOnStart).toHaveBeenCalled();
+  });
+});

packages/react-storage/src/components/StorageBrowser/controls/hooks/__tests__/useActionStart.spec.ts

@@ -0,0 +1,48 @@
+import * as controlsContextModule from '../../../controls/context';
+import { ControlsContext } from '../../types';
+import { useActionStart } from '../useActionStart';
+
+describe('useActionStart', () => {
+  const controlsContext: ControlsContext = {
+    data: {
+      actionStartLabel: 'Start',
+    },
+    actionsConfig: {
+      isCancelable: true,
+      type: 'BATCH_ACTION',
+    },
+    onActionStart: jest.fn(),
+  };
+
+  const useControlsContextSpy = jest.spyOn(
+    controlsContextModule,
+    'useControlsContext'
+  );
+
+  afterEach(() => {
+    useControlsContextSpy.mockClear();
+  });
+
+  afterAll(() => {
+    useControlsContextSpy.mockRestore();
+  });
+
+  it('returns object as it is received from ControlsContext', () => {
+    useControlsContextSpy.mockReturnValue(controlsContext);
+
+    expect(useActionStart()).toStrictEqual({
+      label: controlsContext.data.actionStartLabel,
+      onStart: expect.any(Function),
+      isDisabled: controlsContext.data.isActionStartDisabled,
+    });
+  });
+
+  it('calls onActionStart from ControlsContext when onStart is called', () => {
+    useControlsContextSpy.mockReturnValue(controlsContext);
+
+    const { onStart } = useActionStart();
+    onStart!();
+
+    expect(controlsContext.onActionStart).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -0,0 +1,14 @@
+import { ActionStartProps } from '../../composables/ActionStart';
+import { useControlsContext } from '../../controls/context';
+
+export const useActionStart = (): ActionStartProps => {
+  const {
+    data: { actionStartLabel, isActionStartDisabled },
+    onActionStart,
+  } = useControlsContext();
+  return {
+    label: actionStartLabel,
+    isDisabled: isActionStartDisabled,
+    onStart: onActionStart,
+  };
+};

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

@@ -35,6 +35,8 @@ export interface ControlsContext {
     taskCounts?: TaskCounts;
     tableData?: TableData;
     isDataRefreshDisabled?: boolean;
+    actionStartLabel?: string;
+    isActionStartDisabled?: boolean;
   };
   actionsConfig?: {
     type:
@@ -45,4 +47,5 @@ export interface ControlsContext {
     isCancelable?: boolean;
   };
   onRefresh?: () => void;
+  onActionStart?: () => void;
 }

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

@@ -7,7 +7,6 @@ import { MessageControl } from './Message';
 import { NavigateControl } from './Navigate';
 import { OverwriteControl } from './Overwrite';
 import { PaginateControl } from './Paginate';
-import { PrimaryControl } from './Primary';
 import { SearchControl } from './Search';
 import { TableControl } from './Table';
 import { TitleControl } from './Title';
@@ -21,7 +20,6 @@ export interface Controls {
   Message: typeof MessageControl;
   Overwrite: typeof OverwriteControl;
   Paginate: typeof PaginateControl;
-  Primary: typeof PrimaryControl;
   Navigate: typeof NavigateControl;
   Search: typeof SearchControl;
   Table: typeof TableControl;
@@ -37,7 +35,6 @@ export const Controls: Controls = {
   Message: MessageControl,
   Overwrite: OverwriteControl,
   Paginate: PaginateControl,
-  Primary: PrimaryControl,
   Navigate: NavigateControl,
   Search: SearchControl,
   Table: TableControl,

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

@@ -7,7 +7,6 @@ export { MessageControl } from './Message';
 export { NavigateControl, NavigateItem } from './Navigate';
 export { OverwriteControl } from './Overwrite';
 export { PaginateControl } from './Paginate';
-export { PrimaryControl } from './Primary';
 export { SearchControl } from './Search';
 export { TitleControl } from './Title';
 export { TableControl, LocationDetailViewTable } from './Table';

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

@@ -9,8 +9,12 @@ import { useStore } from '../../providers/store';
 import { Controls } from '../Controls';
 
 import { Title } from './Controls/Title';
+import { ActionStartControl } from '../../controls/ActionStartControl';
+import { ControlsContext } from '../../controls/types';
+import { ControlsContextProvider } from '../../controls/context';
+import { CLASS_BASE } from '../constants';
 
-const { Exit, Message, Primary } = Controls;
+const { Exit, Message } = Controls;
 
 export const isValidFolderName = (name: string | undefined): boolean =>
   !!name?.length && !name.includes('/');
@@ -88,31 +92,34 @@ export const CreateFolderControls = ({
     handleCreateAction({ prefix: '', options: { reset: true } });
   };
 
-  const primaryProps =
-    result?.status === 'COMPLETE'
-      ? {
-          onClick: () => {
-            handleClose();
-          },
-          children: 'Folder created',
-        }
-      : {
-          onClick: () => {
-            handleCreateFolder();
-          },
-          children: 'Create Folder',
-          disabled: !folderName || !!fieldValidationError,
-        };
+  const hasCompletedStatus = result?.status === 'COMPLETE';
+
+  // FIXME: Eventually comes from useView hook
+  const contextValue: ControlsContext = {
+    data: {
+      actionStartLabel: hasCompletedStatus ? 'Folder created' : 'Create Folder',
+      isActionStartDisabled: !hasCompletedStatus
+        ? !folderName || !!fieldValidationError
+        : undefined,
+    },
+    actionsConfig: {
+      type: 'SINGLE_ACTION',
+      isCancelable: true,
+    },
+    onActionStart: hasCompletedStatus ? handleClose : handleCreateFolder,
+  };
 
   return (
-    <>
+    <ControlsContextProvider {...contextValue}>
       <Exit
         onClick={() => {
           handleClose();
         }}
       />
       <Title />
-      <Primary {...primaryProps} />
+      <ActionStartControl
+        className={`${CLASS_BASE}__create-folder-action-start`}
+      />
       <Field
         label="Enter folder name:"
         disabled={isLoading || !!result?.status}
@@ -132,6 +139,6 @@ export const CreateFolderControls = ({
       {result?.status === 'COMPLETE' || result?.status === 'FAILED' ? (
         <CreateFolderMessage />
       ) : null}
-    </>
+    </ControlsContextProvider>
   );
 };