feat: jetbrain modal

frontend/providers/devbox/api/devbox.ts

@@ -9,22 +9,28 @@ import {
   DevboxVersionListItemType
 } from '@/types/devbox'
 import { KBDevboxReleaseType, KBDevboxTypeV2 } from '@/types/k8s'
-import { MonitorDataResult, MonitorQueryKey } from '@/types/monitor'
 import {
   adaptAppListItem,
   adaptDevboxDetailV2,
   adaptDevboxListItemV2,
   adaptDevboxVersionListItem,
   adaptPod
 } from '@/utils/adapt'
+import { MonitorDataResult, MonitorQueryKey } from '@/types/monitor'
+import { AxiosProgressEvent } from 'axios'
 
 export const getMyDevboxList = () =>
-  GET<[KBDevboxTypeV2, {
-    templateRepository: {
-      iconId: string | null;
-    };
-    uid: string;
-  }][]>('/api/getDevboxList').then((data): DevboxListItemTypeV2[] =>
+  GET<
+    [
+      KBDevboxTypeV2,
+      {
+        templateRepository: {
+          iconId: string | null
+        }
+        uid: string
+      }
+    ][]
+  >('/api/getDevboxList').then((data): DevboxListItemTypeV2[] =>
     data.map(adaptDevboxListItemV2).sort((a, b) => {
       return new Date(b.createTime).getTime() - new Date(a.createTime).getTime()
     })
@@ -35,9 +41,8 @@ export const getDevboxByName = (devboxName: string) =>
 export const applyYamlList = (yamlList: string[], type: 'create' | 'replace' | 'update') =>
   POST('/api/applyYamlList', { yamlList, type })
 
-export const createDevbox = (payload: {
-  devboxForm: DevboxEditTypeV2
-}) => POST(`/api/createDevbox`, payload)
+export const createDevbox = (payload: { devboxForm: DevboxEditTypeV2 }) =>
+  POST(`/api/createDevbox`, payload)
 
 export const updateDevbox = (payload: { patch: DevboxPatchPropsType; devboxName: string }) =>
   POST(`/api/updateDevbox`, payload)
@@ -73,14 +78,14 @@ export const delDevboxVersionByName = (versionName: string) =>
 
 export const getSSHConnectionInfo = (data: { devboxName: string }) =>
   GET<{
-    base64PublicKey: string;
-    base64PrivateKey: string;
-    token: string;
-    userName: string;
-    workingDir: string;
-    releaseCommand: string;
-    releaseArgs: string;
-}>('/api/getSSHConnectionInfo', data)
+    base64PublicKey: string
+    base64PrivateKey: string
+    token: string
+    userName: string
+    workingDir: string
+    releaseCommand: string
+    releaseArgs: string
+  }>('/api/getSSHConnectionInfo', data)
 
 export const getDevboxPodsByDevboxName = (name: string) =>
   GET<V1Pod[]>('/api/getDevboxPodsByDevboxName', { name }).then((item) => item.map(adaptPod))
@@ -95,3 +100,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/api/template.ts

@@ -1,20 +1,29 @@
-import { Tag, TemplateRepositoryKind } from "@/prisma/generated/client";
-import { DELETE, GET, POST } from "@/services/request";
-import { CreateTemplateRepositoryType, UpdateTemplateRepositoryType, UpdateTemplateType } from "@/utils/vaildate";
+import { Tag, TemplateRepositoryKind } from '@/prisma/generated/client'
+import { DELETE, GET, POST } from '@/services/request'
+import {
+  CreateTemplateRepositoryType,
+  UpdateTemplateRepositoryType,
+  UpdateTemplateType
+} from '@/utils/vaildate'
 
-export const listOfficialTemplateRepository = () => GET<{
-  templateRepositoryList: {
-    uid: string;
-    name: string;
-    kind: TemplateRepositoryKind;
-    iconId: string;
-    description: string | null;
-  }[]
-}>(`/api/templateRepository/listOfficial`)
-export const listTemplateRepository = (page: {
-  page: number,
-  pageSize: number,
-}, tags?: string[], search?: string) => {
+export const listOfficialTemplateRepository = () =>
+  GET<{
+    templateRepositoryList: {
+      uid: string
+      name: string
+      kind: TemplateRepositoryKind
+      iconId: string
+      description: string | null
+    }[]
+  }>(`/api/templateRepository/listOfficial`)
+export const listTemplateRepository = (
+  page: {
+    page: number
+    pageSize: number
+  },
+  tags?: string[],
+  search?: string
+) => {
   const searchParams = new URLSearchParams()
   if (tags && tags.length > 0) {
     tags.forEach((tag) => {
@@ -26,35 +35,34 @@ export const listTemplateRepository = (page: {
   if (search) searchParams.append('search', search)
   return GET<{
     templateRepositoryList: {
-      uid: string;
-      name: string;
-      description: string | null;
-      iconId: string | null;
+      uid: string
+      name: string
+      description: string | null
+      iconId: string | null
       templates: {
-        uid: string;
-        name: string;
-      }[];
+        uid: string
+        name: string
+      }[]
       templateRepositoryTags: {
-        tag: Tag;
-      }[];
-    }[],
+        tag: Tag
+      }[]
+    }[]
     page: {
-      page: number,
-      pageSize: number,
-      totalItems: number,
-      totalPage: number,
+      page: number
+      pageSize: number
+      totalItems: number
+      totalPage: number
     }
   }>(`/api/templateRepository/list?${searchParams.toString()}`)
-
 }
 export const listPrivateTemplateRepository = ({
   search,
   page,
-  pageSize,
+  pageSize
 }: {
-  search?: string,
-  page?: number,
-  pageSize?: number,
+  search?: string
+  page?: number
+  pageSize?: number
 } = {}) => {
   const searchParams = new URLSearchParams()
 
@@ -63,70 +71,79 @@ export const listPrivateTemplateRepository = ({
   if (pageSize) searchParams.append('pageSize', pageSize.toString())
   return GET<{
     templateRepositoryList: {
-      uid: string;
-      name: string;
-      description: string | null;
-      iconId: string | null;
+      uid: string
+      name: string
+      description: string | null
+      iconId: string | null
       templates: {
-        uid: string;
-        name: string;
-      }[];
-      isPublic: boolean;
+        uid: string
+        name: string
+      }[]
+      isPublic: boolean
       templateRepositoryTags: {
-        tag: Tag;
-      }[];
-    }[],
+        tag: Tag
+      }[]
+    }[]
     page: {
-      page: number,
-      pageSize: number,
-      totalItems: number,
-      totalPage: number,
+      page: number
+      pageSize: number
+      totalItems: number
+      totalPage: number
     }
   }>(`/api/templateRepository/listPrivate?${searchParams.toString()}`)
 }
 
-export const getTemplateRepository = (uid: string) => GET<{
-  templateRepository: {
-    templates: {
-      name: string;
-      uid: string;
-    }[];
-    uid: string;
-    isPublic: true;
-    name: string;
-    description: string | null;
-    iconId: string | null;
-    templateRepositoryTags: {
-      tag: Tag;
-    }[];
-  }
-}>(`/api/templateRepository/get?uid=${uid}`)
-export const getTemplateConfig = (uid: string) => GET<{
-  template: {
-    name: string;
-    uid: string;
-    config: string;
-  }
-}>(`/api/templateRepository/template/getConfig?uid=${uid}`)
-export const listTemplate = (templateRepositoryUid: string) => GET<{
-  templateList: {
-    uid: string;
-    name: string;
-    config: string;
-    image: string;
-    createAt: Date;
-    updateAt: Date;
-  }[]
-}>(`/api/templateRepository/template/list?templateRepositoryUid=${templateRepositoryUid}`)
-export const listTag = () => GET<{
-  tagList: Tag[]
-}>(`/api/templateRepository/tag/list`)
+export const getTemplateRepository = (uid: string) =>
+  GET<{
+    templateRepository: {
+      templates: {
+        name: string
+        uid: string
+      }[]
+      uid: string
+      isPublic: true
+      name: string
+      description: string | null
+      iconId: string | null
+      templateRepositoryTags: {
+        tag: Tag
+      }[]
+    }
+  }>(`/api/templateRepository/get?uid=${uid}`)
+export const getTemplateConfig = (uid: string) =>
+  GET<{
+    template: {
+      name: string
+      uid: string
+      config: string
+    }
+  }>(`/api/templateRepository/template/getConfig?uid=${uid}`)
+export const listTemplate = (templateRepositoryUid: string) =>
+  GET<{
+    templateList: {
+      uid: string
+      name: string
+      config: string
+      image: string
+      createAt: Date
+      updateAt: Date
+    }[]
+  }>(`/api/templateRepository/template/list?templateRepositoryUid=${templateRepositoryUid}`)
+export const listTag = () =>
+  GET<{
+    tagList: Tag[]
+  }>(`/api/templateRepository/tag/list`)
 
-export const createTemplateReposistory = (data: CreateTemplateRepositoryType) => POST(`/api/templateRepository/withTemplate/create`, data)
+export const createTemplateReposistory = (data: CreateTemplateRepositoryType) =>
+  POST(`/api/templateRepository/withTemplate/create`, data)
 export const initUser = () => POST<string>(`/api/auth/init`)
 
-export const deleteTemplateRepository = (templateRepositoryUid: string) => DELETE(`/api/templateRepository/delete?templateRepositoryUid=${templateRepositoryUid}`)
+export const deleteTemplateRepository = (templateRepositoryUid: string) =>
+  DELETE(`/api/templateRepository/delete?templateRepositoryUid=${templateRepositoryUid}`)
 
-export const updateTemplateReposistory = (data: UpdateTemplateRepositoryType) => POST(`/api/templateRepository/update`, data)
-export const updateTemplate = (data: UpdateTemplateType) => POST(`/api/templateRepository/withTemplate/update`, data)
-export const deleteTemplate = (templateUid: string) => DELETE(`/api/templateRepository/template/delete?uid=${templateUid}`)
+export const updateTemplateReposistory = (data: UpdateTemplateRepositoryType) =>
+  POST(`/api/templateRepository/update`, data)
+export const updateTemplate = (data: UpdateTemplateType) =>
+  POST(`/api/templateRepository/withTemplate/update`, data)
+export const deleteTemplate = (templateUid: string) =>
+  DELETE(`/api/templateRepository/template/delete?uid=${templateUid}`)

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

@@ -10,12 +10,12 @@ import { useRouter } from '@/i18n';
 import { useGlobalStore } from '@/stores/global';
 import { DevboxListItemTypeV2 } from '@/types/devbox';
 
-import DevboxStatusTag from '@/components/DevboxStatusTag';
 import MyIcon from '@/components/Icon';
 import IDEButton from '@/components/IDEButton';
-import ReleaseModal from '@/components/modals/releaseModal';
 import PodLineChart from '@/components/PodLineChart';
 import { AdvancedTable } from '@/components/AdvancedTable';
+import DevboxStatusTag from '@/components/DevboxStatusTag';
+import ReleaseModal from '@/components/modals/ReleaseModal';
 
 const DelModal = dynamic(() => import('@/components/modals/DelModal'));
 
@@ -29,9 +29,6 @@ const DevboxList = ({
   const router = useRouter();
   const t = useTranslations();
   const { message: toast } = useMessage();
-  const duplicatedDevboxList = Array(20)
-    .fill(0)
-    .flatMap(() => [...devboxList]);
 
   // TODO: Unified Loading Behavior
   const { setLoading } = useGlobalStore();
@@ -224,6 +221,7 @@ const DevboxList = ({
             sshPort={item.sshPort}
             status={item.status}
             mr={'8px'}
+            runtimeType={item.template.templateRepository.iconId as string}
           />
           <Button
             mr={'8px'}
@@ -347,7 +345,7 @@ const DevboxList = ({
   ];
   return (
     <>
-      <AdvancedTable columns={columns} data={duplicatedDevboxList} itemClass="devboxListItem" />
+      <AdvancedTable columns={columns} data={devboxList} itemClass="devboxListItem" />
       {!!delDevbox && (
         <DelModal
           devbox={delDevbox}

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>
       )}