Skip to content

Commit 9bf5dc3

Browse files
sunnywxsunnywx
authored
fix: Admin related styles issues (#485)
See: #436
1 parent fb1a386 commit 9bf5dc3

13 files changed

Lines changed: 164 additions & 216 deletions

File tree

‎src/components/Base/CodeMirror/index.jsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,27 @@ export default class CodeMirrorX extends React.Component {
1414
onChange: PropTypes.func,
1515
mode: PropTypes.string
1616
};
17+
1718
static defaultProps = {
1819
code: '',
1920
onChange: () => {},
2021
mode: 'yaml'
2122
};
2223

24+
componentDidMount() {
25+
this.refs.editor.getCodeMirror().refresh();
26+
}
27+
2328
render() {
24-
const { onChange, code, mode } = this.props;
29+
const { onChange, code, mode, ...rest } = this.props;
2530

26-
return <CodeMirror value={code} onChange={onChange} options={{ mode }} />;
31+
return (
32+
<CodeMirror
33+
value={code}
34+
onChange={onChange}
35+
options={{ mode, lineNumbers: true }}
36+
ref="editor"
37+
/>
38+
);
2739
}
2840
}

‎src/components/DetailCard/UserCard.jsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,21 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import { translate } from 'react-i18next';
4+
import { inject, observer } from 'mobx-react';
45

56
import Status from 'components/Status';
67
import TimeShow from 'components/TimeShow';
78
import CopyId from './CopyId';
89

10+
import { roleMap } from 'config/roles';
11+
912
import styles from './index.scss';
1013

