Repository: cockpit-project/cockpit (language: javascript)

Issue:
SELinux page has a scrollable alert in the solution details



Discussion / hints:

Fix patch:
diff --git a/pkg/selinux/setroubleshoot-view.jsx b/pkg/selinux/setroubleshoot-view.jsx
index af6a3bb69a64..ab4e09b05a7e 100644
--- a/pkg/selinux/setroubleshoot-view.jsx
+++ b/pkg/selinux/setroubleshoot-view.jsx
@@ -26,12 +26,12 @@ import { Button } from "@patternfly/react-core/dist/esm/components/Button/index.
 import { Divider } from "@patternfly/react-core/dist/esm/components/Divider/index.js";
 import { Card, CardBody, CardHeader, CardTitle } from '@patternfly/react-core/dist/esm/components/Card/index.js';
 import { ExpandableSection } from "@patternfly/react-core/dist/esm/components/ExpandableSection/index.js";
-import { Flex, FlexItem } from "@patternfly/react-core/dist/esm/layouts/Flex/index.js";
+import { Flex } from "@patternfly/react-core/dist/esm/layouts/Flex/index.js";
 import { Page, PageSection } from "@patternfly/react-core/dist/esm/components/Page/index.js";
 import { Switch } from "@patternfly/react-core/dist/esm/components/Switch/index.js";
 import { Stack, StackItem } from "@patternfly/react-core/dist/esm/layouts/Stack/index.js";
-import { TextArea } from "@patternfly/react-core/dist/esm/components/TextArea/index.js";
 import { ExclamationCircleIcon, ExclamationTriangleIcon, InfoCircleIcon } from "@patternfly/react-icons";
+import { Icon, Content, ContentVariants, CodeBlock, CodeBlockCode } from "@patternfly/react-core";
 
 import { Modifications } from "cockpit-components-modifications.jsx";
 import { EmptyStatePanel } from "cockpit-components-empty-state.jsx";
@@ -116,14 +116,22 @@ class SELinuxEventDetails extends React.Component {
                 );
             }
 
+            function codeBlock(text, key) {
+                return (
+                    <CodeBlock key={key} aria-label={_("solution")}>
+                        <CodeBlockCode>{text}</CodeBlockCode>
+                    </CodeBlock>
+                );
+            }
+
             let doElement = "";
 
             // One line usually means one command
             if (itm.doText && itm.doText.indexOf("\n") < 0)
-                doElement = <TextArea aria-label={_("solution")} readOnlyVariant="default" defaultValue={itm.doText} />;
+                doElement = codeBlock(itm.doText);
 
             // There can be text with commands. Command always starts on a new line with '#'
-            // Group subsequent commands into one `<TextArea>` element.
+            // Group subsequent commands into one `<CodeBlock>` element.
             if (itm.doText && itm.doText.indexOf("\n") >= 0) {
                 const parts = [];
                 const lines = itm.doText.split("\n");
@@ -141,10 +149,7 @@ class SELinuxEventDetails extends React.Component {
                     }
                 });
                 doElement = parts.map((p, index) => p[0] == "#"
-                    ? <TextArea aria-label={_("solution")}
-                                readOnlyVariant="plain"
-                                key={p}
-                                defaultValue={p.substring(2)} />
+                    ? codeBlock(p.substring(2), index)
                     : <span key={p}>{p}</span>);
             }
 
@@ -254,6 +259,8 @@ class SELinuxStatus extends React.Component {
         else if (!configUnknown && this.props.selinuxStatus.enforcing !== this.props.selinuxStatus.configEnforcing)
             note = _("Setting deviates from the configured state and will revert on the next boot.");
 
+        // note = _("Setting deviates from the configured state and will revert on the next boot.");
+
         return (
             <Stack hasGutter className="selinux-policy-ct">
                 <Flex spaceItems={{ default: 'spaceItemsMd' }} alignItems={{ default: 'alignItemsCenter' }}>
@@ -263,10 +270,11 @@ class SELinuxStatus extends React.Component {
                             onChange={this.props.changeSelinuxMode} />
                 </Flex>
                 { note !== null &&
-                    <Flex spaceItems={{ default: 'spaceItemsSm' }} alignItems={{ default: 'alignItemsCenter' }}>
-                        <InfoCircleIcon />
-                        <FlexItem>{ note }</FlexItem>
-                    </Flex>
+                    <Content component={ContentVariants.p}>
+                        <Icon isInline status="info"><InfoCircleIcon /></Icon>
+                        { "\n" }
+                        { note }
+                    </Content>
                 }
                 {errorMessage}
             </Stack>


Test patch: