Merge pull request stakwork#533 from stakwork/feature-add-repos-to-wo…

…rkspace Feature add repos to workspace
aliraza556 · May 23, 2024 · f5f8548 · f5f8548
2 parents f5b63fb + de5aa2e
commit f5f8548
Show file tree

Hide file tree

Showing 12 changed files with 811 additions and 117 deletions.
diff --git a/cypress/e2e/53_workspaceMission.cy.ts b/cypress/e2e/53_workspaceMission.cy.ts
@@ -49,6 +49,42 @@ describe('Create Workspace And Update Mission', () => {
     cy.contains(missionStatment).should('exist', { timeout: 1000 });
     cy.contains(tacticsStatment).should('exist', { timeout: 1000 });
 
+    cy.get('button').contains('Add Repository').click();
+    cy.wait(500);
+
+    const repoName = 'Repo Name';
+    cy.get('[data-testid="repo-name-input"]').type(repoName);
+    cy.get('[data-testid="repo-url-input"]').type('https://github.com/test/repo');
+    cy.get('button').contains('Save').click();
+    cy.wait(500);
+
+    cy.contains('Add New Repository').should('not.exist');
+    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.wait(500);
+
+    const updatedRepoName = 'Updated Repo';
+    cy.get('[data-testid="repo-name-input"]').clear().type(updatedRepoName);
+    cy.get('[data-testid="repo-url-input"]').clear().type('https://github.com/updated/repo');
+    cy.get('button').contains('Save').click();
+    cy.wait(500);
+
+    cy.contains('Add New Repository').should('not.exist');
+    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('button').contains('Delete').click();
+    cy.wait(1000);
+
+    cy.get('button').contains('Delete').click();
+    cy.wait(1000);
+
+    cy.contains(updatedRepoName).should('not.exist');
+    cy.contains('https://github.com/updated/repo').should('not.exist');
+
     cy.logout('carol');
   });
 });
diff --git a/package.json b/package.json
@@ -208,4 +208,4 @@
   "devDependencies": {
     "cypress": "^13.6.3"
   }
