feat(project): collaboration tab has inside issues and merge requests

SwissDataScienceCenter · Nov 4, 2019 · 5b5c44a · 5b5c44a
1 parent cf7eeed
commit 5b5c44a
Show file tree

Hide file tree

Showing 21 changed files with 504 additions and 362 deletions.
diff --git a/doc/data_model.md b/doc/data_model.md
@@ -68,15 +68,15 @@ These are GitLab projects. https://docs.gitlab.com/ce/api/projects.html
 - forks_count
 - star_count
 - tags
-- kus
+- issues
 - repository_content (these are computed values based on the content in the repo)
   - datasets
   - notebooks
   - workflows
   - sources
   - libraries
 
-## Ku
+## Issue
 
 These are GitLab issues. https://docs.gitlab.com/ce/api/issues.html
 
@@ -94,7 +94,7 @@ These are GitLab issues. https://docs.gitlab.com/ce/api/issues.html
 
 These are GitLab Notes. https://docs.gitlab.com/ce/api/notes.html
 
-- ku_id (noteable_id in GitLab)
-- ku_iid (noteable_iid in GitLab)
+- issue_id (noteable_id in GitLab)
+- issue_iid (noteable_iid in GitLab)
 - metadata (see above)
 - body
diff --git a/src/App.js b/src/App.js
@@ -29,7 +29,7 @@ import './App.css';
 import { BrowserRouter as Router, Route, Switch, Redirect }  from 'react-router-dom'
 
 import Project from './project/Project'
-import Ku from './ku/Ku'
+import Issue from './issue/Issue'
 import { Landing, LoggedInNavBar, AnonymousNavBar, FooterNavbar } from './landing'
 import { Notebooks } from './notebooks';
 import { Login } from './authentication'
