@devops-flow/devops-flow-pipeline-detail 0.0.37

package/es/pages/tools/jenkins/import/cp2flow/index.js

@@ -0,0 +1,461 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useState, useEffect } from 'react';
+import { Form, Button, Pagination, Message, Loading, Dialog } from '@teamix/ui';
+import { YunxiaoIcon, YunxiaoTable as Table } from '@alife/devops-ui';
+import exceed from "../../../../../utils/apimap";
+import { AliyunConnect } from "../../../../../components/common/teambition/service-connection";
+import track from "../../../../../utils/track";
+import { intervalEnterTime } from "../../../../../utils";
+import intl from "../../../../../locale";
+var prefix = 'flow-tools-jenkins';
+var MAX_BATCH = 10;
+var DEFAULT_PAGE_SIZE = 10;
+var exited = false;
+var CodePipeline2Flow = function CodePipeline2Flow(_ref) {
+  var visible = _ref.visible,
+    field = _ref.field,
+    next = _ref.next,
+    pre = _ref.pre;
+  var _useState = useState(false),
+    requesting = _useState[0],
+    setRequesting = _useState[1];
+  var _useState2 = useState(0),
+    current = _useState2[0],
+    setCurrent = _useState2[1];
+  var _useState3 = useState(DEFAULT_PAGE_SIZE),
+    size = _useState3[0];
+  var _useState4 = useState(0),
+    total = _useState4[0],
+    setTotal = _useState4[1];
+  var _useState5 = useState([]),
+    jobs = _useState5[0],
+    setJobs = _useState5[1];
+  var _useState6 = useState([]),
+    selectedRowKeys = _useState6[0],
+    setSelectedRowKeys = _useState6[1];
+  var _useState7 = useState(true),
+    disabled = _useState7[0],
+    setDisabled = _useState7[1];
+  var _useState8 = useState(false),
+    loadingJobs = _useState8[0],
+    setLoadingJobs = _useState8[1];
+  useEffect(function () {
+    setDisabled(selectedRowKeys.length <= 0);
+  }, [selectedRowKeys]);
+  var fetchJobs = function fetchJobs(pageStart, pageSize) {
+    return new Promise(function (resolve, reject) {
+      var _field$getValues = field.getValues(),
+        ak = _field$getValues.ak,
+        sk = _field$getValues.sk,
+        connectionId = _field$getValues.connectionId;
+      if (!connectionId) {
+        track({
+          action: 'cds account not set',
+          page: 'cds migration page',
+          daysinceenterflow: intervalEnterTime()
+        });
+        Dialog.confirm({
+          messageProps: {
+            type: 'notice'
+          },
+          title: intl.get({
+            id: 'rdc-tb-cd-assets.import.cp2flow.Confirmation',
+            defaultMessage: '确认'
+          }),
+          content: intl.get({
+            id: 'rdc-tb-cd-assets.import.cp2flow.BindAnAlibabaCloudAccount',
+            defaultMessage: '请先绑定阿里云账号'
+          })
+        });
+        return;
+      }
+      setLoadingJobs(true);
+      exceed.fetch({
+        api: 'codepipeline.jobs.list',
+        data: {
+          ak: ak,
+          sk: sk,
+          connectionId: connectionId,
+          start: pageStart,
+          pageSize: pageSize
+        }
+      }).then(function (res) {
+        if (res.successful) {
+          setJobs(res.object.dataList);
+          setTotal(res.object.total);
+          resolve();
+        } else {
+          reject();
+        }
+        setLoadingJobs(false);
+        track({
+          action: 'loaded cds jobs',
+          page: 'cds migration page',
+          daysinceenterflow: intervalEnterTime()
+        });
+      }).fail(function (error) {
+        Message.error({
+          content: error
+        });
+        track({
+          action: 'failed to load cds jobs',
+          page: 'cds migration page',
+          daysinceenterflow: intervalEnterTime()
+        });
+        setLoadingJobs(false);
+      });
+    });
+  };
+  var loadByPage = function loadByPage(page) {
+    fetchJobs((page - 1) * size, size).then(function () {
+      setCurrent(page);
+    });
+  };
+  var onMigrationClick = function onMigrationClick() {
+    return new Promise(function (resolve, reject) {
+      setRequesting(true);
+      var _field$getValues2 = field.getValues(),
+        ak = _field$getValues2.ak,
+        sk = _field$getValues2.sk,
+        connectionId = _field$getValues2.connectionId;
+      exceed.fetch({
+        api: 'jeknins.migration.batch',
+        data: {
+          ak: ak,
+          sk: sk,
+          connectionId: connectionId,
+          uniqueIds: selectedRowKeys.join(',')
+        }
+      }).then(function (res) {
+        setRequesting(false);
+        if (res.successful) {
+          resolve();
+        } else {
+          reject();
+        }
+      });
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: prefix + "__step " + prefix + "__step--" + (visible ? 'visible' : 'hidden')
+  }, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(AliyunConnect, _extends({
+    type: "codepipeline",
+    redirectRam: true,
+    field: field,
+    fieldName: "connectionId",
+    title: intl.get({
+      id: 'rdc-tb-cd-assets.import.cp2flow.InUse',
+      defaultMessage: '正在使用：'
+    })
+  }, field.init('connectionId'), {
+    enable: function enable(data) {
+      console.log(data);
+    },
+    onChangeServiceConnection: function onChangeServiceConnection(id, name) {
+      field.setValue('connectionId', id);
+      console.log(id, name);
+      if (!id) {
+        setJobs([]);
+      }
+    }
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: prefix + "__info"
+  }, /*#__PURE__*/React.createElement("div", null, intl.get({
+    id: 'rdc-tb-cd-assets.import.cp2flow.CodepipelineTaskList',
+    defaultMessage: 'CodePipeline任务列表：'
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      pre();
+    }
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.import.cp2flow.PreviousStep',
+    defaultMessage: '上一步'
+  })), "\xA0", /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      loadByPage(1);
+    }
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.import.cp2flow.LoadTask',
+    defaultMessage: '加载任务'
+  })), "\xA0", /*#__PURE__*/React.createElement(Button, {
+    loading: requesting,
+    disabled: disabled,
+    onClick: function onClick() {
+      track({
+        action: 'click start migration',
+        page: 'cds migration page',
+        daysinceenterflow: intervalEnterTime()
+      });
+      onMigrationClick().then(function () {
+        next({
+          selectedRowKeys: selectedRowKeys
+        });
+      });
+    }
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.import.cp2flow.StartMigration',
+    defaultMessage: '开始迁移'
+  })))), /*#__PURE__*/React.createElement(Table, {
+    hasBorder: true,
+    dataSource: jobs,
+    primaryKey: "uniqueId",
+    loading: loadingJobs,
+    rowSelection: {
+      selectedRowKeys: selectedRowKeys,
+      getProps: function getProps(record) {
+        return {
+          disabled: record.migrationJob && record.migrationJob.status === 'INIT'
+        };
+      },
+      onChange: function onChange(ids) {
+        if (ids.length > MAX_BATCH) {
+          Message.warning({
+            title: intl.get({
+              id: 'rdc-tb-cd-assets.import.cp2flow.MaximumNumberOfBatchesExceeded',
+              defaultMessage: '超过最大批量数'
+            }),
+            content: intl.get({
+              id: 'rdc-tb-cd-assets.import.cp2flow.ASingleNumberMustBe',
+              defaultMessage: '单次单独数量需小于等于{MAXBATCH}'
+            }, {
+              MAXBATCH: MAX_BATCH
+            })
+          });
+          return;
+        }
+        setSelectedRowKeys(ids);
+      }
+    }
+  }, /*#__PURE__*/React.createElement(Table.Column, {
+    title: intl.get({
+      id: 'rdc-tb-cd-assets.import.cp2flow.TaskName',
+      defaultMessage: '任务名称'
+    }),
+    dataIndex: "jobName"
+  }), /*#__PURE__*/React.createElement(Table.Column, {
+    title: intl.get({
+      id: 'rdc-tb-cd-assets.import.cp2flow.Number',
+      defaultMessage: '编号'
+    }),
+    dataIndex: "uniqueId"
+  }), /*#__PURE__*/React.createElement(Table.Column, {
+    title: intl.get({
+      id: 'rdc-tb-cd-assets.import.cp2flow.Note',
+      defaultMessage: '备注'
+    }),
+    cell: function cell(value, index, record) {
+      if (!record.migrationJob) return;
+      if (record.migrationJob.status === 'SUCCESS') {
+        return /*#__PURE__*/React.createElement("div", null, intl.get({
+          id: 'rdc-tb-cd-assets.import.cp2flow.SuccessfullyImported',
+          defaultMessage: '已成功导入，'
+        }), /*#__PURE__*/React.createElement("a", {
+          href: record.migrationJob.pipelineUrl,
+          target: "_blank",
+          rel: "noopener noreferrer"
+        }, intl.get({
+          id: 'rdc-tb-cd-assets.import.cp2flow.See',
+          defaultMessage: '查看'
+        })));
+      }
+      if (record.migrationJob.status === 'INIT') {
+        return /*#__PURE__*/React.createElement("div", null, intl.get({
+          id: 'rdc-tb-cd-assets.import.cp2flow.Importing',
+          defaultMessage: '正在导入'
+        }));
+      }
+    }
+  })), /*#__PURE__*/React.createElement(Pagination, {
+    type: "simple",
+    current: current,
+    pageSize: size,
+    total: total,
+    onChange: function onChange(nextPage) {
+      loadByPage(nextPage);
+    }
+  })));
+};
+var MigrationJobStatus = function MigrationJobStatus(_ref2) {
+  var status = _ref2.status;
+  switch (status) {
+    case 'SUCCESS':
+      return /*#__PURE__*/React.createElement(YunxiaoIcon, {
+        type: "success-fill"
+      });
+    case 'FAILED':
+      return /*#__PURE__*/React.createElement(YunxiaoIcon, {
+        type: "warning-fill"
+      });
+    default:
+      return /*#__PURE__*/React.createElement(YunxiaoIcon, {
+        type: "loading-fill"
+      });
+  }
+};
+var MigrationJob = function MigrationJob(_ref3) {
+  var uniqueId = _ref3.uniqueId;
+  var _useState9 = useState({}),
+    job = _useState9[0],
+    setJob = _useState9[1];
+  // const [timer, setTimer] = useState();
+
+  var _getJob = function getJob(uid) {
+    exceed.fetch({
+      api: 'jeknins.migration.job',
+      params: {
+        uid: uid
+      }
+    }).then(function (res) {
+      if (res.successful) {
+        setJob(res.object);
+        if (res.object.status === 'INIT' && !exited) {
+          setTimeout(function () {
+            return _getJob(uid);
+          }, 1000);
+        }
+        if (res.object.status === 'SUCCESS') {
+          track({
+            action: 'jobs migrated',
+            page: 'cds migration page',
+            daysinceenterflow: intervalEnterTime()
+          });
+        }
+      }
+    });
+  };
+  useEffect(function () {
+    exited = false;
+    _getJob(uniqueId);
+    return function () {
+      exited = true;
+    };
+  }, []);
+  var render = function render() {
+    if (!job.name) {
+      return /*#__PURE__*/React.createElement(Loading, {
+        inline: false
+      });
+    }
+    var jobLinks = /*#__PURE__*/React.createElement("a", {
+      href: job.pipelineUrl,
+      target: "_blank",
+      rel: "noopener noreferrer"
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.import.cp2flow.See',
+      defaultMessage: '查看'
+    }));
+    return /*#__PURE__*/React.createElement("div", {
+      className: prefix + "__job_item " + prefix + "__job_item--" + job.status.toLowerCase()
+    }, /*#__PURE__*/React.createElement("div", null, job.name), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(MigrationJobStatus, {
+      status: job.status
+    }), job.status === 'SUCCESS' ? jobLinks : /*#__PURE__*/React.createElement("span", null, job.errorMsg)));
+  };
+  return /*#__PURE__*/React.createElement("div", null, render());
+};
+var HISTORIES_PAGESIZE = 5;
+var CodePipeline2FlowResult = function CodePipeline2FlowResult(_ref4) {
+  var visible = _ref4.visible,
+    pre = _ref4.pre,
+    _ref4$selectedRowKeys = _ref4.selectedRowKeys,
+    selectedRowKeys = _ref4$selectedRowKeys === void 0 ? [] : _ref4$selectedRowKeys;
+  // const [jobs, setJobs] = useState([]);
+  var _useState10 = useState(0),
+    current = _useState10[0],
+    setCurrent = _useState10[1];
+  var _useState11 = useState({}),
+    pageable = _useState11[0],
+    setPageable = _useState11[1];
+  var getMigrationHistories = function getMigrationHistories(page, size) {
+    return new Promise(function (resolve, reject) {
+      exceed.fetch({
+        api: 'jeknins.migration.histories',
+        data: {
+          size: size,
+          page: page
+        }
+      }).then(function (res) {
+        if (res.successful) {
+          setPageable(res.object);
+          resolve();
+        } else {
+          reject();
+        }
+      });
+    });
+  };
+  useEffect(function () {
+    if (visible) {
+      getMigrationHistories(current, HISTORIES_PAGESIZE);
+    }
+  }, [visible]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: prefix + "__step " + prefix + "__step--" + (visible ? 'visible' : 'hidden')
+  }, /*#__PURE__*/React.createElement(Form.Item, {
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.import.cp2flow.CurrentTaskStatus',
+      defaultMessage: '当前任务状态'
+    })
+  }, /*#__PURE__*/React.createElement("div", null, selectedRowKeys.map(function (uniqueId) {
+    return /*#__PURE__*/React.createElement(MigrationJob, {
+      uniqueId: uniqueId,
+      key: uniqueId
+    });
+  }))), /*#__PURE__*/React.createElement(Form.Item, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      pre();
+    }
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.import.cp2flow.PreviousStep',
+    defaultMessage: '上一步'
+  })), "\xA0"), /*#__PURE__*/React.createElement("div", {
+    path: "histories"
+  }, /*#__PURE__*/React.createElement(Form.Item, {
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.import.cp2flow.StatusOfHistoricalTasks',
+      defaultMessage: '历史任务状态状态:'
+    })
+  }, /*#__PURE__*/React.createElement(Table, {
+    dataSource: pageable.content,
+    primaryKey: "uniqueId",
+    hasBorder: true
+  }, /*#__PURE__*/React.createElement(Table.Column, {
+    width: 200,
+    title: intl.get({
+      id: 'rdc-tb-cd-assets.import.cp2flow.TaskName',
+      defaultMessage: '任务名称'
+    }),
+    dataIndex: "name"
+  }), /*#__PURE__*/React.createElement(Table.Column, {
+    title: intl.get({
+      id: 'rdc-tb-cd-assets.import.cp2flow.State',
+      defaultMessage: '状态'
+    }),
+    dataIndex: "status",
+    width: 200
+  }), /*#__PURE__*/React.createElement(Table.Column, {
+    title: intl.get({
+      id: 'rdc-tb-cd-assets.import.cp2flow.Information',
+      defaultMessage: '信息'
+    }),
+    cell: function cell(value, index, record) {
+      return record.status === 'SUCCESS' ? /*#__PURE__*/React.createElement("a", {
+        href: record.pipelineUrl,
+        target: "_blank",
+        rel: "noopener noreferrer"
+      }, intl.get({
+        id: 'rdc-tb-cd-assets.import.cp2flow.ViewTheImportedPipeline',
+        defaultMessage: '查看导入的流水线'
+      })) : /*#__PURE__*/React.createElement("span", null, record.errorMsg);
+    }
+  })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Pagination, {
+    current: current,
+    pageSize: HISTORIES_PAGESIZE,
+    total: pageable.totalElements,
+    onChange: function onChange(page) {
+      setCurrent(page);
+      getMigrationHistories(page - 1, HISTORIES_PAGESIZE);
+    }
+  }))));
+};
+CodePipeline2Flow.Result = CodePipeline2FlowResult;
+export default CodePipeline2Flow;

