From da681bc8173746b8baf6596c49f7088c785c6da6 Mon Sep 17 00:00:00 2001
From: Pratik Parab <pratik.parab@outlook.com>
Date: Tue, 12 Mar 2024 18:08:55 +0530
Subject: [PATCH] added assigned to, tags and area to work item

---
 .../workitems/workItemDescription.scss        | 28 +++++++++-
 .../workitems/workItemDescription.tsx         | 51 +++++++++++++++++++
 src/model/workitem.ts                         |  6 ++-
 src/services/workItems.ts                     | 10 +++-
 4 files changed, 90 insertions(+), 5 deletions(-)

diff --git a/src/components/workitems/workItemDescription.scss b/src/components/workitems/workItemDescription.scss
index 1699b8d..8aa8ea5 100644
--- a/src/components/workitems/workItemDescription.scss
+++ b/src/components/workitems/workItemDescription.scss
@@ -14,7 +14,6 @@
     }
 }
 
-
 .work-item-description-bottom{
     border-radius: 6px;
     background-color: $neutral-4;
@@ -22,4 +21,31 @@
     min-height: 60px;
     margin: 1%;
     color : $primary-text;
+}
+
+.tag-pill {
+    border-radius: 20px;
+    background-color: var(--palette-black-alpha-6, rgba(0, 0, 0, 0.06));
+    padding: 5px;
+    margin: 0.5%;
+    font-size: 0.8em;
+}
+
+.details-row {
+    display: flex;
+}
+
+.details-column {
+    flex: 50%;
+    padding: 10px;
+}
+
+.persona-spacing { 
+    margin-left: 1%;
+    margin-right: 0.5%;
+    margin-top:-0.3%
+}
+
+.displayname-spacing { 
+    margin-top: 0.4%;
 }
\ No newline at end of file
diff --git a/src/components/workitems/workItemDescription.tsx b/src/components/workitems/workItemDescription.tsx
index bd0f90c..e8fda75 100644
--- a/src/components/workitems/workItemDescription.tsx
+++ b/src/components/workitems/workItemDescription.tsx
@@ -40,5 +40,56 @@ export const WorkItemDescription: React.StatelessComponent<{
             : null
         }
 
+        <div className="sub-header-warapper">
+            <SubTitle> Work Item Details </SubTitle>
+        </div>
+        <div className="work-item-description-bottom">
+            <div className="details-row">
+                <div className="details-column">
+                    <div className="flex-row">
+                        {props.workItem.AssignedTo ? (
+                            <>
+                                <b>Assigned to: </b>
+                                <div
+                                    className="vss-Persona extra-small-plus persona-spacing"
+                                    role="img"
+                                >
+                                    <img
+                                        className="vss-Persona-content using-image"
+                                        src={props.workItem.AssignedTo.imageUrl}
+                                        alt=""
+                                    />
+                                </div>
+                                <div className="identity-display-name flex-column displayname-spacing">
+                                    <span>
+                                        {props.workItem.AssignedTo.displayName}
+                                    </span>
+                                </div>
+                            </>
+                        ) : (
+                            <>
+                                <b>Assigned to: </b>
+                                <div className="identity-display-name flex-column">
+                                    <span>
+                                        <i>Unassigned</i>
+                                    </span>
+                                </div>
+                            </>
+                        )}
+                    </div>
+                    <br /> <b>Tags: </b>
+                    {props.workItem.Tags
+                        ? props.workItem.Tags.toString()
+                              .split(";")
+                              .map((tag: string) => (
+                                  <span className="tag-pill">{tag.trim()}</span>
+                              ))
+                        : null}
+                </div>
+                <div className="details-column">
+                    <b>Area Path: </b> {props.workItem.AreaPath}
+                </div>
+            </div>
+        </div>
     </>
 );
diff --git a/src/model/workitem.ts b/src/model/workitem.ts
index 9f56d28..eb65b27 100644
--- a/src/model/workitem.ts
+++ b/src/model/workitem.ts
@@ -10,6 +10,8 @@ export interface IWorkItem {
 
     icon?: string;
     color?: string;
-    AcceptanceCriteria?: any,
-
+    AcceptanceCriteria?: any;
+    AreaPath?: any;
+    Tags?: any;
+    AssignedTo?: any;
 }
diff --git a/src/services/workItems.ts b/src/services/workItems.ts
index f0107a8..872cbc9 100644
--- a/src/services/workItems.ts
+++ b/src/services/workItems.ts
@@ -140,6 +140,10 @@ export class WorkItemService implements IWorkItemService {
                         "System.WorkItemType",
                         "System.TeamProject",
                         "Microsoft.VSTS.Common.AcceptanceCriteria",
+                        "System.AssignedTo",
+                        "System.IterationPath",
+                        "System.Tags",
+                        "System.AreaPath"
                     ],
                     $expand: 0 /* None */,
                     errorPolicy: 2 /* Omit */
@@ -155,7 +159,10 @@ export class WorkItemService implements IWorkItemService {
                 title: wi.fields["System.Title"],
                 workItemType: wi.fields["System.WorkItemType"],
                 AcceptanceCriteria: wi.fields["Microsoft.VSTS.Common.AcceptanceCriteria"],
-                description: ""
+                description: "",
+                AreaPath: wi.fields["System.AreaPath"],
+                AssignedTo: wi.fields["System.AssignedTo"],
+                Tags: wi.fields["System.Tags"]
             };
         });
 
@@ -286,7 +293,6 @@ export class WorkItemService implements IWorkItemService {
             }
         }
 
-
         // Get work item data
         let workItemsFieldData = [];
         for (let i = 0; i < wiBatches.length; i++) {