@riboseinc/paneron-registry-kit 2.2.12 → 2.2.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riboseinc/paneron-registry-kit",
-  "version": "2.2.12",
+  "version": "2.2.14",
   "main": "index.js",
   "author": "Ribose Inc. <open.source@ribose.com>",
   "scripts": {
@@ -28,7 +28,7 @@
     "@blueprintjs/select": "~4.9.10",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
-    "@riboseinc/paneron-extension-kit": "2.2.10",
+    "@riboseinc/paneron-extension-kit": "2.2.11",
     "@types/react": "17.0.53",
     "@types/react-dom": "^17.0.2",
     "@types/react-helmet": "^6.1.2",

package/types/util.d.ts

@@ -6,6 +6,9 @@ export interface Locale {
 }
 export interface Citation {
     title: string;
+    author?: string | null;
+    publicationDate?: string | null;
+    revisionDate?: string | null;
     seriesIssueID: string | null;
     seriesName: string | null;
     seriesPage: string | null;

package/types/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sourceRoot":"","sources":["../../src/types/util.ts"],"names":[],"mappings":"AAAA,YAAY","sourcesContent":["// Utilities\n\nexport interface Locale {\n  name: string\n  country: string\n  languageCode: string // ISO 639-2\n  characterEncoding: 'utf-8' // TODO: Support more encodings\n  // TODO: citation?: CI_Citation\n}\n\n\nexport interface Citation {\n  title: string\n\n  seriesIssueID: string | null\n  seriesName: string | null\n  seriesPage: string | null\n\n  edition: string | null\n  editionDate: Date | null\n\n  otherDetails: string\n\n  isbn: string | null\n  issn: string | null\n\n  alternateTitles?: string[]\n\n  uri?: string\n\n  //publicationDate: Date\n}\n\n\nexport interface LocalizedAlternative<T> {\n  alternative: T\n  locale: Locale\n}\n"]}
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../../src/types/util.ts"],"names":[],"mappings":"AAAA,YAAY","sourcesContent":["// Utilities\n\nexport interface Locale {\n  name: string\n  country: string\n  languageCode: string // ISO 639-2\n  characterEncoding: 'utf-8' // TODO: Support more encodings\n  // TODO: citation?: CI_Citation\n}\n\n\nexport interface Citation {\n  title: string\n\n  author?: string | null\n  publicationDate?: string | null\n  revisionDate?: string | null\n\n  seriesIssueID: string | null\n  seriesName: string | null\n  seriesPage: string | null\n\n  edition: string | null\n  editionDate: Date | null\n\n  otherDetails: string\n\n  isbn: string | null\n  issn: string | null\n\n  alternateTitles?: string[]\n\n  uri?: string\n\n  //publicationDate: Date\n}\n\n\nexport interface LocalizedAlternative<T> {\n  alternative: T\n  locale: Locale\n}\n"]}

package/views/SearchQuery.js

@@ -80,6 +80,13 @@ const SearchQuery = (0, _react.memo)(function ({
       };
     }
   }, [quickSearchString, getQuickSearchPredicate, itemClasses, subregisters]);
+  const quickSearchIsEnabled = onQuickSearchStringChange && !hasAdvancedQuery;
+  const quickSearchInputRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (quickSearchIsEnabled && quickSearchInputRef.current) {
+      quickSearchInputRef.current.focus();
+    }
+  }, []);
   return (0, _react2.jsx)(_core.ControlGroup, {
     fill: true,
     vertical: true,
@@ -87,7 +94,8 @@ const SearchQuery = (0, _react.memo)(function ({
   }, (0, _react2.jsx)(_core.InputGroup, {
     fill: true,
     small: true,
-    disabled: !onQuickSearchStringChange || hasAdvancedQuery,
+    inputRef: quickSearchInputRef,
+    disabled: !quickSearchIsEnabled,
     value: hasAdvancedQuery ? '' : quickSearchString,
     leftIcon: "search",
     placeholder: "Quick search",

package/views/SearchQuery.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchQuery.js","sourceRoot":"","sources":["../../src/views/SearchQuery.tsx"],"names":[],"mappings":"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","sourcesContent":["/** @jsx jsx */\n/** @jsxFrag React.Fragment */\n\nimport React, { memo, useState, useContext, useCallback } from 'react';\nimport { jsx, css } from '@emotion/react';\nimport { Button, ControlGroup, Colors, InputGroup, Tag, ButtonGroup } from '@blueprintjs/core';\nimport CriteriaTree from './FilterCriteria';\nimport { CUSTOM_CONDITION, RAW_SUBSTRING } from './FilterCriteria/CRITERIA_CONFIGURATION';\nimport { CriteriaGroup, Criterion } from './FilterCriteria/models';\nimport criteriaGroupToQueryExpression from './FilterCriteria/criteriaGroupToQueryExpression';\n//import criteriaGroupToSummary from './FilterCriteria/criteriaGroupToSummary';\nimport { BrowserCtx } from './BrowserCtx';\n\n\nconst SearchQuery: React.FC<{\n  rootCriteria: CriteriaGroup;\n  onCriteriaChange?: (rootCriteria: CriteriaGroup) => void;\n\n  quickSearchString: string;\n  onQuickSearchStringChange?: (searchString: string) => void;\n\n  availableClassIDs?: string[];\n  className?: string;\n}> = memo(function ({\n  rootCriteria,\n  onCriteriaChange,\n  quickSearchString,\n  onQuickSearchStringChange,\n  availableClassIDs,\n  className,\n}) {\n  const { itemClasses, subregisters, getQuickSearchPredicate } = useContext(BrowserCtx);\n\n  const [ editingAdvanced, toggleEditingAdvanced ] = useState<boolean>(false);\n\n  const classIDs = availableClassIDs ?? Object.keys(itemClasses);\n\n  const hasAdvancedQuery = rootCriteria.criteria.length > 0;\n\n  const makeDefaultCriteria = useCallback(function makeDefaultCriteria(): Criterion {\n    if (quickSearchString) {\n      if (getQuickSearchPredicate) {\n        return {\n          key: 'custom',\n          query: CUSTOM_CONDITION.toQuery(\n            { customExpression: getQuickSearchPredicate(quickSearchString) },\n            { itemClasses, subregisters },\n          ),\n        }\n      } else {\n        return {\n          key: 'raw-substring',\n          query: RAW_SUBSTRING.toQuery(\n            { substring: quickSearchString },\n            { itemClasses, subregisters },\n          ),\n        }\n      }\n    } else {\n      return {\n        key: 'custom',\n        query: CUSTOM_CONDITION.toQuery(\n          { customExpression: 'false' },\n          { itemClasses, subregisters },\n        ),\n      }\n    }\n  }, [quickSearchString, getQuickSearchPredicate, itemClasses, subregisters]);\n\n  return (\n    <ControlGroup fill vertical className={className}>\n      <InputGroup\n        fill\n        small\n        disabled={!onQuickSearchStringChange || hasAdvancedQuery}\n        value={hasAdvancedQuery ? '' : quickSearchString}\n        leftIcon=\"search\"\n        placeholder=\"Quick search\"\n        title={!hasAdvancedQuery\n          ? \"Search for a substring occurring anywhere within serialized item data.\"\n          : \"Advanced query overrides quick search.\"}\n        css={css`width: 200px; ${quickSearchString !== '' && !hasAdvancedQuery ? 'input { font-weight: bold; }' : ''}`}\n        rightElement={<Button\n          disabled={!onQuickSearchStringChange || quickSearchString === '' || hasAdvancedQuery}\n          onClick={() => onQuickSearchStringChange?.('')}\n          small\n          minimal\n          icon=\"cross\"\n          title=\"Clear quick search\" />}\n        onChange={evt => onQuickSearchStringChange?.(evt.currentTarget.value)} />\n      <ButtonGroup fill>\n        <Button\n          fill\n          small\n          title=\"Edit advanced search query\"\n          icon='filter'\n          onClick={!hasAdvancedQuery\n            ? (() => {\n                onCriteriaChange!({ criteria: [makeDefaultCriteria()], require: 'all' });\n                toggleEditingAdvanced(true);\n              })\n            : () => toggleEditingAdvanced(v => !v)}\n          active={editingAdvanced && hasAdvancedQuery}\n          disabled={!hasAdvancedQuery && !onCriteriaChange}\n          rightIcon={rootCriteria.criteria.length > 0\n            ? <Tag intent=\"success\" round>on</Tag>\n            : <Tag round>off</Tag>}>\n          Advanced\n        </Button>\n      </ButtonGroup>\n      {hasAdvancedQuery && editingAdvanced\n        ? <>\n            <CriteriaTree\n              key=\"tree\"\n              criteria={rootCriteria}\n              onChange={onCriteriaChange}\n              itemClasses={itemClasses}\n              availableClassIDs={classIDs}\n              subregisters={subregisters}\n              css={css`max-height: 50vh; overflow-y: auto;`} />\n            <div\n                key=\"query\"\n                css={css`\n                  margin-top: 5px;\n                  padding: 0 10px 10px 10px;\n                  color: ${Colors.GRAY3};\n                  font-size: 90%;\n                  overflow-wrap: break-word;\n                `}>\n              Query used: <code>{criteriaGroupToQueryExpression(rootCriteria)}</code>\n            </div>\n          </>\n        : null}\n    </ControlGroup>\n  );\n});\n\nexport default SearchQuery;\n"]}
+{"version":3,"file":"SearchQuery.js","sourceRoot":"","sources":["../../src/views/SearchQuery.tsx"],"names":[],"mappings":"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","sourcesContent":["/** @jsx jsx */\n/** @jsxFrag React.Fragment */\n\nimport React, { memo, useEffect, useRef, useState, useContext, useCallback } from 'react';\nimport { jsx, css } from '@emotion/react';\nimport { Button, ControlGroup, Colors, InputGroup, Tag, ButtonGroup } from '@blueprintjs/core';\nimport CriteriaTree from './FilterCriteria';\nimport { CUSTOM_CONDITION, RAW_SUBSTRING } from './FilterCriteria/CRITERIA_CONFIGURATION';\nimport { CriteriaGroup, Criterion } from './FilterCriteria/models';\nimport criteriaGroupToQueryExpression from './FilterCriteria/criteriaGroupToQueryExpression';\n//import criteriaGroupToSummary from './FilterCriteria/criteriaGroupToSummary';\nimport { BrowserCtx } from './BrowserCtx';\n\n\nconst SearchQuery: React.FC<{\n  rootCriteria: CriteriaGroup;\n  onCriteriaChange?: (rootCriteria: CriteriaGroup) => void;\n\n  quickSearchString: string;\n  onQuickSearchStringChange?: (searchString: string) => void;\n\n  availableClassIDs?: string[];\n  className?: string;\n}> = memo(function ({\n  rootCriteria,\n  onCriteriaChange,\n  quickSearchString,\n  onQuickSearchStringChange,\n  availableClassIDs,\n  className,\n}) {\n  const { itemClasses, subregisters, getQuickSearchPredicate } = useContext(BrowserCtx);\n\n  const [ editingAdvanced, toggleEditingAdvanced ] = useState<boolean>(false);\n\n  const classIDs = availableClassIDs ?? Object.keys(itemClasses);\n\n  const hasAdvancedQuery = rootCriteria.criteria.length > 0;\n\n  const makeDefaultCriteria = useCallback(function makeDefaultCriteria(): Criterion {\n    if (quickSearchString) {\n      if (getQuickSearchPredicate) {\n        return {\n          key: 'custom',\n          query: CUSTOM_CONDITION.toQuery(\n            { customExpression: getQuickSearchPredicate(quickSearchString) },\n            { itemClasses, subregisters },\n          ),\n        }\n      } else {\n        return {\n          key: 'raw-substring',\n          query: RAW_SUBSTRING.toQuery(\n            { substring: quickSearchString },\n            { itemClasses, subregisters },\n          ),\n        }\n      }\n    } else {\n      return {\n        key: 'custom',\n        query: CUSTOM_CONDITION.toQuery(\n          { customExpression: 'false' },\n          { itemClasses, subregisters },\n        ),\n      }\n    }\n  }, [quickSearchString, getQuickSearchPredicate, itemClasses, subregisters]);\n\n  const quickSearchIsEnabled = onQuickSearchStringChange && !hasAdvancedQuery;\n  const quickSearchInputRef = useRef<HTMLInputElement | null>(null);\n  useEffect(() => {\n    if (quickSearchIsEnabled && quickSearchInputRef.current) {\n      quickSearchInputRef.current.focus();\n    }\n  }, []);\n\n  return (\n    <ControlGroup fill vertical className={className}>\n      <InputGroup\n        fill\n        small\n        inputRef={quickSearchInputRef}\n        disabled={!quickSearchIsEnabled}\n        value={hasAdvancedQuery ? '' : quickSearchString}\n        leftIcon=\"search\"\n        placeholder=\"Quick search\"\n        title={!hasAdvancedQuery\n          ? \"Search for a substring occurring anywhere within serialized item data.\"\n          : \"Advanced query overrides quick search.\"}\n        css={css`width: 200px; ${quickSearchString !== '' && !hasAdvancedQuery ? 'input { font-weight: bold; }' : ''}`}\n        rightElement={<Button\n          disabled={!onQuickSearchStringChange || quickSearchString === '' || hasAdvancedQuery}\n          onClick={() => onQuickSearchStringChange?.('')}\n          small\n          minimal\n          icon=\"cross\"\n          title=\"Clear quick search\" />}\n        onChange={evt => onQuickSearchStringChange?.(evt.currentTarget.value)} />\n      <ButtonGroup fill>\n        <Button\n          fill\n          small\n          title=\"Edit advanced search query\"\n          icon='filter'\n          onClick={!hasAdvancedQuery\n            ? (() => {\n                onCriteriaChange!({ criteria: [makeDefaultCriteria()], require: 'all' });\n                toggleEditingAdvanced(true);\n              })\n            : () => toggleEditingAdvanced(v => !v)}\n          active={editingAdvanced && hasAdvancedQuery}\n          disabled={!hasAdvancedQuery && !onCriteriaChange}\n          rightIcon={rootCriteria.criteria.length > 0\n            ? <Tag intent=\"success\" round>on</Tag>\n            : <Tag round>off</Tag>}>\n          Advanced\n        </Button>\n      </ButtonGroup>\n      {hasAdvancedQuery && editingAdvanced\n        ? <>\n            <CriteriaTree\n              key=\"tree\"\n              criteria={rootCriteria}\n              onChange={onCriteriaChange}\n              itemClasses={itemClasses}\n              availableClassIDs={classIDs}\n              subregisters={subregisters}\n              css={css`max-height: 50vh; overflow-y: auto;`} />\n            <div\n                key=\"query\"\n                css={css`\n                  margin-top: 5px;\n                  padding: 0 10px 10px 10px;\n                  color: ${Colors.GRAY3};\n                  font-size: 90%;\n                  overflow-wrap: break-word;\n                `}>\n              Query used: <code>{criteriaGroupToQueryExpression(rootCriteria)}</code>\n            </div>\n          </>\n        : null}\n    </ControlGroup>\n  );\n});\n\nexport default SearchQuery;\n"]}

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

@@ -2,6 +2,7 @@
 /** @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,
@@ -23,6 +24,12 @@ export interface ChangeRequestContextSpec {
      * 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 if operation is not possible right now,

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;
@@ -68,13 +76,85 @@ const ChangeRequestContextProvider = function ({
       commitMessage: 'remove unproposed CR draft'
     });
   }) : 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, 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 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   * 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, 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 && 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 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",