Move key => id mapping to directive.

React code only supports id attribute.

src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx

@@ -47,12 +47,6 @@ export function TopNavMenu(props: Props) {
   function renderItems() {
     if (!props.config) return;
     return props.config.map((menuItem, i) => {
-      if (menuItem.key && !menuItem.id) {
-        // Copy key into id, as it's a reserved react propery.
-        // This is done for 3rd party developer backward compatibility.
-        // In the future, ID should be used, rather than key.
-        menuItem.id = menuItem.key;
-      }
       return (
         <EuiFlexItem grow={false} key={`nav-menu-${i}`}>
           <TopNavMenuItem {...menuItem} />

src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu_data.tsx

@@ -20,9 +20,6 @@
 export type TopNavMenuAction = (anchorElement: EventTarget) => void;
 
 export interface TopNavMenuData {
-  // key is to be deprecated and replaced with ID.
-  // It's a reserved React property https://reactjs.org/warnings/special-props.html
-  key?: string;
   id?: string;
   label: string;
   run: TopNavMenuAction;

src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js

@@ -54,10 +54,18 @@ module.directive('kbnTopNavV2', () => {
         $scope.store = localStorage;
         $scope.uiSettings = chrome.getUiSettingsClient();
 
-        // Watch the disableButton functions
+        // Watch config changes
         $scope.$watch(() => {
           const config = $scope.$eval($attr.config);
           return config.map((item) => {
+            // Copy key into id, as it's a reserved react propery.
+            // This is done for Angular directive backward compatibility.
+            // In React only id is recognized.
+            if (item.key && !item.id) {
+              item.id = item.key;
+            }
+
+            // Watch the disableButton functions
             if (typeof item.disableButton === 'function') {
               return item.disableButton();
             }