Merge pull request #1 from GeordieP/styles

App Restyle
GeordieP · Oct 9, 2018 · 6ea2225 · 6ea2225
2 parents ce9b45d + 2bed74b
commit 6ea2225
Show file tree

Hide file tree

Showing 51 changed files with 1,468 additions and 540 deletions.
diff --git a/ExtraModules.d.ts b/ExtraModules.d.ts
@@ -15,3 +15,4 @@ declare module 'koa-session';
 declare module 'koa-redis';
 declare module 'koa-router';
 declare module 'mongoose';
+declare module 'react-feather';
diff --git a/cypress/integration/e2e/1-signup-login-flow_spec.js b/cypress/integration/e2e/1-signup-login-flow_spec.js
@@ -2,27 +2,27 @@ describe('Sign up and log out', () => {
     // first user that signs up to this app is given admin permissions.
     it('Create first user and log out', () => {
         cy.app_signup('AdminUser', 'test', '[email protected]', 'Admin User');
-        cy.contains('Log Out').click();
+        cy.get('#logout').click();
     });
 
     it('Create second user and log out', () => {
         cy.app_signup('SecondUser', 'test', '[email protected]', 'Second User');
-        cy.contains('Log Out').click();
+        cy.get('#logout').click();
     });
 });
 
 describe('Log in and log out, verify permissions are correct', () => {
     it('Log in admin account, verify admin permissions, log out', () => {
         cy.app_login('[email protected]', 'test',);
         cy.contains('New Project');
-        cy.contains('Log Out').click();
+        cy.get('#logout').click();
         cy.url().should('eq', 'http://localhost:3000/');
     });
 
     it('Log in user account, verify no admin permissions, log out', () => {
         cy.app_login('[email protected]', 'test');
         cy.contains('New Project').should('not.exist');
-        cy.contains('Log Out').click();
+        cy.get('#logout').click();
         cy.url().should('eq', 'http://localhost:3000/');
     })
 });
diff --git a/cypress/integration/e2e/2-admin-actions_spec.js b/cypress/integration/e2e/2-admin-actions_spec.js
@@ -28,7 +28,7 @@ describe('Admin create/edit/delete flows', () => {
         cy.contains('New Issue').click();
         const bodyText = 'First issue contents before edit';
         cy.app_fillCreateIssueForm(`${RUN_ID}_Issue-1`, bodyText, 'High');
-        cy.get('[data-testid=createIssue_submit]').click();
+        cy.get('[data-testid="createIssue_submit"]').click();
 
         // did we navigate?
         cy.url().should('contain', '/issues/');
@@ -38,32 +38,46 @@ describe('Admin create/edit/delete flows', () => {
             // author username
             cy.root().should('contain', 'AdminUser');
             // severity
-            cy.root().should('contain', 'high');
+            cy.root().should('contain', 'High');
             // body text
             cy.root().should('contain', bodyText);
         });
     });
 
     it('Edit issue', () => {
-        cy.contains('Edit Issue').click();
+        cy.get('[data-testid="editIssue"]').click();
         const bodyText = 'First issue contents after edit';
         cy.app_fillEditIssueForm(`${RUN_ID}_Issue-1 EDITED`, bodyText, 'Low');
-        cy.contains('Save Issue').click();
+        cy.get('[data-testid="editIssue_submit"]').click();
 
         // wait for issue details to be rendered, signifying the save completed
         cy.get('.Issue-details');
 
         // verify issue contents
         cy.get('.IssueView-content').within(() => {
             // severity
-            cy.root().should('contain', 'low');
+            cy.root().should('contain', 'Low');
             // body text
             cy.root().should('contain', bodyText);
         });
     });
 
