Skip to content

Commit 8b1c540

Browse files
author
Jennings Zhang
authored
Merge pull request #258 from FNNDSC/outreachy
Outreachy
2 parents e5e3dac + a3fb9d2 commit 8b1c540

File tree

21 files changed

+570
-221
lines changed

21 files changed

+570
-221
lines changed

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,4 @@ yarn-error.log*
2828
.cache/
2929
.yarnrc
3030
yarn-error.log
31-
.history
31+
.history

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"dependencies": {
2323
"@babel/eslint-parser": "^7.14.7",
2424
"@babel/preset-react": "^7.14.5",
25-
"@fnndsc/chrisstoreapi": "^2.0.2",
25+
"@fnndsc/chrisstoreapi": "^3.0.1",
2626
"@patternfly/patternfly": "^4.59.1",
2727
"@patternfly/react-core": "^4.75.2",
2828
"@patternfly/react-icons": "^4.7.16",

‎src/components/Button/index.jsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,22 @@ import PropTypes from 'prop-types';
44
import { useHistory } from 'react-router-dom';
55
import './button.css';
66

7-
const ButtonComponent = ({
8-
variant,
9-
onClick,
10-
loading,
11-
toRoute,
12-
children,
13-
type,
14-
}) => {
7+
const ButtonComponent = ({ variant, onClick, loading, toRoute, children, type }) => {
158
const history = useHistory();
16-
window.scrollTo(0, 0);
9+
1710
return (
1811
<div>
1912
<Button
2013
isLoading={loading}
2114
variant={variant}
22-
onClick={toRoute ? () => history.push(toRoute) : onClick}
15+
onClick={
16+
toRoute
17+
? () => {
18+
history.push(toRoute);
19+
window.scrollTo(0, 0);
20+
}
21+
: onClick
22+
}
2323
className="other-button"
2424
type={type}
2525
>
@@ -32,7 +32,7 @@ ButtonComponent.propTypes = {
3232
variant: PropTypes.string,
3333
onClick: PropTypes.func,
3434
loading: PropTypes.bool,
35-
toRoute: PropTypes.string
35+
toRoute: PropTypes.string,
3636
};
3737

3838
export default ButtonComponent;

‎src/components/Dashboard/Dashboard.jsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import "./Dashboard.css";
77

88
import Button from "../Button";
99
import DashPluginCardView from "./components/DashPluginCardView/DashPluginCardView";
10-
import DashTeamView from "./components/DashTeamView/DashTeamView";
1110
import DashGitHubView from "./components/DashGitHubView/DashGitHubView";
1211
import ChrisStore from "../../store/ChrisStore";
1312
import ErrorNotification from "../Notification";
@@ -149,7 +148,7 @@ class Dashboard extends Component {
149148
</GridItem>
150149

151150
<GridItem xs={12}>
152-
<DashTeamView plugins={pluginList} />
151+
153152
</GridItem>
154153
</Grid>
155154
</GridItem>

‎src/components/Dashboard/components/DashCollaborator/DashCollaboratorView.css‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
.dash-text-div {
2+
padding-top: 6px;
3+
}
4+
5+
.card-footer{
6+
color: #0088ce;
7+
}
8+
9+
.pf-c-card__title {
10+
font-size: larger;
11+
}
12+
13+
.card-body-empty {
14+
padding: 10px !important;
15+
background: linear-gradient(
16+
#72767b,
17+
#72767b 225px,
18+
#393f44 225px,
19+
#393f44 325px);
20+
min-height: 375px;
21+
color: white;
22+
}
23+
24+
.card-body-header-text {
25+
text-align: center;
26+
font-weight: bold;
27+
}
28+
29+
.card-body-subhead {
30+
text-align: center;
31+
}
32+
33+
.card-body-content-parent {
34+
display: flex;
35+
}
36+
37+
.card-body-content-child-right {
38+
padding: 10px 30px 0 60px;
39+
font-size: 1.2em;
40+
}
41+
42+
.card-view-row {
43+
display: flex;
44+
flex-direction: row;
45+
flex-wrap: wrap;
46+
width: 100%;
47+
gap: 10px;
48+
}
49+
50+
.card-view-add-plugin {
51+
text-align: center;
52+
padding: 33px !important;
53+
}
54+
.card-view-add-collaborator {
55+
text-align: center;
56+
float:right;
57+
}
58+
59+
60+
61+
.card-view-title{
62+
display: flex;
63+
align-items: center;
64+
justify-content: space-between;
65+
padding: 10px 20px !important;
66+
}
67+
.card-view-grid{
68+
margin: 0 auto;
69+
}
70+
.card-view-kebob .dropdown-menu {
71+
margin-right: 5px;
72+
min-width: 100px;
73+
}
74+
75+
.card-view-plugin-tag {
76+
/* color */
77+
color: #8b8d8f;
78+
color: var(--pf-black-500);
79+
80+
/* display */
81+
display: inline-block;
82+
margin: 0 0.5em;
83+
padding: 0 0.5em;
84+
85+
/* border */
86+
border-color: #8b8d8f;
87+
border: 1px solid var(--pf-black-500);
88+
border-radius: 4px;
89+
90+
/* font */
91+
font-weight: 600;
92+
font-size: 12px;
93+
}
94+
95+
.card-view-app-type {
96+
font-size: 14px;
97+
}
98+
99+
.card-info-points {
100+
margin: 0.5em 0;
101+
font-size: 0.8em;
102+
font-weight: bold;
103+
color: gray;
104+
}
105+
106+
.pf-c-card__title {
107+
font-size: larger;
108+
}
109+
.pf-c-dropdown__toggle {
110+
padding-right: 0 !important;
111+
}

‎src/components/Dashboard/components/DashCollaborator/DashCollaboratorView.jsx‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
/* eslint-disable react/jsx-no-undef */
2+
/* eslint-disable react/no-unused-state */
3+
import React, { Component } from 'react';
4+
import PropTypes from 'prop-types'
5+
import {
6+
CardBody,
7+
Card,
8+
Grid,
9+
GridItem,
10+
CardFooter,
11+
Button,
12+
} from '@patternfly/react-core';
13+
import Client from '@fnndsc/chrisstoreapi';
14+
import { PlusCircleIcon } from '@patternfly/react-icons';
15+
import ChrisStore from '../../../../store/ChrisStore';
16+
import './DashCollaboratorView.css';
17+
import UserTable from './DashTeamView';
18+
19+
class DashCollaboratorView extends Component {
20+
constructor(props) {
21+
super(props);
22+
this.state = {
23+
collaborators: [],
24+
errors: [],
25+
26+
};
27+
const storeURL = process.env.REACT_APP_STORE_URL;
28+
const auth = { token: props.store.get('authToken') };
29+
this.client = new Client(storeURL, auth);
30+
31+
}
32+
33+
async componentDidMount() {
34+
// eslint-disable-next-line react/destructuring-assignment
35+
const { pluginName } = this.props.match.params;
36+
try {
37+
const pluginMeta = await this.fetchPluginMeta(pluginName);
38+
const collaboratorList = await this.fetchPluginCollaborators(pluginMeta);
39+
40+
41+
this.setState({
42+
collaborators:[...collaboratorList]
43+
44+
});
45+
} catch (error) {
46+
this.setState((prev) => ({
47+
loading: false,
48+
errors: [...prev.errors, error]
49+
}));
50+
}
51+
}
52+
53+
showNotifications = (error) => {
54+
this.setState((prev) => ({
55+
errors: [...prev.errors, error]
56+
}));
57+
}
58+
// eslint-disable-next-line react/destructuring-assignment
59+
60+
/**
61+
* Fetch all versions of a plugin.
62+
* @param {PluginMeta} pluginMeta
63+
* @returns {Promise<any[]>} Collaborators of the plugin
64+
*/
65+
// eslint-disable-next-line class-methods-use-this
66+
async fetchPluginMeta(pluginName) {
67+
68+
const metas = await this.client.getPluginMetas({ name_exact: pluginName, limit: 1 });
69+
return metas.getItems().shift();
70+
71+
}
72+
73+
// eslint-disable-next-line class-methods-use-this
74+
async fetchPluginCollaborators(pluginMeta) {
75+
const collabitems = (await pluginMeta.getCollaborators()).getItems();
76+
const collablist= await collabitems.map((collaborator, index) => collabitems[index].data)
77+
const collaboratorlist=await collablist.map((collaborator, index) => collabitems[index])
78+
return Array.from(collaboratorlist.values())
79+
80+
;
81+
}
82+
83+
render() {
84+
85+
const {collaborators ,errors} = this.state;
86+
87+
88+
return (
89+
<>
90+
{
91+
errors.map((error, index) => (
92+
<ErrorNotification
93+
key={`notif-${error.message}`}
94+
title="Error"
95+
message={error.message}
96+
position='top-right'
97+
variant='danger'
98+
closeable
99+
onClose={() => {
100+
errors.splice(index)
101+
this.setState({ errors })
102+
}}
103+
/>
104+
))
105+
}
106+
<Grid>
107+
<GridItem sm={12}>
108+
109+
<Card>
110+
<CardBody>
111+
<h3>Collaborators</h3>
112+
<div>
113+
<Button variant="primary" className="card-view-add-collaborator">
114+
<PlusCircleIcon type="pf" style={{ margin: '0 1em 0 0' }} />
115+
<span>Add Collaborator</span>
116+
</Button>
117+
<h4> Use this area, to add and manage collaborators to help you
118+
with this plugin.</h4>
119+
120+
</div>
121+
122+
123+
124+
<UserTable collaborators={collaborators} />
125+
</CardBody>
126+
<CardFooter className="card-footer">
127+
128+
</CardFooter>
129+
130+
131+
</Card>
132+
133+
134+
</GridItem>
135+
136+
</Grid>
137+
</>
138+
139+
);
140+
}
141+
}
142+
DashCollaboratorView.propTypes = {
143+
// eslint-disable-next-line react/no-unused-prop-types
144+
collaborators: PropTypes.arrayOf(PropTypes.object),
145+
146+
};
147+
148+
DashCollaboratorView.defaultProps = {
149+
collaborators: []
150+
};
151+
152+
153+
154+
export default ChrisStore.withStore(DashCollaboratorView);

‎src/components/Dashboard/components/DashCollaborator/DashTeamView.jsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React from 'react'
2+
import {Grid,GridItem,
3+
} from '@patternfly/react-core';
4+
5+
const UserTable = props => (
6+
<Grid>
7+
<GridItem sm={12}>
8+
9+
<table
10+
className="pf-c-table pf-m-grid-md"
11+
12+
>
13+
<thead>
14+
<tr>
15+
<th>Usename</th>
16+
<th>Role</th>
17+
<th>Actions</th>
18+
</tr>
19+
</thead>
20+
21+
<tbody>
22+
{props.collaborators.length > 0 ? (
23+
// eslint-disable-next-line react/destructuring-assignment
24+
props.collaborators.map( collaborator => (
25+
<tr key={ collaborator.id}>
26+
27+
<td>{collaborator.data.username}</td>
28+
<td>{collaborator.data.role==='O'? 'Owner' :'Maintainer'}</td>
29+
30+
</tr>
31+
))
32+
):
33+
34+
35+
(
36+
<tr>
37+
<td colSpan={3}>Add more collaborators</td>
38+
</tr>
39+
)}
40+
</tbody>
41+
</table>
42+
</GridItem>
43+
</Grid>
44+
)
45+
46+
export default UserTable

0 commit comments

Comments
 (0)