@webiny/app-admin 0.0.0-mt-1

package/plugins/fileManager/fileImage/DeleteAction.js

@@ -0,0 +1,62 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+var _templateObject;
+
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React from "react";
+import { Tooltip } from "@webiny/ui/Tooltip";
+import { IconButton } from "@webiny/ui/Button";
+import { useSnackbar } from "../../../hooks/useSnackbar";
+import { useMutation } from "@apollo/react-hooks";
+import { i18n } from "@webiny/app/i18n";
+var t = i18n.ns("app-admin/file-manager/files/delete-action");
+import { ReactComponent as DeleteIcon } from "@svgr/webpack!../../../components/FileManager/icons/delete.svg";
+import { DELETE_FILE } from "../../../components/FileManager/graphql";
+
+var DeleteAction = function DeleteAction(props) {
+  var file = props.file;
+
+  var _useSnackbar = useSnackbar(),
+      showSnackbar = _useSnackbar.showSnackbar;
+
+  var _useMutation = useMutation(DELETE_FILE, {
+    variables: {
+      id: file.id
+    }
+  }),
+      _useMutation2 = _slicedToArray(_useMutation, 1),
+      deleteFile = _useMutation2[0];
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
+    content: /*#__PURE__*/React.createElement("span", null, "Edit image"),
+    placement: "bottom"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    icon: /*#__PURE__*/React.createElement(DeleteIcon, {
+      style: {
+        margin: "0 8px 0 0"
+      }
+    }),
+    onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return deleteFile();
+
+            case 2:
+              showSnackbar(t(_templateObject || (_templateObject = _taggedTemplateLiteral(["File deleted."]))));
+
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }))
+  })));
+};
+
+export default DeleteAction;

package/plugins/fileManager/fileImage/EditAction.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+declare type EditActionProps = {
+    file: any;
+    uploadFile: any;
+    validateFiles: any;
+    canEdit: (file: any) => boolean;
+};
+declare const EditAction: React.FC<EditActionProps>;
+export default EditAction;

package/plugins/fileManager/fileImage/EditAction.js

@@ -0,0 +1,143 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import * as React from "react";
+import { Hotkeys } from "react-hotkeyz";
+import dataURLtoBlob from "dataurl-to-blob";
+import { ImageEditorDialog } from "@webiny/ui/ImageUpload";
+import { Tooltip } from "@webiny/ui/Tooltip";
+import { IconButton } from "@webiny/ui/Button";
+import outputFileSelectionError from "../../../components/FileManager/outputFileSelectionError";
+import { useSnackbar } from "../../../hooks/useSnackbar";
+import { ReactComponent as EditIcon } from "@svgr/webpack!../icons/edit.svg";
+
+function toDataUrl(url) {
+  return new Promise(function (resolve) {
+    var xhr = new window.XMLHttpRequest();
+
+    xhr.onload = function () {
+      var reader = new window.FileReader();
+
+      reader.onloadend = function () {
+        resolve(reader.result);
+      };
+
+      reader.readAsDataURL(xhr.response);
+    };
+
+    xhr.open("GET", url);
+    xhr.responseType = "blob";
+    xhr.send();
+  });
+}
+
+var initialState = {
+  showImageEditor: false,
+  dataUrl: null
+};
+
+var reducer = function reducer(state, action) {
+  var next = _objectSpread({}, state);
+
+  switch (action.type) {
+    case "setDataUrl":
+      next.dataUrl = action.dataUrl;
+      next.showImageEditor = true;
+      break;
+
+    case "hideImageEditor":
+      next.dataUrl = null;
+      next.showImageEditor = false;
+      break;
+  }
+
+  return next;
+}; // TODO: @adrian
+
+
+var EditAction = function EditAction(props) {
+  var file = props.file,
+      uploadFile = props.uploadFile,
+      validateFiles = props.validateFiles,
+      canEdit = props.canEdit;
+
+  var _React$useReducer = React.useReducer(reducer, initialState),
+      _React$useReducer2 = _slicedToArray(_React$useReducer, 2),
+      state = _React$useReducer2[0],
+      dispatch = _React$useReducer2[1];
+
+  var _useSnackbar = useSnackbar(),
+      showSnackbar = _useSnackbar.showSnackbar; // Render nothing if the user don't have required permission for "edit".
+
+
+  if (!canEdit(file)) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
+    content: /*#__PURE__*/React.createElement("span", null, "Edit image"),
+    placement: "bottom"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    "data-testid": "fm-edit-image-button",
+    icon: /*#__PURE__*/React.createElement(EditIcon, {
+      style: {
+        margin: "0 8px 0 0"
+      }
+    }),
+    onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.t0 = dispatch;
+              _context.next = 3;
+              return toDataUrl(file.src);
+
+            case 3:
+              _context.t1 = _context.sent;
+              _context.t2 = {
+                type: "setDataUrl",
+                dataUrl: _context.t1
+              };
+              (0, _context.t0)(_context.t2);
+
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }))
+  })), /*#__PURE__*/React.createElement(Hotkeys, {
+    zIndex: 60,
+    disabled: !state.dataUrl
+  }, /*#__PURE__*/React.createElement(ImageEditorDialog, {
+    "data-testid": "fm-image-editor-dialog",
+    dialogZIndex: 100,
+    open: state.showImageEditor,
+    src: state.dataUrl,
+    onClose: function onClose() {
+      return dispatch({
+        type: "hideImageEditor"
+      });
+    },
+    onAccept: function onAccept(src) {
+      var blob = dataURLtoBlob(src);
+      var errors = validateFiles([blob]);
+
+      if (errors.length) {
+        showSnackbar(outputFileSelectionError(errors));
+      } else {
+        blob.name = file.name;
+        uploadFile(blob);
+      }
+
+      dispatch({
+        type: "hideImageEditor"
+      });
+    }
+  })));
+};
+
+export default EditAction;

