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

package/admin/plugins/icons.js

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { fab } from "@fortawesome/free-brands-svg-icons";
+import { fas } from "@fortawesome/free-solid-svg-icons";
+import { far } from "@fortawesome/free-regular-svg-icons";
+
+var createSvg = function createSvg(icon) {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: 24,
+    viewBox: "0 0 ".concat(icon[0], " ").concat(icon[1])
+  }, /*#__PURE__*/React.createElement("path", {
+    d: icon[4],
+    fill: "currentColor"
+  }));
+};
+
+var icons = [];
+var plugin = {
+  name: "cms-icons-fontawesome",
+  type: "cms-icons",
+  init: function init() {
+    library.add(fab, fas, far); // @ts-ignore
+
+    var definitions = library.definitions;
+    Object.keys(definitions).forEach(function (pack) {
+      var defs = definitions[pack];
+      Object.keys(defs).forEach(function (icon) {
+        icons.push({
+          id: [pack, icon],
+          name: icon,
+          svg: createSvg(defs[icon])
+        });
+      });
+    });
+  },
+  getIcons: function getIcons() {
+    return icons;
+  }
+};
+export default plugin;

package/admin/plugins/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+declare const _default: () => (import("../../types").CmsEditorFormSettingsPlugin | import("../../types").CmsIconsPlugin | import("../../types").CmsFieldValueTransformer[] | import("@webiny/app/types").CacheGetObjectIdPlugin | import("@webiny/app/types").RoutePlugin[] | import("@webiny/app-admin/types").AdminInstallationPlugin | import("@webiny/app-admin/types").AdminAppPermissionRendererPlugin | import("@webiny/ui-composer/UIView").UIViewPlugin<import("@webiny/app-admin/ui/views/NavigationView").NavigationView>[] | import("@webiny/plugins/types").Plugin<{
+    type: "graphql-playground-tab";
+    tab(params: {
+        locale: string;
+        identity: import("@webiny/app-security/types").SecurityIdentity;
+    }): import("@webiny/app-graphql-playground/types").GraphQLPlaygroundTab;
+}>[] | import("../../types").CmsContentDetailsPlugin[] | {
+    name: string;
+    type: string;
+    render(): JSX.Element;
+}[])[];
+export default _default;

package/admin/plugins/index.js

@@ -0,0 +1,14 @@
+import routes from "./routes";
+import menus from "./menus";
+import icons from "./icons";
+import install from "./install";
+import contentFormTransformers from "./transformers";
+import defaultBar from "./editor/defaultBar";
+import formSettings from "./editor/formSettings";
+import apiInformation from "./apiInformation";
+import permissionRenderer from "./permissionRenderer";
+import getObjectId from "./getObjectId";
+import contentEntryHeader from "../views/contentEntries/ContentEntry/header";
+export default (function () {
+  return [install, routes, menus, icons, contentFormTransformers(), defaultBar, formSettings, permissionRenderer, apiInformation, getObjectId, contentEntryHeader];
+});

package/admin/plugins/install.d.ts

@@ -0,0 +1,3 @@
+import { AdminInstallationPlugin } from "@webiny/app-admin/types";
+declare const plugin: AdminInstallationPlugin;
+export default plugin;

package/admin/plugins/install.js

