Add Brief field to Feature screen

cypress/e2e/56_briefUpdateFeature.cy.ts

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

src/people/widgetViews/WorkspaceFeature.tsx

@@ -26,6 +26,9 @@ const WorkspaceFeature = () => {
   const { feature_uuid } = useParams<{ feature_uuid: string }>();
   const [featureData, setFeatureData] = useState<Feature>();
   const [loading, setLoading] = useState(true);
+  const [displayBrief, setDidplayBrief] = useState(false);
+  const [editBrief, setEditBrief] = useState(false);
+  const [brief, setBrief] = useState(featureData?.brief);
   const [displayArchitecture, setDidplayArchitecture] = useState(false);
   const [editArchitecture, setEditArchitecture] = useState(false);
   const [architecture, setArchitecture] = useState(featureData?.architecture);
@@ -59,6 +62,18 @@ const WorkspaceFeature = () => {
     );
   }
 
+  const editBriefActions = () => {
+    setEditBrief(!editBrief);
+    setDidplayBrief(false);
+  };
+
+  const briefChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newValue = e.target.value;
+    if (newValue.length) {
+      setBrief(newValue);
+    }
+  };
+
   const editArchitectureActions = () => {
     setEditArchitecture(!editArchitecture);
     setDidplayArchitecture(false);
@@ -71,6 +86,17 @@ const WorkspaceFeature = () => {
     }
   };
 
+  const submitBrief = async () => {
+    const body = {
+      brief: brief ?? '',
+      uuid: featureData?.uuid ?? '',
+      workspace_uuid: featureData?.workspace_uuid ?? ''
+    };
+    await main.addWorkspaceFeature(body);
+    await getFeatureData();
+    setEditBrief(false);
+  };
+
   const submitArchitecture = async () => {
     const body = {
       architecture: architecture ?? '',
@@ -95,6 +121,62 @@ const WorkspaceFeature = () => {
           </Header>
         </HeaderWrap>
         <DataWrap>
+          <FieldWrap>
+            <Label>Feature Brief</Label>
+            <Data>
+              <OptionsWrap>
+                <MaterialIcon
+                  icon={'more_horiz'}
+                  className="MaterialIcon"
+                  onClick={() => setDidplayBrief(!displayBrief)}
+                  data-testid="brief-option-btn"
+                />
+                <button
+                  style={{ display: displayBrief ? 'block' : 'none' }}
+                  onClick={editBriefActions}
+                  data-testid="brief-edit-btn"
+                >
+                  Edit
+                </button>
+              </OptionsWrap>
+              {!editBrief && (
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: featureData?.brief
+                      ? featureData.brief.replace(/\n/g, '<br/>')
+                      : 'No brief yet'
+                  }}
+                />
+              )}
+              {editBrief && (
+                <>
+                  <TextArea
+                    placeholder="Enter Brief"
+                    onChange={briefChange}
+                    value={brief ?? featureData?.brief}
+                    data-testid="brief-textarea"
+                    rows={10}
+                    cols={50}
+                  />
+                  <ButtonWrap>
+                    <ActionButton
+                      onClick={() => setEditBrief(!editBrief)}
+                      data-testid="brief-cancel-btn"
+                    >
+                      Cancel
+                    </ActionButton>
+                    <ActionButton
+                      color="primary"
+                      onClick={submitBrief}
+                      data-testid="brief-update-btn"
+                    >
+                      Update
+                    </ActionButton>
+                  </ButtonWrap>
+                </>
+              )}
+            </Data>
+          </FieldWrap>
           <FieldWrap>
             <Label>Architecture</Label>
             <Data>
@@ -122,7 +204,6 @@ const WorkspaceFeature = () => {
                   }}
                 />
               )}
-
               {editArchitecture && (
                 <>
                   <TextArea