package/plugins/fileManager/fileImage/index.d.ts

@@ -0,0 +1,3 @@
+import { FileManagerFileTypePlugin } from "../../FileManagerFileTypePlugin";
+declare const _default: FileManagerFileTypePlugin;
+export default _default;

package/plugins/fileManager/fileImage/index.js

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { css } from "emotion";
+import { Image } from "@webiny/app/components";
+import EditAction from "./EditAction";
+import { FileManagerFileTypePlugin } from "../../FileManagerFileTypePlugin";
+var styles = /*#__PURE__*/css({
+  maxHeight: 200,
+  maxWidth: 200,
+  width: "auto",
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translateX(-50%) translateY(-50%)"
+}, "label:styles;");
+export default new FileManagerFileTypePlugin({
+  types: ["image/*"],
+  actions: [EditAction],
+  render: function render(_ref) {
+    var file = _ref.file;
+    return /*#__PURE__*/React.createElement(Image, {
+      className: styles,
+      src: file.src,
+      alt: file.name,
+      transform: {
+        width: 300
+      }
+    });
+  }
+});

package/plugins/fileManager/icons/edit.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g id="Bounding_Boxes">
+	<g id="ui_x5F_spec_x5F_header_copy_3">
+	</g>
+	<path fill="none" d="M0,0h24v24H0V0z"/>
+</g>
+<g id="Rounded">
+	<g id="ui_x5F_spec_x5F_header_copy_7">
+	</g>
+	<path d="M3,17.46v3.04C3,20.78,3.22,21,3.5,21h3.04c0.13,0,0.26-0.05,0.35-0.15L17.81,9.94l-3.75-3.75L3.15,17.1
+		C3.05,17.2,3,17.32,3,17.46z M20.71,7.04c0.39-0.39,0.39-1.02,0-1.41l-2.34-2.34c-0.39-0.39-1.02-0.39-1.41,0l-1.83,1.83l3.75,3.75
+		L20.71,7.04z"/>
+</g>
+</svg>

package/plugins/fileManager/icons/round-description-24px.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M14.59 2.59c-.38-.38-.89-.59-1.42-.59H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8.83c0-.53-.21-1.04-.59-1.41l-4.82-4.83zM15 18H9c-.55 0-1-.45-1-1s.45-1 1-1h6c.55 0 1 .45 1 1s-.45 1-1 1zm0-4H9c-.55 0-1-.45-1-1s.45-1 1-1h6c.55 0 1 .45 1 1s-.45 1-1 1zm-2-6V3.5L18.5 9H14c-.55 0-1-.45-1-1z"/></svg>

package/plugins/fileManager/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("../FileManagerFileTypePlugin").FileManagerFileTypePlugin[];
+export default _default;

package/plugins/fileManager/index.js

@@ -0,0 +1,3 @@
+import fileDefault from "./fileDefault";
+import fileImage from "./fileImage";
+export default [fileDefault, fileImage];

package/plugins/globalSearch/SearchBar.d.ts

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