@@ -0,0 +1,127 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useState, useEffect, lazy } from "react";
+import gql from "graphql-tag";
+import { useApolloClient } from "@apollo/react-hooks";
+import { i18n } from "@webiny/app/i18n";
+import { Alert } from "@webiny/ui/Alert";
+import { CircularProgress } from "@webiny/ui/Progress";
+import { SimpleForm, SimpleFormContent } from "@webiny/app-admin/components/SimpleForm";
+import styled from "@emotion/styled";
+var SimpleFormPlaceholder = /*#__PURE__*/styled("div", {
+  target: "e1pjb6uy0",
+  label: "SimpleFormPlaceholder"
+})({
+  minHeight: 300,
+  minWidth: 400
+});
+var t = i18n.ns("app-headless-cms/admin/installation");
+var IS_INSTALLED = gql(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    query IsCMSInstalled {\n        cms {\n            version\n        }\n    }\n"])));
+var INSTALL = gql(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    mutation InstallCms {\n        cms {\n            install {\n                data\n                error {\n                    code\n                    message\n                    data\n                }\n            }\n        }\n    }\n"])));
+
+var CMSInstaller = function CMSInstaller(_ref) {
+  var onInstalled = _ref.onInstalled;
+  var client = useApolloClient();
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      error = _useState2[0],
+      setError = _useState2[1];
+
+  useEffect(function () {
+    // Temporary fix for the ES index creation failure.
+    // Let's try waiting a bit before running the installation.
+    setTimeout(function () {
+      client.mutate({
+        mutation: INSTALL
+      }).then(function (_ref2) {
+        var data = _ref2.data;
+        var error = data.cms.install.error;
+
+        if (error) {
+          setError(error.message);
+          return;
+        } // Just so the user sees the actual message.
+
+
+        setTimeout(onInstalled, 3000);
+      });
+    }, 10000);
+  }, []);
+  var label = error ? /*#__PURE__*/React.createElement(Alert, {
+    title: t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["Something went wrong"]))),
+    type: "danger"
+  }, error) : t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["Installing Headless CMS..."])));
+  return /*#__PURE__*/React.createElement(SimpleForm, null, /*#__PURE__*/React.createElement(CircularProgress, {
+    label: label
+  }), /*#__PURE__*/React.createElement(SimpleFormContent, null, /*#__PURE__*/React.createElement(SimpleFormPlaceholder, null)));
+};
+
+var plugin = {
+  name: "admin-installation-cms",
+  type: "admin-installation",
+  title: t(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["Headless CMS"]))),
+  dependencies: ["admin-installation-security", "admin-installation-i18n"],
+  secure: true,
+  getInstalledVersion: function getInstalledVersion(_ref3) {
+    return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var client, _yield$client$query, data;
+
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              client = _ref3.client;
+              _context.next = 3;
+              return client.query({
+                query: IS_INSTALLED
+              });
+
+            case 3:
+              _yield$client$query = _context.sent;
+              data = _yield$client$query.data;
+              return _context.abrupt("return", data.cms.version);
+
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }))();
+  },
+  render: function render(_ref4) {
+    var onInstalled = _ref4.onInstalled;
+    return /*#__PURE__*/React.createElement(CMSInstaller, {
+      onInstalled: onInstalled
+    });
+  },
+  upgrades: [{
+    version: "5.0.0",
+    getComponent: function getComponent() {
+      return /*#__PURE__*/lazy(function () {
+        return import("./upgrades/v5.0.0");
+      });
+    }
+  }, {
+    version: "5.5.0",
+    getComponent: function getComponent() {
+      return /*#__PURE__*/lazy(function () {
+        return import("./upgrades/v5.5.0");
+      });
+    }
+  }, {
+    version: "5.8.0",
+    getComponent: function getComponent() {
+      return /*#__PURE__*/lazy(function () {
+        return import("./upgrades/v5.8.0");
+      });
+    }
+  }]
+};
+export default plugin;

package/admin/plugins/menus/CmsMenuLoader.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { NavigationView } from "@webiny/app-admin/ui/views/NavigationView";
+interface Props {
+    view: NavigationView;
+}
+export declare const CmsMenuLoader: React.MemoExoticComponent<({ view }: Props) => JSX.Element>;
+export {};

package/admin/plugins/menus/CmsMenuLoader.js

