feat: install bundle ui

web/app/components/plugins/install-plugin/install-bundle/index.tsx

@@ -1,9 +1,13 @@
 'use client'
 import type { FC } from 'react'
-import React, { useState } from 'react'
+import Modal from '@/app/components/base/modal'
+import React, { useCallback, useState } from 'react'
 import { InstallStep } from '../../types'
 import type { PluginDeclaration } from '../../types'
-import SelectPackage from './steps/select-package'
+import Install from './steps/install'
+import { useTranslation } from 'react-i18next'
+
+const i18nPrefix = 'plugin.installModal'
 
 export enum InstallType {
   fromLocal = 'fromLocal',
@@ -14,24 +18,47 @@ export enum InstallType {
 type Props = {
   installType?: InstallType
   plugins?: PluginDeclaration[]
+  onClose: () => void
 }
 
 const InstallBundle: FC<Props> = ({
   installType = InstallType.fromMarketplace,
   plugins = [],
+  onClose,
 }) => {
+  const { t } = useTranslation()
   const [step, setStep] = useState<InstallStep>(installType === InstallType.fromMarketplace ? InstallStep.readyToInstall : InstallStep.uploading)
-  const [selectedPlugins, setSelectedPlugins] = useState<PluginDeclaration[]>([])
 
-  const handleSelectedPluginsChange = (plugins: PluginDeclaration[]) => {
-    setSelectedPlugins(plugins)
-  }
+  const getTitle = useCallback(() => {
+    if (step === InstallStep.uploadFailed)
+      return t(`${i18nPrefix}.uploadFailed`)
+    if (step === InstallStep.installed)
+      return t(`${i18nPrefix}.installedSuccessfully`)
+    if (step === InstallStep.installFailed)
+      return t(`${i18nPrefix}.installFailed`)
+
+    return t(`${i18nPrefix}.installPlugin`)
+  }, [step, t])
+
   return (
-    <div>
+    <Modal
+      isShow={true}
+      onClose={onClose}
+      className='flex min-w-[560px] p-0 flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadows-shadow-xl'
+      closable
+    >
+      <div className='flex pt-6 pl-6 pb-3 pr-14 items-start gap-2 self-stretch'>
+        <div className='self-stretch text-text-primary title-2xl-semi-bold'>
+          {getTitle()}
+        </div>
+      </div>
       {step === InstallStep.readyToInstall && (
-        <SelectPackage plugins={plugins || []} onChange={handleSelectedPluginsChange} />
+        <Install
+          plugins={plugins || []}
+          onCancel={onClose}
+        />
       )}
-    </div>
+    </Modal>
   )
 }
 

web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx

@@ -0,0 +1,85 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { PluginDeclaration } from '../../../types'
+import Card from '../../../card'
+import Button from '@/app/components/base/button'
+import { RiLoader2Line } from '@remixicon/react'
+import Badge, { BadgeState } from '@/app/components/base/badge/index'
+import { pluginManifestToCardPluginProps } from '../../utils'
+import { useTranslation } from 'react-i18next'
+import Checkbox from '@/app/components/base/checkbox'
+
+const i18nPrefix = 'plugin.installModal'
+
+type Props = {
+  plugins: PluginDeclaration[],
+  onCancel: () => void
+}
+
+const Install: FC<Props> = ({
+  plugins,
+  onCancel,
+}) => {
+  const { t } = useTranslation()
+  const [selectedPlugins, setSelectedPlugins] = React.useState<PluginDeclaration[]>([])
+  const selectedPluginsNum = selectedPlugins.length
+  const handleSelect = (plugin: PluginDeclaration) => {
+    return () => {
+      const isSelected = !!selectedPlugins.find(p => p.plugin_unique_identifier === plugin.plugin_unique_identifier)
+      let nextSelectedPlugins
+      if (isSelected)
+        nextSelectedPlugins = selectedPlugins.filter(p => p.plugin_unique_identifier !== plugin.plugin_unique_identifier)
+      else
+        nextSelectedPlugins = [...selectedPlugins, plugin]
+      setSelectedPlugins(nextSelectedPlugins)
+    }
+  }
+  const [isInstalling, setIsInstalling] = React.useState(false)
+  const handleInstall = () => {
+
+  }
+  return (
+    <>
+      <div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
+        <div className='text-text-secondary system-md-regular'>
+          <p>{t(`${i18nPrefix}.${selectedPluginsNum > 1 ? 'readyToInstallPackages' : 'readyToInstallPackage'}`, { num: selectedPluginsNum })}</p>
+        </div>
+        <div className='w-full p-2 rounded-2xl bg-background-section-burn space-y-1'>
+          {plugins.map(plugin => (
+            <div className='flex items-center space-x-2' key={plugin.plugin_unique_identifier}>
+              <Checkbox
+                className='shrink-0'
+                checked={!!selectedPlugins.find(p => p.plugin_unique_identifier === plugin.plugin_unique_identifier)}
+                onCheck={handleSelect(plugin)}
+              />
+              <Card
+                className='grow'
+                payload={pluginManifestToCardPluginProps(plugin)}
+                titleLeft={<Badge className='mx-1' size="s" state={BadgeState.Default}>{plugin.version}</Badge>}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+      {/* Action Buttons */}
+      <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
+        {!isInstalling && (
+          <Button variant='secondary' className='min-w-[72px]' onClick={onCancel}>
+            {t('common.operation.cancel')}
+          </Button>
+        )}
+        <Button
+          variant='primary'
+          className='min-w-[72px] flex space-x-0.5'
+          disabled={isInstalling || selectedPlugins.length === 0}
+          onClick={handleInstall}
+        >
+          {isInstalling && <RiLoader2Line className='w-4 h-4 animate-spin-slow' />}
+          <span>{t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`)}</span>
+        </Button>
+      </div>
+    </>
+  )
+}
+export default React.memo(Install)

web/app/components/plugins/install-plugin/install-bundle/steps/select-package.tsx

@@ -1,20 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import React from 'react'
-import type { PluginDeclaration } from '../../../types'
-
-type Props = {
-  plugins: PluginDeclaration[],
-  onChange: (plugins: PluginDeclaration[]) => void
-}
-
-const SelectPackage: FC<Props> = ({
-  plugins,
-  onChange,
-}) => {
-  return (
-    <div>
-    </div>
-  )
-}
-export default React.memo(SelectPackage)