+    it('Close issue', () => {
+        // issue should start open
+        cy.get('.IssueView-content').contains('Open');
+
+        // click close button
+        cy.get('[data-testid="closeIssue"]').click();
+
+        // verify issue is closed
+        cy.get('.IssueView-content').contains('Closed');
+
+        // verify close button is gone
+        cy.get('[data-testid="closeIssue"]').should('not.exist');
+    });
+
     it('Delete issue', () => {
-        cy.contains('Delete Issue').click();
+        cy.get('[data-testid="deleteIssue"]').click();
         // did we navigate? we deleted the only issue, and should be back on
         // the project details page.
         cy.url().should('contain', '/projectDetails');
@@ -78,13 +92,13 @@ describe('Admin create/edit/delete flows', () => {
             `${RUN_ID}_Issue-2`,
             'Issue for testing tasks and comments.'
         );
-        cy.get('[data-testid=createIssue_submit]').click();
+        cy.get('[data-testid="createIssue_submit"]').click();
 
         // create task
         const taskTitle = 'First Task';
         const taskBodyText = 'First task content before edit';
         cy.app_fillCreateTaskForm(taskTitle, taskBodyText);
-        cy.get('[data-testid=createTask_submit]').click();
+        cy.get('[data-testid="createTask_submit"]').click();
 
         // verify task appeared in task list, and click on it
         cy.get('.IssueView-sidebar').contains(taskTitle).click();
@@ -100,14 +114,15 @@ describe('Admin create/edit/delete flows', () => {
     });
 
     it('Edit task', () => {
-        cy.contains('Edit Task').click();
+        cy.get('[data-testid="editTask"]').click();
+        // did we navigate? we deleted the only issue, and should be back on
         const taskTitle = 'First Task EDITED';
         const taskBodyText = 'First task content edited';
         cy.app_fillEditTaskForm(taskTitle, taskBodyText);
-        cy.contains('Save Task').click();
+        cy.get('[data-testid="editTask_submit"]').click();
 
         // wait for edit button to come back, signifying the save action completed
-        cy.contains('Edit Task');
+        cy.get('[data-testid="editTask"]');
 
         cy.get('.TaskView').within(() => {
             // title
@@ -118,7 +133,7 @@ describe('Admin create/edit/delete flows', () => {
     });
 
     it('Delete task', () => {
-        cy.contains('Delete Task').click();
+        cy.get('[data-testid="deleteTask"]').click();
 
         // did we navigate?
         cy.url().should('not.contain', '/tasks');
@@ -134,28 +149,29 @@ describe('Admin create/edit/delete flows', () => {
         cy.contains('Submit Comment').click();
 
         // verify comment exists
-        cy.get('.MutableComment-commentDetails').should('contain', commentBody);
+        cy.get('.Comment').should('contain', commentBody);
     });
 
     it('Edit issue comment', () => {
-        cy.contains('Edit Comment').click();
+        cy.get('[data-testid="editComment"]').click();
         const commentBody = 'First comment after edit';
-        cy.get('[data-testid=editComment_body]').type(commentBody, typing_noDelay);
-        cy.contains('Save Comment').click();
+        cy.get('[data-testid="editComment_body"]').type(commentBody, typing_noDelay);
+        cy.get('[data-testid="editComment_submit"]').click();
 
         // verify comment was updated
-        cy.get('.MutableComment-commentDetails').should('contain', commentBody);
+        cy.get('.Comment').should('contain', commentBody);
     });
 
     it('Delete issue comment', () => {
-        cy.contains('Delete Comment').click();
-        cy.get('.MutableComment-commentDetails').should('not.exist');
+        // cy.contains('Delete Comment').click();
+        cy.get('[data-testid="deleteComment"]').click();
+        cy.get('.Comment').should('not.exist');
     });
 
     it('Create task, create comment in task', () => {
         const taskTitle = 'Test Task';
         cy.app_fillCreateTaskForm(taskTitle, '');
-        cy.get('[data-testid=createTask_submit]').click();
+        cy.get('[data-testid="createTask_submit"]').click();
 
         // verify task appeared in task list, and click on it
         cy.get('.IssueView-sidebar').contains(taskTitle).click();
@@ -165,26 +181,26 @@ describe('Admin create/edit/delete flows', () => {
         cy.contains('Submit Comment').click();
 
         // verify comment exists
-        cy.get('.MutableComment-commentDetails').should('contain', commentBody);
+        cy.get('.Comment').should('contain', commentBody);
     });
 
     it('Edit task comment', () => {
-        cy.contains('Edit Comment').click();
+        cy.get('[data-testid="editComment"]').click();
 
         const commentBody = 'Task comment after edit';
-        cy.get('[data-testid=editComment_body]').type(commentBody, typing_noDelay);
-        cy.contains('Save Comment').click();
+        cy.get('[data-testid="editComment_body"]').type(commentBody, typing_noDelay);
+        cy.get('[data-testid="editComment_submit"]').click();
 
         // verify comment was updated
-        cy.get('.MutableComment-commentDetails').should('contain', commentBody);
+        cy.get('.Comment').should('contain', commentBody);
     });
 
     it('Delete task comment', () => {
-        cy.contains('Delete Comment').click();
-        cy.get('.MutableComment-commentDetails').should('not.exist');
+        cy.get('[data-testid="deleteComment"]').click();
+        cy.get('.Comment').should('not.exist');
     });
 
     it('Log out', () => {
-        cy.contains('Log Out').click();
+        cy.get('#logout').click();
     })
 });
diff --git a/cypress/integration/e2e/3-user-actions_spec.js b/cypress/integration/e2e/3-user-actions_spec.js
@@ -32,23 +32,24 @@ describe('Admin setup', () => {
         // create issue
         cy.contains('New Issue').click();
         cy.app_fillCreateIssueForm(issueName, issueBody);
-        cy.get('[data-testid=createIssue_submit]').click();
+        cy.get('[data-testid="createIssue_submit"]').click();
         cy.url().should('contain', '/issues/');
 
         // comment on issue
-        cy.get('[data-testid="createComment_body"]').type(issueCommentBody, typing_noDelay); cy.contains('Submit Comment').click();
+        cy.get('[data-testid="createComment_body"]').type(issueCommentBody, typing_noDelay);
+        cy.contains('Submit Comment').click();
 
         // create task and navigate to it
         cy.app_fillCreateTaskForm(taskTitle, taskBody);
-        cy.get('[data-testid=createTask_submit]').click();
+        cy.get('[data-testid="createTask_submit"]').click();
         cy.get('.IssueView-sidebar').contains(taskTitle).click();
 
         // comment on task
         cy.get('[data-testid="createComment_body"]').type(taskCommentBody, typing_noDelay);
         cy.contains('Submit Comment').click();
 
         // log out
-        cy.contains('Log Out').click();
+        cy.get('#logout').click();
     });
 });
 
@@ -67,11 +68,11 @@ describe('User create/edit/delete flows', () => {
 
         // verify admin comment is visible and not editable
         cy.contains(issueCommentBody);
-        cy.contains('Edit Comment').should('not.exist');
+        cy.get('[data-testid="editComment"]').should('not.exist');
 
         // verify issue buttons are not visible
-        cy.contains('Edit Issue').should('not.exist');
-        cy.contains('Delete Issue').should('not.exist');
+        cy.get('[data-testid="editIssue"]').should('not.exist');
+        cy.get('[data-testid="deleteIssue"]').should('not.exist');
     });
 
     it('Task page permissions verification', () => {
@@ -86,11 +87,11 @@ describe('User create/edit/delete flows', () => {
 
         // verify admin comment is visible and not editable
         cy.contains(taskCommentBody);
-        cy.contains('Edit Comment').should('not.exist');
+        cy.get('[data-testid="editComment"]').should('not.exist');
 
-        // verify task buttons are not visible
-        cy.contains('Edit Task').should('not.exist');
-        cy.contains('Delete Task').should('not.exist');
+        // verify issue buttons are not visible
+        cy.get('[data-testid="editIssue"]').should('not.exist');
+        cy.get('[data-testid="deleteIssue"]').should('not.exist');
     });
 
     it('Task page comments', () => {
@@ -105,15 +106,15 @@ describe('User create/edit/delete flows', () => {
         cy.contains(myCommentBody);
 
         // edit the comment
-        cy.contains('Edit Comment').click();
-        cy.get('[data-testid=editComment_body]').clear().type(myCommentBody_edit, typing_noDelay);
-        cy.contains('Save Comment').click();
+        cy.get('[data-testid="editComment"]').click();
+        cy.get('[data-testid="editComment_body"]').clear().type(myCommentBody_edit, typing_noDelay);
+        cy.get('[data-testid="editComment_submit"]').click();
 
         // verify comment was edited and is visible
         cy.contains(myCommentBody_edit);
 
         // delete comment
-        cy.contains('Delete Comment').click();
+        cy.get('[data-testid="deleteComment"]').click();
 
         // verify comment was deleted
         cy.contains(myCommentBody_edit).should('not.exist');
@@ -134,24 +135,24 @@ describe('User create/edit/delete flows', () => {
         cy.contains('Submit Comment').click();
 
         // verify comment was created and is visible
-        cy.get('.MutableComment-commentDetails').should('contain', myCommentBody);
+        cy.get('.Comment').should('contain', myCommentBody);
 
         // edit the comment
-        cy.contains('Edit Comment').click();
-        cy.get('[data-testid=editComment_body]').clear().type(myCommentBody_edit, typing_noDelay);
-        cy.contains('Save Comment').click();
+        cy.get('[data-testid="editComment"]').click();
+        cy.get('[data-testid="editComment_body"]').clear().type(myCommentBody_edit, typing_noDelay);
+        cy.get('[data-testid="editComment_submit"]').click();
 
         // verify comment was edited and is visible
         cy.contains(myCommentBody_edit);
 
         // delete comment
-        cy.contains('Delete Comment').click();
+        cy.get('[data-testid="deleteComment"]').click();
 
         // verify comment was deleted
         cy.contains(myCommentBody_edit).should('not.exist');
     });
 
     it('Log out user', () => {
-        cy.contains('Log Out').click();
+        cy.get('#logout').click();
     });
 });
diff --git a/package.json b/package.json
@@ -63,6 +63,7 @@
     "react": "^16.4.2",
     "react-apollo": "^2.1.11",
     "react-dom": "^16.4.2",
+    "react-feather": "^1.1.3",
     "react-router-dom": "^4.3.1",
     "react-scripts-ts": "2.17.0",
     "reset.css": "^2.0.2",

diff --git a/readme-img/app.png b/readme-img/app.png
diff --git a/server/src/graphql/resolvers.ts b/server/src/graphql/resolvers.ts
@@ -354,6 +354,10 @@ export default (db: any) => {
                     throw new Error(`Insufficient Permissions. (required ${ PermissionLevel.Create }, had ${ level })`);
                 }
 
+                if (args.status) {
+                    args.status = args.status.toLowerCase();
+                }
+
                 return new db.Issue({
                     ...args,
                     creator: ctx.state.user.id,

diff --git a/src/components/Comment/Comment.css b/src/components/Comment/Comment.css
@@ -1,11 +1,11 @@
-.Comment-body {
-    background: var(--col-bgPrimary);
-    margin: var(--spc-xsmall) 0;
-    padding: var(--spc-small);
-    border-radius: var(--rad-small);
-    box-shadow: 0 4px 8px rgba(var(--rgb-bgAccentHighContrast), 0.07);
+.Comment {
+    margin-top: var(--spc-xlarge);
+}
 
-    & span {
-        color: rgba(var(--rgb-primary), 0.3);
-    }
+.Comment-author, .Comment-date {
+    color: rgba(var(--rgb-primary), 0.4);
+}
+
+.Comment-body {
+    margin: var(--spc-small) 0 0 var(--spc-med);
 }