Skip to content

Commit

Permalink
[Remote clusters] Fix empty states (#169015)
Browse files Browse the repository at this point in the history 
## Summary

I noticed that Remote clusters UI has a wrapper on empty states which is
probably a regression from the EuiPage deprecations migration. This PR
fixes the list and edit views. See screenshots below.

<details>

#### List empty state

Before
<img width="1919" alt="Screenshot 2023-10-16 at 19 27 12"
src="https://github.com/elastic/kibana/assets/6585477/e0e50958-c605-413c-b79b-80b6743ac6b0">

After
<img width="1918" alt="Screenshot 2023-10-16 at 19 42 24"
src="https://github.com/elastic/kibana/assets/6585477/7cc54494-fd0a-4e18-9ec9-cc501afbb978">

#### List error

Before
<img width="1916" alt="Screenshot 2023-10-16 at 19 34 07"
src="https://github.com/elastic/kibana/assets/6585477/362169af-924e-40d0-9c25-d3d3fbabf112">

After
<img width="1918" alt="Screenshot 2023-10-16 at 19 45 18"
src="https://github.com/elastic/kibana/assets/6585477/c4931d64-e298-4962-9ba0-ddaf9a948a6a">

#### List error permissions

Before
<img width="1921" alt="Screenshot 2023-10-16 at 19 27 50"
src="https://github.com/elastic/kibana/assets/6585477/1eaf2fff-c8d6-45b7-b670-4b8dd4ab0844">

After
<img width="1916" alt="Screenshot 2023-10-16 at 19 44 14"
src="https://github.com/elastic/kibana/assets/6585477/9bbcce09-9326-45a4-bb31-a42a13a999ac">

#### List loading

Before
<img width="1918" alt="Screenshot 2023-10-16 at 20 08 54"
src="https://github.com/elastic/kibana/assets/6585477/11b2dab3-9e93-4e37-821c-fb367afa4fb9">

After
<img width="1918" alt="Screenshot 2023-10-16 at 20 10 18"
src="https://github.com/elastic/kibana/assets/6585477/30021cfe-cd8c-4aff-8877-f4b052ce3b7b">

#### Edit form error

Before
<img width="1918" alt="Screenshot 2023-10-16 at 19 59 54"
src="https://github.com/elastic/kibana/assets/6585477/1d54919f-f1fb-4938-93b3-f949705b12b2">

After
<img width="1918" alt="Screenshot 2023-10-16 at 20 03 59"
src="https://github.com/elastic/kibana/assets/6585477/a2369e1c-3e28-418e-a359-1564259c00cb">

#### Edit form loading

Before
<img width="1918" alt="Screenshot 2023-10-16 at 20 00 34"
src="https://github.com/elastic/kibana/assets/6585477/ead45d19-43a3-4cc9-bd6a-338321b6757d">

After
<img width="1918" alt="Screenshot 2023-10-16 at 20 03 41"
src="https://github.com/elastic/kibana/assets/6585477/e563a54e-598c-42fc-88a9-fb1659a86fdd">

</details>

(cherry picked from commit bdf064e)
  • Loading branch information
@yuliacech
yuliacech committed Oct 17, 2023
1 parent ef73f85 commit 0b97d99
Show file tree
Hide file tree
Showing 3 changed files with 173 additions and 182 deletions.
17 changes: 14 additions & 3 deletions src/plugins/es_ui_shared/public/components/section_loading/section_loading.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,24 @@ import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
interface Props {
inline?: boolean;
children: React.ReactNode;
'data-test-subj'?: string;
[key: string]: any;
}

export const SectionLoading: React.FunctionComponent<Props> = ({ inline, children, ...rest }) => {
export const SectionLoading: React.FunctionComponent<Props> = ({
inline,
'data-test-subj': dataTestSubj,
children,
...rest
}) => {
if (inline) {
return (
<EuiFlexGroup justifyContent="flexStart" alignItems="center" gutterSize="s">
<EuiFlexGroup
justifyContent="flexStart"
alignItems="center"
gutterSize="s"
data-test-subj={dataTestSubj}
>
<EuiFlexItem grow={false}>
<EuiLoadingSpinner size="m" />
</EuiFlexItem>
Expand All @@ -38,7 +49,7 @@ export const SectionLoading: React.FunctionComponent<Props> = ({ inline, childre
<KibanaPageTemplate.EmptyPrompt
title={<EuiLoadingSpinner size="xl" />}
body={<EuiText color="subdued">{children}</EuiText>}
data-test-subj="sectionLoading"
data-test-subj={dataTestSubj ?? 'sectionLoading'}
/>
);
};
140 changes: 67 additions & 73 deletions ...ns/remote_clusters/public/application/sections/remote_cluster_edit/remote_cluster_edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,92 +96,86 @@ export class RemoteClusterEdit extends Component {

if (isLoading) {
return (
<EuiPageTemplate minHeight={0} panelled paddingSize="none" offset={0}>
<SectionLoading>
<FormattedMessage
id="xpack.remoteClusters.edit.loadingLabel"
defaultMessage="Loading remote cluster…"
/>
</SectionLoading>
</EuiPageTemplate>
<SectionLoading>
<FormattedMessage
id="xpack.remoteClusters.edit.loadingLabel"
defaultMessage="Loading remote cluster…"
/>
</SectionLoading>
);
}

if (!cluster) {
return (
<EuiPageTemplate minHeight={0} panelled paddingSize="none" offset={0}>
<EuiPageTemplate.EmptyPrompt
iconType="warning"
color="danger"
title={
<h2>
<FormattedMessage
id="xpack.remoteClusters.edit.loadingErrorTitle"
defaultMessage="Error loading remote cluster"
/>
</h2>
}
body={
<p>
<FormattedMessage
id="xpack.remoteClusters.edit.loadingErrorMessage"
defaultMessage="The remote cluster '{name}' does not exist."
values={{ name: clusterName }}
/>
</p>
}
actions={
<EuiButton
{...reactRouterNavigate(this.props.history, '/list')}
color="danger"
iconType="arrowLeft"
flush="left"
>
<FormattedMessage
id="xpack.remoteClusters.edit.viewRemoteClustersButtonLabel"
defaultMessage="View remote clusters"
/>
</EuiButton>
}
/>
</EuiPageTemplate>
<EuiPageTemplate.EmptyPrompt
iconType="warning"
color="danger"
title={
<h2>
<FormattedMessage
id="xpack.remoteClusters.edit.loadingErrorTitle"
defaultMessage="Error loading remote cluster"
/>
</h2>
}
body={
<p>
<FormattedMessage
id="xpack.remoteClusters.edit.loadingErrorMessage"
defaultMessage="The remote cluster '{name}' does not exist."
values={{ name: clusterName }}
/>
</p>
}
actions={
<EuiButton
{...reactRouterNavigate(this.props.history, '/list')}
color="danger"
iconType="arrowLeft"
flush="left"
>
<FormattedMessage
id="xpack.remoteClusters.edit.viewRemoteClustersButtonLabel"
defaultMessage="View remote clusters"
/>
</EuiButton>
}
/>
);
}

const { isConfiguredByNode, hasDeprecatedProxySetting } = cluster;

if (isConfiguredByNode) {
return (
<EuiPageTemplate minHeight={0} panelled paddingSize="none" offset={0}>
<EuiPageTemplate.EmptyPrompt
iconType="iInCircle"
title={
<h2>
<FormattedMessage
id="xpack.remoteClusters.edit.configuredByNodeWarningTitle"
defaultMessage="Defined in configuration"
/>
</h2>
}
body={
<p>
<FormattedMessage
id="xpack.remoteClusters.configuredByNodeWarningBody"
defaultMessage="You can't edit or delete this remote cluster because it's defined in a node's
<EuiPageTemplate.EmptyPrompt
iconType="iInCircle"
title={
<h2>
<FormattedMessage
id="xpack.remoteClusters.edit.configuredByNodeWarningTitle"
defaultMessage="Defined in configuration"
/>
</h2>
}
body={
<p>
<FormattedMessage
id="xpack.remoteClusters.configuredByNodeWarningBody"
defaultMessage="You can't edit or delete this remote cluster because it's defined in a node's
elasticsearch.yml configuration file."
/>
</p>
}
actions={
<EuiButton color="primary" iconType="arrowLeft" flush="left" onClick={this.cancel}>
<FormattedMessage
id="xpack.remoteClusters.edit.backToRemoteClustersButtonLabel"
defaultMessage="Back to remote clusters"
/>
</EuiButton>
}
/>
</EuiPageTemplate>
/>
</p>
}
actions={
<EuiButton color="primary" iconType="arrowLeft" flush="left" onClick={this.cancel}>
<FormattedMessage
id="xpack.remoteClusters.edit.backToRemoteClustersButtonLabel"
defaultMessage="Back to remote clusters"
/>
</EuiButton>
}
/>
);
}

Expand Down
Loading

0 comments on commit 0b97d99

Please sign in to comment.