[Canvas] Fixes "Element status" is inaccurate for grouped elements. (#135829)

* Excluded render on element add.

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

@@ -11,8 +11,9 @@ import { addElement, removeElements, setMultiplePositions } from '../../state/ac
 import { selectToplevelNodes } from '../../state/actions/transient';
 import { arrayToMap, flatten, identity } from '../../lib/aeroelastic/functional';
 import { getLocalTransformMatrix } from '../../lib/aeroelastic/layout_functions';
+import { isGroupId } from '../../lib/workpad';
 import { matrixToAngle } from '../../lib/aeroelastic/matrix';
-import { isGroupId, elementToShape } from './positioning_utils';
+import { elementToShape } from './positioning_utils';
 export * from './positioning_utils';
 
 const shapeToElement = (shape) => ({

x-pack/plugins/canvas/public/components/workpad_page/positioning_utils.ts

@@ -7,8 +7,7 @@
 
 import { PositionedElement, ElementPosition } from '../../../types';
 import { multiply, rotateZ, translate } from '../../lib/aeroelastic/matrix';
-
-export const isGroupId = (id: string) => id.startsWith('group');
+import { isGroupId } from '../../lib/workpad';
 
 const headerData = (id: string) =>
   isGroupId(id)

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

@@ -8,7 +8,7 @@
 import React, { PureComponent } from 'react';
 import { ElementWrapper } from '../../element_wrapper';
 import { staticWorkpadPagePropTypes } from '../prop_types';
-import { isGroupId } from '../positioning_utils';
+import { isGroupId } from '../../../lib/workpad';
 
 export class StaticWorkpadPage extends PureComponent {
   static propTypes = staticWorkpadPagePropTypes;

x-pack/plugins/canvas/public/lib/workpad.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export const isGroupId = (id: string) => id.startsWith('group');

x-pack/plugins/canvas/public/state/actions/elements.js

@@ -10,6 +10,7 @@ import immutable from 'object-path-immutable';
 import { get, pick, cloneDeep, without, last, debounce } from 'lodash';
 import { toExpression, safeElementFromExpression } from '@kbn/interpreter';
 import { createThunk } from '../../lib/create_thunk';
+import { isGroupId } from '../../lib/workpad';
 import {
   getPages,
   getWorkpadVariablesAsObject,
@@ -450,7 +451,8 @@ export const addElement = createThunk('addElement', ({ dispatch }, pageId, eleme
   // refresh all elements if there's a filter, otherwise just render the new element
   if (element.filter) {
     dispatch(fetchAllRenderables());
-  } else {
+    // element, which represents the group, should not be rendered. Its elements are rendered separately.
+  } else if (!isGroupId(newElement.id)) {
     dispatch(fetchRenderable(newElement));
   }
 

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

@@ -12,7 +12,7 @@ import { getId } from '../../lib/get_id';
 import { getDefaultPage } from '../defaults';
 import * as actions from '../actions/pages';
 import { getSelectedPageIndex } from '../selectors/workpad';
-import { isGroupId } from '../../components/workpad_page/positioning_utils';
+import { isGroupId } from '../../lib/workpad';
 
 const { set, del, insert } = immutable;