@webiny/app-headless-cms 0.0.0-mt-1

package/admin/views/contentEntries/ContentEntries.js

@@ -0,0 +1,73 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+var _templateObject, _templateObject2;
+
+import React, { useState } from "react";
+import get from "lodash/get";
+import { useRouter } from "@webiny/react-router";
+import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
+import { i18n } from "@webiny/app/i18n";
+import { CircularProgress } from "@webiny/ui/Progress";
+import { LeftPanel, RightPanel, SplitView } from "@webiny/app-admin/components/SplitView";
+import { Provider as ContentEntriesProvider } from "./ContentEntriesContext";
+import { GET_CONTENT_MODEL } from "../../graphql/contentModels";
+import { useQuery } from "../../hooks";
+import ContentEntriesList from "./ContentEntriesList";
+import ContentEntry from "./ContentEntry";
+import { Provider as ContentEntryProvider } from "./ContentEntry/ContentEntryContext";
+var t = i18n.ns("app-headless-cms/admin/content-entries");
+
+var ContentEntries = function ContentEntries() {
+  var _useRouter = useRouter(),
+      match = _useRouter.match;
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      contentModel = _useState2[0],
+      setContentModel = _useState2[1];
+
+  var _useRouter2 = useRouter(),
+      history = _useRouter2.history;
+
+  var modelId = get(match, "params.modelId");
+
+  var _useSnackbar = useSnackbar(),
+      showSnackbar = _useSnackbar.showSnackbar;
+
+  useQuery(GET_CONTENT_MODEL, {
+    skip: !modelId,
+    variables: {
+      modelId: modelId
+    },
+    onCompleted: function onCompleted(data) {
+      var contentModel = get(data, "getContentModel.data");
+
+      if (contentModel) {
+        return setContentModel(contentModel);
+      }
+
+      history.push("/cms/content-models");
+      showSnackbar(t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Could not load content for model \"{modelId}\". Redirecting..."])))({
+        modelId: modelId
+      }));
+    }
+  });
+
+  if (!contentModel) {
+    return /*#__PURE__*/React.createElement(CircularProgress, {
+      label: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Loading content model..."])))
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(ContentEntriesProvider, {
+    contentModel: contentModel,
+    key: contentModel.modelId
+  }, /*#__PURE__*/React.createElement(SplitView, null, /*#__PURE__*/React.createElement(LeftPanel, {
+    span: 4
+  }, /*#__PURE__*/React.createElement(ContentEntriesList, null)), /*#__PURE__*/React.createElement(RightPanel, {
+    span: 8
+  }, /*#__PURE__*/React.createElement(ContentEntryProvider, null, /*#__PURE__*/React.createElement(ContentEntry, null)))));
+};
+
+export default ContentEntries;

package/admin/views/contentEntries/ContentEntriesContext.d.ts

@@ -0,0 +1,24 @@
+import React, { Dispatch, SetStateAction } from "react";
+import { CmsEditorContentModel } from "../../../types";
+export interface ListQueryVariables {
+    sort?: string;
+    status?: string;
+}
+export interface ContentEntriesContext {
+    contentModel: CmsEditorContentModel;
+    sorters: Array<{
+        label: string;
+        value: string;
+    }>;
+    canCreate: boolean;
+    listQueryVariables: ListQueryVariables;
+    setListQueryVariables: Dispatch<SetStateAction<ListQueryVariables>>;
+}
+export declare const Context: React.Context<ContentEntriesContext>;
+export declare const Provider: {
+    ({ contentModel, children }: {
+        contentModel: any;
+        children: any;
+    }): JSX.Element;
+    displayName: string;
+};

package/admin/views/contentEntries/ContentEntriesContext.js

@@ -0,0 +1,78 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+import React, { useState, useMemo } from "react";
+import { useSecurity } from "@webiny/app-security";
+import { i18n } from "@webiny/app/i18n";
+var t = i18n.ns("app-headless-cms/admin/contents/entries");
+var SORTERS = [{
+  label: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Newest to oldest"]))),
+  value: "savedOn_DESC"
+}, {
+  label: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Oldest to newest"]))),
+  value: "savedOn_ASC"
+}];
+export var Context = /*#__PURE__*/React.createContext(null);
+export var Provider = function Provider(_ref) {
+  var contentModel = _ref.contentModel,
+      children = _ref.children;
+
+  var _useSecurity = useSecurity(),
+      identity = _useSecurity.identity;
+
+  var _useState = useState({
+    sort: SORTERS[0].value
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      listQueryVariables = _useState2[0],
+      setListQueryVariables = _useState2[1];
+
+  var canCreate = useMemo(function () {
+    var permission = identity.getPermission("cms.contentEntry");
+
+    if (!permission) {
+      return false;
+    }
+
+    if (typeof permission.rwd !== "string") {
+      return true;
+    }
+
+    return permission.rwd.includes("w");
+  }, []);
+  var sorters = useMemo(function () {
+    var titleField = contentModel.fields.find(function (field) {
+      return field.fieldId === contentModel.titleFieldId;
+    });
+    var titleFieldLabel = titleField ? titleField.label : null;
+
+    if (!titleFieldLabel) {
+      return SORTERS;
+    }
+
+    return [].concat(SORTERS, [{
+      label: t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["{titleFieldLabel} A-Z"])))({
+        titleFieldLabel: titleFieldLabel
+      }),
+      value: "".concat(contentModel.titleFieldId, "_ASC")
+    }, {
+      label: t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["{titleFieldLabel} Z-A"])))({
+        titleFieldLabel: titleFieldLabel
+      }),
+      value: "".concat(contentModel.titleFieldId, "_DESC")
+    }]);
+  }, [contentModel.modelId]);
+  var value = {
+    contentModel: contentModel,
+    sorters: sorters,
+    canCreate: canCreate,
+    listQueryVariables: listQueryVariables,
+    setListQueryVariables: setListQueryVariables
+  };
+  return /*#__PURE__*/React.createElement(Context.Provider, {
+    value: value
+  }, children);
+};
+Provider.displayName = "ContentEntriesProvider";