package/es/pages/tools/jenkins/import/guide/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const Guide: ({ visible, next, setMethod, setCurrent }: {
+    visible: any;
+    next: any;
+    setMethod: any;
+    setCurrent: any;
+}) => JSX.Element;
+export default Guide;

package/es/pages/tools/jenkins/import/guide/index.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Button } from '@teamix/ui';
+import track from "../../../../../utils/track";
+import { intervalEnterTime } from "../../../../../utils";
+import intl from "../../../../../locale";
+var prefix = 'flow-tools-jenkins';
+var Guide = function Guide(_ref) {
+  var visible = _ref.visible,
+    next = _ref.next,
+    setMethod = _ref.setMethod,
+    setCurrent = _ref.setCurrent;
+  var onChoice = function onChoice(method) {
+    track({
+      action: 'start migrate cds',
+      page: 'cds migration page',
+      daysinceenterflow: intervalEnterTime()
+    });
+    setMethod(method);
+    next();
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: prefix + "__step " + prefix + "__step--" + (visible ? 'visible' : 'hidden')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: prefix + "__choice"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: prefix + "__choice__method"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "action"
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    onClick: function onClick() {
+      return onChoice('codepipeline');
+    }
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.import.guide.StartImport',
+    defaultMessage: '开始导入'
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: prefix + "__choice__method"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "desc"
+  }, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Button, {
+    text: true,
+    onClick: function onClick() {
+      setCurrent(2);
+    }
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.import.guide.ViewImportHistory',
+    defaultMessage: '查看导入历史'
+  })))))));
+};
+export default Guide;

