@riboseinc/paneron-registry-kit 2.2.58 → 2.2.60

package/compiled/views/StatefulTree.js

@@ -0,0 +1,95 @@
+/** @jsx jsx */
+/** @jsxFrag React.Fragment */
+import { useContext, useMemo } from 'react';
+import update from 'immutability-helper';
+import { jsx } from '@emotion/react';
+import { Tree } from '@blueprintjs/core';
+import { DatasetContext } from '@riboseinc/paneron-extension-kit';
+const initialState = {
+    selectedItemID: null,
+    expandedItemIDs: [],
+};
+/**
+ * A tree that also uses Paneron’s dataset persistent reducer
+ * to handle open/closed & selected item state preservation.
+ */
+export const GenericStatefulTree = function ({ getNodes, stateKey, onItemDoubleClick, className }) {
+    // TODO: This component shouldn’t know about dataset, persistent reducer hook can be supplied?
+    const { usePersistentDatasetStateReducer } = useContext(DatasetContext);
+    const [state, dispatch,] = usePersistentDatasetStateReducer(stateKey, undefined, undefined, function reduce(prevState, action) {
+        switch (action.type) {
+            case 'select-item':
+                if (prevState.selectedItemID !== action.payload.itemID) {
+                    return {
+                        ...prevState,
+                        selectedItemID: action.payload.itemID,
+                    };
+                }
+                else {
+                    return prevState;
+                }
+            case 'enter-item':
+                if (!prevState.expandedItemIDs.includes(action.payload.itemID)) {
+                    return {
+                        ...prevState,
+                        selectedItemID: action.payload.itemID,
+                        expandedItemIDs: update(prevState.expandedItemIDs, { $push: [action.payload.itemID] }),
+                    };
+                }
+                else {
+                    return prevState;
+                }
+            case 'exit-item':
+                const idx = prevState.expandedItemIDs.indexOf(action.payload.itemID);
+                if (idx >= 0) {
+                    return {
+                        ...prevState,
+                        selectedItemID: action.payload.itemID,
+                        expandedItemIDs: update(prevState.expandedItemIDs, { $splice: [[idx, 1]] }),
+                    };
+                }
+                else {
+                    return prevState;
+                }
+            default:
+                throw new Error("Unexpected browse state");
+        }
+    }, initialState, null);
+    const nodes = useMemo((() => getNodes(state)), [state, getNodes]);
+    const eventHandlers = useMemo((() => ({
+        onNodeClick: (node) => dispatch({
+            type: 'select-item',
+            payload: { itemID: node.id },
+        }),
+        onNodeExpand: (node) => {
+            var _a;
+            return ((_a = node.nodeData) === null || _a === void 0 ? void 0 : _a.type) === 'group'
+                ? dispatch({
+                    type: 'enter-item',
+                    payload: { itemID: node.id },
+                })
+                : void 0;
+        },
+        onNodeCollapse: (node) => {
+            var _a;
+            return ((_a = node.nodeData) === null || _a === void 0 ? void 0 : _a.type) === 'group'
+                ? dispatch({
+                    type: 'exit-item',
+                    payload: { itemID: node.id },
+                })
+                : void 0;
+        },
+        onNodeDoubleClick: (node) => {
+            var _a;
+            return ((_a = node.nodeData) === null || _a === void 0 ? void 0 : _a.type) === 'group'
+                ? dispatch({
+                    type: 'enter-item',
+                    payload: { itemID: node.id },
+                })
+                : onItemDoubleClick === null || onItemDoubleClick === void 0 ? void 0 : onItemDoubleClick(node);
+        },
+    })), [dispatch, onItemDoubleClick]);
+    return jsx(Tree, { className: className, contents: nodes, ...eventHandlers });
+};
+export default GenericStatefulTree;
+//# sourceMappingURL=StatefulTree.js.map

package/compiled/views/detail/AllItems.js

