Always show select branch detail

BlueBasher · Jan 11, 2024 · 4c84a87 · 4c84a87
1 parent 1b3f764
commit 4c84a87
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 64 deletions.
diff --git a/configs/dev.json b/configs/dev.json
@@ -2,6 +2,6 @@
   "name": "Easy Branch Creator Dev",
   "id": "bluebasher-easy-branch-creator-dev",
   "baseUri": "https://localhost:3000",
-  "version": "0.0.0.7",
+  "version": "0.0.0.10",
   "public": false
 }
diff --git a/src/create-branch/create-branch.tsx b/src/create-branch/create-branch.tsx
@@ -1,10 +1,9 @@
 import * as SDK from "azure-devops-extension-sdk";
-import { getClient, ILocationService, CommonServiceIds, IProjectPageService, IProjectInfo, IHostPageLayoutService } from "azure-devops-extension-api";
+import { ILocationService, CommonServiceIds, IProjectPageService, IProjectInfo, IHostPageLayoutService } from "azure-devops-extension-api";
 import { CoreRestClient } from "azure-devops-extension-api/Core";
-import { GitRestClient } from "azure-devops-extension-api/Git";
 
 import { BranchCreator } from "../branch-creator";
-import { ISelectRepositoryResult } from "../select-repository/select-repository";
+import { ISelectBranchDetailsResult } from "../select-branch-details/select-branch-details";
 
 function createBranchFromWorkItem() {
     "use strict";
@@ -23,32 +22,23 @@ function createBranchFromWorkItem() {
             const gitBaseUrl = `${hostBaseUrl}${(hostBaseUrl.toLowerCase().indexOf(host.name.toLowerCase()) == -1 ? `${host.name}/` : "")}${project.name}/_git`;
 
             const branchCreator = new BranchCreator();
-            const gitRestClient = getClient(GitRestClient);
-            const repositories = await gitRestClient.getRepositories(project.name);
-            if (repositories.length === 1) {
-                getWorkItemIds(actionContext).forEach((id: number) => {
-                    branchCreator.createBranch(id, repositories[0].id, repositories[0].name, project, gitBaseUrl);
-                });
-            }
-            else {
-                const dialogService = await SDK.getService<IHostPageLayoutService>(CommonServiceIds.HostPageLayoutService);
-                const workItems = getWorkItemIds(actionContext);
-                dialogService.openCustomDialog<ISelectRepositoryResult | undefined>(SDK.getExtensionContext().id + ".select-repository", {
-                    title: "Select Repository",
-                    lightDismiss: false,
-                    configuration: {
-                        projectName: project.name,
-                        workItems: workItems
-                    },
-                    onClose: (result: ISelectRepositoryResult | undefined) => {
-                        if (result !== undefined && result.repositoryId !== undefined && result.repositoryName !== undefined) {
-                            workItems.forEach((id: number) => {
-                                branchCreator.createBranch(id, result.repositoryId!, result.repositoryName!, project, gitBaseUrl);
-                            });
-                        }
+            const dialogService = await SDK.getService<IHostPageLayoutService>(CommonServiceIds.HostPageLayoutService);
+            const workItems = getWorkItemIds(actionContext);
+            dialogService.openCustomDialog<ISelectBranchDetailsResult | undefined>(SDK.getExtensionContext().id + ".select-branch-details", {
+                title: "Select Branch Details",
+                lightDismiss: false,
+                configuration: {
+                    projectName: project.name,
+                    workItems: workItems
+                },
+                onClose: (result: ISelectBranchDetailsResult | undefined) => {
+                    if (result !== undefined && result.repositoryId !== undefined && result.repositoryName !== undefined) {
+                        workItems.forEach((id: number) => {
+                            branchCreator.createBranch(id, result.repositoryId!, result.repositoryName!, project, gitBaseUrl);
+                        });
                     }
-                });
-            }
+                }
+            });
         }
     }
 };

