split capability multi-select field to separate single-select fields in service create

OrGur1987 · OrGur1987 · commit b79620956b5a · 2023-04-17T14:28:42.000+03:00
diff --git a/app/javascript/components/storage-service-form/index.jsx b/app/javascript/components/storage-service-form/index.jsx
@@ -1,30 +1,36 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import MiqFormRenderer from '@@ddf';
-import { Loading } from 'carbon-components-react';
 import createSchema from './storage-service-form.schema';
 import miqRedirectBack from '../../helpers/miq-redirect-back';
-import EditingContext from '../physical-storage-form/editing-context';
 import mapper from '../../forms/mappers/componentMapper';
 import enhancedSelect from '../../helpers/enhanced-select';
 
 const StorageServiceForm = ({ recordId, storageManagerId }) => {
-  const [state, setState] = useState({});
-  const { isLoading, initialValues } = state;
+  const [{ fields, initialValues, isLoading }, setState] = useState({ fields: [], isLoading: !!recordId || !!storageManagerId });
   const submitLabel = !!recordId ? __('Save') : __('Add');
 
-  const loadSchema = (appendState = {}) => () => {
+  const loadSchema = (appendState = {}) => ({ data: { form_schema: { fields } } }) => {
     setState((state) => ({
       ...state,
       ...appendState,
+      fields,
+    }));
+  };
+
+  const emptySchema = (appendState = {}) => {
+    const fields = [];
+    setState((state) => ({
+      ...state,
+      ...appendState,
+      fields,
     }));
   };
 
   useEffect(() => {
     if (recordId) {
       API.get(`/api/storage_services/${recordId}`).then((initialValues) => {
-        API.options(`/api/storage_services?ems_id=${initialValues.ems_id}`)
-          .then(loadSchema({ initialValues: { ...initialValues, edit: 'yes' }, isLoading: false }));
+        API.options(`/api/storage_services/${recordId}?ems_id=${initialValues.ems_id}`).then(loadSchema({ initialValues, isLoading: false }));
       });
     }
     if (storageManagerId) {
@@ -33,18 +39,24 @@ const StorageServiceForm = ({ recordId, storageManagerId }) => {
     }
   }, [recordId, storageManagerId]);
 
+  const redirectUrl = storageManagerId ? `/ems_storage/${storageManagerId}?display=storage_services#/` : '/storage_service/show_list';
+
   const onSubmit = ({ edit: _edit, ...values }) => {
-    miqSparkleOn();
-    const request = recordId ? API.patch(`/api/storage_services/${recordId}`, values) : API.post('/api/storage_services', values);
-    request.then(() => {
-      const message = sprintf(
-        recordId
-          ? __('Modification of Storage Service "%s" has been successfully queued.')
-          : __('Add of Storage Service "%s" has been successfully queued.'),
-        values.name,
-      );
-      miqRedirectBack(message, undefined, '/storage_service/show_list');
-    }).catch(miqSparkleOff);
+    if (values.ems_id !== '-1') {
+      miqSparkleOn();
+
+      const request = recordId ? API.patch(`/api/storage_services/${recordId}`, values) : API.post('/api/storage_services', values);
+      request.then(() => {
+        const message = sprintf(
+          recordId
+            ? __('Modification of Storage Service "%s" has been successfully queued.')
+            : __('Add of Storage Service "%s" has been successfully queued.'),
+          values.name,
+        );
+
+        miqRedirectBack(message, undefined, redirectUrl);
+      }).catch(miqSparkleOff);
+    }
   };
 
   const onCancel = () => {
@@ -54,33 +66,40 @@ const StorageServiceForm = ({ recordId, storageManagerId }) => {
         : __('Add of new Storage Service was cancelled by the user.'),
       initialValues && initialValues.name,
     );
-    miqRedirectBack(message, 'warning', '/storage_service/show_list');
+    miqRedirectBack(message, 'warning', redirectUrl);
   };
 
-  if (isLoading) return <Loading className="export-spinner" withOverlay={false} small />;
+  const validation = (values) => {
+    const errors = {};
+    if (values.ems_id === '-1') {
+      errors.ems_id = __('Required');
+    }
+    return errors;
+  };
 
   const componentMapper = {
     ...mapper,
     'enhanced-select': enhancedSelect,
   };
 
-  return (
-    <div>
-      { !isLoading && (
-        <EditingContext.Provider value={{ storageManagerId, setState }}>
-          <MiqFormRenderer
-            schema={createSchema(!!recordId, !!storageManagerId, initialValues, state, setState)}
-            componentMapper={componentMapper}
-            initialValues={initialValues}
-            canReset={!!recordId}
-            onSubmit={onSubmit}
-            onReset={() => add_flash(__('All changes have been reset'), 'warn')}
-            onCancel={onCancel}
-            buttonsLabels={{ submitLabel }}
-          />
-        </EditingContext.Provider>
-      ) }
-    </div>
+  const schema = createSchema(fields, !!recordId, !!storageManagerId, loadSchema, emptySchema);
+  const requiredCapabilities = schema.fields.find((field) => field.name === 'required_capabilities');
+  if (requiredCapabilities) {
+    delete requiredCapabilities.resolveProps;
+  }
+
+  return !isLoading && (
+    <MiqFormRenderer
+      schema={schema}
+      componentMapper={componentMapper}
+      initialValues={initialValues}
+      canReset={!!recordId}
+      validate={validation}
+      onSubmit={onSubmit}
+      onReset={() => add_flash(__('All changes have been reset'), 'warn')}
+      onCancel={onCancel}
+      buttonsLabels={{ submitLabel }}
+    />
   );
 };
 
diff --git a/app/javascript/components/storage-service-form/storage-service-form.schema.js b/app/javascript/components/storage-service-form/storage-service-form.schema.js
@@ -1,52 +1,71 @@
 import { componentTypes, validatorTypes } from '@@ddf';
+import { parseCondition } from '@data-driven-forms/react-form-renderer';
 import validateName from '../../helpers/storage_manager/validate-names';
-import { loadProviderCapabilities } from '../../helpers/storage_manager/load-provider-capabilities';
 import filterResourcesByCapabilities from '../../helpers/storage_manager/filter-resources-by-capabilities';
 
-const loadProviders = () =>
-  API.get(
-    '/api/providers?expand=resources&attributes=id,name,supports_block_storage'
-    + '&filter[]=supports_block_storage=true&filter[]=supports_add_storage=true',
-  ).then(({ resources }) =>
-    resources.map(({ id, name }) => ({ value: id, label: name })));
+const changeValue = (value, loadSchema, emptySchema) => {
+  if (value === '-1') {
+    emptySchema();
+  } else {
+    miqSparkleOn();
+    API.options(`/api/storage_services?ems_id=${value}`).then(loadSchema()).then(miqSparkleOff);
+  }
+};
+
+const storageManagers = (supports) =>
+  API.get(`/api/providers?expand=resources&attributes=id,name,${supports}&filter[]=${supports}=true`)
+    .then(({ resources }) => {
+      const storageManagersOptions = resources.map(({ id, name }) => ({ label: name, value: id }));
+      storageManagersOptions.unshift({ label: `<${__('Choose')}>`, value: '-1' });
+      return storageManagersOptions;
+    });
 
 const getProviderCapabilities = async(providerId) => API.get(`/api/providers/${providerId}?attributes=capabilities`)
   .then((result) => result.capabilities);
 
-const createSchema = (edit, ems, initialValues, state, setState) => {
+const createSchema = (fields, edit, ems, loadSchema, emptySchema) => {
+  const idx = fields.findIndex((field) => field.name === 'required_capabilities');
+  const supports = edit ? 'supports_storage_service' : 'supports_storage_service_create';
   let providerCapabilities;
-  let emsId = state.ems_id;
-  if (initialValues && initialValues.ems_id) {
-    emsId = initialValues.ems_id;
-  }
 
   return ({
     fields: [
       {
         component: componentTypes.SELECT,
         name: 'ems_id',
-        key: `${emsId}`,
         id: 'ems_id',
         label: __('Storage Manager'),
-        placeholder: __('<Choose>'),
-        onChange: (value) => {
-          emsId = value;
-          return setState({ ...state, ems_id: value });
-        },
-        loadOptions: loadProviders,
+        onChange: (value) => changeValue(value, loadSchema, emptySchema),
+        loadOptions: () => storageManagers(supports),
         isDisabled: edit || ems,
         isRequired: true,
-        includeEmpty: true,
         validate: [{ type: validatorTypes.REQUIRED }],
       },
       {
         component: componentTypes.TEXT_FIELD,
         name: 'name',
         id: 'name',
-        label: __('Name:'),
+        label: __('Service Name'),
         isRequired: true,
         validate: [
-          { type: validatorTypes.REQUIRED },
+          {
+            type: validatorTypes.REQUIRED,
+          },
+          {
+            type: 'pattern',
+            pattern: '^[a-zA-Z0-9-_. ]*$',
+            message: __('The name can contain letters, numbers, spaces, periods, dashes and underscores'),
+          },
+          {
+            type: 'pattern',
+            pattern: '^[^ ]+( +[^ ]+)*$',
+            message: __('The name must not begin or end with a space'),
+          },
+          {
+            type: 'pattern',
+            pattern: '^[a-zA-Z_]',
+            message: __('The name must begin with a letter or an underscore'),
+          },
           async(value) => validateName('storage_services', value, edit),
         ],
       },
@@ -57,25 +76,22 @@ const createSchema = (edit, ems, initialValues, state, setState) => {
         label: __('Description:'),
         isRequired: false,
       },
-      {
-        component: componentTypes.SELECT,
-        name: 'required_capabilities',
-        id: 'required_capabilities',
-        label: __('Required Capabilities'),
-        placeholder: __('<Choose>'),
-        loadOptions: () => (emsId ? loadProviderCapabilities(emsId) : Promise.resolve([])),
-        isDisabled: edit,
-        isRequired: true,
-        isMulti: true,
-        validate: [{ type: validatorTypes.REQUIRED }],
-        condition: { when: 'ems_id', isNotEmpty: true },
-      },
+      ...(idx === -1 ? fields : [
+        ...fields.slice(0, idx),
+        {
+          ...fields[idx],
+          resolveProps: ({ options }, _input, { getState }) => ({
+            options: options.filter(({ condition }) => !condition || parseCondition(condition, getState().values).result),
+          }),
+        },
+        ...fields.slice(idx + 1),
+      ]),
       {
         component: 'enhanced-select',
         name: 'storage_resource_id',
         id: 'storage_resource_id',
         label: __('Storage Resources'),
-        condition: { when: 'required_capabilities', isNotEmpty: true },
+        condition: { when: 'compression', isNotEmpty: true },
         onInputChange: () => null,
         isRequired: true,
         helperText: __('Select storage resources to attach to the new service. Volumes for this service will be created on these resources.'),
@@ -85,8 +101,14 @@ const createSchema = (edit, ems, initialValues, state, setState) => {
         ],
         isMulti: true,
         resolveProps: (_props, _field, { getState }) => {
-          const capabilityValues = getState().values.required_capabilities.map(({ value }) => value);
-          const emsId = getState().values.ems_id;
+          const stateValues = getState().values;
+          const emsId = stateValues.ems_id;
+          const capabilityValues = [];
+
+          const capabilityNames = fields.find((object) => object.id === 'required_capabilities')
+            .fields.map((capability) => capability.id);
+          capabilityNames.forEach((capabilityName) => capabilityValues.push(stateValues[capabilityName]));
+
           return {
             key: JSON.stringify(capabilityValues),
             loadOptions: async() => {