package/admin/views/contentEntries/ContentEntriesList.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const ContentEntriesList: () => JSX.Element;
+export default ContentEntriesList;

package/admin/views/contentEntries/ContentEntriesList.js

@@ -0,0 +1,180 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+
+import React, { useMemo } from "react";
+import debounce from "lodash/debounce";
+import { css } from "emotion";
+import TimeAgo from "timeago-react";
+import pluralize from "pluralize";
+import styled from "@emotion/styled";
+import { i18n } from "@webiny/app/i18n";
+import { Form } from "@webiny/form";
+import { Typography } from "@webiny/ui/Typography";
+import * as UIList from "@webiny/ui/List";
+import { ButtonIcon, ButtonSecondary } from "@webiny/ui/Button";
+import { Cell, Grid } from "@webiny/ui/Grid";
+import { Select } from "@webiny/ui/Select";
+import { Scrollbar } from "@webiny/ui/Scrollbar";
+import { ReactComponent as AddIcon } from "@svgr/webpack!@webiny/app-admin/assets/icons/add-18px.svg";
+import { ReactComponent as FilterIcon } from "@svgr/webpack!@webiny/app-admin/assets/icons/filter-24px.svg";
+import SearchUI from "@webiny/app-admin/components/SearchUI";
+import statusLabels from "../../constants/statusLabels";
+import { useCallback } from "react";
+import { useContentEntriesList } from "./hooks/useContentEntriesList";
+var t = i18n.ns("app-headless-cms/admin/contents/data-list");
+var rightAlign = /*#__PURE__*/css({
+  alignItems: "flex-end !important",
+  justifyContent: "center !important"
+}, "label:rightAlign;");
+var ModelId = /*#__PURE__*/styled("span", {
+  target: "e1yw2ynr0",
+  label: "ModelId"
+})({
+  color: "var(--mdc-theme-text-secondary-on-background)"
+});
+var InlineLoaderWrapper = /*#__PURE__*/styled("div", {
+  target: "e1yw2ynr1",
+  label: "InlineLoaderWrapper"
+})({
+  position: "absolute",
+  bottom: 0,
+  left: 0,
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  width: "100%",
+  height: 40,
+  backgroundColor: "var(--mdc-theme-surface)"
+});
+var listItemMinHeight = /*#__PURE__*/css({
+  minHeight: "66px !important"
+}, "label:listItemMinHeight;");
+
+var ContentEntriesList = function ContentEntriesList() {
+  var _useContentEntriesLis = useContentEntriesList(),
+      contentModel = _useContentEntriesLis.contentModel,
+      entryId = _useContentEntriesLis.entryId,
+      loading = _useContentEntriesLis.loading,
+      canCreate = _useContentEntriesLis.canCreate,
+      onCreate = _useContentEntriesLis.onCreate,
+      data = _useContentEntriesLis.data,
+      editEntry = _useContentEntriesLis.editEntry,
+      loadMore = _useContentEntriesLis.loadMore,
+      loadMoreLoading = _useContentEntriesLis.loadMoreLoading,
+      listQueryVariables = _useContentEntriesLis.listQueryVariables,
+      setListQueryVariables = _useContentEntriesLis.setListQueryVariables,
+      sorters = _useContentEntriesLis.sorters,
+      filter = _useContentEntriesLis.filter,
+      setFilter = _useContentEntriesLis.setFilter;
+
+  var loadMoreOnScroll = useCallback(debounce(function (scrollFrame) {
+    if (scrollFrame.top > 0.9) {
+      loadMore();
+    }
+  }, 500), [data]);
+  var entriesDataListModalOverlay = useMemo(function () {
+    return /*#__PURE__*/React.createElement(UIList.DataListModalOverlay, null, /*#__PURE__*/React.createElement(Form, {
+      data: listQueryVariables,
+      onChange: function onChange(_ref) {
+        var status = _ref.status,
+            sort = _ref.sort;
+        setListQueryVariables(function (prevState) {
+          return _objectSpread(_objectSpread({}, prevState), {}, {
+            sort: sort,
+            status: status
+          });
+        });
+      }
+    }, function (_ref2) {
+      var Bind = _ref2.Bind;
+      return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+        span: 12
+      }, /*#__PURE__*/React.createElement(Bind, {
+        name: "sort"
+      }, /*#__PURE__*/React.createElement(Select, {
+        label: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Sort by"])))
+      }, sorters.map(function (_ref3) {
+        var label = _ref3.label,
+            value = _ref3.value;
+        return /*#__PURE__*/React.createElement("option", {
+          key: label,
+          value: value
+        }, label);
+      })))), /*#__PURE__*/React.createElement(Cell, {
+        span: 12
+      }, /*#__PURE__*/React.createElement(Bind, {
+        name: "status"
+      }, /*#__PURE__*/React.createElement(Select, {
+        label: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Filter by status"]))),
+        description: "Filter by a specific page status."
+      }, /*#__PURE__*/React.createElement("option", {
+        value: "all"
+      }, t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["All"])))), /*#__PURE__*/React.createElement("option", {
+        value: "draft"
+      }, t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["Draft"])))), /*#__PURE__*/React.createElement("option", {
+        value: "published"
+      }, t(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["Published"])))), /*#__PURE__*/React.createElement("option", {
+        value: "unpublished"
+      }, t(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["Unpublished"])))), /*#__PURE__*/React.createElement("option", {
+        value: "reviewRequested"
+      }, t(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["Review requested"])))), /*#__PURE__*/React.createElement("option", {
+        value: "changesRequested"
+      }, t(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["Changes requested"]))))))));
+    }));
+  }, [listQueryVariables]);
+  return /*#__PURE__*/React.createElement(UIList.DataList, {
+    loading: loading,
+    data: data,
+    title: /*#__PURE__*/React.createElement("span", null, pluralize(contentModel.name), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Typography, {
+      use: "subtitle1"
+    }, /*#__PURE__*/React.createElement(ModelId, null, "Model ID: ", contentModel.modelId))),
+    actions: canCreate ? /*#__PURE__*/React.createElement(ButtonSecondary, {
+      "data-testid": "new-record-button",
+      onClick: onCreate
+    }, /*#__PURE__*/React.createElement(ButtonIcon, {
+      icon: /*#__PURE__*/React.createElement(AddIcon, null)
+    }), " ", t(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["New Entry"])))) : null,
+    search: /*#__PURE__*/React.createElement(SearchUI, {
+      value: filter,
+      onChange: setFilter,
+      inputPlaceholder: t(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["Search {title}"])))({
+        title: pluralize(contentModel.name)
+      })
+    }),
+    modalOverlay: entriesDataListModalOverlay,
+    modalOverlayAction: /*#__PURE__*/React.createElement(UIList.DataListModalOverlayAction, {
+      icon: /*#__PURE__*/React.createElement(FilterIcon, null),
+      "data-testid": "default-data-list.filter"
+    })
+  }, function (_ref4) {
+    var data = _ref4.data;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Scrollbar, {
+      "data-testid": "default-data-list",
+      onScrollFrame: function onScrollFrame(scrollFrame) {
+        return loadMoreOnScroll(scrollFrame);
+      }
+    }, data.map(function (item) {
+      return /*#__PURE__*/React.createElement(UIList.ListItem, {
+        key: item.id,
+        className: listItemMinHeight,
+        selected: item.id === entryId
+      }, /*#__PURE__*/React.createElement(UIList.ListItemText, {
+        onClick: editEntry(item)
+      }, item.meta.title || "Untitled", /*#__PURE__*/React.createElement(UIList.ListItemTextSecondary, null, t(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["Last modified: {time}."])))({
+        time: /*#__PURE__*/React.createElement(TimeAgo, {
+          datetime: item.savedOn
+        })
+      }))), /*#__PURE__*/React.createElement(UIList.ListItemMeta, {
+        className: rightAlign
+      }, /*#__PURE__*/React.createElement(Typography, {
+        use: "subtitle2"
+      }, statusLabels[item.meta.status], " (v", item.meta.version, ")")));
+    })), loadMoreLoading && /*#__PURE__*/React.createElement(InlineLoaderWrapper, null, /*#__PURE__*/React.createElement(Typography, {
+      use: "overline"
+    }, t(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["Loading more entries..."]))))));
+  });
+};
+
+export default ContentEntriesList;

package/admin/views/contentEntries/ContentEntry/ContentEntryContext.d.ts

@@ -0,0 +1,28 @@
+import React, { Dispatch, SetStateAction, MutableRefObject } from "react";
+import { ContentEntriesContext } from "../ContentEntriesContext";
+import { CmsContentEntryRevision, CmsEditorContentEntry } from "../../../../types";
+import { Tabs } from "@webiny/ui/Tabs";
+export interface ContentEntryContext extends ContentEntriesContext {
+    createEntry: () => void;
+    entry: CmsEditorContentEntry;
+    form: MutableRefObject<{
+        submit: Function;
+    }>;
+    setFormRef: (form: {
+        submit: Function;
+    }) => void;
+    loading: boolean;
+    setLoading: Dispatch<SetStateAction<boolean>>;
+    revisions: CmsContentEntryRevision[];
+    refetchContent: () => void;
+    tabs: MutableRefObject<Tabs>;
+    setTabsRef: (tabs: Tabs) => void;
+    showEmptyView: boolean;
+}
+export declare const Context: React.Context<ContentEntryContext>;
+export declare const Provider: {
+    ({ children }: {
+        children: any;
+    }): JSX.Element;
+    displayName: string;
+};

package/admin/views/contentEntries/ContentEntry/ContentEntryContext.js

