diff --git a/x-pack/plugins/transform/public/app/app.tsx b/x-pack/plugins/transform/public/app/app.tsx index d4936783a0297..9219f29e4d9f0 100644 --- a/x-pack/plugins/transform/public/app/app.tsx +++ b/x-pack/plugins/transform/public/app/app.tsx @@ -10,7 +10,7 @@ import { render, unmountComponentAtNode } from 'react-dom'; import { Router, Route, Switch } from 'react-router-dom'; import { ScopedHistory } from 'kibana/public'; -import { EuiErrorBoundary } from '@elastic/eui'; +import { EuiErrorBoundary, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; @@ -35,7 +35,7 @@ export const App: FC<{ history: ScopedHistory }> = ({ history }) => { title={ } error={apiError} @@ -44,21 +44,23 @@ export const App: FC<{ history: ScopedHistory }> = ({ history }) => { } return ( -
- - - - - - - -
+ + + + + + + + + + + ); }; diff --git a/x-pack/plugins/transform/public/app/components/section_error.tsx b/x-pack/plugins/transform/public/app/components/section_error.tsx index 2af0c19fb8817..964c13d775d4b 100644 --- a/x-pack/plugins/transform/public/app/components/section_error.tsx +++ b/x-pack/plugins/transform/public/app/components/section_error.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import { EuiCallOut } from '@elastic/eui'; +import { EuiEmptyPrompt, EuiPageContent } from '@elastic/eui'; import React from 'react'; interface Props { @@ -23,9 +23,17 @@ export const SectionError: React.FunctionComponent = ({ const errorMessage = error?.message ?? JSON.stringify(error, null, 2); return ( - -
{errorMessage}
- {actions ? actions : null} -
+ + {title}} + body={ +

+

{errorMessage}
+ {actions ? actions : null} +

+ } + /> +
); }; diff --git a/x-pack/plugins/transform/public/app/lib/authorization/components/with_privileges.tsx b/x-pack/plugins/transform/public/app/lib/authorization/components/with_privileges.tsx index ef009e6a125e7..cdf4407b4233f 100644 --- a/x-pack/plugins/transform/public/app/lib/authorization/components/with_privileges.tsx +++ b/x-pack/plugins/transform/public/app/lib/authorization/components/with_privileges.tsx @@ -7,7 +7,7 @@ import React, { useContext, FC } from 'react'; -import { EuiPageContent } from '@elastic/eui'; +import { EuiFlexItem, EuiFlexGroup, EuiPageContent } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; @@ -74,27 +74,31 @@ const MissingClusterPrivileges: FC = ({ missingPrivileges, privilegesCount, }) => ( - - - } - message={ - + + + + } + message={ + + } /> - } - /> - + + + ); export const PrivilegesWrapper: FC<{ privileges: string | string[] }> = ({ diff --git a/x-pack/plugins/transform/public/app/sections/clone_transform/clone_transform_section.tsx b/x-pack/plugins/transform/public/app/sections/clone_transform/clone_transform_section.tsx index e4ecc0418d782..8aecf403186c5 100644 --- a/x-pack/plugins/transform/public/app/sections/clone_transform/clone_transform_section.tsx +++ b/x-pack/plugins/transform/public/app/sections/clone_transform/clone_transform_section.tsx @@ -15,12 +15,9 @@ import { i18n } from '@kbn/i18n'; import { EuiButtonEmpty, EuiCallOut, - EuiFlexGroup, - EuiFlexItem, - EuiPageContent, EuiPageContentBody, + EuiPageHeader, EuiSpacer, - EuiTitle, } from '@elastic/eui'; import { APP_CREATE_TRANSFORM_CLUSTER_PRIVILEGES } from '../../../../common/constants'; @@ -105,37 +102,38 @@ export const CloneTransformSection: FC = ({ match, location }) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, []); + const docsLink = ( + + + + ); + return ( - - - - -

- -

-
- - - - - -
-
- - - {typeof errorMessage !== 'undefined' && ( + + } + rightSideItems={[docsLink]} + bottomBorder + /> + + + + + {typeof errorMessage !== 'undefined' && ( + <> = ({ match, location }) => { >
{JSON.stringify(errorMessage)}
- )} - {searchItems !== undefined && isInitialized === true && transformConfig !== undefined && ( - - )} -
-
+ + + )} + {searchItems !== undefined && isInitialized === true && transformConfig !== undefined && ( + + )} +
); }; diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/create_transform_section.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/create_transform_section.tsx index b88eb8ce48601..d736bd60f2df6 100644 --- a/x-pack/plugins/transform/public/app/sections/create_transform/create_transform_section.tsx +++ b/x-pack/plugins/transform/public/app/sections/create_transform/create_transform_section.tsx @@ -13,12 +13,9 @@ import { FormattedMessage } from '@kbn/i18n/react'; import { EuiButtonEmpty, EuiCallOut, - EuiFlexGroup, - EuiFlexItem, - EuiPageContent, EuiPageContentBody, + EuiPageHeader, EuiSpacer, - EuiTitle, } from '@elastic/eui'; import { APP_CREATE_TRANSFORM_CLUSTER_PRIVILEGES } from '../../../../common/constants'; @@ -42,42 +39,44 @@ export const CreateTransformSection: FC = ({ match }) => { const { error: searchItemsError, searchItems } = useSearchItems(match.params.savedObjectId); + const docsLink = ( + + + + ); + return ( - - - - -

- -

-
- - - - - -
-
- - - {searchItemsError !== undefined && ( + + } + rightSideItems={[docsLink]} + bottomBorder + /> + + + + + {searchItemsError !== undefined && ( + <> - )} - {searchItems !== undefined && } - -
+ + + )} + {searchItems !== undefined && } +
); }; diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/__snapshots__/transform_list.test.tsx.snap b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/__snapshots__/transform_list.test.tsx.snap index e2de4c0ea1f6c..cf80421711355 100644 --- a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/__snapshots__/transform_list.test.tsx.snap +++ b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/__snapshots__/transform_list.test.tsx.snap @@ -1,23 +1,42 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Transform: Transform List Minimal initialization 1`] = ` - - Create your first transform - , - ] - } - data-test-subj="transformNoTransformsFound" - title={ -

- No transforms found -

- } -/> + + + + + + Create your first transform + , + ] + } + data-test-subj="transformNoTransformsFound" + title={ +

+ No transforms found +

+ } + /> +
+
+
`; diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_list.tsx b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_list.tsx index bacf8f9deccae..ab30f4793a315 100644 --- a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_list.tsx +++ b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_list.tsx @@ -10,12 +10,15 @@ import React, { MouseEventHandler, FC, useContext, useState } from 'react'; import { i18n } from '@kbn/i18n'; import { + EuiButton, EuiButtonEmpty, EuiButtonIcon, EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, + EuiPageContent, EuiPopover, + EuiSpacer, EuiTitle, EuiInMemoryTable, EuiSearchBarProps, @@ -135,27 +138,36 @@ export const TransformList: FC = ({ if (transforms.length === 0) { return ( - - {i18n.translate('xpack.transform.list.emptyPromptTitle', { - defaultMessage: 'No transforms found', - })} - - } - actions={[ - - {i18n.translate('xpack.transform.list.emptyPromptButtonText', { - defaultMessage: 'Create your first transform', - })} - , - ]} - data-test-subj="transformNoTransformsFound" - /> + + + + + + {i18n.translate('xpack.transform.list.emptyPromptTitle', { + defaultMessage: 'No transforms found', + })} + + } + actions={[ + + {i18n.translate('xpack.transform.list.emptyPromptButtonText', { + defaultMessage: 'Create your first transform', + })} + , + ]} + data-test-subj="transformNoTransformsFound" + /> + + + ); } diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/transform_management_section.tsx b/x-pack/plugins/transform/public/app/sections/transform_management/transform_management_section.tsx index cc4c502f21eb5..2479d34f1579a 100644 --- a/x-pack/plugins/transform/public/app/sections/transform_management/transform_management_section.tsx +++ b/x-pack/plugins/transform/public/app/sections/transform_management/transform_management_section.tsx @@ -5,23 +5,21 @@ * 2.0. */ -import React, { FC, Fragment, useEffect, useState } from 'react'; +import React, { FC, useEffect, useState } from 'react'; -import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiButtonEmpty, - EuiCallOut, + EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiLoadingContent, EuiModal, EuiPageContent, EuiPageContentBody, + EuiPageHeader, EuiSpacer, - EuiText, - EuiTitle, } from '@elastic/eui'; import { APP_GET_TRANSFORM_CLUSTER_PRIVILEGES } from '../../../../common/constants'; @@ -77,73 +75,91 @@ export const TransformManagement: FC = () => { setSavedObjectId(id); }; + const docsLink = ( + + + + ); + return ( - - - - - -

- -

-
- - - - - -
-
- - - + <> + - - - - - {!isInitialized && } - {isInitialized && ( - <> - - - {typeof errorMessage !== 'undefined' && ( - -
{JSON.stringify(errorMessage)}
-
- )} - {typeof errorMessage === 'undefined' && ( - - )} - - )} -
-
+ + } + description={ + + } + rightSideItems={[docsLink]} + bottomBorder + /> + + + + + {!isInitialized && } + {isInitialized && ( + <> + + + {typeof errorMessage !== 'undefined' && ( + + + + + + + + } + body={ +

+

{JSON.stringify(errorMessage)}
+

+ } + actions={[]} + /> +
+
+
+ )} + {typeof errorMessage === 'undefined' && ( + + )} + + )} +
+ {isSearchSelectionVisible && ( { )} -
+ ); };