fix: Delete the back icon in pipeline breadcrumb

Signed-off-by: harrisonliu5 <harrisonliu_5@163.com>

src/components/Base/Breadcrumb/index.jsx

@@ -19,11 +19,9 @@
 import { isEmpty } from 'lodash'
 import React from 'react'
 import PropTypes from 'prop-types'
-import classNames from 'classnames'
 import { Link } from 'react-router-dom'
 import isEqual from 'react-fast-compare'
 import pathToRegexp from 'path-to-regexp'
-import { ReactComponent as BackIcon } from 'src/assets/back.svg'
 
 import styles from './index.scss'
 
@@ -33,15 +31,13 @@ export default class Breadcrumb extends React.Component {
     routes: PropTypes.array,
     params: PropTypes.object,
     pathname: PropTypes.string,
-    goBack: PropTypes.func,
   }
 
   static defaultProps = {
     breadcrumbs: [],
     routes: [],
     params: {},
     pathname: '',
-    goBack() {},
   }
 
   shouldComponentUpdate(nextProps) {
@@ -55,7 +51,6 @@ export default class Breadcrumb extends React.Component {
 
   getCurrentPath() {
     const { pathname, routes } = this.props
-
     return routes
       .filter(item => item.name)
       .find(item => !isEmpty(pathToRegexp(item.path).exec(pathname)))
@@ -70,6 +65,7 @@ export default class Breadcrumb extends React.Component {
     const { breadcrumbs } = this.props
 
     const links = []
+
     breadcrumbs.forEach((item, index) => {
       const label = this.compile(item.label)
 
@@ -108,16 +104,6 @@ export default class Breadcrumb extends React.Component {
       )
     }
 
-    return (
-      <div className={styles.breadcrumb}>
-        <a
-          className={classNames('custom-icon', styles.back)}
-          onClick={this.props.goBack}
-        >
-          <BackIcon />
-        </a>
-        {links}
-      </div>
-    )
+    return <div className={styles.breadcrumb}>{links}</div>
   }
 }

src/components/Base/Breadcrumb/index.test.js

@@ -18,7 +18,6 @@
 
 import React from 'react'
 import { mount } from 'enzyme'
-import styles from 'identity-obj-proxy'
 import { MemoryRouter as Router } from 'react-router-dom'
 
 import Breadcrumb from './index'
@@ -54,24 +53,15 @@ it('renders correctly', () => {
       '/projects/kubesphere-system/deployments/ks-console/resource-status',
     breadcrumbs,
     routes,
-    goBack: jest.fn(),
   }
 
   const wrapper = mount(
     <Router>
       <Breadcrumb {...props} />
     </Router>
   )
-  expect(wrapper.find('div > a').first()).toHaveClassName(styles.back)
   expect(wrapper.find('a[href="/projects/kubesphere-system"]')).toHaveLength(1)
   expect(
     wrapper.find('a[href="/projects/kubesphere-system/deployments"]')
   ).toHaveLength(1)
-
-  wrapper
-    .find('div > a')
-    .first()
-    .simulate('click')
-
-  expect(props.goBack).toHaveBeenCalled()
 })

src/core/layouts/Detail/index.jsx

@@ -16,7 +16,6 @@
  * along with KubeSphere Console.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { get } from 'lodash'
 import React, { Component } from 'react'
 import { inject, observer } from 'mobx-react'
 import PropTypes from 'prop-types'
@@ -81,18 +80,6 @@ class DetailLayout extends Component {
     }
   }
 
-  goBack = () => {
-    const routing = this.props.rootStore.routing
-
-    const listUrl = get(this.detailRef, 'current.wrappedInstance.listUrl')
-
-    if (listUrl) {
-      return routing.push(listUrl)
-    }
-
-    return routing.go(-1)
-  }
-
   render() {
     const { component, rootStore, breadcrumbs, ...rest } = this.props
     const DetailComponent = component
@@ -114,7 +101,6 @@ class DetailLayout extends Component {
             pathname={rest.location.pathname}
             breadcrumbs={breadcrumbs}
             routes={rest.route.routes}
-            goBack={this.goBack}
           />
         </LayoutHeader>
         <DetailComponent {...commonProps} ref={this.detailRef} />

src/pages/devops/containers/Credential/detail/index.jsx

@@ -33,6 +33,7 @@ class CredentialDetail extends Base {
     showEdit: false,
     showYamlEdit: false,
     deleteModule: false,
+    isLoading: true,
   }
 
   get name() {
@@ -83,6 +84,7 @@ class CredentialDetail extends Base {
       workspace: params.workspace,
       devops: params.devops,
     })
+    this.setState({ isLoading: false })
   }
 
   getOperations = () => [
@@ -162,6 +164,7 @@ class CredentialDetail extends Base {
 
   renderSider() {
     const { detail } = this.store
+    const { isLoading } = this.state
     const operations = this.getOperations().filter(item =>
       this.enabledActions.includes(item.action)
     )
@@ -173,6 +176,7 @@ class CredentialDetail extends Base {
         desc={get(detail, 'description')}
         operations={operations}
         labels={detail.labels}
+        isLoading={isLoading}
         attrs={this.getAttrs()}
       />
     )

src/pages/devops/containers/Pipelines/Detail/Sider/runs-sider.jsx

@@ -42,7 +42,9 @@ class RunSider extends Base {
     this.state = {
       showEdit: false,
       showYamlEdit: false,
+      isLoading: true,
     }
+
     this.refreshTimer = setInterval(this.refreshHandler, 4000)
     this.init()
   }
@@ -67,6 +69,10 @@ class RunSider extends Base {
       workspace: params.workspace,
       devops: params.devops,
     })
+
+    this.setState({
+      isLoading: false,
+    })
   }
 
   refreshHandler = () => {
@@ -232,7 +238,7 @@ class RunSider extends Base {
     const {
       runDetail: { id, annotations, labels },
     } = this.store
-
+    const { isLoading } = this.state
     const operations = this.getOperations().filter(item =>
       this.enabledActions.includes(item.action)
     )
@@ -244,6 +250,7 @@ class RunSider extends Base {
         desc={get(annotations, 'desc')}
         operations={operations}
         labels={labels}
+        isLoading={isLoading}
         attrs={this.getAttrs()}
       />
     )