This is an automated email from the ASF dual-hosted git repository.
klesh 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 115828359 feat: add tour guild for onboard (#7276)
115828359 is described below
commit 115828359fa85037e30c6467906586ae961df0c7
Author: 青湛 <[email protected]>
AuthorDate: Mon Apr 8 13:08:23 2024 +0800
feat: add tour guild for onboard (#7276)
---
config-ui/src/routes/onboard/components/index.ts | 1 +
config-ui/src/routes/onboard/components/tour.tsx | 57 ++++++++++++++++++++++++
config-ui/src/routes/project/home/index.tsx | 15 +++++--
3 files changed, 70 insertions(+), 3 deletions(-)
diff --git a/config-ui/src/routes/onboard/components/index.ts
b/config-ui/src/routes/onboard/components/index.ts
index 5cebf15cd..3613868a0 100644
--- a/config-ui/src/routes/onboard/components/index.ts
+++ b/config-ui/src/routes/onboard/components/index.ts
@@ -18,3 +18,4 @@
export * from './card';
export * from './logs';
+export * from './tour';
diff --git a/config-ui/src/routes/onboard/components/tour.tsx
b/config-ui/src/routes/onboard/components/tour.tsx
new file mode 100644
index 000000000..875ce2e18
--- /dev/null
+++ b/config-ui/src/routes/onboard/components/tour.tsx
@@ -0,0 +1,57 @@
+/*
+ * 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 { Tour } from 'antd';
+
+import API from '@/api';
+import { useRefreshData } from '@/hooks';
+
+interface Props {
+ nameRef: React.RefObject<HTMLInputElement>;
+ connectionRef: React.RefObject<HTMLInputElement>;
+ configRef: React.RefObject<HTMLInputElement>;
+}
+
+export const OnboardTour = ({ nameRef, connectionRef, configRef }: Props) => {
+ const { ready, data } = useRefreshData(() => API.store.get('onboard'), []);
+
+ const steps = [
+ {
+ title: 'This is the project you just created.',
+ description: 'Project is the basic management unit',
+ target: nameRef.current,
+ },
+ {
+ title: 'A connection is automatically created and associated with the
project.',
+ description: 'The full connection list can be found at the Connections
menu.',
+ target: connectionRef.current,
+ },
+ {
+ title: 'Click here to configure project',
+ description:
+ 'You can adjust the data scope, time range and sync frequency of the
project. You can also add scope config to transform the raw data before writing
to the database.',
+ target: configRef.current,
+ },
+ ];
+
+ if (!ready || !data || data.step !== 4 || data.done) {
+ return null;
+ }
+
+ return <Tour steps={steps} />;
+};
diff --git a/config-ui/src/routes/project/home/index.tsx
b/config-ui/src/routes/project/home/index.tsx
index 50acf8552..55ab995c2 100644
--- a/config-ui/src/routes/project/home/index.tsx
+++ b/config-ui/src/routes/project/home/index.tsx
@@ -16,7 +16,7 @@
*
*/
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useRef } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { PlusOutlined, SettingOutlined } from '@ant-design/icons';
import { Flex, Table, Button, Modal, Input, Checkbox, message } from 'antd';
@@ -27,6 +27,7 @@ import { PageHeader, Block, ExternalLink } from
'@/components';
import { getCron, cronPresets, PATHS } from '@/config';
import { ConnectionName } from '@/features';
import { useRefreshData } from '@/hooks';
+import { OnboardTour } from '@/routes/onboard/components';
import { DOC_URL } from '@/release';
import { formatTime, operator } from '@/utils';
import { PipelineStatus } from '@/routes/pipeline';
@@ -43,6 +44,10 @@ export const ProjectHomePage = () => {
const [enableDora, setEnableDora] = useState(true);
const [saving, setSaving] = useState(false);
+ const nameRef = useRef(null);
+ const connectionRef = useRef(null);
+ const configRef = useRef(null);
+
const { ready, data } = useRefreshData(() => API.project.list({ page,
pageSize }), [version, page, pageSize]);
const navigate = useNavigate();
@@ -132,7 +137,7 @@ export const ProjectHomePage = () => {
dataIndex: 'name',
key: 'name',
render: (name: string) => (
- <Link to={PATHS.PROJECT(name, { tab: 'configuration' })}
style={{ color: '#292b3f' }}>
+ <Link to={PATHS.PROJECT(name, { tab: 'configuration' })}
style={{ color: '#292b3f' }} ref={nameRef}>
{name}
</Link>
),
@@ -145,7 +150,7 @@ export const ProjectHomePage = () => {
!val || !val.length ? (
'N/A'
) : (
- <ul>
+ <ul ref={connectionRef}>
{val.map((it) => (
<li key={`${it.pluginName}-${it.connectionId}`}>
<ConnectionName plugin={it.pluginName}
connectionId={it.connectionId} />
@@ -188,6 +193,7 @@ export const ProjectHomePage = () => {
align: 'center',
render: (name: any) => (
<Button
+ ref={configRef}
type="primary"
icon={<SettingOutlined />}
onClick={() => navigate(PATHS.PROJECT(name, { tab:
'configuration' }))}
@@ -244,6 +250,9 @@ export const ProjectHomePage = () => {
</Checkbox>
</Block>
</Modal>
+ {ready && dataSource.length === 1 && (
+ <OnboardTour nameRef={nameRef} connectionRef={connectionRef}
configRef={configRef} />
+ )}
</PageHeader>
);
};
