Final touches to callout/sidebar and conflict fixes

elastic · Jan 28, 2022 · be1f5d5 · be1f5d5
1 parent 9a3fb7a
commit be1f5d5
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 94 deletions.
diff --git a/...cover/public/application/main/components/document_tour_callout/document_tour_callout.scss b/...cover/public/application/main/components/document_tour_callout/document_tour_callout.scss
@@ -2,4 +2,7 @@
   .euiCallOutHeader__title {
     width: 100%;
   }
+  p {
+    margin-bottom: 0.5rem;
+  }
 }
diff --git a/...scover/public/application/main/components/document_tour_callout/document_tour_callout.tsx b/...scover/public/application/main/components/document_tour_callout/document_tour_callout.tsx
@@ -11,9 +11,8 @@ import './document_tour_callout.scss';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiButton, EuiButtonIcon, EuiCallOut, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { getServices } from '../../../../kibana_services';
-import { DOC_TABLE_LEGACY } from '../../../../../common';
 import { Storage } from '../../../../../../kibana_utils/public';
+import { useDiscoverServices } from '../../../../utils/use_discover_services';
 
 const CALLOUT_STATE_KEY = 'discover:docTourCalloutClosed';
 
@@ -26,7 +25,7 @@ const updateStoredCalloutState = (newState: boolean, storage: Storage) => {
 };
 
 export const DocumentTourCallout = ({ onStartTour }: { onStartTour: () => void }) => {
-  const { storage, capabilities, addBasePath } = getServices();
+  const { storage, capabilities } = useDiscoverServices();
   const [calloutClosed, setCalloutClosed] = useState(getStoredCalloutState(storage));
 
   const onCloseCallout = () => {
@@ -47,11 +46,17 @@ export const DocumentTourCallout = ({ onStartTour }: { onStartTour: () => void }
       <p>
         <FormattedMessage
           id="discover.docTourCallout.bodyMessage"
-          defaultMessage="View field details, drag and drop columns, and more in the Document Explorer. Ready for the rundown?"
+          defaultMessage="Quickly sort, select, and compare data, resize columns, and view documents in fullscreen with the Document Explorer."
         />
       </p>
       <p>
-        <EuiButton size="s" onClick={onStartTour}>
+        <EuiButton
+          size="s"
+          onClick={() => {
+            onStartTour();
+            onCloseCallout();
+          }}
+        >
           <FormattedMessage
             id="discover.docTourCallout.tryDocumentTour"
             defaultMessage="Take a tour"

diff --git a/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx b/src/plugins/discover/public/application/main/components/layout/discover_documents.tsx
@@ -179,34 +179,6 @@ function DiscoverDocumentsComponent({
         />
       )}
       {!isLegacy && (
-<<<<<<< HEAD
-        <div className="dscDiscoverGrid">
-          <DataGridMemoized
-            ariaLabelledBy="documentsAriaLabel"
-            columns={columns}
-            expandedDoc={expandedDoc}
-            indexPattern={indexPattern}
-            isLoading={isLoading}
-            rows={rows}
-            sort={(state.sort as SortPairArr[]) || []}
-            sampleSize={sampleSize}
-            searchDescription={savedSearch.description}
-            searchTitle={savedSearch.title}
-            setExpandedDoc={setExpandedDoc}
-            showTimeCol={showTimeCol}
-            settings={state.grid}
-            onAddColumn={onAddColumn}
-            onFilter={onAddFilter as DocViewFilterFn}
-            onRemoveColumn={onRemoveColumn}
-            onSetColumns={onSetColumns}
-            onSort={onSort}
-            onResize={onResize}
-            useNewFieldsApi={useNewFieldsApi}
-            rowHeightState={state.rowHeight}
-            onUpdateRowHeight={onUpdateRowHeight}
-          />
-        </div>
-=======
         <>
           <DocumentTourCallout onStartTour={onStartTour} />
           <div className="dscDiscoverGrid">
@@ -223,7 +195,6 @@ function DiscoverDocumentsComponent({
               searchTitle={savedSearch.title}
               setExpandedDoc={setExpandedDoc}
               showTimeCol={showTimeCol}
-              services={services}
               settings={state.grid}
               onAddColumn={onAddColumn}
               onFilter={onAddFilter as DocViewFilterFn}
@@ -238,7 +209,6 @@ function DiscoverDocumentsComponent({
             />
           </div>
         </>
->>>>>>> Added callout banner that triggers tour.
       )}
     </EuiFlexItem>
   );

diff --git a/src/plugins/discover/public/application/main/components/sidebar/discover_sidebar.tsx b/src/plugins/discover/public/application/main/components/sidebar/discover_sidebar.tsx
@@ -434,6 +434,27 @@ export function DiscoverSidebarComponent({
             />
           </form>
         </EuiFlexItem>
+        <EuiSpacer size="xs" />
+        <EuiPopover
+          anchorPosition="rightDown"
+          display="block"
+          button={callout}
+          isOpen={isPopoverOpen}
+          panelPaddingSize="m"
+          closePopover={closePopover}
+        >
+          <EuiPopoverTitle paddingSize="s">Field types</EuiPopoverTitle>
+          <EuiBasicTable
+            style={{ width: 350 }}
+            tableCaption="Description of field types"
+            items={items}
+            compressed={true}
+            rowHeader="firstName"
+            columns={columnsSidebar}
+          />
+          <EuiSpacer size="s" />
+        </EuiPopover>
+        <EuiSpacer size="xs" />
         <EuiFlexItem className="eui-yScroll">
           <div
             ref={(el) => {
@@ -521,27 +542,6 @@ export function DiscoverSidebarComponent({
                     </EuiNotificationBadge>
                   }
                 >
-                  <EuiSpacer size="xs" />
-                  <EuiPopover
-                    anchorPosition="rightDown"
-                    display="block"
-                    button={callout}
-                    isOpen={isPopoverOpen}
-                    panelPaddingSize="m"
-                    closePopover={closePopover}
-                  >
-                    <EuiPopoverTitle paddingSize="s">Field types</EuiPopoverTitle>
-                    <EuiBasicTable
-                      style={{ width: 350 }}
-                      tableCaption="Description of field types"
-                      items={items}
-                      compressed={true}
-                      rowHeader="firstName"
-                      columns={columnsSidebar}
-                    />
-                    <EuiSpacer size="s" />
-                  </EuiPopover>
-
                   <EuiSpacer size="s" />
                   {popularFields.length > 0 && (
                     <>

diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid.tsx b/src/plugins/discover/public/components/discover_grid/discover_grid.tsx
@@ -176,40 +176,36 @@ export const EuiDataGridMemoized = React.memo((props: EuiDataGridProps) => {
 
 const CONTROL_COLUMN_IDS_DEFAULT = ['openDetails', 'select'];
 
-export const DiscoverGrid = (
-  // tourSteps: EuiTourStepProps[],
-  // tourActions: EuiTourActions,
-  {
-    ariaLabelledBy,
-    columns,
-    indexPattern,
-    isLoading,
-    expandedDoc,
-    onAddColumn,
-    onFilter,
-    onRemoveColumn,
-    onResize,
-    onSetColumns,
-    onSort,
-    rows,
-    sampleSize,
-    searchDescription,
-    searchTitle,
-    services,
-    setExpandedDoc,
-    settings,
-    showTimeCol,
-    sort,
-    useNewFieldsApi,
-    isSortEnabled = true,
-    isPaginationEnabled = true,
-    controlColumnIds = CONTROL_COLUMN_IDS_DEFAULT,
-    className,
-    rowHeightState,
-    onUpdateRowHeight,
-    tour,
-  }: DiscoverGridProps
-) => {
+export const DiscoverGrid = ({
+  ariaLabelledBy,
+  columns,
+  indexPattern,
+  isLoading,
+  expandedDoc,
+  onAddColumn,
+  onFilter,
+  onRemoveColumn,
+  onResize,
+  onSetColumns,
+  onSort,
+  rows,
+  sampleSize,
+  searchDescription,
+  searchTitle,
+  setExpandedDoc,
+  settings,
+  showTimeCol,
+  sort,
+  useNewFieldsApi,
+  isSortEnabled = true,
+  isPaginationEnabled = true,
+  controlColumnIds = CONTROL_COLUMN_IDS_DEFAULT,
+  className,
+  rowHeightState,
+  onUpdateRowHeight,
+  tour,
+}: DiscoverGridProps) => {
+  const services = useDiscoverServices();
   const [selectedDocs, setSelectedDocs] = useState<string[]>([]);
   const [isFilterActive, setIsFilterActive] = useState(false);
 

diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid_expand_button.tsx b/src/plugins/discover/public/components/discover_grid/discover_grid_expand_button.tsx
@@ -13,10 +13,7 @@ import {
   EuiToolTip,
   EuiTourStep,
 } from '@elastic/eui';
-import {
-  euiLightVars as themeLight,
-  euiDarkVars as themeDark,
-} from '@kbn/ui-shared-deps-src/theme';
+import { euiLightVars as themeLight, euiDarkVars as themeDark } from '@kbn/ui-theme';
 import { i18n } from '@kbn/i18n';
 import { DiscoverGridContext } from './discover_grid_context';
 import { EsHitRecord } from '../../application/types';