Merge pull request #12500 from godzzo/godzzo/issue12499

DynamicZone - extend FriendlyName with MainValue

packages/core/admin/admin/src/content-manager/components/DynamicZone/components/Component/hooks/tests/getDisplayedValue.test.js

@@ -0,0 +1,19 @@
+import { getDisplayedValue } from '../useMainValue';
+
+describe('getDisplayedValue', () => {
+  it('returns the mainField value', () => {
+    const modifiedData = {
+      DeepComplex: [
+        {
+          Title: 'File',
+        },
+      ],
+    };
+    const componentFieldPath = ['DeepComplex', 0];
+    const mainField = 'Title';
+
+    const normalizedContent = getDisplayedValue(modifiedData, componentFieldPath, mainField);
+
+    expect(normalizedContent).toEqual('File');
+  });
+});

packages/core/admin/admin/src/content-manager/components/DynamicZone/components/Component/hooks/useMainValue.js

@@ -0,0 +1,21 @@
+import { useMemo } from 'react';
+import get from 'lodash/get';
+import toString from 'lodash/toString';
+import { useCMEditViewDataManager } from '@strapi/helper-plugin';
+
+export function getDisplayedValue(modifiedData, componentFieldPath, mainField) {
+  return toString(get(modifiedData, [...componentFieldPath, mainField], ''));
+}
+
+function useMainValue(schema, componentFieldPath) {
+  const { modifiedData } = useCMEditViewDataManager();
+
+  const mainField = useMemo(() => get(schema, ['settings', 'mainField'], 'id'), [schema]);
+
+  const displayedValue =
+    mainField === 'id' ? '' : getDisplayedValue(modifiedData, componentFieldPath, mainField);
+
+  return displayedValue.trim().length < 1 ? '' : ` - ${displayedValue}`;
+}
+
+export default useMainValue;

packages/core/admin/admin/src/content-manager/components/DynamicZone/components/Component/index.js

@@ -18,6 +18,7 @@ import { useContentTypeLayout } from '../../../../hooks';
 import { getTrad } from '../../../../utils';
 import FieldComponent from '../../../FieldComponent';
 import Rectangle from './Rectangle';
+import { connect, select } from './utils';
 
 const ActionStack = styled(Stack)`
   svg {
@@ -55,6 +56,8 @@ const Component = ({
   removeComponentFromDynamicZone,
   showDownIcon,
   showUpIcon,
+  // Passed with the select function
+  mainValue,
 }) => {
   const { formatMessage } = useIntl();
   const { getComponentLayout } = useContentTypeLayout();
@@ -144,7 +147,7 @@ const Component = ({
                 )}
               </ActionStack>
             }
-            title={friendlyName}
+            title={`${friendlyName}${mainValue}`}
             togglePosition="left"
           />
           <AccordionContent>
@@ -186,6 +189,9 @@ Component.propTypes = {
   removeComponentFromDynamicZone: PropTypes.func.isRequired,
   showDownIcon: PropTypes.bool.isRequired,
   showUpIcon: PropTypes.bool.isRequired,
+  mainValue: PropTypes.string.isRequired,
 };
 
-export default memo(Component, isEqual);
+const Memoized = memo(Component, isEqual);
+
+export default connect(Memoized, select);

packages/core/admin/admin/src/content-manager/components/DynamicZone/components/Component/utils/connect.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function connect(WrappedComponent, select) {
+  return (props) => {
+    const selectors = select(props);
+
+    return <WrappedComponent {...props} {...selectors} />;
+  };
+}
+
+export default connect;

packages/core/admin/admin/src/content-manager/components/DynamicZone/components/Component/utils/index.js

@@ -0,0 +1,2 @@
+export { default as connect } from './connect';
+export { default as select } from './select';

packages/core/admin/admin/src/content-manager/components/DynamicZone/components/Component/utils/select.js

@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+import useMainValue from '../hooks/useMainValue';
+import { useContentTypeLayout } from '../../../../../hooks';
+
+function useSelect({ componentUid, name, index }) {
+  const { getComponentLayout } = useContentTypeLayout();
+  const componentLayoutData = useMemo(() => {
+    const layout = getComponentLayout(componentUid);
+
+    return layout;
+  }, [componentUid, getComponentLayout]);
+  const mainValue = useMainValue(componentLayoutData, [name, index]);
+
+  return {
+    mainValue,
+  };
+}
+
+export default useSelect;