feat(ui) remove legacy react beautiful dnd deployment pipeline part 2 (…

…#1692)

* feat(ui): add board component

* refactor(ui): replace react-beautiful-dnd in deployment rules settings

* chore: remove react-beautiful-dnd

* refactor(ui): add comment

* fixup! feat(ui): add board component

* fixup! fixup! feat(ui): add board component

libs/pages/services/src/lib/feature/page-settings-deployment-pipeline-feature/page-settings-deployment-pipeline-feature.tsx

@@ -1,18 +1,12 @@
-import { type CloudProviderEnum, type DeploymentStageResponse } from 'qovery-typescript-axios'
+import { type DeploymentStageResponse } from 'qovery-typescript-axios'
 import { useEffect, useState } from 'react'
 import { toast as toastAction } from 'react-hot-toast'
 import { useParams } from 'react-router-dom'
-import {
-  useAttachServiceToDeploymentStage,
-  useDeleteDeploymentStage,
-  useEnvironment,
-  useListDeploymentStages,
-} from '@qovery/domains/environments/feature'
+import { useAttachServiceToDeploymentStage, useListDeploymentStages } from '@qovery/domains/environments/feature'
 import { useServices } from '@qovery/domains/services/feature'
-import { Icon, useModal, useModalConfirmation } from '@qovery/shared/ui'
+import { useModal } from '@qovery/shared/ui'
 import PageSettingsDeploymentPipeline from '../../ui/page-settings-deployment-pipeline/page-settings-deployment-pipeline'
 import StageModalFeature from './stage-modal-feature/stage-modal-feature'
-import StageOrderModalFeature from './stage-order-modal-feature/stage-order-modal-feature'
 
 export interface StageRequest {
   stageId: string
@@ -22,17 +16,14 @@ export interface StageRequest {
 export function PageSettingsDeploymentPipelineFeature() {
   const { environmentId = '' } = useParams()
 
-  const { data: environment } = useEnvironment({ environmentId })
   const { data: services } = useServices({ environmentId })
 
   const { openModal, closeModal } = useModal()
-  const { openModalConfirmation } = useModalConfirmation()
 
   const [stages, setStages] = useState<DeploymentStageResponse[] | undefined>()
 
   const { data: deploymentStageList } = useListDeploymentStages({ environmentId })
   const { mutate: addServiceToDeploymentStage } = useAttachServiceToDeploymentStage()
-  const { mutate: deleteEnvironmentDeploymentStage } = useDeleteDeploymentStage({ environmentId })
 
   useEffect(() => {
     if (deploymentStageList) {
@@ -53,58 +44,17 @@ export function PageSettingsDeploymentPipelineFeature() {
     }
   }
 
-  const menuStage = (stage: DeploymentStageResponse, stages?: DeploymentStageResponse[]) => [
-    {
-      items: [
-        {
-          name: 'Edit stage',
-          onClick: () =>
-            openModal({
-              content: <StageModalFeature onClose={closeModal} environmentId={environmentId} stage={stage} />,
-            }),
-          contentLeft: <Icon iconName="pen" className="text-sm text-brand-500" />,
-        },
-        {
-          name: 'Edit order',
-          onClick: () =>
-            openModal({
-              content: <StageOrderModalFeature onClose={closeModal} stages={stages} />,
-            }),
-          contentLeft: <Icon iconName="arrow-down-1-9" className="text-sm text-brand-500" />,
-        },
-      ],
-    },
-    {
-      items: [
-        {
-          name: 'Delete stage',
-          onClick: () =>
-            openModalConfirmation({
-              title: 'Delete this stage',
-              isDelete: true,
-              name: stage.name,
-              action: () => deleteEnvironmentDeploymentStage({ stageId: stage.id }),
-            }),
-          contentLeft: <Icon iconName="trash" className="text-sm text-red-600" />,
-          containerClassName: 'text-red-600',
-        },
-      ],
-    },
-  ]
-
   return (
     <PageSettingsDeploymentPipeline
       stages={stages}
       setStages={setStages}
       onSubmit={onSubmit}
       services={services}
-      cloudProvider={environment?.cloud_provider.provider as CloudProviderEnum}
       onAddStage={() => {
         openModal({
           content: <StageModalFeature onClose={closeModal} environmentId={environmentId} />,
         })
       }}
-      menuStage={menuStage}
     />
   )
 }

libs/pages/services/src/lib/ui/page-settings-deployment-pipeline/page-settings-deployment-pipeline.spec.tsx

@@ -1,4 +1,4 @@
-import { CloudProviderEnum, type DeploymentStageResponse } from 'qovery-typescript-axios'
+import { type DeploymentStageResponse } from 'qovery-typescript-axios'
 import { renderWithProviders, screen } from '@qovery/shared/util-tests'
 import PageSettingsDeploymentPipeline, {
   type PageSettingsDeploymentPipelineProps,
@@ -8,33 +8,6 @@ const onSubmit = jest.fn()
 const setStages = jest.fn()
 const onAddStage = jest.fn()
 
-const menuEditStage = jest.fn()
-const menuOrderStage = jest.fn()
-const menuDeleteStage = jest.fn()
-
-const menuStage = (stage: DeploymentStageResponse) => [
-  {
-    items: [
-      {
-        name: 'Edit stage',
-        onClick: menuEditStage,
-      },
-      {
-        name: 'Order stage',
-        onClick: menuOrderStage,
-      },
-    ],
-  },
-  {
-    items: [
-      {
-        name: 'Delete stage',
-        onClick: menuDeleteStage,
-      },
-    ],
-  },
-]
-
 const stages: DeploymentStageResponse[] = [
   {
     id: '1',
@@ -73,8 +46,6 @@ const defaultProps: PageSettingsDeploymentPipelineProps = {
   stages,
   services,
   onAddStage,
-  cloudProvider: CloudProviderEnum.AWS,
-  menuStage: (stage: DeploymentStageResponse) => menuStage(stage),
 }
 
 describe('PageSettingsDeploymentPipeline', () => {
@@ -99,12 +70,7 @@ describe('PageSettingsDeploymentPipeline', () => {
 
   it('should have loading component', () => {
     renderWithProviders(
-      <PageSettingsDeploymentPipeline
-        onSubmit={onSubmit}
-        setStages={setStages}
-        onAddStage={onAddStage}
-        menuStage={(stage: DeploymentStageResponse) => menuStage(stage)}
-      />
+      <PageSettingsDeploymentPipeline onSubmit={onSubmit} setStages={setStages} onAddStage={onAddStage} />
     )
     screen.getByTestId('stages-loader')
   })
@@ -131,20 +97,9 @@ describe('PageSettingsDeploymentPipeline', () => {
     const items = screen.getAllByTestId('menuItem')
 
     // edit stage
-    await userEvent.click(items[0])
-
     // order stage
-    await userEvent.click(items[1])
-
-    await userEvent.click(actions[1])
-
-    const items2 = screen.getAllByTestId('menuItem')
     // delete stage
-    await userEvent.click(items2[2])
-
-    expect(menuEditStage).toHaveBeenCalled()
-    expect(menuOrderStage).toHaveBeenCalled()
-    expect(menuDeleteStage).toHaveBeenCalled()
+    expect(items).toHaveLength(3)
   })
 
   it('should have placeholder for stage', () => {