Merge pull request #258 from FNNDSC/outreachy

Outreachy

.gitignore

@@ -28,4 +28,4 @@ yarn-error.log*
 .cache/
 .yarnrc
 yarn-error.log
-.history
+.history

package.json

@@ -22,7 +22,7 @@
   "dependencies": {
     "@babel/eslint-parser": "^7.14.7",
     "@babel/preset-react": "^7.14.5",
-    "@fnndsc/chrisstoreapi": "^2.0.2",
+    "@fnndsc/chrisstoreapi": "^3.0.1",
     "@patternfly/patternfly": "^4.59.1",
     "@patternfly/react-core": "^4.75.2",
     "@patternfly/react-icons": "^4.7.16",

src/components/Button/index.jsx

@@ -4,22 +4,22 @@ import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 import './button.css';
 
-const ButtonComponent = ({
-  variant,
-  onClick,
-  loading,
-  toRoute,
-  children,
-  type,
-}) => {
+const ButtonComponent = ({ variant, onClick, loading, toRoute, children, type }) => {
   const history = useHistory();
-  window.scrollTo(0, 0);
+
   return (
     <div>
       <Button
         isLoading={loading}
         variant={variant}
-        onClick={toRoute ? () => history.push(toRoute) : onClick}
+        onClick={
+          toRoute
+            ? () => {
+                history.push(toRoute);
+                window.scrollTo(0, 0);
+              }
+            : onClick
+        }
         className="other-button"
         type={type}
       >
@@ -32,7 +32,7 @@ ButtonComponent.propTypes = {
   variant: PropTypes.string,
   onClick: PropTypes.func,
   loading: PropTypes.bool,
-  toRoute: PropTypes.string
+  toRoute: PropTypes.string,
 };
 
 export default ButtonComponent;

src/components/Dashboard/Dashboard.jsx

@@ -7,7 +7,6 @@ import "./Dashboard.css";
 
 import Button from "../Button";
 import DashPluginCardView from "./components/DashPluginCardView/DashPluginCardView";
-import DashTeamView from "./components/DashTeamView/DashTeamView";
 import DashGitHubView from "./components/DashGitHubView/DashGitHubView";
 import ChrisStore from "../../store/ChrisStore";
 import ErrorNotification from "../Notification";
@@ -149,7 +148,7 @@ class Dashboard extends Component {
                     </GridItem>
 
                     <GridItem xs={12}>
-                      <DashTeamView plugins={pluginList} />
+
                     </GridItem>
                   </Grid>
                 </GridItem>

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

@@ -0,0 +1,111 @@
+.dash-text-div {
+    padding-top: 6px;
+}
+
+.card-footer{
+    color: #0088ce;
+}
+
+.pf-c-card__title {
+    font-size: larger;
+}
+
+.card-body-empty {
+    padding: 10px !important;
+    background: linear-gradient(
+        #72767b,
+        #72767b 225px,
+        #393f44 225px,
+        #393f44 325px);
+    min-height: 375px;
+    color: white;
+}
+
+.card-body-header-text {
+    text-align: center;
+    font-weight: bold;
+}
+
+.card-body-subhead {
+    text-align: center;
+}
+
+.card-body-content-parent {
+    display: flex;
+}
+
+.card-body-content-child-right {
+    padding: 10px 30px 0 60px;
+    font-size: 1.2em;
+}
+
+.card-view-row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 100%;
+    gap: 10px;
+}
+
+.card-view-add-plugin {
+    text-align: center;
+    padding: 33px !important;
+}
+.card-view-add-collaborator {
+    text-align: center;
+    float:right;
+}
+
+
+
+.card-view-title{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 20px !important;
+}
+.card-view-grid{
+    margin: 0 auto;
+}
+.card-view-kebob .dropdown-menu {
+    margin-right: 5px;
+    min-width: 100px;
+}
+
+.card-view-plugin-tag {
+    /* color */
+    color: #8b8d8f;
+    color: var(--pf-black-500);
+
+    /* display */
+    display: inline-block;
+    margin: 0 0.5em;
+    padding: 0 0.5em;
+
+    /* border */
+    border-color: #8b8d8f;
+    border: 1px solid var(--pf-black-500);
+    border-radius: 4px;
+
+    /* font */
+    font-weight: 600;
+    font-size: 12px;
+}
+
+.card-view-app-type {
+    font-size: 14px;
+}
+
+.card-info-points {
+    margin: 0.5em 0;
+    font-size: 0.8em;
+    font-weight: bold;
+    color: gray;
+}
+
+.pf-c-card__title {
+    font-size: larger;
+}
+.pf-c-dropdown__toggle {
+    padding-right: 0 !important;
+}

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

@@ -0,0 +1,154 @@
+/* eslint-disable react/jsx-no-undef */
+/* eslint-disable react/no-unused-state */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types'
+import {
+  CardBody,
+  Card,
+  Grid,
+  GridItem,
+  CardFooter,
+  Button,
+ } from '@patternfly/react-core';
+import Client from '@fnndsc/chrisstoreapi';
+import { PlusCircleIcon } from '@patternfly/react-icons';
+import ChrisStore from '../../../../store/ChrisStore';
+import './DashCollaboratorView.css';
+import UserTable from './DashTeamView';
+
+class DashCollaboratorView extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      collaborators: [],
+      errors: [],
+
+    };
+    const storeURL = process.env.REACT_APP_STORE_URL;
+    const auth = { token: props.store.get('authToken') };
+    this.client = new Client(storeURL, auth);
+
+  }
+
+  async componentDidMount() {
+    // eslint-disable-next-line react/destructuring-assignment
+    const { pluginName } = this.props.match.params;
+    try {
+      const pluginMeta = await this.fetchPluginMeta(pluginName);
+      const collaboratorList = await this.fetchPluginCollaborators(pluginMeta);
+
+
+    this.setState({
+          collaborators:[...collaboratorList]
+
+      });
+    } catch (error) {
+      this.setState((prev) => ({
+        loading: false,
+        errors: [...prev.errors, error]
+      }));
+    }
+  }
+
+  showNotifications = (error) => {
+    this.setState((prev) => ({
+      errors: [...prev.errors, error]
+    }));
+  }
+ // eslint-disable-next-line react/destructuring-assignment
+
+/**
+  * Fetch all versions of a plugin.
+  * @param {PluginMeta} pluginMeta
+  * @returns {Promise<any[]>} Collaborators of the plugin
+  */
+  // eslint-disable-next-line class-methods-use-this
+   async fetchPluginMeta(pluginName) {
+
+    const metas = await this.client.getPluginMetas({ name_exact: pluginName, limit: 1 });
+    return metas.getItems().shift();
+
+  }
+
+// eslint-disable-next-line class-methods-use-this
+  async fetchPluginCollaborators(pluginMeta) {
+    const collabitems = (await pluginMeta.getCollaborators()).getItems();
+    const collablist= await collabitems.map((collaborator, index) => collabitems[index].data)
+    const collaboratorlist=await collablist.map((collaborator, index) => collabitems[index])
+    return Array.from(collaboratorlist.values())
+
+   ;
+  }
+
+  render() {
+
+    const {collaborators ,errors} = this.state;
+
+
+    return (
+    <>
+     {
+      errors.map((error, index) => (
+        <ErrorNotification
+        key={`notif-${error.message}`}
+        title="Error"
+        message={error.message}
+        position='top-right'
+        variant='danger'
+        closeable
+        onClose={() => {
+                errors.splice(index)
+                this.setState({ errors })
+              }}
+            />
+          ))
+        }
+    <Grid>
+   <GridItem sm={12}>
+
+          <Card>
+          <CardBody>
+            <h3>Collaborators</h3>
+            <div>
+             <Button variant="primary" className="card-view-add-collaborator">
+                  <PlusCircleIcon type="pf" style={{ margin: '0 1em 0 0' }} />
+                  <span>Add Collaborator</span>
+                </Button>
+            <h4> Use this area, to add and manage collaborators to help you
+             with this plugin.</h4>
+
+              </div> 
+
+
+
+            <UserTable collaborators={collaborators} />
+            </CardBody>
+            <CardFooter className="card-footer">
+
+            </CardFooter>
+
+
+          </Card>
+
+
+        </GridItem>
+
+      </Grid>
+      </>
+
+    );
+  }
+}
+DashCollaboratorView.propTypes = {
+  // eslint-disable-next-line react/no-unused-prop-types
+  collaborators: PropTypes.arrayOf(PropTypes.object),
+
+};
+
+DashCollaboratorView.defaultProps = {
+  collaborators: []
+};
+
+
+
+export default ChrisStore.withStore(DashCollaboratorView);

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

@@ -0,0 +1,46 @@
+import React from 'react'
+import {Grid,GridItem,
+} from '@patternfly/react-core';
+
+const UserTable = props => (
+<Grid>
+ <GridItem sm={12}>
+
+ <table
+  className="pf-c-table pf-m-grid-md"
+
+>
+  <thead>
+    <tr>
+      <th>Usename</th>
+        <th>Role</th>
+        <th>Actions</th>
+    </tr>
+  </thead>
+
+  <tbody>
+   {props.collaborators.length > 0 ? (
+        // eslint-disable-next-line react/destructuring-assignment
+        props.collaborators.map( collaborator => (
+          <tr key={ collaborator.id}>
+
+            <td>{collaborator.data.username}</td>
+            <td>{collaborator.data.role==='O'? 'Owner' :'Maintainer'}</td>
+
+          </tr>
+        ))
+      ):
+
+
+  (
+        <tr>
+          <td colSpan={3}>Add more collaborators</td>
+        </tr>
+      )}
+    </tbody>
+  </table>
+  </GridItem>
+      </Grid>
+)
+
+export default UserTable