Wrap empty state in a Page component

It's anyhow expected that the Page component wraps the whole app. But mainly I needed it for pixel tests which break without the Page wrapper after: https://github.com/cockpit-project/cockpit/blob/main/test/common/testlib.py#L1161
cockpit-project · May 15, 2023 · ebb5e14 · ebb5e14
1 parent 1b7b7f5
commit ebb5e14
Showing 1 changed file with 23 additions and 19 deletions.
diff --git a/src/app.jsx b/src/app.jsx
@@ -665,25 +665,29 @@ class Application extends React.Component {
 
         if (!this.state.systemServiceAvailable && !this.state.userServiceAvailable) {
             return (
-                <EmptyState variant={EmptyStateVariant.full}>
-                    <EmptyStateHeader titleText={_("Podman service is not active")} icon={<EmptyStateIcon icon={ExclamationCircleIcon} />} headingLevel="h2" />
-                    <EmptyStateFooter>
-                        <Checkbox isChecked={this.state.enableService}
-                              id="enable"
-                              label={_("Automatically start podman on boot")}
-                              onChange={ (_event, checked) => this.setState({ enableService: checked }) } />
-                        <Button onClick={this.startService}>
-                            {_("Start podman")}
-                        </Button>
-                        { cockpit.manifests.system &&
-                        <EmptyStateActions>
-                            <Button variant="link" onClick={this.goToServicePage}>
-                                {_("Troubleshoot")}
-                            </Button>
-                        </EmptyStateActions>
-                        }
-                    </EmptyStateFooter>
-                </EmptyState>
+                <Page>
+                    <PageSection variant={PageSectionVariants.light}>
+                        <EmptyState variant={EmptyStateVariant.full}>
+                            <EmptyStateHeader titleText={_("Podman service is not active")} icon={<EmptyStateIcon icon={ExclamationCircleIcon} />} headingLevel="h2" />
+                            <EmptyStateFooter>
+                                <Checkbox isChecked={this.state.enableService}
+                                      id="enable"
+                                      label={_("Automatically start podman on boot")}
+                                      onChange={ (_event, checked) => this.setState({ enableService: checked }) } />
+                                <Button onClick={this.startService}>
+                                    {_("Start podman")}
+                                </Button>
+                                { cockpit.manifests.system &&
+                                <EmptyStateActions>
+                                    <Button variant="link" onClick={this.goToServicePage}>
+                                        {_("Troubleshoot")}
+                                    </Button>
+                                </EmptyStateActions>
+                                }
+                            </EmptyStateFooter>
+                        </EmptyState>
+                    </PageSection>
+                </Page>
             );
         }