@@ -0,0 +1,113 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useRef, useState, useCallback, useMemo } from "react";
+import isEmpty from "lodash/isEmpty";
+import get from "lodash/get";
+import { useRouter } from "@webiny/react-router";
+import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
+import * as GQL from "../../../graphql/contentEntries";
+import { useQuery } from "../../../hooks";
+import { useContentEntries } from "../hooks/useContentEntries";
+export var Context = /*#__PURE__*/React.createContext(null);
+export var Provider = function Provider(_ref) {
+  var children = _ref.children;
+
+  var _useContentEntries = useContentEntries(),
+      contentModel = _useContentEntries.contentModel,
+      canCreate = _useContentEntries.canCreate,
+      listQueryVariables = _useContentEntries.listQueryVariables,
+      setListQueryVariables = _useContentEntries.setListQueryVariables,
+      sorters = _useContentEntries.sorters;
+
+  var formRef = useRef(null);
+  var tabsRef = useRef(null);
+
+  var _useRouter = useRouter(),
+      history = _useRouter.history,
+      location = _useRouter.location;
+
+  var _useSnackbar = useSnackbar(),
+      showSnackbar = _useSnackbar.showSnackbar;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isLoading = _useState2[0],
+      setLoading = _useState2[1];
+
+  var newEntry = new URLSearchParams(location.search).get("new") === "true";
+  var query = new URLSearchParams(location.search);
+  var contentId = query.get("id");
+  var revisionId = contentId ? decodeURIComponent(contentId) : null;
+  var entryId = revisionId ? revisionId.split("#")[0] : null;
+
+  var _useMemo = useMemo(function () {
+    return {
+      READ_CONTENT: GQL.createReadQuery(contentModel)
+    };
+  }, [contentModel.modelId]),
+      READ_CONTENT = _useMemo.READ_CONTENT;
+
+  var _useMemo2 = useMemo(function () {
+    return {
+      GET_REVISIONS: GQL.createRevisionsQuery(contentModel)
+    };
+  }, [contentModel.modelId]),
+      GET_REVISIONS = _useMemo2.GET_REVISIONS;
+
+  var setFormRef = useCallback(function (form) {
+    formRef.current = form;
+  }, [formRef]);
+  var setTabsRef = useCallback(function (tabs) {
+    tabsRef.current = tabs;
+  }, [tabsRef]);
+  var createEntry = useCallback(function () {
+    history.push("/cms/content-entries/".concat(contentModel.modelId, "?new=true"));
+  }, [contentModel.modelId]);
+  var getEntry = useQuery(READ_CONTENT, {
+    variables: {
+      revision: decodeURIComponent(contentId)
+    },
+    skip: !contentId,
+    onCompleted: function onCompleted(data) {
+      if (!data) {
+        return;
+      }
+
+      var error = data.content.error;
+
+      if (error) {
+        history.push("/cms/content-entries/".concat(contentModel.modelId));
+        showSnackbar(error.message);
+      }
+    }
+  });
+  var getRevisions = useQuery(GET_REVISIONS, {
+    variables: {
+      id: entryId
+    },
+    skip: !entryId
+  });
+  var loading = isLoading || getEntry.loading || getRevisions.loading;
+  var entry = get(getEntry, "data.content.data") || {};
+  var value = {
+    canCreate: canCreate,
+    contentModel: contentModel,
+    createEntry: createEntry,
+    listQueryVariables: listQueryVariables,
+    setListQueryVariables: setListQueryVariables,
+    sorters: sorters,
+    entry: entry,
+    form: formRef,
+    loading: loading,
+    revisions: get(getRevisions, "data.revisions.data") || {},
+    refetchContent: getEntry.refetch,
+    setFormRef: setFormRef,
+    setLoading: setLoading,
+    setTabsRef: setTabsRef,
+    showEmptyView: !newEntry && !loading && isEmpty(entry),
+    tabs: tabsRef
+  };
+  return /*#__PURE__*/React.createElement(Context.Provider, {
+    value: value
+  }, children);
+};
+Provider.displayName = "ContentEntryProvider";

