azure-devops/enhanced-sprint-history
azure-devops
/
enhanced-sprint-history
1
0
Fork 0
Code Issues 1 Pull Requests Activity

Update user story listing to use custom markup instead of scrollable list

This commit is contained in:
James Skemp 2024-04-23 16:54:24 -05:00
parent e666b9dfa5
commit 66ed7656d2
3 changed files with 14 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
azure-devops-extension.json
View File

@ -2,7 +2,7 @@
"manifestVersion": 1,
"id": "enhanced-sprint-history",
"publisher": "JamesSkemp",
"version": "0.0.138",
"version": "0.0.140",
"name": "Enhanced Sprint History",
"description": "Azure DevOps Extension",
"categories": [

21
src/Hub/Hub.tsx
View File

@ -118,26 +118,6 @@ class HubContent extends React.Component<{}, IHubContentState> {
}
}
function displayUserStories(workItems: WorkItem[]) {
const typedWorkItems = workItems.map(workItem => getTypedWorkItem(workItem));
const workItemDisplay = typedWorkItems.map(workItem => {
return (
<div>
<a href={workItem.url} target="_blank">{workItem.id}</a> : {workItem.title} ({workItem.storyPoints})
<div className="current-iteration">Current Iteration: {workItem.iterationPath}</div>
<div className="current-state">{workItem.state}</div>
</div>
)
});
return (
<React.Fragment>
{workItemDisplay}
</React.Fragment>
);
}
return (
<Page className="enhanced-sprint-history flex-grow">
<Header title="Enhanced Sprint History"
@ -174,7 +154,6 @@ class HubContent extends React.Component<{}, IHubContentState> {
<h4>User Stories</h4>
<p>These stories are or have been in this iteration.</p>
<UserStoryListing workItems={this.state.workItems}></UserStoryListing>
{displayUserStories(this.state.workItems)}
</Page>
);
}

53
src/Hub/UserStoryListing.tsx
View File

@ -4,7 +4,6 @@ import "./UserStoryListing.scss";
import { Card } from "azure-devops-ui/Card";
import { ScrollableList, IListItemDetails, ListSelection, ListItem, IListRow } from "azure-devops-ui/List";
import { WorkItem } from "azure-devops-extension-api/WorkItemTracking";
import { ArrayItemProvider } from "azure-devops-ui/Utilities/Provider";
import { ITypedWorkItem } from "./HubInterfaces";
import { getTypedWorkItem } from "./HubUtils";
@ -14,7 +13,6 @@ export interface UserStoryListingProps {
export class UserStoryListing extends React.Component<UserStoryListingProps> {
private typedWorkItems: ITypedWorkItem[] = [];
private selection = new ListSelection(true);
constructor(props: UserStoryListingProps) {
super(props);
@ -33,47 +31,22 @@ export class UserStoryListing extends React.Component<UserStoryListingProps> {
return null;
}
const workItemDisplay = this.typedWorkItems.map(workItem => {
return (
<div>
<a href={workItem.url} target="_blank">{workItem.id}</a> : {workItem.title} ({workItem.storyPoints})
<div className="current-iteration secondary-text font-size-ms">Current Iteration: {workItem.iterationPath}</div>
<div className="current-state secondary-text font-size-ms">{workItem.state}</div>
</div>
)
});
return (
<Card className="user-story-listing">
<div style={{ display: "flex", height: "300px" }}>
<ScrollableList
itemProvider={new ArrayItemProvider(this.typedWorkItems)}
renderRow={this.renderRow}
selection={this.selection}
singleClickActivation={false}
onActivate={this.itemActivated}
width="100%"
/>
</div>
<section className="user-stories">
{workItemDisplay}
</section>
</Card>
);
}
private itemActivated(event: React.SyntheticEvent<HTMLElement, Event>, listRow: IListRow<ITypedWorkItem>): void {
window.open(listRow.data.url);
}
private renderRow = (
index: number,
item: ITypedWorkItem,
details: IListItemDetails<ITypedWorkItem>,
key?: string
): JSX.Element => {
return (
<ListItem key={key || "list-item" + index} index={index} details={details}>
<div className="list-example-row flex-row h-scroll-hidden">
<div
style={{ marginLeft: "10px", padding: "10px 0px" }}
className="flex-column h-scroll-hidden"
>
<span className="wrap-text">{item.id} : {item.title} ({item.storyPoints})</span>
<span className="fontSizeMS font-size-ms secondary-text wrap-text">
Current iteration: {item.iterationPath}<br />
{item.state}
</span>
</div>
</div>
</ListItem>
);
};
}