Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[ML] Transforms: Converts management pages to new layout #102648

Merged
merged 3 commits into from
Jun 24, 2021
Merged

[ML] Transforms: Converts management pages to new layout #102648

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
362f8e6
[ML] Transforms: Converts management pages to new layout
peteharverson Jun 18, 2021
3ec6037
[ML] Fix vertical centering of error state in app
peteharverson Jun 23, 2021
da5bb94
Merge branch 'master' into transforms-page-layout
kibanamachine Jun 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 19 additions & 17 deletions x-pack/plugins/transform/public/app/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -35,7 +35,7 @@ export const App: FC<{ history: ScopedHistory }> = ({ history }) => {
title={
<FormattedMessage
id="xpack.transform.app.checkingPrivilegesErrorMessage"
defaultMessage="Error fetching user privileges from the server."
defaultMessage="Error fetching user privileges from the server"
/>
}
error={apiError}
Expand All @@ -44,21 +44,23 @@ export const App: FC<{ history: ScopedHistory }> = ({ history }) => {
}

return (
<div data-test-subj="transformApp">
<Router history={history}>
<Switch>
<Route
path={`/${SECTION_SLUG.CLONE_TRANSFORM}/:transformId`}
component={CloneTransformSection}
/>
<Route
path={`/${SECTION_SLUG.CREATE_TRANSFORM}/:savedObjectId`}
component={CreateTransformSection}
/>
<Route path={`/`} component={TransformManagementSection} />
</Switch>
</Router>
</div>
<EuiFlexGroup justifyContent="spaceAround" data-test-subj="transformApp">
<EuiFlexItem grow={true}>
<Router history={history}>
<Switch>
<Route
path={`/${SECTION_SLUG.CLONE_TRANSFORM}/:transformId`}
component={CloneTransformSection}
/>
<Route
path={`/${SECTION_SLUG.CREATE_TRANSFORM}/:savedObjectId`}
component={CreateTransformSection}
/>
<Route path={`/`} component={TransformManagementSection} />
</Switch>
</Router>
</EuiFlexItem>
</EuiFlexGroup>
);
};

Expand Down
18 changes: 13 additions & 5 deletions x-pack/plugins/transform/public/app/components/section_error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* 2.0.
*/

import { EuiCallOut } from '@elastic/eui';
import { EuiEmptyPrompt, EuiPageContent } from '@elastic/eui';
import React from 'react';

