fix: Page access role check, app card version type label (#677)

Author: dongrui

src/App.jsx

@@ -46,8 +46,7 @@ const WrapRoute = ({ component: Comp, ...rest }) => {
 
   if (!_.isEmpty(acl)) {
     acl = [].concat(acl);
-
-    if (!_.some(acl, role => user[`is${_.capitalize(role)}`])) {
+    if (!_.some(acl, role => user[`is${role}`])) {
       return <Redirect to="/" />;
     }
   }

src/config/roles.js

@@ -25,10 +25,10 @@ export const roleMap = {
 // matching user provider's getter
 // i.e admin => user.isAdmin
 export const roleTypes = {
-  admin: 'admin',
+  admin: 'Admin',
   isv: 'ISV',
-  dev: 'dev',
-  user: 'normal'
+  dev: 'Dev',
+  user: 'Normal'
 };
 
 export default roles;

src/locales/zh/apps.json

@@ -77,12 +77,6 @@
   "No result for search word": "没有找到与关键字 「{{searchWord}}」 相关的应用",
   "File": "文件",
   "Successful upload": "上传成功",
-  "version_type_vmbased": "VM",
-  "version_type_helm": "Helm",
-  "version_type_saas": "SaaS",
-  "version_type_api": "API",
-  "version_type_native": "Native",
-  "version_type_serveless": "Serveless",
   "Upload configuration file": "上传配置文件",
   "Chart_yaml_Info": "Yaml文件，用于描述 Chart 的基本信息，包括名称版本等",
   "LICENSE_Info": "[可选] 文本格式的协议",

src/pages/Dashboard/Apps/Card/index.jsx

@@ -3,9 +3,10 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { withRouter } from 'react-router';
 
-import Status from 'components/Status';
 import { Image } from 'components/Base';
+import Status from 'components/Status';
 import { getPastTime } from 'src/utils';
+import { getVersionTypesName } from 'config/version-types';
 
 import styles from './index.scss';
 
@@ -28,7 +29,6 @@ export default class AppCard extends Component {
       status_time,
       app_version_types
     } = data;
-    const versions = app_version_types.split(',');
     return (
       <div
         className={classnames(styles.container, className)}
@@ -48,11 +48,9 @@ export default class AppCard extends Component {
         <pre className={styles.description}>{description}</pre>
         <div className={styles.deliverTypes}>
           <span>{t('Delivery type')}：</span>
-          {versions.map(type => (
-            <span key={type} className={styles.deliverType}>
-              {t(`version_type_${type}`)}
-            </span>
-          ))}
+          <span className={styles.deliverType}>
+            {(getVersionTypesName(app_version_types) || []).join(' ')}
+          </span>
         </div>
         <div>
           <span>{t('Updated At')}：</span>

src/pages/Dashboard/Apps/MyApps/index.jsx

@@ -37,7 +37,6 @@ export default class Apps extends Component {
     appStore.pageSize = 48;
     appStore.userId = user_id;
     await appStore.fetchAll();
-    await appVersionStore.fetchAll();
     this.setState({
       pageLoading: false
     });

src/stores/app/index.js

@@ -6,14 +6,15 @@ import { t } from 'i18next';
 import { useTableActions } from 'mixins';
 import Store from '../Store';
 
-const defaultStatus = ['draft', 'active', 'suspended'];
 const maxsize = 2 * 1024 * 1024;
 let sequence = 0; // app screenshot for sort
 
 @useTableActions
 class AppStore extends Store {
   sortKey = 'status_time';
 
+  defaultStatus = ['draft', 'active', 'suspended'];
+
   @observable apps = [];
 
   @observable homeApps = [];