package/es/pages/tools/jenkins/import/index.d.ts

@@ -0,0 +1,7 @@
+import { Component } from 'react';
+import './index.scss';
+declare class Default extends Component {
+    constructor(props: any);
+    render(): JSX.Element;
+}
+export default Default;

package/es/pages/tools/jenkins/import/index.js

@@ -0,0 +1,26 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React, { Component } from 'react';
+import { Field } from '@teamix/ui';
+import { Layout } from '@alife/devops-ui';
+import Main from "./main";
+import "./index.scss";
+var Default = /*#__PURE__*/function (_Component) {
+  function Default(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
+    _this.field = new Field(_this);
+    return _this;
+  }
+  _inheritsLoose(Default, _Component);
+  var _proto = Default.prototype;
+  _proto.render = function render() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Layout, {
+      fullPage: true,
+      standAlone: true
+    }, /*#__PURE__*/React.createElement(Main, {
+      field: this.field
+    })));
+  };
+  return Default;
+}(Component);
+export default Default;

package/es/pages/tools/jenkins/import/index.scss

@@ -0,0 +1,50 @@
+$prefix: "flow-tools-jenkins";
+
+.#{$prefix}__title {
+  text-align: center;
+  margin-bottom: 35px;
+}
+
+.#{$prefix}__step {
+  &--hidden {
+    display: none;
+  }
+}
+
+.#{$prefix}__choice {
+  margin-top: 40px;
+  &__method {
+    text-align: center;
+  }
+}
+
+.#{$prefix}__info {
+  padding: 10px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.#{$prefix}__job_item {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 20px;
+  .next-icon, .teamix-icon {
+    margin-right: 10px;
+  }
+  &--success {
+    .next-icon, .teamix-icon {
+      color: #1dc11d;
+    }
+  }
+  &--init {
+    .next-icon, .teamix-icon {
+      color: #ffa003;
+    }
+  }
+  &--failed {
+    .next-icon, .teamix-icon {
+      color: #f33;
+    }
+  }
+}

