feat: jetbrain modal

frontend/providers/devbox/api/devbox.ts

@@ -17,6 +17,7 @@ import {
 import { GET, POST, DELETE } from '@/services/request'
 import { KBDevboxType, KBDevboxReleaseType } from '@/types/k8s'
 import { MonitorDataResult, MonitorQueryKey } from '@/types/monitor'
+import { AxiosProgressEvent } from 'axios'
 
 export const getMyDevboxList = () =>
   GET<KBDevboxType[]>('/api/getDevboxList').then((data): DevboxListItemType[] =>
@@ -88,3 +89,17 @@ export const getAppsByDevboxId = (devboxId: string) =>
   GET<V1Deployment & V1StatefulSet[]>('/api/getAppsByDevboxId', { devboxId }).then((res) =>
     res.map(adaptAppListItem)
   )
+
+export const execCommandInDevboxPod = (data: {
+  devboxName: string
+  command: string
+  idePath: string
+  onDownloadProgress: (progressEvent: AxiosProgressEvent) => void
+  signal: AbortSignal
+}) =>
+  POST('/api/execCommandInDevboxPod', data, {
+    // responseType: 'stream',
+    timeout: 0,
+    onDownloadProgress: data.onDownloadProgress,
+    signal: data.signal
+  })

frontend/providers/devbox/app/[lang]/(platform)/(home)/components/DevboxList.tsx

@@ -14,7 +14,7 @@ import MyIcon from '@/components/Icon'
 import IDEButton from '@/components/IDEButton'
 import PodLineChart from '@/components/PodLineChart'
 import DevboxStatusTag from '@/components/DevboxStatusTag'
-import ReleaseModal from '@/components/modals/releaseModal'
+import ReleaseModal from '@/components/modals/ReleaseModal'
 
 const DelModal = dynamic(() => import('@/components/modals/DelModal'))
 
@@ -217,6 +217,7 @@ const DevboxList = ({
         <Flex>
           <IDEButton
             devboxName={item.name}
+            runtimeType={item.runtimeType}
             runtimeVersion={item.runtimeVersion}
             sshPort={item.sshPort}
             status={item.status}

frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/Yaml.tsx

@@ -4,12 +4,13 @@ import { useTranslations } from 'next-intl'
 import { useSearchParams } from 'next/navigation'
 import { Box, Center, Flex, Grid, useTheme } from '@chakra-ui/react'
 
-import { useRouter } from '@/i18n'
+import Code from '@/components/Code'
 import MyIcon from '@/components/Icon'
+
+import { useRouter } from '@/i18n'
 import { obj2Query } from '@/utils/tools'
 import type { YamlItemType } from '@/types'
 import { useCopyData } from '@/utils/tools'
-import YamlCode from '@/components/YamlCode/index'
 
 import styles from './index.module.scss'
 
@@ -111,7 +112,7 @@ const Yaml = ({ yamlList = [], pxVal }: { yamlList: YamlItemType[]; pxVal: numbe
             </Center>
           </Flex>
           <Box flex={1} h={0} overflow={'auto'} bg={'#ffffff'} p={4}>
-            <YamlCode className={styles.code} content={yamlList[selectedIndex].value} />
+            <Code className={styles.code} content={yamlList[selectedIndex].value} language="yaml" />
           </Box>
         </Flex>
       )}

frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/BasicInfo.tsx

@@ -1,15 +1,16 @@
 import { useMessage } from '@sealos/ui'
 import { useTranslations } from 'next-intl'
 import React, { useCallback, useState } from 'react'
-import { Box, Text, Flex, Image, Spinner, Tooltip } from '@chakra-ui/react'
+import { Box, Text, Flex, Image, Spinner, Tooltip, Button } from '@chakra-ui/react'
 
 import MyIcon from '@/components/Icon'
-
-import { DevboxDetailType } from '@/types/devbox'
-
+import SshConnectModal from '@/components/modals/SshConnectModal'
 import { useEnvStore } from '@/stores/env'
 import { useDevboxStore } from '@/stores/devbox'
 import { useRuntimeStore } from '@/stores/runtime'
+import { downLoadBlob } from '@/utils/tools'
+import { getSSHConnectionInfo, getSSHRuntimeInfo } from '@/api/devbox'
+import { JetBrainsGuideData } from '@/components/IDEButton'
 
 const BasicInfo = () => {
   const t = useTranslations()
@@ -20,6 +21,40 @@ const BasicInfo = () => {
   const { getRuntimeDetailLabel } = useRuntimeStore()
 
   const [loading, setLoading] = useState(false)
+  const [onOpenSsHConnect, setOnOpenSsHConnect] = useState(false)
+  const [sshConfigData, setSshConfigData] = useState<JetBrainsGuideData | null>(null)
+
+  const handleOneClickConfig = useCallback(async () => {
+    const { base64PrivateKey, userName, token } = await getSSHConnectionInfo({
+      devboxName: devboxDetail?.name,
+      runtimeName: devboxDetail?.runtimeVersion
+    })
+    const { workingDir } = await getSSHRuntimeInfo(devboxDetail?.runtimeVersion)
+    const sshPrivateKey = Buffer.from(base64PrivateKey, 'base64').toString('utf-8')
+
+    if (!devboxDetail?.sshPort) return
+
+    setSshConfigData({
+      devboxName: devboxDetail?.name,
+      runtimeType: devboxDetail?.runtimeType,
+      privateKey: sshPrivateKey,
+      userName,
+      token,
+      workingDir,
+      host: env.sealosDomain,
+      port: devboxDetail?.sshPort.toString(),
+      configHost: `${env.sealosDomain}_${env.namespace}_${devboxDetail?.name}`
+    })
+
+    setOnOpenSsHConnect(true)
+  }, [
+    devboxDetail?.name,
+    devboxDetail?.runtimeType,
+    devboxDetail?.runtimeVersion,
+    devboxDetail?.sshPort,
+    env.namespace,
+    env.sealosDomain
+  ])
 
   const handleCopySSHCommand = useCallback(() => {
     const sshCommand = `ssh -i yourPrivateKeyPath ${devboxDetail?.sshConfig?.sshUser}@${env.sealosDomain} -p ${devboxDetail.sshPort}`
@@ -33,28 +68,6 @@ const BasicInfo = () => {
     })
   }, [devboxDetail?.sshConfig?.sshUser, devboxDetail.sshPort, env.sealosDomain, toast, t])
 
-  const handleDownloadConfig = useCallback(
-    async (config: DevboxDetailType['sshConfig']) => {
-      setLoading(true)
-
-      const privateKey = config?.sshPrivateKey as string
-
-      const blob = new Blob([privateKey], { type: 'application/octet-stream' })
-      const url = window.URL.createObjectURL(blob)
-      const a = document.createElement('a')
-      a.style.display = 'none'
-      a.href = url
-      a.download = devboxDetail.name
-      document.body.appendChild(a)
-      a.click()
-      window.URL.revokeObjectURL(url)
-      document.body.removeChild(a)
-
-      setLoading(false)
-    },
-    [devboxDetail]
-  )
-
   return (
     <Flex borderRadius="lg" bg={'white'} p={4} flexDirection={'column'} h={'100%'}>
       {/* basic info */}
@@ -134,19 +147,34 @@ const BasicInfo = () => {
         </Flex>
       </Flex>
       {/* ssh config */}
-      <Flex mb={3} mt={4}>
-        <MyIcon
-          name="link"
-          w={'15px'}
-          h={'15px'}
-          mr={'4px'}
+      <Flex mb={3} mt={4} alignItems={'center'} justify={'space-between'}>
+        <Flex>
+          <MyIcon
+            name="link"
+            w={'15px'}
+            h={'15px'}
+            mr={'4px'}
+            color={'grayModern.600'}
+            mt={'1px'}
+            ml={'1px'}
+          />
+          <Box color={'grayModern.600'} fontSize={'base'} fontWeight={'bold'}>
+            {t('ssh_config')}
+          </Box>
+        </Flex>
+        <Button
+          size={'sm'}
+          leftIcon={<MyIcon name="settings" w={'16px'} />}
+          bg={'white'}
           color={'grayModern.600'}
-          mt={'1px'}
-          ml={'1px'}
-        />
-        <Box color={'grayModern.600'} fontSize={'base'} fontWeight={'bold'}>
-          {t('ssh_config')}
-        </Box>
+          border={'1px solid'}
+          borderColor={'grayModern.200'}
+          _hover={{
+            color: 'brightBlue.600'
+          }}
+          onClick={() => handleOneClickConfig()}>
+          {t('one_click_config')}
+        </Button>
       </Flex>
       <Flex bg={'grayModern.50'} p={4} borderRadius={'lg'} gap={4} flexDirection={'column'}>
         <Flex>
@@ -202,9 +230,16 @@ const BasicInfo = () => {
                   <MyIcon
                     cursor={'pointer'}
                     name="download"
+                    color={'grayModern.600'}
                     w={'16px'}
                     h={'16px'}
-                    onClick={() => handleDownloadConfig(devboxDetail?.sshConfig)}
+                    onClick={() =>
+                      downLoadBlob(
+                        devboxDetail?.sshConfig?.sshPrivateKey as string,
+                        'application/octet-stream',
+                        `${devboxDetail?.name}`
+                      )
+                    }
                   />
                 </Flex>
               </Tooltip>
@@ -273,6 +308,17 @@ const BasicInfo = () => {
           </Flex>
         </Flex>
       </Flex>
+      {onOpenSsHConnect && sshConfigData && (
+        <SshConnectModal
+          jetbrainsGuideData={sshConfigData}
+          onSuccess={() => {
+            setOnOpenSsHConnect(false)
+          }}
+          onClose={() => {
+            setOnOpenSsHConnect(false)
+          }}
+        />
+      )}
     </Flex>
   )
 }

frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/Header.tsx

@@ -160,6 +160,7 @@ const Header = ({
       <Flex gap={5}>
         <Box>
           <IDEButton
+            runtimeType={devboxDetail.runtimeType}
             devboxName={devboxDetail.name}
             runtimeVersion={devboxDetail.runtimeVersion}
             sshPort={devboxDetail.sshPort as number}

frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/Version.tsx

@@ -8,7 +8,7 @@ import { Box, Button, Flex, MenuButton, Text, useDisclosure } from '@chakra-ui/r
 import MyIcon from '@/components/Icon'
 import MyTable from '@/components/MyTable'
 import DevboxStatusTag from '@/components/DevboxStatusTag'
-import ReleaseModal from '@/components/modals/releaseModal'
+import ReleaseModal from '@/components/modals/ReleaseModal'
 import EditVersionDesModal from '@/components/modals/EditVersionDesModal'
 
 import { DevboxVersionListItemType } from '@/types/devbox'

frontend/providers/devbox/app/[lang]/(platform)/layout.tsx

@@ -83,7 +83,7 @@ export default function PlatformLayout({ children }: { children: React.ReactNode
         })
       } catch (error) {
         changeI18n({
-          currentLanguage: 'zh'
+          currentLanguage: 'en'
         })
       }
     })()