chore: update the install from GitHub component

web/app/components/plugins/install-plugin/install-from-github/index.tsx

@@ -2,12 +2,14 @@
 
 import React, { useState } from 'react'
 import Modal from '@/app/components/base/modal'
-import Button from '@/app/components/base/button'
 import type { Item } from '@/app/components/base/select'
-import { PortalSelect } from '@/app/components/base/select'
 import type { GitHubRepoReleaseResponse } from '@/app/components/plugins/types'
-import { InstallStep } from '../../types'
+import { InstallStepFromGitHub } from '../../types'
 import Toast from '@/app/components/base/toast'
+import SetURL from './steps/setURL'
+import SetVersion from './steps/setVersion'
+import SetPackage from './steps/setPackage'
+import Installed from './steps/installed'
 
 type InstallFromGitHubProps = {
   onClose: () => void
@@ -20,7 +22,7 @@ type GitHubUrlInfo = {
 }
 
 type InstallState = {
-  step: InstallStep
+  step: InstallStepFromGitHub
   repoUrl: string
   selectedVersion: string
   selectedPackage: string
@@ -29,7 +31,7 @@ type InstallState = {
 
 const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ onClose }) => {
   const [state, setState] = useState<InstallState>({
-    step: InstallStep.url,
+    step: InstallStepFromGitHub.setUrl,
     repoUrl: '',
     selectedVersion: '',
     selectedPackage: '',
@@ -45,7 +47,7 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ onClose }) => {
     ? (state.releases
       .find(release => release.tag_name === state.selectedVersion)
       ?.assets
-.map(asset => ({
+      .map(asset => ({
         value: asset.browser_download_url,
         name: asset.name,
       })) || [])
@@ -80,12 +82,12 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ onClose }) => {
     // catch (error) {
     //   console.error('Error installing package:')
     // }
-    setState(prevState => ({ ...prevState, step: InstallStep.installed }))
+    setState(prevState => ({ ...prevState, step: InstallStepFromGitHub.installed }))
   }
 
   const handleNext = async () => {
     switch (state.step) {
-      case InstallStep.url: {
+      case InstallStepFromGitHub.setUrl: {
         const { isValid, owner, repo } = parseGitHubUrl(state.repoUrl)
         if (!isValid || !owner || !repo) {
           Toast.notify({
@@ -107,7 +109,7 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ onClose }) => {
               name: asset.name,
             })),
           }))
-          setState(prevState => ({ ...prevState, releases: formattedReleases, step: InstallStep.version }))
+          setState(prevState => ({ ...prevState, releases: formattedReleases, step: InstallStepFromGitHub.setVersion }))
         }
         catch (error) {
           Toast.notify({
@@ -117,10 +119,10 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ onClose }) => {
         }
         break
       }
-      case InstallStep.version:
-        setState(prevState => ({ ...prevState, step: InstallStep.package }))
+      case InstallStepFromGitHub.setVersion:
+        setState(prevState => ({ ...prevState, step: InstallStepFromGitHub.setPackage }))
         break
-      case InstallStep.package:
+      case InstallStepFromGitHub.setPackage:
         handleInstall()
         break
     }
@@ -129,44 +131,15 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ onClose }) => {
   const handleBack = () => {
     setState((prevState) => {
       switch (prevState.step) {
-        case InstallStep.version:
-          return { ...prevState, step: InstallStep.url }
-        case InstallStep.package:
-          return { ...prevState, step: InstallStep.version }
+        case InstallStepFromGitHub.setVersion:
+          return { ...prevState, step: InstallStepFromGitHub.setUrl }
+        case InstallStepFromGitHub.setPackage:
+          return { ...prevState, step: InstallStepFromGitHub.setVersion }
         default:
           return prevState
       }
     })
   }
-
-  const isInputValid = () => {
-    switch (state.step) {
-      case InstallStep.url:
-        return !!state.repoUrl.trim()
-      case InstallStep.version:
-        return !!state.selectedVersion
-      case InstallStep.package:
-        return !!state.selectedPackage
-      default:
-        return true
-    }
-  }
-
-  const InfoRow = ({ label, value }: { label: string; value: string }) => (
-    <div className='flex items-center gap-3'>
-      <div className='flex-shrink-0 w-[72px] items-center gap-2'>
-        <div className='text-text-tertiary system-sm-medium truncate'>
-          {label}
-        </div>
-      </div>
-      <div className='flex-grow overflow-hidden'>
-        <div className='text-text-secondary text-ellipsis system-sm-medium'>
-          {value}
-        </div>
-      </div>
-    </div>
-  )
-
   return (
     <Modal
       isShow={true}
@@ -181,112 +154,46 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ onClose }) => {
             Install plugin from GitHub
           </div>
           <div className='self-stretch text-text-tertiary system-xs-regular'>
-            {state.step !== InstallStep.installed && 'Please make sure that you only install plugins from a trusted source.'}
+            {state.step !== InstallStepFromGitHub.installed && 'Please make sure that you only install plugins from a trusted source.'}
           </div>
         </div>
       </div>
-      <div className={`flex px-6 py-3 flex-col justify-center items-start self-stretch ${state.step === InstallStep.installed ? 'gap-2' : 'gap-4'}`}>
-        {state.step === InstallStep.url && (
-          <>
-            <label
-              htmlFor='repoUrl'
-              className='flex flex-col justify-center items-start self-stretch text-text-secondary'
-            >
-              <span className='system-sm-semibold'>GitHub repository</span>
-            </label>
-            <input
-              type='url'
-              id='repoUrl'
-              name='repoUrl'
-              value={state.repoUrl}
-              onChange={e => setState(prevState => ({ ...prevState, repoUrl: e.target.value }))} // TODO: needs to verify the url
-              className='flex items-center self-stretch rounded-lg border border-components-input-border-active
-                bg-components-input-bg-active shadows-shadow-xs p-2 gap-[2px] flex-grow overflow-hidden
-                text-components-input-text-filled text-ellipsis system-sm-regular'
-              placeholder='Please enter GitHub repo URL'
-            />
-          </>
+      <div className={`flex px-6 py-3 flex-col justify-center items-start self-stretch ${state.step === InstallStepFromGitHub.installed ? 'gap-2' : 'gap-4'}`}>
+        {state.step === InstallStepFromGitHub.setUrl && (
+          <SetURL
+            repoUrl={state.repoUrl}
+            onChange={value => setState(prevState => ({ ...prevState, repoUrl: value }))}
+            onNext={handleNext}
+            onCancel={onClose}
+          />
         )}
-        {state.step === InstallStep.version && (
-          <>
-            <label
-              htmlFor='version'
-              className='flex flex-col justify-center items-start self-stretch text-text-secondary'
-            >
-              <span className='system-sm-semibold'>Select version</span>
-            </label>
-            <PortalSelect
-              value={state.selectedVersion}
-              onSelect={item => setState(prevState => ({ ...prevState, selectedVersion: item.value as string }))}
-              items={versions}
-              placeholder="Please select a version"
-              popupClassName='w-[432px] z-[1001]'
-            />
-          </>
+        {state.step === InstallStepFromGitHub.setVersion && (
+          <SetVersion
+            selectedVersion={state.selectedVersion}
+            versions={versions}
+            onSelect={item => setState(prevState => ({ ...prevState, selectedVersion: item.value as string }))}
+            onNext={handleNext}
+            onBack={handleBack}
+          />
         )}
-        {state.step === InstallStep.package && (
-          <>
-            <label
-              htmlFor='package'
-              className='flex flex-col justify-center items-start self-stretch text-text-secondary'
-            >
-              <span className='system-sm-semibold'>Select package</span>
-            </label>
-            <PortalSelect
-              value={state.selectedPackage}
-              onSelect={item => setState(prevState => ({ ...prevState, selectedPackage: item.value as string }))}
-              items={packages}
-              placeholder="Please select a package"
-              popupClassName='w-[432px] z-[1001]'
-            />
-          </>
+        {state.step === InstallStepFromGitHub.setPackage && (
+          <SetPackage
+            selectedPackage={state.selectedPackage}
+            packages={packages}
+            onSelect={item => setState(prevState => ({ ...prevState, selectedPackage: item.value as string }))}
+            onInstall={handleInstall}
+            onBack={handleBack}
+          />
         )}
-        {state.step === InstallStep.installed && (
-          <>
-            <div className='text-text-secondary system-md-regular'>The plugin has been installed successfully.</div>
-            <div className='flex w-full p-4 flex-col justify-center items-start gap-2 rounded-2xl bg-background-section-burn'>
-              {[
-                { label: 'Repository', value: state.repoUrl },
-                { label: 'Version', value: state.selectedVersion },
-                { label: 'Package', value: state.selectedPackage },
-              ].map(({ label, value }) => (
-                <InfoRow key={label} label={label} value={value} />
-              ))}
-            </div>
-          </>
+        {state.step === InstallStepFromGitHub.installed && (
+          <Installed
+            repoUrl={state.repoUrl}
+            selectedVersion={state.selectedVersion}
+            selectedPackage={state.selectedPackage}
+            onClose={onClose}
+          />
         )}
       </div>
-      <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
-        {state.step === InstallStep.installed
-          ? (
-            <Button
-              variant='primary'
-              className='min-w-[72px]'
-              onClick={onClose}
-            >
-              Close
-            </Button>
-          )
-          : (
-            <>
-              <Button
-                variant='secondary'
-                className='min-w-[72px]'
-                onClick={state.step === InstallStep.url ? onClose : handleBack}
-              >
-                {state.step === InstallStep.url ? 'Cancel' : 'Back'}
-              </Button>
-              <Button
-                variant='primary'
-                className='min-w-[72px]'
-                onClick={handleNext}
-                disabled={!isInputValid()}
-              >
-                {state.step === InstallStep.package ? 'Install' : 'Next'}
-              </Button>
-            </>
-          )}
-      </div>
     </Modal>
   )
 }

web/app/components/plugins/install-plugin/install-from-github/steps/installed.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import Button from '@/app/components/base/button'
+
+type InstalledProps = {
+  repoUrl: string
+  selectedVersion: string
+  selectedPackage: string
+  onClose: () => void
+}
+
+const InfoRow = ({ label, value }: { label: string; value: string }) => (
+  <div className='flex items-center gap-3'>
+    <div className='flex-shrink-0 w-[72px] items-center gap-2'>
+      <div className='text-text-tertiary system-sm-medium truncate'>
+        {label}
+      </div>
+    </div>
+    <div className='flex-grow overflow-hidden'>
+      <div className='text-text-secondary text-ellipsis system-sm-medium'>
+        {value}
+      </div>
+    </div>
+  </div>
+)
+
+const Installed: React.FC<InstalledProps> = ({ repoUrl, selectedVersion, selectedPackage, onClose }) => (
+  <>
+    <div className='text-text-secondary system-md-regular'>The plugin has been installed successfully.</div>
+    <div className='flex w-full p-4 flex-col justify-center items-start gap-2 rounded-2xl bg-background-section-burn'>
+      {[
+        { label: 'Repository', value: repoUrl },
+        { label: 'Version', value: selectedVersion },
+        { label: 'Package', value: selectedPackage },
+      ].map(({ label, value }) => (
+        <InfoRow key={label} label={label} value={value} />
+      ))}
+    </div>
+    <div className='flex justify-end items-center gap-2 self-stretch mt-4'>
+      <Button
+        variant='primary'
+        className='min-w-[72px]'
+        onClick={onClose}
+      >
+        Close
+      </Button>
+    </div>
+  </>
+)
+
+export default Installed

web/app/components/plugins/install-plugin/install-from-github/steps/setPackage.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import type { Item } from '@/app/components/base/select'
+import { PortalSelect } from '@/app/components/base/select'
+import Button from '@/app/components/base/button'
+
+type SetPackageProps = {
+  selectedPackage: string
+  packages: Item[]
+  onSelect: (item: Item) => void
+  onInstall: () => void
+  onBack: () => void
+}
+
+const SetPackage: React.FC<SetPackageProps> = ({ selectedPackage, packages, onSelect, onInstall, onBack }) => (
+  <>
+    <label
+      htmlFor='package'
+      className='flex flex-col justify-center items-start self-stretch text-text-secondary'
+    >
+      <span className='system-sm-semibold'>Select package</span>
+    </label>
+    <PortalSelect
+      value={selectedPackage}
+      onSelect={onSelect}
+      items={packages}
+      placeholder="Please select a package"
+      popupClassName='w-[432px] z-[1001]'
+    />
+    <div className='flex justify-end items-center gap-2 self-stretch mt-4'>
+      <Button
+        variant='secondary'
+        className='min-w-[72px]'
+        onClick={onBack}
+      >
+        Back
+      </Button>
+      <Button
+        variant='primary'
+        className='min-w-[72px]'
+        onClick={onInstall}
+        disabled={!selectedPackage}
+      >
+        Install
+      </Button>
+    </div>
+  </>
+)
+
+export default SetPackage

web/app/components/plugins/install-plugin/install-from-github/steps/setURL.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import Button from '@/app/components/base/button'
+
+type SetURLProps = {
+  repoUrl: string
+  onChange: (value: string) => void
+  onNext: () => void
+  onCancel: () => void
+}
+
+const SetURL: React.FC<SetURLProps> = ({ repoUrl, onChange, onNext, onCancel }) => (
+  <>
+    <label
+      htmlFor='repoUrl'
+      className='flex flex-col justify-center items-start self-stretch text-text-secondary'
+    >
+      <span className='system-sm-semibold'>GitHub repository</span>
+    </label>
+    <input
+      type='url'
+      id='repoUrl'
+      name='repoUrl'
+      value={repoUrl}
+      onChange={e => onChange(e.target.value)}
+      className='flex items-center self-stretch rounded-lg border border-components-input-border-active
+        bg-components-input-bg-active shadows-shadow-xs p-2 gap-[2px] flex-grow overflow-hidden
+        text-components-input-text-filled text-ellipsis system-sm-regular'
+      placeholder='Please enter GitHub repo URL'
+    />
+    <div className='flex justify-end items-center gap-2 self-stretch mt-4'>
+      <Button
+        variant='secondary'
+        className='min-w-[72px]'
+        onClick={onCancel}
+      >
+        Cancel
+      </Button>
+      <Button
+        variant='primary'
+        className='min-w-[72px]'
+        onClick={onNext}
+        disabled={!repoUrl.trim()}
+      >
+        Next
+      </Button>
+    </div>
+  </>
+)
+
+export default SetURL

web/app/components/plugins/install-plugin/install-from-github/steps/setVersion.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import type { Item } from '@/app/components/base/select'
+import { PortalSelect } from '@/app/components/base/select'
+import Button from '@/app/components/base/button'
+
+type SetVersionProps = {
+  selectedVersion: string
+  versions: Item[]
+  onSelect: (item: Item) => void
+  onNext: () => void
+  onBack: () => void
+}
+
+const SetVersion: React.FC<SetVersionProps> = ({ selectedVersion, versions, onSelect, onNext, onBack }) => (
+  <>
+    <label
+      htmlFor='version'
+      className='flex flex-col justify-center items-start self-stretch text-text-secondary'
+    >
+      <span className='system-sm-semibold'>Select version</span>
+    </label>
+    <PortalSelect
+      value={selectedVersion}
+      onSelect={onSelect}
+      items={versions}
+      placeholder="Please select a version"
+      popupClassName='w-[432px] z-[1001]'
+    />
+    <div className='flex justify-end items-center gap-2 self-stretch mt-4'>
+      <Button
+        variant='secondary'
+        className='min-w-[72px]'
+        onClick={onBack}
+      >
+        Back
+      </Button>
+      <Button
+        variant='primary'
+        className='min-w-[72px]'
+        onClick={onNext}
+        disabled={!selectedVersion}
+      >
+        Next
+      </Button>
+    </div>
+  </>
+)
+
+export default SetVersion

web/app/components/plugins/types.ts

@@ -88,20 +88,20 @@ export type PluginDetail = {
 }
 
 export type Plugin = {
-  'type': PluginType
-  'org': string
-  'name': string
-  'version': string
-  'latest_version': string
-  'icon': string
-  'label': Record<Locale, string>
-  'brief': Record<Locale, string>
+  type: PluginType
+  org: string
+  name: string
+  version: string
+  latest_version: string
+  icon: string
+  label: Record<Locale, string>
+  brief: Record<Locale, string>
   // Repo readme.md content
-  'introduction': string
-  'repository': string
-  'category': string
-  'install_count': number
-  'endpoint': {
+  introduction: string
+  repository: string
+  category: string
+  install_count: number
+  endpoint: {
     settings: CredentialFormSchemaBase[]
   }
 }
@@ -117,11 +117,11 @@ export type Permissions = {
   canDebugger: PermissionType
 }
 
-export enum InstallStep {
-  url = 'url',
-  version = 'version',
-  package = 'package',
-  installed = 'installed'
+export enum InstallStepFromGitHub {
+  setUrl = 'url',
+  setVersion = 'version',
+  setPackage = 'package',
+  installed = 'installed',
 }
 
 // endpoint