Skip to content
This repository has been archived by the owner on Jun 6, 2024. It is now read-only.

Commit

Permalink
Resolve comments
Browse files Browse the repository at this point in the history
  • Loading branch information
@mslichao
mslichao committed May 9, 2019
1 parent e44a2ab commit 0f9d57a
Show file tree
Hide file tree
Showing 4 changed files with 101 additions and 93 deletions.
13 changes: 4 additions & 9 deletions src/webportal/src/app/user/fabric/userView/Table.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ import React, {useContext, useMemo} from 'react';

import {ShimmeredDetailsList, Selection, FontClassNames, ColumnActionsMode, DefaultButton} from 'office-ui-fabric-react';

import c from 'classnames';
import t from '../../../components/tachyons.scss';

import {toBool, getVirtualCluster} from './utils';

import Context from './Context';
Expand Down Expand Up @@ -123,16 +126,8 @@ export default function Table() {
event.stopPropagation();
editUser(user);
}
/** @type {React.CSSProperties} */
const wrapperStyle = {display: 'inline-block', verticalAlign: 'middle', width: '100%'};
const zeroPaddingRowFieldStyle = {
marginTop: -11,
marginBottom: -11,
marginLeft: -12,
marginRight: -8,
};
return (
<div style={Object.assign(wrapperStyle, zeroPaddingRowFieldStyle)} data-selection-disabled>
<div className={c([t.dib, t.vMid, t.w100])} style={{margin: '-11px -8px -11px -12px'}} data-selection-disabled>
<DefaultButton
onClick={onClick}
>
Expand Down
34 changes: 20 additions & 14 deletions src/webportal/src/app/user/fabric/userView/TopBar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,15 @@
import React, {useContext, useMemo, useState} from 'react';

import {CommandBarButton, SearchBox, CommandBar, ContextualMenuItemType} from 'office-ui-fabric-react';
import {PropTypes} from 'prop-types';
import {findIndex} from 'lodash';

import t from '../../../components/tachyons.scss';

import Context from './Context';
import Filter from './Filter';
import {toBool} from './utils';

/* eslint-disable react/prop-types */
function FilterButton({defaultRender: Button, ...props}) {
const {subMenuProps: {items}} = props;
const checkedItems = items.filter((item) => item.checked).map((item) => item.text);
Expand All @@ -38,26 +40,28 @@ function FilterButton({defaultRender: Button, ...props}) {
);
}

FilterButton.propTypes = {
defaultRender: PropTypes.elementType.isRequired,
subMenuProps: PropTypes.object.isRequired,
};

function KeywordSearchBox() {
const {filter, setFilter} = useContext(Context);
function onKeywordChange(keyword) {
const {admins, virtualClusters} = filter;
setFilter(new Filter(keyword, admins, virtualClusters));
}

/** @type {import('office-ui-fabric-react').IStyle} */
const rootStyles = {backgroundColor: 'transparent', alignSelf: 'center', width: 220};
return (
<SearchBox
underlined
placeholder="Filter by keyword"
styles={{root: rootStyles}}
styles={{root: [t.bgTransparent, t.selfCenter, {width: '220px'}]}}
value={filter.keyword}
onChange={onKeywordChange}
/>
);
}
/* eslint-enable react/prop-types */

function TopBar() {
const [active, setActive] = useState(true);
Expand All @@ -82,13 +86,15 @@ function TopBar() {
return {admins, virtualClusters};
}, [allUsers]);

const transparentStyles = {root: [t.bgTransparent]};

/**
* @type {import('office-ui-fabric-react').ICommandBarItemProps}
*/
const btnAddUser = {
key: 'addUser',
name: 'Add User',
buttonStyles: {root: {backgroundColor: 'transparent', height: '100%'}},
buttonStyles: transparentStyles,
iconProps: {
iconName: 'Add',
},
Expand All @@ -101,7 +107,7 @@ function TopBar() {
const btnImportCSV = {
key: 'importCSV',
name: 'Import CSV',
buttonStyles: {root: {backgroundColor: 'transparent', height: '100%'}},
buttonStyles: transparentStyles,
iconProps: {
iconName: 'Stack',
},
Expand All @@ -114,7 +120,7 @@ function TopBar() {
const btnRemove = {
key: 'remove',
name: 'Remove',
buttonStyles: {root: {backgroundColor: 'transparent', height: '100%'}},
buttonStyles: transparentStyles,
iconProps: {
iconName: 'UserRemove',
},
Expand All @@ -127,7 +133,7 @@ function TopBar() {
const btnRefresh = {
key: 'refresh',
name: 'Refresh',
buttonStyles: {root: {backgroundColor: 'transparent', height: '100%'}},
buttonStyles: transparentStyles,
iconProps: {
iconName: 'Refresh',
},
Expand Down Expand Up @@ -159,7 +165,7 @@ function TopBar() {
onClick={item.onClick}
iconProps={item.iconProps}
menuIconProps={item.menuIconProps}
styles={{root: {backgroundColor: 'transparent'}}}
styles={transparentStyles}
>
Filters
</CommandBarButton>
Expand All @@ -173,7 +179,7 @@ function TopBar() {
const btnClear = {
key: 'clear',
name: 'Clear',
buttonStyles: {root: {backgroundColor: 'transparent', height: '100%'}},
buttonStyles: {root: [t.bgTransparent, t.h100]},
iconOnly: true,
iconProps: {
iconName: 'Cancel',
Expand Down Expand Up @@ -231,7 +237,7 @@ function TopBar() {
return {
key: 'admin',
text: 'Admin',
buttonStyles: {root: {backgroundColor: 'transparent'}},
buttonStyles: transparentStyles,
iconProps: {
iconName: 'Clock',
},
Expand Down Expand Up @@ -298,7 +304,7 @@ function TopBar() {
return {
key: 'virtualCluster',
name: 'Virtual Cluster',
buttonStyles: {root: {backgroundColor: 'transparent'}},
buttonStyles: transparentStyles,
iconProps: {
iconName: 'CellPhone',
},
Expand Down Expand Up @@ -338,7 +344,7 @@ function TopBar() {
<CommandBar
items={topBarItems}
farItems={topBarFarItems}
styles={{root: {backgroundColor: 'transparent'}}}
styles={transparentStyles}
/>
{active ? <CommandBar
items={filterBarItems}
Expand Down
49 changes: 30 additions & 19 deletions src/webportal/src/app/user/fabric/userView/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,15 @@

import React, {useState, useEffect, useMemo, useRef} from 'react';

import {Fabric, Stack, initializeIcons} from 'office-ui-fabric-react';
import {Fabric, Stack, initializeIcons, Modal, getTheme} from 'office-ui-fabric-react';
import {debounce} from 'lodash';

import {MaskSpinnerLoading} from '../../../components/loading';
import {initTheme} from '../../../components/theme';
import MessageBox from '../components/MessageBox';

import t from '../../../components/tachyons.scss';

import Context from './Context';
import TopBar from './TopBar';
import Table from './Table';
Expand All @@ -32,10 +35,10 @@ import Pagination from './Pagination';
import Paginator from './Paginator';
import {getAllUsersRequest, removeUserRequest, updateUserVcRequest, updateUserAccountRequest, updateUserGithubPATRequest} from '../conn';

require('bootstrap/js/modal.js');
const userEditModalComponent = require('./user-edit-modal-component.ejs');
require('./user-edit-modal-component.scss');

initTheme();
initializeIcons();

export default function UserView() {
Expand Down Expand Up @@ -156,21 +159,22 @@ export default function UserView() {
});
};

const [showEditInfo, setShowEditInfo] = useState({isOpen: false, innerHtml: ''});

const editUser = (user) => {
showEditInfo(user.username, user.admin, user.virtualCluster, user.hasGithubPAT);
setShowEditInfo({
isOpen: true,
innerHtml: userEditModalComponent({
'username': user.username,
'isAdmin': user.admin,
'vcList': user.virtualCluster,
'hasGithubPAT': String(user.hasGithubPAT),
}),
});
};

const showEditInfo = (username, isAdmin, vcList, hasGithubPAT) => {
$('#modalPlaceHolder').html(userEditModalComponent({
'username': username,
'isAdmin': String(isAdmin),
'vcList': vcList,
'hasGithubPAT': String(hasGithubPAT),
updateUserVc,
updateUserAccount,
updateUserGithubPAT,
}));
$('#userEditModal').modal('show');
const hideEditUser = () => {
setShowEditInfo({isOpen: false, innerHtml: ''});
};

const updateUserInfoCallback = (data) => {
Expand All @@ -180,7 +184,7 @@ export default function UserView() {
showMessageBox({
text: 'Update user information successfully',
dismissedCallback: () => {
$('#userEditModal').modal('hide');
setShowEditInfo({isOpen: false, innerHtml: ''});
setAllUsers([]);
refreshAllUsers();
},
Expand Down Expand Up @@ -222,6 +226,7 @@ export default function UserView() {
window.updateUserVc = updateUserVc;
window.updateUserAccount = updateUserAccount;
window.updateUserGithubPAT = updateUserGithubPAT;
window.hideEditUser = hideEditUser;

const context = {
allUsers,
Expand All @@ -242,24 +247,30 @@ export default function UserView() {
editUser,
};

const {spacing} = getTheme();

return (
<Context.Provider value={context}>
<Fabric style={{height: '100%'}}>
<Stack verticalFill styles={{root: {position: 'relative'}}}>
<Fabric className={t.h100}>
<Stack verticalFill styles={{root: [t.relative]}}>
<Stack.Item>
<TopBar />
</Stack.Item>
<Stack.Item grow styles={{root: {height: 1, overflow: 'auto', backgroundColor: 'white', paddingTop: 15}}}>
<Stack.Item grow styles={{root: [t.overflowAuto, t.bgWhite, {paddingTop: spacing.m}]}}>
<Table />
</Stack.Item>
<Stack.Item>
<Paginator />
</Stack.Item>
</Stack>
</Fabric>
<Modal
isOpen={showEditInfo.isOpen}
styles={{main: [t.mw8, t.w90]}}>
<div dangerouslySetInnerHTML={{__html: showEditInfo.innerHtml}} />
</Modal>
{loading.show && <MaskSpinnerLoading label={loading.text} />}
{messageBox.text && <MessageBox text={messageBox.text} onDismiss={hideMessageBox} confirm={messageBox.confirm} onOK={messageBox.okCallback} onCancel={messageBox.cancelCallback} />}
<div id="modalPlaceHolder" />
</Context.Provider>
);
}
98 changes: 47 additions & 51 deletions src/webportal/src/app/user/fabric/userView/user-edit-modal-component.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,53 @@
<!-- Modal -->
<div id="userEditModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit information of <%= username %></h4>
</div>
<div class="modal-body">
<div class="box-header with-border user-edit-border">
<h3 class="box-title">Change Userinfo</h3>
</div>
<form id="form-update-account" class="form-register" onsubmit="updateUserAccount('<%= username %>'); return false;">
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" name="password" id="update-account-input-password" class="form-control" placeholder="******">
<div class="checkbox">
<label>
<% if (isAdmin === 'true') { %>
<input type="checkbox" name="admin" checked="checked" >Admin user</label>
<% } else { %>
<input type="checkbox" name="admin">Admin user</label>
<% } %>
</div>
<button class="btn btn-lg btn-primary btn-block" type="button" onclick="updateUserAccount('<%= username %>')">Change Userinfo</button>
</form>
<% if (isAdmin !== 'true') { %>
<div class="box-header with-border user-edit-border">
<h3 class="box-title">Update Virtual Clusters</h3>
</div>
<form id="form-update-virtual-cluster" class="form-register" onsubmit="updateUserVc('<%= username %>'); return false;">
<label for="inputVirtualCluster" class="sr-only">VirtualCluster</label>
<input type="text" name="virtualCluster" id="update-virtual-cluster-input-virtualCluster" class="form-control"
placeholder="Virtual Clusters (e.g. vc1,vc2)" value=<%= vcList %>>
<button class="btn btn-lg btn-primary btn-block" type="button" onclick="updateUserVc('<%= username %>')"> Update Virtual Clusters</button>
</form>
<% } %>
<div class="box-header with-border user-edit-border">
<h3 class="box-title">Update Github PAT</h3>
</div>
<form id="form-update-github-token" class="form-register" onsubmit="updateUserGithubPAT('<%= username %>'); return false;">
<label for="inputGithubPAT" class="sr-only">GithubPAT</label>
<input type="text" name="githubPAT" id="update-github-token-input-githubPAT" class="form-control"
placeholder=
<% if (hasGithubPAT === 'true') { %>
"******"
<% } else { %>
"N/A"
<% } %>
>
<button class="btn btn-lg btn-primary btn-block" type="button" onclick="updateUserGithubPAT('<%= username %>')">Update Github PAT</button>
</form>
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit information of <%= username %></h4>
</div>
<div class="modal-body">
<div class="box-header with-border user-edit-border">
<h3 class="box-title">Change Userinfo</h3>
</div>
<form id="form-update-account" class="form-register" onsubmit="updateUserAccount('<%= username %>'); return false;">
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" name="password" id="update-account-input-password" class="form-control" placeholder="******">
<div class="checkbox">
<label>
<% if (isAdmin === 'true') { %>
<input type="checkbox" name="admin" checked="checked" >Admin user</label>
<% } else { %>
<input type="checkbox" name="admin">Admin user</label>
<% } %>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button class="btn btn-lg btn-primary btn-block" type="button" onclick="updateUserAccount('<%= username %>')">Change Userinfo</button>
</form>
<% if (isAdmin !== 'true') { %>
<div class="box-header with-border user-edit-border">
<h3 class="box-title">Update Virtual Clusters</h3>
</div>
<form id="form-update-virtual-cluster" class="form-register" onsubmit="updateUserVc('<%= username %>'); return false;">
<label for="inputVirtualCluster" class="sr-only">VirtualCluster</label>
<input type="text" name="virtualCluster" id="update-virtual-cluster-input-virtualCluster" class="form-control"
placeholder="Virtual Clusters (e.g. vc1,vc2)" value=<%= vcList %>>
<button class="btn btn-lg btn-primary btn-block" type="button" onclick="updateUserVc('<%= username %>')"> Update Virtual Clusters</button>
</form>
<% } %>
<div class="box-header with-border user-edit-border">
<h3 class="box-title">Update Github PAT</h3>
</div>
<form id="form-update-github-token" class="form-register" onsubmit="updateUserGithubPAT('<%= username %>'); return false;">
<label for="inputGithubPAT" class="sr-only">GithubPAT</label>
<input type="text" name="githubPAT" id="update-github-token-input-githubPAT" class="form-control"
placeholder=
<% if (hasGithubPAT === 'true') { %>
"******"
<% } else { %>
"N/A"
<% } %>
>
<button class="btn btn-lg btn-primary btn-block" type="button" onclick="updateUserGithubPAT('<%= username %>')">Update Github PAT</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onclick="hideEditUser()">Close</button>
</div>
</div>

0 comments on commit 0f9d57a

Please sign in to comment.