diff --git a/cypress/e2e/53_workspaceMission.cy.ts b/cypress/e2e/53_workspaceMission.cy.ts index cb889aa5..a3cf6519 100644 --- a/cypress/e2e/53_workspaceMission.cy.ts +++ b/cypress/e2e/53_workspaceMission.cy.ts @@ -62,7 +62,8 @@ describe('Create Workspace And Update Mission', () => { cy.get('h5').contains('Repositories').should('be.visible'); cy.contains(repoName).should('exist', { timeout: 1000 }); - cy.get('img[alt="Three dots icon"]').first().click(); + cy.get('[data-testid="repository-option-btn"]').click(); + cy.get('[data-testid="repository-edit-btn"]').click(); cy.wait(500); const updatedRepoName = 'Updated Repo'; @@ -75,7 +76,8 @@ describe('Create Workspace And Update Mission', () => { cy.contains(updatedRepoName).should('be.visible'); cy.contains('https://github.com/updated/repo').should('be.visible'); - cy.get('img[alt="Three dots icon"]').first().click(); + cy.get('[data-testid="repository-option-btn"]').click(); + cy.get('[data-testid="repository-edit-btn"]').click(); cy.get('button').contains('Delete').click(); cy.wait(1000); diff --git a/src/pages/superadmin/header/__tests__/SuperAdminHeader.spec.tsx b/src/pages/superadmin/header/__tests__/SuperAdminHeader.spec.tsx index e6c15992..23d9f3e9 100644 --- a/src/pages/superadmin/header/__tests__/SuperAdminHeader.spec.tsx +++ b/src/pages/superadmin/header/__tests__/SuperAdminHeader.spec.tsx @@ -255,12 +255,12 @@ describe('Header Component', () => { const dropDownButton = screen.getByTestId('DropDown'); fireEvent.click(dropDownButton); - const CurrentMonthOption = screen.getByText('Current Month'); - fireEvent.click(CurrentMonthOption); + waitFor(() => { + const CurrentMonthOption = screen.getByText('Current Month'); + fireEvent.click(CurrentMonthOption); - const expectedTextContent = 'Current Month'; - - await waitFor(() => expect(dropDownButton).toHaveTextContent(expectedTextContent)); + expect(dropDownButton).toHaveTextContent('Current Month'); + }); const leftWrapperElement = screen.getByTestId('leftWrapper'); const monthElement = within(leftWrapperElement).getByTestId('month'); diff --git a/src/pages/tickets/style.ts b/src/pages/tickets/style.ts index 07adac31..11cd00f4 100644 --- a/src/pages/tickets/style.ts +++ b/src/pages/tickets/style.ts @@ -1,5 +1,15 @@ import styled from 'styled-components'; +interface EditPopoverContentProps { + bottom?: string; + transform?: string; +} + +interface EditPopoverTailProps { + bottom?: string; + left?: string; +} + export const Body = styled.div` flex: 1; height: calc(100vh - 60px); @@ -392,3 +402,42 @@ export const Input = styled.input` border: 2px solid #82b4ff; } `; + +export const EditPopover = styled.div` + position: relative; + display: inline-block; +`; + +export const EditPopoverContent = styled.div` + position: absolute; + bottom: ${({ bottom }: { bottom?: string }) => bottom ?? '-50px'}; + left: -30%; + transform: ${({ transform }: { transform?: string }) => transform ?? 'translateX(-80%)'}; + width: 120px; + background: #fff; + box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.25); + border-radius: 6px; + padding: 8px 12px; + display: flex; + align-items: center; + gap: 6px; +`; + +export const EditPopoverTail = styled.div` + position: absolute; + bottom: ${({ bottom }: { bottom?: string }) => bottom ?? '-16px'}; + left: ${({ left }: { left?: string }) => left ?? '-20px'}; + transform: translateX(60%) rotate(45deg); + width: 16px; + height: 16px; + background: #fff; + box-shadow: -3px -3px 5px -3px rgba(0, 0, 0, 0.25); + z-index: 1; +`; + +export const EditPopoverText = styled.span` + font-family: 'Barlow', sans-serif; + font-size: 1.1rem; + font-weight: 600; + color: #333; +`; diff --git a/src/people/widgetViews/WorkspaceFeature.tsx b/src/people/widgetViews/WorkspaceFeature.tsx index a7525d40..31cfeb5f 100644 --- a/src/people/widgetViews/WorkspaceFeature.tsx +++ b/src/people/widgetViews/WorkspaceFeature.tsx @@ -21,7 +21,11 @@ import { TextArea, InputField, Input, - UserStoryOptionWrap + UserStoryOptionWrap, + EditPopover, + EditPopoverTail, + EditPopoverText, + EditPopoverContent } from 'pages/tickets/style'; import React, { useCallback, useEffect, useState } from 'react'; import history from 'config/history'; @@ -39,9 +43,7 @@ import { HeadNameWrap, FeatureHeadWrap, WorkspaceName, - WorkspaceOption, UserStoryField, - UserStoryOption, StyledModal, ModalBody, ButtonGroup, @@ -144,13 +146,13 @@ const WorkspaceEditableField = ({ data-testid={`${dataTestIdPrefix}-option-btn`} /> {displayOptions && ( - -
    -
  • - Edit -
  • -
-
+ + + + + Edit + + )} {!isEditing ? ( @@ -549,16 +551,18 @@ const WorkspaceFeature = () => { data-testid={`${story.priority}-user-story-option-btn`} /> {displayUserStoryOptions[story?.id as number] && ( - -
    -
  • handleUserStoryEdit(story)} - > + + + handleUserStoryEdit(story)}> + + Edit -
  • -
-
+ + + )} diff --git a/src/people/widgetViews/WorkspaceMission.tsx b/src/people/widgetViews/WorkspaceMission.tsx index 18c5f2de..0b6f5f63 100644 --- a/src/people/widgetViews/WorkspaceMission.tsx +++ b/src/people/widgetViews/WorkspaceMission.tsx @@ -26,7 +26,11 @@ import { TextArea, StyledListElement, FeatureLink, - StyledList + StyledList, + EditPopoverTail, + EditPopoverContent, + EditPopoverText, + EditPopover } from 'pages/tickets/style'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; @@ -53,7 +57,6 @@ import { useIsMobile } from 'hooks'; import styled from 'styled-components'; import { AvatarGroup } from 'components/common/AvatarGroup'; import avatarIcon from '../../public/static/profile_avatar.svg'; -import threeDotsIcon from '../widgetViews/Icons/threeDotsIcon.svg'; import { colors } from '../../config/colors'; import dragIcon from '../../pages/superadmin/header/icons/drag_indicator.svg'; import AddFeature from './workspace/AddFeatureModal'; @@ -62,8 +65,6 @@ import { RowFlex, ButtonWrap, RepoName, - RepoEliipsis, - WorkspaceOption, ImgText, MissionRowFlex } from './workspace/style'; @@ -247,6 +248,14 @@ const WorkspaceMission = () => { const [featuresCount, setFeaturesCount] = useState(0); const [isOpenUserManage, setIsOpenUserManage] = useState(false); const [users, setUsers] = useState([]); + const [displayUserRepoOptions, setDisplayUserRepoOptions] = useState>({}); + + const handleUserRepoOptionClick = (repositoryId: number) => { + setDisplayUserRepoOptions((prev: Record) => ({ + ...prev, + [repositoryId]: !prev[repositoryId] + })); + }; const isMobile = useIsMobile(); @@ -547,13 +556,13 @@ const WorkspaceMission = () => { data-testid="mission-option-btn" /> {displayMission && ( - -
    -
  • - Edit -
  • -
-
+ + + + + Edit + + )} {!editMission && ( @@ -599,13 +608,13 @@ const WorkspaceMission = () => { data-testid="tactics-option-btn" /> {displayTactics && ( - -
    -
  • - Edit -
  • -
-
+ + + + + Edit + + )} {!editTactics && ( @@ -658,12 +667,40 @@ const WorkspaceMission = () => { {repositories.map((repository: any) => ( - - openModal('edit', repository)} - /> + + + handleUserRepoOptionClick(repository?.id as number)} + className="MaterialIcon" + data-testid="repository-option-btn" + style={{ transform: 'rotate(90deg)' }} + /> + {displayUserRepoOptions[repository?.id as number] && ( + + + { + openModal('edit', repository); + setDisplayUserRepoOptions((prev: Record) => ({ + ...prev, + [repository?.id]: !prev[repository?.id] + })); + }} + bottom="-60px" + transform="translateX(-90%)" + > + + + Edit + + + + )} + {repository.name} : @@ -697,13 +734,17 @@ const WorkspaceMission = () => { data-testid="schematic-option-btn" style={{ transform: 'rotate(90deg)' }} /> - + + + + + Edit + + {workspaceData?.schematic_url ? ( { style={{ transform: 'rotate(90deg)' }} /> {showOptions && ( - -
    -
  • + + + + + Edit -
  • -
-
+ + + )} );