Move workflow actions to dedicated view

src/views/workflow-page/__fixtures__/workflow-actions-config.ts → src/views/workflow-actions/__fixtures__/workflow-actions-config.ts

@@ -1,8 +1,8 @@
 import { MdHighlightOff, MdPowerSettingsNew } from 'react-icons/md';
 
-import { type WorkflowAction } from '../workflow-page-actions-menu/workflow-page-actions-menu.types';
+import { type WorkflowAction } from '../workflow-actions.types';
 
-export const mockWorkflowPageActionsConfig = [
+export const mockWorkflowActionsConfig = [
   {
     id: 'cancel',
     label: 'Mock cancel',

src/views/workflow-page/workflow-page-actions-button/__tests__/workflow-page-actions-button.test.tsx → src/views/workflow-actions/__tests__/workflow-actions.test.tsx

@@ -4,9 +4,10 @@ import { HttpResponse } from 'msw';
 
 import { act, render, screen, userEvent } from '@/test-utils/rtl';
 
-import { describeWorkflowResponse } from '../../__fixtures__/describe-workflow-response';
-import { mockWorkflowPageActionsConfig } from '../../__fixtures__/workflow-actions-config';
-import WorkflowPageActionsButton from '../workflow-page-actions-button';
+import { describeWorkflowResponse } from '@/views/workflow-page/__fixtures__/describe-workflow-response';
+
+import { mockWorkflowActionsConfig } from '../__fixtures__/workflow-actions-config';
+import WorkflowActions from '../workflow-actions';
 
 jest.mock('next/navigation', () => ({
   ...jest.requireActual('next/navigation'),
@@ -18,19 +19,19 @@ jest.mock('next/navigation', () => ({
   }),
 }));
 
-jest.mock('../../workflow-page-actions-modal/workflow-page-actions-modal', () =>
+jest.mock('../workflow-actions-modal/workflow-actions-modal', () =>
   jest.fn((props) => {
     return props.action ? (
       <div data-testid="actions-modal">Actions Modal</div>
     ) : null;
   })
 );
 
-jest.mock('../../workflow-page-actions-menu/workflow-page-actions-menu', () =>
+jest.mock('../workflow-actions-menu/workflow-actions-menu', () =>
   jest.fn((props) => {
     return (
       <div
-        onClick={() => props.onActionSelect(mockWorkflowPageActionsConfig[0])}
+        onClick={() => props.onActionSelect(mockWorkflowActionsConfig[0])}
         data-testid="actions-menu"
       >
         Actions Menu{props.disabled ? ' (disabled)' : ''}
@@ -39,7 +40,7 @@ jest.mock('../../workflow-page-actions-menu/workflow-page-actions-menu', () =>
   })
 );
 
-describe(WorkflowPageActionsButton.name, () => {
+describe(WorkflowActions.name, () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
@@ -88,7 +89,7 @@ async function setup({ isError }: { isError?: boolean }) {
 
   const renderResult = render(
     <Suspense>
-      <WorkflowPageActionsButton />
+      <WorkflowActions />
     </Suspense>,
     {
       endpointsMocks: [

src/views/workflow-page/config/workflow-page-actions.config.ts → src/views/workflow-actions/config/workflow-actions.config.ts

@@ -1,9 +1,10 @@
 import { MdHighlightOff, MdPowerSettingsNew } from 'react-icons/md';
 
-import getWorkflowIsCompleted from '../helpers/get-workflow-is-completed';
-import { type WorkflowAction } from '../workflow-page-actions-menu/workflow-page-actions-menu.types';
+import getWorkflowIsCompleted from '@/views/workflow-page/helpers/get-workflow-is-completed';
 
-const workflowPageActionsConfig = [
+import { type WorkflowAction } from '../workflow-actions.types';
+
+const workflowActionsConfig = [
   {
     id: 'cancel',
     label: 'Cancel',
@@ -26,4 +27,4 @@ const workflowPageActionsConfig = [
   },
 ] as const satisfies Array<WorkflowAction>;
 
-export default workflowPageActionsConfig;
+export default workflowActionsConfig;

src/views/workflow-page/workflow-page-actions-menu/__tests__/workflow-page-actions-menu.test.tsx → src/views/workflow-actions/workflow-actions-menu/__tests__/workflow-actions-menu.test.tsx

@@ -2,16 +2,17 @@ import React from 'react';
 
 import { render, screen, userEvent, within } from '@/test-utils/rtl';
 
-import { describeWorkflowResponse } from '../../__fixtures__/describe-workflow-response';
-import { mockWorkflowPageActionsConfig } from '../../__fixtures__/workflow-actions-config';
-import WorkflowPageActionsMenu from '../workflow-page-actions-menu';
+import { describeWorkflowResponse } from '@/views/workflow-page/__fixtures__/describe-workflow-response';
+
+import { mockWorkflowActionsConfig } from '../../__fixtures__/workflow-actions-config';
+import WorkflowActionsMenu from '../workflow-actions-menu';
 
 jest.mock(
-  '../../config/workflow-page-actions.config',
-  () => mockWorkflowPageActionsConfig
+  '../../config/workflow-actions.config',
+  () => mockWorkflowActionsConfig
 );
 
-describe(WorkflowPageActionsMenu.name, () => {
+describe(WorkflowActionsMenu.name, () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
@@ -55,7 +56,7 @@ function setup() {
   const mockOnActionSelect = jest.fn();
 
   const renderResult = render(
-    <WorkflowPageActionsMenu
+    <WorkflowActionsMenu
       workflow={describeWorkflowResponse}
       onActionSelect={mockOnActionSelect}
     />

src/views/workflow-page/workflow-page-actions-menu/workflow-page-actions-menu.tsx → src/views/workflow-actions/workflow-actions-menu/workflow-actions-menu.tsx

@@ -1,17 +1,17 @@
 import { Button, KIND } from 'baseui/button';
 
-import workflowPageActionsConfig from '../config/workflow-page-actions.config';
+import workflowActionsConfig from '../config/workflow-actions.config';
 
-import { overrides, styled } from './workflow-page-actions-menu.styles';
-import { type Props } from './workflow-page-actions-menu.types';
+import { overrides, styled } from './workflow-actions-menu.styles';
+import { type Props } from './workflow-actions-menu.types';
 
-export default function WorkflowPageActionsMenu({
+export default function WorkflowActionsMenu({
   workflow,
   onActionSelect,
 }: Props) {
   return (
     <styled.MenuItemsContainer>
-      {workflowPageActionsConfig.map((action) => (
+      {workflowActionsConfig.map((action) => (
         <Button
           key={action.id}
           kind={KIND.tertiary}

src/views/workflow-actions/workflow-actions-menu/workflow-actions-menu.types.ts

@@ -0,0 +1,8 @@
+import { type DescribeWorkflowResponse } from '@/route-handlers/describe-workflow/describe-workflow.types';
+
+import { type WorkflowAction } from '../workflow-actions.types';
+
+export type Props = {
+  workflow: DescribeWorkflowResponse;
+  onActionSelect: (action: WorkflowAction) => void;
+};

src/views/workflow-page/workflow-page-actions-modal/__tests__/workflow-page-actions-modal.test.tsx → src/views/workflow-actions/workflow-actions-modal/__tests__/workflow-actions-modal.test.tsx

@@ -2,9 +2,10 @@ import { type ModalProps } from 'baseui/modal';
 
 import { render, screen, userEvent } from '@/test-utils/rtl';
 
-import { describeWorkflowResponse } from '../../__fixtures__/describe-workflow-response';
-import { mockWorkflowPageActionsConfig } from '../../__fixtures__/workflow-actions-config';
-import WorkflowPageActionsModal from '../workflow-page-actions-modal';
+import { describeWorkflowResponse } from '@/views/workflow-page/__fixtures__/describe-workflow-response';
+
+import { mockWorkflowActionsConfig } from '../../__fixtures__/workflow-actions-config';
+import WorkflowActionsModal from '../workflow-actions-modal';
 
 jest.mock('baseui/modal', () => ({
   ...jest.requireActual('baseui/modal'),
@@ -16,7 +17,7 @@ jest.mock('baseui/modal', () => ({
     ) : null,
 }));
 
-describe(WorkflowPageActionsModal.name, () => {
+describe(WorkflowActionsModal.name, () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
@@ -54,9 +55,9 @@ function setup({ omitAction }: { omitAction?: boolean }) {
   const mockOnClose = jest.fn();
 
   render(
-    <WorkflowPageActionsModal
+    <WorkflowActionsModal
       workflow={describeWorkflowResponse}
-      action={omitAction ? undefined : mockWorkflowPageActionsConfig[0]}
+      action={omitAction ? undefined : mockWorkflowActionsConfig[0]}
       onClose={mockOnClose}
     />
   );

src/views/workflow-page/workflow-page-actions-modal/workflow-page-actions-modal.tsx → src/views/workflow-actions/workflow-actions-modal/workflow-actions-modal.tsx

@@ -3,11 +3,11 @@ import { Modal, ModalButton } from 'baseui/modal';
 
 import { type DescribeWorkflowResponse } from '@/route-handlers/describe-workflow/describe-workflow.types';
 
-import { type WorkflowAction } from '../workflow-page-actions-menu/workflow-page-actions-menu.types';
+import { type WorkflowAction } from '../workflow-actions.types';
 
-import { overrides, styled } from './workflow-page-actions-modal.styles';
+import { overrides, styled } from './workflow-actions-modal.styles';
 
-export default function WorkflowPageActionsModal({
+export default function WorkflowActionsModal({
   // workflow,
   action,
   onClose,

src/views/workflow-page/workflow-page-actions-button/workflow-page-actions-button.tsx → src/views/workflow-actions/workflow-actions.tsx

@@ -7,15 +7,15 @@ import { pick } from 'lodash';
 import { useParams } from 'next/navigation';
 import { MdArrowDropDown } from 'react-icons/md';
 
-import useDescribeWorkflow from '../hooks/use-describe-workflow';
-import WorkflowPageActionsMenu from '../workflow-page-actions-menu/workflow-page-actions-menu';
-import { type WorkflowAction } from '../workflow-page-actions-menu/workflow-page-actions-menu.types';
-import WorkflowPageActionsModal from '../workflow-page-actions-modal/workflow-page-actions-modal';
-import { type WorkflowPageParams } from '../workflow-page.types';
+import useDescribeWorkflow from '../workflow-page/hooks/use-describe-workflow';
+import { type WorkflowPageParams } from '../workflow-page/workflow-page.types';
 
-import { overrides } from './workflow-page-actions-button.styles';
+import WorkflowActionsMenu from './workflow-actions-menu/workflow-actions-menu';
+import WorkflowActionsModal from './workflow-actions-modal/workflow-actions-modal';
+import { overrides } from './workflow-actions.styles';
+import { type WorkflowAction } from './workflow-actions.types';
 
-export default function WorkflowPageActionsButton() {
+export default function WorkflowActions() {
   const params = useParams<WorkflowPageParams>();
   const workflowDetailsParams = pick(
     params,
@@ -39,7 +39,7 @@ export default function WorkflowPageActionsButton() {
         placement={PLACEMENT.bottomRight}
         overrides={overrides.popover}
         content={() => (
-          <WorkflowPageActionsMenu
+          <WorkflowActionsMenu
             workflow={workflow}
             onActionSelect={(action) => setSelectedAction(action)}
           />
@@ -55,7 +55,7 @@ export default function WorkflowPageActionsButton() {
           Workflow Actions
         </Button>
       </StatefulPopover>
-      <WorkflowPageActionsModal
+      <WorkflowActionsModal
         workflow={workflow}
         action={selectedAction}
         onClose={() => setSelectedAction(undefined)}

src/views/workflow-page/workflow-page-actions-menu/workflow-page-actions-menu.types.ts → src/views/workflow-actions/workflow-actions.types.ts

@@ -13,8 +13,3 @@ export type WorkflowAction = {
   getIsEnabled: (workflow: DescribeWorkflowResponse) => boolean;
   // Add a field for the endpoint to call
 };
-
-export type Props = {
-  workflow: DescribeWorkflowResponse;
-  onActionSelect: (action: WorkflowAction) => void;
-};

src/views/workflow-page/workflow-page-tabs/__tests__/workflow-page-tabs.test.tsx

@@ -43,9 +43,8 @@ jest.mock(
   () => jest.fn(() => <div>CLI Commands</div>)
 );
 
-jest.mock(
-  '../../workflow-page-actions-button/workflow-page-actions-button',
-  () => jest.fn(() => <div>Actions</div>)
+jest.mock('@/views/workflow-actions/workflow-actions', () =>
+  jest.fn(() => <div>Actions</div>)
 );
 
 describe('WorkflowPageTabs', () => {

src/views/workflow-page/workflow-page-tabs/workflow-page-tabs.tsx

@@ -6,9 +6,9 @@ import { useRouter, useParams } from 'next/navigation';
 import ErrorBoundary from '@/components/error-boundary/error-boundary';
 import PageTabs from '@/components/page-tabs/page-tabs';
 import decodeUrlParams from '@/utils/decode-url-params';
+import WorkflowActions from '@/views/workflow-actions/workflow-actions';
 
 import workflowPageTabsConfig from '../config/workflow-page-tabs.config';
-import WorkflowPageActionsButton from '../workflow-page-actions-button/workflow-page-actions-button';
 import WorkflowPageCliCommandsButton from '../workflow-page-cli-commands-button/workflow-page-cli-commands-button';
 
 import { styled } from './workflow-page-tabs.styles';
@@ -29,7 +29,7 @@ export default function WorkflowPageTabs() {
         <styled.EndButtonsContainer>
           <WorkflowPageCliCommandsButton />
           <ErrorBoundary fallbackRender={() => null}>
-            <WorkflowPageActionsButton />
+            <WorkflowActions />
           </ErrorBoundary>
         </styled.EndButtonsContainer>
       }