Remove mockData and call API

Signed-off-by: HichamELBSI <elabbassih@gmail.com>

packages/strapi-plugin-content-manager/admin/src/components/RelationPreviewList/RelationPreviewTooltip.js

@@ -4,8 +4,8 @@ import { LoadingIndicator, request } from 'strapi-helper-plugin';
 import PropTypes from 'prop-types';
 
 import getRequestUrl from '../../utils/getRequestUrl';
-import getMockData from './mockData';
 import Tooltip from '../Tooltip';
+import getDisplayedValue from '../CustomTable/Row/utils/getDisplayedValue';
 
 const RelationPreviewTooltip = ({ tooltipId, rowId, mainField, name }) => {
   const [isLoading, setIsLoading] = useState(true);
@@ -17,30 +17,28 @@ const RelationPreviewTooltip = ({ tooltipId, rowId, mainField, name }) => {
     async signal => {
       const requestURL = getRequestUrl(`${endPoint}/${rowId}/${name}`);
       try {
-        // TODO : Wait for the API
-        const { data } = await request(requestURL, {
+        const { results } = await request(requestURL, {
           method: 'GET',
           signal,
         });
 
-        console.log(data);
-        setRelationData(getMockData(mainField));
+        setRelationData(results);
         setIsLoading(false);
       } catch (err) {
         console.error({ err });
         setIsLoading(false);
       }
     },
-    [endPoint, mainField, name, rowId]
+    [endPoint, name, rowId]
   );
 
   useEffect(() => {
     const abortController = new AbortController();
     const { signal } = abortController;
-    // temp : Should remove the setTimeout and fetch the data
+
     const timeout = setTimeout(() => {
       fetchRelationData(signal);
-    }, 1000);
+    }, 500);
 
     return () => {
       clearTimeout(timeout);
@@ -48,6 +46,13 @@ const RelationPreviewTooltip = ({ tooltipId, rowId, mainField, name }) => {
     };
   }, [fetchRelationData]);
 
+  const getValueToDisplay = useCallback(
+    item => {
+      return getDisplayedValue(mainField.schema.type, item[mainField.name], mainField.name);
+    },
+    [mainField]
+  );
+
   // Used to update the position after the loader
   useLayoutEffect(() => {
     if (!isLoading && tooltipRef.current) {
@@ -67,7 +72,7 @@ const RelationPreviewTooltip = ({ tooltipId, rowId, mainField, name }) => {
             {relationData.map(item => (
               <Padded key={item.id} top bottom size="xs">
                 <Text ellipsis color="white">
-                  {item[mainField.name]}
+                  {getValueToDisplay(item)}
                 </Text>
               </Padded>
             ))}

packages/strapi-plugin-content-manager/admin/src/components/RelationPreviewList/mockData.js

@@ -1,56 +0,0 @@
-export default mainField => [
-  {
-    id: 1,
-    [mainField]:
-      'Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui.',
-  },
-  {
-    id: 2,
-    [mainField]:
-      'Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui.',
-  },
-  {
-    id: 3,
-    [mainField]:
-      'Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui.',
-  },
-  {
-    id: 4,
-    [mainField]:
-      'Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui.',
-  },
-  {
-    id: 5,
-    [mainField]:
-      'Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui.Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui.Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui.',
-  },
-  {
-    id: 6,
-    [mainField]: 'Aliquip dolor ullamco eu',
-  },
-  {
-    id: 7,
-    [mainField]:
-      'Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui.Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui.Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui.',
-  },
-  {
-    id: 8,
-    [mainField]:
-      'Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui.',
-  },
-  {
-    id: 9,
-    [mainField]:
-      'Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui.Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui.Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui.',
-  },
-  {
-    id: 10,
-    [mainField]:
-      'Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui.Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui.Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui.',
-  },
-  {
-    id: 11,
-    [mainField]:
-      'Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui.Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui.Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui. Aliquip dolor ullamco eu proident tempor duis dolor elit aliqua excepteur veniam proident occaecat qui.',
-  },
-];

packages/strapi-plugin-content-manager/admin/src/hooks/useFetchContentTypeLayout/utils/formatLayouts.js

@@ -108,7 +108,7 @@ const formatLayoutWithMetas = (contentTypeConfiguration, ctUid, models) => {
   return formatted;
 };
 
-const formatListLayoutWithMetas = contentTypeConfiguration => {
+const formatListLayoutWithMetas = (contentTypeConfiguration, models) => {
   const formatted = contentTypeConfiguration.layouts.list.reduce((acc, current) => {
     const fieldSchema = get(contentTypeConfiguration, ['attributes', current], {});
     let metadatas = get(contentTypeConfiguration, ['metadatas', current, 'list'], {});
@@ -118,7 +118,7 @@ const formatListLayoutWithMetas = contentTypeConfiguration => {
     if (type === 'relation') {
       metadatas = {
         ...metadatas,
-        mainField: get(contentTypeConfiguration, ['metadatas', current, 'edit', 'mainField'], 'id'),
+        mainField: getMainField(current, contentTypeConfiguration, models),
       };
     }
 

packages/strapi-plugin-content-manager/admin/src/hooks/useFetchContentTypeLayout/utils/tests/formatLayouts.test.js

@@ -487,16 +487,29 @@ describe('Content Manager | hooks | useFetchContentTypeLayout | utils ', () => {
   describe('formatListLayoutWithMetas', () => {
     it('should format the list layout correctly', () => {
       const data = {
+        uid: 'address',
         layouts: {
-          list: ['test'],
+          list: ['test', 'categories'],
         },
         metadatas: {
           test: {
             list: { ok: true },
           },
+          categories: {
+            list: {
+              ok: true,
+            },
+            edit: {
+              mainField: 'name',
+            },
+          },
         },
         attributes: {
           test: { type: 'string' },
+          categories: {
+            type: 'relation',
+            targetModel: 'category',
+          },
         },
       };
       const expected = [
@@ -506,9 +519,34 @@ describe('Content Manager | hooks | useFetchContentTypeLayout | utils ', () => {
           metadatas: { ok: true },
           fieldSchema: { type: 'string' },
         },
+        {
+          name: 'categories',
+          key: '__categories_key__',
+          metadatas: {
+            ok: true,
+            mainField: {
+              name: 'name',
+              schema: {
+                type: 'string',
+              },
+              queryInfos: { defaultParams: {}, endPoint: 'collection-types/address' },
+            },
+          },
+          fieldSchema: { type: 'relation', targetModel: 'category' },
+        },
+      ];
+      const models = [
+        {
+          uid: 'category',
+          attributes: {
+            name: {
+              type: 'string',
+            },
+          },
+        },
       ];
 
-      expect(formatListLayoutWithMetas(data)).toEqual(expected);
+      expect(formatListLayoutWithMetas(data, models)).toEqual(expected);
     });
   });