1114
@translate()
15+
@inject(({ rootStore }) => ({
16+
user: rootStore.user
17+
}))
18+
@observer
1219
export default class UserCard extends React.Component {
1320
static propTypes = {
1421
userDetail: PropTypes.object.isRequired
@@ -19,13 +26,13 @@ export default class UserCard extends React.Component {
1926
};
2027

2128
render() {
22-
const { userDetail, t } = this.props;
29+
const { userDetail, user, t } = this.props;
2330

2431
return (
2532
<div className={styles.detailCard}>
2633
<div className={styles.title}>
2734
<div className={styles.name} title={userDetail.username}>
28-
{userDetail.username}
35+
{user.username}
2936
</div>
3037
<CopyId id={userDetail.user_id} />
3138
</div>
@@ -36,7 +43,7 @@ export default class UserCard extends React.Component {
3643
</li>
3744
<li>
3845
<span className={styles.name}>{t('Role')}</span>
39-
{userDetail.role}
46+
{t(roleMap[userDetail.role] || 'None')}
4047
</li>
4148
<li>
4249
<span className={styles.name}>{t('Email')}</span>

‎src/components/Layout/SideNav/navMap.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -47,18 +47,18 @@ export const getNavs = role => [
4747
active: 'dashboard',
4848
title: 'Dashboard'
4949
},
50+
{
51+
link: '/dashboard/repos',
52+
iconName: 'appcenter',
53+
active: 'repo',
54+
title: 'Platform'
55+
},
5056
{
5157
link: '/dashboard/apps',
5258
iconName: 'components',
5359
active: 'app',
5460
title: role === 'developer' ? 'My Apps' : 'Store'
5561
},
56-
{
57-
link: '/dashboard/repos',
58-
iconName: 'shield',
59-
active: 'repo',
60-
title: 'Platform'
61-
},
6262
{
6363
link: '/dashboard/users',
6464
iconName: 'group',

‎src/components/TimeShow/index.jsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { Component, Fragment } from 'react';
22
import PropTypes from 'prop-types';
33

44
import { formatTime } from 'utils';
5+
56
import styles from './index.scss';
67

78
export default class TimeShow extends Component {
@@ -17,12 +18,15 @@ export default class TimeShow extends Component {
1718
render() {
1819
const { time, type } = this.props;
1920

21+
const trans = {
22+
listTime: 'YYYY/MM/DD',
23+
detailTime: 'YYYY/MM/DD HH:mm:ss',
24+
lineTime: 'HH:mm:ss'
25+
};
26+
2027
return (
2128
<Fragment>
22-
<div className={styles[type]}>{formatTime(time)}</div>
23-
{type !== 'detailTime' && (
24-
<div className={styles[type]}>{formatTime(time, 'HH:mm:ss')}</div>
25-
)}
29+
<div className={styles[type]}>{formatTime(time, trans[type])}</div>
2630
</Fragment>
2731
);
2832
}

‎src/config/roles.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
const roles = [
2+
{
3+
name: 'Administrator',
4+
value: 'global_admin',
5+
description:
6+
'Software developer, one who programs computers or designs the system to match the requirements of a systems analyst'
7+
},
8+
{
9+
name: 'Developer',
10+
value: 'developer',
11+
description:
12+
'Software developer, one who programs computers or designs the system to match the requirements of a systems analyst'
13+
},
14+
{
15+
name: 'Normal User',
16+
value: 'user',
17+
description:
18+
'Software developer, one who programs computers or designs the system to match the requirements of a systems analyst'
19+
}
20+
];
21+
22+
export const roleMap = {
23+
global_admin: 'Administrator',
24+
developer: 'Developer',
25+
user: 'Normal User'
26+
};
27+
28+
export default roles;

‎src/pages/Admin/Apps/Deploy/index.jsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -269,9 +269,13 @@ export default class AppDeploy extends Component {
269269
</div>
270270

271271
<div className={styles.moduleTitle}>2. {t('Deploy Settings')}</div>
272-
{yamlStr && (
273-
<CodeMirror code={yamlStr} onChange={changeYamlStr} options={{ mode: 'yaml' }} />
274-
)}
272+
273+
<div className={styles.editorWrap}>
274+
<div className={styles.fileName}>values.yaml</div>
275+
<div className={styles.editor}>
276+
{yamlStr && <CodeMirror code={yamlStr} onChange={changeYamlStr} />}
277+
</div>
278+
</div>
275279

276280
<div className={styles.submitBtnGroup}>
277281
<Button type={`primary`} className={`primary`} htmlType="submit" disabled={btnDisabled}>

‎src/pages/Admin/Apps/Deploy/index.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,3 +133,13 @@
133133
}
134134
}
135135
}
136+
137+
.editorWrap {
138+
display: flex;
139+
.fileName{
140+
color: $N500;
141+
}
142+
.editor{
143+
width: 90%;
144+
}
145+
}

‎src/pages/Admin/Clusters/Detail/index.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -208,7 +208,7 @@ export default class ClusterDetail extends Component {
208208
>
209209
<div className="formContent">
210210
<div className="inputItem">
211-
<CodeMirror code={env} onChange={changeEnv} options={{ mode: 'yaml' }} />
211+
<CodeMirror code={env} onChange={changeEnv} mode="yaml" />
212212
</div>
213213
</div>
214214
</Modal>

‎src/pages/Admin/Users/GroupCard/index.jsx‎

Lines changed: 40 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
1-
import React, { PureComponent } from 'react';
1+
import React, { Component } from 'react';
22
import PropTypes from 'prop-types';
33
import { translate } from 'react-i18next';
44
import classnames from 'classnames';
55

6+
import { find } from 'lodash';
7+
68
import styles from './index.scss';
79

810
@translate()
9-
export default class GroupCard extends PureComponent {
11+
export default class GroupCard extends Component {
1012
static propTypes = {
1113
groups: PropTypes.array,
1214
selectValue: PropTypes.string,
@@ -15,20 +17,52 @@ export default class GroupCard extends PureComponent {
1517

1618
static defaultProps = {
1719
groups: [],
18-
selectValue: ''
20+
selectValue: '' // default select
1921
};
2022

23+
constructor(props) {
24+
super(props);
25+
26+
this.state = {
27+
curVal: props.selectValue || props.groups[0].value
28+
};
29+
}
30+
31+
componentDidMount() {
32+
const { groups } = this.props;
33+
const { curVal } = this.state;
34+
35+
this.props.selectCard(find(groups, { value: curVal }));
36+
}
37+
38+
shouldComponentUpdate(nextProps, nextState) {
39+
return nextState.curVal !== this.state.curVal;
40+
}
41+
42+
handleChange = ({ value }) => {
43+
this.setState({ curVal: value });
44+
};
45+
46+
componentDidUpdate() {
47+
const { groups } = this.props;
48+
const { curVal } = this.state;
49+
50+
this.props.selectCard(find(groups, { value: curVal }));
51+
}
52+
2153
render() {
22-
const { groups, selectCard, selectValue, t } = this.props;
54+
const { groups, t } = this.props;
55+
const { curVal } = this.state;
56+
2357
return (
2458
<ul className={styles.groupCard}>
2559
{groups.map((data, index) => (
2660
<li
2761
key={data.id || index}
2862
onClick={() => {
29-
selectCard(data);
63+
this.handleChange(data);
3064
}}
31-
className={classnames({ [styles.current]: data.value === selectValue })}
65+
className={classnames({ [styles.current]: data.value === curVal })}
3266
>
3367
<div className={styles.name}>{t(data.name)}</div>
3468
{data.id && <div className={styles.id}>id:{data.id}</div>}

0 commit comments

Comments
 (0)