[incubator-devlake] branch main updated: refactor(config-ui): use multi-selector to replace the original (#3843)

[likyh]

This is an automated email from the ASF dual-hosted git repository.

likyh pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git


The following commit(s) were added to refs/heads/main by this push:
     new 8730476d refactor(config-ui): use multi-selector to replace the 
original (#3843)
8730476d is described below

commit 8730476d1bdad6a599469e5870dc15b3875dbc02
Author: 青湛 <0x1304...@gmail.com>
AuthorDate: Fri Dec 2 12:41:36 2022 +0800

    refactor(config-ui): use multi-selector to replace the original (#3843)
---
 .../components/gitlab/project-selector/index.tsx   | 78 +++++-----------------
 .../use-gitlab-project-selector.ts                 | 19 +-----
 2 files changed, 19 insertions(+), 78 deletions(-)

diff --git a/config-ui/src/components/gitlab/project-selector/index.tsx 
b/config-ui/src/components/gitlab/project-selector/index.tsx
index 62ca6243..31566606 100644
--- a/config-ui/src/components/gitlab/project-selector/index.tsx
+++ b/config-ui/src/components/gitlab/project-selector/index.tsx
@@ -17,8 +17,9 @@
  */
 
 import React from 'react'
-import { MultiSelect } from '@blueprintjs/select'
-import { Checkbox, MenuItem, Intent } from '@blueprintjs/core'
+import { Checkbox } from '@blueprintjs/core'
+
+import { MultiSelector } from '@/components'
 
 import type { ItemType } from './use-gitlab-project-selector'
 import {
@@ -28,79 +29,32 @@ import {
 import * as S from './styled'
 
 interface Props extends UseGitLabProjectSelectorProps {
-  disabledItemIds?: Array<ItemType['id']>
+  selectedItems: Array<ItemType>
+  onChangeItems: (items: Array<ItemType>) => void
 }
 
 export const GitLabProjectSelector = ({
   connectionId,
-  disabledItemIds,
   selectedItems,
   onChangeItems
 }: Props) => {
-  const {
-    loading,
-    items,
-    search,
-    membership,
-    onSearch,
-    onChangeMembership,
-    onSelect,
-    onRemove
-  } = useGitLabProjectSelector({
-    connectionId,
-    selectedItems,
-    onChangeItems
-  })
-
-  const tagRenderer = (item: any) => {
-    return <span>{item.shortTitle || item.title}</span>
-  }
-
-  const itemRenderer = (item: ItemType, { handleClick }: any) => {
-    const selected = !![
-      ...selectedItems.map((it) => it.id),
-      ...(disabledItemIds ?? [])
-    ].find((id) => id === item.id)
-
-    return (
-      <MenuItem
-        key={item.key}
-        text={
-          <Checkbox label={item.title} checked={selected} disabled={selected} 
/>
-        }
-        disabled={selected}
-        onClick={handleClick}
-      />
-    )
-  }
+  const { loading, items, membership, onSearch, onChangeMembership } =
+    useGitLabProjectSelector({
+      connectionId
+    })
 
   return (
     <S.Container>
-      <MultiSelect
-        className='selector'
-        placeholder='Select Projects'
-        popoverProps={{ usePortal: false, minimal: true, isOpen: !!search }}
-        resetOnSelect
-        fill
+      <MultiSelector
+        placeholder='Select Projects...'
         items={items}
+        getKey={(it) => `${it.id}`}
+        getName={(it) => it.shortTitle || it.title}
         selectedItems={selectedItems}
-        tagInputProps={{
-          tagProps: {
-            intent: Intent.PRIMARY,
-            minimal: true
-          }
-        }}
-        noResults={
-          <MenuItem
-            disabled={true}
-            text={loading ? 'Fetching...' : 'No Projects Available.'}
-          />
-        }
-        tagRenderer={tagRenderer}
-        itemRenderer={itemRenderer}
+        onChangeItems={onChangeItems}
+        loading={loading}
+        noResult='No Projects Available.'
         onQueryChange={onSearch}
-        onItemSelect={onSelect}
-        onRemove={onRemove}
       />
       <Checkbox
         className='checkbox'
diff --git 
a/config-ui/src/components/gitlab/project-selector/use-gitlab-project-selector.ts
 
b/config-ui/src/components/gitlab/project-selector/use-gitlab-project-selector.ts
index 527ccd36..667939ba 100644
--- 
a/config-ui/src/components/gitlab/project-selector/use-gitlab-project-selector.ts
+++ 
b/config-ui/src/components/gitlab/project-selector/use-gitlab-project-selector.ts
@@ -31,17 +31,13 @@ export type ItemType = {
 
 export interface UseGitLabProjectSelectorProps {
   connectionId: string
-  selectedItems: Array<ItemType>
-  onChangeItems: (items: Array<ItemType>) => void
 }
 
 export const useGitLabProjectSelector = ({
-  connectionId,
-  selectedItems,
-  onChangeItems
+  connectionId
 }: UseGitLabProjectSelectorProps) => {
   const [loading, setLoading] = useState(false)
-  const [items, setItems] = useState([])
+  const [items, setItems] = useState<ItemType[]>([])
   const [search, setSearch] = useState('')
   const [membership, setMembership] = useState(true)
 
@@ -77,23 +73,14 @@ export const useGitLabProjectSelector = ({
     () => ({
       loading,
       items,
-      search,
       membership,
       onSearch(s: string) {
         setSearch(s)
       },
       onChangeMembership(e: React.ChangeEvent<HTMLInputElement>) {
         setMembership(e.target.checked)
-      },
-      onSelect(item: ItemType) {
-        const newItems = [...selectedItems, item]
-        onChangeItems(newItems)
-      },
-      onRemove(item: ItemType) {
-        const newItems = selectedItems.filter((it) => item.id !== it.id)
-        onChangeItems(newItems)
       }
     }),
-    [loading, items, search, membership]
+    [loading, items, membership]
   )
 }