Fixes #37582 - use textarea in host comment edit

theforeman · Jul 10, 2024 · 1ef84b8 · 1ef84b8
1 parent e2dee7d
commit 1ef84b8
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/webpack/assets/javascripts/react_app/components/HostDetails/HostDetails.scss b/webpack/assets/javascripts/react_app/components/HostDetails/HostDetails.scss
@@ -48,8 +48,16 @@
       height: 100%;
     }
   }
+  .inline-edit-input-flex-item {
+    display: contents;
+  }
+
+  .pf-c-inline-edit__value {
+    overflow-wrap: anywhere;
+    white-space: pre-line;
+  }
 }
 
 .host-details-tabs-section + .pf-c-tabs {
-   overflow: visible;
+  overflow: visible;
 }
diff --git a/webpack/assets/javascripts/react_app/components/HostDetails/InlineEdit.js b/webpack/assets/javascripts/react_app/components/HostDetails/InlineEdit.js
@@ -1,18 +1,19 @@
 import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
-import { Button, TextInput, Flex, FlexItem } from '@patternfly/react-core';
+import { Button, TextArea, Flex, FlexItem } from '@patternfly/react-core';
 import { PencilAltIcon, CheckIcon, TimesIcon } from '@patternfly/react-icons';
 
 import { APIActions } from '../../redux/API';
 import { sprintf, translate as __ } from '../../common/I18n';
 
 export const InlineEdit = ({
   name,
-  defaultValue,
+  defaultValue: _defaultValue,
   hostName,
   editPermission,
 }) => {
+  const [defaultValue, setDefault] = useState(_defaultValue);
   const [value, setValue] = useState(defaultValue);
   const [isEditing, setIsEditing] = useState(false);
 
@@ -32,6 +33,7 @@ export const InlineEdit = ({
           [name]: value,
         },
         successToast: () => sprintf(__('%s saved'), name),
+        handleSuccess: () => setDefault(value),
       })
     );
   };
@@ -46,9 +48,9 @@ export const InlineEdit = ({
           <FlexItem
             grow={{ default: 'grow' }}
             spacer={{ default: 'spacerNone' }}
+            className="inline-edit-input-flex-item"
           >
-            <TextInput
-              ouiaId={`input-${name}`}
+            <TextArea
               value={value}
               type="text"
               onChange={handleInputChange}