@activecollab/components
Version:
ActiveCollab Components
693 lines (672 loc) • 28.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.LinkBranchOrPullRequestDialog = void 0;
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _ConnectRepositoryDialog = require("./ConnectRepositoryDialog");
var _Button = require("../../components/Button");
var _ChooseV = require("../../components/ChooseV2");
var _Dialog = require("../../components/Dialog");
var _Input = require("../../components/Input");
var _Label = require("../../components/Label");
var _Loaders = require("../../components/Loaders");
var _Select = require("../../components/Select");
var _SelectTrigger = require("../../components/SelectTrigger");
var _Typography = require("../../components/Typography");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
/**
* "Link Branch or Pull Request" dialog — shared by every `Presentation/Task
* Source` story (the empty state and the populated Source Code section) so the
* flow lives in one place.
*
* Three modes (ChooseV2): **Link Existing** (default), **New Branch**, **New
* Pull Request**. The primary button is always enabled; validation runs on
* click and outlines the offending field. Esc does not close the dialog (it
* would lose entered data) — this is an action dialog.
*
* On open the body shows a ~1s skeleton, standing in for the future API loads
* that will drive the repository / branch / PR pickers.
*
* The **Link Existing** picker is a grouped, multi-level select: options are
* grouped by repository (with the connection name in parentheses), each option
* carries a branch or pull-request icon, everything is sorted by name and
* filterable via the search box at the top. The menu is sized to match the
* trigger width.
*/
var SANS = '-apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", Arial, sans-serif';
/* ---- Mock data ------------------------------------------------------- */
var LINKABLES = [{
id: "pr-500",
kind: "pr",
// Deliberately long, to show the name truncating with an ellipsis while the
// right-aligned detail and radio stay visible.
name: "#500 Refactor rank recalculation to support multi-region contract archival and backfill",
repoId: "backend",
updatedMinutesAgo: 8,
author: "Nikola M."
}, {
id: "branch-cache",
kind: "branch",
name: "spike/rank-cache",
repoId: "backend",
updatedMinutesAgo: 30
}, {
id: "branch-export",
kind: "branch",
name: "feature/retainer-export-34",
repoId: "backend",
updatedMinutesAgo: 5 * 60
}, {
id: "pr-119900",
kind: "pr",
name: "#119900 Rank API endpoints",
repoId: "backend",
updatedMinutesAgo: 2 * 24 * 60,
author: "Ilija S."
}, {
id: "branch-fe-retainers",
kind: "branch",
name: "feature/retainers-ui-34",
repoId: "frontend",
updatedMinutesAgo: 2 * 60
}, {
id: "pr-412",
kind: "pr",
name: "#412 Contract list filters",
repoId: "frontend",
updatedMinutesAgo: 24 * 60,
author: "Marko K."
}, {
id: "mr-88",
kind: "pr",
name: "!88 Bump worker memory",
repoId: "infra",
updatedMinutesAgo: 3 * 24 * 60,
author: "Ana P."
}, {
id: "branch-deploy",
kind: "branch",
name: "chore/deploy-rank-cache",
repoId: "infra",
updatedMinutesAgo: 24 * 60
}];
var MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var pad = function pad(n) {
return String(n).padStart(2, "0");
};
/**
* Reproduces the format of ActiveCollab's standard `Ago` component
* (`Angie.functions.ago()`) for the mock: "Just now", "N minutes ago",
* "Today HH:mm", "Yesterday HH:mm", "MMM D. HH:mm", else "MMM D. YYYY HH:mm".
* Production must use the real component.
*/
var formatAgo = function formatAgo(minutesAgo) {
var now = new Date();
var then = new Date(now.getTime() - minutesAgo * 60000);
if (minutesAgo < 2) {
return "Just now";
}
if (minutesAgo < 60) {
return "".concat(Math.floor(minutesAgo), " minutes ago");
}
var time = "".concat(pad(then.getHours()), ":").concat(pad(then.getMinutes()));
if (then.toDateString() === now.toDateString()) {
return "Today ".concat(time);
}
var yesterday = new Date(now.getTime() - 24 * 60 * 60000);
if (then.toDateString() === yesterday.toDateString()) {
return "Yesterday ".concat(time);
}
var monthDay = "".concat(MONTHS[then.getMonth()], " ").concat(then.getDate(), ".");
if (then.getFullYear() === now.getFullYear()) {
return "".concat(monthDay, " ").concat(time);
}
return "".concat(monthDay, " ").concat(then.getFullYear(), " ").concat(time);
};
/**
* The detail shown on the right of an option: a branch keeps just the time of
* its last activity; a pull request appends the author ("… by Name").
*/
var linkableDetail = function linkableDetail(item) {
return item.kind === "pr" && item.author ? "".concat(formatAgo(item.updatedMinutesAgo), " by ").concat(item.author) : formatAgo(item.updatedMinutesAgo);
};
/**
* Grouped options for the Select. One group per repository, labelled
* "repo (Org)" and sorted by name; inside a group, branches and PRs are
* ordered by latest activity (freshest first). Each option carries a leading
* provider icon (GitHub / GitLab / Git) via the Select's `icon` slot; the
* service type is dropped from the group header since the icon now conveys it.
*/
var GROUPED_OPTIONS = _ConnectRepositoryDialog.PROJECT_REPOSITORIES.map(function (repo) {
var connection = _ConnectRepositoryDialog.CONNECTIONS.find(function (c) {
return c.id === repo.connectionId;
});
var icon = (0, _ConnectRepositoryDialog.connectionIcon)(connection === null || connection === void 0 ? void 0 : connection.service);
var items = LINKABLES.filter(function (l) {
return l.repoId === repo.id;
}).sort(function (a, b) {
return a.updatedMinutesAgo - b.updatedMinutesAgo;
}).map(function (l) {
return {
id: l.id,
name: l.name,
additionalInfo: linkableDetail(l),
icon
};
});
return {
id: repo.id,
name: connection ? "".concat(repo.name, " (").concat(connection.name, ")") : repo.name,
options: items
};
}).filter(function (group) {
return group.options.length > 0;
}).sort(function (a, b) {
return a.name.localeCompare(b.name);
});
var ALL_ITEMS = LINKABLES;
/* ---- Branch mock data (for the New Branch / New Pull Request bases) --- */
var BRANCHES = [
// activecollab/backend
{
id: "backend-main",
name: "main",
repoId: "backend",
isDefault: true,
updatedMinutesAgo: 60
}, {
id: "backend-cache",
name: "spike/rank-cache",
repoId: "backend",
updatedMinutesAgo: 30
}, {
id: "backend-export",
name: "feature/retainer-export-34",
repoId: "backend",
updatedMinutesAgo: 5 * 60
}, {
id: "backend-hotfix",
name: "hotfix/rank-typo",
repoId: "backend",
updatedMinutesAgo: 3 * 24 * 60
},
// activecollab/frontend
{
id: "frontend-main",
name: "main",
repoId: "frontend",
isDefault: true,
updatedMinutesAgo: 90
}, {
id: "frontend-retainers",
name: "feature/retainers-ui-34",
repoId: "frontend",
updatedMinutesAgo: 2 * 60
}, {
id: "frontend-filters",
name: "feature/contract-filters",
repoId: "frontend",
updatedMinutesAgo: 24 * 60
},
// activecollab/infrastructure
{
id: "infra-master",
name: "master",
repoId: "infra",
isDefault: true,
updatedMinutesAgo: 6 * 60
}, {
id: "infra-deploy",
name: "chore/deploy-rank-cache",
repoId: "infra",
updatedMinutesAgo: 24 * 60
}];
var repoBranches = function repoBranches(repoId) {
return BRANCHES.filter(function (b) {
return b.repoId === repoId;
});
};
var repoDefaultBranchId = function repoDefaultBranchId(repoId) {
var _repoBranches$find$id, _repoBranches$find;
return (_repoBranches$find$id = (_repoBranches$find = repoBranches(repoId).find(function (b) {
return b.isDefault;
})) === null || _repoBranches$find === void 0 ? void 0 : _repoBranches$find.id) !== null && _repoBranches$find$id !== void 0 ? _repoBranches$find$id : null;
};
/**
* Base-branch options (Create From / Merge Into): the default branch first with
* no timestamp, then the rest sorted by latest activity (freshest first), each
* with a muted "last activity" time.
*/
var baseBranchOptions = function baseBranchOptions(repoId) {
var branches = repoBranches(repoId);
var defaults = branches.filter(function (b) {
return b.isDefault;
}).map(function (b) {
return {
id: b.id,
name: b.name
};
});
var rest = branches.filter(function (b) {
return !b.isDefault;
}).sort(function (a, b) {
return a.updatedMinutesAgo - b.updatedMinutesAgo;
}).map(function (b) {
return {
id: b.id,
name: b.name,
additionalInfo: formatAgo(b.updatedMinutesAgo)
};
});
return [...defaults, ...rest];
};
/**
* Source-branch options (New Pull Request): the default branch is excluded — you
* don't open a PR to merge the trunk into a feature branch — and the rest are
* sorted by latest activity, each with a muted "last activity" time.
*/
var sourceBranchOptions = function sourceBranchOptions(repoId) {
return repoBranches(repoId).filter(function (b) {
return !b.isDefault;
}).sort(function (a, b) {
return a.updatedMinutesAgo - b.updatedMinutesAgo;
}).map(function (b) {
return {
id: b.id,
name: b.name,
additionalInfo: formatAgo(b.updatedMinutesAgo)
};
});
};
/* ---- Styles ---------------------------------------------------------- */
var StyledLinkBody = _styledComponents.default.div.withConfig({
displayName: "LinkBranchOrPullRequestDialog__StyledLinkBody",
componentId: "sc-2wiwoe-0"
})(["font-family:", ";.lk-tabbody{margin-top:18px;}.lk-field{margin-bottom:16px;}.lk-field:last-child{margin-bottom:0;}.lk-label{display:block;margin-bottom:6px;}.lk-control,.lk-control.c-input-wrapper{width:100%;max-width:none;}.lk-repo-hint{display:block;margin-top:8px;}.lk-repo-link{background:none;border:none;padding:0;font:inherit;color:var(--color-primary);cursor:pointer;}.lk-repo-link:hover{text-decoration:underline;}.lk-skeleton .sk-row{margin-bottom:18px;}.lk-skeleton .sk-choose{width:100%;height:36px;border-radius:6px;}.lk-skeleton .sk-label{width:160px;height:12px;margin-bottom:8px;}.lk-skeleton .sk-control{width:100%;height:40px;border-radius:6px;}"], SANS);
/**
* The grouped select menu renders through a portal, so the "match the trigger
* width" override has to be global, scoped to the menu's class. `$menuWidth` is
* measured from the trigger and injected here.
*/
var MenuGlobalStyle = (0, _styledComponents.createGlobalStyle)([".c-select.lk-existing-select-menu{", "}.c-select.lk-existing-select-menu .c-option--text + span{color:var(--color-theme-600);font-size:12px;}"], function (_ref) {
var $menuWidth = _ref.$menuWidth;
return $menuWidth ? "width: ".concat($menuWidth, "px !important; max-width: none !important;") : "";
});
/**
* Per-instance global style for a branch select menu: matches the trigger width
* and applies the standard muted styling to the right-aligned "last activity".
*/
var BranchMenuGlobalStyle = (0, _styledComponents.createGlobalStyle)([".c-select.", "{", "}.c-select.", " .c-option--text + span{color:var(--color-theme-600);font-size:12px;}"], function (p) {
return p.$cls;
}, function (p) {
return p.$w ? "width: ".concat(p.$w, "px !important; max-width: none !important;") : "";
}, function (p) {
return p.$cls;
});
var BranchSelectWrap = _styledComponents.default.div.withConfig({
displayName: "LinkBranchOrPullRequestDialog__BranchSelectWrap",
componentId: "sc-2wiwoe-1"
})(["font-family:", ";.branch-trigger{width:100%;max-width:none;}"], SANS);
/**
* Flat branch picker (Create From / Source Branch / Merge Into). The caller
* supplies the option order (default-first or activity-sorted); the DS internal
* alphabetical sort is disabled so that order is preserved.
*/
var BranchSelect = function BranchSelect(_ref2) {
var _options$find$name, _options$find;
var options = _ref2.options,
selected = _ref2.selected,
_onChange = _ref2.onChange,
_ref2$placeholder = _ref2.placeholder,
placeholder = _ref2$placeholder === void 0 ? "Select branch" : _ref2$placeholder;
var wrapRef = (0, _react.useRef)(null);
var _useState = (0, _react.useState)(),
_useState2 = _slicedToArray(_useState, 2),
menuWidth = _useState2[0],
setMenuWidth = _useState2[1];
var _useState3 = (0, _react.useState)(function () {
return "branch-select-menu-".concat(Math.random().toString(36).slice(2));
}),
_useState4 = _slicedToArray(_useState3, 1),
menuCls = _useState4[0];
var measure = (0, _react.useCallback)(function () {
if (wrapRef.current) {
setMenuWidth(wrapRef.current.offsetWidth);
}
}, []);
(0, _react.useEffect)(function () {
measure();
}, [measure]);
var selectedName = (_options$find$name = (_options$find = options.find(function (o) {
return o.id === selected;
})) === null || _options$find === void 0 ? void 0 : _options$find.name) !== null && _options$find$name !== void 0 ? _options$find$name : placeholder;
return /*#__PURE__*/_react.default.createElement(BranchSelectWrap, {
ref: wrapRef
}, /*#__PURE__*/_react.default.createElement(BranchMenuGlobalStyle, {
$cls: menuCls,
$w: menuWidth
}), /*#__PURE__*/_react.default.createElement(_Select.Select, {
options: options,
selected: selected === null ? undefined : selected,
onChange: function onChange(v) {
return _onChange(String(v));
},
placeholder: "Search branches",
selectClassName: menuCls,
onSelectOpen: measure,
disabledInternalSort: true,
forceCloseMenu: true,
target: /*#__PURE__*/_react.default.createElement(_SelectTrigger.SelectTrigger, {
className: "branch-trigger",
typographyProps: selected === null ? {
color: "tertiary"
} : undefined
}, selectedName)
}));
};
var MODE_OPTIONS = [{
id: "existing",
name: "Link Existing"
}, {
id: "branch",
name: "New Branch"
}, {
id: "pr",
name: "New Pull Request"
}];
var LinkBranchOrPullRequestDialog = exports.LinkBranchOrPullRequestDialog = function LinkBranchOrPullRequestDialog(_ref3) {
var _ALL_ITEMS$find$name, _ALL_ITEMS$find;
var open = _ref3.open,
onClose = _ref3.onClose;
var _useState5 = (0, _react.useState)("existing"),
_useState6 = _slicedToArray(_useState5, 2),
mode = _useState6[0],
setMode = _useState6[1];
var _useState7 = (0, _react.useState)(null),
_useState8 = _slicedToArray(_useState7, 2),
selected = _useState8[0],
setSelected = _useState8[1];
var _useState9 = (0, _react.useState)("feature/retainers-34"),
_useState0 = _slicedToArray(_useState9, 2),
branchName = _useState0[0],
setBranchName = _useState0[1];
var _useState1 = (0, _react.useState)("#34 Retainers & Contracts functionality"),
_useState10 = _slicedToArray(_useState1, 2),
prTitle = _useState10[0],
setPrTitle = _useState10[1];
var _useState11 = (0, _react.useState)(false),
_useState12 = _slicedToArray(_useState11, 2),
attempted = _useState12[0],
setAttempted = _useState12[1];
var _useState13 = (0, _react.useState)(true),
_useState14 = _slicedToArray(_useState13, 2),
loading = _useState14[0],
setLoading = _useState14[1];
var _useState15 = (0, _react.useState)(),
_useState16 = _slicedToArray(_useState15, 2),
menuWidth = _useState16[0],
setMenuWidth = _useState16[1];
// Repository picker (New Branch / New Pull Request) + connect-repository flow.
var _useState17 = (0, _react.useState)("backend"),
_useState18 = _slicedToArray(_useState17, 2),
repo = _useState18[0],
setRepo = _useState18[1];
var _useState19 = (0, _react.useState)(false),
_useState20 = _slicedToArray(_useState19, 2),
connectOpen = _useState20[0],
setConnectOpen = _useState20[1];
var _useState21 = (0, _react.useState)([]),
_useState22 = _slicedToArray(_useState21, 2),
extraRepos = _useState22[0],
setExtraRepos = _useState22[1];
// Branch bases. Create From / Merge Into default to the repo's default branch;
// Source Branch starts unselected.
var _useState23 = (0, _react.useState)(function () {
return repoDefaultBranchId("backend");
}),
_useState24 = _slicedToArray(_useState23, 2),
createFrom = _useState24[0],
setCreateFrom = _useState24[1];
var _useState25 = (0, _react.useState)(null),
_useState26 = _slicedToArray(_useState25, 2),
sourceBranch = _useState26[0],
setSourceBranch = _useState26[1];
var _useState27 = (0, _react.useState)(function () {
return repoDefaultBranchId("backend");
}),
_useState28 = _slicedToArray(_useState27, 2),
mergeInto = _useState28[0],
setMergeInto = _useState28[1];
// When the repository changes, reset the bases: default branch for
// Create From / Merge Into, nothing for Source Branch.
(0, _react.useEffect)(function () {
var defaultId = repoDefaultBranchId(repo);
setCreateFrom(defaultId);
setMergeInto(defaultId);
setSourceBranch(null);
}, [repo]);
var fieldRef = (0, _react.useRef)(null);
// Simulate the API loads that will drive the pickers: a ~1s skeleton on open.
(0, _react.useEffect)(function () {
if (!open) {
return undefined;
}
setLoading(true);
var timer = window.setTimeout(function () {
return setLoading(false);
}, 1000);
return function () {
return window.clearTimeout(timer);
};
}, [open]);
var measureMenu = (0, _react.useCallback)(function () {
if (fieldRef.current) {
setMenuWidth(fieldRef.current.offsetWidth);
}
}, []);
// Keep the menu width in sync with the trigger once the form is visible.
(0, _react.useEffect)(function () {
if (open && !loading && mode === "existing") {
measureMenu();
}
}, [open, loading, mode, measureMenu]);
// Submit is always enabled; validation runs on click and outlines fields.
var existingInvalid = attempted && mode === "existing" && selected === null;
var branchInvalid = attempted && mode === "branch" && branchName.trim() === "";
var titleInvalid = attempted && mode === "pr" && prTitle.trim() === "";
var primaryLabel = mode === "existing" ? "Link" : mode === "branch" ? "Create Branch" : "Create Pull Request";
var close = function close() {
setAttempted(false);
onClose();
};
var handleSubmit = function handleSubmit() {
var valid = mode === "existing" ? selected !== null : mode === "branch" ? branchName.trim() !== "" : prTitle.trim() !== "";
if (!valid) {
setAttempted(true);
return;
}
close();
};
var changeMode = function changeMode(next) {
setMode(next);
setAttempted(false);
};
var selectedLabel = (_ALL_ITEMS$find$name = (_ALL_ITEMS$find = ALL_ITEMS.find(function (o) {
return o.id === selected;
})) === null || _ALL_ITEMS$find === void 0 ? void 0 : _ALL_ITEMS$find.name) !== null && _ALL_ITEMS$find$name !== void 0 ? _ALL_ITEMS$find$name : "Select branch or pull request";
// Repositories already on the project (plus any just connected), and the
// remaining ones that can still be connected from here.
var projectRepos = [..._ConnectRepositoryDialog.PROJECT_REPOSITORIES, ...extraRepos];
var connectableRepos = _ConnectRepositoryDialog.CONNECTABLE_REPOSITORIES.filter(function (r) {
return !projectRepos.some(function (p) {
return p.id === r.id;
});
});
var handleConnected = function handleConnected(connected) {
setExtraRepos(function (prev) {
return prev.some(function (r) {
return r.id === connected.id;
}) ? prev : [...prev, connected];
});
// The repository just connected becomes the selection in the picker.
setRepo(connected.id);
};
var renderRepositoryField = function renderRepositoryField() {
return /*#__PURE__*/_react.default.createElement("div", {
className: "lk-field"
}, /*#__PURE__*/_react.default.createElement(_Label.Label, {
size: "small",
className: "lk-label"
}, "Repository"), /*#__PURE__*/_react.default.createElement(_ConnectRepositoryDialog.RepositorySelect, {
repositories: projectRepos,
connections: _ConnectRepositoryDialog.CONNECTIONS,
selected: repo,
onChange: setRepo
}), /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
color: "tertiary",
className: "lk-repo-hint"
}, "Only repositories connected to this project are listed.", " ", /*#__PURE__*/_react.default.createElement("button", {
type: "button",
className: "lk-repo-link",
onClick: function onClick() {
return setConnectOpen(true);
}
}, "Connect a repository"), " ", "if the one you need is missing."));
};
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Dialog.Dialog, {
open: open,
onClose: close,
disableCloseOnEsc: true
}, /*#__PURE__*/_react.default.createElement(MenuGlobalStyle, {
$menuWidth: menuWidth
}), /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.Title, null, "Link Branch or Pull Request"), /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.ContentDivider, null), /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.Content, null, /*#__PURE__*/_react.default.createElement(StyledLinkBody, null, loading ? /*#__PURE__*/_react.default.createElement("div", {
className: "lk-skeleton"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "sk-row"
}, /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
className: "sk-choose"
})), /*#__PURE__*/_react.default.createElement("div", {
className: "sk-row"
}, /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
className: "sk-label"
}), /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
className: "sk-control"
}))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ChooseV.ChooseV2, {
required: true,
options: MODE_OPTIONS,
selected: [mode],
onChange: function onChange(ids) {
return changeMode(ids[0]);
}
}), /*#__PURE__*/_react.default.createElement("div", {
className: "lk-tabbody"
}, mode === "existing" ? /*#__PURE__*/_react.default.createElement("div", {
className: "lk-field",
ref: fieldRef
}, /*#__PURE__*/_react.default.createElement(_Label.Label, {
size: "small",
className: "lk-label",
invalid: existingInvalid
}, "Branch or Pull Request"), /*#__PURE__*/_react.default.createElement(_Select.Select, {
options: GROUPED_OPTIONS,
selected: selected === null ? undefined : selected,
onChange: function onChange(v) {
return setSelected(v);
},
placeholder: "Search branches and pull requests",
selectClassName: "lk-existing-select-menu",
onSelectOpen: measureMenu,
disabledInternalSort: true,
forceCloseMenu: true,
target: /*#__PURE__*/_react.default.createElement(_SelectTrigger.SelectTrigger, {
className: "lk-control",
invalid: existingInvalid,
typographyProps: selected === null ? {
color: "tertiary"
} : undefined
}, selectedLabel)
})) : mode === "branch" ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderRepositoryField(), /*#__PURE__*/_react.default.createElement("div", {
className: "lk-field"
}, /*#__PURE__*/_react.default.createElement(_Label.Label, {
size: "small",
className: "lk-label",
invalid: branchInvalid
}, "Branch Name"), /*#__PURE__*/_react.default.createElement(_Input.Input, {
className: "lk-control",
value: branchName,
invalid: branchInvalid,
onChange: function onChange(e) {
return setBranchName(e.target.value);
}
})), /*#__PURE__*/_react.default.createElement("div", {
className: "lk-field"
}, /*#__PURE__*/_react.default.createElement(_Label.Label, {
size: "small",
className: "lk-label"
}, "Create From"), /*#__PURE__*/_react.default.createElement(BranchSelect, {
options: baseBranchOptions(repo),
selected: createFrom,
onChange: setCreateFrom,
placeholder: "Select base branch"
}))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderRepositoryField(), /*#__PURE__*/_react.default.createElement("div", {
className: "lk-field"
}, /*#__PURE__*/_react.default.createElement(_Label.Label, {
size: "small",
className: "lk-label"
}, "Source Branch"), /*#__PURE__*/_react.default.createElement(BranchSelect, {
options: sourceBranchOptions(repo),
selected: sourceBranch,
onChange: setSourceBranch,
placeholder: "Select source branch"
})), /*#__PURE__*/_react.default.createElement("div", {
className: "lk-field"
}, /*#__PURE__*/_react.default.createElement(_Label.Label, {
size: "small",
className: "lk-label"
}, "Merge Into"), /*#__PURE__*/_react.default.createElement(BranchSelect, {
options: baseBranchOptions(repo),
selected: mergeInto,
onChange: setMergeInto,
placeholder: "Select base branch"
})), /*#__PURE__*/_react.default.createElement("div", {
className: "lk-field"
}, /*#__PURE__*/_react.default.createElement(_Label.Label, {
size: "small",
className: "lk-label",
invalid: titleInvalid
}, "Title"), /*#__PURE__*/_react.default.createElement(_Input.Input, {
className: "lk-control",
value: prTitle,
invalid: titleInvalid,
onChange: function onChange(e) {
return setPrTitle(e.target.value);
}
}))))))), /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.ContentDivider, null), /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.Actions, null, /*#__PURE__*/_react.default.createElement(_Button.Button, {
variant: "primary",
style: {
marginRight: 12
},
disabled: loading,
onClick: handleSubmit
}, primaryLabel), /*#__PURE__*/_react.default.createElement(_Button.Button, {
variant: "secondary",
onClick: close
}, "Cancel"))), /*#__PURE__*/_react.default.createElement(_ConnectRepositoryDialog.ConnectRepositoryDialog, {
open: connectOpen,
onClose: function onClose() {
return setConnectOpen(false);
},
onConnect: handleConnected,
repositories: connectableRepos,
connections: _ConnectRepositoryDialog.CONNECTIONS
}));
};
//# sourceMappingURL=LinkBranchOrPullRequestDialog.js.map