package/es/pages/tools/jenkins/import/main/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const Main: ({ field }: {
+    field: any;
+}) => JSX.Element;
+export default Main;

package/es/pages/tools/jenkins/import/main/index.js

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { Form } from '@teamix/ui';
+import Steps from "../step-line";
+import XML2Flow from "../xml2flow";
+import CP2Flow from "../cp2flow";
+import Guide from "../guide";
+import intl from "../../../../../locale";
+var prefix = 'flow-tools-jenkins';
+var Main = function Main(_ref) {
+  var field = _ref.field;
+  var _useState = useState(0),
+    current = _useState[0],
+    setCurrent = _useState[1];
+  var _useState2 = useState('codepipeline'),
+    method = _useState2[0],
+    setMethod = _useState2[1];
+  var next = function next(data) {
+    if (data) {
+      field.setValues(data);
+    }
+    setCurrent(current + 1);
+  };
+  var pre = function pre() {
+    setCurrent(current - 1);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 1000,
+      margin: '68px auto'
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h2", {
+    className: prefix + "__title"
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.import.main.MigrateACodepipelineProjectTo',
+    defaultMessage: '迁移CodePipeline项目到Flow'
+  })), /*#__PURE__*/React.createElement(Steps, {
+    current: current
+  }), /*#__PURE__*/React.createElement(Form, {
+    labelAlign: "top"
+  }, /*#__PURE__*/React.createElement(Guide, {
+    visible: current === 0,
+    field: field,
+    next: next,
+    setMethod: setMethod,
+    setCurrent: setCurrent
+  }), method === 'xml' && /*#__PURE__*/React.createElement(XML2Flow, {
+    visible: current === 1,
+    next: next,
+    pre: pre,
+    field: field
+  }), method === 'xml' && /*#__PURE__*/React.createElement(XML2Flow.Result, {
+    visible: current === 2,
+    result: field.getValue('result')
+  }), method === 'codepipeline' && /*#__PURE__*/React.createElement(CP2Flow, {
+    visible: current === 1,
+    next: next,
+    pre: pre,
+    field: field
+  }), method === 'codepipeline' && /*#__PURE__*/React.createElement(CP2Flow.Result, {
+    visible: current === 2,
+    next: next,
+    pre: pre,
+    field: field,
+    selectedRowKeys: field.getValue('selectedRowKeys')
+  }))));
+};
+export default Main;

package/es/pages/tools/jenkins/import/step-line/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const StepsGuide: ({ current }: {
+    current: any;
+}) => JSX.Element;
+export default StepsGuide;