Created component select logic for display and disabled state

packages/strapi-plugin-content-type-builder/admin/src/components/ComponentSelect/Value.js

@@ -16,7 +16,12 @@ const Value = ({ children, ...props }) => {
     category,
     schema: { name },
   } = selectedComponent;
-
+  const {
+    selectProps: { componentCategory, componentName, isCreatingComponent },
+  } = props;
+  console.log({ props });
+  const displayedCategory = isCreatingComponent ? componentCategory : category;
+  const displayedName = isCreatingComponent ? componentName : name;
   const style = { color: '#333740' };
 
   return (
@@ -24,10 +29,10 @@ const Value = ({ children, ...props }) => {
       {!!value && (
         <>
           <span style={{ fontWeight: 700, ...style }}>
-            {upperFirst(category)}
+            {upperFirst(displayedCategory)}
           </span>
           <span style={style}>&nbsp;—&nbsp;</span>
-          <span style={style}>{name}</span>
+          <span style={style}>{displayedName}</span>
         </>
       )}
     </SingleValue>
@@ -36,10 +41,20 @@ const Value = ({ children, ...props }) => {
 
 Value.defaultProps = {
   children: null,
+  selectProps: {
+    componentCategory: null,
+    componentName: null,
+    isCreatingComponent: false,
+  },
 };
 
 Value.propTypes = {
   children: PropTypes.string,
+  selectProps: PropTypes.shape({
+    componentCategory: PropTypes.string,
+    componentName: PropTypes.string,
+    isCreatingComponent: PropTypes.bool,
+  }),
 };
 
 export default Value;

packages/strapi-plugin-content-type-builder/admin/src/components/ComponentSelect/index.js

@@ -4,7 +4,15 @@ import PropTypes from 'prop-types';
 import MenuList from './MenuList';
 import Value from './Value';
 
-const ComponentSelect = ({ onChange, name, value, styles }) => {
+const ComponentSelect = ({
+  componentCategoryNeededForAddingAfieldWhileCreatingAComponent,
+  componentNameNeededForAddingAfieldWhileCreatingAComponent,
+  isCreatingComponentWhileAddingAField,
+  onChange,
+  name,
+  value,
+  styles,
+}) => {
   // Create a ref in order to access the StateManager
   // So we can close the menu after clicking on a menu item
   // This allows us to get rid of the menuIsOpen state management
@@ -22,6 +30,12 @@ const ComponentSelect = ({ onChange, name, value, styles }) => {
   return (
     <Select
       isClearable
+      isDisabled={isCreatingComponentWhileAddingAField}
+      isCreatingComponent={isCreatingComponentWhileAddingAField}
+      componentCategory={
+        componentCategoryNeededForAddingAfieldWhileCreatingAComponent
+      }
+      componentName={componentNameNeededForAddingAfieldWhileCreatingAComponent}
       name={name}
       onChange={handleChange}
       onClickOption={onChange}
@@ -39,11 +53,17 @@ const ComponentSelect = ({ onChange, name, value, styles }) => {
 };
 
 ComponentSelect.defaultProps = {
-  error: null,
+  componentCategoryNeededForAddingAfieldWhileCreatingAComponent: null,
+  componentNameNeededForAddingAfieldWhileCreatingAComponent: null,
+  isCreatingComponentWhileAddingAField: false,
   value: null,
 };
 
 ComponentSelect.propTypes = {
+  componentCategoryNeededForAddingAfieldWhileCreatingAComponent:
+    PropTypes.string,
+  componentNameNeededForAddingAfieldWhileCreatingAComponent: PropTypes.string,
+  isCreatingComponentWhileAddingAField: PropTypes.bool,
   name: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   styles: PropTypes.object.isRequired,

packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/index.js

@@ -57,6 +57,7 @@ const FormModal = () => {
     componentToCreate,
     formErrors,
     initialData,
+    isCreatingComponentWhileAddingAField,
     modifiedData,
   } = reducerState.toJS();
 
@@ -608,6 +609,19 @@ const FormModal = () => {
                                     booleanBox: BooleanBox,
                                   }}
                                   isCreating={isCreating}
+                                  isCreatingComponentWhileAddingAField={
+                                    isCreatingComponentWhileAddingAField
+                                  }
+                                  componentCategoryNeededForAddingAfieldWhileCreatingAComponent={get(
+                                    componentToCreate,
+                                    'category',
+                                    null
+                                  )}
+                                  componentNameNeededForAddingAfieldWhileCreatingAComponent={get(
+                                    componentToCreate,
+                                    'name',
+                                    null
+                                  )}
                                   value={value}
                                   {...input}
                                   error={

packages/strapi-plugin-content-type-builder/admin/src/translations/en.json

@@ -253,7 +253,7 @@
   "modalForm.sub-header.chooseAttribute.component": "Select a field for your component",
   "modalForm.sub-header.chooseAttribute.contentType": "Select a field for your content type",
   "modalForm.sub-header.attribute.create": "Add new {type} field",
-  "modalForm.sub-header.attribute.create.step": "Add new component ({step})/2)",
+  "modalForm.sub-header.attribute.create.step": "Add new component ({step}/2)",
   "modalForm.sub-header.attribute.edit": "Edit {name}",
   "modalForm.components.create-component.category.label": "Select a category or enter a name to create a new one",
   "modalForm.attributes.select-component": "Select a component",