Add trad for single value

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

@@ -13,6 +13,7 @@ const MenuList = ({
     name,
     onClickOption,
     refState,
+    value,
   },
   ...rest
 }) => {
@@ -50,6 +51,8 @@ const MenuList = ({
                     return null;
                   }
 
+                  const isSelected = value.value === component.uid;
+
                   return (
                     <li
                       key={component.uid}
@@ -61,7 +64,13 @@ const MenuList = ({
                         });
                       }}
                     >
-                      <p datadescr={upperFirst(component.schema.name)}>
+                      <p
+                        datadescr={upperFirst(component.schema.name)}
+                        style={{
+                          color: isSelected ? '#007eff' : '',
+                          fontWeight: isSelected ? '700' : '400',
+                        }}
+                      >
                         {upperFirst(component.schema.name)}
                       </p>
                     </li>
@@ -86,6 +95,9 @@ MenuList.defaultProps = {
         },
       },
     },
+    value: {
+      value: '',
+    },
   },
 };
 
@@ -95,6 +107,7 @@ MenuList.propTypes = {
     name: PropTypes.string.isRequired,
     onClickOption: PropTypes.func.isRequired,
     refState: PropTypes.object,
+    value: PropTypes.object,
   }).isRequired,
 };
 

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

@@ -1,8 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { components } from 'react-select';
-import { get } from 'lodash';
+import { get, size } from 'lodash';
+import { FormattedMessage } from 'react-intl';
 import useDataManager from '../../hooks/useDataManager';
+import getTrad from '../../utils/getTrad';
 import UpperFirst from '../UpperFirst';
 
 const Value = ({ children, ...props }) => {
@@ -29,6 +31,11 @@ const Value = ({ children, ...props }) => {
   const displayedCategory = isCreatingComponent ? componentCategory : category;
   const displayedName = isCreatingComponent ? componentName : name;
   const style = { color: '#333740' };
+  const valueLength = size(value);
+  const message =
+    valueLength > '0'
+      ? getTrad('components.componentSelect.value-components')
+      : getTrad('components.componentSelect.value-components');
 
   return (
     <SingleValue {...props}>
@@ -42,7 +49,9 @@ const Value = ({ children, ...props }) => {
         </>
       )}
       {isMultiple && (
-        <span style={style}>{value.length} components selected</span>
+        <FormattedMessage id={message} values={{ number: valueLength }}>
+          {msg => <span style={style}>{msg}</span>}
+        </FormattedMessage>
       )}
     </SingleValue>
   );

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

@@ -30,6 +30,7 @@ const CreatableSelect = ({ onChange, name, styles, value }) => {
     <Creatable
       value={getValue()}
       isClearable
+      // menuIsOpen
       onChange={handleChange}
       styles={styles}
       options={formatOptions()}

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

@@ -8,7 +8,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { TabContent, TabPane, Nav } from 'reactstrap';
-import { Plus } from '@buffetjs/icons';
+// import { Plus } from '@buffetjs/icons';
 
 import getTrad from '../../utils/getTrad';
 import ComponentList from '../ComponentList';
@@ -29,9 +29,7 @@ function DynamicZoneList({ customRowComponent, components, addComponent }) {
             <Nav tabs>
               <li>
                 <ComponentButton onClick={addComponent}>
-                  <div>
-                    <Plus />
-                  </div>
+                  <div>{/* <Plus /> */}+</div>
                   <p>
                     <FormattedMessage id={getTrad('button.component.add')} />
                   </p>

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

@@ -28,6 +28,16 @@ const WrapperSelect = ({ error, label, name, type, ...rest }) => {
         borderTopColor: '#E3E9F3 !important',
       };
     },
+    option: (base, state) => {
+      console.log({ base, state });
+      return {
+        ...base,
+        // backgroundColor: state.isSelected ? '#DEEBFF' : base.backgroundColor,
+        backgroundColor: '#fff',
+        color: state.isSelected ? '#007eff' : '#333740',
+        fontWeight: state.isSelected ? '600' : '400',
+      };
+    },
   };
 
   const Component =

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

@@ -272,5 +272,7 @@
   "modalForm.sub-header.addComponentToDynamicZone": "Add new component to the dynamic zone",
   "popUpWarning.bodyMessage.cancel-modifications": "Are you sure you want to cancel your modifications?",
   "popUpWarning.bodyMessage.cancel-modifications.with-components": "Are you sure you want to cancel your modifications? Some components have been created or modified...",
-  "prompt.unsaved": "Are you sure you want to leave? All your modifications will be lost."
+  "prompt.unsaved": "Are you sure you want to leave? All your modifications will be lost.",
+  "components.componentSelect.value-components": "{number} components selected",
+  "components.componentSelect.value-component": "{number} component selected"
 }