feat: add onboard process (apache#7199)

config-ui/package.json

@@ -34,15 +34,17 @@
     "dayjs": "^1.11.10",
     "file-saver": "^2.0.5",
     "lodash": "^4.17.21",
-    "miller-columns-select": "1.3.2",
+    "miller-columns-select": "1.4.0",
     "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
+    "react-markdown": "^9.0.1",
     "react-redux": "^9.1.0",
     "react-router-dom": "^6.22.2",
     "react-transition-group": "^4.4.5",
     "redux": "^5.0.1",
+    "rehype-raw": "^7.0.0",
     "styled-components": "^6.1.8"
   },
   "devDependencies": {

config-ui/public/onboard/step-1/azuredevops.md

@@ -0,0 +1,25 @@
+<!--
+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.
+-->
+
+##### Azure DevOps tells you:
+
+1. How much code have you submitted?
+   ![1](/onboard/assets/gitlab/1.png)
+2. How are your Pull Requests handled?
+   ![2](/onboard/assets/gitlab/2.png)
+3. How fast is your Code Review process?
+   ![3](/onboard/assets/gitlab/3.png)

config-ui/public/onboard/step-1/bitbucket.md

@@ -0,0 +1,25 @@
+<!--
+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.
+-->
+
+##### Bitbucket tells you:
+
+1. How much code have you submitted?
+   ![1](/onboard/assets/gitlab/1.png)
+2. How are your Pull Requests handled?
+   ![2](/onboard/assets/gitlab/2.png)
+3. How fast is your Code Review process?
+   ![3](/onboard/assets/gitlab/3.png)

config-ui/public/onboard/step-1/default.md

@@ -0,0 +1,21 @@
+<!--
+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.
+-->
+
+##### What is a data connection?
+
+- On a high level, a project can be viewed as a real-world project or product line. It represents a specific initiative or endeavor within the software development domain.
+- On a lower level, a project is a way of organizing and grouping data from different domains.

config-ui/public/onboard/step-1/github.md

@@ -0,0 +1,25 @@
+<!--
+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.
+-->
+
+##### GitHub tells you:
+
+1. What is your issue lead time?
+   ![1](/onboard/assets/github/1.png)
+2. How fast is your Code Review process?
+   ![2](/onboard/assets/github/2.png)
+3. How is your CI/CD process?
+   ![3](/onboard/assets/github/3.png)

config-ui/public/onboard/step-1/gitlab.md

@@ -0,0 +1,25 @@
+<!--
+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.
+-->
+
+##### GitLab tells you:
+
+1. How much code have you submitted?
+   ![1](/onboard/assets/gitlab/1.png)
+2. How are your Merge Requests handled?
+   ![2](/onboard/assets/gitlab/2.png)
+3. How fast is your Code Review process?
+   ![3](/onboard/assets/gitlab/3.png)

config-ui/public/onboard/step-2/azuredevops.md

@@ -0,0 +1,16 @@
+<!--
+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.
+-->

config-ui/public/onboard/step-2/bitbucket.md

@@ -0,0 +1,16 @@
+<!--
+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.
+-->

config-ui/public/onboard/step-2/github.md

@@ -0,0 +1,44 @@
+<!--
+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.
+-->
+
+##### Q1. How to create a classic GitHub personal access token?
+
+1. Log in to [github.com](https://github.com).
+2. In the upper-right corner of any page, click your profile photo, then click Settings.
+3. In the left sidebar, click <> Developer settings.
+4. In the left sidebar, under 'Personal access tokens', click Tokens (classic).
+5. Choose the following scopes: repo:status, repo:deployment, read:user and read:org.
+
+Check [this doc](https://devlake.apache.org/docs/Configuration/GitHub/#personal-access-tokens) for more details.
+
+##### Q2. What token scopes should I choose?
+
+Normally, only the following scopes are required:
+`repo:status` `repo:deployment` `read:user` `read:org`
+
+However, if you want to collect data from private repositories, you need to give full permission to repo:
+`repo` `read:user` `read:org`
+
+##### Q3. Can I connect to the GitHub server?
+
+Sure, you could
+
+1. Go to the Connections page.
+2. Click Create a New Connection.
+3. Choose 'GitHub server' and finish the connection.
+
+GitHub server is not supported to simplify this onboard process.

config-ui/public/onboard/step-2/gitlab.md

@@ -0,0 +1,16 @@
+<!--
+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.
+-->

config-ui/public/onboard/step-3/azuredevops.md

@@ -0,0 +1,16 @@
+<!--
+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.
+-->

config-ui/public/onboard/step-3/bitbucket.md

@@ -0,0 +1,16 @@
+<!--
+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.
+-->

config-ui/public/onboard/step-3/github.md

@@ -0,0 +1,34 @@
+<!--
+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.
+-->
+
+##### Q1. What GitHub data will be collected?
+
+`issues` `repos` `commits` `branches` `pull requests` `pr comments` `workflow runs` `job runs` `deployments` `users`
+
+Check [this doc](https://devlake.apache.org/docs/Overview/SupportedDataSources/#data-collection-scope-by-each-plugin) for more details.
+
+##### Q2. The data from which time range will be collected?
+
+Only the data from last 14 days will be collected to speed up the sync up time. You can always change the time range in the project details page later.
+
+##### Q3. Can I do transformations on the collected data?
+
+Yes. You can do transformations by adding a Scope Config to the repositories you choose later.
+
+##### Q4. What is the frequency to sync up data?
+
+The data will be synced daily, you can change it in the project details page later.

config-ui/public/onboard/step-3/gitlab.md

@@ -0,0 +1,16 @@
+<!--
+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.
+-->

config-ui/src/api/index.ts

@@ -26,6 +26,7 @@ import plugin from './plugin';
 import * as project from './project';
 import * as scope from './scope';
 import * as scopeConfig from './scope-config';
+import * as store from './store';
 import * as task from './task';
 
 const migrate = () => request('/proceed-db-migration');
@@ -39,8 +40,9 @@ export const API = {
   pipeline,
   plugin,
   project,
-  scopeConfig,
   scope,
+  scopeConfig,
+  store,
   task,
   migrate,
   ping,

config-ui/src/routes/project/home/styled.ts → config-ui/src/api/store/index.ts

@@ -16,19 +16,8 @@
  *
  */
 
-import styled from 'styled-components';
+import { request } from '@/utils';
 
-export const DialogWrapper = styled.div``;
+export const get = (key: string) => request(`/store/${key}`);
 
-export const Label = styled.label`
-  font-size: 16px;
-  font-weight: 600;
-`;
-
-export const LabelInfo = styled.i`
-  color: #ff8b8b;
-`;
-
-export const LabelDescription = styled.p`
-  margin: 0;
-`;
+export const set = (key: string, value: any) => request(`/store/${key}`, { method: 'PUT', data: value });