-}
+}
diff --git a/src/components/common/DeleteConfirmationModal/DeleteConfirmationModal.tsx b/src/components/common/DeleteConfirmationModal/DeleteConfirmationModal.tsx
@@ -40,6 +40,7 @@ export const DeleteConfirmationModal = ({
             hovercolor={'#E96464'}
             activecolor={'#E15A5A'}
             shadowcolor={'#ED747480'}
+            data-testid="delete-confirmation"
             text="Delete"
             onClick={deleteHandler}
           />

diff --git a/src/pages/tickets/style.ts b/src/pages/tickets/style.ts
@@ -57,7 +57,28 @@ export const HeaderWrap = styled.div`
 export const DataWrap = styled.div`
   padding: 40px 50px;
   display: flex;
-  width: 50%;
+  width: 58%;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  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 DataWrap2 = styled.div`
+  padding: 0px;
+  display: flex;
+  width: 100%;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
@@ -80,12 +101,13 @@ export const FieldWrap = styled.div`
 `;
 
 export const Label = styled.h5`
-  font-size: 1.12rem;
+  font-size: 1.1rem;
   font-weight: bolder;
 `;
 
 export const Data = styled.div`
-  border: 1px solid #ccc;
+  border: 2px solid #dde1e5;
+  caret-color: #618aff;
   min-height: 50px;
   border-radius: 5px;
   padding: 20px 30px;
@@ -97,8 +119,8 @@ export const Data = styled.div`
   .MaterialIcon {
     font-style: normal;
     font-weight: 900;
-    font-size: 1.4rem;
-    color: #000000;
+    font-size: 1.3rem;
+    color: #36454f;
   }
 `;
 
@@ -149,10 +171,6 @@ export const TextArea = styled.textarea`
   }
 `;
 
-interface ButtonProps {
-  color?: string;
-}
-
 export const FeatureLabel = styled.p`
   color: var(--Text-2, #3c3f41);
   font-family: Barlow;
@@ -187,3 +205,69 @@ export const Spacer = styled.div`
   height: 10px;
   width: 100%;
 `;
+
+export const PageContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export const PaginationImg = styled.img`
+  cursor: pointer;
+`;
+
+export const FlexDiv = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 2px;
+
+  .euiPopover__anchor {
+    margin-top: 6px !important;
+  }
+`;
+
+export const FeatureLink = styled.a`
+  text-decoration: none;
+  color: #000;
+`;
+
+export const StyledList = styled.ul`
+  padding: 0;
+  margin-top: 10px;
+`;
+
+export const StyledListElement = styled.li`
+  display: flex;
+  align-items: center;
+`;
+
+interface PaginationButtonsProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  active: boolean;
+}
+
+export const PaginationButtons = styled.button<PaginationButtonsProps>`
+  border-radius: 3px;
+  width: 30px;
+  height: 30px;
+  flex-shrink: 0;
+  outline: none;
+  border: none;
+  text-align: center;
+  margin: 5px;
+  background: ${(props: any) => (props.active ? 'var(--Active-blue, #618AFF)' : 'white')};
+  color: ${(props: any) => (props.active ? 'white' : 'black')};
+`;
+
+export const ImgText = styled.h3`
+  color: #b0b7bc;
+  text-align: center;
+  font-family: 'Barlow';
+  font-size: 1.875rem;
+  font-style: normal;
+  font-weight: 800;
+  line-height: 1.0625rem;
+  letter-spacing: 0.01875rem;
+  text-transform: uppercase;
+  opacity: 0.5;
+  margin-bottom: 0;
+`;
diff --git a/src/people/widgetViews/Icons/threeDotsIcon.svg b/src/people/widgetViews/Icons/threeDotsIcon.svg
diff --git a/src/people/widgetViews/WorkspaceFeature.tsx b/src/people/widgetViews/WorkspaceFeature.tsx
@@ -2,11 +2,6 @@ import { EuiGlobalToastList, EuiLoadingSpinner } from '@elastic/eui';
 import {
   Body,
   FeatureBody,
-  FeatureLabel,
-  FeatureName,
-  Leftheader,
-  Header,
-  HeaderWrap,
   DataWrap,
   FieldWrap,
   Label,
@@ -15,11 +10,19 @@ import {
   TextArea
 } from 'pages/tickets/style';
 import React, { useCallback, useEffect, useState } from 'react';
+import history from 'config/history';
 import { useParams } from 'react-router-dom';
 import { useStores } from 'store';
 import { Feature } from 'store/interface';
 import MaterialIcon from '@material/react-material-icon';
-import { ActionButton, ButtonWrap } from './workspace/style';
+import {
+  ActionButton,
+  ButtonWrap,
+  HeadNameWrap,
+  FeatureHeadWrap,
+  WorkspaceName,
+  WorkspaceOption
+} from './workspace/style';
 
 type DispatchSetStateAction<T> = React.Dispatch<React.SetStateAction<T>>;
 
@@ -72,13 +75,15 @@ const WorkspaceEditableField = ({
             onClick={() => setDisplayOptions(!displayOptions)}
             data-testid={`${dataTestIdPrefix}-option-btn`}
           />
-          <button
-            style={{ display: displayOptions ? 'block' : 'none' }}
-            onClick={handleEditClick}
-            data-testid={`${dataTestIdPrefix}-edit-btn`}
-          >
-            Edit
-          </button>
+          {displayOptions && (
+            <WorkspaceOption>
+              <ul>
+                <li data-testid={`${dataTestIdPrefix}-edit-btn`} onClick={handleEditClick}>
+                  Edit
+                </li>
+              </ul>
+            </WorkspaceOption>
+          )}
         </OptionsWrap>
         {!isEditing ? (
           <div
@@ -184,15 +189,19 @@ const WorkspaceFeature: React.FC = () => {
 
   return (
     <FeatureBody>
-      <HeaderWrap>
-        <Header>
-          <Leftheader>
-            <FeatureName>
-              <FeatureLabel>{featureData?.name}</FeatureLabel>
-            </FeatureName>
-          </Leftheader>
-        </Header>
-      </HeaderWrap>
+      <FeatureHeadWrap>
+        <HeadNameWrap>
+          <MaterialIcon
+            onClick={() => history.goBack()}
+            icon={'arrow_back'}
+            style={{
+              fontSize: 25,
+              cursor: 'pointer'
+            }}
+          />
+          <WorkspaceName>{featureData?.name}</WorkspaceName>
+        </HeadNameWrap>
+      </FeatureHeadWrap>
       <DataWrap>
         <WorkspaceEditableField
           label="Feature Brief"
-Original file line number
+Diff line change
@@ Expand Up / @@ -208,4 +208,4 @@ @@
       "devDependencies": {
         "cypress": "^13.6.3"
       }
-    }
+    }