Merge pull request stakwork#521 from AbdulWahab3181/feature/add-archi…

…tecture-to-feature

Feature/add architecture to feature

.github/workflows/prjob_build.yml

@@ -2,7 +2,7 @@ name: Build
 on:
   pull_request:
     branches:
-      - master
+      - "*"
 jobs:
   build:
     name: build

.github/workflows/prjob_cypress_tests.yml

@@ -3,7 +3,7 @@ name: Cypress Tests
 on: 
   pull_request:
     branches:
-      - master
+      - "*"
 
 jobs:
   cypress:

.github/workflows/prjob_eslint.yml

@@ -2,7 +2,7 @@ name: Eslint
 on:
   pull_request:
     branches:
-      - master
+      - "*"
 jobs:
   eslint:
     name: eslint

.github/workflows/prjob_prettier.yml

@@ -2,7 +2,7 @@ name: Prettier
 on:
   pull_request:
     branches:
-      - master
+      - "*"
 jobs:
 
   prettier:

.github/workflows/prjob_tests.yml

@@ -2,7 +2,7 @@ name: Tests
 on:
   pull_request:
     branches:
-      - master
+      - "*"
 jobs:
   test-jest:
     name: Jest

cypress/e2e/53_workspaceMission.cy.ts

@@ -1,5 +1,5 @@
 describe('Create Workspace And Update Mission', () => {
-  it('Creating an Workspace', () => {
+  it('Creating A Workspace', () => {
     cy.login('carol');
     cy.wait(1000);
 

cypress/e2e/54_addFeature.cy.ts

@@ -0,0 +1,49 @@
+describe('Add feature To Workspace', () => {
+  it('Creating A Workspace', () => {
+    cy.login('carol');
+    cy.wait(1000);
+
+    const WorkSpaceName = 'Workspace Feature';
+
+    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 = 'This is my 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.logout('carol');
+  });
+});

cypress/e2e/55_updateFeature.cy.ts

@@ -0,0 +1,60 @@
+describe('Update feature To Workspace', () => {
+  it('Updating A Workspace Feature', () => {
+    cy.login('carol');
+    cy.wait(1000);
+
+    const WorkSpaceName = 'WS Feature Update';
+
+    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);
+
+    cy.get('[data-testid="architecture-option-btn"]').click();
+    cy.get('[data-testid="architecture-edit-btn"]').click();
+
+    const updatedFeature = 'Feature Architecture';
+    cy.get('[data-testid="architecture-textarea"]').type(updatedFeature);
+    cy.get('[data-testid="architecture-update-btn"]').click();
+    cy.wait(1000);
+
+    cy.contains(updatedFeature).should('exist', { timeout: 1000 });
+
+    cy.logout('carol');
+  });
+});

src/__test__/__mockData__/persons.ts

@@ -1,4 +1,4 @@
-import { Person } from '../../store/main';
+import { Person } from '../../store/interface';
 
 export const people: Person[] = [
   {

src/__test__/__mockData__/userTickets.ts

@@ -1,4 +1,4 @@
-import { PersonBounty } from 'store/main';
+import { PersonBounty } from 'store/interface';
 
 export const userAssignedBounties: PersonBounty[] = [
   {

src/__test__/__mockData__/workspace.ts

@@ -1,4 +1,4 @@
-import { Workspace } from 'store/main';
+import { Workspace } from 'store/interface';
 
 export const mockWorkspaces: Workspace[] = [
   {

src/__test__/__mockStore__/useMockSelfProfileStore.ts

@@ -1,7 +1,7 @@
 import { user } from '__test__/__mockData__/user';
 import { useEffect } from 'react';
 import { useStores } from 'store';
-import { Person } from 'store/main';
+import { Person } from 'store/interface';
 
 export const useMockSelfProfileStore = ({ enabled }: { enabled: boolean }) => {
   const { ui, main } = useStores();

src/bounties/interfaces.ts

@@ -1,5 +1,5 @@
 import { CodingLanguageLabel } from 'people/interfaces';
-import { Person } from 'store/main';
+import { Person } from 'store/interface';
 
 export interface BountiesDescriptionProps {
   description?: any;

src/hooks/usePerson.ts

@@ -1,4 +1,4 @@
-import { Person } from '../store/main';
+import { Person } from '../store/interface';
 import { useStores } from '../store';
 
 export const usePerson = (id: any) => {

src/pages/index.tsx

@@ -5,6 +5,7 @@ import { AppMode } from 'config';
 import { Route, Switch } from 'react-router-dom';
 import { observer } from 'mobx-react-lite';
 import WorkspaceMission from 'people/widgetViews/WorkspaceMission';
+import WorkspaceFeature from 'people/widgetViews/WorkspaceFeature';
 import PeopleHeader from '../people/main/Header';
 import TokenRefresh from '../people/utils/TokenRefresh';
 import BotsBody from './bots/Body';
@@ -48,6 +49,9 @@ const modeDispatchPages: Record<AppMode, () => React.ReactElement> = {
           <Route path="/workspace/:uuid">
             <WorkspaceMission />
           </Route>
+          <Route path="/feature/:feature_uuid">
+            <WorkspaceFeature />
+          </Route>
           <Route path="/leaderboard">
             <LeaderboardPage />
           </Route>

src/pages/leaderboard/__tests__/leaderboard.spec.tsx

@@ -2,7 +2,8 @@ import '@testing-library/jest-dom';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import { useStores } from '../../../store';
-import { mainStore, Person } from '../../../store/main.ts';
+import { Person } from '../../../store/interface';
+import { mainStore } from '../../../store/main.ts';
 import { leaderboardStore } from '../store.ts';
 import { LeaderboardPage } from '../index.tsx';
 

src/pages/leaderboard/leaderboardItem/__tests__/LeaerboardItem.spec.tsx

@@ -1,6 +1,5 @@
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import nock from 'nock';
 import React from 'react';
 import { setupStore } from '../../../../__test__/__mockData__/setupStore';

src/pages/leaderboard/top3/index.tsx

@@ -6,7 +6,7 @@ import { DollarConverter } from 'helpers';
 import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useStores } from 'store';
-import { Person } from 'store/main';
+import { Person } from 'store/interface';
 import styled from 'styled-components';
 import { LeaderItem } from '../store';
 

src/pages/leaderboard/userInfo/index.tsx

@@ -7,7 +7,7 @@ import styled from 'styled-components';
 import { colors } from '../../../config';
 import ConnectCard from '../../../people/utils/ConnectCard';
 import { useStores } from '../../../store';
-import { Person } from '../../../store/main';
+import { Person } from '../../../store/interface';
 const UserItemContainer = styled.div`
   display: flex;
   gap: 1rem;

src/pages/people/peopleList/PeopleList.tsx

@@ -5,7 +5,7 @@ import PageLoadSpinner from 'people/utils/PageLoadSpinner';
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import { useStores } from 'store';
-import { queryLimit } from 'store/main';
+import { queryLimit } from 'store/interface';
 import styled from 'styled-components';
 import { observer } from 'mobx-react-lite';
 import Person from '../Person';

src/pages/people/tabs/Wanted.tsx

@@ -10,7 +10,7 @@ import PageLoadSpinner from 'people/utils/PageLoadSpinner';
 import React, { useCallback, useEffect, useState } from 'react';
 import { Route, Switch, useHistory, useRouteMatch, useParams } from 'react-router-dom';
 import { useStores } from 'store';
-import { paginationQueryLimit } from 'store/main';
+import { paginationQueryLimit } from 'store/interface';
 import styled from 'styled-components';
 import { LoadMoreContainer } from '../../../people/widgetViews/WidgetSwitchViewer';
 import { colors } from '../../../config/colors';

src/pages/superadmin/header/HeaderStyles.tsx

@@ -156,7 +156,7 @@ export const Option = styled.div`
   top: 65px;
   right: 48px;
   width: 169px;
-  height: 157px;
+  height: 167px;
   display: inline-flex;
   padding: 12px 28px 12px 28px;
   flex-direction: column;
@@ -231,7 +231,7 @@ export const WorkspaceOption = styled.div`
 `;
 
 export const WorkspaceText = styled.div`
-  flex: 2, 
+  flex: 2;
   text-align: 'center';
   white-space: nowrap;
   overflow: hidden;

src/pages/superadmin/header/__tests__/SuperAdminHeader.spec.tsx

@@ -1,4 +1,5 @@
 import '@testing-library/jest-dom';
+import { waitFor } from '@testing-library/dom';
 import { render, screen, within, act, fireEvent } from '@testing-library/react';
 import moment from 'moment';
 import nock from 'nock';
@@ -8,11 +9,11 @@ import { user } from '../../../../__test__/__mockData__/user';
 import { mockUsehistory } from '../../../../__test__/__mockFn__/useHistory';
 import { Header } from '../';
 
-beforeAll(() => {
-  nock.disableNetConnect();
-  setupStore();
-  mockUsehistory();
-});
+// beforeAll(() => {
+//   nock.disableNetConnect();
+//   setupStore();
+//   mockUsehistory();
+// });
 
 /**
  * @jest-environment jsdom
@@ -206,6 +207,7 @@ describe('Header Component', () => {
 
     expect(screen.getByText(exportCSVText)).toBeInTheDocument();
   });
+
   test('displays "Custom" when dates are selected', async () => {
     const setStartDateMock = jest.fn();
     const setEndDateMock = jest.fn();
@@ -230,4 +232,44 @@ describe('Header Component', () => {
 
     expect(dropDownButton).toHaveTextContent('Custom');
   });
+
+  test('displays current month and number of days dynamically based on current date', async () => {
+    const setStartDateMock = jest.fn();
+    const setEndDateMock = jest.fn();
+    const setWorkspaceMock = jest.fn();
+
+    const endDate = moment().startOf('day').unix();
+    const startDate = moment().startOf('month').unix();
+
+    render(
+      <Header
+        startDate={startDate}
+        endDate={endDate}
+        setStartDate={setStartDateMock}
+        setEndDate={setEndDateMock}
+        workspace={''}
+        setWorkspace={setWorkspaceMock}
+      />
+    );
+
+    const dropDownButton = screen.getByTestId('DropDown');
+    fireEvent.click(dropDownButton);
+
+    const CurrentMonthOption = screen.getByText('Current Month');
+    fireEvent.click(CurrentMonthOption);
+
+    const expectedTextContent = 'Current Month';
+
+    await waitFor(() => expect(dropDownButton).toHaveTextContent(expectedTextContent));
+
+    const leftWrapperElement = screen.getByTestId('leftWrapper');
+    const monthElement = within(leftWrapperElement).getByTestId('month');
+
+    expect(monthElement).toBeInTheDocument();
+
+    const expectedDateRange = `${moment.unix(startDate).format('DD MMM')} - ${moment
+      .unix(endDate)
+      .format('DD MMM YYYY')}`;
+    expect(monthElement).toHaveTextContent(expectedDateRange);
+  });
 });

src/pages/superadmin/header/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import moment from 'moment';
-import { mainStore, Workspace } from 'store/main';
+import { Workspace } from 'store/interface';
+import { mainStore } from 'store/main';
 import {
   AlternateWrapper,
   ButtonWrapper,
@@ -111,6 +112,9 @@ export const Header = ({
         case 90:
           text = 'Last 90 Days';
           break;
+        case moment().date():
+          text = `Current Month`;
+          break;
         default:
           break;
       }
@@ -239,6 +243,7 @@ export const Header = ({
                   <li onClick={() => handleDropDownChange(7)}>7 Days</li>
                   <li onClick={() => handleDropDownChange(30)}>30 Days</li>
                   <li onClick={() => handleDropDownChange(90)}>90 Days</li>
+                  <li onClick={() => handleDropDownChange(moment().date())}>Current Month</li>
                   <li>
                     <CustomButton onClick={() => handleDropDownChange('Custom')}>
                       Custom