Add Branch Select Component (displays Ref for branch with dropdown icon)

CTimmerman · Sep 12, 2022 · 11283a5 · 11283a5
1 parent c38f99b
commit 11283a5
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 1 deletion.
diff --git a/app/src/ui/branches/branch-select.tsx b/app/src/ui/branches/branch-select.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { Branch } from '../../models/branch'
+import { Ref } from '../lib/ref'
+import { Octicon } from '../octicons'
+import * as OcticonSymbol from '../octicons/octicons.generated'
+
+interface IBranchSelectProps {
+  /** The selected branch. */
+  readonly selectedBranch: Branch
+
+  /** Called when the user changes the selected branch. */
+  readonly onChange?: (branch: Branch) => void
+}
+
+/**
+ * A branch select element for filter and selecting a branch.
+ */
+export class BranchSelect extends React.Component<IBranchSelectProps, {}> {
+  public render() {
+    return (
+      <div className="branch-select-component">
+        <Ref>
+          {this.props.selectedBranch.name}{' '}
+          <Octicon symbol={OcticonSymbol.triangleDown} />
+        </Ref>
+      </div>
+    )
+  }
+}
diff --git a/app/src/ui/open-pull-request/open-pull-request-header.tsx b/app/src/ui/open-pull-request/open-pull-request-header.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { Branch } from '../../models/branch'
+import { BranchSelect } from '../branches/branch-select'
 import { DialogHeader } from '../dialog/header'
 import { createUniqueId } from '../lib/id-pool'
 import { Ref } from '../lib/ref'
@@ -43,7 +44,7 @@ export class OpenPullRequestDialogHeader extends React.Component<
       >
         <div className="break"></div>
         <div className="base-branch-details">
-          Merge {commits} into <Ref>{baseBranch.name}</Ref> from{' '}
+          Merge {commits} into <BranchSelect selectedBranch={baseBranch} /> from{' '}
           <Ref>{currentBranch.name}</Ref>.
         </div>
       </DialogHeader>

diff --git a/app/styles/_ui.scss b/app/styles/_ui.scss
@@ -99,3 +99,4 @@
 @import 'ui/_pull-request-quick-view';
 @import 'ui/discard-changes-retry';
 @import 'ui/_git-email-not-found-warning';
+@import 'ui/_branch-select.scss';
diff --git a/app/styles/ui/_branch-select.scss b/app/styles/ui/_branch-select.scss
@@ -0,0 +1,7 @@
+.branch-select-component {
+  display: inline-flex;
+
+  .ref-component {
+    display: inline-flex;
+  }
+}