package/plugins/globalSearch/SearchBar.js

@@ -0,0 +1,241 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import * as React from "react";
+import { set } from "dot-prop-immutable";
+import { useRouter } from "@webiny/react-router";
+import Downshift from "downshift";
+import { plugins } from "@webiny/plugins";
+import classnames from "classnames";
+import { Hotkeys } from "react-hotkeyz"; // UI components
+
+import { Icon } from "@webiny/ui/Icon";
+import { Elevation } from "@webiny/ui/Elevation";
+import SearchBarDropdown from "./SearchBarDropdown"; // Icons
+
+import { ReactComponent as SearchIcon } from "@svgr/webpack!./icons/round-search-24px.svg"; // Local components
+
+import { SearchBarWrapper, SearchBarInputWrapper, SearchShortcut, searchBarInput, icon, searchWrapper } from "./styled";
+
+var SearchBar = /*#__PURE__*/function (_React$Component) {
+  _inherits(SearchBar, _React$Component);
+
+  var _super = _createSuper(SearchBar);
+
+  /**
+   * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.
+   */
+
+  /**
+   * At some point we must programmatically focus the input.
+   */
+
+  /**
+   * Let's check if current route is defined in one of the registered plugins.
+   * If so, then check current route query for search term and set it as default value of search input.
+   * @param props
+   */
+  function SearchBar(props) {
+    var _this;
+
+    _classCallCheck(this, SearchBar);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      active: false,
+      searchTerm: {
+        previous: "",
+        current: ""
+      },
+      plugins: {
+        // List of all registered "admin-global-search" plugins.
+        get list() {
+          return plugins.byType("admin-global-search");
+        },
+
+        hotKeys: plugins.byType("admin-global-search-prevent-hotkey"),
+        // Current plugin - set by examining current route and its query params (on construct).
+        current: undefined
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "downshift", /*#__PURE__*/React.createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "input", /*#__PURE__*/React.createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "handleOpenHotkey", function (e) {
+      for (var i = 0; i < _this.state.plugins.hotKeys.length; i++) {
+        var hotKey = _this.state.plugins.hotKeys[i];
+
+        if (hotKey.preventOpen(e)) {
+          return;
+        }
+      }
+
+      e.preventDefault();
+
+      _this.input.current.focus();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "submitSearchTerm", function (plugin) {
+      _this.setState(function (state) {
+        var newState = set(state, "searchTerm.previous", state.searchTerm.current);
+        return set(newState, "plugins.current", plugin);
+      }, function () {
+        var query = new URLSearchParams();
+
+        if (_this.state.searchTerm.current) {
+          // If "search" key in the plugin was defined, it means SearchInput values were set. Otherwise,
+          // we need to send the plain string into the "search" query param. This behavior was needed
+          // eg. for pages, since Page entity doesn't use regular SearchInput type, but plain string.
+          if (plugin.search) {
+            query.set("search", JSON.stringify(_objectSpread({
+              query: _this.state.searchTerm.current
+            }, plugin.search)));
+          } else {
+            query.set("search", _this.state.searchTerm.current);
+          }
+        }
+
+        _this.props.history.push({
+          pathname: plugin.route,
+          search: query.toString()
+        });
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "cancelSearchTerm", function () {
+      _this.setState(function (state) {
+        state.searchTerm.current = state.searchTerm.previous;
+        return state;
+      });
+    });
+
+    _this.state.plugins.current = _this.state.plugins.list.find(function (p) {
+      return p.route === props.location.pathname;
+    });
+
+    if (_this.state.plugins.current) {
+      var search;
+      var query = new URLSearchParams(props.location.search);
+
+      try {
+        search = JSON.parse(query.get("search") || "").query;
+      } catch (e) {
+        search = query.get("search");
+      }
+
+      _this.state.searchTerm.current = search || "";
+      _this.state.searchTerm.previous = _this.state.searchTerm.current;
+    }
+
+    return _this;
+  }
+
+  _createClass(SearchBar, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      return /*#__PURE__*/React.createElement(Downshift, {
+        ref: this.downshift,
+        itemToString: function itemToString(item) {
+          return item && item.label;
+        }
+      }, function (downshiftProps) {
+        var isOpen = downshiftProps.isOpen,
+            openMenu = downshiftProps.openMenu,
+            closeMenu = downshiftProps.closeMenu,
+            getInputProps = downshiftProps.getInputProps;
+        return /*#__PURE__*/React.createElement("div", {
+          style: {
+            width: "100%"
+          }
+        }, /*#__PURE__*/React.createElement(Hotkeys, {
+          zIndex: 10,
+          keys: {
+            // @ts-ignore
+            esc: function esc() {
+              return document.activeElement.blur();
+            },
+            "/": _this2.handleOpenHotkey
+          }
+        }), /*#__PURE__*/React.createElement(Hotkeys, {
+          zIndex: 11,
+          disabled: !isOpen,
+          keys: {
+            esc: function esc() {
+              _this2.cancelSearchTerm();
+
+              closeMenu();
+            },
+            enter: function enter() {
+              return setTimeout(function () {
+                var selectedItem = _this2.downshift.current.state.selectedItem;
+
+                if (selectedItem) {
+                  closeMenu();
+
+                  _this2.submitSearchTerm(selectedItem);
+                }
+              });
+            }
+          }
+        }), /*#__PURE__*/React.createElement(Elevation, {
+          className: classnames(searchWrapper, {
+            active: _this2.state.active
+          }),
+          z: 0
+        }, /*#__PURE__*/React.createElement(SearchBarWrapper, null, /*#__PURE__*/React.createElement(SearchBarInputWrapper, null, /*#__PURE__*/React.createElement(Icon, {
+          className: icon,
+          icon: /*#__PURE__*/React.createElement(SearchIcon, null)
+        }), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", getInputProps({
+          placeholder: "Search...",
+          className: classnames("mdc-text-field__input", searchBarInput),
+          ref: _this2.input,
+          value: _this2.state.searchTerm.current,
+          // @ts-ignore
+          onClick: openMenu,
+          onBlur: function onBlur() {
+            _this2.cancelSearchTerm();
+
+            _this2.setState({
+              active: false
+            });
+          },
+          onFocus: function onFocus() {
+            _this2.setState({
+              active: true
+            });
+
+            openMenu();
+          },
+          onChange: function onChange(e) {
+            var value = e.target.value || "";
+
+            _this2.setState(function (state) {
+              state.searchTerm.current = value;
+              return state;
+            });
+          }
+        }))), /*#__PURE__*/React.createElement(SearchShortcut, null, "/"))), isOpen && /*#__PURE__*/React.createElement(SearchBarDropdown, {
+          context: _this2
+        })));
+      });
+    }
+  }]);
+
+  return SearchBar;
+}(React.Component);
+
+var SearchBarContainer = function SearchBarContainer() {
+  var routerProps = useRouter();
+  return /*#__PURE__*/React.createElement(SearchBar, routerProps);
+};
+
+export default SearchBarContainer;

