fix: Fix some bug in App template

src/actions/openpitrix.js

@@ -154,6 +154,7 @@ export default {
         },
         store,
         modal: TemplateEditModal,
+        success,
         ...props,
       })
     },

src/locales/zh/app.js

@@ -113,7 +113,6 @@ export default {
     'KubeSphere 提供全生命周期的应用管理，可以上传或者创建新的应用模板，并且快速部署它们，也可以通过应用商店进行发布应用。',
   UPLOAD_HELM_TITLE: '上传 Helm 配置文件',
   UPLOAD_HELM_DESC: '上传已有的 Helm  Chart ',
-  'Edit App Informatio': '编辑应用信息',
   EDIT_APP_DESC: '对应用的基本信息进行设置',
   'App Number': '应用编号',
   'App Version Types': '交付类型',

src/pages/appStore/components/AppInfo/ImageSlider/index.jsx

@@ -45,15 +45,10 @@ export default class ImageSlider extends React.PureComponent {
     super(props)
     this.state = {
       showOverlay: false,
-      selectedIdx: 0,
       currentIdx: props.defaultIdx || 0,
     }
   }
 
-  componentDidMount() {
-    this.startAnimation()
-  }
-
   componentDidUpdate(prevProps, prevState) {
     const { currentIdx } = this.state
     if (currentIdx !== prevState.currentIdx) {
@@ -65,12 +60,6 @@ export default class ImageSlider extends React.PureComponent {
     this.stopAnimation()
   }
 
-  startAnimation() {
-    if (this.props.images.length && !this.timer) {
-      // this.timer = setInterval(this.showNextPic, 2000)
-    }
-  }
-
   stopAnimation() {
     if (this.timer) {
       clearInterval(this.timer)
@@ -84,12 +73,11 @@ export default class ImageSlider extends React.PureComponent {
     this.stopAnimation()
     this.setState({
       showOverlay: true,
-      selectedIdx: parseInt(idx, 10) || 0,
+      currentIdx: parseInt(idx, 10) || 0,
     })
   }
 
   closeOverlay = () => {
-    this.startAnimation()
     this.setState({
       showOverlay: false,
     })
@@ -124,15 +112,12 @@ export default class ImageSlider extends React.PureComponent {
 
   goToIdx = idx => {
     this.stopAnimation()
-    this.setState({ currentIdx: idx }, () => {
-      this.startAnimation()
-    })
+    this.setState({ currentIdx: idx })
   }
 
   renderOverlay() {
-    const { showOverlay, selectedIdx } = this.state
-    const selectedPic = this.props.images[selectedIdx]
-
+    const { showOverlay, currentIdx } = this.state
+    const selectedPic = this.props.images[currentIdx]
     if (!showOverlay) {
       return null
     }

src/pages/appStore/components/AppInfo/index.jsx

@@ -32,10 +32,12 @@ export default class AppInfo extends React.PureComponent {
     app: PropTypes.object.isRequired,
     versions: PropTypes.array,
   }
+
   static defaultProps = {
     app: {},
     versions: [],
   }
+
   filterImages(images) {
     if (typeof images === 'string') {
       return images
@@ -48,8 +50,10 @@ export default class AppInfo extends React.PureComponent {
     }
     return []
   }
+
   renderVersionTable() {
     const { versions } = this.props
+
     return (
       <table className={styles.versions}>
         <thead>
@@ -77,6 +81,7 @@ export default class AppInfo extends React.PureComponent {
       </table>
     )
   }
+
   render() {
     const { className, app } = this.props
     const { abstraction, screenshots } = app

src/pages/appStore/components/AppList/index.jsx

@@ -102,7 +102,6 @@ export default class AppList extends React.PureComponent {
 
   render() {
     const { apps, isLoading, total, onFetchMore, title, className } = this.props
-
     return (
       <div className={classnames(styles.appList, className)}>
         {title && <p className="apps-title">{title}</p>}

src/pages/appStore/containers/Home/index.jsx

@@ -89,16 +89,12 @@ export default class Home extends React.Component {
       params.category_id = category
     }
 
-    await this.appStore.fetchList(
-      Object.assign(
-        {
-          limit: STORE_APP_LIMIT,
-          status: 'active',
-        },
-        params,
-        filters
-      )
-    )
+    await this.appStore.fetchList({
+      limit: STORE_APP_LIMIT,
+      status: 'active',
+      ...params,
+      ...filters,
+    })
 
     const { allApps, list } = this.appStore
 

src/pages/apps/components/Cards/ScreenshotsEdit/index.jsx

@@ -51,30 +51,43 @@ export default class Screenshots extends React.Component {
   uploadScreenshot = async (file, fileList) => {
     const { checkFile, handleFileByBase64Str } = this.props.fileStore
     const { uploadScreenshot } = this.props.store
-    const { detail } = this.props
+    const { detail, handleChange } = this.props
     const result = checkFile(file, 'screenshots')
 
     if (result) {
       this.setState({ error: result })
     } else {
       const index = fileList.indexOf(file)
+
       handleFileByBase64Str(file, async base64Str => {
         this.setState({ error: '' })
-        uploadScreenshot(base64Str, detail, index)
+        const screenshotStr = get(detail, 'screenshots', '')
+        const screenshotsList = screenshotStr ? screenshotStr.split(',') : []
+        const screenshots = await uploadScreenshot(
+          base64Str,
+          screenshotsList,
+          index
+        )
+        handleChange(screenshots, 'screenshots')
       })
     }
 
     return Promise.reject()
   }
 
+  deleteScreenshot = async (index, detail) => {
+    const { handleChange, store } = this.props
+    const { deleteScreenshot } = store
+    const screenshotsList = await deleteScreenshot(index, detail)
+    handleChange(screenshotsList, 'screenshots')
+  }
+
   render() {
     const { error } = this.state
-    const { detail, store } = this.props
-    const { deleteScreenshot } = store
+    const { detail } = this.props
     const screenshotStr = get(detail, 'screenshots', '')
     const screenshots = screenshotStr ? screenshotStr.split(',') : []
     const len = screenshots.length
-
     return (
       <div>
         <div className={styles.title}>{t('App Screenshots')}</div>
@@ -84,7 +97,11 @@ export default class Screenshots extends React.Component {
               <li key={index}>
                 <Image src={item} isBase64Str />
                 <div className={styles.delete}>
-                  <label onClick={() => deleteScreenshot(index, detail)}>
+                  <label
+                    onClick={() => {
+                      this.deleteScreenshot(index, detail)
+                    }}
+                  >
                     <Icon name="trash" size={20} className={styles.icon} />
                     {t('Delete picture')}
                   </label>
@@ -116,7 +133,9 @@ export default class Screenshots extends React.Component {
               {len > 0 ? (
                 <label
                   className={styles.deleteAll}
-                  onClick={() => deleteScreenshot(-1, detail)}
+                  onClick={() => {
+                    this.deleteScreenshot(-1, detail)
+                  }}
                 >
                   {t('Delete all')}
                 </label>

src/pages/apps/components/Modals/AppEdit/index.jsx

@@ -19,13 +19,14 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { toJS } from 'mobx'
-import { get, set, pick, debounce } from 'lodash'
+import { get, set, pick, debounce, cloneDeep } from 'lodash'
 import { Columns, Column } from '@pitrix/lego-ui'
 import { Modal } from 'components/Base'
 
 import AppBaseEdit from 'apps/components/Forms/AppBaseEdit'
 import ScreenshotsEdit from 'apps/components/Cards/ScreenshotsEdit'
 import ReadmeEdit from 'apps/components/Cards/ReadmeEdit'
+
 import CategoryStore from 'stores/openpitrix/category'
 import FileStore from 'stores/openpitrix/file'
 
@@ -56,18 +57,27 @@ export default class AppEdit extends Component {
     this.fileStore = new FileStore()
 
     this.formRef = React.createRef()
+
+    this.state = {
+      detail: cloneDeep(toJS(this.props.detail)),
+    }
   }
 
   componentDidMount() {
     this.categoryStore.fetchList({ noLimit: true })
   }
 
   handleAppChange = debounce((value, name) => {
-    set(this.props.detail, name, value)
+    const { detail } = this.state
+    const newDetail = cloneDeep(detail)
+    set(newDetail, name, value)
+    this.setState({
+      detail: newDetail,
+    })
   }, 200)
 
   handleOk = async () => {
-    const fromData = pick(this.props.detail, [
+    const fromData = pick(this.state.detail, [
       'app_id',
       'name',
       'abstraction',
@@ -81,17 +91,23 @@ export default class AppEdit extends Component {
     form && form.validate(() => this.props.onOk(fromData))
   }
 
+  onCancel = () => {
+    this.props.onCancel()
+    this.props.success()
+  }
+
   render() {
-    const { visible, isSubmitting, onCancel, detail, ...rest } = this.props
+    const { visible, isSubmitting, onCancel, ...rest } = this.props
     const categories = toJS(get(this.categoryStore, 'list.data', []))
+    const { detail } = this.state
 
     return (
       <Modal
         {...rest}
         className={styles.modal}
         bodyClassName={styles.body}
         onOk={this.handleOk}
-        onCancel={onCancel}
+        onCancel={this.onCancel}
         visible={visible}
         isSubmitting={isSubmitting}
         fullScreen

src/pages/workspaces/containers/Apps/Detail/index.jsx

@@ -90,10 +90,11 @@ export default class RoleDetail extends React.Component {
         action: 'manage',
         onClick: () =>
           this.trigger('openpitrix.template.edit', {
-            detail: toJS(detail),
+            detail,
             title: t('Edit App Information'),
             description: t('EDIT_APP_DESC'),
             icon: 'pen',
+            success: () => this.fetchData(),
           }),
       },
       {
@@ -120,14 +121,21 @@ export default class RoleDetail extends React.Component {
             appId: detail.app_id,
             type: 'ADD_VERSION',
             versionStore: this.versionStore,
+            success: () => this.fetchData(),
           }),
       },
       {
         key: 'delete',
         icon: 'trash',
         text: t('Delete'),
         action: 'manage',
-        onClick: () => this.showModal('deleteModule'),
+        onClick: () =>
+          this.trigger('resource.delete', {
+            store: this.store,
+            type: t('App Templates'),
+            detail,
+            success: () => this.routing.push(this.listUrl),
+          }),
       },
     ]
   }

src/pages/workspaces/containers/Apps/index.jsx

@@ -99,18 +99,21 @@ export default class Roles extends React.Component {
       title: t('Name'),
       dataIndex: 'app_id',
       width: '27%',
-      render: (app_id, app) => (
-        <Avatar
-          isApp
-          to={`/workspaces/${this.workspace}/apps/${app_id}`}
-          avatarType={'appIcon'}
-          avatar={app.icon}
-          iconLetter={app.name}
-          iconSize={40}
-          title={getDisplayName(app)}
-          desc={app.description}
-        />
-      ),
+      render: (app_id, app) => {
+        const avatar = this.getAvatar(app.icon)
+        return (
+          <Avatar
+            isApp
+            to={`/workspaces/${this.workspace}/apps/${app_id}`}
+            avatarType={'appIcon'}
+            avatar={avatar}
+            iconLetter={app.name}
+            iconSize={40}
+            title={getDisplayName(app)}
+            desc={app.description}
+          />
+        )
+      },
     },
     {
       title: t('Status'),
@@ -143,6 +146,14 @@ export default class Roles extends React.Component {
     },
   ]
 
+  getAvatar = icon => {
+    const baseUrl = this.props.store.baseUrl
+
+    return String(icon).startsWith('att-')
+      ? `/${baseUrl}/attachments/${icon}?filename=raw`
+      : icon
+  }
+
   render() {
     const { bannerProps, tableProps } = this.props
     return (