Update display when items have and have not been selected

This commit is contained in:
James Skemp 2024-04-23 18:50:37 -05:00
parent 66ed7656d2
commit bd34d3bd96
8 changed files with 33 additions and 17 deletions

View File

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

View File

@ -4,7 +4,7 @@ h2 {
margin-bottom: 0;
}
h3 {
p.iteration-dates {
margin-top: 0;
}

View File

@ -16,7 +16,6 @@ import { CoreRestClient, WebApiTeam } from "azure-devops-extension-api/Core";
import { Dropdown } from "azure-devops-ui/Dropdown";
import { ListSelection } from "azure-devops-ui/List";
import { IHubWorkItemHistory } from "./HubInterfaces";
import { getTypedWorkItem } from "./HubUtils";
import { IterationHistoryDisplay } from "./IterationHistoryDisplay";
import { UserStoryListing } from "./UserStoryListing";
@ -108,10 +107,10 @@ class HubContent extends React.Component<{}, IHubContentState> {
}
}
function sprintDatesHeading(selectedTeamIteration: TeamSettingsIteration | undefined) {
function sprintDatesHeading(selectedTeamIteration: TeamSettingsIteration | undefined): JSX.Element | null {
if (selectedTeamIteration) {
return (
<h3>{selectedTeamIteration.attributes.startDate.toLocaleDateString(undefined, { timeZone: 'UTC' })} - {selectedTeamIteration.attributes.finishDate.toLocaleDateString(undefined, { timeZone: 'UTC' })}</h3>
<p className="iteration-dates">{selectedTeamIteration.attributes.startDate.toLocaleDateString(undefined, { timeZone: 'UTC' })} - {selectedTeamIteration.attributes.finishDate.toLocaleDateString(undefined, { timeZone: 'UTC' })}</p>
);
} else {
return null;
@ -145,15 +144,12 @@ class HubContent extends React.Component<{}, IHubContentState> {
dismissOnSelect={true}
/>
<h2>Iteration History for {this.state.selectedTeamName} : {this.state.selectedTeamIterationName}</h2>
{this.state.selectedTeamIterationName && <h2>Iteration History for {this.state.selectedTeamName} : {this.state.selectedTeamIterationName}</h2>}
{sprintDatesHeading(this.state.selectedTeamIteration)}
<h4>Iteration User Story History</h4>
<IterationHistoryDisplay iteration={this.state.selectedTeamIteration} workItemHistory={this.state.workItemsHistory} />
<h4>User Stories</h4>
<p>These stories are or have been in this iteration.</p>
<UserStoryListing workItems={this.state.workItems}></UserStoryListing>
<UserStoryListing iteration={this.state.selectedTeamIteration} workItems={this.state.workItems}></UserStoryListing>
</Page>
);
}
@ -313,7 +309,6 @@ class HubContent extends React.Component<{}, IHubContentState> {
private async getTeamIterationData() {
await SDK.ready();
const teamContext = { projectId: this.state.project, teamId: this.state.selectedTeam, project: "", team: "" };
const selectedIteration = this.state.teamIterations.find(i => i.id === this.state.selectedTeamIterationId);
if (!selectedIteration) {

View File

@ -1,5 +1,5 @@
import { WorkItem } from "azure-devops-extension-api/WorkItemTracking";
import { IHubWorkItemHistory, IHubWorkItemIterationRevisions, ITypedWorkItem } from "./HubInterfaces";
import { IHubWorkItemIterationRevisions, ITypedWorkItem } from "./HubInterfaces";
export function getTypedWorkItem(workItem: WorkItem): ITypedWorkItem {
return {

View File

@ -28,3 +28,8 @@ td {
}
}
}
.iteration-history-display, .iteration-history-display.bolt-card {
margin-bottom: 1em;
overflow: visible;
}

View File

@ -4,6 +4,7 @@ import "./IterationHistoryDisplay.scss";
import { TeamSettingsIteration } from "azure-devops-extension-api/Work";
import { IHubWorkItemHistory, IHubWorkItemIterationRevisions, ITypedWorkItem, ITypedWorkItemWithRevision } from "./HubInterfaces";
import { getFlattenedRelevantRevisions, getIterationRelevantWorkItems, getTypedWorkItem } from "./HubUtils";
import { Card } from "azure-devops-ui/Card";
export interface IterationHistoryDisplayProps {
iteration: TeamSettingsIteration | undefined;
@ -22,9 +23,13 @@ export class IterationHistoryDisplay extends React.Component<IterationHistoryDis
};
}
public render(): JSX.Element {
public render(): JSX.Element | null {
const selectedIterationPath = this.props.iteration ? this.props.iteration.path : undefined;
if (!this.props.workItemHistory?.length) {
return null;
}
const iterationWorkItemRevisions: IHubWorkItemIterationRevisions[] = this.props.workItemHistory.map(wiHistory => {
const typedWorkItems: ITypedWorkItem[] = wiHistory.revisions.map(workItem => getTypedWorkItem(workItem));
@ -104,7 +109,8 @@ export class IterationHistoryDisplay extends React.Component<IterationHistoryDis
let totalStoryPoints = 0;
return (
<div>
<Card className="iteration-history-display"
titleProps={{ text: "Iteration User Story History", ariaLevel: 3 }}>
<table>
<thead>
<tr>
@ -188,7 +194,7 @@ export class IterationHistoryDisplay extends React.Component<IterationHistoryDis
}
</tbody>
</table>
</div>
</Card>
);
}
}

View File

@ -1,3 +1,10 @@
.user-story-listing, .bolt-card.user-story-listing {
margin-bottom: 1em;
overflow: visible;
}
.user-stories {
&>div {
margin-bottom: .75em;
}
}

View File

@ -2,12 +2,13 @@ import * as React from "react";
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 { ITypedWorkItem } from "./HubInterfaces";
import { getTypedWorkItem } from "./HubUtils";
import { TeamSettingsIteration } from "azure-devops-extension-api/Work";
export interface UserStoryListingProps {
iteration: TeamSettingsIteration | undefined;
workItems: WorkItem[];
}
@ -42,8 +43,10 @@ export class UserStoryListing extends React.Component<UserStoryListingProps> {
});
return (
<Card className="user-story-listing">
<Card className="user-story-listing"
titleProps={{ text: "User Stories", ariaLevel: 3 }}>
<section className="user-stories">
<p>These stories are or have been in this iteration.</p>
{workItemDisplay}
</section>
</Card>