package/plugins/globalSearch/SearchBarDropdown.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+export default class SearchBarDropdown extends React.Component<any> {
+    componentDidMount(): void;
+    render(): JSX.Element;
+}

package/plugins/globalSearch/SearchBarDropdown.js

@@ -0,0 +1,82 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import * as React from "react";
+import classnames from "classnames";
+import { List, ListItem, ListItemGraphic, ListItemText, ListItemMeta } from "@webiny/ui/List";
+import { searchBarDropdown, iconSearchType } from "./styled";
+import { Elevation } from "@webiny/ui/Elevation";
+import { Icon } from "@webiny/ui/Icon";
+import { ReactComponent as SearchIcon } from "@svgr/webpack!./icons/round-search-24px.svg";
+
+var SearchBarDropdown = /*#__PURE__*/function (_React$Component) {
+  _inherits(SearchBarDropdown, _React$Component);
+
+  var _super = _createSuper(SearchBarDropdown);
+
+  function SearchBarDropdown() {
+    _classCallCheck(this, SearchBarDropdown);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(SearchBarDropdown, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this$props$context = this.props.context,
+          downshift = _this$props$context.downshift.current,
+          plugins = _this$props$context.state.plugins;
+      downshift.selectItem(plugins.current);
+      downshift.setHighlightedIndex(plugins.list.indexOf(plugins.current));
+      downshift.openMenu();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props$context2 = this.props.context,
+          downshift = _this$props$context2.downshift.current,
+          submitSearchTerm = _this$props$context2.submitSearchTerm,
+          _this$props$context2$ = _this$props$context2.state,
+          plugins = _this$props$context2$.plugins,
+          searchTerm = _this$props$context2$.searchTerm;
+      var getMenuProps = downshift.getMenuProps,
+          getItemProps = downshift.getItemProps,
+          _downshift$state = downshift.state,
+          selectedItem = _downshift$state.selectedItem,
+          highlightedIndex = _downshift$state.highlightedIndex;
+      return /*#__PURE__*/React.createElement(Elevation, {
+        z: 2,
+        className: searchBarDropdown
+      }, /*#__PURE__*/React.createElement(List, getMenuProps(), plugins.list.map(function (item, index) {
+        // Base classes.
+        var itemClassNames = {
+          highlighted: highlightedIndex === index,
+          selected: false
+        }; // Add "selected" class if the item is selected.
+
+        if (selectedItem && selectedItem === item) {
+          itemClassNames.selected = true;
+        }
+
+        return /*#__PURE__*/React.createElement(ListItem, Object.assign({
+          key: item.route
+        }, getItemProps({
+          index: index,
+          item: item,
+          className: classnames(itemClassNames),
+          onClick: function onClick() {
+            return submitSearchTerm(item);
+          }
+        })), /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(Icon, {
+          className: iconSearchType,
+          icon: /*#__PURE__*/React.createElement(SearchIcon, null)
+        })), /*#__PURE__*/React.createElement(ListItemText, null, searchTerm.current || "Search for all..."), /*#__PURE__*/React.createElement(ListItemMeta, null, "in ", item.label));
+      })));
+    }
+  }]);
+
+  return SearchBarDropdown;
+}(React.Component);
+
+export { SearchBarDropdown as default };

