refactor!: rename Command Menu page/navigation layer to Side Panel (#18393)

2026-03-05 20:16:31 +05:30
parent 38ad0820c0
commit 5853891b02
675 changed files with 4894 additions and 4964 deletions
@@ -11,4 +11,4 @@ const StyledStepListContainer = styled.div`
  padding-inline: ${themeCssVariables.spacing[2]};
 `;

-export { StyledStepListContainer as RightDrawerStepListContainer };
+export { StyledStepListContainer as SidePanelStepListContainer };
@@ -11,4 +11,4 @@ const StyledSelectStepTitle = styled.span`
  padding-right: ${themeCssVariables.spacing[1]};
 `;

-export { StyledSelectStepTitle as RightDrawerWorkflowSelectStepTitle };
+export { StyledSelectStepTitle as SidePanelWorkflowSelectStepTitle };
@@ -1,4 +1,4 @@
-import { workflowRunIteratorSubStepIterationIndexComponentState } from '@/command-menu/pages/workflow/step/view-run/states/workflowRunIteratorSubStepIterationIndexComponentState';
+import { workflowRunIteratorSubStepIterationIndexComponentState } from '@/side-panel/pages/workflow/step/view-run/states/workflowRunIteratorSubStepIterationIndexComponentState';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { useWorkflowRun } from '@/workflow/hooks/useWorkflowRun';
 import { useWorkflowRunIdOrThrow } from '@/workflow/hooks/useWorkflowRunIdOrThrow';
@@ -1,8 +1,8 @@
-import { useWorkflowCommandMenu } from '@/command-menu/hooks/useWorkflowCommandMenu';
-import { useCommandMenuWorkflowIdOrThrow } from '@/command-menu/pages/workflow/hooks/useCommandMenuWorkflowIdOrThrow';
+import { useSidePanelWorkflowNavigation } from '@/side-panel/pages/workflow/hooks/useSidePanelWorkflowNavigation';
+import { useSidePanelWorkflowIdOrThrow } from '@/side-panel/pages/workflow/hooks/useSidePanelWorkflowIdOrThrow';
 import { OptionsDropdownMenu } from '@/ui/layout/dropdown/components/OptionsDropdownMenu';
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
-import { RightDrawerFooter } from '@/ui/layout/right-drawer/components/RightDrawerFooter';
+import { SidePanelFooter } from '@/ui/layout/side-panel/components/SidePanelFooter';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
@@ -37,11 +37,11 @@ export const WorkflowStepFooter = ({
  const { t } = useLingui();
  const { duplicateStep } = useDuplicateStep();
  const { closeDropdown } = useCloseDropdown();
-  const workflowId = useCommandMenuWorkflowIdOrThrow();
+  const workflowId = useSidePanelWorkflowIdOrThrow();
  const {
-    openWorkflowEditStepTypeInCommandMenu,
-    openWorkflowTriggerTypeInCommandMenu,
-  } = useWorkflowCommandMenu();
+    openWorkflowEditStepTypeInSidePanel,
+    openWorkflowTriggerTypeInSidePanel,
+  } = useSidePanelWorkflowNavigation();
  const { deleteStep } = useDeleteStep();
  const navigateSettings = useNavigateSettings();
  const workflowAiAgentActionAgent = useAtomStateValue(
@@ -66,9 +66,9 @@ export const WorkflowStepFooter = ({
    closeDropdown(dropdownId);

    if (stepId === TRIGGER_STEP_ID) {
-      openWorkflowTriggerTypeInCommandMenu(workflowId);
+      openWorkflowTriggerTypeInSidePanel(workflowId);
    } else {
-      openWorkflowEditStepTypeInCommandMenu(workflowId);
+      openWorkflowEditStepTypeInSidePanel(workflowId);
    }
  };

@@ -177,7 +177,7 @@ export const WorkflowStepFooter = ({
  );

  return (
-    <RightDrawerFooter
+    <SidePanelFooter
      actions={[
        OptionsDropdown,
        ...(additionalActions ?? []),
@@ -1,4 +1,4 @@
-import { AdvancedFilterCommandMenuColumn } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuColumn';
+import { AdvancedFilterSidePanelColumn } from '@/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelColumn';
 import { WorkflowStepFilterFieldSelect } from '@/workflow/workflow-steps/filters/components/WorkflowStepFilterFieldSelect';
 import { WorkflowStepFilterLogicalOperatorCell } from '@/workflow/workflow-steps/filters/components/WorkflowStepFilterLogicalOperatorCell';
 import { WorkflowStepFilterOperandSelect } from '@/workflow/workflow-steps/filters/components/WorkflowStepFilterOperandSelect';
@@ -39,7 +39,7 @@ export const WorkflowStepFilterColumn = ({
  const shouldShowDropdown = !readonly && !preventDeletion;

  return (
-    <AdvancedFilterCommandMenuColumn>
+    <AdvancedFilterSidePanelColumn>
      <StyledContainer>
        <WorkflowStepFilterLogicalOperatorCell
          index={stepFilterIndex}
@@ -54,6 +54,6 @@ export const WorkflowStepFilterColumn = ({
      <WorkflowStepFilterFieldSelect stepFilter={stepFilter} />
      <WorkflowStepFilterOperandSelect stepFilter={stepFilter} />
      <WorkflowStepFilterValueInput stepFilter={stepFilter} />
-    </AdvancedFilterCommandMenuColumn>
+    </AdvancedFilterSidePanelColumn>
  );
 };
@@ -1,4 +1,4 @@
-import { AdvancedFilterCommandMenuColumn } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuColumn';
+import { AdvancedFilterSidePanelColumn } from '@/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelColumn';
 import { WorkflowStepFilterGroupChildren } from '@/workflow/workflow-steps/filters/components/WorkflowStepFilterGroupChildren';
 import { WorkflowStepFilterGroupOptionsDropdown } from '@/workflow/workflow-steps/filters/components/WorkflowStepFilterGroupOptionsDropdown';
 import { WorkflowStepFilterLogicalOperatorCell } from '@/workflow/workflow-steps/filters/components/WorkflowStepFilterLogicalOperatorCell';
@@ -29,7 +29,7 @@ export const WorkflowStepFilterGroupColumn = ({
  const { readonly } = useContext(WorkflowStepFilterContext);

  return (
-    <AdvancedFilterCommandMenuColumn>
+    <AdvancedFilterSidePanelColumn>
      <StyledContainer>
        <WorkflowStepFilterLogicalOperatorCell
          index={stepFilterGroupIndex}
@@ -42,6 +42,6 @@ export const WorkflowStepFilterGroupColumn = ({
        )}
      </StyledContainer>
      <WorkflowStepFilterGroupChildren stepFilterGroupId={stepFilterGroup.id} />
-    </AdvancedFilterCommandMenuColumn>
+    </AdvancedFilterSidePanelColumn>
  );
 };
@@ -7,7 +7,7 @@ import { WorkflowVisualizerComponentInstanceContext } from '@/workflow/workflow-
 const mockDeleteWorkflowVersionStep = jest.fn();
 const mockGetUpdatableWorkflowVersion = jest.fn();
 const mockDeleteStepsOutputSchema = jest.fn();
-const mockCloseCommandMenu = jest.fn();
+const mockCloseSidePanel = jest.fn();

 jest.mock(
  '@/workflow/workflow-steps/hooks/useDeleteWorkflowVersionStep',
@@ -30,9 +30,9 @@ jest.mock('@/workflow/workflow-variables/hooks/useStepsOutputSchema', () => ({
  }),
 }));

-jest.mock('@/command-menu/hooks/useCommandMenu', () => ({
-  useCommandMenu: () => ({
-    closeCommandMenu: mockCloseCommandMenu,
+jest.mock('@/side-panel/hooks/useSidePanelMenu', () => ({
+  useSidePanelMenu: () => ({
+    closeSidePanelMenu: mockCloseSidePanel,
  }),
 }));

@@ -41,9 +41,9 @@ jest.mock('@/workflow/hooks/useWorkflowWithCurrentVersion', () => ({
 }));

 jest.mock(
-  '@/workflow/workflow-steps/workflow-actions/ai-agent-action/hooks/useResetWorkflowAiAgentPermissionsStateOnCommandMenuClose',
+  '@/workflow/workflow-steps/workflow-actions/ai-agent-action/hooks/useResetWorkflowAiAgentPermissionsStateOnSidePanelClose',
  () => ({
-    useResetWorkflowAiAgentPermissionsStateOnCommandMenuClose: () => ({
+    useResetWorkflowAiAgentPermissionsStateOnSidePanelClose: () => ({
      resetPermissionState: jest.fn(),
    }),
  }),
@@ -96,7 +96,7 @@ describe('useDeleteStep', () => {
      workflowVersionId: mockWorkflowVersionId,
      stepId: mockStepId,
    });
-    expect(mockCloseCommandMenu).toHaveBeenCalled();
+    expect(mockCloseSidePanel).toHaveBeenCalled();
    expect(mockDeleteStepsOutputSchema).toHaveBeenCalledWith({
      stepIds: [mockStepId],
      workflowVersionId: mockWorkflowVersionId,
@@ -1,22 +1,22 @@
-import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
+import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { useGetUpdatableWorkflowVersionOrThrow } from '@/workflow/hooks/useGetUpdatableWorkflowVersionOrThrow';
 import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
 import { workflowVisualizerWorkflowIdComponentState } from '@/workflow/states/workflowVisualizerWorkflowIdComponentState';
 import { useDeleteWorkflowVersionStep } from '@/workflow/workflow-steps/hooks/useDeleteWorkflowVersionStep';
-import { useResetWorkflowAiAgentPermissionsStateOnCommandMenuClose } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/hooks/useResetWorkflowAiAgentPermissionsStateOnCommandMenuClose';
+import { useResetWorkflowAiAgentPermissionsStateOnSidePanelClose } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/hooks/useResetWorkflowAiAgentPermissionsStateOnSidePanelClose';
 import { useStepsOutputSchema } from '@/workflow/workflow-variables/hooks/useStepsOutputSchema';
 import { isDefined } from 'twenty-shared/utils';

 export const useDeleteStep = () => {
  const { resetPermissionState } =
-    useResetWorkflowAiAgentPermissionsStateOnCommandMenuClose();
+    useResetWorkflowAiAgentPermissionsStateOnSidePanelClose();
  const { deleteWorkflowVersionStep } = useDeleteWorkflowVersionStep();
  const { deleteStepsOutputSchema } = useStepsOutputSchema();

  const { getUpdatableWorkflowVersion } =
    useGetUpdatableWorkflowVersionOrThrow();
-  const { closeCommandMenu } = useCommandMenu();
+  const { closeSidePanelMenu } = useSidePanelMenu();
  const workflowVisualizerWorkflowId = useAtomComponentStateValue(
    workflowVisualizerWorkflowIdComponentState,
  );
@@ -35,7 +35,7 @@ export const useDeleteStep = () => {
      stepId,
    });

-    closeCommandMenu();
+    closeSidePanelMenu();

    deleteStepsOutputSchema({
      stepIds: [stepId],
@@ -1,4 +1,4 @@
-import { workflowRunIteratorSubStepIterationIndexComponentState } from '@/command-menu/pages/workflow/step/view-run/states/workflowRunIteratorSubStepIterationIndexComponentState';
+import { workflowRunIteratorSubStepIterationIndexComponentState } from '@/side-panel/pages/workflow/step/view-run/states/workflowRunIteratorSubStepIterationIndexComponentState';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { useWorkflowRun } from '@/workflow/hooks/useWorkflowRun';
 import { useWorkflowRunIdOrThrow } from '@/workflow/hooks/useWorkflowRunIdOrThrow';
@@ -15,7 +15,7 @@ import { isDefined } from 'twenty-shared/utils';
 import { IconChevronLeft } from 'twenty-ui/display';
 import { IconButton } from 'twenty-ui/input';
 import { type Agent, useGetRolesQuery } from '~/generated-metadata/graphql';
-import { RightDrawerSkeletonLoader } from '~/loading/components/RightDrawerSkeletonLoader';
+import { SidePanelSkeletonLoader } from '~/loading/components/SidePanelSkeletonLoader';
 import { filterBySearchQuery } from '~/utils/filterBySearchQuery';

 import { isNonTextWritingKey } from '@/ui/utilities/hotkey/utils/isNonTextWritingKey';
@@ -149,7 +149,7 @@ export const WorkflowAiAgentPermissionsTab = ({
  });

  if (isAgentLoading || rolesLoading) {
-    return <RightDrawerSkeletonLoader />;
+    return <SidePanelSkeletonLoader />;
  }

  if (!isDefined(workflowAiAgentActionAgent)) {
@@ -13,7 +13,7 @@ import { useUpdateWorkflowVersionStep } from '@/workflow/workflow-steps/hooks/us
 import { WorkflowAiAgentPermissionsTab } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsTab';
 import { WORKFLOW_AI_AGENT_TAB_LIST_COMPONENT_ID } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/constants/WorkflowAiAgentTabListComponentId';
 import { WORKFLOW_AI_AGENT_TABS } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/constants/WorkflowAiAgentTabs';
-import { useResetWorkflowAiAgentPermissionsStateOnCommandMenuClose } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/hooks/useResetWorkflowAiAgentPermissionsStateOnCommandMenuClose';
+import { useResetWorkflowAiAgentPermissionsStateOnSidePanelClose } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/hooks/useResetWorkflowAiAgentPermissionsStateOnSidePanelClose';
 import { workflowAiAgentActionAgentState } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/states/workflowAiAgentActionAgentState';
 import { workflowAiAgentPermissionsIsAddingPermissionState } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/states/workflowAiAgentPermissionsIsAddingPermissionState';
 import { styled } from '@linaria/react';
@@ -33,7 +33,7 @@ import {
  useUpdateOneAgentMutation,
 } from '~/generated-metadata/graphql';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
-import { RightDrawerSkeletonLoader } from '~/loading/components/RightDrawerSkeletonLoader';
+import { SidePanelSkeletonLoader } from '~/loading/components/SidePanelSkeletonLoader';
 import { WorkflowAiAgentPromptTab } from './WorkflowAiAgentPromptTab';
 import { themeCssVariables } from 'twenty-ui/theme-constants';

@@ -73,7 +73,7 @@ export const WorkflowEditActionAiAgent = ({
      },
    },
  );
-  useResetWorkflowAiAgentPermissionsStateOnCommandMenuClose();
+  useResetWorkflowAiAgentPermissionsStateOnSidePanelClose();
  const [updateAgent] = useUpdateOneAgentMutation();
  const aiModelOptions = useAiModelOptions();
  const { updateWorkflowVersionStep } = useUpdateWorkflowVersionStep();
@@ -267,7 +267,7 @@ export const WorkflowEditActionAiAgent = ({
  };

  return agentLoading ? (
-    <RightDrawerSkeletonLoader />
+    <SidePanelSkeletonLoader />
  ) : (
    <>
      <StyledTabList
@@ -1,10 +1,10 @@
-import { useListenToSidePanelClosing } from '@/ui/layout/right-drawer/hooks/useListenToSidePanelClosing';
+import { useListenToSidePanelClosing } from '@/ui/layout/side-panel/hooks/useListenToSidePanelClosing';
 import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
 import { workflowAiAgentActionAgentState } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/states/workflowAiAgentActionAgentState';
 import { workflowAiAgentPermissionsIsAddingPermissionState } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/states/workflowAiAgentPermissionsIsAddingPermissionState';
 import { workflowAiAgentPermissionsSelectedObjectIdState } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/states/workflowAiAgentPermissionsSelectedObjectIdState';

-export const useResetWorkflowAiAgentPermissionsStateOnCommandMenuClose = () => {
+export const useResetWorkflowAiAgentPermissionsStateOnSidePanelClose = () => {
  const setWorkflowAiAgentPermissionsSelectedObjectId = useSetAtomState(
    workflowAiAgentPermissionsSelectedObjectIdState,
  );
@@ -1,6 +1,6 @@
 import { type WorkflowCodeAction } from '@/workflow/types/Workflow';
 import { lazy, Suspense } from 'react';
-import { RightDrawerSkeletonLoader } from '~/loading/components/RightDrawerSkeletonLoader';
+import { SidePanelSkeletonLoader } from '~/loading/components/SidePanelSkeletonLoader';

 type WorkflowActionCodeProps = {
  action: WorkflowCodeAction;
@@ -35,7 +35,7 @@ export const WorkflowActionCode = ({
  actionOptions,
 }: WorkflowActionCodeProps) => {
  return (
-    <Suspense fallback={<RightDrawerSkeletonLoader />}>
+    <Suspense fallback={<SidePanelSkeletonLoader />}>
      {actionOptions.readonly ? (
        <WorkflowReadonlyActionCode action={action} />
      ) : (
@@ -2,7 +2,7 @@ import { type ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { getMissingDraftEmailScopes } from '@/accounts/utils/hasMissingDraftEmailScopes';
 import { WorkflowSendEmailAttachments } from '@/advanced-text-editor/components/WorkflowSendEmailAttachments';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
-import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
+import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { FormAdvancedTextFieldInput } from '@/object-record/record-field/ui/form-types/components/FormAdvancedTextFieldInput';
 import { FormMultiTextFieldInput } from '@/object-record/record-field/ui/form-types/components/FormMultiTextFieldInput';
@@ -185,7 +185,7 @@ export const WorkflowEditActionEmailBase = ({

  const navigate = useNavigateSettings();

-  const { closeCommandMenu } = useCommandMenu();
+  const { closeSidePanelMenu } = useSidePanelMenu();

  useEffect(() => {
    return () => {
@@ -206,7 +206,7 @@ export const WorkflowEditActionEmailBase = ({
            options={connectedAccountOptions}
            callToActionButton={{
              onClick: () => {
-                closeCommandMenu();
+                closeSidePanelMenu();
                navigate(SettingsPath.NewAccount);
              },
              Icon: IconPlus,
@@ -1,5 +1,5 @@
-import { CommandMenuWorkflowSelectAction } from '@/command-menu/pages/workflow/action/components/CommandMenuWorkflowSelectAction';
-import { CommandMenuWorkflowEditStepType } from '@/command-menu/pages/workflow/step/edit/components/CommandMenuWorkflowEditStepType';
+import { SidePanelWorkflowSelectAction } from '@/side-panel/pages/workflow/action/components/SidePanelWorkflowSelectAction';
+import { SidePanelWorkflowEditStepType } from '@/side-panel/pages/workflow/step/edit/components/SidePanelWorkflowEditStepType';
 import { type WorkflowEmptyAction } from '@/workflow/types/Workflow';

 type WorkflowEditActionEmptyProps = {
@@ -17,8 +17,8 @@ export const WorkflowEditActionEmpty = ({
  actionOptions,
 }: WorkflowEditActionEmptyProps) => {
  if (actionOptions.readonly === true) {
-    return <CommandMenuWorkflowSelectAction onActionSelected={() => {}} />;
+    return <SidePanelWorkflowSelectAction onActionSelected={() => {}} />;
  }

-  return <CommandMenuWorkflowEditStepType />;
+  return <SidePanelWorkflowEditStepType />;
 };
@@ -1,6 +1,6 @@
 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';

-import { AdvancedFilterCommandMenuContainer } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuContainer';
+import { AdvancedFilterSidePanelContainer } from '@/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelContainer';
 import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
 import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
 import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
@@ -44,7 +44,7 @@ export const WorkflowFindRecordsFilters = ({
  }, [currentRecordFilterGroups, currentRecordFilters, onChange, store]);

  return (
-    <AdvancedFilterCommandMenuContainer
+    <AdvancedFilterSidePanelContainer
      objectMetadataItem={objectMetadataItem}
      onUpdate={readonly ? undefined : onUpdate}
      VariablePicker={WorkflowVariablePicker}
@@ -1,9 +1,9 @@
 import { CmdEnterActionButton } from '@/action-menu/components/CmdEnterActionButton';
-import { useCommandMenuHistory } from '@/command-menu/hooks/useCommandMenuHistory';
+import { useSidePanelHistory } from '@/side-panel/hooks/useSidePanelHistory';
 import { FormFieldInput } from '@/object-record/record-field/ui/components/FormFieldInput';
 import { FormSingleRecordPicker } from '@/object-record/record-field/ui/form-types/components/FormSingleRecordPicker';
 import { type FieldMetadata } from '@/object-record/record-field/ui/types/FieldMetadata';
-import { RightDrawerFooter } from '@/ui/layout/right-drawer/components/RightDrawerFooter';
+import { SidePanelFooter } from '@/ui/layout/side-panel/components/SidePanelFooter';
 import { useWorkflowRunIdOrThrow } from '@/workflow/hooks/useWorkflowRunIdOrThrow';
 import { type WorkflowFormAction } from '@/workflow/types/Workflow';
 import { WorkflowStepBody } from '@/workflow/workflow-steps/components/WorkflowStepBody';
@@ -34,7 +34,7 @@ export const WorkflowEditActionFormFiller = ({
  const { submitFormStep } = useSubmitFormStep();
  const [formData, setFormData] = useState<FormData>(action.settings.input);
  const workflowRunId = useWorkflowRunIdOrThrow();
-  const { goBackFromCommandMenu } = useCommandMenuHistory();
+  const { goBackFromSidePanel } = useSidePanelHistory();
  const { updateWorkflowRunStep } = useUpdateWorkflowRunStep();
  const [error, setError] = useState<string | undefined>(undefined);

@@ -89,7 +89,7 @@ export const WorkflowEditActionFormFiller = ({
      response,
    });

-    goBackFromCommandMenu();
+    goBackFromSidePanel();
  };

  useEffect(() => {
@@ -181,7 +181,7 @@ export const WorkflowEditActionFormFiller = ({
        })}
      </WorkflowStepBody>
      {!actionOptions.readonly && (
-        <RightDrawerFooter
+        <SidePanelFooter
          actions={[
            <CmdEnterActionButton
              title={t`Submit`}
@@ -1,4 +1,4 @@
-import { workflowRunIteratorSubStepIterationIndexComponentState } from '@/command-menu/pages/workflow/step/view-run/states/workflowRunIteratorSubStepIterationIndexComponentState';
+import { workflowRunIteratorSubStepIterationIndexComponentState } from '@/side-panel/pages/workflow/step/view-run/states/workflowRunIteratorSubStepIterationIndexComponentState';
 import { useAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentState';
 import { useFlowOrThrow } from '@/workflow/hooks/useFlowOrThrow';
 import { useWorkflowRun } from '@/workflow/hooks/useWorkflowRun';