Fix #10781 Review pluginsConfig after introduction of new homepage pl…

…ugins (#10800)

build/docma-config.json

@@ -274,6 +274,8 @@
                 "web/client/plugins/QueryPanel.jsx",
                 "web/client/plugins/Redirect.jsx",
                 "web/client/plugins/History.jsx",
+                "web/client/plugins/ResourcesCatalog/BrandNavbar.jsx",
+                "web/client/plugins/ResourcesCatalog/ResourceDetails.jsx",
                 "web/client/plugins/RulesEditor.jsx",
                 "web/client/plugins/RulesDataGrid.jsx",
                 "web/client/plugins/RulesManagerFooter.jsx",

project/standard/templates/configs/pluginsConfig.json

@@ -58,7 +58,8 @@
         "FeatureEditor",
         "FilterLayer",
         "AddGroup",
-        "Swipe"
+        "Swipe",
+        "MetadataInfo"
       ],
       "autoEnableChildren": [
         "TOCItemsSettings",
@@ -177,7 +178,7 @@
       "title": "plugins.Annotations.title",
       "description": "plugins.Annotations.description",
       "dependencies": [
-        "SidebarMenu"
+        "TOC"
       ]
     },
     {
@@ -396,6 +397,9 @@
     {
       "name": "Swipe"
     },
+    {
+      "name": "MetadataInfo"
+    },
     {
       "name": "SearchByBookmark"
     },
@@ -635,6 +639,52 @@
     {
       "name": "SidebarMenu",
       "hidden": true
+    },
+    {
+      "name": "MapViews",
+      "glyph": "map-view",
+      "title": "plugins.MapViews.title",
+      "description": "plugins.MapViews.description",
+      "dependencies": [
+        "SidebarMenu"
+      ]
+    },
+    {
+      "name": "LongitudinalProfileTool",
+      "glyph": "1-line",
+      "title": "plugins.LongitudinalProfileTool.title",
+      "description": "plugins.LongitudinalProfileTool.description",
+      "dependencies": [
+        "SidebarMenu"
+      ]
+    },
+    {
+      "name": "GeoProcessing",
+      "glyph": "globe-settings",
+      "title": "plugins.GeoProcessing.title",
+      "description": "plugins.GeoProcessing.description",
+      "dependencies": [
+        "SidebarMenu"
+      ]
+    },
+    {
+      "name": "BrandNavbar",
+      "title": "plugins.BrandNavbar.title",
+      "description": "plugins.BrandNavbar.description",
+      "defaultConfig": {
+        "containerPosition": "header"
+      }
+    },
+    {
+      "name": "ResourceDetails",
+      "title": "plugins.ResourceDetails.title",
+      "description": "plugins.ResourceDetails.description",
+      "defaultConfig": {
+        "resourceType": "MAP"
+      },
+      "dependencies": [
+        "BrandNavbar"
+      ]
     }
   ]
 }

web/client/configs/pluginsConfig.json

@@ -665,6 +665,25 @@
       "dependencies": [
         "SidebarMenu"
       ]
+    },
+    {
+      "name": "BrandNavbar",
+      "title": "plugins.BrandNavbar.title",
+      "description": "plugins.BrandNavbar.description",
+      "defaultConfig": {
+        "containerPosition": "header"
+      }
+    },
+    {
+      "name": "ResourceDetails",
+      "title": "plugins.ResourceDetails.title",
+      "description": "plugins.ResourceDetails.description",
+      "defaultConfig": {
+        "resourceType": "MAP"
+      },
+      "dependencies": [
+        "BrandNavbar"
+      ]
     }
   ]
 }

web/client/plugins/ResourcesCatalog/BrandNavbar.jsx

@@ -15,13 +15,14 @@ import Button from './components/Button';
 import tooltip from '../../components/misc/enhancers/tooltip';
 import Spinner from './components/Spinner';
 import Icon from './components/Icon';
