diff --git a/src/plugins/wizard/public/application/components/workspace.scss b/src/plugins/wizard/public/application/components/workspace.scss index 58bcd6f1e7cc..0a4465c0e692 100644 --- a/src/plugins/wizard/public/application/components/workspace.scss +++ b/src/plugins/wizard/public/application/components/workspace.scss @@ -1,5 +1,6 @@ .wizWorkspace { display: grid; + -ms-grid-rows: auto $euiSizeM 1fr; grid-template-rows: auto 1fr; grid-area: workspace; grid-gap: $euiSizeM; @@ -9,4 +10,27 @@ &__empty { height: 100%; } + + &__container { + position: relative; + } + + &__handFieldSvg { + animation-name: dragAndDropAnimation; + animation-direction: alternate-reverse; + animation-duration: 1.5s; + animation-iteration-count: infinite; + position: absolute; + top: 43%; + } +} + +@keyframes dragAndDropAnimation { + 0% { + transform: translate(65%, 0); + } + + 100% { + transform: none; + } } diff --git a/src/plugins/wizard/public/application/components/workspace.tsx b/src/plugins/wizard/public/application/components/workspace.tsx index 0ce78eba9074..4d30dbb76463 100644 --- a/src/plugins/wizard/public/application/components/workspace.tsx +++ b/src/plugins/wizard/public/application/components/workspace.tsx @@ -14,7 +14,7 @@ import { EuiPanel, EuiPopover, } from '@elastic/eui'; -import React, { FC, useState, useMemo, useEffect } from 'react'; +import React, { FC, useState, useMemo, useEffect, Fragment } from 'react'; import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public'; import { WizardServices } from '../../types'; import { validateSchemaState } from '../utils/validate_schema_state'; @@ -22,6 +22,9 @@ import { useTypedDispatch, useTypedSelector } from '../utils/state_management'; import { setActiveVisualization } from '../utils/state_management/visualization_slice'; import { useVisualizationType } from '../utils/use'; +import hand_field from '../../assets/hand_field.svg'; +import fields_bg from '../../assets/fields_bg.svg'; + import './workspace.scss'; export const Workspace: FC = ({ children }) => { @@ -67,9 +70,20 @@ export const Workspace: FC = ({ children }) => { ) : ( Welcome to the wizard!} - body={

Drag some fields onto the panel to visualize some data.

} + title={

Drop some fields here to start

} + body={ + +

Drag a field directly to the canvas or axis to generate a visualization.

+ + + + + + } /> )} diff --git a/src/plugins/wizard/public/assets/fields_bg.svg b/src/plugins/wizard/public/assets/fields_bg.svg new file mode 100644 index 000000000000..b319b6937406 --- /dev/null +++ b/src/plugins/wizard/public/assets/fields_bg.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/plugins/wizard/public/assets/hand_field.svg b/src/plugins/wizard/public/assets/hand_field.svg new file mode 100644 index 000000000000..753a3af354c0 --- /dev/null +++ b/src/plugins/wizard/public/assets/hand_field.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +