[Canvas] Don't render error triangle on group created by cloning a page (#37497) (#37566)

* Dispatch on node id convention as we don't carry around the node type information

* place groups previously misplaced into its proper array

* don't render (always invisible) groups, which are free of own contents

x-pack/plugins/canvas/public/components/workpad_page/integration_utils.js

@@ -12,7 +12,7 @@ import { matrixToAngle, multiply, rotateZ, translate } from '../../lib/aeroelast
 import { arrayToMap, flatten, identity } from '../../lib/aeroelastic/functional';
 import { getLocalTransformMatrix } from '../../lib/aeroelastic/layout_functions';
 
-const isGroupId = id => id.startsWith('group');
+export const isGroupId = id => id.startsWith('group');
 
 const headerData = id =>
   isGroupId(id)

x-pack/plugins/canvas/public/components/workpad_page/workpad_static_page/static_workpad_page.js

@@ -7,6 +7,7 @@
 import React, { PureComponent } from 'react';
 import { ElementWrapper } from '../../element_wrapper';
 import { staticWorkpadPagePropTypes } from '../prop_types';
+import { isGroupId } from '../integration_utils';
 
 export class StaticWorkpadPage extends PureComponent {
   static propTypes = staticWorkpadPagePropTypes;
@@ -23,9 +24,11 @@ export class StaticWorkpadPage extends PureComponent {
         data-shared-items-container
         style={{ ...pageStyle, ...animationStyle, height, width }}
       >
-        {elements.map(element => (
-          <ElementWrapper key={element.id} element={element} />
-        ))}
+        {elements
+          .filter(node => !isGroupId(node.id))
+          .map(element => (
+            <ElementWrapper key={element.id} element={element} />
+          ))}
       </div>
     );
   }

x-pack/plugins/canvas/public/state/reducers/pages.js

@@ -12,6 +12,7 @@ import { routerProvider } from '../../lib/router_provider';
 import { getDefaultPage } from '../defaults';
 import * as actions from '../actions/pages';
 import { getSelectedPageIndex } from '../selectors/workpad';
+import { isGroupId } from '../../components/workpad_page/integration_utils';
 
 const setPageIndex = (workpadState, index) =>
   index < 0 || !workpadState.pages[index] || getSelectedPageIndex(workpadState) === index
@@ -36,8 +37,8 @@ function clonePage(page) {
   return {
     ...page,
     id: getId('page'),
-    groups: newNodes.filter(n => n.position.type === 'group'),
-    elements: newNodes.filter(n => n.position.type !== 'group'),
+    groups: newNodes.filter(n => isGroupId(n.id)),
+    elements: newNodes.filter(n => !isGroupId(n.id)),
   };
 }
 

x-pack/plugins/canvas/server/routes/workpad.js

@@ -97,6 +97,25 @@ export function workpad(server) {
 
       return savedObjectsClient
         .get(CANVAS_TYPE, id)
+        .then(obj => {
+          if (
+            // not sure if we need to be this defensive
+            obj.type === 'canvas-workpad' &&
+            obj.attributes &&
+            obj.attributes.pages &&
+            obj.attributes.pages.length
+          ) {
+            obj.attributes.pages.forEach(page => {
+              const elements = (page.elements || []).filter(({ id }) => !id.startsWith('group'));
+              const groups = (page.groups || []).concat(
+                (page.elements || []).filter(({ id }) => id.startsWith('group'))
+              );
+              page.elements = elements;
+              page.groups = groups;
+            });
+          }
+          return obj;
+        })
         .then(obj => ({ id: obj.id, ...obj.attributes }))
         .then(formatResponse)
         .catch(formatResponse);