From c694cd7ef9d3102e3ab2f439d5f204962695ec91 Mon Sep 17 00:00:00 2001
From: Alex Lee <3076438032@qq.com>
Date: Thu, 26 Dec 2024 12:39:24 +0800
Subject: [PATCH] fix: devbox deploy bug version2 (#5312)

* fix: bug

* fix: bug

* fix: wrong fix
---
 .../detail/[name]/components/Version.tsx      | 325 +++++++++---------
 .../components/modals/AppSelectModal.tsx      |   3 +-
 2 files changed, 169 insertions(+), 159 deletions(-)

diff --git a/frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/Version.tsx b/frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/Version.tsx
index ef511e4885b..1695f78ba02 100644
--- a/frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/Version.tsx
+++ b/frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/Version.tsx
@@ -1,6 +1,7 @@
 import { Box, Button, Flex, MenuButton, Text, useDisclosure } from '@chakra-ui/react'
 import { SealosMenu, useMessage } from '@sealos/ui'
 import { useQuery } from '@tanstack/react-query'
+import { customAlphabet } from 'nanoid'
 import { useTranslations } from 'next-intl'
 import { useCallback, useState } from 'react'
 import { sealosApp } from 'sealos-desktop-sdk/app'
@@ -11,7 +12,7 @@ import MyIcon from '@/components/Icon'
 import EditVersionDesModal from '@/components/modals/EditVersionDesModal'
 import ReleaseModal from '@/components/modals/releaseModal'
 import MyTable from '@/components/MyTable'
-import { DevboxReleaseStatusEnum, devboxIdKey } from '@/constants/devbox'
+import { devboxIdKey, DevboxReleaseStatusEnum } from '@/constants/devbox'
 import { DevboxVersionListItemType } from '@/types/devbox'
 
 import { useConfirm } from '@/hooks/useConfirm'
@@ -27,6 +28,8 @@ import { useEnvStore } from '@/stores/env'
 import { AppListItemType } from '@/types/app'
 import { parseTemplateConfig } from '@/utils/tools'
 
+const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz', 6)
+
 const Version = () => {
   const t = useTranslations()
   const { message: toast } = useMessage()
@@ -42,8 +45,10 @@ const Version = () => {
   const [apps, setApps] = useState<AppListItemType[]>([])
   const [deployData, setDeployData] = useState<any>(null)
   const [currentVersion, setCurrentVersion] = useState<DevboxVersionListItemType | null>(null)
-  const [updateTemplateRepo, setUpdateTemplateRepo] = useState<null |
-    Awaited<ReturnType<typeof listPrivateTemplateRepository>>['templateRepositoryList'][number]>(null)
+  const [updateTemplateRepo, setUpdateTemplateRepo] = useState<
+    | null
+    | Awaited<ReturnType<typeof listPrivateTemplateRepository>>['templateRepositoryList'][number]
+  >(null)
   const createTemplateModalHandler = useDisclosure()
   const selectTemplalteModalHandler = useDisclosure()
   const updateTemplateModalHandler = useDisclosure()
@@ -56,10 +61,10 @@ const Version = () => {
     {
       refetchInterval:
         devboxVersionList.length > 0 &&
-          !createTemplateModalHandler.isOpen &&
-          !updateTemplateModalHandler.isOpen &&
-          !selectTemplalteModalHandler.isOpen &&
-          devboxVersionList[0].status.value === DevboxReleaseStatusEnum.Pending
+        !createTemplateModalHandler.isOpen &&
+        !updateTemplateModalHandler.isOpen &&
+        !selectTemplalteModalHandler.isOpen &&
+        devboxVersionList[0].status.value === DevboxReleaseStatusEnum.Pending
           ? 3000
           : false,
       onSettled() {
@@ -73,11 +78,12 @@ const Version = () => {
     () => {
       return listPrivateTemplateRepository({
         page: 1,
-        pageSize: 100,
+        pageSize: 100
       })
     }
   )
-  const templateRepositoryList = listPrivateTemplateRepositoryQuery.data?.templateRepositoryList || []
+  const templateRepositoryList =
+    listPrivateTemplateRepositoryQuery.data?.templateRepositoryList || []
   const handleDeploy = useCallback(
     async (version: DevboxVersionListItemType) => {
       // const { releaseCommand, releaseArgs } = await getSSHRuntimeInfo(devbox.runtimeVersion)
@@ -98,7 +104,7 @@ const Version = () => {
       const imageName = `${env.registryAddr}/${env.namespace}/${devbox.name}:${version.tag}`
 
       const transformData = {
-        appName: `${name}-release`,
+        appName: `${name}-release-${nanoid()}`,
         cpu: cpu,
         memory: memory,
         imageName: imageName,
@@ -106,13 +112,13 @@ const Version = () => {
           newNetworks.length > 0
             ? newNetworks
             : [
-              {
-                port: 80,
-                protocol: 'http',
-                openPublicDomain: false,
-                domain: env.ingressDomain
-              }
-            ],
+                {
+                  port: 80,
+                  protocol: 'http',
+                  openPublicDomain: false,
+                  domain: env.ingressDomain
+                }
+              ],
         runCMD: releaseCommand,
         cmdParam: releaseArgs,
         labels: {
@@ -183,133 +189,128 @@ const Version = () => {
     key: string
     render?: (item: DevboxVersionListItemType) => JSX.Element
   }[] = [
-      {
-        title: t('version_number'),
-        key: 'tag',
-        render: (item: DevboxVersionListItemType) => (
-          <Box color={'grayModern.900'} pl={'12px'}>
-            {item.tag}
+    {
+      title: t('version_number'),
+      key: 'tag',
+      render: (item: DevboxVersionListItemType) => (
+        <Box color={'grayModern.900'} pl={'12px'}>
+          {item.tag}
+        </Box>
+      )
+    },
+    {
+      title: t('status'),
+      key: 'status',
+      render: (item: DevboxVersionListItemType) => (
+        <DevboxStatusTag status={item.status} h={'27px'} thinMode />
+      )
+    },
+    {
+      title: t('create_time'),
+      dataIndex: 'createTime',
+      key: 'createTime',
+      render: (item: DevboxVersionListItemType) => {
+        return <Text color={'grayModern.600'}>{item.createTime}</Text>
+      }
+    },
+    {
+      title: t('version_description'),
+      key: 'description',
+      render: (item: DevboxVersionListItemType) => (
+        <Flex alignItems="center" minH={'20px'} width={'full'}>
+          <Box color={'grayModern.600'} noOfLines={1} w={'0'} flex={1}>
+            {item.description}
           </Box>
-        )
-      },
-      {
-        title: t('status'),
-        key: 'status',
-        render: (item: DevboxVersionListItemType) => (
-          <DevboxStatusTag status={item.status} h={'27px'} thinMode />
-        )
-      },
-      {
-        title: t('create_time'),
-        dataIndex: 'createTime',
-        key: 'createTime',
-        render: (item: DevboxVersionListItemType) => {
-          return <Text color={'grayModern.600'}>{item.createTime}</Text>
-        }
-      },
-      {
-        title: t('version_description'),
-        key: 'description',
-        render: (item: DevboxVersionListItemType) => (
-          <Flex alignItems="center" minH={'20px'} width={'full'}>
-            <Box
-              color={'grayModern.600'}
-              noOfLines={1}
-              w={'0'}
-              flex={1}
-            >
-              {item.description}
-            </Box>
-          </Flex>
-        )
-      },
-      {
-        title: t('control'),
-        key: 'control',
-        render: (item: DevboxVersionListItemType) => (
-          <Flex alignItems={'center'}>
-            <Button
-              mr={5}
-              height={'27px'}
-              w={'60px'}
-              size={'sm'}
-              h='32px'
-              fontSize={'base'}
-              bg={'grayModern.150'}
-              color={'grayModern.900'}
-              _hover={{
-                color: 'brightBlue.600'
-              }}
-              isDisabled={item.status.value !== DevboxReleaseStatusEnum.Success}
-              onClick={() => handleDeploy(item)}>
-              {t('deploy')}
-            </Button>
-            <SealosMenu
-              width={100}
-              Button={
-                <MenuButton as={Button} variant={'square'} boxSize={'32px'} data-group>
-                  <MyIcon name={'more'}
-                   color={'grayModern.600'} 
+        </Flex>
+      )
+    },
+    {
+      title: t('control'),
+      key: 'control',
+      render: (item: DevboxVersionListItemType) => (
+        <Flex alignItems={'center'}>
+          <Button
+            mr={5}
+            height={'27px'}
+            w={'60px'}
+            size={'sm'}
+            h="32px"
+            fontSize={'base'}
+            bg={'grayModern.150'}
+            color={'grayModern.900'}
+            _hover={{
+              color: 'brightBlue.600'
+            }}
+            isDisabled={item.status.value !== DevboxReleaseStatusEnum.Success}
+            onClick={() => handleDeploy(item)}>
+            {t('deploy')}
+          </Button>
+          <SealosMenu
+            width={100}
+            Button={
+              <MenuButton as={Button} variant={'square'} boxSize={'32px'} data-group>
+                <MyIcon
+                  name={'more'}
+                  color={'grayModern.600'}
                   _groupHover={{
                     color: 'brightBlue.600'
-                  }} 
+                  }}
                   fill={'currentcolor'}
-                  />
-                </MenuButton>
-              }
-              menuList={[
-                {
-                  child: (
-                    <>
-                      <MyIcon name={'edit'} w={'16px'} />
-                      <Box ml={2}>{t('edit')}</Box>
-                    </>
-                  ),
-                  onClick: () => {
-                    setCurrentVersion(item)
-                    onOpenEdit()
+                />
+              </MenuButton>
+            }
+            menuList={[
+              {
+                child: (
+                  <>
+                    <MyIcon name={'edit'} w={'16px'} />
+                    <Box ml={2}>{t('edit')}</Box>
+                  </>
+                ),
+                onClick: () => {
+                  setCurrentVersion(item)
+                  onOpenEdit()
+                }
+              },
+              {
+                child: (
+                  <>
+                    <MyIcon name={'template'} w={'16px'} />
+                    <Box ml={2}>{t('convert_to_runtime')}</Box>
+                  </>
+                ),
+                onClick: () => {
+                  setCurrentVersion(item)
+                  // onOpenEdit()
+                  // openTemplateModal({templateState: })
+                  if (templateRepositoryList.length > 0) {
+                    selectTemplalteModalHandler.onOpen()
+                  } else {
+                    createTemplateModalHandler.onOpen()
                   }
-                },
-                {
-                  child: (
-                    <>
-                      <MyIcon name={'template'} w={'16px'} />
-                      <Box ml={2}>{t('convert_to_runtime')}</Box>
-                    </>
-                  ),
-                  onClick: () => {
-                    setCurrentVersion(item)
-                    // onOpenEdit()
-                    // openTemplateModal({templateState: })
-                    if (templateRepositoryList.length > 0) {
-                      selectTemplalteModalHandler.onOpen()
-                    } else {
-                      createTemplateModalHandler.onOpen()
-                    }
+                }
+              },
+              {
+                child: (
+                  <>
+                    <MyIcon name={'delete'} w={'16px'} />
+                    <Box ml={2}>{t('delete')}</Box>
+                  </>
+                ),
+                menuItemStyle: {
+                  _hover: {
+                    color: 'red.600',
+                    bg: 'rgba(17, 24, 36, 0.05)'
                   }
                 },
-                {
-                  child: (
-                    <>
-                      <MyIcon name={'delete'} w={'16px'} />
-                      <Box ml={2}>{t('delete')}</Box>
-                    </>
-                  ),
-                  menuItemStyle: {
-                    _hover: {
-                      color: 'red.600',
-                      bg: 'rgba(17, 24, 36, 0.05)'
-                    }
-                  },
-                  onClick: () => openConfirm(() => handleDelDevboxVersion(item.name))()
-                }
-              ]
+                onClick: () => openConfirm(() => handleDelDevboxVersion(item.name))()
               }
-            />
-          </Flex >
-        )
-      }
-    ]
+            ]}
+          />
+        </Flex>
+      )
+    }
+  ]
   return (
     <Box
       borderWidth={1}
@@ -354,9 +355,12 @@ const Version = () => {
           </Box>
         </Flex>
       ) : (
-        <MyTable columns={columns} data={devboxVersionList} needRadius gridTemplateColumns={
-          '105px 105px 144px minmax(0, 1fr) 140px'
-        } />
+        <MyTable
+          columns={columns}
+          data={devboxVersionList}
+          needRadius
+          gridTemplateColumns={'105px 105px 144px minmax(0, 1fr) 140px'}
+        />
       )}
       {!!currentVersion && (
         <EditVersionDesModal
@@ -385,25 +389,32 @@ const Version = () => {
         />
       )}
       <ConfirmChild />
-      <CreateTemplateModal isOpen={createTemplateModalHandler.isOpen} onClose={createTemplateModalHandler.onClose} devboxReleaseName={currentVersion?.name || ''} />
-      {templateRepositoryList.length > 0 && <SelectTemplateModal
-        onOpenCreate={createTemplateModalHandler.onOpen}
-        onOpenUdate={(uid) => {
-          const repo = templateRepositoryList.find((item) => item.uid === uid)
-          setUpdateTemplateRepo(repo || null)
-          updateTemplateModalHandler.onOpen()
-        }}
-        templateRepositoryList={templateRepositoryList}
-        isOpen={selectTemplalteModalHandler.isOpen} onClose={
-          selectTemplalteModalHandler.onClose
-        } />}
-      {!!updateTemplateRepo && <UpdateTemplateRepositoryModal
-        templateRepository={updateTemplateRepo}
-        isOpen={updateTemplateModalHandler.isOpen}
-        onClose={updateTemplateModalHandler.onClose}
+      <CreateTemplateModal
+        isOpen={createTemplateModalHandler.isOpen}
+        onClose={createTemplateModalHandler.onClose}
         devboxReleaseName={currentVersion?.name || ''}
-      />}
-
+      />
+      {templateRepositoryList.length > 0 && (
+        <SelectTemplateModal
+          onOpenCreate={createTemplateModalHandler.onOpen}
+          onOpenUdate={(uid) => {
+            const repo = templateRepositoryList.find((item) => item.uid === uid)
+            setUpdateTemplateRepo(repo || null)
+            updateTemplateModalHandler.onOpen()
+          }}
+          templateRepositoryList={templateRepositoryList}
+          isOpen={selectTemplalteModalHandler.isOpen}
+          onClose={selectTemplalteModalHandler.onClose}
+        />
+      )}
+      {!!updateTemplateRepo && (
+        <UpdateTemplateRepositoryModal
+          templateRepository={updateTemplateRepo}
+          isOpen={updateTemplateModalHandler.isOpen}
+          onClose={updateTemplateModalHandler.onClose}
+          devboxReleaseName={currentVersion?.name || ''}
+        />
+      )}
     </Box>
   )
 }
diff --git a/frontend/providers/devbox/components/modals/AppSelectModal.tsx b/frontend/providers/devbox/components/modals/AppSelectModal.tsx
index 72e44efca57..3a585fb3fdf 100644
--- a/frontend/providers/devbox/components/modals/AppSelectModal.tsx
+++ b/frontend/providers/devbox/components/modals/AppSelectModal.tsx
@@ -77,8 +77,7 @@ const AppSelectModal = ({
     (item: AppListItemType) => {
       const tempFormData = {
         appName: item.name,
-        imageName: deployData.imageName,
-        labels: deployData.labels
+        imageName: deployData.imageName
       }
       const tempFormDataStr = encodeURIComponent(JSON.stringify(tempFormData))
       sealosApp.runEvents('openDesktopApp', {