@@ -0,0 +1,76 @@
+import React, { useEffect } from "react";
+import { NavigationMenuElement } from "@webiny/app-admin/ui/elements/NavigationMenuElement";
+import { ReactComponent as HeadlessCmsIcon } from "@svgr/webpack!../../icons/devices_other-black-24px.svg";
+import GlobalSearchPlugins from "./GlobalSearchPlugins";
+import usePermission from "../../hooks/usePermission";
+import { ContentGroupsMenuItems } from "./ContentGroupsMenuItems";
+import { ContentGroupMenuElement } from "../../elements/ContentGroupMenuElement";
+export var CmsMenuLoader = /*#__PURE__*/React.memo(function (_ref) {
+  var view = _ref.view;
+
+  var _usePermission = usePermission(),
+      canAccessManageEndpoint = _usePermission.canAccessManageEndpoint,
+      canReadContentModels = _usePermission.canReadContentModels,
+      canReadContentModelGroups = _usePermission.canReadContentModelGroups,
+      canCreateContentModels = _usePermission.canCreateContentModels,
+      canCreateContentModelGroups = _usePermission.canCreateContentModelGroups;
+
+  var hasAccess = canAccessManageEndpoint && (canReadContentModels || canReadContentModelGroups);
+  useEffect(function () {
+    if (!hasAccess) {
+      return;
+    }
+    /**
+     * Create the main "Headless CMS" menu group.
+     */
+
+
+    var mainMenu = view.addAppMenuElement(new NavigationMenuElement("headlessCms.mainMenu", {
+      label: "Headless CMS",
+      icon: /*#__PURE__*/React.createElement(HeadlessCmsIcon, null)
+    }));
+    mainMenu.addSorter(function (a, b) {
+      if (a instanceof ContentGroupMenuElement && b instanceof NavigationMenuElement) {
+        return 1;
+      }
+
+      if (a instanceof NavigationMenuElement && b instanceof ContentGroupMenuElement) {
+        return -1;
+      }
+
+      return 0;
+    });
+    /**
+     * Add "Content Models" section if the user can create either models or groups.
+     */
+
+    if (canCreateContentModels || canCreateContentModelGroups) {
+      var contentModelsMenu = mainMenu.addElement(new NavigationMenuElement("headlessCms.contentModels", {
+        label: "Content Models"
+      }));
+
+      if (canCreateContentModels) {
+        contentModelsMenu.addElement(new NavigationMenuElement("headlessCms.contentModels.models", {
+          label: "Models",
+          path: "/cms/content-models"
+        }));
+      }
+
+      if (canCreateContentModelGroups) {
+        contentModelsMenu.addElement(new NavigationMenuElement("headlessCms.contentModels.groups", {
+          label: "Groups",
+          path: "/cms/content-model-groups"
+        }));
+      }
+    }
+  }, []);
+
+  if (!hasAccess) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GlobalSearchPlugins, null), /*#__PURE__*/React.createElement(ContentGroupsMenuItems, {
+    view: view
+  }));
+});
+CmsMenuLoader.displayName = "CmsMenuLoader";

package/admin/plugins/menus/ContentGroupsMenuItems.d.ts

@@ -0,0 +1,6 @@
+import { NavigationView } from "@webiny/app-admin/ui/views/NavigationView";
+interface Props {
+    view: NavigationView;
+}
+export declare const ContentGroupsMenuItems: ({ view }: Props) => any;
+export {};

package/admin/plugins/menus/ContentGroupsMenuItems.js

