[Logs Explorer] Update Dataset selector actions design (elastic#175676)

## 📓  Summary

As defined in the [Dataset selector design
updates](https://www.figma.com/file/Qa3IdgLicB60qW6eakmn7U/Data-selector?type=design&node-id=3870-238432&mode=design&t=wkKSQKGn0lpNIYWP-4),
this small changes move and redesign the position for the "Show all
logs" and "Try ESQL buttons".

| Before | After |
|---|---|
| <img width="410" alt="before"
src="https://github.com/elastic/kibana/assets/34506779/6a75b864-8766-4e6f-87c3-7d9cd925ea32">
| <img width="413" alt="after"
src="https://github.com/elastic/kibana/assets/34506779/8fd6b53d-cd13-492f-bfc2-b1dc07aaeca1">
|

---------

Co-authored-by: Marco Antonio Ghiani <[email protected]>

x-pack/plugins/observability_solution/logs_explorer/public/components/dataset_selector/dataset_selector.tsx

@@ -25,9 +25,8 @@ import {
 import { useDatasetSelector } from './state_machine/use_dataset_selector';
 import { DatasetsPopover } from './sub_components/datasets_popover';
 import { DataViewsPanelTitle } from './sub_components/data_views_panel_title';
-import { EsqlSelector } from './sub_components/esql_selector';
 import { SearchControls } from './sub_components/search_controls';
-import { SelectorActions } from './sub_components/selector_actions';
+import { ESQLButton, SelectorFooter, ShowAllLogsButton } from './sub_components/selector_footer';
 import { DatasetSelectorProps } from './types';
 import {
   buildIntegrationsTree,
@@ -216,9 +215,6 @@ export function DatasetSelector({
       onClick={togglePopover}
     >
       <Tabs>{tabEntries}</Tabs>
-      <SelectorActions>
-        <SelectorActions.ShowAllLogs isSelected={isAllMode} onClick={selectAllLogDataset} />
-      </SelectorActions>
       <EuiHorizontalRule margin="none" />
       <SearchControls
         key={panelId}
@@ -281,7 +277,11 @@ export function DatasetSelector({
         data-test-subj="dataViewsContextMenu"
         size="s"
       />
-      {isEsqlEnabled && <EsqlSelector {...discoverEsqlUrlProps} />}
+      <EuiHorizontalRule margin="none" />
+      <SelectorFooter>
+        <ShowAllLogsButton isSelected={isAllMode} onClick={selectAllLogDataset} />
+        {isEsqlEnabled && <ESQLButton {...discoverEsqlUrlProps} />}
+      </SelectorFooter>
     </DatasetsPopover>
   );
 }

x-pack/plugins/observability_solution/logs_explorer/public/components/dataset_selector/sub_components/selector_footer.tsx

@@ -0,0 +1,81 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import {
+  EuiBetaBadge,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiListGroupProps,
+  EuiPanel,
+} from '@elastic/eui';
+import { getRouterLinkProps } from '@kbn/router-utils';
+import { DiscoverEsqlUrlProps } from '../../../hooks/use_esql';
+import { createAllLogDatasetsItem } from '../utils';
+import { showAllLogsLabel, tryEsql } from '../constants';
+
+type DatasetsAllActionProps = EuiListGroupProps;
+
+interface ShowAllLogsProps {
+  isSelected: boolean;
+  onClick(): void;
+}
+
+export const SelectorFooter = (props: DatasetsAllActionProps) => {
+  return (
+    <EuiPanel paddingSize="s" hasShadow={false} data-test-subj="datasetSelectorSearchFooter">
+      <EuiFlexGroup justifyContent="spaceBetween" alignItems="center" {...props} />
+    </EuiPanel>
+  );
+};
+
+export const ShowAllLogsButton = ({ isSelected, onClick }: ShowAllLogsProps) => {
+  const allLogs = createAllLogDatasetsItem();
+
+  return (
+    <EuiFlexItem grow={false}>
+      <EuiButtonEmpty
+        data-test-subj={allLogs['data-test-subj']}
+        onClick={onClick}
+        size="s"
+        iconType={isSelected ? 'check' : allLogs.iconType}
+        flush="left"
+      >
+        {showAllLogsLabel}
+      </EuiButtonEmpty>
+    </EuiFlexItem>
+  );
+};
+
+export const ESQLButton = (props: DiscoverEsqlUrlProps) => {
+  const linkProps = getRouterLinkProps(props);
+
+  return (
+    <EuiFlexItem grow={false}>
+      <EuiButton
+        {...linkProps}
+        iconType={() => (
+          <EuiBetaBadge
+            label="ESQL Beta"
+            color="hollow"
+            iconType="beaker"
+            size="s"
+            alignment="middle"
+          />
+        )}
+        iconSide="right"
+        color="success"
+        size="s"
+        data-test-subj="esqlLink"
+      >
+        {tryEsql}
+      </EuiButton>
+    </EuiFlexItem>
+  );
+};