Move shared hooks and components to Observability Shared (#157849)

x-pack/plugins/observability_shared/kibana.jsonc

@@ -9,7 +9,7 @@
     "configPath": ["xpack", "observability_shared"],
     "requiredPlugins": ["cases", "guidedOnboarding", "uiActions"],
     "optionalPlugins": [],
-    "requiredBundles": ["data", "inspector", "kibanaReact"],
+    "requiredBundles": ["data", "inspector", "kibanaReact", "kibanaUtils"],
     "extraPublicDirs": ["common"]
   }
 }

x-pack/plugins/observability_shared/public/components/action_menu/action_menu.tsx

@@ -0,0 +1,19 @@
+/*
+ * 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 { EuiPopover, EuiHorizontalRule, EuiPopoverProps } from '@elastic/eui';
+import React, { HTMLAttributes } from 'react';
+
+type Props = EuiPopoverProps & HTMLAttributes<HTMLDivElement>;
+
+export function ActionMenuDivider() {
+  return <EuiHorizontalRule margin={'s'} />;
+}
+
+export function ActionMenu(props: Props) {
+  return <EuiPopover {...props} ownFocus={true} />;
+}

x-pack/plugins/observability_shared/public/components/load_when_in_view/get_load_when_in_view_lazy.tsx

@@ -0,0 +1,20 @@
+/*
+ * 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, { lazy, Suspense } from 'react';
+import { EuiLoadingSpinner } from '@elastic/eui';
+import { LoadWhenInViewProps } from './load_when_in_view';
+
+const LoadWhenInViewLazy = lazy(() => import('./load_when_in_view'));
+
+export function LoadWhenInView(props: LoadWhenInViewProps) {
+  return (
+    <Suspense fallback={<EuiLoadingSpinner />}>
+      <LoadWhenInViewLazy {...props} />
+    </Suspense>
+  );
+}

x-pack/plugins/observability_shared/public/components/load_when_in_view/load_when_in_view.tsx

@@ -0,0 +1,52 @@
+/*
+ * 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, { useEffect, useState } from 'react';
+import { EuiSkeletonRectangle } from '@elastic/eui';
+import useIntersection from 'react-use/lib/useIntersection';
+
+export interface LoadWhenInViewProps {
+  children: JSX.Element;
+  initialHeight?: string | number;
+  placeholderTitle: string;
+}
+
+// eslint-disable-next-line import/no-default-export
+export default function LoadWhenInView({
+  children,
+  placeholderTitle,
+  initialHeight = 100,
+}: LoadWhenInViewProps) {
+  const intersectionRef = React.useRef(null);
+  const intersection = useIntersection(intersectionRef, {
+    root: null,
+    rootMargin: '0px',
+    threshold: 0.25,
+  });
+
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    if (intersection && intersection.intersectionRatio > 0.25) {
+      setIsVisible(true);
+    }
+  }, [intersection, intersection?.intersectionRatio]);
+
+  return isVisible ? (
+    children
+  ) : (
+    <div
+      data-test-subj="renderOnlyInViewPlaceholderContainer"
+      ref={intersectionRef}
+      role="region"
+      aria-label={placeholderTitle}
+      style={{ height: initialHeight }}
+    >
+      <EuiSkeletonRectangle />
+    </div>
+  );
+}

x-pack/plugins/observability_shared/public/components/navigation_warning_prompt/context.tsx

@@ -0,0 +1,32 @@
+/*
+ * 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, { useState, PropsWithChildren } from 'react';
+import { createContext, useContext } from 'react';
+
+interface ContextValues {
+  prompt?: string;
+  setPrompt: (prompt: string | undefined) => void;
+}
+
+export const NavigationWarningPromptContext = createContext<ContextValues>({
+  setPrompt: (prompt: string | undefined) => {},
+});
+
+export const useNavigationWarningPrompt = () => {
+  return useContext(NavigationWarningPromptContext);
+};
+
+export function NavigationWarningPromptProvider({ children }: PropsWithChildren<{}>) {
+  const [prompt, setPrompt] = useState<string | undefined>(undefined);
+
+  return (
+    <NavigationWarningPromptContext.Provider value={{ prompt, setPrompt }}>
+      {children}
+    </NavigationWarningPromptContext.Provider>
+  );
+}

x-pack/plugins/observability_shared/public/components/navigation_warning_prompt/index.ts

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export * from './context';
+export * from './prompt';

x-pack/plugins/observability_shared/public/components/navigation_warning_prompt/prompt.tsx

@@ -0,0 +1,26 @@
+/*
+ * 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, { useEffect } from 'react';
+import { useNavigationWarningPrompt } from './context';
+
+interface Props {
+  prompt?: string;
+}
+
+export const Prompt: React.FC<Props> = ({ prompt }) => {
+  const { setPrompt } = useNavigationWarningPrompt();
+
+  useEffect(() => {
+    setPrompt(prompt);
+    return () => {
+      setPrompt(undefined);
+    };
+  }, [prompt, setPrompt]);
+
+  return null;
+};

x-pack/plugins/observability_shared/public/components/section/section.tsx

@@ -0,0 +1,63 @@
+/*
+ * 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 {
+  EuiText,
+  EuiListGroup,
+  EuiSpacer,
+  EuiListGroupItem,
+  EuiListGroupItemProps,
+} from '@elastic/eui';
+import React, { ReactNode } from 'react';
+import styled from 'styled-components';
+import { EuiListGroupProps } from '@elastic/eui';
+
+export function SectionTitle({ children }: { children?: ReactNode }) {
+  return (
+    <>
+      <EuiText size={'s'} grow={false}>
+        <h5>{children}</h5>
+      </EuiText>
+      <EuiSpacer size={'xs'} />
+    </>
+  );
+}
+
+export function SectionSubtitle({ children }: { children?: ReactNode }) {
+  return (
+    <>
+      <EuiText size={'xs'} color={'subdued'} grow={false}>
+        <small>{children}</small>
+      </EuiText>
+      <EuiSpacer size={'s'} />
+    </>
+  );
+}
+
+export function SectionLinks({ children, ...props }: { children?: ReactNode } & EuiListGroupProps) {
+  return (
+    <EuiListGroup {...props} flush={true} bordered={false}>
+      {children}
+    </EuiListGroup>
+  );
+}
+
+export function SectionSpacer() {
+  return <EuiSpacer size={'l'} />;
+}
+
+export const Section = styled.div`
+  margin-bottom: 16px;
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+`;
+
+export type SectionLinkProps = EuiListGroupItemProps;
+export function SectionLink(props: SectionLinkProps) {
+  return <EuiListGroupItem style={{ padding: 0 }} size={'xs'} {...props} />;
+}

x-pack/plugins/observability_shared/public/hooks/use_chart_theme.tsx

@@ -0,0 +1,42 @@
+/*
+ * 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 { PartialTheme } from '@elastic/charts';
+import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme';
+import { useMemo } from 'react';
+import { useTheme } from './use_theme';
+
+export function useChartTheme(): PartialTheme[] {
+  const theme = useTheme();
+  const baseChartTheme = theme.darkMode
+    ? EUI_CHARTS_THEME_DARK.theme
+    : EUI_CHARTS_THEME_LIGHT.theme;
+
+  return useMemo(
+    () => [
+      {
+        chartMargins: {
+          left: 10,
+          right: 10,
+          top: 35,
+          bottom: 10,
+        },
+        background: {
+          color: 'transparent',
+        },
+        lineSeriesStyle: {
+          point: { visible: false },
+        },
+        areaSeriesStyle: {
+          point: { visible: false },
+        },
+      },
+      baseChartTheme,
+    ],
+    [baseChartTheme]
+  );
+}

x-pack/plugins/observability_shared/public/hooks/use_kibana_ui_settings.ts

@@ -0,0 +1,21 @@
+/*
+ * 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 { UI_SETTINGS } from '@kbn/data-plugin/public';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+
+export { UI_SETTINGS };
+
+type SettingKeys = keyof typeof UI_SETTINGS;
+type SettingValues = typeof UI_SETTINGS[SettingKeys];
+
+export function useKibanaUISettings<T>(key: SettingValues): T {
+  const {
+    services: { uiSettings },
+  } = useKibana();
+  return uiSettings!.get<T>(key);
+}