Fixes #37012 - Add a placeholder when selecting booltype params

theforeman · Jan 11, 2024 · f000358 · f000358
1 parent 6575dc0
commit f000358
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git a/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/Parameters/EditTableRow.js b/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/Parameters/EditTableRow.js
@@ -79,6 +79,20 @@ export const EditParametersTableRow = ({
       );
     }
   };
+
+  const onSelect = (event, selection, isPlaceholder) => {
+    if (isPlaceholder) clearSelection();
+    else {
+      setValue(selection);
+      setSelectValueIsOpen(false);
+    }
+  };
+
+  const clearSelection = () => {
+    setValue('');
+    setSelectValueIsOpen(false);
+  };
+
   return (
     <Tr ouiaId={`edit-parameters-table-row-${rowIndex}`} key={rowIndex}>
       <Td dataLabel={columnNames.name}>
@@ -124,13 +138,11 @@ export const EditParametersTableRow = ({
               variant={SelectVariant.single}
               aria-label={`Select ${param.name} value`}
               onToggle={setSelectValueIsOpen}
-              selections={value.toString()}
+              selections={value?.toString()}
               isOpen={selectValueIsOpen}
-              onSelect={(event, selection) => {
-                setSelectValueIsOpen(false);
-                setValue(selection === 'true');
-              }}
+              onSelect={onSelect}
             >
+              <SelectOption value="select" isPlaceholder />
               <SelectOption value="true" />
               <SelectOption value="false" />
             </Select>

diff --git a/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/Parameters/ViewTableRow.js b/webpack/assets/javascripts/react_app/components/HostDetails/Tabs/Parameters/ViewTableRow.js
@@ -11,11 +11,13 @@ const getValue = param => {
   if (param['hidden_value?']) {
     return '••••••••';
   }
+  if (param.value === null)
+    return <span className="disabled-text">{__('No value')}</span>;
+
   if (param.parameter_type === 'boolean') {
-    return param.value.toString();
+    return param?.value?.toString();
   }
-  if (!param.value)
-    return <span className="disabled-text">{__('No value')}</span>;
+
   if (['json', 'yaml', 'array', 'hash'].includes(param.parameter_type)) {
     return JSON.stringify(param.value);
   }