@riboseinc/paneron-registry-kit 2.2.11 → 2.2.13

package/views/change-request/ChangeRequestContext.d.ts

@@ -2,31 +2,38 @@
 /** @jsxFrag React.Fragment */
 import React from 'react';
 import { type SomeCR as CR } from '../../types/cr';
+import type { RegisterItem, Payload, ChangeProposal, InternalItemReference } from '../../types';
 export interface ChangeRequestContextSpec {
     /**
      * Change request object, undefined if not available/loading,
-     * null if not expected (i.e. changeRequestID is not given).
+     * null is out of ordinary (i.e. changeRequestID is not given).
      */
     changeRequest?: CR | null;
     /**
-     * Current user is eligible to edit the contents of this CR.
+     * Contents of current CR can be edited by current stakeholder.
      * Always false if `changeRequest` is not defined or `null`.
      */
     canEdit: boolean;
     /**
-     * Current user is eligible to transition the contents of this CR.
+     * Current CR can be transitioned by current stsakeholder.
      * Always false if `changeRequest` is not defined or `null`.
      */
     canTransition: boolean;
     /**
-     * Current user is eligible to delete this CR.
+     * Current CR can be deleted by current stakeholder.
      * Always false if `changeRequest` is not defined or `null`.
      */
     canDelete: boolean;
+    /**
+     * Propose new blank item of given item class.
+     * Will always be undefined if `canEdit` is not `true`.
+     */
+    proposeBlankItem?: (clsID: string) => Promise<InternalItemReference>;
+    updateItemProposal?: (summary: string, proposal: ChangeProposal | null, itemPath: string, item?: RegisterItem<any>, itemData?: Payload) => Promise<void>;
     /**
      * Function that performs CR deletion.
-     * May not be present even if `canDelete` is true for variuos reasons
-     * (e.g., another action is in progress).
+     * May not be present if operation is not possible right now,
+     * but otherwise is present if `canDelete` is true.
      */
     deleteCR?: () => Promise<void>;
 }

package/views/change-request/ChangeRequestContext.js

@@ -13,12 +13,16 @@ var _context = require("@riboseinc/paneron-extension-kit/context");
 
 var _cr = require("../../types/cr");
 
+var _types = require("../../types");
+
 var _BrowserCtx = require("../BrowserCtx");
 
 var _itemPathUtils = require("../itemPathUtils");
 
 var _TransitionOptions = require("./TransitionOptions");
 
