Merge pull request stakwork#657 from aliraza556/edit-feature-function…

…ality Add Feature Name Editing Functionality to Feature Page
MahtabBukhari · Nov 21, 2024 · c44c6d3 · c44c6d3
2 parents d979976 + 2962c26
commit c44c6d3
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 5 deletions.
diff --git a/src/pages/tickets/style.ts b/src/pages/tickets/style.ts
@@ -445,3 +445,28 @@ export const EditPopoverText = styled.span`
   font-weight: 600;
   color: #333;
 `;
+
+export const FeatureOptionsWrap = styled.div`
+  right: 6px;
+  top: 4px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+  margin-left: auto;
+
+  .MaterialIcon {
+    font-style: normal;
+    font-weight: 900;
+    font-size: 2rem;
+  }
+
+  button {
+    border: 0.5px solid #000000;
+    font-size: 0.8rem;
+    font-weight: 700;
+    border-radius: 5px;
+    padding: 2px 10px;
+  }
+`;
diff --git a/src/people/widgetViews/WorkspaceFeature.tsx b/src/people/widgetViews/WorkspaceFeature.tsx
@@ -25,7 +25,8 @@ import {
   EditPopover,
   EditPopoverTail,
   EditPopoverText,
-  EditPopoverContent
+  EditPopoverContent,
+  FeatureOptionsWrap
 } from 'pages/tickets/style';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
@@ -40,7 +41,7 @@ import { useDeleteConfirmationModal } from '../../components/common';
 import {
   ActionButton,
   ButtonWrap,
-  HeadNameWrap,
+  FeatureHeadNameWrap,
   FeatureHeadWrap,
   WorkspaceName,
   UserStoryField,
@@ -57,7 +58,9 @@ import {
   AudioButtonWrap,
   AudioButtonGroup,
   AudioModalBody,
-  StyledEuiModalFooter
+  StyledEuiModalFooter,
+  FeatureModalBody,
+  FeatureModalFooter
 } from './workspace/style';
 import WorkspacePhasingTabs from './workspace/WorkspacePhase';
 import { Phase, Toast } from './workspace/interface';
@@ -461,6 +464,10 @@ const WorkspaceFeature = () => {
   const [toasts, setToasts] = useState<Toast[]>([]);
   const [userRoles, setUserRoles] = useState<any[]>([]);
   const [workspaceData, setWorkspaceData] = useState<Workspace>();
+  const [editFeatureName, setEditFeatureName] = useState<string>(featureData?.name || '');
+  const [isEditModalOpen, setIsEditModalOpen] = useState<boolean>(false);
+  const [displayNameOptions, setDisplayNameOptions] = useState<boolean>(false);
+
   const history = useHistory();
 
   const isWorkspaceAdmin =
@@ -704,6 +711,26 @@ const WorkspaceFeature = () => {
     }
   };
 
+  const openEditModal = () => {
+    setEditFeatureName(featureData?.name || '');
+    setIsEditModalOpen(true);
+  };
+
+  const closeEditModal = () => {
+    setIsEditModalOpen(false);
+  };
+
+  const handleUpdateFeatureName = async () => {
+    const body = {
+      uuid: featureData?.uuid ?? '',
+      name: editFeatureName,
+      workspace_uuid: featureData?.workspace_uuid ?? ''
+    };
+    await main.addWorkspaceFeature(body);
+    await getFeatureData();
+    setIsEditModalOpen(false);
+  };
+
   return editWorkspaceDisabled ? (
     <FullNoBudgetWrap>
       <MaterialIcon
@@ -722,7 +749,7 @@ const WorkspaceFeature = () => {
   ) : (
     <FeatureBody>
       <FeatureHeadWrap>
-        <HeadNameWrap>
+        <FeatureHeadNameWrap>
           <MaterialIcon
             onClick={() => history.push(`/workspace/${workspaceData?.uuid}`)}
             icon={'arrow_back'}
@@ -732,7 +759,65 @@ const WorkspaceFeature = () => {
             }}
           />
           <WorkspaceName>{featureData?.name}</WorkspaceName>
-        </HeadNameWrap>
+          <FeatureOptionsWrap>
+            <MaterialIcon
+              icon="more_horiz"
+              className="MaterialIcon"
+              onClick={() => setDisplayNameOptions(!displayNameOptions)}
+              data-testid="feature-name-btn"
+            />
+            {displayNameOptions && (
+              <EditPopover>
+                <EditPopoverTail />
+                <EditPopoverContent
+                  onClick={() => {
+                    openEditModal();
+                    setDisplayNameOptions(false);
+                  }}
+                >
+                  <MaterialIcon icon="edit" style={{ fontSize: '20px', marginTop: '2px' }} />
+                  <EditPopoverText data-testid="feature-name-edit-btn">Edit</EditPopoverText>
+                </EditPopoverContent>
+              </EditPopover>
+            )}
+          </FeatureOptionsWrap>
+        </FeatureHeadNameWrap>
+        {isEditModalOpen && (
+          <EuiOverlayMask>
+            <StyledModal>
+              <EuiModalHeader>
+                <EuiText>
+                  <h2>Edit Feature Name</h2>
+                </EuiText>
+              </EuiModalHeader>
+              <FeatureModalBody>
+                <Label>Feature Name</Label>
+                <Input
+                  placeholder="Edit Feature Name"
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    setEditFeatureName(e.target.value)
+                  }
+                  value={editFeatureName}
+                  data-testid="edit-feature-name-input"
+                />
+              </FeatureModalBody>
+              <FeatureModalFooter>
+                <StoriesButtonGroup>
+                  <ActionButton color="cancel" onClick={closeEditModal}>
+                    Cancel
+                  </ActionButton>
+                  <ActionButton
+                    data-testid="feature-name-save-btn"
+                    onClick={handleUpdateFeatureName}
+                    color="primary"
+                  >
+                    Update
+                  </ActionButton>
+                </StoriesButtonGroup>
+              </FeatureModalFooter>
+            </StyledModal>
+          </EuiOverlayMask>
+        )}
       </FeatureHeadWrap>
       <FeatureDataWrap>
         <WorkspaceEditableField

diff --git a/src/people/widgetViews/workspace/style.ts b/src/people/widgetViews/workspace/style.ts
@@ -1474,6 +1474,24 @@ export const SendStoriesButton = styled.button`
   }
 `;
 
+export const FeatureModalBody = styled.div`
+  margin: 5px 0 0 27px;
+  width: 100%;
+`;
+
+export const FeatureModalFooter = styled(EuiModalFooter)`
+  padding: 4px 15px 15px;
+`;
+
+export const FeatureHeadNameWrap = styled.div`
+  display: flex;
+  align-items: center;
+  width: 80rem;
+  @media only screen and (max-width: 500px) {
+    margin-bottom: 20px;
+  }
+`;
+
 export const FlexContainer = styled.div`
   display: flex;
   align-items: center;