diff --git a/x-pack/plugins/canvas/public/components/alignment_guide/alignment_guide.js b/x-pack/plugins/canvas/public/components/alignment_guide/alignment_guide.js
deleted file mode 100644
index d5a76efaf3d49..0000000000000
--- a/x-pack/plugins/canvas/public/components/alignment_guide/alignment_guide.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { matrixToCSS } from '../../lib/dom';
-
-export const AlignmentGuide = ({ transformMatrix, width, height }) => {
- const newStyle = {
- width,
- height,
- marginLeft: -width / 2,
- marginTop: -height / 2,
- background: 'magenta',
- position: 'absolute',
- transform: matrixToCSS(transformMatrix),
- };
- return (
-
- );
-};
-
-AlignmentGuide.propTypes = {
- transformMatrix: PropTypes.arrayOf(PropTypes.number).isRequired,
- width: PropTypes.number.isRequired,
- height: PropTypes.number.isRequired,
-};
diff --git a/x-pack/plugins/canvas/public/components/alignment_guide/alignment_guide.scss b/x-pack/plugins/canvas/public/components/alignment_guide/alignment_guide.scss
deleted file mode 100644
index 27f06b42df453..0000000000000
--- a/x-pack/plugins/canvas/public/components/alignment_guide/alignment_guide.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.canvasAlignmentGuide {
- transform-origin: center center; /* the default, only for clarity */
- transform-style: preserve-3d;
-}
diff --git a/x-pack/plugins/canvas/public/components/alignment_guide/index.js b/x-pack/plugins/canvas/public/components/alignment_guide/index.js
deleted file mode 100644
index 6793e0151759b..0000000000000
--- a/x-pack/plugins/canvas/public/components/alignment_guide/index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { pure } from 'recompose';
-import { AlignmentGuide as Component } from './alignment_guide';
-
-export const AlignmentGuide = pure(Component);
diff --git a/x-pack/plugins/canvas/public/components/border_connection/border_connection.js b/x-pack/plugins/canvas/public/components/border_connection/border_connection.js
deleted file mode 100644
index a7356e0a3f870..0000000000000
--- a/x-pack/plugins/canvas/public/components/border_connection/border_connection.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { matrixToCSS } from '../../lib/dom';
-
-export const BorderConnection = ({ transformMatrix, width, height }) => {
- const newStyle = {
- width,
- height,
- marginLeft: -width / 2,
- marginTop: -height / 2,
- position: 'absolute',
- transform: matrixToCSS(transformMatrix),
- };
- return ;
-};
-
-BorderConnection.propTypes = {
- width: PropTypes.number.isRequired,
- height: PropTypes.number.isRequired,
- transformMatrix: PropTypes.arrayOf(PropTypes.number).isRequired,
-};
diff --git a/x-pack/plugins/canvas/public/components/border_connection/border_connection.scss b/x-pack/plugins/canvas/public/components/border_connection/border_connection.scss
deleted file mode 100644
index ba09edd1090db..0000000000000
--- a/x-pack/plugins/canvas/public/components/border_connection/border_connection.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.canvasBorder--connection {
- position: absolute;
- top: 0;
- width: 100%;
- height: 100%;
- pointer-events: none;
- border-top: 1px dashed $euiColorLightShade;
- border-left: 1px dashed $euiColorLightShade;
-}
diff --git a/x-pack/plugins/canvas/public/components/border_connection/index.js b/x-pack/plugins/canvas/public/components/border_connection/index.js
deleted file mode 100644
index b99ab923d52d4..0000000000000
--- a/x-pack/plugins/canvas/public/components/border_connection/index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { pure } from 'recompose';
-import { BorderConnection as Component } from './border_connection';
-
-export const BorderConnection = pure(Component);
diff --git a/x-pack/plugins/canvas/public/components/border_resize_handle/border_resize_handle.scss b/x-pack/plugins/canvas/public/components/border_resize_handle/border_resize_handle.scss
deleted file mode 100644
index 4913a599b07f7..0000000000000
--- a/x-pack/plugins/canvas/public/components/border_resize_handle/border_resize_handle.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.canvasBorderResizeHandle {
- @include euiSlightShadow;
- transform-origin: center center; /* the default, only for clarity */
- transform-style: preserve-3d;
- display: block;
- position: absolute;
- height: 8px;
- width: 8px;
- margin-left: -4px;
- margin-top: -4px;
- background-color: $euiColorEmptyShade;
- border: 1px solid $euiColorDarkShade;
-}
diff --git a/x-pack/plugins/canvas/public/components/border_resize_handle/index.js b/x-pack/plugins/canvas/public/components/border_resize_handle/index.js
deleted file mode 100644
index c3fea05d60f7e..0000000000000
--- a/x-pack/plugins/canvas/public/components/border_resize_handle/index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { pure } from 'recompose';
-import { BorderResizeHandle as Component } from './border_resize_handle';
-
-export const BorderResizeHandle = pure(Component);
diff --git a/x-pack/plugins/canvas/public/components/dragbox_annotation/dragbox_annotation.js b/x-pack/plugins/canvas/public/components/dragbox_annotation/dragbox_annotation.js
deleted file mode 100644
index 8c67404cb9b7d..0000000000000
--- a/x-pack/plugins/canvas/public/components/dragbox_annotation/dragbox_annotation.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { matrixToCSS } from '../../lib/dom';
-
-export const DragBoxAnnotation = ({ transformMatrix, width, height }) => {
- const newStyle = {
- width,
- height,
- marginLeft: -width / 2,
- marginTop: -height / 2,
- transform: matrixToCSS(transformMatrix),
- };
- return ;
-};
-
-DragBoxAnnotation.propTypes = {
- transformMatrix: PropTypes.arrayOf(PropTypes.number).isRequired,
- width: PropTypes.number.isRequired,
- height: PropTypes.number.isRequired,
-};
diff --git a/x-pack/plugins/canvas/public/components/dragbox_annotation/dragbox_annotation.scss b/x-pack/plugins/canvas/public/components/dragbox_annotation/dragbox_annotation.scss
deleted file mode 100644
index bd14ced586dbd..0000000000000
--- a/x-pack/plugins/canvas/public/components/dragbox_annotation/dragbox_annotation.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.canvasDragBoxAnnotation {
- position: absolute;
- background: none;
- transform-origin: center center; /* the default, only for clarity */
- transform-style: preserve-3d;
- outline: dashed 1px $euiColorDarkShade;
- pointer-events: none;
-}
diff --git a/x-pack/plugins/canvas/public/components/dragbox_annotation/index.js b/x-pack/plugins/canvas/public/components/dragbox_annotation/index.js
deleted file mode 100644
index 85c97e90776c6..0000000000000
--- a/x-pack/plugins/canvas/public/components/dragbox_annotation/index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { pure } from 'recompose';
-import { DragBoxAnnotation as Component } from './dragbox_annotation';
-
-export const DragBoxAnnotation = pure(Component);
diff --git a/x-pack/plugins/canvas/public/components/hover_annotation/hover_annotation.scss b/x-pack/plugins/canvas/public/components/hover_annotation/hover_annotation.scss
deleted file mode 100644
index 4771bbb6134be..0000000000000
--- a/x-pack/plugins/canvas/public/components/hover_annotation/hover_annotation.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.canvasHoverAnnotation {
- position: absolute;
- background: none;
- transform-origin: center center; /* the default, only for clarity */
- transform-style: preserve-3d;
- outline: solid 1px $euiColorVis0;
- pointer-events: none;
-}
diff --git a/x-pack/plugins/canvas/public/components/hover_annotation/index.js b/x-pack/plugins/canvas/public/components/hover_annotation/index.js
deleted file mode 100644
index 71c57a25d7960..0000000000000
--- a/x-pack/plugins/canvas/public/components/hover_annotation/index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { pure } from 'recompose';
-import { HoverAnnotation as Component } from './hover_annotation';
-
-export const HoverAnnotation = pure(Component);
diff --git a/x-pack/plugins/canvas/public/components/layout_annotations/alignment_guide.tsx b/x-pack/plugins/canvas/public/components/layout_annotations/alignment_guide.tsx
new file mode 100644
index 0000000000000..5ac23ab41f7c0
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/layout_annotations/alignment_guide.tsx
@@ -0,0 +1,37 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FC } from 'react';
+import PropTypes from 'prop-types';
+import { matrixToCSS } from '../../lib/dom';
+import { TransformMatrix3d } from '../../lib/aeroelastic';
+
+interface Props {
+ height: number;
+ transformMatrix: TransformMatrix3d;
+ width: number;
+}
+
+export const AlignmentGuide: FC = ({ transformMatrix, width, height }) => (
+
+);
+
+AlignmentGuide.propTypes = {
+ height: PropTypes.number.isRequired,
+ transformMatrix: PropTypes.arrayOf(PropTypes.number).isRequired,
+ width: PropTypes.number.isRequired,
+};
diff --git a/x-pack/plugins/canvas/public/components/layout_annotations/border_connection.tsx b/x-pack/plugins/canvas/public/components/layout_annotations/border_connection.tsx
new file mode 100644
index 0000000000000..e47ec3cc89e7b
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/layout_annotations/border_connection.tsx
@@ -0,0 +1,36 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FC } from 'react';
+import PropTypes from 'prop-types';
+import { matrixToCSS } from '../../lib/dom';
+import { TransformMatrix3d } from '../../lib/aeroelastic';
+
+interface Props {
+ height: number;
+ transformMatrix: TransformMatrix3d;
+ width: number;
+}
+
+export const BorderConnection: FC = ({ transformMatrix, width, height }) => (
+
+);
+
+BorderConnection.propTypes = {
+ height: PropTypes.number.isRequired,
+ transformMatrix: PropTypes.arrayOf(PropTypes.number).isRequired,
+ width: PropTypes.number.isRequired,
+};
diff --git a/x-pack/plugins/canvas/public/components/border_resize_handle/border_resize_handle.js b/x-pack/plugins/canvas/public/components/layout_annotations/border_resize_handle.tsx
similarity index 68%
rename from x-pack/plugins/canvas/public/components/border_resize_handle/border_resize_handle.js
rename to x-pack/plugins/canvas/public/components/layout_annotations/border_resize_handle.tsx
index de9d573724836..f7c49205568fe 100644
--- a/x-pack/plugins/canvas/public/components/border_resize_handle/border_resize_handle.js
+++ b/x-pack/plugins/canvas/public/components/layout_annotations/border_resize_handle.tsx
@@ -4,11 +4,17 @@
* you may not use this file except in compliance with the Elastic License.
*/
-import React from 'react';
+import React, { FC } from 'react';
import PropTypes from 'prop-types';
import { matrixToCSS } from '../../lib/dom';
+import { TransformMatrix3d } from '../../lib/aeroelastic';
-export const BorderResizeHandle = ({ transformMatrix, zoomScale }) => (
+interface Props {
+ transformMatrix: TransformMatrix3d;
+ zoomScale?: number;
+}
+
+export const BorderResizeHandle: FC = ({ transformMatrix, zoomScale = 1 }) => (
(
BorderResizeHandle.propTypes = {
transformMatrix: PropTypes.arrayOf(PropTypes.number).isRequired,
+ zoomScale: PropTypes.number,
};
diff --git a/x-pack/plugins/canvas/public/components/layout_annotations/dragbox_annotation.tsx b/x-pack/plugins/canvas/public/components/layout_annotations/dragbox_annotation.tsx
new file mode 100644
index 0000000000000..16a2a626b7975
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/layout_annotations/dragbox_annotation.tsx
@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FC } from 'react';
+import PropTypes from 'prop-types';
+import { matrixToCSS } from '../../lib/dom';
+import { TransformMatrix3d } from '../../lib/aeroelastic';
+
+interface Props {
+ height: number;
+ transformMatrix: TransformMatrix3d;
+ width: number;
+}
+
+export const DragBoxAnnotation: FC
= ({ transformMatrix, width, height }) => (
+
+);
+
+DragBoxAnnotation.propTypes = {
+ transformMatrix: PropTypes.arrayOf(PropTypes.number).isRequired,
+ width: PropTypes.number.isRequired,
+ height: PropTypes.number.isRequired,
+};
diff --git a/x-pack/plugins/canvas/public/components/hover_annotation/hover_annotation.js b/x-pack/plugins/canvas/public/components/layout_annotations/hover_annotation.tsx
similarity index 50%
rename from x-pack/plugins/canvas/public/components/hover_annotation/hover_annotation.js
rename to x-pack/plugins/canvas/public/components/layout_annotations/hover_annotation.tsx
index 7337c0446e31c..a8d73f8bf9ec7 100644
--- a/x-pack/plugins/canvas/public/components/hover_annotation/hover_annotation.js
+++ b/x-pack/plugins/canvas/public/components/layout_annotations/hover_annotation.tsx
@@ -4,23 +4,32 @@
* you may not use this file except in compliance with the Elastic License.
*/
-import React from 'react';
+import React, { FC } from 'react';
import PropTypes from 'prop-types';
import { matrixToCSS } from '../../lib/dom';
+import { TransformMatrix3d } from '../../lib/aeroelastic';
-export const HoverAnnotation = ({ transformMatrix, width, height }) => {
- const newStyle = {
- width,
- height,
- marginLeft: -width / 2,
- marginTop: -height / 2,
- transform: matrixToCSS(transformMatrix),
- };
- return ;
-};
+interface Props {
+ height: number;
+ transformMatrix: TransformMatrix3d;
+ width: number;
+}
+
+export const HoverAnnotation: FC = ({ transformMatrix, width, height }) => (
+
+);
HoverAnnotation.propTypes = {
+ height: PropTypes.number.isRequired,
transformMatrix: PropTypes.arrayOf(PropTypes.number).isRequired,
width: PropTypes.number.isRequired,
- height: PropTypes.number.isRequired,
};
diff --git a/x-pack/plugins/canvas/public/components/layout_annotations/index.ts b/x-pack/plugins/canvas/public/components/layout_annotations/index.ts
new file mode 100644
index 0000000000000..d2334c6a225fe
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/layout_annotations/index.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { AlignmentGuide } from './alignment_guide';
+export { DragBoxAnnotation } from './dragbox_annotation';
+export { HoverAnnotation } from './hover_annotation';
+export { TooltipAnnotation } from './tooltip_annotation';
+export { RotationHandle } from './rotation_handle';
+export { BorderConnection } from './border_connection';
+export { BorderResizeHandle } from './border_resize_handle';
diff --git a/x-pack/plugins/canvas/public/components/layout_annotations/layout_annotations.scss b/x-pack/plugins/canvas/public/components/layout_annotations/layout_annotations.scss
new file mode 100644
index 0000000000000..363aa1f241b9d
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/layout_annotations/layout_annotations.scss
@@ -0,0 +1,81 @@
+.canvasAlignmentGuide {
+ transform-origin: center center; /* the default, only for clarity */
+ transform-style: preserve-3d;
+}
+
+.canvasBorderConnection {
+ position: absolute;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ border-top: 1px dashed $euiColorLightShade;
+ border-left: 1px dashed $euiColorLightShade;
+}
+
+.canvasBorderResizeHandle {
+ @include euiSlightShadow;
+ transform-origin: center center; /* the default, only for clarity */
+ transform-style: preserve-3d;
+ display: block;
+ position: absolute;
+ height: $euiSizeS;
+ width: $euiSizeS;
+ margin-left: -4px;
+ margin-top: -4px;
+ background-color: $euiColorEmptyShade;
+ border: 1px solid $euiColorDarkShade;
+}
+
+.canvasDragBoxAnnotation {
+ position: absolute;
+ background: none;
+ transform-origin: center center; /* the default, only for clarity */
+ transform-style: preserve-3d;
+ outline: dashed 1px $euiColorDarkShade;
+ pointer-events: none;
+}
+
+.canvasHoverAnnotation {
+ position: absolute;
+ background: none;
+ transform-origin: center center; /* the default, only for clarity */
+ transform-style: preserve-3d;
+ outline: solid 1px $euiColorVis0;
+ pointer-events: none;
+}
+
+.canvasRotationHandle {
+ transform-origin: center center; /* the default, only for clarity */
+ transform-style: preserve-3d;
+ display: block;
+ position: absolute;
+ height: $euiSizeL;
+ width: 0;
+ margin-left: -1px;
+ margin-top: -12px;
+ border-top: 1px dashed $euiColorLightShade;
+ border-left: 1px dashed $euiColorLightShade;
+}
+
+.canvasRotationHandle__handle {
+ transform-origin: center center; /* the default, only for clarity */
+ transform-style: preserve-3d;
+ display: block;
+ position: absolute;
+ height: 9px;
+ width: 9px;
+ margin-left: -5px;
+ margin-top: -6px;
+ border-radius: 50%;
+ background-color: $euiColorMediumShade;
+}
+
+.tooltipAnnotation {
+ @include euiToolTipStyle($size: 's');
+ position: absolute;
+ transform-origin: center center; /* the default, only for clarity */
+ transform-style: preserve-3d;
+ outline: none;
+ pointer-events: none;
+}
diff --git a/x-pack/plugins/canvas/public/components/rotation_handle/rotation_handle.js b/x-pack/plugins/canvas/public/components/layout_annotations/rotation_handle.tsx
similarity index 60%
rename from x-pack/plugins/canvas/public/components/rotation_handle/rotation_handle.js
rename to x-pack/plugins/canvas/public/components/layout_annotations/rotation_handle.tsx
index dfadbbc39c547..e2a3f57efc672 100644
--- a/x-pack/plugins/canvas/public/components/rotation_handle/rotation_handle.js
+++ b/x-pack/plugins/canvas/public/components/layout_annotations/rotation_handle.tsx
@@ -4,19 +4,25 @@
* you may not use this file except in compliance with the Elastic License.
*/
-import React from 'react';
+import React, { FC } from 'react';
import PropTypes from 'prop-types';
import { matrixToCSS } from '../../lib/dom';
+import { TransformMatrix3d } from '../../lib/aeroelastic';
-export const RotationHandle = ({ transformMatrix, zoomScale }) => (
+interface Props {
+ transformMatrix: TransformMatrix3d;
+ zoomScale?: number;
+}
+
+export const RotationHandle: FC = ({ transformMatrix, zoomScale = 1 }) => (
@@ -24,4 +30,5 @@ export const RotationHandle = ({ transformMatrix, zoomScale }) => (
RotationHandle.propTypes = {
transformMatrix: PropTypes.arrayOf(PropTypes.number).isRequired,
+ zoomScale: PropTypes.number,
};
diff --git a/x-pack/plugins/canvas/public/components/tooltip_annotation/tooltip_annotation.js b/x-pack/plugins/canvas/public/components/layout_annotations/tooltip_annotation.tsx
similarity index 70%
rename from x-pack/plugins/canvas/public/components/tooltip_annotation/tooltip_annotation.js
rename to x-pack/plugins/canvas/public/components/layout_annotations/tooltip_annotation.tsx
index 1836bfd0162f3..84c527bf7af27 100644
--- a/x-pack/plugins/canvas/public/components/tooltip_annotation/tooltip_annotation.js
+++ b/x-pack/plugins/canvas/public/components/layout_annotations/tooltip_annotation.tsx
@@ -4,11 +4,17 @@
* you may not use this file except in compliance with the Elastic License.
*/
-import React from 'react';
+import React, { FC } from 'react';
import PropTypes from 'prop-types';
import { matrixToCSS } from '../../lib/dom';
+import { TransformMatrix3d } from '../../lib/aeroelastic';
-export const HoverAnnotation = ({ transformMatrix, text }) => {
+interface Props {
+ transformMatrix: TransformMatrix3d;
+ text: string;
+}
+
+export const TooltipAnnotation: FC = ({ transformMatrix, text }) => {
const newStyle = {
transform: `${matrixToCSS(transformMatrix)} translate(1em, -1em)`,
};
@@ -19,7 +25,7 @@ export const HoverAnnotation = ({ transformMatrix, text }) => {
);
};
-HoverAnnotation.propTypes = {
+TooltipAnnotation.propTypes = {
transformMatrix: PropTypes.arrayOf(PropTypes.number).isRequired,
text: PropTypes.string.isRequired,
};
diff --git a/x-pack/plugins/canvas/public/components/rotation_handle/index.js b/x-pack/plugins/canvas/public/components/rotation_handle/index.js
deleted file mode 100644
index 86c99ce12a04e..0000000000000
--- a/x-pack/plugins/canvas/public/components/rotation_handle/index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { pure } from 'recompose';
-import { RotationHandle as Component } from './rotation_handle';
-
-export const RotationHandle = pure(Component);
diff --git a/x-pack/plugins/canvas/public/components/rotation_handle/rotation_handle.scss b/x-pack/plugins/canvas/public/components/rotation_handle/rotation_handle.scss
deleted file mode 100644
index 233a86199c483..0000000000000
--- a/x-pack/plugins/canvas/public/components/rotation_handle/rotation_handle.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.canvasRotationHandle--connector {
- transform-origin: center center; /* the default, only for clarity */
- transform-style: preserve-3d;
- display: block;
- position: absolute;
- height: 24px;
- width: 0;
- margin-left: -1px;
- margin-top: -12px;
- border-top: 1px dashed $euiColorLightShade;
- border-left: 1px dashed $euiColorLightShade;
-}
-
-.canvasRotationHandle--handle {
- transform-origin: center center; /* the default, only for clarity */
- transform-style: preserve-3d;
- display: block;
- position: absolute;
- height: 9px;
- width: 9px;
- margin-left: -5px;
- margin-top: -6px;
- border-radius: 50%;
- background-color: $euiColorMediumShade;
-}
diff --git a/x-pack/plugins/canvas/public/components/tooltip_annotation/index.js b/x-pack/plugins/canvas/public/components/tooltip_annotation/index.js
deleted file mode 100644
index c6d545be560ce..0000000000000
--- a/x-pack/plugins/canvas/public/components/tooltip_annotation/index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { pure } from 'recompose';
-import { HoverAnnotation as Component } from './tooltip_annotation';
-
-export const TooltipAnnotation = pure(Component);
diff --git a/x-pack/plugins/canvas/public/components/tooltip_annotation/tooltip_annotation.scss b/x-pack/plugins/canvas/public/components/tooltip_annotation/tooltip_annotation.scss
deleted file mode 100644
index d91e49c0c628f..0000000000000
--- a/x-pack/plugins/canvas/public/components/tooltip_annotation/tooltip_annotation.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.tooltipAnnotation {
- @include euiToolTipStyle($size: 's');
- position: absolute;
- transform-origin: center center; /* the default, only for clarity */
- transform-style: preserve-3d;
- outline: none;
- pointer-events: none;
-}
diff --git a/x-pack/plugins/canvas/public/components/workpad_page/workpad_interactive_page/interactive_workpad_page.js b/x-pack/plugins/canvas/public/components/workpad_page/workpad_interactive_page/interactive_workpad_page.js
index 152da323e89ea..4089a1d709299 100644
--- a/x-pack/plugins/canvas/public/components/workpad_page/workpad_interactive_page/interactive_workpad_page.js
+++ b/x-pack/plugins/canvas/public/components/workpad_page/workpad_interactive_page/interactive_workpad_page.js
@@ -6,13 +6,15 @@
import React, { PureComponent } from 'react';
import { ElementWrapper } from '../../element_wrapper';
-import { AlignmentGuide } from '../../alignment_guide';
-import { DragBoxAnnotation } from '../../dragbox_annotation';
-import { HoverAnnotation } from '../../hover_annotation';
-import { TooltipAnnotation } from '../../tooltip_annotation';
-import { RotationHandle } from '../../rotation_handle';
-import { BorderConnection } from '../../border_connection';
-import { BorderResizeHandle } from '../../border_resize_handle';
+import {
+ AlignmentGuide,
+ DragBoxAnnotation,
+ HoverAnnotation,
+ TooltipAnnotation,
+ RotationHandle,
+ BorderConnection,
+ BorderResizeHandle,
+} from '../../layout_annotations';
import { WorkpadShortcuts } from '../../workpad_shortcuts';
import { interactiveWorkpadPagePropTypes } from '../prop_types';
import { InteractionBoundary } from './interaction_boundary';
diff --git a/x-pack/plugins/canvas/public/style/index.scss b/x-pack/plugins/canvas/public/style/index.scss
index ccaf6f1c1a478..3937d7fc05544 100644
--- a/x-pack/plugins/canvas/public/style/index.scss
+++ b/x-pack/plugins/canvas/public/style/index.scss
@@ -8,15 +8,12 @@
@import '../apps/export/export/export_app';
// Canvas components
-@import '../components/alignment_guide/alignment_guide';
@import '../components/arg_add/arg_add';
@import '../components/arg_add_popover/arg_add_popover';
@import '../components/arg_form/arg_form';
@import '../components/asset_manager/asset_manager';
@import '../components/asset_picker/asset_picker';
@import '../components/autocomplete/autocomplete';
-@import '../components/border_connection/border_connection';
-@import '../components/border_resize_handle/border_resize_handle';
@import '../components/clipboard/clipboard';
@import '../components/color_dot/color_dot';
@import '../components/color_palette/color_palette';
@@ -27,25 +24,22 @@
@import '../components/datatable/datatable';
@import '../components/debug/debug';
@import '../components/dom_preview/dom_preview';
-@import '../components/dragbox_annotation/dragbox_annotation';
@import '../components/element_card/element_card';
@import '../components/element_content/element_content';
@import '../components/expression/expression';
@import '../components/fullscreen/fullscreen';
@import '../components/function_form/function_form';
-@import '../components/hover_annotation/hover_annotation';
+@import '../components/layout_annotations/layout_annotations';
@import '../components/loading/loading';
@import '../components/navbar/navbar';
@import '../components/page_manager/page_manager';
@import '../components/positionable/positionable';
-@import '../components/rotation_handle/rotation_handle';
@import '../components/shape_preview/shape_preview';
@import '../components/shape_picker/shape_picker';
@import '../components/sidebar/sidebar';
@import '../components/sidebar_header/sidebar_header';
@import '../components/toolbar/toolbar';
@import '../components/toolbar/tray/tray';
-@import '../components/tooltip_annotation/tooltip_annotation';
@import '../components/workpad/workpad';
@import '../components/workpad_header/element_menu/element_menu';
@import '../components/workpad_header/share_menu/share_menu';
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/index.tsx
index c10378f48a8d1..c52f8447214a0 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/index.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/index.tsx
@@ -536,9 +536,9 @@ export const AgentListPage: React.FunctionComponent<{}> = () => {
),
}}
/>
- ) : !isLoading && totalAgents === 0 ? (
+ ) : (
emptyPrompt
- ) : undefined
+ )
}
items={totalAgents ? agents : []}
itemId="id"
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/agent_enrollment_flyout/config_selection.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/agent_enrollment_flyout/config_selection.tsx
index 09b00240dc127..e98ebb7cadc7c 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/agent_enrollment_flyout/config_selection.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/agent_enrollment_flyout/config_selection.tsx
@@ -39,71 +39,105 @@ export const EnrollmentStepAgentConfig: React.FC = (props) => {
enrollmentAPIKeyId?: string;
}>({});
- useEffect(() => {
- if (agentConfigs && agentConfigs.length && !selectedState.agentConfigId) {
- setSelectedState({
- ...selectedState,
- agentConfigId: agentConfigs[0].id,
- });
- }
- }, [agentConfigs, selectedState]);
+ useEffect(
+ function triggerOnConfigChangeEffect() {
+ if (onConfigChange && selectedState.agentConfigId) {
+ onConfigChange(selectedState.agentConfigId);
+ }
+ },
+ [selectedState.agentConfigId, onConfigChange]
+ );
- useEffect(() => {
- if (onConfigChange && selectedState.agentConfigId) {
- onConfigChange(selectedState.agentConfigId);
- }
- }, [selectedState.agentConfigId, onConfigChange]);
+ useEffect(
+ function triggerOnKeyChangeEffect() {
+ if (!withKeySelection || !onKeyChange) {
+ return;
+ }
- useEffect(() => {
- if (!withKeySelection) {
- return;
- }
- if (!selectedState.agentConfigId) {
- setEnrollmentAPIKeys([]);
- return;
- }
+ if (selectedState.enrollmentAPIKeyId) {
+ onKeyChange(selectedState.enrollmentAPIKeyId);
+ }
+ },
+ [withKeySelection, onKeyChange, selectedState.enrollmentAPIKeyId]
+ );
- async function fetchEnrollmentAPIKeys() {
- try {
- const res = await sendGetEnrollmentAPIKeys({
- page: 1,
- perPage: 10000,
- });
- if (res.error) {
- throw res.error;
+ useEffect(
+ function useDefaultConfigEffect() {
+ if (agentConfigs && agentConfigs.length && !selectedState.agentConfigId) {
+ const defaultConfig = agentConfigs.find((config) => config.is_default);
+ if (defaultConfig) {
+ setSelectedState({
+ ...selectedState,
+ agentConfigId: defaultConfig.id,
+ });
}
+ }
+ },
+ [agentConfigs, selectedState]
+ );
- if (!res.data) {
- throw new Error('No data while fetching enrollment API keys');
+ useEffect(
+ function useEnrollmentKeysForConfigEffect() {
+ if (!withKeySelection) {
+ return;
+ }
+ if (!selectedState.agentConfigId) {
+ setEnrollmentAPIKeys([]);
+ return;
+ }
+
+ async function fetchEnrollmentAPIKeys() {
+ try {
+ const res = await sendGetEnrollmentAPIKeys({
+ page: 1,
+ perPage: 10000,
+ });
+ if (res.error) {
+ throw res.error;
+ }
+
+ if (!res.data) {
+ throw new Error('No data while fetching enrollment API keys');
+ }
+
+ setEnrollmentAPIKeys(
+ res.data.list.filter((key) => key.config_id === selectedState.agentConfigId)
+ );
+ } catch (error) {
+ notifications.toasts.addError(error, {
+ title: 'Error',
+ });
}
+ }
+ fetchEnrollmentAPIKeys();
+ },
+ [withKeySelection, selectedState.agentConfigId, notifications.toasts]
+ );
- setEnrollmentAPIKeys(
- res.data.list.filter((key) => key.config_id === selectedState.agentConfigId)
- );
- } catch (error) {
- notifications.toasts.addError(error, {
- title: 'Error',
+ useEffect(
+ function useDefaultEnrollmentKeyForConfigEffect() {
+ if (!withKeySelection) {
+ return;
+ }
+ if (
+ !selectedState.enrollmentAPIKeyId &&
+ enrollmentAPIKeys.length > 0 &&
+ enrollmentAPIKeys[0].config_id === selectedState.agentConfigId
+ ) {
+ const enrollmentAPIKeyId = enrollmentAPIKeys[0].id;
+ setSelectedState({
+ agentConfigId: selectedState.agentConfigId,
+ enrollmentAPIKeyId,
});
}
- }
- fetchEnrollmentAPIKeys();
- }, [withKeySelection, selectedState.agentConfigId, notifications.toasts]);
-
- // Select first API key when config change
- React.useEffect(() => {
- if (!withKeySelection || !onKeyChange) {
- return;
- }
- if (!selectedState.enrollmentAPIKeyId && enrollmentAPIKeys.length > 0) {
- const enrollmentAPIKeyId = enrollmentAPIKeys[0].id;
- setSelectedState({
- agentConfigId: selectedState.agentConfigId,
- enrollmentAPIKeyId,
- });
- onKeyChange(enrollmentAPIKeyId);
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [enrollmentAPIKeys, selectedState.enrollmentAPIKeyId, selectedState.agentConfigId]);
+ },
+ [
+ withKeySelection,
+ enrollmentAPIKeys,
+ selectedState.enrollmentAPIKeyId,
+ selectedState.agentConfigId,
+ ]
+ );
return (
<>
@@ -174,7 +208,6 @@ export const EnrollmentStepAgentConfig: React.FC = (props) => {
...selectedState,
enrollmentAPIKeyId: e.target.value,
});
- onKeyChange(e.target.value);
}}
/>
>
diff --git a/x-pack/test/ingest_manager_api_integration/apis/package_config/create.ts b/x-pack/test/ingest_manager_api_integration/apis/package_config/create.ts
index 27581550ac2bc..cae4ff79bdef6 100644
--- a/x-pack/test/ingest_manager_api_integration/apis/package_config/create.ts
+++ b/x-pack/test/ingest_manager_api_integration/apis/package_config/create.ts
@@ -18,9 +18,7 @@ export default function ({ getService }: FtrProviderContext) {
// because `this` has to point to the Mocha context
// see https://mochajs.org/#arrow-functions
- // Temporarily skipped to promote snapshot
- // Re-enabled in https://github.com/elastic/kibana/pull/71727
- describe.skip('Package Config - create', async function () {
+ describe('Package Config - create', async function () {
let agentConfigId: string;
before(async function () {
diff --git a/x-pack/test/security_solution_cypress/es_archives/export_rule/data.json.gz b/x-pack/test/security_solution_cypress/es_archives/export_rule/data.json.gz
index 373251d9e4f93..aad07a0bf6d53 100644
Binary files a/x-pack/test/security_solution_cypress/es_archives/export_rule/data.json.gz and b/x-pack/test/security_solution_cypress/es_archives/export_rule/data.json.gz differ