@@ -0,0 +1,154 @@
+import _createForOfIteratorHelper from "@babel/runtime/helpers/createForOfIteratorHelper";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useEffect } from "react";
+import get from "lodash/get";
+import pluralize from "pluralize";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { LIST_MENU_CONTENT_GROUPS_MODELS } from "../../viewsGraphql";
+import useQuery from "../../hooks/useQuery";
+import usePermission from "../../hooks/usePermission";
+import { ContentGroupMenuElement } from "../../elements/ContentGroupMenuElement";
+import { NothingToShowElement } from "../../elements/NothingToShowElement";
+import { ContentModelMenuElement } from "../../elements/ContentModelMenuElement";
+export var ContentGroupsMenuItems = function ContentGroupsMenuItems(_ref) {
+  var view = _ref.view;
+  var response = useQuery(LIST_MENU_CONTENT_GROUPS_MODELS);
+
+  var _ref2 = get(response, "data.listContentModelGroups") || {},
+      groups = _ref2.data;
+
+  var _usePermission = usePermission(),
+      canReadEntries = _usePermission.canReadEntries;
+
+  function createMenuItems() {
+    return _createMenuItems.apply(this, arguments);
+  }
+
+  function _createMenuItems() {
+    _createMenuItems = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var mainMenu, _iterator, _step, _loop, _ret;
+
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return view.awaitElement("headlessCms.mainMenu");
+
+            case 2:
+              mainMenu = _context.sent;
+
+              if (mainMenu) {
+                _context.next = 5;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 5:
+              _iterator = _createForOfIteratorHelper(groups);
+              _context.prev = 6;
+
+              _loop = function _loop() {
+                var group = _step.value;
+                // Check if user has "contentEntry" permission for any content model for a content model group
+                var hasContentEntryPermission = group.contentModels.some(function (contentModel) {
+                  return canReadEntries({
+                    contentModelGroup: group,
+                    contentModel: contentModel
+                  });
+                });
+
+                if (group.contentModels.length > 0 && !hasContentEntryPermission) {
+                  return "continue";
+                }
+
+                var groupMenuItem = mainMenu.addElement(new ContentGroupMenuElement("cms-content-models-".concat(group.id), {
+                  label: group.name,
+                  icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+                    style: {
+                      color: "var(--mdc-theme-text-secondary-on-background)"
+                    },
+                    icon: group.icon.split("/")
+                  })
+                }));
+                groupMenuItem.addElement(new NothingToShowElement("cms-content-models-".concat(group.id, "-empty"), {
+                  label: "Nothing to show.",
+                  shouldRender: function shouldRender() {
+                    return group.contentModels.length === 0;
+                  }
+                }));
+                group.contentModels.forEach(function (contentModel) {
+                  if (canReadEntries({
+                    contentModelGroup: group,
+                    contentModel: contentModel
+                  })) {
+                    groupMenuItem.addElement(new ContentModelMenuElement(contentModel.modelId, {
+                      label: pluralize(contentModel.name),
+                      path: "/cms/content-entries/".concat(contentModel.modelId)
+                    }));
+                  }
+                });
+              };
+
+              _iterator.s();
+
+            case 9:
+              if ((_step = _iterator.n()).done) {
+                _context.next = 15;
+                break;
+              }
+
+              _ret = _loop();
+
+              if (!(_ret === "continue")) {
+                _context.next = 13;
+                break;
+              }
+
+              return _context.abrupt("continue", 13);
+
+            case 13:
+              _context.next = 9;
+              break;
+
+            case 15:
+              _context.next = 20;
+              break;
+
+            case 17:
+              _context.prev = 17;
+              _context.t0 = _context["catch"](6);
+
+              _iterator.e(_context.t0);
+
+            case 20:
+              _context.prev = 20;
+
+              _iterator.f();
+
+              return _context.finish(20);
+
+            case 23:
+              view.refresh();
+
+            case 24:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[6, 17, 20, 23]]);
+    }));
+    return _createMenuItems.apply(this, arguments);
+  }
+
+  useEffect(function () {
+    if (!groups) {
+      return;
+    }
+
+    createMenuItems();
+  }, [groups]);
+  return null;
+};

package/admin/plugins/menus/GlobalSearchPlugins.d.ts

@@ -0,0 +1,8 @@
+/**
+ * DISCLAIMER!
+ * This file is OLD and needs refactoring into something that makes more sense in the context of the new UI Composer.
+ * Even if we keep a dedicated `AdminGlobalSearchPlugin`, it needs to be converted to a proper class.
+ * This can be a "good first issue" for community to solve.
+ */
+declare const GlobalSearchPlugins: () => any;
+export default GlobalSearchPlugins;

package/admin/plugins/menus/GlobalSearchPlugins.js

