Merge branch 'main' into mw-scoped-query-api-changes

elastic · Nov 21, 2023 · 52c42f3 · 52c42f3
2 parents eee5cb8 + 5cbc93c
commit 52c42f3
Show file tree

Hide file tree

Showing 14 changed files with 133 additions and 190 deletions.
diff --git a/.buildkite/scripts/steps/storybooks/build_and_upload.ts b/.buildkite/scripts/steps/storybooks/build_and_upload.ts
@@ -16,7 +16,6 @@ const STORYBOOKS = [
   'canvas',
   'cases',
   'cell_actions',
-  'ci_composite',
   'cloud_chat',
   'coloring',
   'chart_icons',
@@ -93,14 +92,12 @@ const upload = () => {
     console.log('--- Generating Storybooks HTML');
 
     process.chdir(path.join('.', 'built_assets', 'storybook'));
-    fs.renameSync('ci_composite', 'composite');
 
     const storybooks = execSync(`ls -1d */`)
       .toString()
       .trim()
       .split('\n')
-      .map((filePath) => filePath.replace('/', ''))
-      .filter((filePath) => filePath !== 'composite');
+      .map((filePath) => filePath.replace('/', ''));
 
     const listHtml = storybooks
       .map((storybook) => `<li><a href="${STORYBOOK_BASE_URL}/${storybook}">${storybook}</a></li>`)
@@ -110,8 +107,6 @@ const upload = () => {
       <html>
         <body>
           <h1>Storybooks</h1>
-          <p><a href="${STORYBOOK_BASE_URL}/composite">Composite Storybook</a></p>
-          <h2>All</h2>
           <ul>
             ${listHtml}
           </ul>

diff --git a/.ci/.storybook/main.js b/.ci/.storybook/main.js
diff --git a/renovate.json b/renovate.json
@@ -462,7 +462,8 @@
         "Team:Operations",
         "release_note:skip"
       ],
-      "enabled": true
+      "enabled": true,
+      "allowedVersions": "<7.0"
     },
     {
       "groupName": "react-query",
@@ -647,4 +648,4 @@
       "enabled": true
     }
   ]