interface Props {
Expand All @@ -23,9 +23,17 @@ export const SectionError: React.FunctionComponent<Props> = ({
const errorMessage = error?.message ?? JSON.stringify(error, null, 2);

return (
<EuiCallOut title={title} color="danger" iconType="alert" {...rest}>
<pre>{errorMessage}</pre>
{actions ? actions : null}
</EuiCallOut>
<EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
<EuiEmptyPrompt
iconType="alert"
title={<h2>{title}</h2>}
body={
<p>
<pre>{errorMessage}</pre>
{actions ? actions : null}
</p>
}
/>
</EuiPageContent>
);
};
44 changes: 24 additions & 20 deletions x-pack/plugins/transform/public/app/lib/authorization/components/with_privileges.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -74,27 +74,31 @@ const MissingClusterPrivileges: FC<MissingClusterPrivilegesProps> = ({
missingPrivileges,
privilegesCount,
}) => (
<EuiPageContent>
<NotAuthorizedSection
title={
<FormattedMessage
id="xpack.transform.app.deniedPrivilegeTitle"
defaultMessage="You're missing cluster privileges"
/>
}
message={
<FormattedMessage
id="xpack.transform.app.deniedPrivilegeDescription"
defaultMessage="To use this section of Transforms, you must have {privilegesCount,
<EuiFlexGroup justifyContent="spaceAround">
<EuiFlexItem grow={false}>
<EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
Comment on lines +77 to +79
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❤️ Thanks for this PR @peteharverson !

QQ: I noticed that this error empty state is not vertically centered (in the screenshot) and my guess is that it has to do with the flex group/item wrapper. Does removing the them get it centered? Otherwise, I'd continue to look at any wrappers between the last .euiPageContentBody provided by the template, and your content.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cchaos I fixed the vertical centering of the error empty state in 3ec6037 and updated the corresponding screenshot in the description.

<NotAuthorizedSection
title={
<FormattedMessage
id="xpack.transform.app.deniedPrivilegeTitle"
defaultMessage="You're missing cluster privileges"
/>
}
message={
<FormattedMessage
id="xpack.transform.app.deniedPrivilegeDescription"
defaultMessage="To use this section of Transforms, you must have {privilegesCount,
plural, one {this cluster privilege} other {these cluster privileges}}: {missingPrivileges}."
values={{
missingPrivileges,
privilegesCount,
}}
values={{
missingPrivileges,
privilegesCount,
}}
/>
}
/>
}
/>
</EuiPageContent>
</EuiPageContent>
</EuiFlexItem>
</EuiFlexGroup>
);

export const PrivilegesWrapper: FC<{ privileges: string | string[] }> = ({
Expand Down
77 changes: 38 additions & 39 deletions x-pack/plugins/transform/public/app/sections/clone_transform/clone_transform_section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -105,37 +102,38 @@ export const CloneTransformSection: FC<Props> = ({ match, location }) => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

const docsLink = (
<EuiButtonEmpty
href={esTransform}
target="_blank"
iconType="help"
data-test-subj="documentationLink"
>
<FormattedMessage
id="xpack.transform.transformsWizard.transformDocsLinkText"
defaultMessage="Transform docs"
/>
</EuiButtonEmpty>
);

return (
<PrivilegesWrapper privileges={APP_CREATE_TRANSFORM_CLUSTER_PRIVILEGES}>
<EuiPageContent data-test-subj="transformPageCloneTransform">
<EuiTitle size="l">
<EuiFlexGroup alignItems="center">
<EuiFlexItem grow={true}>
<h1>
<FormattedMessage
id="xpack.transform.transformsWizard.cloneTransformTitle"
defaultMessage="Clone transform"
/>
</h1>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonEmpty
href={esTransform}
target="_blank"
iconType="help"
data-test-subj="documentationLink"
>
<FormattedMessage
id="xpack.transform.transformsWizard.transformDocsLinkText"
defaultMessage="Transform docs"
/>
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
</EuiTitle>
<EuiPageContentBody>
<EuiSpacer size="l" />
{typeof errorMessage !== 'undefined' && (
<EuiPageHeader
pageTitle={
<FormattedMessage
id="xpack.transform.transformsWizard.cloneTransformTitle"
defaultMessage="Clone transform"
/>
}
rightSideItems={[docsLink]}
bottomBorder
/>

<EuiSpacer size="l" />

<EuiPageContentBody data-test-subj="transformPageCloneTransform">
{typeof errorMessage !== 'undefined' && (
<>
<EuiCallOut
title={i18n.translate('xpack.transform.clone.errorPromptTitle', {
defaultMessage: 'An error occurred getting the transform configuration.',
Expand All @@ -145,12 +143,13 @@ export const CloneTransformSection: FC<Props> = ({ match, location }) => {
>
<pre>{JSON.stringify(errorMessage)}</pre>
</EuiCallOut>
)}
{searchItems !== undefined && isInitialized === true && transformConfig !== undefined && (
<Wizard cloneConfig={transformConfig} searchItems={searchItems} />
)}
</EuiPageContentBody>
</EuiPageContent>
<EuiSpacer size="l" />
</>
)}
{searchItems !== undefined && isInitialized === true && transformConfig !== undefined && (
<Wizard cloneConfig={transformConfig} searchItems={searchItems} />
)}
</EuiPageContentBody>
</PrivilegesWrapper>
);
};
73 changes: 36 additions & 37 deletions x-pack/plugins/transform/public/app/sections/create_transform/create_transform_section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -42,42 +39,44 @@ export const CreateTransformSection: FC<Props> = ({ match }) => {

const { error: searchItemsError, searchItems } = useSearchItems(match.params.savedObjectId);

const docsLink = (
<EuiButtonEmpty
href={esTransform}
target="_blank"
iconType="help"
data-test-subj="documentationLink"
>
<FormattedMessage
id="xpack.transform.transformsWizard.transformDocsLinkText"
defaultMessage="Transform docs"
/>
</EuiButtonEmpty>
);

return (
<PrivilegesWrapper privileges={APP_CREATE_TRANSFORM_CLUSTER_PRIVILEGES}>
<EuiPageContent data-test-subj="transformPageCreateTransform">
<EuiTitle size="l">
<EuiFlexGroup alignItems="center">
<EuiFlexItem grow={true}>
<h1>
<FormattedMessage
id="xpack.transform.transformsWizard.createTransformTitle"
defaultMessage="Create transform"
/>
</h1>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonEmpty
href={esTransform}
target="_blank"
iconType="help"
data-test-subj="documentationLink"
>
<FormattedMessage
id="xpack.transform.transformsWizard.transformDocsLinkText"
defaultMessage="Transform docs"
/>
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
</EuiTitle>
<EuiPageContentBody>
<EuiSpacer size="l" />
{searchItemsError !== undefined && (
<EuiPageHeader
pageTitle={
<FormattedMessage
id="xpack.transform.transformsWizard.createTransformTitle"
defaultMessage="Create transform"
/>
}
rightSideItems={[docsLink]}
bottomBorder
/>

<EuiSpacer size="l" />

<EuiPageContentBody data-test-subj="transformPageCreateTransform">
{searchItemsError !== undefined && (
<>
<EuiCallOut title={searchItemsError} color="danger" iconType="alert" />
)}
{searchItems !== undefined && <Wizard searchItems={searchItems} />}
</EuiPageContentBody>
</EuiPageContent>
<EuiSpacer size="l" />
</>
)}
{searchItems !== undefined && <Wizard searchItems={searchItems} />}
</EuiPageContentBody>
</PrivilegesWrapper>
);
};
Loading