feat(actions-buttons): factoring and refining actions buttons behavior (

#385)

libs/domains/application/src/lib/mocks/factories/application-factory.mock.ts

@@ -1,15 +1,10 @@
 import { Chance } from 'chance'
-import {
-  Application,
-  StorageTypeEnum,
-  PortProtocolEnum,
-  BuildModeEnum,
-  BuildPackLanguageEnum,
-} from 'qovery-typescript-axios'
+import { BuildModeEnum, BuildPackLanguageEnum, PortProtocolEnum, StorageTypeEnum } from 'qovery-typescript-axios'
+import { ApplicationEntity } from '@qovery/shared/interfaces'
 
 const chance = new Chance()
 
-export const applicationFactoryMock = (howMany: number): Application[] =>
+export const applicationFactoryMock = (howMany: number): ApplicationEntity[] =>
   Array.from({ length: howMany }).map((_, index) => ({
     id: `${index}`,
     created_at: new Date().toString(),

libs/domains/database/src/lib/mocks/factories/database-factory.mock.ts

@@ -1,9 +1,10 @@
 import { Chance } from 'chance'
-import { Database, DatabaseAccessibilityEnum, DatabaseModeEnum, DatabaseTypeEnum } from 'qovery-typescript-axios'
+import { DatabaseAccessibilityEnum, DatabaseModeEnum, DatabaseTypeEnum } from 'qovery-typescript-axios'
+import { DatabaseEntity } from '@qovery/shared/interfaces'
 
 const chance = new Chance()
 
-export const databaseFactoryMock = (howMany: number): Database[] =>
+export const databaseFactoryMock = (howMany: number): DatabaseEntity[] =>
   Array.from({ length: howMany }).map((_, index) => ({
     id: `${index}`,
     created_at: new Date().toString(),

libs/domains/database/src/lib/slices/database.actions.ts

@@ -75,7 +75,7 @@ export const deleteDatabaseAction = createAsyncThunk<any, { environmentId: strin
         // refetch status after update
         await dispatch(fetchDatabasesStatus({ environmentId: data.environmentId }))
         // success message
-        toast(ToastEnum.SUCCESS, 'Your application is being deleted')
+        toast(ToastEnum.SUCCESS, 'Your database is being deleted')
       }
 
       return response

libs/pages/application/src/lib/page-application.tsx

@@ -2,32 +2,25 @@ import equal from 'fast-deep-equal'
 import { Environment } from 'qovery-typescript-axios'
 import { useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { Route, Routes, useLocation, useParams } from 'react-router-dom'
+import { Route, Routes, useParams } from 'react-router-dom'
 import {
   applicationsLoadingStatus,
-  deleteApplicationAction,
   fetchApplicationCommits,
   fetchApplicationInstances,
   fetchApplicationLinks,
   fetchApplicationStatus,
-  postApplicationActionsDeploy,
-  postApplicationActionsRestart,
-  postApplicationActionsStop,
   selectApplicationById,
 } from '@qovery/domains/application'
 import { selectEnvironmentById } from '@qovery/domains/environment'
 import { ServiceTypeEnum, getServiceType } from '@qovery/shared/enums'
 import { ApplicationEntity, GitApplicationEntity, LoadingStatus } from '@qovery/shared/interfaces'
-import { APPLICATION_DEPLOYMENTS_URL, APPLICATION_URL } from '@qovery/shared/router'
-import { StatusMenuActions } from '@qovery/shared/ui'
-import { isDeleteAvailable, useDocumentTitle } from '@qovery/shared/utils'
+import { useDocumentTitle } from '@qovery/shared/utils'
 import { AppDispatch, RootState } from '@qovery/store'
 import { ROUTER_APPLICATION } from './router/router'
 import Container from './ui/container/container'
 
 export function PageApplication() {
-  const { applicationId = '', environmentId = '', organizationId, projectId } = useParams()
-  const { pathname } = useLocation()
+  const { applicationId = '', environmentId = '' } = useParams()
   const environment = useSelector<RootState, Environment | undefined>((state) =>
     selectEnvironmentById(state, environmentId)
   )
@@ -62,51 +55,8 @@ export function PageApplication() {
     return () => clearInterval(fetchApplicationStatusByInterval)
   }, [applicationId, loadingStatus, dispatch])
 
-  const payload = (applicationId: string) => ({
-    environmentId,
-    applicationId,
-    serviceType: application && getServiceType(application),
-    withDeployments:
-      pathname ===
-      APPLICATION_URL(organizationId, projectId, environmentId, applicationId) + APPLICATION_DEPLOYMENTS_URL,
-  })
-
-  const statusActions: StatusMenuActions[] = [
-    {
-      name: 'redeploy',
-      action: (applicationId: string) => dispatch(postApplicationActionsRestart(payload(applicationId))),
-    },
-    {
-      name: 'deploy',
-      action: (applicationId: string) => dispatch(postApplicationActionsDeploy(payload(applicationId))),
-    },
-    {
-      name: 'stop',
-      action: (applicationId: string) => dispatch(postApplicationActionsStop(payload(applicationId))),
-    },
-  ]
-
-  const removeApplication = (applicationId: string) => {
-    if (application) {
-      dispatch(
-        deleteApplicationAction({
-          environmentId,
-          applicationId,
-          serviceType: getServiceType(application),
-        })
-      )
-    }
-  }
-
   return (
-    <Container
-      application={application}
-      environment={environment}
-      statusActions={statusActions}
-      removeApplication={
-        application?.status && isDeleteAvailable(application.status.state) ? removeApplication : undefined
-      }
-    >
+    <Container application={application} environment={environment}>
       <Routes>
         {ROUTER_APPLICATION.map((route) => (
           <Route key={route.path} path={route.path} element={route.component} />

libs/pages/application/src/lib/ui/container/container.tsx

@@ -1,31 +1,25 @@
 import { Environment, ServiceDeploymentStatusEnum } from 'qovery-typescript-axios'
 import { createContext, useState } from 'react'
 import { useDispatch } from 'react-redux'
-import { useNavigate, useParams } from 'react-router-dom'
+import { useParams } from 'react-router-dom'
 import { postApplicationActionsDeploy, postApplicationActionsRestart } from '@qovery/domains/application'
-import { DeployOtherCommitModalFeature } from '@qovery/shared/console-shared'
-import { IconEnum, ServiceTypeEnum, getServiceType } from '@qovery/shared/enums'
-import { ApplicationEntity, GitApplicationEntity } from '@qovery/shared/interfaces'
-import { APPLICATION_LOGS_URL, DEPLOYMENT_LOGS_URL } from '@qovery/shared/router'
+import { ApplicationButtonsActions } from '@qovery/shared/console-shared'
+import { IconEnum, getServiceType } from '@qovery/shared/enums'
+import { ApplicationEntity } from '@qovery/shared/interfaces'
 import {
   Button,
-  ButtonIconAction,
   ButtonSize,
   ButtonStyle,
   Header,
   Icon,
-  IconAwesomeEnum,
   Menu,
   MenuData,
   MenuItemProps,
   Skeleton,
-  StatusMenuActions,
   Tag,
   TagMode,
   TagSize,
-  useModal,
 } from '@qovery/shared/ui'
-import { copyToClipboard, urlCodeEditor } from '@qovery/shared/utils'
 import { AppDispatch } from '@qovery/store'
 import TabsFeature from '../../feature/tabs-feature/tabs-feature'
 import NeedRedeployFlag from '../need-redeploy-flag/need-redeploy-flag'
@@ -39,22 +33,17 @@ export const ApplicationContext = createContext<{
 })
 
 export interface ContainerProps {
-  statusActions: StatusMenuActions[]
   application?: ApplicationEntity
   environment?: Environment
   children?: React.ReactNode
-  removeApplication?: (applicationId: string) => void
 }
 
 export function Container(props: ContainerProps) {
-  const { application, environment, children, statusActions, removeApplication } = props
-  const { organizationId, projectId, environmentId = '', applicationId = '' } = useParams()
+  const { application, environment, children } = props
+  const { environmentId = '', applicationId = '' } = useParams()
   const [showHideAllEnvironmentVariablesValues, setShowHideAllEnvironmentVariablesValues] = useState<boolean>(false)
 
   const dispatch = useDispatch<AppDispatch>()
-  const navigate = useNavigate()
-
-  const { openModal } = useModal()
 
   const redeployApplication = () => {
     if (application) {
@@ -70,101 +59,8 @@ export function Container(props: ContainerProps) {
     }
   }
 
-  const copyContent = `Organization ID: ${organizationId}\nProject ID: ${projectId}\nEnvironment ID: ${environmentId}\nService ID: ${applicationId}`
-
   const menuLink: MenuData = []
 
-  const buttonActionsDefault = [
-    {
-      iconLeft: <Icon name="icon-solid-play" className="px-0.5" />,
-      iconRight: <Icon name="icon-solid-angle-down" className="px-0.5" />,
-      menusClassName: 'border-r border-r-element-light-lighter-500',
-      statusActions: {
-        status: application?.status && application?.status.state,
-        actions: statusActions,
-      },
-    },
-    {
-      ...(application &&
-        (getServiceType(application) === ServiceTypeEnum.APPLICATION ||
-          getServiceType(application) === ServiceTypeEnum.CONTAINER) && {
-          iconLeft: <Icon name="icon-solid-scroll" className="px-0.5" />,
-          iconRight: <Icon name="icon-solid-angle-down" className="px-0.5" />,
-          menusClassName: 'border-r border-r-element-light-lighter-500',
-          menus: [
-            {
-              items: [
-                {
-                  name: 'Deployment logs',
-                  contentLeft: <Icon name="icon-solid-scroll" className="text-brand-500 text-sm" />,
-                  onClick: () => navigate(DEPLOYMENT_LOGS_URL(organizationId, projectId, environmentId)),
-                },
-                {
-                  name: 'Application logs',
-                  contentLeft: <Icon name="icon-solid-scroll" className="text-brand-500 text-sm" />,
-                  onClick: () =>
-                    navigate(APPLICATION_LOGS_URL(organizationId, projectId, environmentId, applicationId)),
-                },
-              ],
-            },
-          ],
-        }),
-    },
-    {
-      ...(removeApplication && {
-        iconLeft: <Icon name="icon-solid-ellipsis-v" className="px-0.5" />,
-        menus: [
-          {
-            items:
-              application && getServiceType(application) === ServiceTypeEnum.APPLICATION
-                ? [
-                    {
-                      name: 'Edit code',
-                      contentLeft: <Icon name="icon-solid-code" className="text-sm text-brand-400" />,
-                      link: {
-                        url: urlCodeEditor((application as GitApplicationEntity)?.git_repository) || '',
-                        external: true,
-                      },
-                    },
-                    {
-                      name: 'Copy identifiers',
-                      contentLeft: <Icon name="icon-solid-copy" className="text-sm text-brand-400" />,
-                      onClick: () => copyToClipboard(copyContent),
-                    },
-                    {
-                      name: 'Deploy other version',
-                      contentLeft: <Icon name={IconAwesomeEnum.CLOCK_ROTATE_LEFT} className="text-sm text-brand-400" />,
-                      onClick: () => {
-                        openModal({
-                          content: (
-                            <DeployOtherCommitModalFeature
-                              applicationId={application.id}
-                              environmentId={environmentId || ''}
-                            />
-                          ),
-                          options: { width: 596 },
-                        })
-                      },
-                    },
-                    {
-                      name: 'Remove',
-                      contentLeft: <Icon name="icon-solid-trash" className="text-sm text-brand-400" />,
-                      onClick: () => removeApplication(applicationId ? applicationId : ''),
-                    },
-                  ]
-                : [
-                    {
-                      name: 'Remove',
-                      contentLeft: <Icon name="icon-solid-trash" className="text-sm text-brand-400" />,
-                      onClick: () => removeApplication(applicationId ? applicationId : ''),
-                    },
-                  ],
-          },
-        ],
-      }),
-    },
-  ]
-
   if (application && application.links && application.links.items) {
     const items: MenuItemProps[] = application.links.items.map((link) => {
       return {
@@ -208,15 +104,7 @@ export function Container(props: ContainerProps) {
         <div className="flex">
           {environment && application && application?.status && (
             <>
-              <ButtonIconAction
-                className="!h-8"
-                actions={buttonActionsDefault}
-                statusInformation={{
-                  id: application?.id,
-                  name: application?.name,
-                  mode: environment?.mode,
-                }}
-              />
+              <ApplicationButtonsActions application={application} environmentMode={environment.mode} />
               <span className="ml-4 mr-1 mt-2 h-4 w-[1px] bg-element-light-lighter-400"></span>
             </>
           )}

libs/pages/database/src/lib/page-database.tsx

@@ -1,31 +1,24 @@
 import { Environment } from 'qovery-typescript-axios'
 import { useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { Route, Routes, useNavigate, useParams } from 'react-router-dom'
+import { Route, Routes, useParams } from 'react-router-dom'
 import {
   databasesLoadingStatus,
-  deleteDatabaseAction,
   fetchDatabase,
   fetchDatabaseMasterCredentials,
   fetchDatabaseMetrics,
-  postDatabaseActionsDeploy,
-  postDatabaseActionsRestart,
-  postDatabaseActionsStop,
   selectDatabaseById,
 } from '@qovery/domains/database'
 import { selectEnvironmentById } from '@qovery/domains/environment'
 import { DatabaseEntity, LoadingStatus } from '@qovery/shared/interfaces'
-import { SERVICES_GENERAL_URL, SERVICES_URL } from '@qovery/shared/router'
-import { StatusMenuActions } from '@qovery/shared/ui'
-import { isDeleteAvailable, useDocumentTitle } from '@qovery/shared/utils'
+import { useDocumentTitle } from '@qovery/shared/utils'
 import { AppDispatch, RootState } from '@qovery/store'
 import { ROUTER_DATABASE } from './router/router'
 import Container from './ui/container/container'
 
 export function PageDatabase() {
   useDocumentTitle('Database - Qovery')
-  const navigate = useNavigate()
-  const { organizationId = '', projectId = '', databaseId = '', environmentId = '' } = useParams()
+  const { databaseId = '', environmentId = '' } = useParams()
   const environment = useSelector<RootState, Environment | undefined>((state) =>
     selectEnvironmentById(state, environmentId)
   )
@@ -35,26 +28,6 @@ export function PageDatabase() {
 
   const dispatch = useDispatch<AppDispatch>()
 
-  const statusActions: StatusMenuActions[] = [
-    {
-      name: 'restart',
-      action: (databaseId: string) => dispatch(postDatabaseActionsRestart({ environmentId, databaseId })),
-    },
-    {
-      name: 'deploy',
-      action: (databaseId: string) => dispatch(postDatabaseActionsDeploy({ environmentId, databaseId })),
-    },
-    {
-      name: 'stop',
-      action: (databaseId: string) => dispatch(postDatabaseActionsStop({ environmentId, databaseId })),
-    },
-  ]
-
-  const removeDatabase = (databaseId: string) => {
-    dispatch(deleteDatabaseAction({ environmentId, databaseId }))
-    navigate(SERVICES_URL(organizationId, projectId, environmentId) + SERVICES_GENERAL_URL)
-  }
-
   useEffect(() => {
     if (databaseId && loadingStatus === 'loaded') {
       database?.metrics?.loadingStatus !== 'loaded' && dispatch(fetchDatabaseMetrics({ databaseId }))
@@ -65,12 +38,7 @@ export function PageDatabase() {
   }, [databaseId, loadingStatus])
 
   return (
-    <Container
-      database={database}
-      environment={environment}
-      statusActions={statusActions}
-      removeDatabase={database?.status && isDeleteAvailable(database.status.state) ? removeDatabase : undefined}
-    >
+    <Container database={database} environment={environment}>
       <Routes>
         {ROUTER_DATABASE.map((route) => (
           <Route key={route.path} path={route.path} element={route.component} />