diff --git a/web/features/deployments/list/new-instance-card.tsx b/web/features/deployments/list/new-instance-card.tsx
index 262a82487a..3e08e155cd 100644
--- a/web/features/deployments/list/new-instance-card.tsx
+++ b/web/features/deployments/list/new-instance-card.tsx
@@ -1,8 +1,9 @@
'use client'
import { cn } from '@langgenius/dify-ui/cn'
+import { useSetAtom } from 'jotai'
import { useTranslation } from 'react-i18next'
-import { useDeploymentsStore } from '../store'
+import { openCreateInstanceModalAtom } from '../store'
type NewInstanceActionProps = {
icon: string
@@ -40,7 +41,7 @@ function NewInstanceAction({ icon, label, disabled, onClick }: NewInstanceAction
export function NewInstanceCard() {
const { t } = useTranslation('deployments')
- const openCreateInstanceModal = useDeploymentsStore(state => state.openCreateInstanceModal)
+ const openCreateInstanceModal = useSetAtom(openCreateInstanceModalAtom)
return (
diff --git a/web/features/deployments/nav/index.tsx b/web/features/deployments/nav/index.tsx
index 60c18fe78e..07977cddd3 100644
--- a/web/features/deployments/nav/index.tsx
+++ b/web/features/deployments/nav/index.tsx
@@ -4,12 +4,13 @@ import type { AppInstanceBasicInfo, AppInstanceCard } from '@dify/contracts/ente
import type { NavItem } from '@/app/components/header/nav/nav-selector'
import type { AppModeEnum } from '@/types/app'
import { skipToken, useQuery } from '@tanstack/react-query'
+import { useSetAtom } from 'jotai'
import { useTranslation } from 'react-i18next'
import Nav from '@/app/components/header/nav'
import { useParams, useRouter, useSelectedLayoutSegment } from '@/next/navigation'
import { consoleQuery } from '@/service/client'
import { SOURCE_APPS_PAGE_SIZE } from '../data'
-import { useDeploymentsStore } from '../store'
+import { openCreateInstanceModalAtom } from '../store'
function navItemFromListApp(app: AppInstanceCard): NavItem[] {
if (!app.id || !app.name)
@@ -53,7 +54,7 @@ export function DeploymentsNav() {
const params = useParams<{ instanceId?: string }>()
const instanceId = params?.instanceId
- const openCreateInstanceModal = useDeploymentsStore(state => state.openCreateInstanceModal)
+ const openCreateInstanceModal = useSetAtom(openCreateInstanceModalAtom)
const { data: currentInstance } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceOverview.queryOptions({
input: instanceId
? { params: { appInstanceId: instanceId } }
diff --git a/web/features/deployments/store.ts b/web/features/deployments/store.ts
index 741f791ab5..faf8e63a1e 100644
--- a/web/features/deployments/store.ts
+++ b/web/features/deployments/store.ts
@@ -1,4 +1,4 @@
-import { create } from 'zustand'
+import { atom } from 'jotai'
type OpenDeployDrawerParams = {
appInstanceId: string
@@ -13,48 +13,55 @@ type OpenRollbackParams = {
deploymentId?: string
}
-type DeploymentsStore = {
- deployDrawer: {
- open: boolean
- appInstanceId?: string
- environmentId?: string
- releaseId?: string
- }
- rollbackModal: {
- open: boolean
- appInstanceId?: string
- environmentId?: string
- deploymentId?: string
- targetReleaseId?: string
- }
- createInstanceModal: { open: boolean }
+export const deployDrawerOpenAtom = atom(false)
+export const deployDrawerAppInstanceIdAtom = atom(undefined)
+export const deployDrawerEnvironmentIdAtom = atom(undefined)
+export const deployDrawerReleaseIdAtom = atom(undefined)
- openDeployDrawer: (params: OpenDeployDrawerParams) => void
- closeDeployDrawer: () => void
- openRollbackModal: (params: OpenRollbackParams) => void
- closeRollbackModal: () => void
- openCreateInstanceModal: () => void
- closeCreateInstanceModal: () => void
-}
+export const rollbackModalOpenAtom = atom(false)
+export const rollbackModalAppInstanceIdAtom = atom(undefined)
+export const rollbackModalEnvironmentIdAtom = atom(undefined)
+export const rollbackModalDeploymentIdAtom = atom(undefined)
+export const rollbackModalTargetReleaseIdAtom = atom(undefined)
-export const useDeploymentsStore = create()(set => ({
- deployDrawer: { open: false },
- rollbackModal: { open: false },
- createInstanceModal: { open: false },
+export const createInstanceModalOpenAtom = atom(false)
- openDeployDrawer: params => set({
- deployDrawer: {
- open: true,
- appInstanceId: params.appInstanceId,
- environmentId: params.environmentId,
- releaseId: params.releaseId,
- },
- }),
- closeDeployDrawer: () => set({ deployDrawer: { open: false } }),
- openRollbackModal: ({ appInstanceId, environmentId, deploymentId, targetReleaseId }) => set({
- rollbackModal: { open: true, appInstanceId, environmentId, deploymentId, targetReleaseId },
- }),
- closeRollbackModal: () => set({ rollbackModal: { open: false } }),
- openCreateInstanceModal: () => set({ createInstanceModal: { open: true } }),
- closeCreateInstanceModal: () => set({ createInstanceModal: { open: false } }),
-}))
+export const openDeployDrawerAtom = atom(null, (_get, set, params: OpenDeployDrawerParams) => {
+ set(deployDrawerAppInstanceIdAtom, params.appInstanceId)
+ set(deployDrawerEnvironmentIdAtom, params.environmentId)
+ set(deployDrawerReleaseIdAtom, params.releaseId)
+ set(deployDrawerOpenAtom, true)
+})
+export const closeDeployDrawerAtom = atom(null, (_get, set) => {
+ set(deployDrawerOpenAtom, false)
+ set(deployDrawerAppInstanceIdAtom, undefined)
+ set(deployDrawerEnvironmentIdAtom, undefined)
+ set(deployDrawerReleaseIdAtom, undefined)
+})
+
+export const openRollbackModalAtom = atom(null, (_get, set, {
+ appInstanceId,
+ environmentId,
+ deploymentId,
+ targetReleaseId,
+}: OpenRollbackParams) => {
+ set(rollbackModalAppInstanceIdAtom, appInstanceId)
+ set(rollbackModalEnvironmentIdAtom, environmentId)
+ set(rollbackModalDeploymentIdAtom, deploymentId)
+ set(rollbackModalTargetReleaseIdAtom, targetReleaseId)
+ set(rollbackModalOpenAtom, true)
+})
+export const closeRollbackModalAtom = atom(null, (_get, set) => {
+ set(rollbackModalOpenAtom, false)
+ set(rollbackModalAppInstanceIdAtom, undefined)
+ set(rollbackModalEnvironmentIdAtom, undefined)
+ set(rollbackModalDeploymentIdAtom, undefined)
+ set(rollbackModalTargetReleaseIdAtom, undefined)
+})
+
+export const openCreateInstanceModalAtom = atom(null, (_get, set) => {
+ set(createInstanceModalOpenAtom, true)
+})
+export const closeCreateInstanceModalAtom = atom(null, (_get, set) => {
+ set(createInstanceModalOpenAtom, false)
+})