Merge pull request stakwork#543 from stakwork/feature-add-userstory-t…

…o-feature

Feature add userstory to feature

.github/workflows/build_on_master_merge.yml

@@ -4,7 +4,7 @@ env:
 
 on:
   push:
-    branch:
+    branches:
       - master
 
 # https://docs.github.com/en/actions/learn-github-actions/expressions

cypress/e2e/58_addUserStoriesToFeature.cy.ts

@@ -0,0 +1,81 @@
+describe('Add user stories to features', () => {
+  it('Add user stories to features', () => {
+    cy.login('carol');
+    cy.wait(1000);
+
+    const WorkSpaceName = 'user story8';
+
+    const workspace = {
+      loggedInAs: 'carol',
+      name: WorkSpaceName,
+      description: 'We are testing out our workspace feature',
+      website: 'https://community.sphinx.chat',
+      github: 'https://github.com/stakwork/sphinx-tribes-frontend'
+    };
+
+    cy.create_workspace(workspace);
+    cy.wait(1000);
+
+    cy.contains(workspace.name).contains('Manage').click();
+    cy.wait(1000);
+
+    cy.get('[data-testid="mission-link"]')
+      .invoke('show')
+      .then(($link: JQuery<HTMLElement>) => {
+        const modifiedHref = $link.attr('href');
+        cy.wrap($link).invoke('removeAttr', 'target');
+        cy.wrap($link).click();
+        cy.url().should('include', modifiedHref);
+      });
+    cy.wait(1000);
+
+    cy.contains('No mission yet');
+    cy.contains('No tactics yet');
+
+    cy.get('[data-testid="new-feature-btn"]').click();
+    cy.wait(1000);
+
+    cy.contains('Add New Feature');
+
+    const newFeature = 'A new Feature';
+    cy.get('[data-testid="feature-input"]').type(newFeature);
+    cy.get('[data-testid="add-feature-btn"]').click();
+    cy.wait(1000);
+
+    cy.contains(newFeature).should('exist', { timeout: 3000 });
+    cy.wait(1000);
+
+    const userStory = 'this is the story of a user';
+    for (let i = 1; i <= 2; i++) {
+      const userStoryWithNumber = `${userStory} ${i}`;
+      cy.get('[data-testid="story-input"]').type(userStoryWithNumber);
+      cy.get('[data-testid="story-input-update-btn"]').click();
+      cy.wait(1000);
+
+      cy.contains(userStoryWithNumber).should('exist', { timeout: 1000 });
+      cy.wait(1000);
+    }
+
+    cy.get('[data-testid="0-user-story-option-btn"]').click();
+    cy.get('[data-testid="user-story-edit-btn"]').click();
+    cy.wait(1000);
+    cy.get('[data-testid="edit-story-input"]').clear();
+    const updatedUserStory = 'this is the story of a user changed';
+    cy.get('[data-testid="edit-story-input"]').type(updatedUserStory);
+    cy.get('[data-testid="user-story-save-btn"]').click();
+    cy.wait(1000);
+
+    cy.contains(updatedUserStory).should('exist', { timeout: 1000 });
+
+    cy.get('[data-testid="1-user-story-option-btn"]').click();
+    cy.get('[data-testid="user-story-edit-btn"]').click();
+    cy.wait(1000);
+    cy.get('[data-testid="user-story-delete-btn"]').click();
+    cy.wait(1000);
+    cy.contains('Delete').click({ force: true });
+    cy.wait(1000);
+    const userStoryWithNumber = `${userStory} ${2}`;
+    cy.contains(userStoryWithNumber).should('not.exist', { timeout: 1000 });
+    cy.logout('carol');
+  });
+});

src/pages/tickets/style.ts

@@ -56,14 +56,31 @@ export const HeaderWrap = styled.div`
 
 export const DataWrap = styled.div`
   display: flex;
-  width: 100%;
   justify-content: space-between;
   padding: 40px 50px;
-  display: flex;
-  width: 58%;
+  width: 60%;
   margin: 0 auto;
+  align-items: left;
+  justify-content: center;
+
+  @media only screen and (max-width: 900px) {
+    width: 90%;
+    padding: 30px 40px;
+  }
+
+  @media only screen and (max-width: 500px) {
+    width: 90%;
+    padding: 20px 10px;
+  }
+`;
+
+export const FeatureDataWrap = styled.div`
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 40px 50px;
+  width: 60%;
+  margin: 0 auto;
   align-items: left;
   justify-content: center;
 
@@ -171,6 +188,24 @@ export const OptionsWrap = styled.div`
   }
 `;
 
+export const UserStoryOptionWrap = styled.div`
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+
+  button {
+    border: 0.5px solid #000000;
+    font-size: 0.8rem;
+    font-weight: 700;
+    border-radius: 5px;
+    padding: 2px 10px;
+  }
+`;
 export const TextArea = styled.textarea`
   padding: 0.5rem 1rem;
   border-radius: 0.375rem;
@@ -300,3 +335,36 @@ export const ImgText = styled.h3`
   opacity: 0.5;
   margin-bottom: 0;
 `;
+export const InputField = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const Input = styled.input`
+  border: 1px solid #ccc;
+  max-height: 30px;
+  border-radius: 5px;
+  padding: 10px 20px;
+  position: relative;
+  caret-color: #618aff;
+  color: #3c3f41;
+  font-family: 'Barlow';
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+  width: 80%;
+
+  ::placeholder {
+    color: #b0b7bc;
+    font-family: 'Barlow';
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+  }
+  :focus {
+    border: 2px solid #82b4ff;
+  }
+`;