@@ -0,0 +1,31 @@
+/** @jsx jsx */
+/** @jsxFrag React.Fragment */
+import React, { memo } from 'react';
+import { jsx, css } from '@emotion/react';
+import { Card } from '@blueprintjs/core';
+import Search from '../sidebar/Search';
+import { RegisterHelmet as Helmet } from '../util';
+import { TabContentsWithHeader } from '../util';
+import { MATCHES_ANY_CRITERIA } from '../FilterCriteria/models';
+const ItemSearch = memo(function () {
+    return (jsx(TabContentsWithHeader, { title: jsx(React.Fragment, null, "Search all items") },
+        jsx(Card, { css: css `
+            flex: 1;
+            box-shadow: none !important;
+            position: absolute;
+            border-radius: 0;
+            display: flex;
+            flex-flow: column nowrap;
+            padding: 10px;
+          ` },
+            jsx(Helmet, null,
+                jsx("title", null, "Search all items")),
+            jsx(Search, { css: css `flex: 1;`, 
+                //style={{ height: '100vh', width: '50vw', minWidth: '500px', maxWidth: '90vw' }}
+                implicitCriteria: MATCHES_ANY_CRITERIA, stateName: "all-items-search" }))));
+});
+export default {
+    main: ItemSearch,
+    title: "All items",
+};
+//# sourceMappingURL=AllItems.js.map

package/compiled/views/detail/ChangeRequest/index.js

@@ -0,0 +1,49 @@
+/** @jsx jsx */
+/** @jsxFrag React.Fragment */
+import React, { useContext, memo, useCallback } from 'react';
+import { jsx, css } from '@emotion/react';
+import { NonIdealState, Spinner, } from '@blueprintjs/core';
+import { DatasetContext } from '@riboseinc/paneron-extension-kit/context';
+import { TabbedWorkspaceContext } from '@riboseinc/paneron-extension-kit/widgets/TabbedWorkspace/context';
+import { BrowserCtx } from '../../BrowserCtx';
+import { crPathToCRID } from '../../itemPathUtils';
+import { ChangeRequestContextProvider, ChangeRequestContext, } from '../../../proposals/ChangeRequestContext';
+import ProposalTab from '../../../proposals/ProposalTab';
+import { Protocols } from '../../protocolRegistry';
+import { maybeEllipsizeString } from '../../util';
+const View = memo(function ({ uri }) {
+    const crID = crPathToCRID(uri);
+    return (jsx(ChangeRequestContextProvider, { changeRequestID: crID },
+        jsx(MaybeChangeRequest, { uri: uri })));
+});
+const MaybeChangeRequest = memo(function ({ uri }) {
+    const { closeTabWithURI } = useContext(TabbedWorkspaceContext);
+    const { changeRequest: cr, deleteCR } = useContext(ChangeRequestContext);
+    const { registerMetadata } = useContext(BrowserCtx);
+    const handleDelete = useCallback((async () => {
+        if (deleteCR) {
+            await deleteCR();
+            closeTabWithURI(`${Protocols.CHANGE_REQUEST}:${uri}`);
+        }
+    }), [deleteCR, closeTabWithURI]);
+    return (cr && registerMetadata
+        ? jsx(ProposalTab, { proposal: cr, register: registerMetadata, onDelete: deleteCR
+                ? handleDelete
+                : undefined })
+        : jsx(NonIdealState, { icon: jsx(Spinner, null), css: css `
+          position: absolute;
+          inset: 0;
+          overflow-y: auto;
+        `, description: "Unable to load proposal" }));
+});
+const CRTitle = memo(function ({ uri }) {
+    var _a, _b;
+    const { useObjectData } = useContext(DatasetContext);
+    const justification = (_b = (_a = useObjectData({ objectPaths: [uri] }).value.data) === null || _a === void 0 ? void 0 : _a[uri]) === null || _b === void 0 ? void 0 : _b.justification;
+    return jsx(React.Fragment, null,
+        "Proposal \u201C",
+        maybeEllipsizeString(justification !== null && justification !== void 0 ? justification : uri),
+        "\u201D");
+});
+export default { main: View, title: CRTitle };
+//# sourceMappingURL=index.js.map

package/compiled/views/detail/CustomView/index.js

@@ -0,0 +1,34 @@
+/** @jsx jsx */
+/** @jsxFrag React.Fragment */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import { NonIdealState } from '@blueprintjs/core';
+import useCustomView from '../../hooks/useCustomView';
+const CustomViewMain = function ({ uri }) {
+    var _a;
+    const [viewID, ...pathComponents] = uri.split('/');
+    const { value: view } = useCustomView(viewID);
+    const fallbackView = (() => jsx(NonIdealState, { icon: "heart-broken", title: "Unable to show this view", description: `Custom view ${uri} cannot be displayed (not found in registry configuration)` }));
+    const View = (_a = view === null || view === void 0 ? void 0 : view.view) !== null && _a !== void 0 ? _a : fallbackView;
+    return jsx(View, { path: pathComponents.join('/') });
+};
+const CustomViewTitle = function ({ uri }) {
+    var _a;
+    const { value: view } = useCustomView(uri);
+    return jsx(React.Fragment, null, (_a = view === null || view === void 0 ? void 0 : view.label) !== null && _a !== void 0 ? _a : 'unknown view');
+};
+export default { main: CustomViewMain, title: CustomViewTitle, plainTitle: async () => "custom view" };
+// function useCRData(id: string | undefined): ValueHook<ChangeRequest | undefined> {
+//   const { useObjectData } = useContext(DatasetContext);
+//   const objectPath = `change-requests/${id ?? 'NONEXISTENT_CR_ID'}.yaml`;
+//   const crDataResp = useObjectData({ objectPaths: [objectPath] });
+//   const crData = crDataResp.value.data?.[objectPath] as ChangeRequest | null;
+//   return {
+//     value: crData ?? undefined,
+//     isUpdating: crDataResp.isUpdating,
+//     errors: crDataResp.errors,
+//     refresh: crDataResp.refresh,
+//     _reqCounter: crDataResp._reqCounter,
+//   };
+// }
+//# sourceMappingURL=index.js.map

package/compiled/views/detail/ProposalWork.js

@@ -0,0 +1,167 @@
+/** @jsx jsx */
+/** @jsxFrag React.Fragment */
+import React, { useMemo, useContext, useCallback, memo } from 'react';
+import { jsx, css } from '@emotion/react';
+import { NonIdealState } from '@blueprintjs/core';
+import { DatasetContext } from '@riboseinc/paneron-extension-kit/context';
+import { BrowserCtx } from '../BrowserCtx';
+import { canImportCR, canCreateCR } from '../../types/stakeholder';
+import { ChangeRequestContext } from '../../proposals/ChangeRequestContext';
+import ProposalTab from '../../proposals/ProposalTab';
+import NewProposalMenu from '../../proposals/NewProposalMenu';
+import { isImportableCR } from '../../proposals/types';
+import { itemPathToItemRef } from '../itemPathUtils';
+import { formatDate } from '../util';
+import useLatestAcceptedProposal from '../../views/hooks/useLatestAcceptedProposal';
+import { newCRObjectChangeset, importedProposalToCRObjectChangeset, } from '../../proposals';
+const ProposalWork = memo(function () {
+    const { changeRequest: activeCR, deleteCR } = useContext(ChangeRequestContext);
+    const { registerMetadata: register, stakeholder, setActiveChangeRequestID, itemClasses, } = useContext(BrowserCtx);
+    const { getMapReducedData, requestFileFromFilesystem, updateObjects, performOperation, getObjectData, isBusy, } = useContext(DatasetContext);
+    const handleDeactivate = useCallback((() => setActiveChangeRequestID === null || setActiveChangeRequestID === void 0 ? void 0 : setActiveChangeRequestID(null)), [setActiveChangeRequestID]);
+    const handleDelete = useCallback(async () => {
+        if (deleteCR && activeCR && setActiveChangeRequestID) {
+            await deleteCR();
+            setActiveChangeRequestID(null);
+        }
+    }, [deleteCR, setActiveChangeRequestID]);
+    let latestAcceptedProposal;
+    try {
+        latestAcceptedProposal = useLatestAcceptedProposal();
+    }
+    catch (e) {
+        console.error("Failed to obtain latest accepted proposal", e);
+        latestAcceptedProposal = undefined;
+    }
+    const getNewEmptyCRChangeset = useMemo(() => {
+        if (stakeholder && canCreateCR(stakeholder) && latestAcceptedProposal !== undefined) {
+            return async function getNewEmptyCRChangeset(newIdea) {
+                var _a;
+                const crID = crypto.randomUUID();
+                return [newCRObjectChangeset(crID, newIdea, (_a = latestAcceptedProposal === null || latestAcceptedProposal === void 0 ? void 0 : latestAcceptedProposal.id) !== null && _a !== void 0 ? _a : 'initial', stakeholder.gitServerUsername), crID];
+            };
+        }
+        else {
+            return undefined;
+        }
+    }, [stakeholder, latestAcceptedProposal === null || latestAcceptedProposal === void 0 ? void 0 : latestAcceptedProposal.id]);
+    const getImportedCRChangeset = useMemo(() => {
+        if (requestFileFromFilesystem && stakeholder && canImportCR(stakeholder)) {
+            return async function getImportedCRChangeset() {
+                const data = await requestFileFromFilesystem({
+                    prompt: "Select one register proposal JSON file",
+                    filters: [
+                        { name: "JSON files", extensions: ['.json'] },
+                    ],
+                });
+                const fileData = Object.values(data)[0];
+                if (!fileData) {
+                    throw new Error("No file was selected");
+                }
+                if (isImportableCR(fileData)) {
+                    try {
+                        const [changeset, crID] = await importedProposalToCRObjectChangeset(fileData, itemClasses, stakeholder.gitServerUsername, getObjectData, async function resolvePredicates(predicates) {
+                            const mapReduceChains = [...predicates.values()].map(predicate => ({
+                                [predicate]: {
+                                    mapFunc: `
+                      const data = value.data;
+                      if (!key.startsWith('/proposals/') && data && (${predicate})) {
+                        emit({ objectPath: key, objectData: value });
+                      }
+                    `,
+                                },
+                            })).reduce((prev, curr) => ({ ...prev, ...curr }), {});
+                            const result = await getMapReducedData({
+                                chains: mapReduceChains,
+                            });
+                            return Object.entries(result).map(([chainLabel, chainResult]) => {
+                                const objects = 
+                                // Map returns an empty object if there’re no items,
+                                // but we promise to return a list.
+                                (Array.isArray(chainResult) ? chainResult : []);
+                                if (objects.length < 1) {
+                                    throw new Error(`Unable to resolve predicate to item UUID: no item found matching predicate ${chainLabel}`);
+                                }
+                                else if (objects.length > 1) {
+                                    const objectOverview = objects.map((o) => JSON.stringify(o)).join(', ');
+                                    throw new Error(`Unable to resolve predicate to item UUID: more than one item matches predicate ${chainLabel}: ${objectOverview}`);
+                                }
+                                else {
+                                    return {
+                                        // There’s just one item anyway, hence `objects[0]`.
+                                        [chainLabel]: itemPathToItemRef(false, objects[0].objectPath),
+                                    };
+                                }
+                            }).reduce((prev, curr) => ({ ...prev, ...curr }), {});
+                        });
+                        return [changeset, crID];
+                    }
+                    catch (e) {
+                        console.error("Error reading proposal data", e);
+                        throw new Error("Error reading proposal data");
+                    }
+                }
+                else {
+                    throw new Error("Invalid proposal format");
+                }
+            };
+        }
+        else {
+            return undefined;
+        }
+    }, [getMapReducedData, requestFileFromFilesystem, getObjectData, stakeholder]);
+    const [importCR, createCR] = useMemo(() => {
+        if (updateObjects && setActiveChangeRequestID && !isBusy) {
+            return [
+                getImportedCRChangeset
+                    ? performOperation('importing proposal', async function () {
+                        const [objectChangeset, crID] = await getImportedCRChangeset();
+                        await updateObjects({
+                            commitMessage: 'import proposal',
+                            objectChangeset,
+                        });
+                        setActiveChangeRequestID(crID);
+                    })
+                    : undefined,
+                getNewEmptyCRChangeset
+                    ? performOperation('creating blank proposal', async function (newIdea) {
+                        const [objectChangeset, crID] = await getNewEmptyCRChangeset(newIdea);
+                        await updateObjects({
+                            commitMessage: `start new empty proposal ${newIdea}`,
+                            objectChangeset,
+                        });
+                        setActiveChangeRequestID(crID);
+                    })
+                    : undefined,
+            ];
+        }
+        else {
+            return [undefined, undefined];
+        }
+    }, [isBusy, performOperation, updateObjects, getImportedCRChangeset, getNewEmptyCRChangeset]);
+    if (!activeCR || !register || !stakeholder) {
+        return jsx(NonIdealState, { icon: "clean", title: "Not working on any proposal", description: jsx(React.Fragment, null,
+                jsx("p", null, "Choose an actionable proposal from the sidebar to the left and activate it by double-clicking"),
+                register && stakeholder && canCreateCR(stakeholder) && latestAcceptedProposal !== undefined
+                    ? jsx(React.Fragment, null,
+                        jsx("p", null, "\u2014or\u2014"),
+                        jsx(NewProposalMenu, { css: css `height: 200px;`, previousVersion: (latestAcceptedProposal === null || latestAcceptedProposal === void 0 ? void 0 : latestAcceptedProposal.timeDisposed)
+                                ? formatDate(latestAcceptedProposal.timeDisposed, { showTime: true, useUTC: true })
+                                : null, onImport: importCR, onCreateBlank: createCR }))
+                    : null) });
+    }
+    else {
+        return jsx(ProposalTab, { proposal: activeCR, register: register, stakeholder: stakeholder, onDelete: (deleteCR) ? handleDelete : undefined, onDeactivate: setActiveChangeRequestID ? handleDeactivate : undefined });
+    }
+});
+const ProposalWorkTitle = function () {
+    const { changeRequest: activeCR } = useContext(ChangeRequestContext);
+    return jsx(React.Fragment, null, activeCR
+        ? jsx("strong", null, "Active proposal")
+        : jsx(React.Fragment, null, "Proposal dashboard"));
+};
+export default {
+    main: ProposalWork,
+    title: ProposalWorkTitle,
+};
+//# sourceMappingURL=ProposalWork.js.map