+var _objectChangeset = require("./objectChangeset");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -43,11 +47,15 @@ const ChangeRequestContextProvider = function ({
 
   const {
     useObjectData,
+    makeRandomID,
+    updateObjects,
     updateTree,
     performOperation,
     isBusy
   } = (0, _react2.useContext)(_context.DatasetContext);
   const {
+    itemClasses,
+    subregisters,
     stakeholder
   } = (0, _react2.useContext)(_BrowserCtx.BrowserCtx);
   const crPath = changeRequestID ? `/proposals/${changeRequestID}/main.yaml` : null;
@@ -60,21 +68,93 @@ const ChangeRequestContextProvider = function ({
   const canDelete = changeRequest && stakeholder && (0, _cr.canBeDeletedBy)(stakeholder, changeRequest) ? true : false;
   const crItemEntries = Object.entries((_c = changeRequest === null || changeRequest === void 0 ? void 0 : changeRequest.items) !== null && _c !== void 0 ? _c : []).map(i => JSON.stringify(i));
   const hasItems = crItemEntries.length > 0;
-  const deleteCR = (0, _react2.useMemo)(() => !isBusy && (changeRequest === null || changeRequest === void 0 ? void 0 : changeRequest.id) && canDelete && updateTree && !hasItems && !changeRequest.timeProposed ? performOperation('deleting proposal', async function handleDelete() {
+  const deleteCR = (0, _react2.useMemo)(() => !isBusy && canDelete && updateTree ? performOperation('deleting proposal', async function handleDelete() {
     const subtreeRoot = (0, _itemPathUtils.crIDToCRPath)(changeRequest.id).replace('/main.yaml', '');
     await updateTree({
       subtreeRoot,
       newSubtreeRoot: null,
       commitMessage: 'remove unproposed CR draft'
     });
-  }) : undefined, [isBusy, performOperation, updateTree, hasItems, canDelete, changeRequest === null || changeRequest === void 0 ? void 0 : changeRequest.id, changeRequest === null || changeRequest === void 0 ? void 0 : changeRequest.timeProposed]);
+  }) : undefined, [isBusy, performOperation, updateTree, hasItems, canDelete]);
+  const proposeBlankItem = (0, _react2.useMemo)(() => {
+    if (!updateObjects || !makeRandomID || !canEdit || !changeRequest) {
+      return undefined;
+    } else {
+      return performOperation('creating blank item', async function _createItem(classID, subregisterID) {
+        var _a;
+
+        if (subregisters && !subregisterID) {
+          throw new Error("Unable to create item: register uses subregisters, but subregister ID was not provided");
+        }
+
+        const clsConfig = itemClasses[classID];
+
+        if (!clsConfig) {
+          throw new Error("Unable to generate new item data: item class configuration is missing");
+        }
+
+        const initialItemData = (_a = clsConfig === null || clsConfig === void 0 ? void 0 : clsConfig.defaults) !== null && _a !== void 0 ? _a : {};
+        const itemID = await makeRandomID();
+        const ref = {
+          classID,
+          itemID,
+          subregisterID
+        };
+        const registerItem = {
+          id: itemID,
+          dateAccepted: new Date(),
+          status: 'valid',
+          data: initialItemData
+        };
+        const itemPath = (0, _itemPathUtils.itemRefToItemPath)(ref);
+        await updateObjects({
+          commitMessage: `propose to add new ${ref.classID}`,
+          objectChangeset: (0, _objectChangeset.updateCRObjectChangeset)(changeRequest, {
+            [itemPath]: {
+              type: 'addition'
+            }
+          }, {
+            [itemPath]: registerItem
+          }),
+          _dangerouslySkipValidation: true
+        });
+        return ref;
+      });
+    }
+  }, [changeRequest, canEdit, subregisters === undefined, updateObjects, makeRandomID]);
+  const updateItemProposal = (0, _react2.useMemo)(() => changeRequest && canEdit && updateObjects ? async function _handleSetProposal(summary, proposal, itemPath, item, editedItemData) {
+    if (proposal && !item) {
+      throw new Error("Missing item");
+    }
+
+    if (proposal && (proposal === null || proposal === void 0 ? void 0 : proposal.type) !== 'amendment' && (!editedItemData || !(0, _types.isRegisterItem)(editedItemData))) {
+      throw new Error("Missing item data");
+    }
+
+    await updateObjects({
+      commitMessage: `${summary} for ${itemPath}`,
+      objectChangeset: (0, _objectChangeset.updateCRObjectChangeset)( // TODO: We are sure it’s editable already, but casting should be avoided
+      changeRequest, {
+        [itemPath]: proposal
+      }, proposal && (proposal === null || proposal === void 0 ? void 0 : proposal.type) !== 'amendment' && editedItemData && item ? {
+        [itemPath]: { ...item,
+          data: editedItemData
+        }
+      } : {}),
+      // We need this because updateCRObjectChangeset
+      // omits oldValue for item data payloads.
+      _dangerouslySkipValidation: true
+    });
+  } : undefined, [canEdit, changeRequest, updateObjects]);
   const ctx = (0, _react2.useMemo)(() => ({
     changeRequest,
     canEdit,
     canTransition,
     canDelete,
-    deleteCR
-  }), [changeRequest, canEdit, deleteCR, canDelete]);
+    deleteCR,
+    proposeBlankItem,
+    updateItemProposal
+  }), [changeRequest, canEdit, deleteCR, canDelete, proposeBlankItem, updateItemProposal]);
   return (0, _react.jsx)(ChangeRequestContext.Provider, {
     value: ctx
   }, children);

package/views/change-request/ChangeRequestContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChangeRequestContext.js","sourceRoot":"","sources":["../../../src/views/change-request/ChangeRequestContext.tsx"],"names":[],"mappings":"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","sourcesContent":["/** @jsx jsx */\n/** @jsxFrag React.Fragment */\n\nimport { jsx } from '@emotion/react';\nimport React, { useMemo, useContext } from 'react';\nimport { DatasetContext } from '@riboseinc/paneron-extension-kit/context';\nimport { type SomeCR as CR, type Proposed, canBeDeletedBy, canBeEditedBy } from '../../types/cr';\nimport { BrowserCtx } from '../BrowserCtx';\nimport { crIDToCRPath } from '../itemPathUtils';\nimport { canBeTransitionedBy } from './TransitionOptions';\n\n\nexport interface ChangeRequestContextSpec {\n  /**\n   * Change request object, undefined if not available/loading,\n   * null if not expected (i.e. changeRequestID is not given).\n   */\n  changeRequest?: CR | null\n\n  /**\n   * Current user is eligible to edit the contents of this CR.\n   * Always false if `changeRequest` is not defined or `null`.\n   */\n  canEdit: boolean\n\n  /**\n   * Current user is eligible to transition the contents of this CR.\n   * Always false if `changeRequest` is not defined or `null`.\n   */\n  canTransition: boolean\n\n  /**\n   * Current user is eligible to delete this CR.\n   * Always false if `changeRequest` is not defined or `null`.\n   */\n  canDelete: boolean\n\n  /**\n   * Function that performs CR deletion.\n   * May not be present even if `canDelete` is true for variuos reasons\n   * (e.g., another action is in progress).\n   */\n  deleteCR?: () => Promise<void>\n\n}\n\nexport const ChangeRequestContext = React.createContext<ChangeRequestContextSpec>({\n  changeRequest: null,\n  canEdit: false,\n  canTransition: false,\n  canDelete: false,\n});\n\nexport const ChangeRequestContextProvider: React.FC<{\n  changeRequestID: string | null\n}> = function ({ changeRequestID, children }) {\n  const { useObjectData, updateTree, performOperation, isBusy } = useContext(DatasetContext);\n  const { stakeholder } = useContext(BrowserCtx);\n\n  const crPath = changeRequestID\n    ? `/proposals/${changeRequestID}/main.yaml`\n    : null;\n\n  const changeRequest = useObjectData({\n    objectPaths: crPath ? [crPath] : [],\n    nounLabel: 'proposal(s)',\n  }).value?.data[crPath ?? ''] as CR ?? (crPath ? undefined : null);\n\n  const canEdit = changeRequest\n    && stakeholder\n    && canBeEditedBy(stakeholder, changeRequest)\n      ? true\n      : false;\n\n  const canTransition = changeRequest\n    && stakeholder\n    && canBeTransitionedBy(stakeholder, changeRequest)\n      ? true\n      : false;\n\n  const canDelete = changeRequest\n    && stakeholder\n    && canBeDeletedBy(stakeholder, changeRequest)\n      ? true\n      : false;\n\n  const crItemEntries = Object.entries(changeRequest?.items ?? []).map(i => JSON.stringify(i));\n  const hasItems = crItemEntries.length > 0;\n\n  const deleteCR = useMemo((() =>\n    !isBusy && changeRequest?.id && canDelete && updateTree && !hasItems && !(changeRequest as Proposed).timeProposed\n    ? performOperation('deleting proposal', async function handleDelete() {\n        const subtreeRoot = crIDToCRPath(changeRequest.id).replace('/main.yaml', '');\n        await updateTree({\n          subtreeRoot,\n          newSubtreeRoot: null,\n          commitMessage: 'remove unproposed CR draft',\n        });\n      })\n    : undefined\n  ), [\n    isBusy, performOperation,\n    updateTree,\n    hasItems, canDelete,\n    changeRequest?.id, (changeRequest as Proposed)?.timeProposed]);\n\n  const ctx: ChangeRequestContextSpec = useMemo((() => ({\n    changeRequest,\n    canEdit,\n    canTransition,\n    canDelete,\n    deleteCR,\n  })), [changeRequest, canEdit, deleteCR, canDelete]);\n\n  return (\n    <ChangeRequestContext.Provider value={ctx}>\n      {children}\n    </ChangeRequestContext.Provider>\n  );\n};\n"]}
+{"version":3,"file":"ChangeRequestContext.js","sourceRoot":"","sources":["../../../src/views/change-request/ChangeRequestContext.tsx"],"names":[],"mappings":"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","sourcesContent":["/** @jsx jsx */\n/** @jsxFrag React.Fragment */\n\nimport { jsx } from '@emotion/react';\nimport React, { useMemo, useContext } from 'react';\nimport { DatasetContext } from '@riboseinc/paneron-extension-kit/context';\nimport { type SomeCR as CR, canBeDeletedBy, canBeEditedBy } from '../../types/cr';\nimport type { RegisterItem, Payload, ChangeProposal, InternalItemReference } from '../../types';\nimport { isRegisterItem } from '../../types';\nimport { BrowserCtx } from '../BrowserCtx';\nimport { itemRefToItemPath, crIDToCRPath } from '../itemPathUtils';\nimport { canBeTransitionedBy } from './TransitionOptions';\nimport { updateCRObjectChangeset } from './objectChangeset';\n\n\nexport interface ChangeRequestContextSpec {\n  /**\n   * Change request object, undefined if not available/loading,\n   * null is out of ordinary (i.e. changeRequestID is not given).\n   */\n  changeRequest?: CR | null\n\n  /**\n   * Contents of current CR can be edited by current stakeholder.\n   * Always false if `changeRequest` is not defined or `null`.\n   */\n  canEdit: boolean\n\n  /**\n   * Current CR can be transitioned by current stsakeholder.\n   * Always false if `changeRequest` is not defined or `null`.\n   */\n  canTransition: boolean\n\n  /**\n   * Current CR can be deleted by current stakeholder.\n   * Always false if `changeRequest` is not defined or `null`.\n   */\n  canDelete: boolean\n\n  /**\n   * Propose new blank item of given item class.\n   * Will always be undefined if `canEdit` is not `true`.\n   */\n  proposeBlankItem?: (clsID: string) => Promise<InternalItemReference>\n\n  updateItemProposal?: (\n    summary: string,\n    proposal: ChangeProposal | null,\n    itemPath: string,\n    item?: RegisterItem<any>,\n    itemData?: Payload,\n  ) => Promise<void>\n\n  /**\n   * Function that performs CR deletion.\n   * May not be present if operation is not possible right now,\n   * but otherwise is present if `canDelete` is true.\n   */\n  deleteCR?: () => Promise<void>\n\n}\n\nexport const ChangeRequestContext = React.createContext<ChangeRequestContextSpec>({\n  changeRequest: null,\n  canEdit: false,\n  canTransition: false,\n  canDelete: false,\n});\n\nexport const ChangeRequestContextProvider: React.FC<{\n  changeRequestID: string | null\n}> = function ({ changeRequestID, children }) {\n  const { useObjectData, makeRandomID, updateObjects, updateTree, performOperation, isBusy } = useContext(DatasetContext);\n  const { itemClasses, subregisters, stakeholder } = useContext(BrowserCtx);\n\n  const crPath = changeRequestID\n    ? `/proposals/${changeRequestID}/main.yaml`\n    : null;\n\n  const changeRequest = useObjectData({\n    objectPaths: crPath ? [crPath] : [],\n    nounLabel: 'proposal(s)',\n  }).value?.data[crPath ?? ''] as CR ?? (crPath ? undefined : null);\n\n  const canEdit = changeRequest\n    && stakeholder\n    && canBeEditedBy(stakeholder, changeRequest)\n      ? true\n      : false;\n\n  const canTransition = changeRequest\n    && stakeholder\n    && canBeTransitionedBy(stakeholder, changeRequest)\n      ? true\n      : false;\n\n  const canDelete = changeRequest\n    && stakeholder\n    && canBeDeletedBy(stakeholder, changeRequest)\n      ? true\n      : false;\n\n  const crItemEntries = Object.entries(changeRequest?.items ?? []).map(i => JSON.stringify(i));\n  const hasItems = crItemEntries.length > 0;\n\n  const deleteCR = useMemo((() =>\n    !isBusy && canDelete && updateTree\n    ? performOperation('deleting proposal', async function handleDelete() {\n        const subtreeRoot = crIDToCRPath(changeRequest.id).replace('/main.yaml', '');\n        await updateTree({\n          subtreeRoot,\n          newSubtreeRoot: null,\n          commitMessage: 'remove unproposed CR draft',\n        });\n      })\n    : undefined\n  ), [\n    isBusy, performOperation,\n    updateTree,\n    hasItems, canDelete,\n  ]);\n\n  const proposeBlankItem = useMemo((() => {\n    if (!updateObjects || !makeRandomID || !canEdit || !changeRequest) {\n      return undefined;\n    } else {\n      return performOperation('creating blank item', async function _createItem(classID: string, subregisterID?: string) {\n        if (subregisters && !subregisterID) {\n          throw new Error(\"Unable to create item: register uses subregisters, but subregister ID was not provided\");\n        }\n        const clsConfig = itemClasses[classID];\n        if (!clsConfig) {\n          throw new Error(\"Unable to generate new item data: item class configuration is missing\");\n        }\n        const initialItemData = clsConfig?.defaults ?? {};\n        const itemID = await makeRandomID();\n        const ref: InternalItemReference = { classID, itemID, subregisterID };\n        const registerItem: RegisterItem<any> = {\n          id: itemID,\n          dateAccepted: new Date(),\n          status: 'valid',\n          data: initialItemData,\n        };\n        const itemPath = itemRefToItemPath(ref);\n        await updateObjects({\n          commitMessage: `propose to add new ${ref.classID}`,\n          objectChangeset: updateCRObjectChangeset(\n            changeRequest as any,\n            { [itemPath]: { type: 'addition' } },\n            { [itemPath]: registerItem },\n          ),\n          _dangerouslySkipValidation: true,\n        });\n        return ref;\n      })\n    }\n  }), [changeRequest, canEdit, subregisters === undefined, updateObjects, makeRandomID]);\n\n  const updateItemProposal = useMemo((() =>\n    changeRequest && canEdit && updateObjects\n      ? async function _handleSetProposal(\n          summary: string,\n          proposal: ChangeProposal | null,\n          itemPath: string,\n          item?: RegisterItem<any>,\n          editedItemData?: Payload,\n        ): Promise<void> {\n          if (proposal && !item) {\n            throw new Error(\"Missing item\");\n          }\n          if (proposal && proposal?.type !== 'amendment' && (!editedItemData || !isRegisterItem(editedItemData))) {\n            throw new Error(\"Missing item data\");\n          }\n          await updateObjects({\n            commitMessage: `${summary} for ${itemPath}`,\n            objectChangeset: updateCRObjectChangeset(\n              // TODO: We are sure it’s editable already, but casting should be avoided\n              changeRequest as any,\n              { [itemPath]: proposal },\n              ((proposal && proposal?.type !== 'amendment') && editedItemData && item)\n                ? { [itemPath]: { ...item, data: editedItemData } }\n                : {},\n            ),\n            // We need this because updateCRObjectChangeset\n            // omits oldValue for item data payloads.\n            _dangerouslySkipValidation: true,\n          });\n        }\n      : undefined\n  ), [canEdit, changeRequest, updateObjects]);\n\n  const ctx: ChangeRequestContextSpec = useMemo((() => ({\n    changeRequest,\n    canEdit,\n    canTransition,\n    canDelete,\n    deleteCR,\n    proposeBlankItem,\n    updateItemProposal,\n  })), [changeRequest, canEdit, deleteCR, canDelete, proposeBlankItem, updateItemProposal]);\n\n  return (\n    <ChangeRequestContext.Provider value={ctx}>\n      {children}\n    </ChangeRequestContext.Provider>\n  );\n};\n"]}

package/views/change-request/Proposals.d.ts

@@ -1,12 +1,25 @@
 /** @jsx jsx */
 /** @jsxFrag React.Fragment */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import type { ChangeProposal, Clarification, InternalItemReference, Payload, RegisterItem } from '../../types';
 import type { Drafted } from '../../types/cr';
-declare const Proposals: React.FC<{
-    proposals: Drafted['items'];
+interface ProposalBrowserProps<CR extends Drafted> {
+    proposals: CR['items'];
+    /**
+     * If provided, button to delete each proposed change
+     * is shown in change card list mode.
+     */
+    onDeleteProposalForItemAtPath?: (itemPath: string) => void;
     className?: string;
-}>;
+}
+/**
+ * Shows a list of individual proposed changes as cards by default,
+ * allowing to expand a proposal and view item details.
+ *
+ * If no proposals exist, returns null.
+ */
+export declare function Proposals<CR extends Drafted>({ proposals, onDeleteProposalForItemAtPath, className }: ProposalBrowserProps<CR>): jsx.JSX.Element | null;
 interface ProposalProps<P extends ChangeProposal> {
     proposal: P;
     /** Highlight changes. */

package/views/change-request/Proposals.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.Proposals = Proposals;
 exports.default = exports.ProposalSummary = exports.ProposalDetail = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
@@ -29,6 +30,10 @@ var _useItemClassConfig = _interopRequireDefault(require("../hooks/useItemClassC
 
 var _InlineDiff = require("../diffing/InlineDiff");
 
+var _util = require("./util");
+
+var _Block = require("../detail/RegisterHome/Block");
+
 var _RegisterItem = require("../detail/RegisterItem");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -43,9 +48,17 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function stringifiedJSONEqual(i1, i2) {
   return JSON.stringify(i1) === JSON.stringify(i2);
 }
+/**
+ * Shows a list of individual proposed changes as cards by default,
+ * allowing to expand a proposal and view item details.
+ *
+ * If no proposals exist, returns null.
+ */
 
-const Proposals = function ({
+
+function Proposals({
   proposals,
+  onDeleteProposalForItemAtPath,
   className
 }) {
   var _a, _b;
@@ -138,17 +151,24 @@ const Proposals = function ({
   }), [proposals, getCurrentItem, getProposedItem]);
   const haveSelectedItem = selectedProposal && selectedItemRef && proposals[selectedProposal] && (selectedItemProposed || selectedItemCurrent);
   const proposalCount = Object.keys(proposals).length;
+  const selectedProposalDetailRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
-    if (!selectedProposal) {
-      const firstProposal = Object.keys(proposals)[0];
-
-      if (firstProposal) {
-        if (getCurrentItem(firstProposal) || getProposedItem(firstProposal)) {
-          selectProposal(firstProposal);
-        }
+    // if (!selectedProposal) {
+    //   const firstProposal = Object.keys(proposals)[0];
+    //   if (firstProposal) {
+    //     if (getCurrentItem(firstProposal) || getProposedItem(firstProposal)) {
+    //       selectProposal(firstProposal);
+    //     }
+    //   }
+    // }
+    if (selectedProposal) {
+      if (selectedProposalDetailRef.current) {
+        selectedProposalDetailRef.current.scrollIntoView({
+          block: 'center'
+        });
       }
     }
-  }, [proposalCount, selectedProposal, getCurrentItem, getProposedItem]);
+  }, [selectedProposal === null]);
   const canShowDiff = haveSelectedItem && ((_a = proposals[selectedProposal]) === null || _a === void 0 ? void 0 : _a.type) === 'clarification' ? true : false;
   const showDiff = canShowDiff && preferDiff;
 
@@ -160,67 +180,144 @@ const Proposals = function ({
       proposal: proposals[selectedProposal]
     }) : (0, _react2.jsx)(_react.default.Fragment, null, "Select item\u2026");
     const icon = haveSelectedItem ? getProposalIcon(proposals[selectedProposal]) : undefined;
-    return (0, _react2.jsx)("div", {
-      css: (0, _react2.css)`display: flex; flex-flow: column nowrap;`,
-      className: className
-    }, proposalCount > 0 ? (0, _react2.jsx)(_core.ButtonGroup, {
-      css: (0, _react2.css)`margin: 5px 0 0 5px;`
-    }, haveSelectedItem ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_core.Button, {
-      disabled: !jumpTo || ((_b = proposals[selectedProposal]) === null || _b === void 0 ? void 0 : _b.type) === 'addition',
-      icon: 'locate',
-      onClick: () => jumpTo === null || jumpTo === void 0 ? void 0 : jumpTo(`${_protocolRegistry.Protocols.ITEM_DETAILS}:${selectedProposal}`),
-      title: "Open selected item in a new tab (not applicable to proposed additions)"
-    }), (0, _react2.jsx)(_core.Button, {
-      active: preferDiff,
-      onClick: () => setPreferDiff(v => !v),
-      // Diffing only makes sense for clarifications.
-      // Additions are entire new items, and for amendments
-      // item data is unchanged.
-      disabled: !canShowDiff,
-      icon: "changes",
-      title: "Annotate proposed clarifications for this item"
-    })) : null, (0, _react2.jsx)(_react2.ClassNames, null, ({
-      css: css2
-    }) => (0, _react2.jsx)(_select.Select2, {
-      filterable: false,
-      itemsEqual: stringifiedJSONEqual,
-      menuProps: {
-        className: css2(`height: 50vh; overflow-y: auto;`)
-      },
-      activeItem: activeItem,
-      items: allItems,
-      popoverProps: {
-        minimal: true
-      },
-      fill: true,
-      itemRenderer: ChangeProposalItemView,
-      onItemSelect: handleItemSelect
-    }, (0, _react2.jsx)(_core.Button, {
-      rightIcon: "chevron-down",
-      icon: icon,
-      css: (0, _react2.css)`white-space: nowrap;`
-    }, selectedItemSummary)))) : null, haveSelectedItem ? (0, _react2.jsx)("div", {
-      css: (0, _react2.css)`position: relative; flex: 1;`
-    }, (0, _react2.jsx)(_BrowserCtx.BrowserCtx.Provider, {
-      value: proposalBrowserCtx
-    }, (0, _react2.jsx)(_ErrorBoundary.default, {
-      viewName: "Proposal detail"
-    }, (0, _react2.jsx)(ProposalDetail, {
-      itemRef: selectedItemRef,
-      showDiff: showDiff,
-      //showOnlyChanged={showOnlyChanged}
-      item: selectedItemProposed !== null && selectedItemProposed !== void 0 ? selectedItemProposed : selectedItemCurrent,
-      itemBefore: selectedItemCurrent !== null && selectedItemCurrent !== void 0 ? selectedItemCurrent : undefined,
-      proposal: proposals[selectedProposal]
-    })))) : null);
+
+    if (proposalCount > 0 && haveSelectedItem) {
+      return (0, _react2.jsx)(_core.Card, {
+        key: selectedProposal,
+        elevation: 0,
+        css: (0, _react2.css)`
+              flex: 100%;
+              background: ${_core.Colors.LIGHT_GRAY3};
+              padding: 0;
+              min-height: 70vh;
+
+              overflow: hidden;
+
+              border-radius: 5px;
+              display: flex;
+              flex-flow: column nowrap;
+              transition:
+                width .5s linear
+                height .5s linear;
+            `,
+        className: className
+      }, (0, _react2.jsx)(_core.ButtonGroup, null, (0, _react2.jsx)(_core.Button, {
+        disabled: !jumpTo || ((_b = proposals[selectedProposal]) === null || _b === void 0 ? void 0 : _b.type) === 'addition',
+        icon: 'open-application',
+        onClick: () => jumpTo === null || jumpTo === void 0 ? void 0 : jumpTo(`${_protocolRegistry.Protocols.ITEM_DETAILS}:${selectedProposal}`),
+        title: "Open selected item in a new tab (not applicable to proposed additions)"
+      }), (0, _react2.jsx)(_core.Button, {
+        active: preferDiff,
+        onClick: () => setPreferDiff(v => !v),
+        // Diffing only makes sense for clarifications.
+        // Additions are entire new items, and for amendments
+        // item data is unchanged.
+        disabled: !canShowDiff,
+        text: "Compare",
+        title: "Annotate proposed clarifications for this item"
+      }), (0, _react2.jsx)(_react2.ClassNames, null, ({
+        css: css2
+      }) => (0, _react2.jsx)(_select.Select2, {
+        filterable: false,
+        itemsEqual: stringifiedJSONEqual,
+        menuProps: {
+          className: css2(`max-height: 50vh; overflow-y: auto;`)
+        },
+        activeItem: activeItem,
+        items: allItems,
+        popoverProps: {
+          minimal: true,
+          matchTargetWidth: true
+        },
+        fill: true,
+        itemRenderer: ChangeProposalItemView,
+        onItemSelect: handleItemSelect
+      }, (0, _react2.jsx)(_core.Button, {
+        fill: true,
+        rightIcon: "chevron-down",
+        icon: icon,
+        css: (0, _react2.css)`white-space: nowrap;`
+      }, selectedItemSummary))), (0, _react2.jsx)(_core.Button, {
+        onClick: () => selectProposal(null),
+        icon: "minimize",
+        title: "Minimize proposed change view",
+        text: "Minimize"
+      })), (0, _react2.jsx)("div", {
+        css: (0, _react2.css)`position: relative; flex: 1;`,
+        ref: selectedProposalDetailRef
+      }, (0, _react2.jsx)(_BrowserCtx.BrowserCtx.Provider, {
+        value: proposalBrowserCtx
+      }, (0, _react2.jsx)(_ErrorBoundary.default, {
+        viewName: "Proposal detail"
+      }, (0, _react2.jsx)(ProposalDetail, {
+        itemRef: selectedItemRef,
+        showDiff: showDiff,
+        //showOnlyChanged={showOnlyChanged}
+        item: selectedItemProposed !== null && selectedItemProposed !== void 0 ? selectedItemProposed : selectedItemCurrent,
+        itemBefore: selectedItemCurrent !== null && selectedItemCurrent !== void 0 ? selectedItemCurrent : undefined,
+        proposal: proposals[selectedProposal]
+      })))));
+    } else {
+      return (0, _react2.jsx)(_react.default.Fragment, null, allItems.map(cpi => {
+        const actions = [{
+          onClick: () => selectProposal(cpi.itemPath),
+          text: "Expand",
+          title: "Expand proposed change to see item details",
+          icon: 'maximize'
+        }];
+
+        if (onDeleteProposalForItemAtPath) {
+          actions.push({
+            text: "Delete this proposal",
+            intent: 'danger',
+            onClick: () => onDeleteProposalForItemAtPath(cpi.itemPath),
+            icon: 'trash'
+          });
+        }
+
+        return (0, _react2.jsx)(_Block.HomeBlockCard, {
+          css: (0, _react2.css)`
+                  flex-basis: calc(33.33% - 10px*2/3);
+                `,
+          description: `${cpi.proposal.type} proposal`,
+          key: cpi.itemPath
+        }, (0, _react2.jsx)(ProposalType, {
+          item: cpi
+        }), (0, _react2.jsx)("div", {
+          css: (0, _react2.css)`padding: 5px; flex-grow: 1;`
+        }, cpi.item !== null ? (0, _react2.jsx)(_core.H5, {
+          css: (0, _react2.css)`margin: 0; overflow: hidden; text-overflow: ellipsis;`
+        }, (0, _react2.jsx)(ProposalSummary, {
+          itemRef: cpi.itemRef,
+          proposal: cpi.proposal,
+          itemBefore: cpi.itemBefore,
+          item: cpi.item
+        })) : (0, _react2.jsx)(_react.default.Fragment, null, "Problem reading proposed item data.")), actions.length > 0 ? (0, _react2.jsx)(_Block.HomeBlockActions, {
+          actions: actions
+        }) : null);
+      }));
+    }
   } else {
-    return (0, _react2.jsx)(_core.NonIdealState, {
-      icon: 'clean',
-      className: className,
-      title: "Nothing is proposed here yet."
-    });
+    return null;
   }
-};
+}
+
+;
+
+function ProposalType({
+  item
+}) {
+  const proposalConfig = item.proposal.type === 'amendment' ? PROPOSAL_VIEWS[item.proposal.amendmentType] : PROPOSAL_VIEWS[item.proposal.type]; //const ProposalTypeLabel: React.FC<ProposalProps<any>> = proposalConfig.summary;
+
+  const tagProps = (0, _util.proposalToTagProps)(item.proposal);
+  return (0, _react2.jsx)(_core.Tag, {
+    minimal: true,
+    ...tagProps,
+    rightIcon: (0, _react2.jsx)(_HelpTooltip.default, {
+      content: (0, _react2.jsx)(_react.default.Fragment, null, "Proposed to be ", proposalConfig.hint)
+    })
+  });
+}
 
 const ChangeProposalItemView = (item, {
   handleClick,
@@ -229,15 +326,12 @@ const ChangeProposalItemView = (item, {
 }) => {
   if (item.item !== null) {
     const i = item;
-    const proposalConfig = item.proposal.type === 'amendment' ? PROPOSAL_VIEWS[item.proposal.amendmentType] : PROPOSAL_VIEWS[item.proposal.type];
-    const ProposalTypeLabel = proposalConfig.summary;
     return (0, _react2.jsx)(_core.MenuItem, {
       active: modifiers.active,
       disabled: modifiers.disabled,
-      labelElement: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(ProposalTypeLabel, { ...i
-      }), " ", (0, _react2.jsx)(_HelpTooltip.default, {
-        content: (0, _react2.jsx)(_react.default.Fragment, null, "Proposed to be ", proposalConfig.hint)
-      })),
+      labelElement: (0, _react2.jsx)(ProposalType, {
+        item: i
+      }),
       key: item.itemPath,
       onClick: handleClick,
       icon: getProposalIcon(item.proposal),
@@ -302,7 +396,7 @@ const ProposalSummary = function ({
   itemBefore,
   onChange
 }) {
-  var _a, _b;
+  var _a;
 
   const {
     itemClasses
@@ -310,13 +404,15 @@ const ProposalSummary = function ({
   const {
     classID
   } = itemRef;
-  const ListItemView = (_b = (_a = itemClasses[classID]) === null || _a === void 0 ? void 0 : _a.views) === null || _b === void 0 ? void 0 : _b.listItemView;
+  const cls = itemClasses[classID];
+  const ListItemView = (_a = cls === null || cls === void 0 ? void 0 : cls.views) === null || _a === void 0 ? void 0 : _a.listItemView;
 
   if (ListItemView) {
-    return (0, _react2.jsx)(ListItemView, {
+    return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(ListItemView, {
       itemRef: itemRef,
-      itemData: item.data
-    });
+      itemData: item.data,
+      css: (0, _react2.css)`text-overflow: ellipsis; overflow: hidden;`
+    }), "\u2003", (0, _react2.jsx)("small", null, cls.meta.title));
   } else {
     return (0, _react2.jsx)(_ErrorState.default, {
       viewName: "list item view",