@@ -0,0 +1,53 @@
+import { useEffect } from "react";
+import get from "lodash/get";
+import { useI18N } from "@webiny/app-i18n/hooks/useI18N";
+import { plugins } from "@webiny/plugins";
+import { useQuery } from "../../hooks";
+import { LIST_MENU_CONTENT_GROUPS_MODELS } from "../../viewsGraphql";
+/**
+ * DISCLAIMER!
+ * This file is OLD and needs refactoring into something that makes more sense in the context of the new UI Composer.
+ * Even if we keep a dedicated `AdminGlobalSearchPlugin`, it needs to be converted to a proper class.
+ * This can be a "good first issue" for community to solve.
+ */
+
+var GlobalSearchPlugins = function GlobalSearchPlugins() {
+  var _useI18N = useI18N(),
+      getCurrentLocale = _useI18N.getCurrentLocale;
+
+  var response = useQuery(LIST_MENU_CONTENT_GROUPS_MODELS);
+  var locale = getCurrentLocale("content");
+  var contentModelGroups = get(response, "data.listContentModelGroups.data", []) || [];
+  var cmgHash = contentModelGroups.reduce(function (returnValue, currentValue) {
+    return returnValue + currentValue.contentModels.reduce(function (returnValue, currentValue) {
+      return returnValue + currentValue.modelId;
+    }, "");
+  }, ""); // Generate "admin-global-search" plugins - enables the user to search content via the global search bar.
+
+  useEffect(function () {
+    // 1. Unregister all previously registered plugins.
+    plugins.byType("admin-global-search").filter(function (item) {
+      return item.name.startsWith("admin-global-search-headless-cms");
+    }).forEach(function (item) {
+      return plugins.unregister(item.name);
+    }); // 2. Register a new set of plugins via the latest list of content models.
+
+    contentModelGroups.forEach(function (group) {
+      group.contentModels.forEach(function (contentModel) {
+        var pluginName = "admin-global-search-headless-cms-" + contentModel.modelId;
+
+        if (!plugins.byName(pluginName)) {
+          plugins.register({
+            type: "admin-global-search",
+            name: "admin-global-search-headless-cms-" + contentModel.modelId,
+            route: "/cms/content-entries/" + contentModel.modelId,
+            label: contentModel.name
+          });
+        }
+      });
+    });
+  }, [locale, cmgHash]);
+  return null;
+};
+
+export default GlobalSearchPlugins;

package/admin/plugins/menus.d.ts

@@ -0,0 +1,4 @@
+import { UIViewPlugin } from "@webiny/app-admin/ui/UIView";
+import { NavigationView } from "@webiny/app-admin/ui/views/NavigationView";
+declare const _default: UIViewPlugin<NavigationView>[];
+export default _default;

package/admin/plugins/menus.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { GenericElement } from "@webiny/app-admin/ui/elements/GenericElement";
+import { CmsMenuLoader } from "./menus/CmsMenuLoader";
+import { UIViewPlugin } from "@webiny/app-admin/ui/UIView";
+import { NavigationView } from "@webiny/app-admin/ui/views/NavigationView"; // import { NavigationMenuElement } from "@webiny/app-admin/elements/NavigationMenuElement";
+// import { ReactComponent as BeenHere } from "~/admin/icons/beenhere.svg";
+
+export default [new UIViewPlugin(NavigationView, function (view) {
+  view.addElement(new GenericElement("headlessCms.menuLoader", function () {
+    return /*#__PURE__*/React.createElement(CmsMenuLoader, {
+      view: view
+    });
+  })); // !EXAMPLE!
+  // This shows how you can move dynamically generated CMS menu items around and place them anywhere in the menu.
+  // view.awaitElement<NavigationMenuElement>("advancedTopic").then(element => {
+  //     element.setIcon(<BeenHere />);
+  //     element.moveBefore(view.getElement("headlessCms.mainMenu"));
+  // });
+})];

package/admin/plugins/permissionRenderer/CmsPermissions.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const CMSPermissions: ({ value, onChange }: {
+    value: any;
+    onChange: any;
+}) => JSX.Element;