diff --git a/src/select-repository/select-repository.html → ...branch-details/select-branch-details.html b/src/select-repository/select-repository.html → ...branch-details/select-branch-details.html
@@ -2,6 +2,6 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
     <body>
         <div id="root"></div>
-        <script type="text/javascript" src="select-repository.js" charset="utf-8"></script>
+        <script type="text/javascript" src="select-branch-details.js" charset="utf-8"></script>
     </body>
 </html>
diff --git a/src/select-repository/select-repository.scss → ...branch-details/select-branch-details.scss b/src/select-repository/select-repository.scss → ...branch-details/select-branch-details.scss
@@ -7,7 +7,7 @@
     display: flex;
 }
 
-.select-repository {
+.select-branch-details {
     font-size: $fontSizeM;
 }
 
@@ -16,24 +16,29 @@
     margin-right: 4px;
 }
 
-.select-repository-button-bar {
+.select-branch-details-button-bar {
     margin-top: 10px;
     margin-bottom: 10px;
     display: block;
     text-align: right;
 }
 
-.select-repository .branchNames p {
-    margin-block-start: 10px;
+.select-branch-details .bolt-editable-dropdown {
+    margin-block-start: 0px;
+    margin-block-end: 10px;
+}
+
+.select-branch-details .branchNames p {
+    margin-block-start: 4px;
     margin-block-end: 0px;
 }
 
-.select-repository .branchNames ul {
+.select-branch-details .branchNames ul {
     margin-block-start: 4px;
     margin-block-end: 0px;
 }
 
-.select-repository .branchNames li {
+.select-branch-details .branchNames li {
     list-style-type: disc;
     list-style-position: inside;
 }
diff --git a/src/select-repository/select-repository.tsx → ...-branch-details/select-branch-details.tsx b/src/select-repository/select-repository.tsx → ...-branch-details/select-branch-details.tsx
@@ -1,4 +1,4 @@
-import "./select-repository.scss";
+import "./select-branch-details.scss";
 
 import * as React from "react";
 import * as ReactDOM from "react-dom";
@@ -18,22 +18,22 @@ import { WorkItemTrackingRestClient } from "azure-devops-extension-api/WorkItemT
 import { BranchCreator } from "../branch-creator";
 import { StorageService } from "../storage-service";
 
-export interface ISelectRepositoryResult {
+export interface ISelectBranchDetailsResult {
     repositoryName?: string;
     repositoryId?: string;
 }
 
-interface ISelectRepositoryState {
+interface ISelectBranchDetailsState {
     projectName?: string;
     workItems: number[];
-    selectedValue?: string;
+    selectedRepositoryId?: string;
     ready: boolean;
     branchNames: string[];
 }
 
-class SelectRepositoryForm extends React.Component<{}, ISelectRepositoryState> {
+class SelectBranchDetailsForm extends React.Component<{}, ISelectBranchDetailsState> {
     private repositories = new ObservableArray<IListBoxItem<string>>();
-    private selection = new DropdownSelection();
+    private repositorySelection = new DropdownSelection();
 
     constructor(props: {}) {
         super(props);
@@ -45,26 +45,33 @@ class SelectRepositoryForm extends React.Component<{}, ISelectRepositoryState> {
 
         SDK.ready().then(async () => {
             const config = SDK.getConfiguration();
-            this.setState({ projectName: config.projectName, workItems: config.workItems, selectedValue: config.initialValue, ready: false, branchNames: [] });
+            this.setState({ projectName: config.projectName, workItems: config.workItems, selectedRepositoryId: config.initialValue, ready: false, branchNames: [] });
 
             if (config.dialog) {
                 SDK.resize();
             }
 
             await this.loadRepositories();
             await this.setBranchNames();
+
+            this.setState(prevState => ({
+                ...prevState,
+                ready: true
+            }));
         });
     }
 
     public render(): JSX.Element {
         return (
-            <div className="select-repository flex-column flex-grow">
+            <div className="select-branch-details flex-column flex-grow">
+                {this.repositories.length > 1
+                ?
                 <EditableDropdown<string>
                     disabled={!this.state.ready}
                     items={this.repositories}
-                    selection={this.selection}
+                    selection={this.repositorySelection}
                     onValueChange={(item?: IListBoxItem<string>) => {
-                        this.setSelectedValue(item?.data);
+                        this.setSelectedRepositoryId(item?.data);
                     }}
                     renderItem={(rowIndex: number, columnIndex: number, tableColumn: ITableColumn<IListBoxItem<string>>, tableItem: IListBoxItem<string>) => {
                         return (
@@ -87,6 +94,8 @@ class SelectRepositoryForm extends React.Component<{}, ISelectRepositoryState> {
                         );
                     }}
                 />
+                : null
+                }
                 <div className="branchNames">
                     <p>Branch Name:</p>
                     <div>
@@ -95,12 +104,12 @@ class SelectRepositoryForm extends React.Component<{}, ISelectRepositoryState> {
                         </ul>
                     </div>
                 </div>
-                <ButtonGroup className="select-repository-button-bar">
+                <ButtonGroup className="select-branch-details-button-bar">
                     <Button
-                        disabled={!this.state.selectedValue}
+                        disabled={!this.state.selectedRepositoryId}
                         primary={true}
                         text="Create Branch"
-                        onClick={() => this.close(this.state.selectedValue)}
+                        onClick={() => this.close(this.state.selectedRepositoryId)}
                     />
                     <Button
                         text="Cancel"
@@ -112,7 +121,7 @@ class SelectRepositoryForm extends React.Component<{}, ISelectRepositoryState> {
     }
 
     private close(repositoryId: string | undefined) {
-        const result: ISelectRepositoryResult = {
+        const result: ISelectBranchDetailsResult = {
             repositoryId: repositoryId,
             repositoryName: repositoryId ? this.repositories.value.find((x) => x.id === repositoryId)?.text : undefined
         };
@@ -128,21 +137,16 @@ class SelectRepositoryForm extends React.Component<{}, ISelectRepositoryState> {
         const repositories = await gitRestClient.getRepositories(this.state.projectName);
         this.repositories.push(...repositories.map(t => { return { id: t.id, data: t.id, text: t.name } }));
 
-        if (!!!this.state.selectedValue && this.repositories.length > 0) {
-            this.setSelectedValue(repositories[0].id);
-            this.selection.select(0);
+        if (!!!this.state.selectedRepositoryId && this.repositories.length > 0) {
+            this.setSelectedRepositoryId(repositories[0].id);
+            this.repositorySelection.select(0);
         }
-
-        this.setState(prevState => ({
-            ...prevState,
-            ready: true
-        }))
     }
 
-    private setSelectedValue(repositoryId?: string) {
+    private setSelectedRepositoryId(repositoryId?: string) {
         this.setState(prevState => ({
             ...prevState,
-            selectedValue: repositoryId
+            selectedRepositoryId: repositoryId
         }));
     }
 
@@ -167,4 +171,4 @@ class SelectRepositoryForm extends React.Component<{}, ISelectRepositoryState> {
     }
 }
 
-ReactDOM.render(<SelectRepositoryForm />, document.getElementById("root"));
+ReactDOM.render(<SelectBranchDetailsForm />, document.getElementById("root"));
diff --git a/vss-extension.json b/vss-extension.json
@@ -81,11 +81,11 @@
       }
     },
     {
-      "id": "select-repository",
+      "id": "select-branch-details",
       "type": "ms.vss-web.external-content",
-      "description": "The content to be displayed in the dialog",
+      "description": "The details for the branch to create",
       "properties": {
-        "uri": "dist/select-repository/select-repository.html"
+        "uri": "dist/select-branch-details/select-branch-details.html"
       }
     },
     {