+import PropTypes from 'prop-types';
 const ButtonWithTooltip = tooltip(Button);
 
 function BrandNavbarMenuItem({
     className,
     loading,
     glyph,
-    glyphType = 'glyphicon',
+    iconType,
     labelId,
     onClick
 }) {
@@ -35,17 +36,118 @@ function BrandNavbarMenuItem({
                 onClick={onClick}
                 className={className}
             >
-                {loading ? <Spinner /> : <Icon glyph={glyph} type={glyphType} />}
+                {loading ? <Spinner /> : <Icon glyph={glyph} type={iconType} />}
             </ButtonWithTooltip>
         </li>
     );
 }
 
+BrandNavbarMenuItem.propTypes = {
+    className: PropTypes.string,
+    loading: PropTypes.bool,
+    glyph: PropTypes.string,
+    iconType: PropTypes.string,
+    labelId: PropTypes.string,
+    onClick: PropTypes.func
+};
+
+BrandNavbarMenuItem.defaultProps = {
+    iconType: 'glyphicon',
+    onClick: () => {}
+};
+
+/**
+ * This plugin provides a special Manager dropdown menu, that contains various administration tools
+ * @memberof plugins
+ * @class
+ * @name BrandNavbar
+ * @prop {object[]} cfg.leftMenuItems menu items configuration for left side
+ * @prop {object[]} cfg.rightMenuItems menu items configuration for right side
+ * @prop {object[]} items this property contains the items injected from the other plugins,
+ * using the `containers` option in the plugin that want to inject new menu items.
+ * ```javascript
+ * const MyMenuButtonComponent = connect(selector, { onActivateTool })(({
+ *  component, // default component that provides a consistent UI (see BrandNavbarMenuItem in BrandNavbar plugin for props)
+ *  variant, // one of style variant (primary, success, danger or warning)
+ *  size, // button size
+ *  className, // custom class name provided by configuration
+ *  onActivateTool, // example of a custom connected action
+ * }) => {
+ *  const ItemComponent = component;
+ *  return (
+ *      <ItemComponent
+ *          className="my-class-name"
+ *          loading={false}
+ *          glyph="heart"
+ *          iconType="glyphicon"
+ *          labelId="myMessageId"
+ *          onClick={() => onActivateTool()}
+ *      />
+ *  );
+ * });
+ * createPlugin(
+ *  'MyPlugin',
+ *  {
+ *      containers: {
+ *          BrandNavbar: {
+ *              name: "TOOLNAME", // a name for the current tool.
+ *              Component: MyMenuButtonComponent
+ *          },
+ * // ...
+ * ```
+ * @example
+ * {
+ *  "name": "BrandNavbar",
+ *  "cfg": {
+ *      "containerPosition": "header",
+ *      "leftMenuItems": [
+ *          {
+ *              "type": "link",
+ *              "href": "/my-link",
+ *              "target": "blank",
+ *              "glyph": "heart",
+ *              "labelId": "myMessageId",
+ *              "variant": "default"
+ *          },
+ *          {
+ *              "type": "logo",
+ *              "href": "/my-link",
+ *              "target": "blank",
+ *              "src": "/my-image.jpg",
+ *              "style": {}
+ *          },
+ *          {
+ *              "type": "button",
+ *              "href": "/my-link",
+ *              "target": "blank",
+ *              "glyph": "heart",
+ *              "iconType": "glyphicon",
+ *              "tooltipId": "myMessageId",
+ *              "variant": "default",
+ *              "square": true
+ *          },
+ *          {
+ *              "type": "divider"
+ *          }
+ *      ],
+*      "rightMenuItems": [
+*          {
+*              "type": "button",
+*              "href": "/my-link",
+*              "target": "blank",
+*              "glyph": "heart",
+*              "labelId": "myMessageId",
+*              "variant": "default"
+*          }
+*      ]
+ *  }
+ * }
+ */
 function BrandNavbar({
     size,
     variant,
-    leftMenuItems = [],
-    rightMenuItems = [],
+    leftMenuItems,
+    rightMenuItems,
     items
 }, context) {
     const { loadedPlugins } = context;
@@ -74,6 +176,7 @@ function BrandNavbar({
                     gap="xs"
                     size={size}
                     variant={variant}
+                    menuItemComponent={BrandNavbarMenuItem}
                     items={[
                         ...leftMenuItems,
                         ...pluginLeftMenuItems
@@ -96,6 +199,22 @@ function BrandNavbar({
     );
 }
 
+BrandNavbar.propTypes = {
+    size: PropTypes.string,
+    variant: PropTypes.string,
+    leftMenuItems: PropTypes.array,
+    rightMenuItems: PropTypes.array,
+    items: PropTypes.array
+};
+
+BrandNavbar.contextTypes = {
+    loadedPlugins: PropTypes.object
+};
+
+BrandNavbar.defaultProps = {
+    leftMenuItems: [],
+    rightMenuItems: []
+};
 
 export default createPlugin('BrandNavbar', {
     component: BrandNavbar

web/client/plugins/ResourcesCatalog/ResourceDetails.jsx

@@ -51,6 +51,62 @@ const tabComponents = {
     about: ResourceAbout
 };
 
+/**
+ * This plugin shows details of a resource
+ * @memberof plugins
+ * @class
+ * @name ResourceDetails
+ * @prop {object[]} cfg.tabs configuration for the available tabs
+ * @prop {string} cfg.resourceType one of `MAP`, `DASHBOARD` or `GEOSTORY` when used in a viewer, if undefined can be used in the homepage
+ * @prop {string} cfg.headerNodeSelector optional valid query selector for the header in the page, used to set the position of the panel
+ * @prop {string} cfg.navbarNodeSelector optional valid query selector for the navbar under the header, used to set the position of the panel
+ * @prop {string} cfg.footerNodeSelector optional valid query selector for the footer in the page, used to set the position of the panel
+ * @prop {string} cfg.targetSelector optional valid query selector for a node used to mount the plugin root component
+ * @example
+ * {
+ *  "name": "ResourceDetails",
+ *  "cfg": {
+ *      "resourceType": "MAP",
+ *      "tabs": [
+ *          {
+ *              "type": "text",
+ *              "labelId": "myMassageIdForName",
+ *              "editable": true,
+ *              "path": "name"
+ *          },
+ *          {
+ *              "type": "text",
+ *              "labelId": "myMassageIdForMyAttribute",
+ *              "disableIf": "{!state('userrole')}",
+ *              "path": "attributes.myAttribute"
+ *          },
+ *          {
+ *              "type": "date",
+ *              "labelId": "myMassageIdForCreation",
+ *              "path": "creation",
+ *              "format": "MMMM Do YYYY"
+ *          },
+ *          {
+ *              "type": "tag",
+ *              "labelId": "myMassageIdForTags",
+ *              "path": "tags",
+ *              "editable": true,
+ *              "facet": "tag",
+ *              "itemColor": "color",
+ *              "disableIf": "{!state('userrole')}",
+ *              "filter": "filter{tag.in}"
+ *          },
+ *          {
+ *              "type": "boolean",
+ *              "labelId": "myMassageIdForAdvertised",
+ *              "path": "advertised",
+ *              "disableIf": "{!state('resourceCanEdit')}",
+ *              "editable": true
+ *          }
+ *      ]
+ *  }
+ * }
+ */
 function ResourceDetails({
     targetSelector,
     headerNodeSelector = '#ms-brand-navbar',

web/client/themes/default/less/resources-catalog/_brand-navbar.less

@@ -0,0 +1,7 @@
+// **************
+// Layout
+// **************
+
+.ms-brand-navbar {
+    min-height: 38px;
+}

web/client/themes/default/less/resources-catalog/index.less

@@ -2,6 +2,7 @@
 @import "_utility.less";
 
 @import "_base.less";
+@import "_brand-navbar.less";
 @import "_details-panel.less";
 @import "_permissions.less";
 @import "_resource-card.less";

web/client/translations/data.da-DK.json

@@ -3150,6 +3150,14 @@
       "MapViews": {
         "description": "This plugin allows to add a sequence of different views inside a map",
         "title": "MapViews"
+      },
+      "BrandNavbar": {
+        "description": "Main navigation menu",
+        "title": "Brand Navbar"
+      },
+      "ResourceDetails": {
+        "description": "This plugin allows to manage resource details of the map",
+        "title": "Resource Details"
       }
     },
     "contextCreator": {

web/client/translations/data.de-DE.json

@@ -3458,6 +3458,14 @@
           "MapViews": {
             "description": "Dieses Plugin ermöglicht das Hinzufügen einer Sequenz verschiedener Ansichten innerhalb einer Karte",
             "title": "Kartenansichten"
+          },
+          "BrandNavbar": {
+            "description": "Hauptnavigationsmenü",
+            "title": "Brand Navbar"
+          },
+          "ResourceDetails": {
+            "description": "Dieses Plugin ermöglicht die Verwaltung von Ressourcendetails der Karte",
+            "title": "Ressourcendetails"
           }
         },
         "contextCreator": {