Fix record view custom menus (geonetwork#9171)

* Add context handling for static page menu

* Refactor static page menus to work properly with the record view page

Author: tylerjmchugh

web-ui/src/main/resources/catalog/components/pages/GnStaticPagesDirective.js

@@ -123,7 +123,9 @@
         scope: {
           pageId: "=gnStaticPageMenu",
           language: "@language",
-          section: "@section"
+          section: "@section",
+          renderAsButton: "@?",
+          context: "=?"
         },
         templateUrl: function (elem, attr) {
           return "../../catalog/components/pages/partials/menu-page.html";
@@ -135,6 +137,9 @@
             ? $scope.pageId
             : [$scope.pageId];
 
+          // Set button style based on explicit parameter (defaults to false)
+          $scope.renderAsButton = $scope.renderAsButton === "true";
+
           if ($scope.pagesConfig.length > 0) {
             gnStaticPagesService.loadPages($scope.language, $scope.section).then(
               function (response) {

web-ui/src/main/resources/catalog/components/pages/partials/menu-page.html

@@ -1,10 +1,12 @@
 <li
-  data-ng-class="{'dropdown': isSubmenu}"
+  data-ng-class="{'dropdown': isSubmenu, 'btn-group': renderAsButton}"
   role="menuitem"
   data-ng-hide="isSubmenu && page.pages.length < 1"
 >
+  <!-- Submenu dropdown toggle -->
   <a
-    data-ng-if="isSubmenu && section!='record_view_menu'"
+    data-ng-if="isSubmenu"
+    data-ng-class="{'btn btn-default': renderAsButton}"
     class="dropdown-toggle gn-menuheader-xs"
     role="button"
     data-toggle="dropdown"
@@ -19,17 +21,7 @@
     <span class="caret hidden-xs"></span>
   </a>
 
-  <button
-    data-ng-if="section=='record_view_menu'"
-    type="button"
-    class="btn btn-default dropdown-toggle"
-    data-toggle="dropdown"
-    aria-label="{{'additionalLinks' | translate}}"
-    aria-expanded="false"
-  >
-    <span data-translate="" class="hidden-sm hidden-xs">{{page.label}}</span>
-    <span class="caret"></span>
-  </button>
+  <!-- Submenu dropdown items -->
   <ul data-ng-if="isSubmenu" class="dropdown-menu gn-menu-xs clearfix">
     <li
       data-ng-repeat="page in page.pages"
@@ -40,7 +32,7 @@
       <a
         data-ng-show="submenuExternalLink"
         title="{{page.label}}"
-        href="{{page.link}}"
+        href="{{page.link | replaceLinkPlaceholders:context}}"
         target="{{page.link.indexOf('http') === 0 ? '_blank' : '_self'}}"
       >
         <span
@@ -63,11 +55,13 @@
       </a>
     </li>
   </ul>
+
+  <!--   Single page external link -->
   <a
-    data-ng-if="!isSubmenu && page"
-    data-ng-show="isExternalLink"
+    data-ng-if="!isSubmenu && page && isExternalLink"
+    data-ng-class="{'btn btn-default': renderAsButton}"
     title="{{page.label}}"
-    href="{{page.link}}"
+    href="{{page.link | replaceLinkPlaceholders:context}}"
     target="_blank"
   >
     <span
@@ -76,9 +70,11 @@
     ></span>
     <span>{{page.label}}</span>
   </a>
+
+  <!-- Single page internal link -->
   <a
-    data-ng-if="!isSubmenu && page"
-    data-ng-show="!isExternalLink"
+    data-ng-if="!isSubmenu && page && !isExternalLink"
+    data-ng-class="{'btn btn-default': renderAsButton}"
     data-gn-active-tb-item="{{gnCfg.mods.page.appUrl + '/' + page.pageId}}?page={{page.pageId}}"
     title="{{page.pageId}}"
     data-ng-click="changePage($event)"

web-ui/src/main/resources/catalog/components/utility/UtilityDirective.js

@@ -2523,6 +2523,15 @@
       };
     }
   ]);
+  module.filter("replaceLinkPlaceholders", [
+    function () {
+      return function (url, context) {
+        return url
+          .replace(/{uuid}/g, (context && context.uuid) || "")
+          .replace(/{id}/g, (context && context.id) || "");
+      };
+    }
+  ]);
   module.filter("signInLink", [
     "$location",
     "$filter",

web-ui/src/main/resources/catalog/views/default/templates/recordView/recordView.html

@@ -99,6 +99,8 @@
                 gn-static-page-menu="menu"
                 language="{{lang}}"
                 section="record_view_menu"
+                render-as-button="true"
+                context="{uuid: mdView.current.record.uuid, id: mdView.current.record.id}"
               ></div>
 
               <!-- edit -->