package/plugins/globalSearch/icons/round-search-24px.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g id="Header_x2F_BG" display="none">
+	<rect x="-358" y="-314" display="inline" fill="#F1F1F2" width="520" height="520"/>
+</g>
+<g id="Bounding_Boxes">
+	<g id="ui_x5F_spec_x5F_header_copy_3" display="none">
+	</g>
+	<path fill="none" d="M0,0h24v24H0V0z"/>
+</g>
+<g id="Rounded">
+	<g id="ui_x5F_spec_x5F_header_copy_5" display="none">
+	</g>
+	<path fill="currentColor" d="M15.5,14h-0.79l-0.28-0.27c1.2-1.4,1.82-3.31,1.48-5.34c-0.47-2.78-2.79-5-5.59-5.34c-4.23-0.52-7.79,3.04-7.27,7.27
+		c0.34,2.8,2.56,5.12,5.34,5.59c2.03,0.34,3.94-0.28,5.34-1.48L14,14.71v0.79l4.25,4.25c0.41,0.41,1.08,0.41,1.49,0l0,0
+		c0.41-0.41,0.41-1.08,0-1.49L15.5,14z M9.5,14C7.01,14,5,11.99,5,9.5S7.01,5,9.5,5S14,7.01,14,9.5S11.99,14,9.5,14z"/>
+</g>
+</svg>

package/plugins/globalSearch/index.d.ts

@@ -0,0 +1,8 @@
+import { UIViewPlugin } from "../../ui/UIView";
+import { AdminView } from "../../ui/views/AdminView";
+export declare const globalSearch: UIViewPlugin<AdminView>;
+export declare const globalSearchHotkey: {
+    type: string;
+    name: string;
+    preventOpen(e: any): boolean;
+};

package/plugins/globalSearch/index.js

@@ -0,0 +1,30 @@
+import * as React from "react";
+import SearchBar from "./SearchBar";
+import { GenericElement } from "../../ui/elements/GenericElement";
+import { UIViewPlugin } from "../../ui/UIView";
+import { AdminView } from "../../ui/views/AdminView"; // !EXAMPLE!
+// This demonstrates how you can create view-specific plugin classes.
+//
+// class AdminViewPlugin extends ViewPlugin<AdminView> {
+//     constructor(apply: ApplyFunction<AdminView>) {
+//         super(AdminView, apply);
+//     }
+// }
+
+export var globalSearch = new UIViewPlugin(AdminView, function (view) {
+  view.getHeaderElement().getCenterSection().addElement(new GenericElement("searchBar", function () {
+    return /*#__PURE__*/React.createElement(SearchBar, null);
+  }));
+});
+export var globalSearchHotkey = {
+  type: "admin-global-search-prevent-hotkey",
+  name: "admin-global-search-prevent-hotkey-input",
+  preventOpen: function preventOpen(e) {
+    // Define a list of all node types we want to prevent the event from.
+    var ignoreNodes = ["INPUT", "TEXTAREA"];
+
+    if (ignoreNodes.includes(e.target.nodeName)) {
+      return true;
+    }
+  }
+};