-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #20 from BlueBasher/feature/select-branch
Allow select of source branch
- Loading branch information
Showing
11 changed files
with
394 additions
and
234 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| @import "node_modules/azure-devops-ui/Core/_platformCommon.scss"; | ||
|
|
||
|
|
||
| #root { | ||
| height: 100%; | ||
| width: 100%; | ||
| display: flex; | ||
| } | ||
|
|
||
| .branch-details-form { | ||
| font-size: $fontSizeM; | ||
| } | ||
|
|
||
| .ms-Icon--GitLogo { | ||
| color: rgb(240, 81, 41); | ||
| margin-right: 4px; | ||
| } | ||
|
|
||
| .ms-Icon--BranchMerge { | ||
| margin-right: 4px; | ||
| } | ||
|
|
||
| .branch-details-form .branchNames { | ||
| height: 60px; | ||
| } | ||
|
|
||
| .branch-details-form .branchNames ul { | ||
| margin-block-start: 0px; | ||
| margin-block-end: 0px; | ||
| } | ||
|
|
||
| .branch-details-form .branchNames li { | ||
| list-style-type: disc; | ||
| list-style-position: inside; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,137 @@ | ||
| import "./branch-details-form.scss"; | ||
|
|
||
| import * as React from "react"; | ||
| import * as ReactDOM from "react-dom"; | ||
| import * as SDK from "azure-devops-extension-sdk"; | ||
| import { getClient } from "azure-devops-extension-api"; | ||
|
|
||
| import { Button } from "azure-devops-ui/Button"; | ||
| import { ButtonGroup } from "azure-devops-ui/ButtonGroup"; | ||
| import { WorkItemTrackingRestClient } from "azure-devops-extension-api/WorkItemTracking"; | ||
| import { BranchCreator } from "../branch-creator"; | ||
| import { StorageService } from "../storage-service"; | ||
| import { RepositorySelect } from "../repository-select/repository-select"; | ||
| import { BranchSelect } from "../branch-select/branch-select"; | ||
|
|
||
| export interface ISelectBranchDetailsResult { | ||
| repositoryId: string; | ||
| sourceBranchName: string; | ||
| } | ||
|
|
||
| interface ISelectBranchDetailsState { | ||
| projectName?: string; | ||
| workItems: number[]; | ||
| selectedRepositoryId?: string; | ||
| sourceBranchName?: string; | ||
| ready: boolean; | ||
| branchNames: string[]; | ||
| } | ||
|
|
||
| class BranchDetailsForm extends React.Component<{}, ISelectBranchDetailsState> { | ||
| constructor(props: {}) { | ||
| super(props); | ||
| this.state = { workItems: [], branchNames: [], ready: false }; | ||
| } | ||
|
|
||
| public componentDidMount() { | ||
| SDK.init(); | ||
|
|
||
| SDK.ready().then(async () => { | ||
| const config = SDK.getConfiguration(); | ||
| if (config.dialog) { | ||
| SDK.resize(undefined, 275); | ||
| } | ||
|
|
||
| this.setState({ projectName: config.projectName, workItems: config.workItems, selectedRepositoryId: config.initialValue, ready: false, branchNames: [] }); | ||
|
|
||
| await this.setBranchNames(); | ||
|
|
||
| this.setState(prevState => ({ | ||
| ...prevState, | ||
| ready: true | ||
| })); | ||
| }); | ||
| } | ||
|
|
||
| public render(): JSX.Element { | ||
| return ( | ||
| <div className="branch-details-form flex-column flex-grow rhythm-vertical-16"> | ||
| <div className="flex-grow"> | ||
| <RepositorySelect | ||
| projectName={this.state.projectName} | ||
| onRepositoryChange={(newRepositoryId) => this.onRepositoryChange(newRepositoryId)} /> | ||
| <BranchSelect | ||
| projectName={this.state.projectName} | ||
| repositoryId={this.state.selectedRepositoryId} | ||
| onBranchChange={(newBranchName) => this.onSourceBranchNameChange(newBranchName)} /> | ||
| <p>Branch Name</p> | ||
| <div className="branchNames flex-column scroll-auto"> | ||
| <div> | ||
| <ul> | ||
| {this.state.branchNames.map(b => <li key={b}>{b}</li>)} | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <ButtonGroup className="branch-details-form-button-bar "> | ||
| <Button | ||
| disabled={!this.state.selectedRepositoryId} | ||
| primary={true} | ||
| text="Create Branch" | ||
| onClick={() => this.close(this.state.selectedRepositoryId && this.state.sourceBranchName ? { | ||
| repositoryId: this.state.selectedRepositoryId, | ||
| sourceBranchName: this.state.sourceBranchName | ||
| } : undefined)} | ||
| /> | ||
| <Button | ||
| text="Cancel" | ||
| onClick={() => this.close(undefined)} | ||
| /> | ||
| </ButtonGroup> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| private close(result: ISelectBranchDetailsResult | undefined) { | ||
| const config = SDK.getConfiguration(); | ||
| if (config.dialog) { | ||
| config.dialog.close(result); | ||
| } | ||
| } | ||
|
|
||
| private onRepositoryChange(newRepositoryId?: string | undefined): void { | ||
| this.setState(prevState => ({ | ||
| ...prevState, | ||
| selectedRepositoryId: newRepositoryId | ||
| })); | ||
| } | ||
|
|
||
| private onSourceBranchNameChange(newBranchName?: string | undefined): void { | ||
| this.setState(prevState => ({ | ||
| ...prevState, | ||
| sourceBranchName: newBranchName | ||
| })); | ||
| } | ||
|
|
||
| private async setBranchNames() { | ||
| if (this.state.projectName) { | ||
| const workItemTrackingRestClient = getClient(WorkItemTrackingRestClient); | ||
| const storageService = new StorageService(); | ||
| const settingsDocument = await storageService.getSettings(); | ||
|
|
||
| const branchCreator = new BranchCreator(); | ||
| let branchNames: string[] = []; | ||
| for await (const workItemId of this.state.workItems) { | ||
| const branchName = await branchCreator.getBranchName(workItemTrackingRestClient, settingsDocument, workItemId, this.state.projectName!); | ||
| branchNames.push(branchName); | ||
| } | ||
|
|
||
| this.setState(prevState => ({ | ||
| ...prevState, | ||
| branchNames: branchNames | ||
| })); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| ReactDOM.render(<BranchDetailsForm />, document.getElementById("root")); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| import * as React from "react"; | ||
| import { getClient } from "azure-devops-extension-api"; | ||
| import { GitRestClient } from "azure-devops-extension-api/Git"; | ||
|
|
||
| import { EditableDropdown } from "azure-devops-ui/EditableDropdown"; | ||
| import { DropdownSelection } from "azure-devops-ui/Utilities/DropdownSelection"; | ||
| import { ObservableArray } from "azure-devops-ui/Core/Observable"; | ||
| import { IListBoxItem } from "azure-devops-ui/ListBox"; | ||
| import { ITableColumn, SimpleTableCell } from "azure-devops-ui/Table"; | ||
| import { Icon } from "azure-devops-ui/Icon"; | ||
|
|
||
| export interface IBranchSelectProps { | ||
| projectName?: string; | ||
| repositoryId?: string; | ||
| onBranchChange: (newBranchName?: string) => void; | ||
| } | ||
|
|
||
| interface IBranchSelectState { | ||
| ready: boolean; | ||
| } | ||
|
|
||
| export class BranchSelect extends React.Component<IBranchSelectProps, IBranchSelectState> { | ||
| private branches = new ObservableArray<IListBoxItem<string>>(); | ||
| private branchSelection = new DropdownSelection(); | ||
|
|
||
| constructor(props: { onBranchChange: (newBranchName?: string) => void }) { | ||
| super(props); | ||
| this.state = { ready: false }; | ||
| } | ||
|
|
||
| public async componentDidMount() { | ||
| await this.loadBranches(); | ||
|
|
||
| this.setState(prevState => ({ | ||
| ...prevState, | ||
| ready: true | ||
| })); | ||
| } | ||
|
|
||
| public async componentDidUpdate(prevProps: IBranchSelectProps) { | ||
| if (prevProps.repositoryId !== this.props.repositoryId) { | ||
| await this.loadBranches(); | ||
| } | ||
| } | ||
|
|
||
| public render(): JSX.Element { | ||
| return ( | ||
| <div className="flex-column"> | ||
| <label className="bolt-formitem-label body-m">Based on</label> | ||
| <EditableDropdown<string> | ||
| disabled={!this.state.ready} | ||
| items={this.branches} | ||
| selection={this.branchSelection} | ||
| onValueChange={(item?: IListBoxItem<string>) => { | ||
| this.setSelectedBranchName(item?.data); | ||
| }} | ||
| renderItem={(rowIndex: number, columnIndex: number, tableColumn: ITableColumn<IListBoxItem<string>>, tableItem: IListBoxItem<string>) => { | ||
| return ( | ||
| <SimpleTableCell | ||
| columnIndex={columnIndex} | ||
| key={tableItem.id} | ||
| tableColumn={tableColumn} | ||
| > | ||
| <div className="bolt-list-box-cell-container" | ||
| > | ||
| <span className="bolt-list-cell-text"> | ||
| <span className="text-ellipsis body-m"> | ||
| <Icon iconName="BranchMerge" /> | ||
| {tableItem.text} | ||
| </span> | ||
| </span> | ||
| </div> | ||
| </SimpleTableCell> | ||
| ); | ||
| }} | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| private async loadBranches() { | ||
| if (!!!this.props.repositoryId || !!!this.props.projectName) { | ||
| return; | ||
| } | ||
|
|
||
| const gitRestClient = getClient(GitRestClient); | ||
| const branches = await gitRestClient.getBranches(this.props.repositoryId, this.props.projectName); | ||
| this.branches.removeAll(); | ||
| this.branches.push(...branches.map(t => { return { id: t.name, data: t.name, text: t.name } })); | ||
|
|
||
| if (this.branches.length > 0) { | ||
| const repository = await gitRestClient.getRepository(this.props.repositoryId, this.props.projectName); | ||
| let branchIndex = repository ? this.branches.value.findIndex((x) => x.data === repository.defaultBranch.replace('refs/heads/', '')) : 0; | ||
| if (branchIndex === -1) { | ||
| branchIndex = 0; | ||
| } | ||
|
|
||
| this.setSelectedBranchName(branches[branchIndex].name); | ||
| this.branchSelection.select(branchIndex); | ||
| } | ||
| } | ||
|
|
||
| private setSelectedBranchName(branchName?: string) { | ||
| this.props.onBranchChange(branchName); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.