-}
+}
diff --git a/src/dev/storybook/aliases.ts b/src/dev/storybook/aliases.ts
@@ -15,7 +15,6 @@ export const storybookAliases = {
   canvas: 'x-pack/plugins/canvas/storybook',
   cases: 'packages/kbn-cases-components/.storybook',
   cell_actions: 'packages/kbn-cell-actions/.storybook',
-  ci_composite: '.ci/.storybook',
   cloud_chat: 'x-pack/plugins/cloud_integrations/cloud_chat/.storybook',
   coloring: 'packages/kbn-coloring/.storybook',
   language_documentation_popover: 'packages/kbn-language-documentation-popover/.storybook',

diff --git a/src/plugins/links/public/components/dashboard_link/dashboard_link_component.tsx b/src/plugins/links/public/components/dashboard_link/dashboard_link_component.tsx
@@ -7,24 +7,24 @@
  */
 
 import classNames from 'classnames';
-import useAsync from 'react-use/lib/useAsync';
 import React, { useEffect, useMemo, useState } from 'react';
+import useAsync from 'react-use/lib/useAsync';
 import useObservable from 'react-use/lib/useObservable';
 
-import {
-  DashboardDrilldownOptions,
-  DEFAULT_DASHBOARD_DRILLDOWN_OPTIONS,
-} from '@kbn/presentation-util-plugin/public';
 import { EuiButtonEmpty, EuiListGroupItem } from '@elastic/eui';
-import { DashboardContainer } from '@kbn/dashboard-plugin/public/dashboard_container';
 import {
   DashboardLocatorParams,
   getDashboardLocatorParamsFromEmbeddable,
 } from '@kbn/dashboard-plugin/public';
+import { DashboardContainer } from '@kbn/dashboard-plugin/public/dashboard_container';
+import {
+  DashboardDrilldownOptions,
+  DEFAULT_DASHBOARD_DRILLDOWN_OPTIONS,
+} from '@kbn/presentation-util-plugin/public';
 
-import { LINKS_VERTICAL_LAYOUT, LinksLayoutType, Link } from '../../../common/content_management';
+import { Link, LinksLayoutType, LINKS_VERTICAL_LAYOUT } from '../../../common/content_management';
+import { useLinks } from '../links_hooks';
 import { DashboardLinkStrings } from './dashboard_link_strings';
-import { useLinks } from '../../embeddable/links_embeddable';
 import { fetchDashboard } from './dashboard_link_tools';
 
 export const DashboardLinkComponent = ({

diff --git a/src/plugins/links/public/components/editor/links_editor.tsx b/src/plugins/links/public/components/editor/links_editor.tsx
@@ -7,41 +7,42 @@
  */
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import useMountedState from 'react-use/lib/useMountedState';
 
 import {
-  EuiForm,
   EuiBadge,
-  EuiTitle,
   EuiButton,
-  EuiSwitch,
-  EuiFormRow,
-  EuiToolTip,
-  EuiFlexItem,
-  EuiFlexGroup,
-  EuiDroppable,
-  EuiDraggable,
-  EuiFlyoutBody,
   EuiButtonEmpty,
   EuiButtonGroup,
-  EuiFlyoutFooter,
-  EuiFlyoutHeader,
+  EuiButtonGroupOptionProps,
   EuiDragDropContext,
   euiDragDropReorder,
-  EuiButtonGroupOptionProps,
+  EuiDraggable,
+  EuiDroppable,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlyoutHeader,
+  EuiForm,
+  EuiFormRow,
+  EuiSwitch,
+  EuiTitle,
+  EuiToolTip,
 } from '@elastic/eui';
 import { DashboardContainer } from '@kbn/dashboard-plugin/public/dashboard_container';
 
-import { LinksLayoutInfo } from '../../embeddable/types';
 import {
   Link,
   LinksLayoutType,
   LINKS_HORIZONTAL_LAYOUT,
   LINKS_VERTICAL_LAYOUT,
 } from '../../../common/content_management';
+import { memoizedGetOrderedLinkList } from '../../editor/links_editor_tools';
+import { openLinkEditorFlyout } from '../../editor/open_link_editor_flyout';
+import { LinksLayoutInfo } from '../../embeddable/types';
 import { coreServices } from '../../services/kibana_services';
 import { LinksStrings } from '../links_strings';
-import { openLinkEditorFlyout } from '../../editor/open_link_editor_flyout';
-import { memoizedGetOrderedLinkList } from '../../editor/links_editor_tools';
 import { LinksEditorEmptyPrompt } from './links_editor_empty_prompt';
 import { LinksEditorSingleLink } from './links_editor_single_link';
 
@@ -80,6 +81,7 @@ const LinksEditor = ({
   isByReference: boolean;
 }) => {
   const toasts = coreServices.notifications.toasts;
+  const isMounted = useMountedState();
   const editLinkFlyoutRef = useRef<HTMLDivElement>(null);
 
   const [currentLayout, setCurrentLayout] = useState<LinksLayoutType>(
@@ -294,7 +296,9 @@ const LinksEditor = ({
                             });
                           })
                           .finally(() => {
-                            setIsSaving(false);
+                            if (isMounted()) {
+                              setIsSaving(false);
+                            }
                           });
                       } else {
                         onAddToDashboard(orderedLinks, currentLayout);

diff --git a/src/plugins/links/public/components/links_component.tsx b/src/plugins/links/public/components/links_component.tsx
@@ -6,29 +6,28 @@
  * Side Public License, v 1.
  */
 
+import { EuiListGroup, EuiPanel } from '@elastic/eui';
 import React, { useEffect, useMemo } from 'react';
 import useMap from 'react-use/lib/useMap';
-import { EuiListGroup, EuiPanel } from '@elastic/eui';
-import { useLinks } from '../embeddable/links_embeddable';
-import { ExternalLinkComponent } from './external_link/external_link_component';
-import { DashboardLinkComponent } from './dashboard_link/dashboard_link_component';
-import { memoizedGetOrderedLinkList } from '../editor/links_editor_tools';
 import {
   DASHBOARD_LINK_TYPE,
   LINKS_HORIZONTAL_LAYOUT,
   LINKS_VERTICAL_LAYOUT,
 } from '../../common/content_management';
+import { memoizedGetOrderedLinkList } from '../editor/links_editor_tools';
+import { DashboardLinkComponent } from './dashboard_link/dashboard_link_component';
+import { ExternalLinkComponent } from './external_link/external_link_component';
 
 import './links_component.scss';
+import { useLinks, useLinksAttributes } from './links_hooks';
 
 export const LinksComponent = () => {
   const linksEmbeddable = useLinks();
-  const links = linksEmbeddable.select((state) => state.componentState.links);
-  const layout = linksEmbeddable.select((state) => state.componentState.layout);
+  const linksAttributes = useLinksAttributes();
 
   const [linksLoading, { set: setLinkIsLoading }] = useMap(
     Object.fromEntries(
-      (links ?? []).map((link) => {
+      (linksAttributes?.links ?? []).map((link) => {
         return [link.id, true];
       })
     )
@@ -43,12 +42,12 @@ export const LinksComponent = () => {
   }, [linksLoading, linksEmbeddable]);
 
   const orderedLinks = useMemo(() => {
-    if (!links) return [];
-    return memoizedGetOrderedLinkList(links);
-  }, [links]);
+    if (!linksAttributes?.links) return [];
+    return memoizedGetOrderedLinkList(linksAttributes?.links);
+  }, [linksAttributes]);
 
   const linkItems: { [id: string]: { id: string; content: JSX.Element } } = useMemo(() => {
-    return (links ?? []).reduce((prev, currentLink) => {
+    return (linksAttributes?.links ?? []).reduce((prev, currentLink) => {
       return {
         ...prev,
         [currentLink.id]: {
@@ -58,34 +57,34 @@ export const LinksComponent = () => {
               <DashboardLinkComponent
                 key={currentLink.id}
                 link={currentLink}
-                layout={layout ?? LINKS_VERTICAL_LAYOUT}
+                layout={linksAttributes?.layout ?? LINKS_VERTICAL_LAYOUT}
                 onLoading={() => setLinkIsLoading(currentLink.id, true)}
                 onRender={() => setLinkIsLoading(currentLink.id, false)}
               />
             ) : (
               <ExternalLinkComponent
                 key={currentLink.id}
                 link={currentLink}
-                layout={layout ?? LINKS_VERTICAL_LAYOUT}
+                layout={linksAttributes?.layout ?? LINKS_VERTICAL_LAYOUT}
                 onRender={() => setLinkIsLoading(currentLink.id, false)}
               />
             ),
         },
       };
     }, {});
-  }, [links, layout, setLinkIsLoading]);
+  }, [linksAttributes?.links, linksAttributes?.layout, setLinkIsLoading]);
 
   return (
     <EuiPanel
       className={`linksComponent ${
-        layout === LINKS_HORIZONTAL_LAYOUT ? 'eui-xScroll' : 'eui-yScroll'
+        linksAttributes?.layout === LINKS_HORIZONTAL_LAYOUT ? 'eui-xScroll' : 'eui-yScroll'
       }`}
       paddingSize="xs"
       data-test-subj="links--component"
     >
       <EuiListGroup
         maxWidth={false}
-        className={`${layout}LayoutWrapper`}
+        className={`${linksAttributes?.layout ?? LINKS_VERTICAL_LAYOUT}LayoutWrapper`}
         data-test-subj="links--component--listGroup"
       >
         {orderedLinks.map((link) => linkItems[link.id].content)}

diff --git a/src/plugins/links/public/components/links_hooks.tsx b/src/plugins/links/public/components/links_hooks.tsx
@@ -0,0 +1,38 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { useContext, useEffect, useState } from 'react';
+
+import { LinksAttributes } from '../../common/content_management';
+import { LinksContext, LinksEmbeddable } from '../embeddable/links_embeddable';
+
+export const useLinks = (): LinksEmbeddable => {
+  const linksEmbeddable = useContext<LinksEmbeddable | null>(LinksContext);
+  if (linksEmbeddable == null) {
+    throw new Error('useLinks must be used inside LinksContext.');
+  }
+  return linksEmbeddable!;
+};
+
+export const useLinksAttributes = (): LinksAttributes | undefined => {
+  const linksEmbeddable = useLinks();
+  const [attributes, setAttributes] = useState<LinksAttributes | undefined>(
+    linksEmbeddable.attributes
+  );
+
+  useEffect(() => {
+    const attributesSubscription = linksEmbeddable.attributes$.subscribe((newAttributes) => {
+      setAttributes(newAttributes);
+    });
+    return () => {
+      attributesSubscription.unsubscribe();
+    };
+  }, [linksEmbeddable.attributes$]);
+
+  return attributes;
+};