package/compiled/views/detail/RegisterHome/ActiveProposalDetails.js

@@ -0,0 +1,64 @@
+/** @jsx jsx */
+/** @jsxFrag React.Fragment */
+import React, { useMemo } from 'react';
+import { jsx, css } from '@emotion/react';
+import DL from '@riboseinc/paneron-extension-kit/widgets/DL';
+import MetaProperties from '../../../proposals/MetaProperties';
+import { isCreatedBy } from '../../../proposals/types';
+import TransitionOptions, { isFinalState, getTransitions, canBeTransitionedBy } from '../../../proposals/TransitionOptions';
+import TransitionsAndStatus, { getTransitionHistory } from '../../../proposals/TransitionHistory';
+import HomeBlock from './Block';
+const CurrentProposalBlock = function ({ proposal, stakeholder, register, onDelete, onOpen, canDelete, className }) {
+    const actions = useMemo(() => {
+        const actions = stakeholder && canBeTransitionedBy(stakeholder, proposal)
+            ? [ /*{
+                // Action is taken from within the widget.
+                text: "Take action",
+                onClick: () => void 0,
+                icon: 'take-action',
+                intent: 'primary',
+              }*/]
+            : [];
+        if (canDelete) {
+            actions.push({
+                text: "Delete this proposal draft",
+                onClick: onDelete,
+                disabled: !onDelete,
+                icon: 'delete',
+                intent: 'danger',
+            });
+        }
+        actions.push({
+            text: "View proposal in a new tab",
+            icon: 'open-application',
+            disabled: !onOpen,
+            onClick: onOpen,
+        });
+        return actions;
+    }, [onDelete, onOpen, stakeholder, proposal, canDelete]);
+    return (jsx(HomeBlock, { View: CurrentProposal, description: "Active proposal", props: { proposal, stakeholder, register }, className: className, actions: actions }));
+};
+export default CurrentProposalBlock;
+const CurrentProposal = function ({ stakeholder, register, proposal }) {
+    var _a;
+    const transitions = stakeholder
+        ? getTransitions(proposal, stakeholder)
+        : [];
+    const crStakeholder = ((_a = register === null || register === void 0 ? void 0 : register.stakeholders) !== null && _a !== void 0 ? _a : []).
+        find(s => isCreatedBy(s, proposal));
+    return (jsx(React.Fragment, null,
+        jsx(DL, { css: css `padding: 10px 12px 10px 12px; flex-grow: 1; flex-basis: max-content;` },
+            jsx("div", null,
+                jsx("dt", null, "Viewing\u00A0proposal:"),
+                jsx("dd", { css: css `max-height: 40px; overflow-y: auto;` },
+                    "\u201C",
+                    proposal.justification.trim() || '(justification N/A)',
+                    "\u201D")),
+            jsx(MetaProperties, { cr: proposal, currentStakeholder: stakeholder, submittingStakeholder: crStakeholder })),
+        jsx("div", { css: css `overflow-y: auto; flex-basis: min-content;` },
+            jsx(TransitionsAndStatus, { pastTransitions: getTransitionHistory(proposal), isFinal: isFinalState(proposal.state) }),
+            transitions.length > 0
+                ? jsx(TransitionOptions, { stakeholder: stakeholder, transitions: transitions, cr: proposal, css: css `padding: 12px;` })
+                : null)));
+};
+//# sourceMappingURL=ActiveProposalDetails.js.map

