fix: section editor performance (#3361)

* fix: reduce component hierarchy for form components & small fixes * fix: updated ui-schema package and disabled form view for form & details * fix: flaky tests * fix: translation * test: adjust tests to translation
kyma-project · Sep 30, 2024 · 49016f8 · 49016f8
1 parent 96511a9
commit 49016f8
Show file tree

Hide file tree

Showing 26 changed files with 281 additions and 318 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -58,7 +58,7 @@
     "@stoplight/json-ref-resolver": "^3.1.3",
     "@types/jsonpath": "^0.2.0",
     "@types/pluralize": "^0.0.29",
-    "@ui-schema/ui-schema": "^0.4.0-beta.1",
+    "@ui-schema/ui-schema": "^0.4.5",
     "@ui5/webcomponents": "^1.24.0",
     "@ui5/webcomponents-base": "^1.24.0",
     "@ui5/webcomponents-fiori": "^1.24.0",

diff --git a/public/i18n/en.yaml b/public/i18n/en.yaml
@@ -340,8 +340,9 @@ common:
     type-to-select: Start typing to select {{value}} from the list
     validation-error: Validation error
   placeholders:
+    enter-jsonata: Enter JSONata expression
     secret-ref-name: Select name
-    secret-ref-namespace: Select Namespace
+    secret-ref-namespace: Select namespace
   product-title: Kyma
   protected-resource-description: Resource protected. Go to Preferences to turn on the modification of protected resources.
   protected-resource: Protected resource 

diff --git a/src/components/BusolaExtensions/BusolaExtensionDetails.js b/src/components/BusolaExtensions/BusolaExtensionDetails.js
@@ -96,7 +96,12 @@ export function BusolaExtensionDetails({ name, namespace }) {
               <ErrorBoundary>
                 <SectionEditor
                   {...props}
-                  onlyYaml={!extensibilitySchemas[key]}
+                  onlyYaml={
+                    // onlyYaml view for form & details due to heavy performance issues
+                    !extensibilitySchemas[key] ||
+                    key === 'form' ||
+                    key === 'details'
+                  }
                   data={data[key]}
                   schema={extensibilitySchemas[key]}
                   resource={data}

diff --git a/src/components/Clusters/views/ClusterOverview/ClusterDetails.js b/src/components/Clusters/views/ClusterOverview/ClusterDetails.js
@@ -10,6 +10,7 @@ import { CountingCard } from 'shared/components/CountingCard/CountingCard';
 import { useKymaModulesQuery } from 'components/KymaModules/KymaModulesQuery';
 import { useUrl } from 'hooks/useUrl';
 import { useNavigate } from 'react-router-dom';
+import { spacing } from '@ui5/webcomponents-react-base';
 
 const GardenerProvider = () => {
   const { t } = useTranslation();
@@ -73,7 +74,10 @@ export default function ClusterDetails({ currentCluster }) {
         }
       />
       {!error && !loadingModules && modules && (
-        <div className="item-wrapper small">
+        <div
+          className="item-wrapper small"
+          style={spacing.sapUiSmallMarginBeginEnd}
+        >
           <CountingCard
             className="item"
             value={modules?.length}

diff --git a/src/components/Clusters/views/ClusterOverview/ClusterNodes.js b/src/components/Clusters/views/ClusterOverview/ClusterNodes.js
@@ -58,7 +58,7 @@ export function ClusterNodes({ data, error, loading }) {
     return [
       <Text
         style={{ fontWeight: 'bold', color: 'var(--sapLinkColor)' }}
-        data-testID={`node-details-link-${entry.metadata?.name}`}
+        data-testid={`node-details-link-${entry.metadata?.name}`}
       >
         {entry.metadata?.name}
       </Text>,

diff --git a/src/components/Clusters/views/EditCluster/AuthenticationDropdown.js b/src/components/Clusters/views/EditCluster/AuthenticationDropdown.js
@@ -10,7 +10,6 @@ export function AuthenticationTypeDropdown({ type, setType }) {
   ];
   return (
     <Dropdown
-      compact
       options={options}
       selectedKey={type}
       onSelect={(_, selected) => setType(selected.key)}

diff --git a/src/components/Extensibility/components-form/Jsonata.js b/src/components/Extensibility/components-form/Jsonata.js
@@ -4,8 +4,8 @@ import {
   useGetTranslation,
   getPropsFromSchema,
 } from 'components/Extensibility/helpers';
-import { Tooltip } from 'shared/components/Tooltip/Tooltip';
 import { Icon, Input } from '@ui5/webcomponents-react';
+import { t } from 'i18next';
 
 export function JsonataInput({
   value,
@@ -27,17 +27,13 @@ export function JsonataInput({
   if (!props.readOnly) delete props.readOnly;
 
   return (
-    <div className="bsl-col-md--11">
-      <Tooltip content="jsonata" position="bottom">
-        <Input
-          value={value || ''}
-          {...props}
-          {...validationProps}
-          onInput={onChange ?? (e => setValue && setValue(e.target.value))}
-          icon={<Icon aria-label="Jsonata" name="source-code" />}
-        />
-      </Tooltip>
-    </div>
+    <Input
+      value={value || ''}
+      {...props}
+      {...validationProps}
+      onInput={onChange ?? (e => setValue && setValue(e.target.value))}
+      icon={<Icon aria-label="Jsonata" name="source-code" />}
+    />
   );
 }
 
@@ -72,7 +68,11 @@ export function Jsonata({
       label={tFromStoreKeys(storeKeys, schema)}
       compact={compact}
       data-testid={storeKeys.join('.') || tFromStoreKeys(storeKeys, schema)}
-      placeholder={tExt(schemaPlaceholder) || tExt(placeholder)}
+      placeholder={
+        tExt(schemaPlaceholder) ||
+        tExt(placeholder) ||
+        t('common.placeholders.enter-jsonata')
+      }
       input={JsonataInput}
       {...getPropsFromSchema(schema, required, tExt)}
     />

diff --git a/src/components/Extensibility/components-form/MonacoRenderer.js b/src/components/Extensibility/components-form/MonacoRenderer.js
@@ -100,7 +100,6 @@ export function MonacoRenderer({
       <div style={spacing.sapUiTinyMarginBottom}>
         <Label required={required}>{tFromStoreKeys(storeKeys, schema)}</Label>
       </div>
-
       <div className="bsl-col-md--11">
         <Editor
           autocompletionDisabled

diff --git a/src/components/Extensibility/components-form/SimpleList.js b/src/components/Extensibility/components-form/SimpleList.js
@@ -64,76 +64,67 @@ export function SimpleList({
       tooltipContent={tExt(tooltipContent)}
       {...props}
     >
-      <div className="bsl-col-md--12 multi-input">
-        <ul>
-          {isObject && (
-            <li>
-              <FlexBox alignItems="Center">
-                <div className="bsl-col-md--12 simple-list ">
-                  <PluginStack
-                    schema={itemsSchema}
-                    widgets={{
-                      ...widgets,
-                      types: mapValues(widgets.types, () => titleRenderer),
-                      custom: {
-                        ...mapValues(widgets.custom, () => titleRenderer),
-                        Null: () => '',
-                      },
-                    }}
-                    parentSchema={schema}
-                    storeKeys={storeKeys.push(0)}
-                    level={level + 1}
-                    nestingLevel={nestingLevel + 1}
-                    schemaKeys={schemaKeys?.push('items')}
-                  />
-                </div>
-              </FlexBox>
-            </li>
-          )}
-          {Array(listSize + 1)
-            .fill(null)
-            .map((_val, index) => {
-              const ownKeys = storeKeys.push(index);
-
-              return (
-                <>
-                  <li key={index}>
-                    <FlexBox alignItems="Center">
-                      <div className="bsl-col-md--11 simple-list ">
-                        <PluginStack
-                          showValidity={showValidity}
-                          schema={itemsSchema}
-                          parentSchema={schema}
-                          storeKeys={ownKeys}
-                          level={level + 1}
-                          schemaKeys={schemaKeys?.push('items')}
-                          placeholder={tExt(schemaPlaceholder)}
-                          isListItem
-                          inputInfo={inputInfo}
-                        />
-                      </div>
-                      {!isLast(index) && (
-                        <Button
-                          disabled={readOnly}
-                          style={spacing.sapUiTinyMarginTop}
-                          icon="delete"
-                          design="Transparent"
-                          onClick={() => removeItem(index)}
-                          aria-label={t('common.buttons.delete')}
-                        />
-                      )}
-                    </FlexBox>
-                  </li>
-                  {isLast(index) && inputInfo && (
-                    <Label wrappingType="Normal" style={{ marginTop: '5px' }}>
-                      {inputInfo}
-                    </Label>
+      <ul className="multi-input">
+        {isObject && (
+          <li key="is-object" className="bsl-col-md--11 simple-list">
+            <PluginStack
+              schema={itemsSchema}
+              widgets={{
+                ...widgets,
+                types: mapValues(widgets.types, () => titleRenderer),
+                custom: {
+                  ...mapValues(widgets.custom, () => titleRenderer),
+                  Null: () => '',
+                },
+              }}
+              parentSchema={schema}
+              storeKeys={storeKeys.push(0)}
+              level={level + 1}
+              nestingLevel={nestingLevel + 1}
+              schemaKeys={schemaKeys?.push('items')}
+            />
+          </li>
+        )}
+        {Array(listSize + 1)
+          .fill(null)
+          .map((_val, index) => {
+            const ownKeys = storeKeys.push(index);
+            return (
+              <li key={index}>
+                <FlexBox alignItems="Center">
+                  <div className="bsl-col-md--11 simple-list">
+                    <PluginStack
+                      showValidity={showValidity}
+                      schema={itemsSchema}
+                      parentSchema={schema}
+                      storeKeys={ownKeys}
+                      level={level + 1}
+                      schemaKeys={schemaKeys?.push('items')}
+                      placeholder={tExt(schemaPlaceholder)}
+                      isListItem
+                      inputInfo={inputInfo}
+                    />
+                  </div>
+                  {!isLast(index) && (
+                    <Button
+                      disabled={readOnly}
+                      style={spacing.sapUiTinyMarginTop}
+                      icon="delete"
+                      design="Transparent"
+                      onClick={() => removeItem(index)}
+                      aria-label={t('common.buttons.delete')}
+                    />
                   )}
-                </>
-              );
-            })}
-        </ul>
-      </div>
+                </FlexBox>
+                {isLast(index) && inputInfo && (
+                  <Label wrappingType="Normal" style={{ marginTop: '5px' }}>
+                    {inputInfo}
+                  </Label>
+                )}
+              </li>
+            );
+          })}
+      </ul>
     </ResourceForm.CollapsibleSection>
   );
 }
diff --git a/src/resources/RoleBindings/RoleForm.js b/src/resources/RoleBindings/RoleForm.js
@@ -26,7 +26,6 @@ export const RoleForm = ({
       propertyPath="$.roleRef.kind"
       input={props => (
         <Dropdown
-          fullWidth={false}
           selectedKey={props.value}
           options={['Role', 'ClusterRole'].map(v => ({ key: v, text: v }))}
           {...props}
@@ -62,7 +61,6 @@ export const RoleForm = ({
       propertyPath="$.roleRef.name"
       input={props => (
         <ComboBox
-          className="bsl-col-md--12"
           id="role"
           aria-label="Role Combobox"
           disabled={props.disabled || !options?.length}

diff --git a/src/resources/Secrets/SecretCreate.js b/src/resources/Secrets/SecretCreate.js
@@ -89,21 +89,19 @@ export default function SecretCreate({
         propertyPath="$.type"
         label={t('secrets.type')}
         input={({ value, setValue }) => (
-          <div className="bsl-col-md--11">
-            <ComboBox
-              id="secrets-type-combobox"
-              aria-label="Secret's type's Combobox"
-              placeholder={t('secrets.placeholders.type')}
-              value={options.find(o => o.key === value)?.text ?? value}
-              disabled={!!initialUnchangedResource || !options?.length}
-              onChange={event => onChangeInput(event, setValue)}
-              onInput={event => onChangeInput(event, setValue)}
-            >
-              {options.map(option => (
-                <ComboBoxItem id={option.key} text={option.text} />
-              ))}
-            </ComboBox>
-          </div>
+          <ComboBox
+            id="secrets-type-combobox"
+            aria-label="Secret's type's Combobox"
+            placeholder={t('secrets.placeholders.type')}
+            value={options.find(o => o.key === value)?.text ?? value}
+            disabled={!!initialUnchangedResource || !options?.length}
+            onChange={event => onChangeInput(event, setValue)}
+            onInput={event => onChangeInput(event, setValue)}
+          >
+            {options.map(option => (
+              <ComboBoxItem id={option.key} text={option.text} />
+            ))}
+          </ComboBox>
         )}
       />
       <DataField