diff --git a/src/plugins/ui_actions/public/cell_actions/components/cell_actions.stories.tsx b/src/plugins/ui_actions/public/cell_actions/components/cell_actions.stories.tsx index a738a1a1a0205..dd99ca7618b49 100644 --- a/src/plugins/ui_actions/public/cell_actions/components/cell_actions.stories.tsx +++ b/src/plugins/ui_actions/public/cell_actions/components/cell_actions.stories.tsx @@ -31,7 +31,7 @@ export default { (storyFn: Function) => (
{storyFn()} diff --git a/src/plugins/ui_actions/public/cell_actions/components/cell_actions.test.tsx b/src/plugins/ui_actions/public/cell_actions/components/cell_actions.test.tsx index 917f1cc6b57d9..a9772643d24d8 100644 --- a/src/plugins/ui_actions/public/cell_actions/components/cell_actions.test.tsx +++ b/src/plugins/ui_actions/public/cell_actions/components/cell_actions.test.tsx @@ -20,7 +20,7 @@ describe('CellActions', () => { const getActions = () => getActionsPromise; const { queryByTestId } = render( - + Field value @@ -39,7 +39,7 @@ describe('CellActions', () => { const getActions = () => getActionsPromise; const { queryByTestId } = render( - + Field value @@ -58,7 +58,7 @@ describe('CellActions', () => { const getActions = () => getActionsPromise; const { queryByTestId } = render( - + Field value diff --git a/src/plugins/ui_actions/public/cell_actions/components/cell_actions.tsx b/src/plugins/ui_actions/public/cell_actions/components/cell_actions.tsx index e368a09c29161..5a4590bc21ef2 100644 --- a/src/plugins/ui_actions/public/cell_actions/components/cell_actions.tsx +++ b/src/plugins/ui_actions/public/cell_actions/components/cell_actions.tsx @@ -134,5 +134,3 @@ export const CellActions: React.FC = ({
); }; - -CellActions.displayName = 'CellActions'; diff --git a/src/plugins/ui_actions/public/cell_actions/components/cell_actions_context.test.tsx b/src/plugins/ui_actions/public/cell_actions/components/cell_actions_context.test.tsx index ec725b32de4ba..ceec61e2d7cb9 100644 --- a/src/plugins/ui_actions/public/cell_actions/components/cell_actions_context.test.tsx +++ b/src/plugins/ui_actions/public/cell_actions/components/cell_actions_context.test.tsx @@ -29,7 +29,7 @@ describe('CellActionsContextProvider', () => { { wrapper: ({ children }) => ( - + {children} ), @@ -61,7 +61,7 @@ describe('CellActionsContextProvider', () => { { wrapper: ({ children }) => ( - + {children} ), @@ -86,7 +86,7 @@ describe('CellActionsContextProvider', () => { { wrapper: ({ children }) => ( - + {children} ), @@ -112,7 +112,7 @@ describe('CellActionsContextProvider', () => { { wrapper: ({ children }) => ( - + {children} ), diff --git a/src/plugins/ui_actions/public/cell_actions/components/cell_actions_context.tsx b/src/plugins/ui_actions/public/cell_actions/components/cell_actions_context.tsx index c8d9a06363cec..8d1d2f0f709cf 100644 --- a/src/plugins/ui_actions/public/cell_actions/components/cell_actions_context.tsx +++ b/src/plugins/ui_actions/public/cell_actions/components/cell_actions_context.tsx @@ -7,69 +7,63 @@ */ import { orderBy } from 'lodash/fp'; -import React, { createContext, FC, useContext, useMemo } from 'react'; +import React, { createContext, FC, useCallback, useContext } from 'react'; import useAsync from 'react-use/lib/useAsync'; import useAsyncFn from 'react-use/lib/useAsyncFn'; import type { Action } from '../../actions'; import { CellActionExecutionContext } from './cell_actions'; -type GetActionsType = (trigger: string, context: object) => Promise; +// It must to match `UiActionsService.getTriggerCompatibleActions` +type GetTriggerCompatibleActionsType = (triggerId: string, context: object) => Promise; -const initialContext = { - getCompatibleActions: undefined, -}; +type GetActionsType = (context: CellActionExecutionContext) => Promise; -const CellActionsContext = createContext<{ - getCompatibleActions: GetActionsType | undefined; -}>(initialContext); +const CellActionsContext = createContext<{ getActions: GetActionsType } | null>(null); interface CellActionsContextProviderProps { /** * Please assign `uiActions.getTriggerCompatibleActions` function. * This function should return a list of actions for a triggerId that are compatible with the provided context. */ - getCompatibleActions: GetActionsType; + getTriggerCompatibleActions: GetTriggerCompatibleActionsType; } export const CellActionsContextProvider: FC = ({ children, - getCompatibleActions, + getTriggerCompatibleActions, }) => { - const getSortedCompatibleActions = useMemo(() => { - return (trigger, context) => - getCompatibleActions(trigger, context).then((actions) => + const getSortedCompatibleActions = useCallback( + (context) => + getTriggerCompatibleActions(context.trigger.id, context).then((actions) => orderBy(['order', 'id'], ['asc', 'asc'], actions) - ); - }, [getCompatibleActions]); + ), + [getTriggerCompatibleActions] + ); return ( - + {children} ); }; -const useGetCompatibleActions = () => { +const useCellActions = () => { const context = useContext(CellActionsContext); - if (context.getCompatibleActions === undefined) { - // eslint-disable-next-line no-console - console.error( + if (!context) { + throw new Error( 'No CellActionsContext found. Please wrap the application with CellActionsContextProvider' ); } - return (cellActionContext: CellActionExecutionContext) => - context.getCompatibleActions - ? context.getCompatibleActions(cellActionContext.trigger.id, cellActionContext) - : Promise.resolve([]); + return context; }; export const useLoadActions = (context: CellActionExecutionContext) => { - const getCompatibleActions = useGetCompatibleActions(); - return useAsync(() => getCompatibleActions(context), []); + const { getActions } = useCellActions(); + return useAsync(() => getActions(context), []); }; export const useLoadActionsFn = () => { - const getCompatibleActions = useGetCompatibleActions(); - return useAsyncFn(getCompatibleActions, []); + const { getActions } = useCellActions(); + return useAsyncFn(getActions, []); }; diff --git a/src/plugins/ui_actions/public/cell_actions/components/extra_actions_button.tsx b/src/plugins/ui_actions/public/cell_actions/components/extra_actions_button.tsx index 1a85d791283c5..e70a28e5db4e3 100644 --- a/src/plugins/ui_actions/public/cell_actions/components/extra_actions_button.tsx +++ b/src/plugins/ui_actions/public/cell_actions/components/extra_actions_button.tsx @@ -33,5 +33,3 @@ export const ExtraActionsButton: React.FC = ({ onClick, onClick={onClick} /> ); - -ExtraActionsButton.displayName = 'ExtraActionsButton'; diff --git a/src/plugins/ui_actions/public/cell_actions/components/extra_actions_popover.tsx b/src/plugins/ui_actions/public/cell_actions/components/extra_actions_popover.tsx index ce17a0812eeff..a4e12621f71e4 100644 --- a/src/plugins/ui_actions/public/cell_actions/components/extra_actions_popover.tsx +++ b/src/plugins/ui_actions/public/cell_actions/components/extra_actions_popover.tsx @@ -94,8 +94,6 @@ export const ExtraActionsPopOverWithAnchor = ({ ) : null; }; -ExtraActionsPopOverWithAnchor.displayName = 'ExtraActionsPopOverWithAnchor'; - type ExtraActionsPopOverContentProps = Pick< ActionsPopOverProps, 'actionContext' | 'closePopOver' | 'actions' @@ -133,5 +131,3 @@ const ExtraActionsPopOverContent: React.FC = ({ ); }; - -ExtraActionsPopOverContent.displayName = 'ExtraActionsPopOverContent'; diff --git a/src/plugins/ui_actions/public/cell_actions/components/hover_actions_popover.test.tsx b/src/plugins/ui_actions/public/cell_actions/components/hover_actions_popover.test.tsx index a8f9453541913..53314ecf791f8 100644 --- a/src/plugins/ui_actions/public/cell_actions/components/hover_actions_popover.test.tsx +++ b/src/plugins/ui_actions/public/cell_actions/components/hover_actions_popover.test.tsx @@ -24,7 +24,7 @@ describe('HoverActionsPopover', () => { it('renders', () => { const getActions = () => Promise.resolve([]); const { queryByTestId } = render( - + { const getActions = () => getActionsPromise; const { queryByLabelText, getByTestId } = render( - + { const getActions = () => getActionsPromise; const { queryByLabelText, getByTestId } = render( - + { const getActions = () => getActionsPromise; const { getByTestId } = render( - + { const getActions = () => getActionsPromise; const { getByTestId, getByLabelText } = render( - + { const getActions = () => getActionsPromise; const { getByTestId, queryByLabelText } = render( - + ( ); } ); - -HoverActionsPopover.displayName = 'HoverActionsPopover'; diff --git a/src/plugins/ui_actions/public/cell_actions/components/inline_actions.test.tsx b/src/plugins/ui_actions/public/cell_actions/components/inline_actions.test.tsx index 660ad49f57ecd..9c8fcfc5869bf 100644 --- a/src/plugins/ui_actions/public/cell_actions/components/inline_actions.test.tsx +++ b/src/plugins/ui_actions/public/cell_actions/components/inline_actions.test.tsx @@ -19,7 +19,7 @@ describe('InlineActions', () => { const getActionsPromise = Promise.resolve([]); const getActions = () => getActionsPromise; const { queryByTestId } = render( - + ); @@ -41,7 +41,7 @@ describe('InlineActions', () => { ]); const getActions = () => getActionsPromise; const { queryAllByRole } = render( - + ); diff --git a/src/plugins/ui_actions/public/cell_actions/components/inline_actions.tsx b/src/plugins/ui_actions/public/cell_actions/components/inline_actions.tsx index ef3f8f10d7955..dda0ab00b4b30 100644 --- a/src/plugins/ui_actions/public/cell_actions/components/inline_actions.tsx +++ b/src/plugins/ui_actions/public/cell_actions/components/inline_actions.tsx @@ -60,5 +60,3 @@ export const InlineActions: React.FC = ({ ); }; - -InlineActions.displayName = 'InlineActions';