feat: add tour for list pages (#2243)

web/src/SystemInfo.js

@@ -12,10 +12,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {Card, Col, Divider, Progress, Row, Spin} from "antd";
+import {Card, Col, Divider, Progress, Row, Spin, Tour} from "antd";
 import * as SystemBackend from "./backend/SystemInfo";
 import React from "react";
 import * as Setting from "./Setting";
+import * as TourConfig from "./TourConfig";
 import i18next from "i18next";
 import PrometheusInfoTable from "./table/PrometheusInfoTable";
 
@@ -29,6 +30,7 @@ class SystemInfo extends React.Component {
       prometheusInfo: {apiThroughput: [], apiLatency: [], totalThroughput: 0},
       intervalId: null,
       loading: true,
+      isTourVisible: TourConfig.getTourVisible(),
     };
   }
 
@@ -67,12 +69,48 @@ class SystemInfo extends React.Component {
     });
   }
 
+  componentDidMount() {
+    window.addEventListener("storageTourChanged", this.handleTourChange);
+  }
+
+  handleTourChange = () => {
+    this.setState({isTourVisible: TourConfig.getTourVisible()});
+  };
+
   componentWillUnmount() {
     if (this.state.intervalId !== null) {
       clearInterval(this.state.intervalId);
     }
+    window.removeEventListener("storageTourChanged", this.handleTourChange);
   }
 
+  setIsTourVisible = () => {
+    TourConfig.setIsTourVisible(false);
+    this.setState({isTourVisible: false});
+  };
+
+  handleTourComplete = () => {
+    const nextPathName = TourConfig.getNextUrl();
+    if (nextPathName !== "") {
+      this.props.history.push("/" + nextPathName);
+      TourConfig.setIsTourVisible(true);
+    }
+  };
+
+  getSteps = () => {
+    const nextPathName = TourConfig.getNextUrl();
+    const steps = TourConfig.getSteps();
+    steps.map((item, index) => {
+      item.target = () => document.getElementById(item.id) || null;
+      if (index === steps.length - 1) {
+        item.nextButtonProps = {
+          children: TourConfig.getNextButtonChild(nextPathName),
+        };
+      }
+    });
+    return steps;
+  };
+
   render() {
     const cpuUi = this.state.systemInfo.cpuUsage?.length <= 0 ? i18next.t("system:Failed to get CPU usage") :
       this.state.systemInfo.cpuUsage.map((usage, i) => {
@@ -99,45 +137,58 @@ class SystemInfo extends React.Component {
 
     if (!Setting.isMobile()) {
       return (
-        <Row>
-          <Col span={6}></Col>
-          <Col span={12}>
-            <Row gutter={[10, 10]}>
-              <Col span={12}>
-                <Card title={i18next.t("system:CPU Usage")} bordered={true} style={{textAlign: "center", height: "100%"}}>
-                  {this.state.loading ? <Spin size="large" /> : cpuUi}
-                </Card>
-              </Col>
-              <Col span={12}>
-                <Card title={i18next.t("system:Memory Usage")} bordered={true} style={{textAlign: "center", height: "100%"}}>
-                  {this.state.loading ? <Spin size="large" /> : memUi}
-                </Card>
-              </Col>
-              <Col span={24}>
-                <Card title={i18next.t("system:API Latency")} bordered={true} style={{textAlign: "center", height: "100%"}}>
-                  {this.state.loading ? <Spin size="large" /> : latencyUi}
-                </Card>
-              </Col>
-              <Col span={24}>
-                <Card title={i18next.t("system:API Throughput")} bordered={true} style={{textAlign: "center", height: "100%"}}>
-                  {this.state.loading ? <Spin size="large" /> : throughputUi}
-                </Card>
-              </Col>
-            </Row>
-            <Divider />
-            <Card title={i18next.t("system:About Casdoor")} bordered={true} style={{textAlign: "center"}}>
-              <div>{i18next.t("system:An Identity and Access Management (IAM) / Single-Sign-On (SSO) platform with web UI supporting OAuth 2.0, OIDC, SAML and CAS")}</div>
-              GitHub: <a target="_blank" rel="noreferrer" href="https://github.com/casdoor/casdoor">Casdoor</a>
-              <br />
-              {i18next.t("system:Version")}: <a target="_blank" rel="noreferrer" href={link}>{versionText}</a>
-              <br />
-              {i18next.t("system:Official website")}: <a target="_blank" rel="noreferrer" href="https://casdoor.org">https://casdoor.org</a>
-              <br />
-              {i18next.t("system:Community")}: <a target="_blank" rel="noreferrer" href="https://casdoor.org/#:~:text=Casdoor%20API-,Community,-GitHub">Get in Touch!</a>
-            </Card>
-          </Col>
-          <Col span={6}></Col>
-        </Row>
+        <>
+          <Row>
+            <Col span={6}></Col>
+            <Col span={12}>
+              <Row gutter={[10, 10]}>
+                <Col span={12}>
+                  <Card id="cpu-card" title={i18next.t("system:CPU Usage")} bordered={true} style={{textAlign: "center", height: "100%"}}>
+                    {this.state.loading ? <Spin size="large" /> : cpuUi}
+                  </Card>
+                </Col>
+                <Col span={12}>
+                  <Card id="memory-card" title={i18next.t("system:Memory Usage")} bordered={true} style={{textAlign: "center", height: "100%"}}>
+                    {this.state.loading ? <Spin size="large" /> : memUi}
+                  </Card>
+                </Col>
+                <Col span={24}>
+                  <Card id="latency-card" title={i18next.t("system:API Latency")} bordered={true} style={{textAlign: "center", height: "100%"}}>
+                    {this.state.loading ? <Spin size="large" /> : latencyUi}
+                  </Card>
+                </Col>
+                <Col span={24}>
+                  <Card id="throughput-card" title={i18next.t("system:API Throughput")} bordered={true} style={{textAlign: "center", height: "100%"}}>
+                    {this.state.loading ? <Spin size="large" /> : throughputUi}
+                  </Card>
+                </Col>
+              </Row>
+              <Divider />
+              <Card id="about-card" title={i18next.t("system:About Casdoor")} bordered={true} style={{textAlign: "center"}}>
+                <div>{i18next.t("system:An Identity and Access Management (IAM) / Single-Sign-On (SSO) platform with web UI supporting OAuth 2.0, OIDC, SAML and CAS")}</div>
+                GitHub: <a target="_blank" rel="noreferrer" href="https://github.com/casdoor/casdoor">Casdoor</a>
+                <br />
+                {i18next.t("system:Version")}: <a target="_blank" rel="noreferrer" href={link}>{versionText}</a>
+                <br />
+                {i18next.t("system:Official website")}: <a target="_blank" rel="noreferrer" href="https://casdoor.org">https://casdoor.org</a>
+                <br />
+                {i18next.t("system:Community")}: <a target="_blank" rel="noreferrer" href="https://casdoor.org/#:~:text=Casdoor%20API-,Community,-GitHub">Get in Touch!</a>
+              </Card>
+            </Col>
+            <Col span={6}></Col>
+          </Row>
+          <Tour
+            open={this.state.isTourVisible}
+            onClose={this.setIsTourVisible}
+            steps={this.getSteps()}
+            indicatorsRender={(current, total) => (
+              <span>
+                {current + 1} / {total}
+              </span>
+            )}
+            onFinish={this.handleTourComplete}
+          />
+        </>
       );
     } else {
       return (