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