Merge pull request stakwork#560 from aliraza556/Change-edit-context-menu

Fixed: Change edit context menu in Workspace and Feature fields
aliraza556 · May 30, 2024 · 9a57fd7 · 9a57fd7
2 parents d7cda2a + 5c12da7
commit 9a57fd7
Show file tree

Hide file tree

Showing 6 changed files with 169 additions and 66 deletions.
diff --git 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
@@ -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
@@ -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<EditPopoverContentProps>`
+  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<EditPopoverTailProps>`
+  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
@@ -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 && (
-            <WorkspaceOption>
-              <ul>
-                <li data-testid={`${dataTestIdPrefix}-edit-btn`} onClick={handleEditClick}>
-                  Edit
-                </li>
-              </ul>
-            </WorkspaceOption>
+            <EditPopover>
+              <EditPopoverTail />
+              <EditPopoverContent onClick={handleEditClick}>
+                <MaterialIcon icon="edit" style={{ fontSize: '20px', marginTop: '2px' }} />
+                <EditPopoverText data-testid={`${dataTestIdPrefix}-edit-btn`}>Edit</EditPopoverText>
+              </EditPopoverContent>
+            </EditPopover>
           )}
         </OptionsWrap>
         {!isEditing ? (
@@ -549,16 +551,18 @@ const WorkspaceFeature = () => {
                               data-testid={`${story.priority}-user-story-option-btn`}
                             />
                             {displayUserStoryOptions[story?.id as number] && (
-                              <UserStoryOption>
-                                <ul>
-                                  <li
-                                    data-testid="user-story-edit-btn"
-                                    onClick={() => handleUserStoryEdit(story)}
-                                  >
+                              <EditPopover>
+                                <EditPopoverTail />
+                                <EditPopoverContent onClick={() => handleUserStoryEdit(story)}>
+                                  <MaterialIcon
+                                    icon="edit"
+                                    style={{ fontSize: '20px', marginTop: '2px' }}
+                                  />
+                                  <EditPopoverText data-testid="user-story-edit-btn">
                                     Edit
-                                  </li>
-                                </ul>
-                              </UserStoryOption>
+                                  </EditPopoverText>
+                                </EditPopoverContent>
+                              </EditPopover>
                             )}
                           </UserStoryOptionWrap>
                         </UserStoryPanel>

diff --git 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<boolean>(false);
   const [users, setUsers] = useState<Person[]>([]);
+  const [displayUserRepoOptions, setDisplayUserRepoOptions] = useState<Record<number, boolean>>({});
+
+  const handleUserRepoOptionClick = (repositoryId: number) => {
+    setDisplayUserRepoOptions((prev: Record<number, boolean>) => ({
+      ...prev,
+      [repositoryId]: !prev[repositoryId]
+    }));
+  };
 
   const isMobile = useIsMobile();
 
@@ -547,13 +556,13 @@ const WorkspaceMission = () => {
                     data-testid="mission-option-btn"
                   />
                   {displayMission && (
-                    <WorkspaceOption>
-                      <ul>
-                        <li data-testid="mission-edit-btn" onClick={editMissionActions}>
-                          Edit
-                        </li>
-                      </ul>
-                    </WorkspaceOption>
+                    <EditPopover>
+                      <EditPopoverTail />
+                      <EditPopoverContent onClick={editMissionActions}>
+                        <MaterialIcon icon="edit" style={{ fontSize: '20px', marginTop: '2px' }} />
+                        <EditPopoverText data-testid="mission-edit-btn">Edit</EditPopoverText>
+                      </EditPopoverContent>
+                    </EditPopover>
                   )}
                 </OptionsWrap>
                 {!editMission && (
@@ -599,13 +608,13 @@ const WorkspaceMission = () => {
                     data-testid="tactics-option-btn"
                   />
                   {displayTactics && (
-                    <WorkspaceOption>
-                      <ul>
-                        <li data-testid="tactics-edit-btn" onClick={editTacticsActions}>
-                          Edit
-                        </li>
-                      </ul>
-                    </WorkspaceOption>
+                    <EditPopover>
+                      <EditPopoverTail />
+                      <EditPopoverContent onClick={editTacticsActions}>
+                        <MaterialIcon icon="edit" style={{ fontSize: '20px', marginTop: '2px' }} />
+                        <EditPopoverText data-testid="tactics-edit-btn">Edit</EditPopoverText>
+                      </EditPopoverContent>
+                    </EditPopover>
                   )}
                 </OptionsWrap>
                 {!editTactics && (
@@ -658,12 +667,40 @@ const WorkspaceMission = () => {
                 </RowFlex>
                 <StyledList>
                   {repositories.map((repository: any) => (
-                    <StyledListElement key={repository.id}>
-                      <RepoEliipsis
-                        src={threeDotsIcon}
-                        alt="Three dots icon"
-                        onClick={() => openModal('edit', repository)}
-                      />
+                    <StyledListElement key={repository?.id}>
+                      <OptionsWrap style={{ position: 'unset', display: 'contents' }}>
+                        <MaterialIcon
+                          icon={'more_horiz'}
+                          onClick={() => handleUserRepoOptionClick(repository?.id as number)}
+                          className="MaterialIcon"
+                          data-testid="repository-option-btn"
+                          style={{ transform: 'rotate(90deg)' }}
+                        />
+                        {displayUserRepoOptions[repository?.id as number] && (
+                          <EditPopover>
+                            <EditPopoverTail bottom="-30px" left="-27px" />
+                            <EditPopoverContent
+                              onClick={() => {
+                                openModal('edit', repository);
+                                setDisplayUserRepoOptions((prev: Record<number, boolean>) => ({
+                                  ...prev,
+                                  [repository?.id]: !prev[repository?.id]
+                                }));
+                              }}
+                              bottom="-60px"
+                              transform="translateX(-90%)"
+                            >
+                              <MaterialIcon
+                                icon="edit"
+                                style={{ fontSize: '20px', marginTop: '2px' }}
+                              />
+                              <EditPopoverText data-testid="repository-edit-btn">
+                                Edit
+                              </EditPopoverText>
+                            </EditPopoverContent>
+                          </EditPopover>
+                        )}
+                      </OptionsWrap>
                       <RepoName>{repository.name} : </RepoName>
                       <EuiToolTip position="top" content={repository.url}>
                         <a href={repository.url} target="_blank" rel="noreferrer">
@@ -697,13 +734,17 @@ const WorkspaceMission = () => {
                       data-testid="schematic-option-btn"
                       style={{ transform: 'rotate(90deg)' }}
                     />
-                    <button
-                      style={{ display: displaySchematic ? 'block' : 'none' }}
-                      onClick={toggleSchematicModal}
-                      data-testid="schematic-edit-btn"
-                    >
-                      Edit
-                    </button>
+                    <EditPopover style={{ display: displaySchematic ? 'block' : 'none' }}>
+                      <EditPopoverTail bottom="-30px" left="-27px" />
+                      <EditPopoverContent
+                        onClick={toggleSchematicModal}
+                        bottom="-60px"
+                        transform="translateX(-90%)"
+                      >
+                        <MaterialIcon icon="edit" style={{ fontSize: '20px', marginTop: '2px' }} />
+                        <EditPopoverText data-testid="schematic-edit-btn">Edit</EditPopoverText>
+                      </EditPopoverContent>
+                    </EditPopover>
                   </OptionsWrap>
                   {workspaceData?.schematic_url ? (
                     <a

diff --git a/src/people/widgetViews/workspace/WorkspacePhase.tsx b/src/people/widgetViews/workspace/WorkspacePhase.tsx
@@ -3,7 +3,13 @@ import { EuiSpacer, EuiTabbedContentProps, EuiTabbedContentTab } from '@elastic/
 import { Button } from 'components/common';
 import MaterialIcon from '@material/react-material-icon';
 import styled from 'styled-components';
-import { Label } from 'pages/tickets/style';
+import {
+  EditPopover,
+  EditPopoverContent,
+  EditPopoverTail,
+  EditPopoverText,
+  Label
+} from 'pages/tickets/style';
 import { useStores } from 'store';
 import { useHistory } from 'react-router';
 import { observer } from 'mobx-react-lite';
@@ -13,8 +19,7 @@ import {
   TabContent,
   PostABounty,
   DisplayBounties,
-  TabContentOptions,
-  WorkspaceOption
+  TabContentOptions
 } from '../workspace/style';
 import addBounty from '../../../pages/tickets/workspace/workspaceHeader/Icons/addBounty.svg';
 import { userCanManageBounty } from '../../../helpers';
@@ -66,13 +71,15 @@ const PhaseOptions = (props: PhaseOptionProps) => {
         style={{ transform: 'rotate(90deg)' }}
       />
       {showOptions && (
-        <WorkspaceOption>
-          <ul>
-            <li data-testid={`phase-edit-btn`} onClick={close}>
+        <EditPopover>
+          <EditPopoverTail />
+          <EditPopoverContent>
+            <MaterialIcon icon="edit" style={{ fontSize: '20px', marginTop: '2px' }} />
+            <EditPopoverText data-testid={`phase-edit-btn`} onClick={close}>
               Edit
-            </li>
-          </ul>
-        </WorkspaceOption>
+            </EditPopoverText>
+          </EditPopoverContent>
+        </EditPopover>
       )}
     </TabContentOptions>
   );