PF3->Carbon: converted select component

ManageIQ · Jan 18, 2021 · 8454084 · 8454084
1 parent 087260c
commit 8454084
Show file tree

Hide file tree

Showing 8 changed files with 199 additions and 1,347 deletions.
diff --git a/app/javascript/components/ansible-credentials-form/ansible-credentials-form.schema.js b/app/javascript/components/ansible-credentials-form/ansible-credentials-form.schema.js
@@ -34,6 +34,7 @@ const createSchema = (fields, promise, edit, loadSchema) => ({
       validate: [{ type: validatorTypes.REQUIRED }],
       isRequired: true,
       isDisabled: edit,
+      includeEmpty: true,
       onChange: value => promise.then(loadSchema(value)),
       loadOptions: () =>
         promise.then(

diff --git a/app/javascript/components/cloud-network-form/cloud-network-form.schema.js b/app/javascript/components/cloud-network-form/cloud-network-form.schema.js
@@ -11,10 +11,8 @@ export const providersNetworkTypes = [
   { label: __('VXLAN'), value: 'vxlan' },
 ];
 
-const getTenants = id => API.get(`/api/providers/${id}/cloud_tenants?expand=resources&attributes=id,name`).then(data => [
-  { label: `<${__('Choose')}>` },
-  ...data.resources.map(({ id, name }) => ({ value: id, label: name })),
-]);
+const getTenants = (id) => API.get(`/api/providers/${id}/cloud_tenants?expand=resources&attributes=id,name`).then((data) =>
+  data.resources.map(({ id, name }) => ({ value: id, label: name })));
 
 function createSchema(ems, cloudNetworkId) {
   const dynamicPlacement = ems.map((tenant => ({
@@ -31,6 +29,7 @@ function createSchema(ems, cloudNetworkId) {
     }],
     isDisabled: !!cloudNetworkId,
     loadOptions: () => getTenants(tenant.id),
+    includeEmpty: true,
     condition: {
       when: 'ems_id',
       is: tenant.id,
@@ -208,23 +207,20 @@ function createSchema(ems, cloudNetworkId) {
       id: 'cloud_network_external_facing',
       name: 'external_facing',
       label: __('External Router'),
-      bsSize: 'mini',
       onText: __('Yes'),
       offText: __('No'),
     }, {
       component: componentTypes.SWITCH,
       id: 'cloud_network_enabled',
       name: 'enabled',
       label: __('Administrative State'),
-      bsSize: 'mini',
       onText: __('Up'),
       offText: __('Down'),
     }, {
       component: componentTypes.SWITCH,
       id: 'cloud_network_shared',
       name: 'shared',
       label: __('Shared'),
-      bsSize: 'mini',
       onText: __('Yes'),
       offText: __('No'),
     }],

diff --git a/app/javascript/components/orchestration-template/orchestration-template-form.schema.js b/app/javascript/components/orchestration-template/orchestration-template-form.schema.js
@@ -84,7 +84,7 @@ const orchestrationFormSchema = (isEditing = false, isCopying = false, initialVa
       label: __('Provider'),
       component: componentTypes.SELECT,
       loadOptions: getManagers,
-      placeholder: `<${__('Choose')}>`,
+      includeEmpty: true,
       isRequired: true,
       validateOnMount: true,
       clearOnUnmount: true,

diff --git a/app/javascript/components/physical-storage-form/physical-storage-form.schema.js b/app/javascript/components/physical-storage-form/physical-storage-form.schema.js
@@ -23,6 +23,7 @@ const createSchema = (emsId, setEmsId) => ({
       label: __('Provider:'),
       isRequired: true,
       loadOptions: loadProviders,
+      includeEmpty: true,
       onChange: value => setEmsId(value),
       validate: [{ type: validatorTypes.REQUIRED }],
     },
@@ -42,6 +43,7 @@ const createSchema = (emsId, setEmsId) => ({
       isRequired: true,
       validate: [{ type: validatorTypes.REQUIRED }],
       loadOptions: () => (emsId ? loadFamilies(emsId) : Promise.resolve([])),
+      includeEmpty: true,
       key: emsId,
       condition: {
         when: 'ems_id',

diff --git a/app/javascript/components/provider-form/index.jsx b/app/javascript/components/provider-form/index.jsx
@@ -35,6 +35,7 @@ const commonFields = [
     id: 'zone_id',
     name: 'zone_id',
     label: __('Zone'),
+    includeEmpty: true,
     loadOptions: () =>
       API.get('/api/zones?expand=resources&attributes=id,name,visible&filter[]=visible!=false&sort_by=name')
         .then(({ resources }) => resources.map(({ id: value, name: label }) => ({ value, label }))),
@@ -64,6 +65,7 @@ const typeSelectField = (edit, filter, setState) => ({
   label: __('Type'),
   kind: filter,
   isDisabled: edit,
+  includeEmpty: true,
   loadOptions: () =>
     API.options('/api/providers').then(({ data: { supported_providers } }) => supported_providers // eslint-disable-line camelcase
       .filter(({ kind }) => kind === filter)

diff --git a/app/javascript/components/select/index.jsx b/app/javascript/components/select/index.jsx
@@ -4,7 +4,13 @@ import { components } from '@data-driven-forms/carbon-component-mapper';
 
 import { useFieldApi } from '@@ddf';
 
-const SelectWithOnChange = ({ onChange, ...props }) => {
+const SelectWithOnChange = ({
+  includeEmpty,
+  loadOptions: _loadOptions,
+  onChange,
+  placeholder,
+  ...props
+}) => {
   if (onChange) {
     const { input: { value } } = useFieldApi(props);
 
@@ -15,15 +21,32 @@ const SelectWithOnChange = ({ onChange, ...props }) => {
     }, [value]);
   }
 
-  return <components.Select placeholder={`<${__('Choose')}>`} {...props} />;
+  // Add a dummy placeholder field to the list of the dynamically loaded options
+  const loadOptions = includeEmpty !== true ? _loadOptions : ((...args) => _loadOptions(...args).then((items) => [
+    {
+      label: placeholder,
+      value: undefined,
+    },
+    ...items,
+  ]));
+
+  return <components.Select placeholder={placeholder} loadOptions={loadOptions} {...props} />;
 };
 
 SelectWithOnChange.propTypes = {
+  includeEmpty: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  loadOptions: PropTypes.func,
   onChange: PropTypes.func,
+  placeholder: PropTypes.string,
 };
 
 SelectWithOnChange.defaultProps = {
+  includeEmpty: undefined,
+  isDisabled: undefined,
+  loadOptions: undefined,
   onChange: undefined,
+  placeholder: `<${__('Choose')}>`,
 };
 
 export default SelectWithOnChange;
diff --git a/app/javascript/components/vm-server-relationship-form/vm-server-relationship-form.schema.js b/app/javascript/components/vm-server-relationship-form/vm-server-relationship-form.schema.js
@@ -7,6 +7,7 @@ const createSchema = (promise) => ({
     id: 'serverId',
     label: __('Select Server:'),
     placeholder: `<${__('Not a Server')}>`,
+    includeEmpty: true,
     loadOptions: () => promise.then(({ resources }) => resources.map(({ id, name }) => ({ label: name, value: id }))),
   }],
 });