Skip to content
This repository has been archived by the owner on May 19, 2020. It is now read-only.

Commit

Permalink
Merge 064fffe into 30377ee
Browse files Browse the repository at this point in the history
  • Loading branch information
Marco Segreto committed Jul 8, 2016
2 parents 30377ee + 064fffe commit a6d1e09
Show file tree
Hide file tree
Showing 7 changed files with 131 additions and 127 deletions.
14 changes: 6 additions & 8 deletions static_src/components/app_list.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,14 +81,12 @@ export default class AppList extends React.Component {
<table sortable>
<thead>
<tr>
{ this.columns.map((column) => {
return (
<th column={ column.label } className={ column.key }
key={ column.key }>
{ column.label }
</th>
)
})}
{ this.columns.map((column) =>
<th column={ column.label } className={ column.key }
key={ column.key }>
{ column.label }
</th>
)}
</tr>
</thead>
<tbody>
Expand Down
19 changes: 10 additions & 9 deletions static_src/components/app_page.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export default class AppPage extends React.Component {
<div>
<h2>{ this.state.app.name }</h2>
<section className={this.styler('section-card')}>
<h3>About</h3>
<h3>About this application</h3>
<table>
<tbody>
<tr>
Expand Down Expand Up @@ -100,10 +100,9 @@ export default class AppPage extends React.Component {
</tbody>
</table>
<aside>
<p>To start or stop an app, view the <a
<p>To start or stop an app, follow the <a
href="https://docs.cloudfoundry.org/devguide/deploy-apps/deploy-app.html"
target="_blank">
<span>&nbsp;</span>deployment guide</a> for more information.
target="_blank">Cloud Foundry deployment guide.</a>
</p>
</aside>
</section>
Expand All @@ -113,19 +112,21 @@ export default class AppPage extends React.Component {
</section>
<section className={this.styler("section-card")}>
<h3>Services</h3>
<p>To bind or unbind a service instance to an app view<a
<p>To bind or unbind a service instance to an app, follow the <a
href="https://docs.cloud.gov/apps/managed-services/#bind-the-service-instance"
target="_blank">
<span>&nbsp;</span>managed services guide</a> for more information.
target="_blank">managed services guide</a>.
</p>
</section>
<section className={this.styler("section-card")}>
<h3>Events</h3>
<p>Event are currently available at <a href={ this.eventsLink(this.state.app.name) }>logs.cloud.gov</a></p>
<p><a href={ this.eventsLink(this.state.app.name) }>
View this app’s events on logs.cloud.gov.</a>
</p>
</section>
<section className={this.styler("section-card")}>
<h3>Logs</h3>
<p>Logs are currently available at <a href={ this.logsLink(this.state.app.name) }>logs.cloud.gov</a></p>
<p><a href={ this.logsLink(this.state.app.name) }>
View this app’s logs on logs.cloud.gov.</a></p>
</section>
</div>
);
Expand Down
9 changes: 4 additions & 5 deletions static_src/components/route_list.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ function stateSetter(appGuid) {

return {
routes: appRoutes
}
};
}

export default class RouteList extends React.Component {
Expand Down Expand Up @@ -48,7 +48,7 @@ export default class RouteList extends React.Component {
}

render() {
var content = <h4 className="test-none_message">No routes</h4>;
let content = <h4 className="test-none_message">No routes</h4>;

if (this.state.routes.length) {
content = (
Expand Down Expand Up @@ -77,10 +77,9 @@ export default class RouteList extends React.Component {
<div className={ this.styler('tableWrapper') }>
{ content }
<aside>
<p>To modify, create or delete a route, view <a
<p>To create, modify, or delete a route for an app, follow the <a
href="https://docs.cloud.gov/apps/custom-domains/#application-routes"
target="_blank">
<span>&nbsp;</span>application routes</a> for more information.
target="_blank">application routes guide</a>.
</p>
</aside>
</div>
Expand Down
27 changes: 15 additions & 12 deletions static_src/components/service_instance_list.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,16 +90,18 @@ export default class ServiceInstanceList extends React.Component {
content = <Loading text="Loading service instances" />;
} else if (this.state.serviceInstances.length) {
content = (
<div>
<p><em>
To create service instances for this space, use this org’s marketplace (at left or on the command line). Then bind instances to apps using the command line. (<a href="https://docs.cloud.gov/apps/managed-services/">Learn about using service instances and marketplaces</a>.)
</em></p>
<table>
<thead>
<tr>
{ this.columns.map((column) => {
return (
<th column={ column.label } className={ column.key }
key={ column.key }>
{ column.label }</th>
)
})}
{ this.columns.map((column) =>
<th column={ column.label } className={ column.key }
key={ column.key }>
{ column.label }</th>
)}
</tr>
</thead>
<tbody>
Expand All @@ -115,11 +117,11 @@ export default class ServiceInstanceList extends React.Component {
</td>
<td column="Delete" style={specialtdStyles}>
<span>
<div style={{float: 'left'}}>
<div style={{ float: 'left' }}>
<Button
classes={ ["test-delete_instance",
classes={ ['test-delete_instance',
(instance.confirmDelete) ?
'' : this.styler("usa-button-secondary"),
'' : this.styler('usa-button-secondary'),
(instance.confirmDelete) ?
this.styler('usa-button-disabled') : '']}
onClickHandler={ this._handleDeleteConfirmation.bind(
Expand All @@ -134,10 +136,11 @@ export default class ServiceInstanceList extends React.Component {
</span>
</td>
</tr>
)
})}
);
})}
</tbody>
</table>
</div>
);
}

Expand Down
77 changes: 35 additions & 42 deletions static_src/components/service_list.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,12 @@
*/

import React from 'react';
import Reactable from 'reactable';

import ServicePlanList from './service_plan_list.jsx';

import createStyler from '../util/create_styler';
import tableStyles from 'cloudgov-style/css/base.css';

var Table = Reactable.Table,
Thead = Reactable.Thead,
Th = Reactable.Th,
Tr = Reactable.Tr,
Td = Reactable.Td;

export default class ServiceList extends React.Component {
constructor(props) {
Expand All @@ -28,11 +22,11 @@ export default class ServiceList extends React.Component {
}

componentWillReceiveProps(nextProps) {
this.setState({services: nextProps.initialServices});
this.setState({ services: nextProps.initialServices });
}

get columns() {
var columns = [
const columns = [
{ label: 'Name', key: 'label' },
{ label: 'Description', key: 'description' },
{ label: 'Date Created', key: 'created_at' }
Expand All @@ -42,48 +36,47 @@ export default class ServiceList extends React.Component {
}

get rows() {
var rows = this.state.services;
const rows = this.state.services;
return rows;
}

render() {
var content = <h4 className="test-none_message">No services</h4>;
let content = <h4 className="test-none_message">No services</h4>;
if (this.state.services.length) {
content = (
<table>
<thead>
<tr>
{ this.columns.map((column) => {
return (
<div>
<table>
<thead>
<tr>
{ this.columns.map((column) =>
<th className={ column.key } key={ column.key }>
{ column.label }
</th>
)
})}
</tr>
</thead>
<tbody>
{ this.rows.map((row) => {
return [
<tr key={ row.guid }>
{ this.columns.map((rowcolumn) => {
return (
<td key={ rowcolumn.key }><span>
{ row[rowcolumn.key] }
</span></td>
)
})}
</tr>,
<tr colSpan="3">
<td colSpan="3">
<ServicePlanList initialServiceGuid={ row.guid }
initialServicePlans={ row.servicePlans } />
</td>
</tr>
]
})}
</tbody>
</table>
)}
</tr>
</thead>
<tbody>
{ this.rows.map((row) =>
[
<tr key={ row.guid }>
{ this.columns.map((rowcolumn) =>
<td key={ rowcolumn.key }><span>
{ row[rowcolumn.key] }
</span></td>
)}
</tr>,
<tr colSpan="3">
<td colSpan="3">
<ServicePlanList initialServiceGuid={ row.guid }
initialServicePlans={ row.servicePlans }
/>
</td>
</tr>
]
)}
</tbody>
</table>
</div>
);
}

Expand All @@ -101,4 +94,4 @@ ServiceList.propTypes = {

ServiceList.defaultProps = {
initialServices: []
}
};
102 changes: 61 additions & 41 deletions static_src/components/user_list.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,56 +50,76 @@ export default class UserList extends React.Component {
return columns;
}

get userTypePretty() {
return (this.state.userType === 'org_users') ? 'Organization' : 'Space';
}

render() {
let content = <h4 className="test-none_message">No users</h4>;

if (this.state.users.length) {
content = (
<table sortable={ true }>
<thead>
<tr>
{ this.columns.map((column) => {
return (
<div>
<p><em>
{ this.userTypePretty } Managers can change these roles. For details about these roles, see <a href="https://docs.cloudfoundry.org/concepts/roles.html#roles">Cloud Foundry roles and permissions</a>. To invite a new user, see <a href="https://docs.cloud.gov/apps/managing-teammates/">Managing Teammates</a>.
</em></p>

<p><em><strong>To add or remove a role:</strong><br />
Only { this.userTypePretty } Managers have permission to change these roles. To change a role, click a checkbox and wait a moment for the request to process, then see what happens:
</em></p>
<ul>
<li><em>If you tried adding a role and this was successful, the checkbox will become checked (and you won’t get an error message).</em></li>
<li><em>If you tried adding a role but didn’t have permission, the checkbox won’t update.</em></li>
<li><em>If you tried removing a role and this was successful, the checkbox will become unchecked (and you won’t get an error message).</em></li>
<li><em>If you tried removing a role but didn’t have permission, the checkbox will become unchecked and you’ll get an error message (“You are not authorized to perform the requested action”).</em></li>
</ul>
<p><em>
<a href="https://github.com/18F/cg-deck/issues/409">We’ll improve this.</a>
</em></p>
<table sortable={ true }>
<thead>
<tr>
{ this.columns.map((column) =>
<th column={ column.label } className={ column.key }
key={ column.key }>
{ column.label }</th>
)
})}
</tr>
</thead>
<tbody>
{ this.state.users.map((user) => {
var actions;
if (this.props.onRemove) {
actions = (
<td column="Actions">
<Button
classes={[this.styler('usa-button-secondary')]}
onClickHandler={ this._handleDelete.bind(this, user.guid) }
label="delete">
<span>Remove User From Org</span>
</Button>
</td>
);
}
return ([
<tr key={ user.guid }>
<td column="Name"><span>{ user.username }</span></td>
<td column="Permissions" key={ `${user.guid}-role` }>
<UserRoleListControl
initialUserType={ this.state.userType }
onAddPermissions={ this.props.onAddPermissions }
onRemovePermissions={ this.props.onRemovePermissions }
user={ user }
/>
</td>
<td column="Date Created">{ formatDateTime(user.created_at) }</td>
{ actions }
)}
</tr>
])
})}
</tbody>
</table>
</thead>
<tbody>
{ this.state.users.map((user) => {
let actions;
if (this.props.onRemove) {
actions = (
<td column="Actions">
<Button
classes={[this.styler('usa-button-secondary')]}
onClickHandler={ this._handleDelete.bind(this, user.guid) }
label="delete">
<span>Remove User From Org</span>
</Button>
</td>
);
}
return ([
<tr key={ user.guid }>
<td column="Name"><span>{ user.username }</span></td>
<td column="Permissions" key={ `${user.guid}-role` }>
<UserRoleListControl
initialUserType={ this.state.userType }
onAddPermissions={ this.props.onAddPermissions }
onRemovePermissions={ this.props.onRemovePermissions }
user={ user }
/>
</td>
<td column="Date Created">{ formatDateTime(user.created_at) }</td>
{ actions }
</tr>
]);
})}
</tbody>
</table>
</div>
);
}

Expand Down

0 comments on commit a6d1e09

Please sign in to comment.