Revert "[RAC] [SECURIT SOLUTIUONS] Remove drag drop security solutions (

#106721)"

This reverts commit 3f14abb.

x-pack/plugins/security_solution/cypress/integration/timelines/data_providers.spec.ts

@@ -44,7 +44,7 @@ describe('timeline data providers', () => {
     closeTimeline();
   });
 
-  it.skip('renders the data provider of a host dragged from the All Hosts widget on the hosts page', () => {
+  it('renders the data provider of a host dragged from the All Hosts widget on the hosts page', () => {
     dragAndDropFirstHostToTimeline();
     openTimelineUsingToggle();
     cy.get(`${TIMELINE_FLYOUT} ${TIMELINE_DROPPED_DATA_PROVIDERS}`)
@@ -78,7 +78,7 @@ describe('timeline data providers', () => {
     });
   });
 
-  it.skip('sets correct classes when the user starts dragging a host, but is not hovering over the data providers', () => {
+  it('sets correct classes when the user starts dragging a host, but is not hovering over the data providers', () => {
     dragFirstHostToTimeline();
 
     cy.get(IS_DRAGGING_DATA_PROVIDERS)
@@ -87,7 +87,7 @@ describe('timeline data providers', () => {
       .should('have.class', 'drop-target-data-providers');
   });
 
-  it.skip('render an extra highlighted area in dataProvider when the user starts dragging a host AND is hovering over the data providers', () => {
+  it('render an extra highlighted area in dataProvider when the user starts dragging a host AND is hovering over the data providers', () => {
     dragFirstHostToEmptyTimelineDataProviders();
 
     cy.get(IS_DRAGGING_DATA_PROVIDERS)

x-pack/plugins/security_solution/cypress/integration/timelines/flyout_button.spec.ts

@@ -79,7 +79,7 @@ describe('timeline flyout button', () => {
     closeTimelineUsingCloseButton();
   });
 
-  it.skip('sets correct classes when the user starts dragging a host, but is not hovering over the data providers', () => {
+  it('sets correct classes when the user starts dragging a host, but is not hovering over the data providers', () => {
     dragFirstHostToTimeline();
 
     cy.get(IS_DRAGGING_DATA_PROVIDERS)

x-pack/plugins/security_solution/cypress/screens/hosts/all_hosts.ts

@@ -7,6 +7,6 @@
 
 export const ALL_HOSTS_TABLE = '[data-test-subj="table-allHosts-loading-false"]';
 
-export const HOSTS_NAMES = '[data-test-subj="render-content-host.name"] a.euiLink';
+export const HOSTS_NAMES = '[data-test-subj="draggable-content-host.name"] a.euiLink';
 
-export const HOSTS_NAMES_DRAGGABLE = '[data-test-subj="render-content-host.name"]';
+export const HOSTS_NAMES_DRAGGABLE = '[data-test-subj="draggable-content-host.name"]';

x-pack/plugins/security_solution/cypress/screens/hosts/uncommon_processes.ts

@@ -5,6 +5,6 @@
  * 2.0.
  */
 
-export const PROCESS_NAME_FIELD = '[data-test-subj="render-content-process.name"]';
+export const PROCESS_NAME_FIELD = '[data-test-subj="draggable-content-process.name"]';
 
 export const UNCOMMON_PROCESSES_TABLE = '[data-test-subj="table-uncommonProcesses-loading-false"]';

x-pack/plugins/security_solution/public/common/components/charts/barchart.test.tsx

@@ -340,9 +340,13 @@ describe.each(chartDataSets)('BarChart with stackByField', () => {
       const dataProviderId = `draggableId.content.draggable-legend-item-uuid_v4()-${escapeDataProviderId(
         stackByField
       )}-${escapeDataProviderId(datum.key)}`;
-      expect(wrapper.find(`div[data-provider-id="${dataProviderId}"]`).first().text()).toEqual(
-        datum.key
-      );
+
+      expect(
+        wrapper
+          .find(`[draggableId="${dataProviderId}"] [data-test-subj="providerContainer"]`)
+          .first()
+          .text()
+      ).toEqual(datum.key);
     });
   });
 });

x-pack/plugins/security_solution/public/common/components/charts/draggable_legend_item.tsx

@@ -46,7 +46,6 @@ const DraggableLegendItemComponent: React.FC<{
               data-test-subj={`legend-item-${dataProviderId}`}
               field={field}
               id={dataProviderId}
-              isDraggable={false}
               timelineId={timelineId}
               value={value}
             />

x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.test.tsx

@@ -42,11 +42,7 @@ describe('DraggableWrapper', () => {
       const wrapper = shallow(
         <TestProviders>
           <DragDropContextWrapper browserFields={mockBrowserFields}>
-            <DraggableWrapper
-              dataProvider={dataProvider}
-              isDraggable={true}
-              render={() => message}
-            />
+            <DraggableWrapper dataProvider={dataProvider} render={() => message} />
           </DragDropContextWrapper>
         </TestProviders>
       );
@@ -58,11 +54,7 @@ describe('DraggableWrapper', () => {
       const wrapper = mount(
         <TestProviders>
           <DragDropContextWrapper browserFields={mockBrowserFields}>
-            <DraggableWrapper
-              dataProvider={dataProvider}
-              isDraggable={true}
-              render={() => message}
-            />
+            <DraggableWrapper dataProvider={dataProvider} render={() => message} />
           </DragDropContextWrapper>
         </TestProviders>
       );
@@ -74,27 +66,19 @@ describe('DraggableWrapper', () => {
       const wrapper = mount(
         <TestProviders>
           <DragDropContextWrapper browserFields={mockBrowserFields}>
-            <DraggableWrapper
-              dataProvider={dataProvider}
-              isDraggable={true}
-              render={() => message}
-            />
+            <DraggableWrapper dataProvider={dataProvider} render={() => message} />
           </DragDropContextWrapper>
         </TestProviders>
       );
 
-      expect(wrapper.find('[data-test-subj="hover-actions-copy-button"]').exists()).toBe(false);
+      expect(wrapper.find('[data-test-subj="copy-to-clipboard"]').exists()).toBe(false);
     });
 
     test('it renders hover actions when the mouse is over the text of draggable wrapper', async () => {
       const wrapper = mount(
         <TestProviders>
           <DragDropContextWrapper browserFields={mockBrowserFields}>
-            <DraggableWrapper
-              dataProvider={dataProvider}
-              isDraggable={true}
-              render={() => message}
-            />
+            <DraggableWrapper dataProvider={dataProvider} render={() => message} />
           </DragDropContextWrapper>
         </TestProviders>
       );
@@ -104,7 +88,7 @@ describe('DraggableWrapper', () => {
         wrapper.update();
         jest.runAllTimers();
         wrapper.update();
-        expect(wrapper.find('[data-test-subj="hover-actions-copy-button"]').exists()).toBe(true);
+        expect(wrapper.find('[data-test-subj="copy-to-clipboard"]').exists()).toBe(true);
       });
     });
   });
@@ -114,12 +98,7 @@ describe('DraggableWrapper', () => {
       const wrapper = mount(
         <TestProviders>
           <DragDropContextWrapper browserFields={mockBrowserFields}>
-            <DraggableWrapper
-              dataProvider={dataProvider}
-              isDraggable={true}
-              render={() => message}
-              truncate
-            />
+            <DraggableWrapper dataProvider={dataProvider} render={() => message} truncate />
           </DragDropContextWrapper>
         </TestProviders>
       );
@@ -133,11 +112,7 @@ describe('DraggableWrapper', () => {
       const wrapper = mount(
         <TestProviders>
           <DragDropContextWrapper browserFields={mockBrowserFields}>
-            <DraggableWrapper
-              dataProvider={dataProvider}
-              isDraggable={true}
-              render={() => message}
-            />
+            <DraggableWrapper dataProvider={dataProvider} render={() => message} />
           </DragDropContextWrapper>
         </TestProviders>
       );