Fix readOnly option and fix some displaying

kyma-project · Oct 11, 2023 · b402e41 · b402e41
1 parent 2deb9c6
commit b402e41
Show file tree

Hide file tree

Showing 16 changed files with 88 additions and 44 deletions.
diff --git a/src/components/BusolaExtensions/ColumnsInput.js b/src/components/BusolaExtensions/ColumnsInput.js
@@ -13,6 +13,7 @@ export function ColumnsInput({ value: columns, setValue: setColumns }) {
   }
 
   return columns.map(value => {
+    const readOnlyOptions = !value.isSelected ? { readOnly: true } : {};
     return (
       <div key={value.path} className="columns-input">
         <CheckBox
@@ -30,7 +31,7 @@ export function ColumnsInput({ value: columns, setValue: setColumns }) {
           }}
           required
           placeholder={t('extensibility.starter-modal.headers.field-name')}
-          readOnly={!value.isSelected}
+          {...readOnlyOptions}
         />
         <Input readOnly defaultValue={value?.path} />
         <Input readOnly defaultValue={value?.type} />

diff --git a/src/components/Extensibility/components-form/Jsonata.js b/src/components/Extensibility/components-form/Jsonata.js
@@ -27,6 +27,7 @@ export function JsonataInput({
     inputRef,
     onChange: [onChange, e => setValue && setValue(e.target.value)],
   });
+  if (!props.readOnly) delete props.readOnly;
 
   return (
     <div className="fd-col fd-col-md--11">

diff --git a/src/resources/Jobs/ScheduleSection.js b/src/resources/Jobs/ScheduleSection.js
@@ -54,11 +54,12 @@ function TimeInput({ entries, index, name, setSchedule }) {
             value={entries[index] || ''}
             setValue={setValue}
             placeholder={t('cron-jobs.create-modal.' + name)}
+            className="input-full"
             required
           />
           <p
             style={{ color: 'var(--sapNeutralTextColor)' }}
-            className="fd-col-md--12"
+            className="input-full"
           >
             {t('cron-jobs.create-modal.tooltips.' + name)}
           </p>

diff --git a/src/resources/Namespaces/MemoryQuotas.js b/src/resources/Namespaces/MemoryQuotas.js
@@ -2,7 +2,7 @@ import React from 'react';
 import * as jp from 'jsonpath';
 
 import { Dropdown } from 'shared/components/Dropdown/Dropdown';
-import { Input, FormItem } from '@ui5/webcomponents-react';
+import { Input, Form, FlexBox, Label } from '@ui5/webcomponents-react';
 
 export function MemoryInput({
   label,
@@ -30,27 +30,34 @@ export function MemoryInput({
     jp.value(container, propertyPath, val);
     setContainer({ ...container });
   };
-
+  if (!otherProps.readOnly) delete otherProps.readOnly;
   return (
-    <FormItem label={label}>
-      {/* <FormLabel required={required}>{label}</FormLabel> */}
-      {/* <div className="memory-input"> */}
-      <Input
-        type="Number"
-        min="0"
-        required={required}
-        value={numericValue}
-        onInput={e => setValue(e.target.value + selectedUnit)}
-        {...otherProps}
-      />
-      <Dropdown
-        options={options}
-        required={required}
-        selectedKey={selectedUnit}
-        onSelect={(_, { key }) => setValue(numericValue.toString() + key)}
-        {...otherProps}
-      />
-      {/* </div> */}
-    </FormItem>
+    <FlexBox
+      direction="Column"
+      style={{
+        maxWidth: '100%',
+      }}
+    >
+      <div className="memory-input">
+        <Label>{label}</Label>
+        <Input
+          type="Number"
+          min="0"
+          required={required}
+          value={numericValue}
+          onInput={e => setValue(e.target.value + selectedUnit)}
+          className="input-full"
+          {...otherProps}
+        />
+        <Dropdown
+          options={options}
+          required={required}
+          selectedKey={selectedUnit}
+          onSelect={(_, { key }) => setValue(numericValue.toString() + key)}
+          className="input-full"
+          {...otherProps}
+        />
+      </div>
+    </FlexBox>
   );
 }
diff --git a/src/shared/ResourceForm/components/FormField.js b/src/shared/ResourceForm/components/FormField.js
@@ -27,8 +27,13 @@ export function FormField({
 }) {
   const { validate, ...inputProps } = props;
   const inputInfoLink = useCreateResourceDescription(inputInfo);
-  if (compact) return input({ required, disabled, ...inputProps });
-
+  if (compact)
+    return input({
+      required,
+      disabled,
+      className: 'input-full',
+      ...inputProps,
+    });
   return (
     <div className={classnames('fd-row form-field', className)}>
       <div className="fd-col fd-col-md--3 form-field__label">
@@ -38,7 +43,12 @@ export function FormField({
         <div className="fd-row">
           {messageStrip
             ? messageStrip
-            : input({ required, disabled, ...inputProps })}
+            : input({
+                required,
+                disabled,
+                className: 'input-full',
+                ...inputProps,
+              })}
           {inputInfo && (
             <p style={{ color: 'var(--sapNeutralTextColor)' }}>
               {inputInfoLink}

diff --git a/src/shared/ResourceForm/components/ModeSelector.js b/src/shared/ResourceForm/components/ModeSelector.js
@@ -29,7 +29,7 @@ export function ModeSelector({ mode, isEditing, setMode }) {
   const buttonsToDisplay = isEditing ? editModeButtons : createModeButtons;
 
   return (
-    <div className="mode-selector">
+    <div className="mode-selector ui5-content-density-compact">
       <SegmentedButton className="fd-segmented-button">
         {buttonsToDisplay.map(button => (
           <SegmentedButtonItem

diff --git a/src/shared/ResourceForm/components/Presets.js b/src/shared/ResourceForm/components/Presets.js
@@ -9,7 +9,7 @@ export function Presets({ presets, onSelect, ...otherProps }) {
   }));
 
   return (
-    <div className="fd-margin-bottom--xs">
+    <div className="fd-margin-bottom--xs ui5-content-density-compact">
       <Dropdown
         className="resource-form__presets"
         placeholder={t('common.create-form.choose-preset')}

diff --git a/src/shared/ResourceForm/components/ResourceForm.js b/src/shared/ResourceForm/components/ResourceForm.js
@@ -12,7 +12,7 @@ import { useCreateResource } from '../useCreateResource';
 import { KeyValueField, K8sNameField } from '../fields';
 import * as jp from 'jsonpath';
 
-// import './ResourceForm.scss';
+import './ResourceForm.scss';
 import { Form, FormItem } from '@ui5/webcomponents-react';
 
 export function ResourceForm({
@@ -164,6 +164,7 @@ export function ResourceForm({
           labelSpanS={0}
           labelSpanXL={0}
           as="div"
+          className="ui5-content-density-compact"
         >
           {mode === ModeSelector.MODE_SIMPLE && (
             <FormItem>

diff --git a/src/shared/ResourceForm/components/ResourceForm.scss b/src/shared/ResourceForm/components/ResourceForm.scss
@@ -2,6 +2,7 @@
   height: 100%;
   display: flex;
   flex-direction: column;
+  padding: 1rem 2rem;
 
   form {
     overflow: auto;

diff --git a/src/shared/ResourceForm/fields/KeyValueField.js b/src/shared/ResourceForm/fields/KeyValueField.js
@@ -87,6 +87,7 @@ export function KeyValueField({
           <div className="fd-col fd-col-md--6">
             {input.key({
               fullWidth: true,
+              className: 'input-full',
               disabled: lockedKeys.includes(value?.key),
               key: 'key',
               value: value?.key || '',
@@ -104,10 +105,10 @@ export function KeyValueField({
           </div>
         ),
         ({ focus, value, setValue, updateValue, ...props }) => (
-          <div className="fd-col fd-col-md--6">
+          <div className="fd-col fd-col-md--6 input-full">
             {input.value({
               fullWidth: true,
-              className: 'value-input',
+              className: 'value-input input-full',
               key: 'value',
               onKeyDown: e => focus(e),
               value: dataValue(value),

diff --git a/src/shared/ResourceForm/fields/RuntimeResources.js b/src/shared/ResourceForm/fields/RuntimeResources.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { FormItem, FormLabel, FormFieldset } from 'fundamental-react';
+import { FormFieldset } from 'fundamental-react';
 import * as jp from 'jsonpath';
 
 import { Dropdown } from 'shared/components/Dropdown/Dropdown';
@@ -9,7 +9,7 @@ import { ResourceForm } from '..';
 import * as Inputs from '../inputs';
 
 import './RuntimeResources.scss';
-import { Input } from '@ui5/webcomponents-react';
+import { FormItem, Input, FlexBox, Label } from '@ui5/webcomponents-react';
 
 function MemoryInput({ label, propertyPath, container = {}, setContainer }) {
   const units = ['K', 'Ki', 'M', 'Mi', 'G', 'Gi', 'Ti', 'T'];
@@ -32,8 +32,13 @@ function MemoryInput({ label, propertyPath, container = {}, setContainer }) {
   };
 
   return (
-    <FormItem>
-      <FormLabel required>{label}</FormLabel>
+    <FlexBox
+      direction="Column"
+      style={{
+        maxWidth: '100%',
+      }}
+    >
+      <Label required>{label}</Label>
       <div className="memory-input fd-col fd-col-md--11">
         <Input
           type="number"
@@ -47,7 +52,7 @@ function MemoryInput({ label, propertyPath, container = {}, setContainer }) {
           onSelect={(_, { key }) => setValue(numericValue.toString() + key)}
         />
       </div>
-    </FormItem>
+    </FlexBox>
   );
 }
 
@@ -66,14 +71,20 @@ function CpuInput({ label, propertyPath, container = {}, setContainer }) {
   };
 
   return (
-    <FormItem>
-      <FormLabel required>{label} (m)</FormLabel>
+    <FlexBox
+      direction="Column"
+      style={{
+        maxWidth: '100%',
+      }}
+    >
+      <Label required>{label} (m)</Label>
       <Inputs.Number
         min="0"
         value={value}
         setValue={value => setValue(value + 'm')}
+        className="input-full"
       />
-    </FormItem>
+    </FlexBox>
   );
 }
 

diff --git a/src/shared/ResourceForm/fields/TextArrayInput.js b/src/shared/ResourceForm/fields/TextArrayInput.js
@@ -16,6 +16,8 @@ export function TextArrayInput({
   ...props
 }) {
   const { validate, ...inputProps } = _inputProps || {};
+  const readOnlyOptions = readOnly ? { readOnly: true } : {};
+
   return (
     <MultiInput
       defaultOpen={defaultOpen}
@@ -43,6 +45,7 @@ export function TextArrayInput({
               setValue(e.target.value);
               updateValue();
             }}
+            className="input-full"
             // onKeyDown={e => focus(e)}
             // onBlur={() => {
             //   const fieldValue = internalValue?.filter(val => !!val);
@@ -52,7 +55,7 @@ export function TextArrayInput({
             //       : fieldValue,
             //   );
             // }}
-            readOnly={readOnly}
+            {...readOnlyOptions}
             {...inputProps}
             aria-label={ariaLabel}
           />

diff --git a/src/shared/ResourceForm/inputs/Number.js b/src/shared/ResourceForm/inputs/Number.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { Input } from '@ui5/webcomponents-react';
 
 export function Number({ value = '', setValue, ...props }) {
+  if (!props.readOnly) delete props.readOnly;
   return (
     <div className="fd-col fd-col-md--11">
       <Input

diff --git a/src/shared/ResourceForm/inputs/Text.js b/src/shared/ResourceForm/inputs/Text.js
@@ -7,6 +7,8 @@ export function Text(props) {
 }
 
 export function WrappedText({ value, setValue, onChange, inputRef, ...props }) {
+  if (!props.readOnly) delete props.readOnly;
+
   const {
     validationRef,
     internalValue,

diff --git a/src/shared/components/K8sNameInput/K8sNameInput.js b/src/shared/components/K8sNameInput/K8sNameInput.js
@@ -29,11 +29,11 @@ export const K8sNameInput = ({
     inputRef,
     onChange,
   });
-
+  if (!props.readOnly) delete props.readOnly;
   const { className, compact, ...inputProps } = props || {};
 
-  const inputClassName = classnames('fd-input', className, {
-    'fd-input--compact': compact,
+  const inputClassName = classnames('input-full', className, {
+    'ui5-content-density-compact': compact,
   });
 
   const input = (

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -326,6 +326,10 @@ ui5-checkbox {
   height: 1.5rem;
 }
 
+.input-full {
+  width: 100%;
+}
+
 @include graph-node-border(pod, 4);
 @include graph-node-border(virtualservice, 1);
 @include graph-node-border(rolebinding, 2);