feat(metadata): Metadata configuration UI

* fix: Removed curly brackets for string literal attributes
* fix: Prevent resizing
* fix: Fixed cursor key behavior in property value input

src/components/metadata/MetadataEditorModal.css

@@ -1,9 +1,16 @@
 .metadataEditorModal {
-    --pf-c-modal-box--ZIndex: 500;
-    --pf-c-modal-box--Height: 90vh;
-    --pf-c-modal-box--Width: 90vw;
-    --pf-c-modal-box__body--MinHeight: 90vh;
-    --pf-c-modal-box__body--MaxHeight: 90vh;
-    --pf-c-modal-box__body--MinWidth: 90vw;
-    --pf-c-modal-box__body--MaxWidth: 90vw;
+    height: 90vh;
+    width: 90vw;
+}
+
+.metadataEditorModalListView {
+    width: 50vw;
+}
+
+.metadataEditorModalDetailsView {
+    width: 50vw;
+}
+
+.tableButtonColumn {
+    --pf-c-table--cell--Width: 20px;
 }

src/components/metadata/MetadataEditorModal.tsx

@@ -101,7 +101,7 @@ export function MetadataEditorModal({
   function renderTopmostArrayView() {
     return (
       <Split hasGutter>
-        <SplitItem isFilled>
+        <SplitItem className="metadataEditorModalListView">
           <TopmostArrayTable
             model={metadata}
             itemSchema={getFormSchema()}
@@ -112,7 +112,7 @@ export function MetadataEditorModal({
           />
         </SplitItem>
 
-        <SplitItem>
+        <SplitItem className="metadataEditorModalDetailsView">
           <Stack hasGutter>
             <StackItem>
               <Title headingLevel="h2">Details</Title>

src/components/metadata/PropertiesField.tsx

@@ -121,7 +121,7 @@ function Properties(props: PropertiesFieldProps) {
                 <Tr key={`${props.name}-header`}>
                   <Th modifier="nowrap">NAME</Th>
                   <Th modifier="nowrap">VALUE</Th>
-                  <Th modifier="nowrap">
+                  <Th modifier="nowrap" className="tableButtonColumn">
                     <AddPropertyButton
                       model={props.value}
                       path={[]}

src/components/metadata/PropertyRow.tsx

@@ -2,7 +2,7 @@ import { AddPropertyButton } from './AddPropertyButton';
 import { Button, TextInput, Tooltip, Truncate } from '@patternfly/react-core';
 import { TrashIcon } from '@patternfly/react-icons';
 import { Td, TdProps, TreeRowWrapper } from '@patternfly/react-table';
-import { useState } from 'react';
+import { FormEvent, useState } from 'react';
 
 type PropertyRowProps = {
   propertyName: string;
@@ -48,6 +48,11 @@ export function PropertyRow({
     onChangeModel();
   }
 
+  function handleSetRowValue(value: string, event: FormEvent<HTMLInputElement>) {
+    event.stopPropagation();
+    setRowValue(value);
+  }
+
   return (
     <TreeRowWrapper key={`${propertyName}-${path.join('-')}`} row={{ props: treeRow!.props }}>
       <Td dataLabel="NAME" treeRow={treeRow}>
@@ -63,12 +68,12 @@ export function PropertyRow({
             name={`properties-input-${propertyName}-${path.join('-')}-value`}
             type="text"
             value={rowValue}
-            onChange={(value) => setRowValue(value)}
+            onChange={(value, event) => handleSetRowValue(value, event)}
             onBlur={handleChangeModel}
           />
         )}
       </Td>
-      <Td>
+      <Td className="tableButtonColumn">
         <Tooltip content="Delete property">
           <Button
             data-testid={'properties-delete-property-' + nodeName + '-btn'}

src/components/metadata/ToopmostArrayTable.tsx

@@ -1,3 +1,4 @@
+import './MetadataEditorModal.css';
 import { Button, EmptyState, EmptyStateBody, Tooltip, Truncate } from '@patternfly/react-core';
 import { PlusCircleIcon, TrashIcon } from '@patternfly/react-icons';
 import {
@@ -59,7 +60,7 @@ export function TopmostArrayTable(props: TopmostArrayTableProps) {
                     {name.toUpperCase()}
                   </Th>
                 ))}
-              <Th modifier="nowrap" key="buttons">
+              <Th modifier="nowrap" key="buttons" className="tableButtonColumn">
                 <Tooltip content={`Add new ${props.name}`}>
                   <Button
                     data-testid={'metadata-add-' + props.name + '-btn'}
@@ -103,7 +104,7 @@ export function TopmostArrayTable(props: TopmostArrayTableProps) {
                         <Truncate content={item[name]} />
                       </Td>
                     ))}
-                  <Td key="buttons">
+                  <Td key="buttons" className="tableButtonColumn">
                     <Tooltip content={`Delete ${props.name}`}>
                       <Button
                         data-testid={'metadata-delete-' + index + '-btn'}