How to use the choerodon-ui.Modal.Sidebar function in choerodon-ui

*/

import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import _ from 'lodash';
import { injectIntl, FormattedMessage } from 'react-intl';
import {
  Modal, Table, Select, Spin,
} from 'choerodon-ui';
import { stores, Content } from '@choerodon/boot';
import './SelectAppAndVersion.scss';
import { getApps, getAppVersions } from '../../../../../../api/AutoTestApi';
import CreateAutoTestStore from '../../../../../../store/project/AutoTest/CreateAutoTestStore';

const SideBar = Modal.Sidebar;
const { AppState } = stores;
const { Option } = Select;
@observer
class SelectAppAndVersion extends Component {
  state = {
    loading: false,
  }

  componentDidMount() {
    this.loadAppAndVersions();
  }

  /**
   * 加载应用以及版本，默认选择第一个应用
   *
   * 

*/

import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import _ from 'lodash';
import { injectIntl, FormattedMessage } from 'react-intl';
import {
  Modal, Table, Select, Spin,
} from 'choerodon-ui';
import { stores, Content } from '@choerodon/boot';
import './SelectAppAndVersion.less';
import { getApps, getAppVersions } from '../../../../../api/AutoTestApi';
import CreateAutoTestStore from '../../../AutoTestStore/CreateAutoTestStore';

const SideBar = Modal.Sidebar;
const { AppState } = stores;
const { Option } = Select;
@observer
class SelectAppAndVersion extends Component {
  state = {
    loading: false,
  }

  componentDidMount() {
    this.loadAppAndVersions();
  }

  /**
   * 加载应用以及版本，默认选择第一个应用
   *
   * 

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { observer } from 'mobx-react';
import { Modal, Form, Select, Tooltip } from 'choerodon-ui';
import { stores, Content, Choerodon } from '@choerodon/boot';
import { injectIntl, FormattedMessage } from 'react-intl';
import _ from 'lodash';
import '../../../../main.less';
import '../branch-create/index.less';
import '../index.less';
import MouserOverWrapper from '../../../../../components/MouseOverWrapper';
import DevPipelineStore from '../../../stores/DevPipelineStore';
import InterceptMask from '../../../../../components/intercept-mask';

const { AppState } = stores;
const Sidebar = Modal.Sidebar;
const { Option } = Select;
const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 100 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 26 },
  },
};

@Form.create()
@withRouter
@injectIntl

import { Content, Header, Page, Permission, stores } from 'choerodon-front-boot';
import { injectIntl, FormattedMessage } from 'react-intl';
import _ from 'lodash';
import CopyToBoard from 'react-copy-to-clipboard';
import LoadingBar from '../../../../components/loadingBar';
import ClusterList from '../clusterList';
import './Cluster.scss';
import '../../../project/envPipeline/EnvPipeLineHome.scss';
import '../../../main.scss';
import '../../../../components/DepPipelineEmpty/DepPipelineEmpty.scss';
import InterceptMask from '../../../../components/interceptMask/InterceptMask';

const HEIGHT = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

const { AppState } = stores;
const Sidebar = Modal.Sidebar;
const RadioGroup = Radio.Group;
const FormItem = Form.Item;
const { TextArea } = Input;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 100 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 26 },
  },
};

@observer

import React, { Component } from 'react';
import { Modal, Table, Tooltip, Popover, Button, Icon } from 'choerodon-ui';
import { stores, Content, axios } from 'choerodon-front-boot';
import TimeAgo from 'timeago-react';
import UserHead from '../UserHead';

const { AppState } = stores;
const Sidebar = Modal.Sidebar;
const STATUS_SHOW = {
  opened: '开放',
  merged: '已合并',
  closed: '关闭',
};

class MergeRequest extends Component {
  constructor(props) {
    super(props);
    this.state = {
      mergeRequests: [],
      loading: false,
    };
  }

  componentDidMount() {

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { observer } from 'mobx-react';
import { Modal, Form, Progress, Icon } from 'choerodon-ui';
import { injectIntl, FormattedMessage } from 'react-intl';
import _ from 'lodash';
import './Issue.scss';
import '../index.scss';
import IssueDescription from './IssueDescription';
import LoadingBar from '../../../../components/loadingBar';
import TimePopover from '../../../../components/timePopover';
import InterceptMask from "../../../../components/interceptMask/InterceptMask";
import { Content } from "choerodon-front-boot";

const Sidebar = Modal.Sidebar;
const QuillDeltaToHtmlConverter = require('quill-delta-to-html');

const STATUS_ICON = {
  done: {
    icon: 'check_circle',
    color: '#1bb06e',
    bgColor: '',
  },
  todo: {
    icon: 'watch_later',
    color: '#ffae02',
    bgColor: '',
  },
  doing: {
    icon: 'timelapse',
    color: '#4a93fc',

import React, { Component, Fragment } from 'react';
import _ from "lodash";
import { observer } from 'mobx-react';
import { injectIntl, FormattedMessage } from 'react-intl';
import { Modal, Button } from 'choerodon-ui';
import { Content } from '@choerodon/boot';
import ReactCodeMirror from "react-codemirror";

import "codemirror/lib/codemirror.css";
import "codemirror/theme/base16-dark.css";
import '../../../project/container/containerHome/ContainerHome.scss';

const Sidebar = Modal.Sidebar;

@observer
class LogSiderbar extends Component {
  constructor() {
    super(...arguments);
    this.state = {
      following: true,
      fullScreen: false,
      ws: undefined,
    };
    this.timer = null;
  }

  componentDidMount() {
    setTimeout(()=>this.loadLog(), 0);
  }

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { observer } from 'mobx-react';
import { Modal, Form, Radio, Input, Select, Tooltip } from 'choerodon-ui';
import { Content, stores, Choerodon } from '@choerodon/boot';
import { injectIntl, FormattedMessage } from 'react-intl';
import _ from 'lodash';
import '../../../../main.less';
import './index.less';
import '../index.less';
import MouserOverWrapper from '../../../../../components/MouseOverWrapper';
import DevPipelineStore from '../../../stores/DevPipelineStore';
import InterceptMask from '../../../../../components/intercept-mask';

const { AppState } = stores;
const Sidebar = Modal.Sidebar;
const { Option, OptGroup } = Select;
const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 100 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 26 },
  },
};

@Form.create()
@withRouter
@injectIntl

import { withRouter } from 'react-router-dom';
import { observer } from 'mobx-react';
import { Modal, Form, Select, Tooltip } from 'choerodon-ui';
import { stores, Content } from 'choerodon-front-boot';
import { injectIntl, FormattedMessage } from 'react-intl';
import _ from 'lodash';
import '../../../main.scss';
import '../branchCreate/BranchCreate.scss';
import '../index.scss';
import MouserOverWrapper from '../../../../components/MouseOverWrapper';
import DevPipelineStore from '../../../../stores/project/devPipeline';
import DevConsoleStore from '../../../../stores/project/devConsole';
import InterceptMask from "../../../../components/interceptMask/InterceptMask";

const { AppState } = stores;
const Sidebar = Modal.Sidebar;
const { Option } = Select;
const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 100 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 26 },
  },
};
@observer
class BranchEdit extends Component {
  constructor(props) {
    const menu = AppState.currentMenuType;

import React, { Component, Fragment } from 'react';
import _ from "lodash";
import { observer } from 'mobx-react';
import { injectIntl, FormattedMessage } from 'react-intl';
import { Modal, Button } from 'choerodon-ui';
import { Content } from 'choerodon-front-boot';
import ReactCodeMirror from "react-codemirror";
import "codemirror/lib/codemirror.css";
import "codemirror/theme/base16-dark.css";
import '../../../project/container/containerHome/ContainerHome.scss';

const Sidebar = Modal.Sidebar;

@observer
class LogSiderbar extends Component {
  constructor() {
    super(...arguments);
    this.state = {
      following: true,
      fullScreen: false,
      ws: undefined,
    };
    this.timer = null;
  }

  componentDidMount() {
    setTimeout(()=>this.loadLog(), 0);
  }