fix: Replace footer actions with confirm for sub forms in edit-template

1. replace footer actions with confirm for sub forms in edit-template 2. add loading status to detail layout to prevent permission judgment errors 3. resize the loading icon
kubesphere · Dec 27, 2019 · 1afb85b · 1afb85b
1 parent 1f8ffdc
commit 1afb85b
Show file tree

Hide file tree

Showing 25 changed files with 90 additions and 49 deletions.
diff --git a/src/components/Base/Card/index.jsx b/src/components/Base/Card/index.jsx
@@ -108,7 +108,7 @@ export default class Card extends PureComponent {
       >
         {this.renderTitle()}
         {loading ? (
-          <Loading className={styles.loading} size="medium" />
+          <Loading className={styles.loading} />
         ) : (
           this.renderContent()
         )}

diff --git a/src/components/Base/CodeEditor/index.jsx b/src/components/Base/CodeEditor/index.jsx
@@ -89,7 +89,7 @@ class CodeEditor extends PureComponent {
     const { value } = this.state
 
     return (
-      <Suspense fallback={<Loading className="ks-page-loading" size="large" />}>
+      <Suspense fallback={<Loading className="ks-page-loading" />}>
         <AceEditor
           {...options}
           className={classnames(styles.editor, className)}

diff --git a/src/components/Forms/Base/Confirm/index.jsx b/src/components/Forms/Base/Confirm/index.jsx
@@ -25,18 +25,18 @@ import styles from './index.scss'
 
 export default class Confirm extends React.PureComponent {
   render() {
-    const { className, onOk, onCancel } = this.props
+    const { className, onOk, okText, onCancel, cancelText } = this.props
     return (
       <div className={classNames(styles.wrapper, className)}>
         <div
           className={styles.button}
           onClick={onCancel}
           data-test="confirm-cancel"
         >
-          <Icon name="close" type="light" />
+          {cancelText || <Icon name="close" type="light" />}
         </div>
         <div className={styles.button} onClick={onOk} data-test="confirm-ok">
-          <Icon name="check" type="light" />
+          {okText || <Icon name="check" type="light" />}
         </div>
       </div>
     )

diff --git a/src/components/Forms/Base/Confirm/index.scss b/src/components/Forms/Base/Confirm/index.scss
@@ -17,6 +17,7 @@
   margin-right: 12px;
   transition: all $trans-speed ease-in-out;
   cursor: pointer;
+  color: #fff;
 
   &:hover {
     background-color: $dark-color06;

diff --git a/src/components/Graph/index.jsx b/src/components/Graph/index.jsx
@@ -138,7 +138,7 @@ export default class Graph extends React.Component {
         })}
       >
         <div className={styles.loading}>
-          <Loading spinning={loading} size="small" />
+          <Loading spinning={loading} />
         </div>
         <Dragger
           className={styles.dragger}

diff --git a/src/components/Modals/Edit/Form/index.jsx b/src/components/Modals/Edit/Form/index.jsx
@@ -23,6 +23,7 @@ import { isEmpty, get } from 'lodash'
 
 import { Icon } from '@pitrix/lego-ui'
 import { Button } from 'components/Base'
+import Confirm from 'components/Forms/Base/Confirm'
 
 import EnhanceWrapper from './wrapper'
 
@@ -78,6 +79,14 @@ export default class FormsBox extends React.Component {
     }
   }
 
+  handleSubFormCancel = () => {
+    const { subRoute } = this.state
+    if (subRoute && subRoute.onCancel) {
+      subRoute.onCancel()
+      this.setState({ subRoute: {} })
+    }
+  }
+
   handlePrev = () => {
     this.setState(({ subRoute }) => {
       if (subRoute && subRoute.onCancel) {
@@ -191,10 +200,27 @@ export default class FormsBox extends React.Component {
           formData={formData}
           onSaveChange={this.handleSaveForm}
         />
+        {this.renderSubRouteConfirm()}
       </div>
     )
   }
 
+  renderSubRouteConfirm() {
+    const { subRoute } = this.state
+
+    if (isEmpty(subRoute)) {
+      return null
+    }
+
+    return (
+      <Confirm
+        className={styles.confirm}
+        onOk={this.handleSubFormSave}
+        onCancel={this.handleSubFormCancel}
+      />
+    )
+  }
+
   renderContent() {
     return (
       <div className={styles.content}>
@@ -207,30 +233,21 @@ export default class FormsBox extends React.Component {
   }
 
   renderFooter() {
-    const { updatedTabs, subRoute = {} } = this.state
-    const { onCancel, onSave } = subRoute
+    const { updatedTabs } = this.state
 
     return (
       <div className={styles.footer}>
-        {onCancel && <Button onClick={this.handlePrev}>{t('Previous')}</Button>}
-        {onSave && (
-          <Button type="control" onClick={this.handleSubFormSave}>
-            {t('Save')}
+        <div>
+          <Button onClick={this.props.onCancel}>{t('Cancel')}</Button>
+          <Button
+            type="control"
+            disabled={isEmpty(updatedTabs)}
+            loading={this.props.isSubmitting}
+            onClick={this.handleSubmit}
+          >
+            {t('Confirm')}
           </Button>
-        )}
-        {isEmpty(subRoute) && (
-          <div>
-            <Button onClick={this.props.onCancel}>{t('Cancel')}</Button>
-            <Button
-              type="control"
-              disabled={isEmpty(updatedTabs)}
-              loading={this.props.isSubmitting}
-              onClick={this.handleSubmit}
-            >
-              {t('Confirm')}
-            </Button>
-          </div>
-        )}
+        </div>
       </div>
     )
   }

diff --git a/src/components/Modals/Edit/Form/index.scss b/src/components/Modals/Edit/Form/index.scss
@@ -82,6 +82,7 @@
   position: relative;
   width: calc(100% - 184px);
   padding: 12px;
+  padding-bottom: 38px;
   border-radius: 4px;
   background-color: $white;
   border: 1px solid $light-color03;
@@ -112,3 +113,9 @@
   background-color: $light;
   border-radius: 0 0 $border-radius $border-radius;
 }
+
+.confirm {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
diff --git a/src/components/Modals/Edit/Form/wrapper.jsx b/src/components/Modals/Edit/Form/wrapper.jsx
@@ -91,6 +91,8 @@ const EnhanceWrapper = function(Component) {
           className={classnames(styles.formActions, {
             [styles.active]: this.state.showFormActions,
           })}
+          okText={t('Save')}
+          cancelText={t('Undo')}
           onOk={this.handleSaveChange}
           onCancel={this.handleCancelChange}
         />

diff --git a/src/core/containers/Base/Detail/index.jsx b/src/core/containers/Base/Detail/index.jsx
@@ -317,7 +317,7 @@ export default class DetailBase extends React.Component {
     if (this.isLoading)
       return (
         <div className={styles.loading}>
-          <Loading size="large" />
+          <Loading />
         </div>
       )
 

diff --git a/src/core/index.js b/src/core/index.js
@@ -70,7 +70,7 @@ const history = syncHistoryWithStore(browserHistory, store.routing)
 const render = component => {
   ReactDOM.render(
     <AppContainer>
-      <Suspense fallback={<Loading className="ks-page-loading" size="large" />}>
+      <Suspense fallback={<Loading className="ks-page-loading" />}>
         <LocaleProvider locales={locales} localeKey="lang" ignoreWarnings>
           {component}
         </LocaleProvider>

diff --git a/src/core/layouts/Detail/index.jsx b/src/core/layouts/Detail/index.jsx
@@ -25,7 +25,8 @@ import ProjectStore from 'stores/project'
 import DevOpsStore from 'stores/devops'
 import WorkspaceStore from 'stores/workspace'
 
-import { Layout } from '@pitrix/lego-ui'
+import { Layout, Loading } from '@pitrix/lego-ui'
+
 import { Breadcrumb } from 'components/Base'
 
 import styles from './index.scss'
@@ -48,29 +49,35 @@ class DetailLayout extends Component {
   constructor(props) {
     super(props)
 
+    this.state = { initializing: true }
     this.checkGlobalStore(props.match.params)
-    this.init(props.match.params)
-
     this.detailRef = React.createRef()
   }
 
-  init(params = {}) {
+  componentDidMount() {
+    this.init(this.props.match.params)
+  }
+
+  async init(params = {}) {
     const rootStore = this.props.rootStore
 
     if (params.namespace && rootStore.project) {
       const projectRule = get(globals.user, `rules[${params.namespace}]`)
 
+      await rootStore.project.fetchDetail(params)
       if (projectRule === undefined) {
-        rootStore.project.fetchRules(params)
+        await rootStore.project.fetchRules({
+          namespace: params.namespace,
+          workspace: rootStore.project.data.workspace,
+        })
       }
-      rootStore.project.fetchDetail(params)
     }
 
     if (params.project_id && rootStore.devops) {
       const devopsRule = get(globals.user, `rules[${params.project_id}]`)
 
       if (devopsRule === undefined) {
-        rootStore.devops.fetchRules(params)
+        await rootStore.devops.fetchRules(params)
       }
     }
 
@@ -81,9 +88,11 @@ class DetailLayout extends Component {
       )
 
       if (workspaceRule === undefined) {
-        rootStore.workspace.fetchRules(params)
+        await rootStore.workspace.fetchRules(params)
       }
     }
+
+    this.setState({ initializing: false })
   }
 
   checkGlobalStore(params = {}) {
@@ -126,6 +135,10 @@ class DetailLayout extends Component {
       ...rest,
     }
 
+    if (this.state.initializing) {
+      return <Loading className="ks-page-loading" />
+    }
+
     return (
       <Layout className={styles.wrapper}>
         <LayoutHeader className={styles.header}>

diff --git a/src/locales/zh/base.js b/src/locales/zh/base.js
@@ -135,6 +135,7 @@ export default {
   Previous: '上一步',
   Next: '下一步',
   Update: '更新',
+  Undo: '撤销',
   Save: '保存',
   Create: '创建',
 

diff --git a/src/pages/apps/components/Lists/AuditRecord/index.jsx b/src/pages/apps/components/Lists/AuditRecord/index.jsx
@@ -95,7 +95,7 @@ export default class AuditRecord extends React.Component {
     return (
       <div className={classnames(styles.main, className)}>
         {isLoading ? (
-          <Loading className={styles.loading} size="medium" />
+          <Loading className={styles.loading} />
         ) : (
           this.renderContent()
         )}

diff --git a/src/pages/clusters/containers/Workspaces/index.jsx b/src/pages/clusters/containers/Workspaces/index.jsx
@@ -118,7 +118,7 @@ class Workspaces extends React.Component {
     }
 
     if (isLoading) {
-      return <Loading className={styles.loading} size="large" />
+      return <Loading className={styles.loading} />
     }
 
     return (

diff --git a/src/pages/devops/containers/Pipelines/Detail/PipeLine/index.jsx b/src/pages/devops/containers/Pipelines/Detail/PipeLine/index.jsx
@@ -207,7 +207,7 @@ export default class Pipeline extends React.Component {
 
     if (isLoading) {
       return (
-        <Loading spinning size="large">
+        <Loading spinning>
           <div className={style.pipelineCard} />
         </Loading>
       )

diff --git a/src/pages/devops/containers/Pipelines/Detail/Sider/branch-sider.jsx b/src/pages/devops/containers/Pipelines/Detail/Sider/branch-sider.jsx
@@ -138,7 +138,7 @@ class BranchSider extends Base {
     if (this.store.isLoading || this.sonarqubeStore.isLoading)
       return (
         <div className={styles.loading}>
-          <Loading size="large" />
+          <Loading />
         </div>
       )
 

diff --git a/src/pages/devops/containers/Pipelines/Detail/Sider/pipeline-sider.jsx b/src/pages/devops/containers/Pipelines/Detail/Sider/pipeline-sider.jsx
@@ -136,7 +136,7 @@ class PipelineDetail extends Base {
     if (this.store.isLoading || this.sonarqubeStore.isLoading)
       return (
         <div className={styles.loading}>
-          <Loading size="large" />
+          <Loading />
         </div>
       )
 

diff --git a/src/pages/devops/containers/layout.jsx b/src/pages/devops/containers/layout.jsx
@@ -110,7 +110,7 @@ class DevOpsLayout extends Component {
     const { detail } = this.props.rootStore.workspace
 
     if (initializing) {
-      return <Loading className={styles.loading} size="large" />
+      return <Loading className={styles.loading} />
     }
 
     return (

diff --git a/src/pages/projects/components/Cards/ImageRunRecord/Item/index.jsx b/src/pages/projects/components/Cards/ImageRunRecord/Item/index.jsx
@@ -147,7 +147,7 @@ export default class ImageBuilderLastRun extends React.Component {
           <Icon name="templet" />
           <p>{imageName}</p>
         </div>
-        <Button onClick={this.handleDownload} type="primary" size="large">
+        <Button onClick={this.handleDownload} type="primary">
           {t('Download Artifact')}
         </Button>
       </div>

diff --git a/src/pages/projects/containers/Applications/Detail/TrafficManangement/index.jsx b/src/pages/projects/containers/Applications/Detail/TrafficManangement/index.jsx
@@ -92,7 +92,7 @@ class TrafficManangement extends React.Component {
     }
 
     if (isGraphLoading) {
-      return <Loading className={styles.loading} size="large" />
+      return <Loading className={styles.loading} />
     }
 
     return (

diff --git a/src/pages/projects/containers/Deployments/Detail/RevisionControl/index.jsx b/src/pages/projects/containers/Deployments/Detail/RevisionControl/index.jsx
@@ -129,7 +129,7 @@ class RevisionControl extends React.Component {
             [styles.checked]: isCur,
           })}
         >
-          {isCur && <Icon name="check" type="light" size="large" />}
+          {isCur && <Icon name="check" type="light" />}
         </div>
         <div>
           <div className={styles.title}>#{revision}</div>

diff --git a/src/pages/projects/containers/GrayRelease/Jobs/index.jsx b/src/pages/projects/containers/GrayRelease/Jobs/index.jsx
@@ -123,7 +123,7 @@ class Jobs extends React.Component {
     const { data, isLoading } = this.store.list
 
     if (isLoading) {
-      return <Loading className={styles.loading} size="large" />
+      return <Loading className={styles.loading} />
     }
 
     if (isEmpty(data)) {

diff --git a/src/pages/projects/containers/ImageBuilder/Detail/index.jsx b/src/pages/projects/containers/ImageBuilder/Detail/index.jsx
@@ -219,7 +219,7 @@ class ImageBuilderDetail extends Base {
     if (this.store.isLoading || this.s2iRunStore.isLoading)
       return (
         <div className={styles.loading}>
-          <Loading size="large" />
+          <Loading />
         </div>
       )
 

diff --git a/src/pages/projects/containers/layout.jsx b/src/pages/projects/containers/layout.jsx
@@ -113,7 +113,7 @@ class ProjectLayout extends Component {
     const { detail } = this.props.rootStore.workspace
 
     if (initializing) {
-      return <Loading className="ks-page-loading" size="large" />
+      return <Loading className="ks-page-loading" />
     }
 
     return (

diff --git a/src/pages/workspaces/containers/layout.jsx b/src/pages/workspaces/containers/layout.jsx
@@ -127,7 +127,7 @@ class WorkspaceLayout extends Component {
     const { detail, initializing } = this.props.rootStore.workspace
 
     if (initializing) {
-      return <Loading className={styles.loading} size="large" />
+      return <Loading className={styles.loading} />
     }
 
     return (