This is an automated email from the ASF dual-hosted git repository.
mintsweet 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 b30a88ef2 feat(config-ui): use remote api to replace proxy api in
github (#5391)
b30a88ef2 is described below
commit b30a88ef20a50cdf9a9414ee11bf07c9b3cbb70f
Author: 青湛 <[email protected]>
AuthorDate: Wed Jun 7 15:29:30 2023 +0800
feat(config-ui): use remote api to replace proxy api in github (#5391)
---
config-ui/src/plugins/register/github/api.ts | 50 -----
.../plugins/register/github/components/index.ts | 20 --
.../github/components/miller-columns/index.tsx | 100 ----------
.../github/components/miller-columns/styled.ts | 24 ---
.../miller-columns/use-miller-columns.ts | 216 ---------------------
.../github/components/repo-selector/index.tsx | 48 -----
.../components/repo-selector/use-repo-selector.ts | 78 --------
.../src/plugins/register/github/data-scope.tsx | 26 ++-
8 files changed, 21 insertions(+), 541 deletions(-)
diff --git a/config-ui/src/plugins/register/github/api.ts
b/config-ui/src/plugins/register/github/api.ts
index e202ffee7..ad19f05d0 100644
--- a/config-ui/src/plugins/register/github/api.ts
+++ b/config-ui/src/plugins/register/github/api.ts
@@ -18,54 +18,4 @@
import { request } from '@/utils';
-type PaginationParams = {
- page: number;
- per_page: number;
-};
-
-export const getUser = (prefix: string) => request(`${prefix}/user`);
-
-export const getInstallationRepos = (prefix: string, params: PaginationParams)
=>
- request(`${prefix}/installation/repositories`, {
- method: 'get',
- data: {
- ...params,
- },
- });
-
-export const getUserOrgs = (prefix: string, params: PaginationParams) =>
- request(`${prefix}/user/orgs`, {
- method: 'get',
- data: params,
- });
-
-export const getOrgRepos = (prefix: string, org: string, params:
PaginationParams) =>
- request(`${prefix}/orgs/${org}/repos`, {
- method: 'get',
- data: {
- ...params,
- sort: 'full_name',
- },
- });
-
-export const getUserRepos = (prefix: string, params: PaginationParams) =>
- request(`${prefix}/user/repos`, {
- method: 'get',
- data: {
- ...params,
- type: 'owner',
- sort: 'full_name',
- },
- });
-
-type SearchRepoParams = {
- q: string;
-};
-
-export const searchRepo = (prefix: string, params: SearchRepoParams) =>
- request(`${prefix}/search/repositories`, {
- method: 'get',
- data: params,
- });
-
export const testConnection = (payload: any) =>
request('/plugins/github/test', { method: 'post', data: payload });
diff --git a/config-ui/src/plugins/register/github/components/index.ts
b/config-ui/src/plugins/register/github/components/index.ts
deleted file mode 100644
index db6a4db91..000000000
--- a/config-ui/src/plugins/register/github/components/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-export * from './miller-columns';
-export * from './repo-selector';
diff --git
a/config-ui/src/plugins/register/github/components/miller-columns/index.tsx
b/config-ui/src/plugins/register/github/components/miller-columns/index.tsx
deleted file mode 100644
index 2eb2cc522..000000000
--- a/config-ui/src/plugins/register/github/components/miller-columns/index.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-import { useState, useEffect } from 'react';
-import type { McsID, McsItem, McsColumn } from 'miller-columns-select';
-import MillerColumnsSelect from 'miller-columns-select';
-
-import { Loading } from '@/components';
-
-import type { ScopeItemType } from '../../types';
-
-import type { UseMillerColumnsProps, ExtraType } from './use-miller-columns';
-import { useMillerColumns } from './use-miller-columns';
-import * as S from './styled';
-
-interface Props extends UseMillerColumnsProps {
- disabledItems?: ScopeItemType[];
- selectedItems: ScopeItemType[];
- onChangeItems: (selectedItems: ScopeItemType[]) => void;
-}
-
-export const MillerColumns = ({ connectionId, disabledItems, selectedItems,
onChangeItems }: Props) => {
- const [selectedIds, setSelectedIds] = useState<McsID[]>([]);
- const [disabledIds, setDisabledIds] = useState<McsID[]>([]);
-
- const { items, getHasMore, onExpand, onScroll } = useMillerColumns({
- connectionId,
- });
-
- useEffect(() => {
- setSelectedIds(selectedItems.map((it) => it.githubId));
- }, [selectedItems]);
-
- useEffect(() => {
- setDisabledIds((disabledItems ?? []).map((it) => it.githubId));
- }, [disabledItems]);
-
- const handleChangeItems = (selectedIds: McsID[]) => {
- const result = selectedIds.map((id) => {
- const selectedItem = selectedItems.find((it) => it.githubId === id);
- if (selectedItem) {
- return selectedItem;
- }
-
- const item = items.find((it) => it.id === id) as McsItem<ExtraType>;
- return {
- connectionId,
- githubId: item.githubId,
- name: item.name,
- ownerId: item.ownerId,
- language: item.language,
- description: item.description,
- cloneUrl: item.cloneUrl,
- HTMLUrl: item.HTMLUrl,
- };
- });
-
- onChangeItems(result);
- };
-
- const renderTitle = (column: McsColumn) => {
- return !column.parentId &&
<S.ColumnTitle>Organizations/Owners</S.ColumnTitle>;
- };
-
- const renderLoading = () => {
- return <Loading size={20} style={{ padding: '4px 12px' }} />;
- };
-
- return (
- <MillerColumnsSelect
- items={items}
- getCanExpand={(it) => it.type === 'org'}
- getHasMore={getHasMore}
- onExpand={onExpand}
- onScroll={onScroll}
- columnCount={2}
- columnHeight={300}
- renderTitle={renderTitle}
- renderLoading={renderLoading}
- disabledIds={disabledIds}
- selectedIds={selectedIds}
- onSelectItemIds={handleChangeItems}
- />
- );
-};
diff --git
a/config-ui/src/plugins/register/github/components/miller-columns/styled.ts
b/config-ui/src/plugins/register/github/components/miller-columns/styled.ts
deleted file mode 100644
index 6730edaff..000000000
--- a/config-ui/src/plugins/register/github/components/miller-columns/styled.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-import styled from 'styled-components';
-
-export const ColumnTitle = styled.div`
- padding: 6px 12px;
- font-weight: 600;
-`;
diff --git
a/config-ui/src/plugins/register/github/components/miller-columns/use-miller-columns.ts
b/config-ui/src/plugins/register/github/components/miller-columns/use-miller-columns.ts
deleted file mode 100644
index 6625e63c2..000000000
---
a/config-ui/src/plugins/register/github/components/miller-columns/use-miller-columns.ts
+++ /dev/null
@@ -1,216 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-import { useState, useEffect, useMemo, useCallback } from 'react';
-import { McsID, McsItem } from 'miller-columns-select';
-
-import { useProxyPrefix } from '@/hooks';
-
-import type { ScopeItemType } from '../../types';
-import * as API from '../../api';
-import { getConnection } from '@/pages/blueprint/connection-detail/api';
-
-const DEFAULT_PAGE_SIZE = 30;
-
-export type ExtraType = {
- type: 'org' | 'repo';
-} & ScopeItemType;
-
-type MapPageType = Record<McsID | 'root', number>;
-
-export interface UseMillerColumnsProps {
- connectionId: string | number;
-}
-
-export const useMillerColumns = ({ connectionId }: UseMillerColumnsProps) => {
- const [user, setUser] = useState<any>({});
- const [items, setItems] = useState<McsItem<ExtraType>[]>([]);
- const [loadedIds, setLoadedIds] = useState<McsID[]>([]);
- const [mapPage, setMapPage] = useState<MapPageType>({});
-
- const prefix = useProxyPrefix({
- plugin: 'github',
- connectionId,
- });
-
- const formatOrgs = (orgs: any, parentId: McsID | null = null) =>
- orgs.map((it: any) => ({
- parentId,
- id: it.id,
- title: it.login,
- type: 'org',
- }));
-
- const formatRepos = (repos: any, parentId: McsID | null = null) =>
- repos.map((it: any) => ({
- parentId,
- id: it.id,
- title: it.name,
- type: 'repo',
- githubId: it.id,
- name: `${it.owner.login}/${it.name}`,
- ownerId: it.owner.id,
- language: it.language,
- description: it.description,
- cloneUrl: it.clone_url,
- HTMLUrl: it.html_url,
- }));
-
- const setLoaded = useCallback(
- (loaded: boolean, id: McsID, nextPage: number) => {
- if (loaded) {
- setLoadedIds([...loadedIds, id]);
- } else {
- setMapPage({ ...mapPage, [`${id}`]: nextPage });
- }
- },
- [loadedIds, mapPage],
- );
-
- useEffect(() => {
- (async () => {
- const connection = await getConnection('github', connectionId);
-
- if (connection.authMethod === 'AppKey') {
- const appInstallationRepos = await API.getInstallationRepos(prefix, {
- page: 1,
- per_page: 1,
- });
-
- setUser(null);
- setLoaded(true, 'root', 2);
-
- if (appInstallationRepos.total_count === 0) {
- setItems([]);
- } else {
- setItems([
- {
- parentId: null,
- id: appInstallationRepos.repositories[0].owner.login,
- title: appInstallationRepos.repositories[0].owner.login,
- type: 'org',
- } as any,
- ]);
- }
- } else {
- const user = await API.getUser(prefix);
- const orgs = await API.getUserOrgs(prefix, {
- page: 1,
- per_page: DEFAULT_PAGE_SIZE,
- });
-
- const loaded = !orgs.length || orgs.length < DEFAULT_PAGE_SIZE;
-
- setUser(user);
- setLoaded(loaded, 'root', 2);
- setItems([
- {
- parentId: null,
- id: user.login,
- title: user.login,
- type: 'org',
- },
- ...formatOrgs(orgs),
- ]);
- }
- })();
- }, [prefix]);
-
- const onExpand = useCallback(
- async (id: McsID) => {
- const item = items.find((it) => it.id === id) as McsItem<ExtraType>;
- let repos = [];
-
- if (user && id === user.login) {
- repos = await API.getUserRepos(prefix, {
- page: 1,
- per_page: DEFAULT_PAGE_SIZE,
- });
- } else if (user) {
- repos = await API.getOrgRepos(prefix, item.title, {
- page: 1,
- per_page: DEFAULT_PAGE_SIZE,
- });
- } else {
- const response = await API.getInstallationRepos(prefix, {
- page: 1,
- per_page: DEFAULT_PAGE_SIZE,
- });
- repos = response.repositories;
- }
-
- const loaded = !repos.length || repos.length < DEFAULT_PAGE_SIZE;
- setLoaded(loaded, id, 2);
- setItems([...items, ...formatRepos(repos, id)]);
- },
- [items, prefix],
- );
-
- const onScroll = async (id: McsID | null) => {
- const page = mapPage[id ?? 'root'];
- let orgs = [];
- let repos = [];
- let loaded = false;
-
- if (id) {
- const item = items.find((it) => it.id === id) as McsItem<ExtraType>;
-
- if (user && id === user.login) {
- repos = await API.getUserRepos(prefix, {
- page: 1,
- per_page: DEFAULT_PAGE_SIZE,
- });
- } else if (user) {
- repos = await API.getOrgRepos(prefix, item.title, {
- page: 1,
- per_page: DEFAULT_PAGE_SIZE,
- });
- } else {
- const response = await API.getInstallationRepos(prefix, {
- page: 1,
- per_page: DEFAULT_PAGE_SIZE,
- });
- repos = response.repositories;
- }
-
- loaded = !repos.length || repos.length < DEFAULT_PAGE_SIZE;
- } else {
- orgs = await API.getUserOrgs(prefix, {
- page,
- per_page: DEFAULT_PAGE_SIZE,
- });
-
- loaded = !orgs.length || orgs.length < DEFAULT_PAGE_SIZE;
- }
-
- setLoaded(loaded, id ?? 'root', page + 1);
- setItems([...items, ...formatOrgs(orgs), ...formatRepos(repos, id)]);
- };
-
- return useMemo(
- () => ({
- items,
- getHasMore(id: McsID | null) {
- return !loadedIds.includes(id ?? 'root');
- },
- onExpand,
- onScroll,
- }),
- [items, loadedIds],
- );
-};
diff --git
a/config-ui/src/plugins/register/github/components/repo-selector/index.tsx
b/config-ui/src/plugins/register/github/components/repo-selector/index.tsx
deleted file mode 100644
index f4da815f4..000000000
--- a/config-ui/src/plugins/register/github/components/repo-selector/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-import { MultiSelector } from '@/components';
-
-import { ScopeItemType } from '../../types';
-
-import { useRepoSelector, UseRepoSelectorProps } from './use-repo-selector';
-
-interface Props extends UseRepoSelectorProps {
- disabledItems?: ScopeItemType[];
- selectedItems: ScopeItemType[];
- onChangeItems: (selectedItems: ScopeItemType[]) => void;
-}
-
-export const RepoSelector = ({ disabledItems, selectedItems, onChangeItems,
...props }: Props) => {
- const { loading, items, onSearch } = useRepoSelector(props);
-
- return (
- <MultiSelector
- placeholder="Search Repositories..."
- items={items}
- getKey={(it) => it.githubId}
- getName={(it) => it.name}
- disabledItems={disabledItems}
- selectedItems={selectedItems}
- onChangeItems={onChangeItems}
- loading={loading}
- noResult="No Repositories Available."
- onQueryChange={onSearch}
- />
- );
-};
diff --git
a/config-ui/src/plugins/register/github/components/repo-selector/use-repo-selector.ts
b/config-ui/src/plugins/register/github/components/repo-selector/use-repo-selector.ts
deleted file mode 100644
index bfd09acc1..000000000
---
a/config-ui/src/plugins/register/github/components/repo-selector/use-repo-selector.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-import { useState, useEffect, useMemo } from 'react';
-
-import { useProxyPrefix } from '@/hooks';
-
-import type { ScopeItemType } from '../../types';
-import * as API from '../../api';
-
-export interface UseRepoSelectorProps {
- connectionId: ID;
-}
-
-export const useRepoSelector = ({ connectionId }: UseRepoSelectorProps) => {
- const [loading, setLoading] = useState(false);
- const [items, setItems] = useState<ScopeItemType[]>([]);
- const [search, setSearch] = useState('');
-
- const prefix = useProxyPrefix({
- plugin: 'github',
- connectionId,
- });
-
- useEffect(() => {
- if (!search) return;
- setItems([]);
- setLoading(true);
-
- const timer = setTimeout(async () => {
- try {
- const res = await API.searchRepo(prefix, { q: `${search} fork:true` });
- setItems(
- res.items.map((it: any) => ({
- connectionId,
- githubId: it.id,
- name: `${it.owner.login}/${it.name}`,
- ownerId: it.owner.id,
- language: it.language,
- description: it.description,
- cloneUrl: it.clone_url,
- HTMLUrl: it.html_url,
- })),
- );
- } finally {
- setLoading(false);
- }
- }, 1000);
-
- return () => clearTimeout(timer);
- }, [prefix, search]);
-
- return useMemo(
- () => ({
- loading,
- items,
- onSearch(s: string) {
- setSearch(s);
- },
- }),
- [loading, items],
- );
-};
diff --git a/config-ui/src/plugins/register/github/data-scope.tsx
b/config-ui/src/plugins/register/github/data-scope.tsx
index 7604c3cea..1d5f3b85c 100644
--- a/config-ui/src/plugins/register/github/data-scope.tsx
+++ b/config-ui/src/plugins/register/github/data-scope.tsx
@@ -16,8 +16,11 @@
*
*/
+import { useMemo } from 'react';
+
+import { DataScopeMillerColumns, DataScopeSearch } from '@/plugins';
+
import type { ScopeItemType } from './types';
-import { MillerColumns, RepoSelector } from './components';
import * as S from './styled';
interface Props {
@@ -27,12 +30,24 @@ interface Props {
onChangeItems: (selectedItems: ScopeItemType[]) => void;
}
-export const GitHubDataScope = ({ connectionId, disabledItems, selectedItems,
onChangeItems }: Props) => {
+export const GitHubDataScope = ({ connectionId, onChangeItems, ...props }:
Props) => {
+ const selectedItems = useMemo(
+ () => props.selectedItems.map((it) => ({ id: `${it.githubId}`, name:
it.name, data: it })),
+ [props.selectedItems],
+ );
+
+ const disabledItems = useMemo(
+ () => (props.disabledItems ?? []).map((it) => ({ id: `${it.githubId}`,
name: it.name, data: it })),
+ [props.disabledItems],
+ );
+
return (
<S.DataScope>
<h3>Repositories *</h3>
<p>Select the repositories you would like to sync.</p>
- <MillerColumns
+ <DataScopeMillerColumns
+ title="Organizations/Owners"
+ plugin="github"
connectionId={connectionId}
disabledItems={disabledItems}
selectedItems={selectedItems}
@@ -40,9 +55,10 @@ export const GitHubDataScope = ({ connectionId,
disabledItems, selectedItems, on
/>
<h4>Add repositories outside of your organizations</h4>
<p>Search for repositories and add to them</p>
- <RepoSelector
- disabledItems={disabledItems}
+ <DataScopeSearch
+ plugin="github"
connectionId={connectionId}
+ disabledItems={disabledItems}
selectedItems={selectedItems}
onChangeItems={onChangeItems}
/>
