[D&D] Empty-workspace polish (opensearch-project#1900)

* empty workspace polish

Signed-off-by: kaddy645 <xdeskart@amazon.com>

* pr update

Signed-off-by: kaddy645 <xdeskart@amazon.com>

* pr update 2

Signed-off-by: kaddy645 <xdeskart@amazon.com>

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;
+  }
 }

src/plugins/wizard/public/application/components/workspace.tsx

@@ -14,14 +14,17 @@ 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';
 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 }) => {
         ) : (
           <EuiFlexItem className="wizWorkspace__empty">
             <EuiEmptyPrompt
-              iconType="visBarVertical"
-              title={<h2>Welcome to the wizard!</h2>}
-              body={<p>Drag some fields onto the panel to visualize some data.</p>}
+              title={<h2>Drop some fields here to start</h2>}
+              body={
+                <Fragment>
+                  <p>Drag a field directly to the canvas or axis to generate a visualization.</p>
+                  <span className="wizWorkspace__container">
+                    <EuiIcon className="wizWorkspace__fieldSvg" type={fields_bg} size="original" />
+                    <EuiIcon
+                      className="wizWorkspace__handFieldSvg"
+                      type={hand_field}
+                      size="original"
+                    />
+                  </span>
+                </Fragment>
+              }
             />
           </EuiFlexItem>
         )}