package/compiled/views/detail/RegisterHome/Block.js

@@ -0,0 +1,39 @@
+//import { Helmet } from 'react-helmet';
+import styled from '@emotion/styled';
+import { jsx } from '@emotion/react';
+import { Menu, MenuItem, MenuDivider, NonIdealState, Spinner, } from '@blueprintjs/core';
+import { CardInGrid } from '../../util';
+export default function HomeBlock({ View, description, props, error, actions, className }) {
+    var _a;
+    return (jsx(HomeBlockCard, { description: description, className: className },
+        props
+            ? jsx(View, { ...props })
+            : props === undefined
+                ? jsx(NonIdealState, { icon: jsx(Spinner, null) })
+                : jsx(NonIdealState, { icon: "heart-broken", title: "Failed to load", description: error }),
+        ((_a = actions === null || actions === void 0 ? void 0 : actions.length) !== null && _a !== void 0 ? _a : 0) > 0
+            ? jsx(HomeBlockActions, { actions: actions })
+            : null));
+}
+export function HomeBlockActions({ actions }) {
+    return jsx(HomeBlockActionMenu, null, actions.map((mip, idx) => isMenuItemProps(mip)
+        ? jsx(MenuItem, { key: idx, ...mip })
+        : jsx(MenuDivider, { key: idx, ...mip })));
+}
+function isMenuItemProps(val) {
+    const p = val;
+    return p.onClick || p.disabled || p.icon || p.selected || p.active ? true : false;
+}
+const HomeBlockActionMenu = styled(Menu) `
+  background: none !important;
+  flex-shrink: 0;
+`;
+export const HomeBlockCard = styled(CardInGrid) `
+  padding: 5px;
+  display: flex; flex-flow: column nowrap;
+  overflow: hidden;
+  transition:
+    width .5s linear,
+    height .5s linear;
+`;
+//# sourceMappingURL=Block.js.map

package/compiled/views/detail/RegisterHome/MetaSummary.js

@@ -0,0 +1,27 @@
+/** @jsx jsx */
+/** @jsxFrag React.Fragment */
+import { jsx } from '@emotion/react';
+import DL from '@riboseinc/paneron-extension-kit/widgets/DL';
+import { normalizeObjectRecursively } from '@riboseinc/paneron-extension-kit/util';
+import { Val } from '../../../views/diffing/InlineDiff';
+const MetaSummary = function ({ register, style }) {
+    var _a;
+    return (jsx(DL, { style: style },
+        jsx("div", null,
+            jsx("dt", null, "Viewing\u00A0version:"),
+            jsx("dd", null, ((_a = register.version) === null || _a === void 0 ? void 0 : _a.id) || 'N/A')),
+        jsx("div", null,
+            jsx("dt", null, "Register\u00A0name:"),
+            jsx("dd", null, register.name)),
+        register.operatingLanguage
+            ? jsx("div", null,
+                jsx("dt", null, "Operating\u00A0language:"),
+                jsx("dd", null,
+                    jsx(Val, { val: normalizeObjectRecursively(register.operatingLanguage) })))
+            : null,
+        jsx("div", null,
+            jsx("dt", null, "Content\u00A0summary:"),
+            jsx("dd", { dangerouslySetInnerHTML: { __html: register.contentSummary || 'N/A' } }))));
+};
+export default MetaSummary;
+//# sourceMappingURL=MetaSummary.js.map

package/compiled/views/detail/RegisterHome/Proposal.js

@@ -0,0 +1,105 @@
+/** @jsx jsx */
+/** @jsxFrag React.Fragment */
+import React, { useState, useContext, useRef, useEffect, useCallback, useMemo, } from 'react';
+import { jsx, css } from '@emotion/react';
+import { Button, FormGroup, ControlGroup, TextArea, PanelStack2 as PanelStack, Menu, MenuDivider, MenuItem, Spinner, NonIdealState, } from '@blueprintjs/core';
+import { ChangeRequestContext } from '../../../proposals/ChangeRequestContext';
+import { maybeEllipsizeString } from '../../util';
+const NewProposal = function ({ register, onCreateBlank, className }) {
+    var _a, _b;
+    const [newProposalIdea, setNewProposalIdea] = useState('');
+    const handleNewProposal = useCallback(async function handleNewProposal() {
+        if (newProposalIdea.trim()) {
+            await (onCreateBlank === null || onCreateBlank === void 0 ? void 0 : onCreateBlank(newProposalIdea));
+            setNewProposalIdea('');
+        }
+        else {
+            throw new Error("Cannot create proposal: need some initial motivation for the change");
+        }
+    }, [newProposalIdea, onCreateBlank]);
+    return (jsx(FormGroup, { className: className, css: css `overflow-y: auto;`, label: jsx(React.Fragment, null,
+            "Propose a change to version ", (_b = (_a = register.version) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '(N/A)',
+            ":") },
+        jsx(ControlGroup, { vertical: true },
+            jsx(TextArea, { value: newProposalIdea !== null && newProposalIdea !== void 0 ? newProposalIdea : '', placeholder: "Your idea\u2026", title: "Justification draft (you can change this later)", onChange: evt => setNewProposalIdea(evt.currentTarget.value) }),
+            jsx(Button, { fill: true, intent: newProposalIdea ? 'primary' : undefined, disabled: !newProposalIdea.trim() || !onCreateBlank, title: "A blank proposal will be created and opened in a new tab.", onClick: handleNewProposal, icon: "tick" }, "Create"))));
+};
+/**
+ * A list of menu items for given actionable proposals,
+ * grouped by label.
+ */
+const ActionableProposalItems = function ActionableProposalItems({ actionableProposals, onSelect }) {
+    return jsx(React.Fragment, null, actionableProposals === null || actionableProposals === void 0 ? void 0 : actionableProposals.filter(([, proposals]) => proposals && proposals.length > 0).map(([groupLabel, proposals], idx) => jsx(React.Fragment, { key: idx },
+        jsx(MenuDivider, { title: groupLabel }),
+        proposals !== undefined && proposals.length > 0
+            ? proposals.map(cr => jsx(ActionableProposalItem, { key: cr.id, cr: cr, onClick: onSelect }))
+            : proposals === undefined
+                ? jsx(MenuItem, { disabled: true, text: "Loading\u2026", icon: jsx(Spinner, null) })
+                : jsx(MenuItem, { disabled: true, text: "No pending proposals", icon: "clean" }))));
+};
+const ActionableProposalItem = function ({ cr, onClick }) {
+    var _a;
+    // TODO: Try to avoid useContext here.
+    // Originally activeCR was passed via prop, need to try again.
+    // Switch to context was done to avoid rerendering the entire list
+    // & losing scroll position.
+    // We want(?) active CR to determine if this item is active
+    // and keep it in viewport after user switches back.
+    const { changeRequest: activeCR } = useContext(ChangeRequestContext);
+    const selectedMenuItem = useRef(null);
+    const isActive = activeCR && cr.id === (activeCR === null || activeCR === void 0 ? void 0 : activeCR.id)
+        ? true
+        : false;
+    useEffect(() => {
+        var _a, _b;
+        (_b = (_a = selectedMenuItem.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, { block: 'nearest' });
+    }, [isActive]);
+    const handleClick = useCallback(() => {
+        return onClick === null || onClick === void 0 ? void 0 : onClick(cr.id);
+    }, [onClick, cr.id]);
+    return (jsx(MenuItem, { key: cr.id, elementRef: isActive ? selectedMenuItem : undefined, selected: isActive, active: isActive, text: maybeEllipsizeString(((_a = cr.justification) === null || _a === void 0 ? void 0 : _a.trim()) || cr.id, 120), htmlTitle: cr.justification, disabled: !onClick, onClick: onClick ? handleClick : undefined }));
+};
+export const Proposals = function ({ register, actionableProposals, onCreate, createMode, onSelectProposal, onRefreshProposals, className, }) {
+    const hasActionable = (actionableProposals && actionableProposals.find(p => p[1] && p[1].length > 0));
+    const proposalMenuItems = useMemo(() => {
+        return hasActionable || onCreate
+            ? jsx(ActionableProposalItems, { actionableProposals: actionableProposals !== null && actionableProposals !== void 0 ? actionableProposals : [], onSelect: onSelectProposal })
+            : null;
+    }, [onSelectProposal, onCreate, hasActionable, actionableProposals]);
+    const stack = useMemo(() => {
+        const stack = [];
+        const proposalMenu = proposalMenuItems
+            ? jsx(Menu, { css: css `overflow-y: auto; background: none !important;` }, proposalMenuItems)
+            : null;
+        if (proposalMenu) {
+            stack.push({
+                title: createMode
+                    ? "Proposals"
+                    : jsx(React.Fragment, null,
+                        "Proposals",
+                        hasActionable || (onCreate && onRefreshProposals)
+                            ? jsx(React.Fragment, null,
+                                "\u00A0",
+                                jsx(Button, { minimal: true, small: true, onClick: onRefreshProposals, disabled: !onRefreshProposals, icon: "refresh" }))
+                            : null),
+                renderPanel: () => proposalMenu,
+            });
+        }
+        if (createMode) {
+            stack.push({
+                title: "Start proposal",
+                renderPanel: () => jsx(NewProposal, { onCreateBlank: onCreate, register: register, css: css `padding: 5px;` }),
+            });
+        }
+        return stack;
+    }, [
+        onCreate, createMode,
+        onRefreshProposals,
+        hasActionable,
+        register, proposalMenuItems,
+    ]);
+    return jsx(PanelStack, { css: css `flex: 1; .bp4-panel-stack-view { background: none; }`, className: className, onClose: () => onCreate === null || onCreate === void 0 ? void 0 : onCreate(false), stack: stack.length > 0
+            ? stack
+            : [{ title: '', renderPanel: () => jsx(NonIdealState, { title: "Nothing to show" }) }] });
+};
+//# sourceMappingURL=Proposal.js.map