@@ -78,9 +78,9 @@ class App extends Component {
                 render ={p => <Help key="help" {...p} {...this.props} /> } />
 
               {/*TODO: This route should be handled by <Route path="/projects/:id(\d+)" too. Until this is the
-                 TODO: case, the ku_new route must be listed BEFORE the project one.   */}
-              <Route exact path="/projects/:projectNamespace/:projectName/ku_new"
-                render={(p) => <Ku.New key="ku_new" projectPathWithNamespace={`${p.match.params.projectNamespace}/${p.match.params.projectName}`} client={this.props.client} {...p}/>}/>
+                 TODO: case, the issue_new route must be listed BEFORE the project one.   */}
+              <Route exact path="/projects/:projectNamespace/:projectName/issue_new"
+                render={(p) => <Issue.New key="issue_new" projectPathWithNamespace={`${p.match.params.projectNamespace}/${p.match.params.projectName}`} client={this.props.client} {...p}/>}/>
               {/* pull out the underlying parts of the url and pass them to the project view */}
               <Route path="/projects/:projectNamespace/:projectName"
                 render={p => <Project.View key={`${p.match.params.projectNamespace}/${p.match.params.projectName}`}

diff --git a/src/api-client/index.js b/src/api-client/index.js
@@ -25,7 +25,7 @@ import ApolloClient from "apollo-boost";
 import addProjectMethods  from './project';
 import addRepositoryMethods  from './repository';
 import addUserMethods  from './user';
-import addKuMethods  from './ku';
+import addIssueMethods  from './issue';
 import addInstanceMethods from './instance';
 import addNotebookServersMethods from './notebook-servers';
 import addGraphMethods from './graph';
@@ -48,7 +48,7 @@ class APIClient {
   //
   // Renku      GitLab
   // -----------------
-  // ku    -->  issue
+  // ku    -->  issue (old)
 
 
   constructor(baseUrl) {
@@ -61,7 +61,7 @@ class APIClient {
     addProjectMethods(this);
     addRepositoryMethods(this);
     addUserMethods(this);
-    addKuMethods(this);
+    addIssueMethods(this);
     addInstanceMethods(this);
     addNotebookServersMethods(this);
     addGraphMethods(this);

diff --git a/src/api-client/ku.js → src/api-client/issue.js b/src/api-client/ku.js → src/api-client/issue.js
@@ -16,9 +16,9 @@
  * limitations under the License.
  */
 
-function addKuMethods(client) {
+function addIssueMethods(client) {
 
-  client.getProjectKus = (projectId) => {
+  client.getProjectIssues = (projectId) => {
     let headers = client.getBasicHeaders();
 
     return client.clientFetch(`${client.baseUrl}/projects/${projectId}/issues?scope=all`, {
@@ -29,48 +29,48 @@ function addKuMethods(client) {
   }
 
 
-  client.postProjectKu = (projectPathWithNamespace, ku) => {
+  client.postProjectIssue = (projectPathWithNamespace, issue) => {
     let headers = client.getBasicHeaders();
     headers.append('Content-Type', 'application/json');
 
     return client.clientFetch(`${client.baseUrl}/projects/${encodeURIComponent(projectPathWithNamespace)}/issues`, {
       method: 'POST',
       headers: headers,
-      body: JSON.stringify(ku)
+      body: JSON.stringify(issue)
     })
 
   }
 
 
-  client.getProjectKu = (projectId, kuIid) => {
+  client.getProjectIssue = (projectId, issueIid) => {
     let headers = client.getBasicHeaders();
     headers.append('Content-Type', 'application/json');
 
-    return client.clientFetch(`${client.baseUrl}/projects/${projectId}/issues/${kuIid}/`, {
+    return client.clientFetch(`${client.baseUrl}/projects/${projectId}/issues/${issueIid}/`, {
       method: 'GET',
       headers: headers,
     })
 
   }
 
 
-  client.getContributions = (projectId, kuIid) => {
+  client.getContributions = (projectId, issueIid) => {
     let headers = client.getBasicHeaders();
     headers.append('Content-Type', 'application/json');
 
-    return client.clientFetch(`${client.baseUrl}/projects/${projectId}/issues/${kuIid}/notes`, {
+    return client.clientFetch(`${client.baseUrl}/projects/${projectId}/issues/${issueIid}/notes`, {
       method: 'GET',
       headers: headers
     })
 
   }
 
 
-  client.postContribution = (projectId, kuIid, contribution) => {
+  client.postContribution = (projectId, issueIid, contribution) => {
     let headers = client.getBasicHeaders();
     headers.append('Content-Type', 'application/json');
 
-    return client.clientFetch(`${client.baseUrl}/projects/${projectId}/issues/${kuIid}/notes`, {
+    return client.clientFetch(`${client.baseUrl}/projects/${projectId}/issues/${issueIid}/notes`, {
       method: 'POST',
       headers: headers,
       body: JSON.stringify({body: contribution})
@@ -79,12 +79,12 @@ function addKuMethods(client) {
   }
 
 
-  client.closeKu = (projectId, kuIid) => {
-    return updateIssue(client, projectId, kuIid, {state_event: 'close'})
+  client.closeIssue = (projectId, issueIid) => {
+    return updateIssue(client, projectId, issueIid, {state_event: 'close'})
   }
 
-  client.reopenKu = (projectId, kuIid) => {
-    return updateIssue(client, projectId, kuIid, {state_event: 'reopen'})
+  client.reopenIssue = (projectId, issueIid) => {
+    return updateIssue(client, projectId, issueIid, {state_event: 'reopen'})
   }
 }
 
@@ -100,4 +100,4 @@ function updateIssue(client, projectId, issueIid, body) {
   })
 }
 
-export default addKuMethods;
+export default addIssueMethods;
diff --git a/src/api-client/test-client.js b/src/api-client/test-client.js
@@ -42,14 +42,14 @@ const methods = {
   getProjectFile: {
     response: samples.projectNotebookFile
   },
-  getProjectKus: {
+  getProjectIssues: {
     response: {
-      data: samples.kus
+      data: samples.issues
     }
   },
-  getProjectKu: {
+  getProjectIssue: {
     response: {
-      data: samples.kus[0]
+      data: samples.issues[0]
     }
   },
   getModifiedFiles: {

diff --git a/src/api-client/test-samples/index.js b/src/api-client/test-samples/index.js
@@ -1,6 +1,6 @@
-import { kus } from './ku-samples';
+import { issues } from './issue-samples';
 import { projects, projectReadme, projectNotebookFile } from './project-samples';
 import { namespaces } from './namespaces';
 import { user } from './user';
 
-export { kus, namespaces, projects, projectReadme, projectNotebookFile, user };
+export { issues, namespaces, projects, projectReadme, projectNotebookFile, user };
diff --git a/src/api-client/test-samples/ku-samples.js → src/api-client/test-samples/issue-samples.js b/src/api-client/test-samples/ku-samples.js → src/api-client/test-samples/issue-samples.js
@@ -1,4 +1,4 @@
-export const kus = [
+export const issues = [
   {
     'id': 4,
     'iid': 2,

diff --git a/src/contribution/Contribution.container.js b/src/contribution/Contribution.container.js
@@ -230,7 +230,7 @@ class NewContribution extends React.Component {
   }
 
   onSubmit(){
-    this.props.client.postContribution(this.props.projectId, this.props.kuIid, this.state.contribution.body);
+    this.props.client.postContribution(this.props.projectId, this.props.issueIid, this.state.contribution.body);
     this.props.appendContribution(buildContribution(this.state, this.props));
   }
 

diff --git a/src/contribution/Contribution.present.js b/src/contribution/Contribution.present.js
@@ -26,7 +26,7 @@ import { Avatar, TimeCaption, RenkuMarkdown } from '../utils/UIComponents'
 import { FilePreview } from '../file';
 import { ContributionBody as ContributionBodyContainer } from './Contribution.container';
 import { EDIT, PREVIEW } from './Contribution.constants';
-
+import { Card, CardFooter, CardBody} from 'reactstrap';
 
 class Contribution extends React.Component {
 
@@ -37,16 +37,28 @@ class Contribution extends React.Component {
 
   render() {
     const contribution = this.props.contribution;
-    return (
-      <Row className="contribution">
-        <Col md={1}><Avatar person={contribution.author} /></Col>
-        <Col md={9}>
-          <b>{contribution.author.name} </b>
-          <TimeCaption caption="Updated" time={contribution.updated_at} />
-          <ContributionBodyContainer {...this.props} />
+
+    return <div>
+      <br/>
+      <Row>
+        <Col key="image" md={1}  sm={1} className="float-right text-center" style={{maxWidth:'62px'}}>
+          <Avatar size="lg" person={contribution.author} />
+          <small className="d-sm-inline-flex text-center">
+            {contribution.author ? contribution.author.name : null}
+          </small>
+        </Col>
+        <Col key="body" md={10} sm={10} className="float-left">
+          <Card className="triangle-border left">
+            <CardBody className="mb-0 pb-0">
+              <ContributionBodyContainer {...this.props} />
+            </CardBody>
+            <CardFooter className="border-0 bg-transparent text-muted pt-2 pb-2 pl-3"> 
+              <TimeCaption key="timecaption" caption="Updated" time={contribution.updated_at}/>
+            </CardFooter>
+          </Card>
         </Col>
       </Row>
-    );
+    </div>
   }
 }
 
@@ -117,37 +129,40 @@ const NewContribution = props => {
 
   return <span>
     <Row className="contribution">
-      <Col md={10}>
-        <Nav pills className={'nav-pills-underline'}>
-          <NavItem>
-            <NavLink
-              className={classnames({active: props.tab === EDIT})}
-              onClick={() => {
-                props.onTabClick(EDIT)
-              }}
-            >Write</NavLink>
-          </NavItem>
-          <NavItem>
-            <NavLink
-              className={classnames({active: props.tab === PREVIEW})}
-              onClick={() => {
-                props.onTabClick(PREVIEW)
-              }}
-            >Preview</NavLink>
-          </NavItem>
-        </Nav>
-
-        <TabContent activeTab={props.tab}>
-          <TabPane tabId={EDIT} className="py-2">{textInput}</TabPane>
-          <TabPane tabId={PREVIEW} className="pt-2">
-            {/*This might look silly, but I want to remove the preview from the virtual DOM when the user*/}
-            {/*is editing rather than re-rendering it on every keystroak while the user is typing.*/}
-            {props.tab === PREVIEW ? <ContributionBodyContainer {...props} /> : null}
-          </TabPane>
-        </TabContent>
-        <Button
-          className="float-right"
-          color="primary" onClick={props.onSubmit}>Submit</Button>
+      <Col md={1} sm={1} style={{maxWidth:'62px', minWidth:'62px'}}></Col>
+      <Col md={10} sm={10}>
+        <div className="margin-no-triangle">
+          <Nav pills className={'nav-pills-underline'}>
+            <NavItem>
+              <NavLink
+                className={classnames({active: props.tab === EDIT})}
+                onClick={() => {
+                  props.onTabClick(EDIT)
+                }}
+              >Write</NavLink>
+            </NavItem>
+            <NavItem>
+              <NavLink
+                className={classnames({active: props.tab === PREVIEW})}
+                onClick={() => {
+                  props.onTabClick(PREVIEW)
+                }}
+              >Preview</NavLink>
+            </NavItem>
+          </Nav>
+
+          <TabContent activeTab={props.tab}>
+            <TabPane tabId={EDIT} className="py-2">{textInput}</TabPane>
+            <TabPane tabId={PREVIEW} className="pt-2">
+              {/*This might look silly, but I want to remove the preview from the virtual DOM when the user*/}
+              {/*is editing rather than re-rendering it on every keystroak while the user is typing.*/}
+              {props.tab === PREVIEW ? <ContributionBodyContainer {...props} /> : null}
+            </TabPane>
+          </TabContent>
+          <Button
+            className="float-right"
+            color="primary" onClick={props.onSubmit}>Submit</Button>
+        </div>
       </Col>
     </Row>
   </span>

diff --git a/src/file/File.container.js b/src/file/File.container.js
@@ -30,7 +30,7 @@ import { RenkuMarkdown } from '../utils/UIComponents';
 const IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'tiff', 'pdf', 'gif'];
 const CODE_EXTENSIONS = ['py', 'js', 'json', 'sh', 'r', 'txt', 'yml', 'csv', 'parquet', 'cwl', 'job', 'prn', 'rout', 'dcf', 'rproj', 'rst', 'bat'];
 
-// FIXME: Unify the file viewing for kus (embedded) and independent file viewing.
+// FIXME: Unify the file viewing for issues (embedded) and independent file viewing.
 // FIXME: Javascript highlighting is broken for large files.
 // FIXME: Fix positioning of input tags when rendering Jupyter Notebooks.