package/admin/views/contentEntries/ContentEntry/RevisionListItem.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { CmsEditorContentEntry } from "../../../../types";
+declare type Props = {
+    revision: CmsEditorContentEntry;
+};
+declare const RevisionListItem: ({ revision }: Props) => JSX.Element;
+export default RevisionListItem;

package/admin/views/contentEntries/ContentEntry/RevisionListItem.js

@@ -0,0 +1,152 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+
+import React from "react";
+import { css } from "emotion";
+import TimeAgo from "timeago-react";
+import { ListItem, ListItemText, ListItemTextPrimary, ListItemTextSecondary, ListItemGraphic, ListItemMeta } from "@webiny/ui/List";
+import { IconButton } from "@webiny/ui/Button";
+import { Icon } from "@webiny/ui/Icon";
+import { MenuItem, Menu, MenuDivider } from "@webiny/ui/Menu";
+import { ConfirmationDialog } from "@webiny/ui/ConfirmationDialog";
+import { Tooltip } from "@webiny/ui/Tooltip";
+import { ReactComponent as MoreVerticalIcon } from "@svgr/webpack!../../../icons/more_vert.svg";
+import { ReactComponent as LockIcon } from "@svgr/webpack!../../../icons/lock.svg";
+import { ReactComponent as BeenHereIcon } from "@svgr/webpack!../../../icons/beenhere.svg";
+import { ReactComponent as GestureIcon } from "@svgr/webpack!../../../icons/gesture.svg";
+import { ReactComponent as AddIcon } from "@svgr/webpack!../../../icons/add.svg";
+import { ReactComponent as EditIcon } from "@svgr/webpack!../../../icons/edit.svg";
+import { ReactComponent as PublishIcon } from "@svgr/webpack!../../../icons/publish.svg";
+import { ReactComponent as UnpublishIcon } from "@svgr/webpack!../../../icons/unpublish.svg";
+import { ReactComponent as DeleteIcon } from "@svgr/webpack!../../../icons/delete.svg";
+import { i18n } from "@webiny/app/i18n";
+import { useRevision } from "./useRevision";
+import usePermission from "../../../hooks/usePermission";
+import { useContentEntry } from "../hooks/useContentEntry";
+var t = i18n.ns("app-headless-cms/admin/plugins/content-details/content-revisions");
+var primaryColor = /*#__PURE__*/css({
+  color: "var(--mdc-theme-primary)"
+}, "label:primaryColor;");
+var revisionsMenu = /*#__PURE__*/css({
+  width: 250,
+  right: -105,
+  left: "auto !important"
+}, "label:revisionsMenu;");
+
+var getIcon = function getIcon(rev) {
+  switch (true) {
+    case rev.meta.locked && rev.meta.status !== "published":
+      return {
+        icon: /*#__PURE__*/React.createElement(Icon, {
+          icon: /*#__PURE__*/React.createElement(LockIcon, null),
+          "data-testid": "cms.revision.status.locked"
+        }),
+        text: "This revision is locked (it has already been published)"
+      };
+
+    case rev.meta.status === "published":
+      return {
+        icon: /*#__PURE__*/React.createElement(Icon, {
+          icon: /*#__PURE__*/React.createElement(BeenHereIcon, null),
+          className: primaryColor,
+          "data-testid": "cms.revision.status.published"
+        }),
+        text: "This revision is currently published!"
+      };
+
+    default:
+      return {
+        icon: /*#__PURE__*/React.createElement(Icon, {
+          icon: /*#__PURE__*/React.createElement(GestureIcon, null),
+          "data-testid": "cms.revision.status.draft"
+        }),
+        text: "This is a draft"
+      };
+  }
+};
+
+var RevisionListItem = function RevisionListItem(_ref) {
+  var revision = _ref.revision;
+
+  var _useRevision = useRevision({
+    revision: revision
+  }),
+      createRevision = _useRevision.createRevision,
+      deleteRevision = _useRevision.deleteRevision,
+      publishRevision = _useRevision.publishRevision,
+      unpublishRevision = _useRevision.unpublishRevision,
+      editRevision = _useRevision.editRevision;
+
+  var _useContentEntry = useContentEntry(),
+      entry = _useContentEntry.entry,
+      tabs = _useContentEntry.tabs;
+
+  var _usePermission = usePermission(),
+      canEdit = _usePermission.canEdit,
+      canDelete = _usePermission.canDelete,
+      canPublish = _usePermission.canPublish,
+      canUnpublish = _usePermission.canUnpublish;
+
+  var _getIcon = getIcon(revision),
+      icon = _getIcon.icon,
+      tooltipText = _getIcon.text;
+
+  return /*#__PURE__*/React.createElement(ConfirmationDialog, {
+    title: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Confirmation required!"]))),
+    message: /*#__PURE__*/React.createElement("span", null, t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["You are about to delete revision {revision}. Are you sure you want to continue?"])))({
+      revision: /*#__PURE__*/React.createElement("strong", null, "#", revision.meta.version)
+    }))
+  }, function (_ref2) {
+    var showConfirmation = _ref2.showConfirmation;
+    return /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(Tooltip, {
+      content: tooltipText,
+      placement: "bottom"
+    }, icon)), /*#__PURE__*/React.createElement(ListItemText, null, /*#__PURE__*/React.createElement(ListItemTextPrimary, null, revision.meta.title || t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["N/A"])))), /*#__PURE__*/React.createElement(ListItemTextSecondary, null, t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["Last modified {time} (#{version})"])))({
+      time: /*#__PURE__*/React.createElement(TimeAgo, {
+        datetime: revision.savedOn
+      }),
+      version: revision.meta.version
+    }))), /*#__PURE__*/React.createElement(ListItemMeta, null, /*#__PURE__*/React.createElement(Menu, {
+      handle: /*#__PURE__*/React.createElement(IconButton, {
+        icon: /*#__PURE__*/React.createElement(MoreVerticalIcon, null)
+      }),
+      className: revisionsMenu,
+      "data-testid": "cms.content-form.revisions.more-options"
+    }, canEdit(entry, "cms.contentEntry") && /*#__PURE__*/React.createElement(MenuItem, {
+      onClick: createRevision,
+      "data-testid": "cms.revision.create-revision"
+    }, /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(AddIcon, null)
+    })), t(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["New from current"])))), !revision.meta.locked && canEdit(entry, "cms.contentEntry") && /*#__PURE__*/React.createElement(MenuItem, {
+      onClick: function onClick() {
+        editRevision();
+
+        if (tabs.current) {
+          tabs.current.switchTab(0);
+        }
+      }
+    }, /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(EditIcon, null)
+    })), t(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([" Edit"])))), revision.meta.status !== "published" && canPublish("cms.contentEntry") && /*#__PURE__*/React.createElement(MenuItem, {
+      onClick: function onClick() {
+        return publishRevision(revision.id);
+      }
+    }, /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(PublishIcon, null)
+    })), t(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["Publish"])))), revision.meta.status === "published" && canUnpublish("cms.contentEntry") && /*#__PURE__*/React.createElement(MenuItem, {
+      onClick: unpublishRevision,
+      "data-testid": "cms.revision.unpublish"
+    }, /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(UnpublishIcon, null)
+    })), t(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["Unpublish"])))), !revision.meta.locked && canDelete(entry, "cms.contentEntry") && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(MenuDivider, null), /*#__PURE__*/React.createElement(MenuItem, {
+      onClick: function onClick() {
+        return showConfirmation(deleteRevision);
+      }
+    }, /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(DeleteIcon, null)
+    })), t(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral([" Delete"]))))))));
+  });
+};
+
+export default RevisionListItem;

package/admin/views/contentEntries/ContentEntry/RevisionsList.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const RevisionsList: () => JSX.Element;
+export default RevisionsList;