feat: add onboard process

config-ui/package.json

@@ -34,11 +34,12 @@
     "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",

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

@@ -0,0 +1,8 @@
+#### 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,8 @@
+#### 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,4 @@
+#### 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,8 @@
+#### 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,8 @@
+#### 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/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/api/store/index.ts

@@ -0,0 +1,23 @@
+/*
+ * 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 { request } from '@/utils';
+
+export const get = (key: string) => request(`/store/${key}`);
+
+export const set = (key: string, value: any) => request(`/store/${key}`, { method: 'PUT', data: value });

config-ui/src/app/routrer.tsx

@@ -20,6 +20,7 @@ import { createBrowserRouter, Navigate } from 'react-router-dom';
 
 import {
   DBMigrate,
+  Onboard,
   Error,
   Layout,
   layoutLoader,
@@ -47,6 +48,10 @@ export const router = createBrowserRouter([
     path: `${PATH_PREFIX}/db-migrate`,
     element: <DBMigrate />,
   },
+  {
+    path: `${PATH_PREFIX}/onboard`,
+    element: <Onboard />,
+  },
   {
     path: `${PATH_PREFIX}`,
     element: <Layout />,
@@ -55,15 +60,7 @@ export const router = createBrowserRouter([
     children: [
       {
         index: true,
-        element: <Navigate to="connections" />,
-      },
-      {
-        path: 'connections',
-        element: <Connections />,
-      },
-      {
-        path: 'connections/:plugin/:id',
-        element: <Connection />,
+        element: <Navigate to="projects" />,
       },
       {
         path: 'projects',
@@ -77,6 +74,14 @@ export const router = createBrowserRouter([
         path: 'projects/:pname/:unique',
         element: <BlueprintConnectionDetailPage />,
       },
+      {
+        path: 'connections',
+        element: <Connections />,
+      },
+      {
+        path: 'connections/:plugin/:id',
+        element: <Connection />,
+      },
       {
         path: 'advanced',
         children: [

config-ui/src/plugins/components/connection-form/fields/password.tsx

@@ -26,7 +26,6 @@ interface Props {
   label?: string;
   subLabel?: string;
   placeholder?: string;
-  name: string;
   initialValue: string;
   value: string;
   error: string;

config-ui/src/plugins/components/connection-form/fields/token.tsx

@@ -42,7 +42,6 @@ interface Props {
   type: 'create' | 'update';
   label?: string;
   subLabel?: string;
-  name: string;
   initialValue: string;
   value: string;
   error: string;

config-ui/src/plugins/components/connection-form/fields/username.tsx

@@ -15,23 +15,6 @@
  * limitations under the License.
  *
  */
-/*
- * 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 { useEffect } from 'react';
 import { Input } from 'antd';
@@ -42,7 +25,6 @@ interface Props {
   label?: string;
   subLabel?: string;
   placeholder?: string;
-  name: string;
   initialValue: string;
   value: string;
   error: string;

config-ui/src/plugins/components/connection-select/index.tsx

@@ -0,0 +1,71 @@
+/*
+ * 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 { theme, Select, SelectProps } from 'antd';
+import styled from 'styled-components';
+
+import { getPluginConfig } from '@/plugins';
+
+const Option = styled.div`
+  display: flex;
+  align-items: center;
+
+  .icon {
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+
+    & > svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .name {
+    margin-left: 8px;
+    max-width: 90%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+`;
+
+interface Props extends Omit<SelectProps, 'optionRender'> {}
+
+export const ConnectionSelect = ({ ...props }: Props) => {
+  const {
+    token: { colorPrimary },
+  } = theme.useToken();
+
+  return (
+    <Select
+      style={{ width: 384 }}
+      placeholder="Select..."
+      optionRender={(option) => {
+        const plugin = getPluginConfig(option.data.plugin);
+        return (
+          <Option>
+            <span className="icon">{plugin.icon({ color: colorPrimary })}</span>
+            <span className="name">{option.label}</span>
+          </Option>
+        );
+      }}
+      {...props}
+    />
+  );
+};

config-ui/src/plugins/components/data-scope-remote/data-scope-remote.tsx

@@ -16,7 +16,7 @@
  *
  */
 
-import { useState, useMemo } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { Flex, Button } from 'antd';
 
 import API from '@/api';
@@ -27,17 +27,35 @@ import { SearchLocal } from './search-local';
 import { SearchRemote } from './search-remote';
 
 interface Props {
+  mode?: 'single' | 'multiple';
   plugin: string;
   connectionId: ID;
+  selectedScope?: any[];
   disabledScope?: any[];
-  onCancel: () => void;
-  onSubmit: (origin: any) => void;
+  onChangeSelectedScope?: (scope: any[]) => void;
+  footer?: React.ReactNode;
+  onCancel?: () => void;
+  onSubmit?: (origin: any) => void;
 }
 
-export const DataScopeRemote = ({ plugin, connectionId, disabledScope, onCancel, onSubmit }: Props) => {
+export const DataScopeRemote = ({
+  mode = 'multiple',
+  plugin,
+  connectionId,
+  disabledScope,
+  onChangeSelectedScope,
+  footer,
+  onCancel,
+  onSubmit,
+  ...props
+}: Props) => {
   const [selectedScope, setSelectedScope] = useState<any[]>([]);
   const [operating, setOperating] = useState(false);
 
+  useEffect(() => {
+    setSelectedScope(props.selectedScope ?? []);
+  }, [props.selectedScope]);
+
   const config = useMemo(() => getPluginConfig(plugin).dataScope, [plugin]);
 
   const handleSubmit = async () => {
@@ -50,7 +68,7 @@ export const DataScopeRemote = ({ plugin, connectionId, disabledScope, onCancel,
     );
 
     if (success) {
-      onSubmit(res);
+      onSubmit?.(res);
     }
   };
 
@@ -61,35 +79,41 @@ export const DataScopeRemote = ({ plugin, connectionId, disabledScope, onCancel,
           connectionId,
           disabledItems: disabledScope?.map((it) => ({ id: it.id })),
           selectedItems: selectedScope,
-          onChangeSelectedItems: setSelectedScope,
+          onChangeSelectedItems: onChangeSelectedScope ?? setSelectedScope,
         })
       ) : config.localSearch ? (
         <SearchLocal
+          mode={mode}
           plugin={plugin}
           connectionId={connectionId}
           config={config}
           disabledScope={disabledScope ?? []}
           selectedScope={selectedScope}
-          onChange={setSelectedScope}
+          onChange={onChangeSelectedScope ?? setSelectedScope}
         />
       ) : (
         <SearchRemote
+          mode={mode}
           plugin={plugin}
           connectionId={connectionId}
           config={config}
           disabledScope={disabledScope ?? []}
           selectedScope={selectedScope}
-          onChange={setSelectedScope}
+          onChange={onChangeSelectedScope ?? setSelectedScope}
         />
       )}
-      <Flex style={{ marginTop: 16 }} justify="flex-end" gap="small">
-        <Button disabled={operating} onClick={onCancel}>
-          Cancel
-        </Button>
-        <Button type="primary" loading={operating} disabled={!selectedScope.length} onClick={handleSubmit}>
-          Save
-        </Button>
-      </Flex>
+      {footer !== undefined ? (
+        footer
+      ) : (
+        <Flex style={{ marginTop: 16 }} justify="flex-end" gap="small">
+          <Button disabled={operating} onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button type="primary" loading={operating} disabled={!selectedScope.length} onClick={handleSubmit}>
+            Save
+          </Button>
+        </Flex>
+      )}
     </Flex>
   );
 };