fix: Show Summary in EditView

README.md

@@ -69,7 +69,8 @@ npm run build
 You'll be able from the SEO settings page to import a `shared.seo` & `shared.meta-social` components from any GitHub repository By default, our [components GitHub repository](https://github.com/strapi/components) is being used.
 
 **Notice**: If you decide to import your own components, make sure that they belong to a `shared` category that their names is the same (`seo`, `meta-social`).
-**Notice2**: When adding your SEO component, make sure to name it 'seo' and to include it in the root of your Content-Type.
+
+**Notice2**: When adding your SEO component, make sure to include it in the root of your Content-Type.
 
 ## EditView SEO button
 

admin/src/components/CMEditView/RightLinksCompo/SeoChecks/MetaTitleCheck/index.js

@@ -33,7 +33,7 @@ const MetaTitleCheck = ({ metaTitle, checks }) => {
       status = {
         message: formatMessage({
           id: getTrad('SEOChecks.metaTitleCheck.not-found'),
-          defaultMessage: 'No Meta Description has been found.',
+          defaultMessage: 'No Meta Title has been found.',
         }),
         color: 'danger',
       };

admin/src/components/CMEditView/RightLinksCompo/SeoChecks/index.js

@@ -33,6 +33,7 @@ import { getTrad } from '../../../../utils';
 import _ from 'lodash';
 
 const SeoChecks = ({
+  layout,
   modifiedData,
   components,
   contentType,
@@ -41,14 +42,16 @@ const SeoChecks = ({
 }) => {
   const { formatMessage } = useIntl();
 
+  const seoPropName = Object.entries(layout.attributes).find(([, attr]) => attr.type === "component" && attr.component === 'shared.seo')[0];
+  const seo = _.get(modifiedData, seoPropName, null);
+
   const { wordCount, keywordsDensity, emptyAltCount } = getRichTextCheck(
+    seo,
     modifiedData,
     components,
     contentType
   );
 
-  const seo = _.get(modifiedData, 'seo', null);
-
   return (
     <ModalLayout
       onClose={() => setIsVisible((prev) => !prev)}
@@ -77,15 +80,15 @@ const SeoChecks = ({
           <Box padding={4}>
             {checks?.metaTitle && (
               <MetaTitleCheck
-                metaTitle={_.get(modifiedData, 'seo.metaTitle', null)}
+                metaTitle={_.get(seo, 'metaTitle', null)}
                 checks={checks}
               />
             )}
             {checks?.metaDescription && (
               <MetaDescriptionCheck
                 metaDescription={_.get(
-                  modifiedData,
-                  'seo.metaDescription',
+                  seo,
+                  'metaDescription',
                   null
                 )}
                 checks={checks}
@@ -102,25 +105,25 @@ const SeoChecks = ({
             )}
             {checks?.metaSocial && (
               <MetaSocialCheck
-                metaSocial={_.get(modifiedData, 'seo.metaSocial', null)}
+                metaSocial={_.get(seo, 'metaSocial', null)}
                 checks={checks}
               />
             )}
             {checks?.canonicalUrl && (
               <CanonicalUrlCheck
-                canonicalUrl={_.get(modifiedData, 'seo.canonicalURL', null)}
+                canonicalUrl={_.get(seo, 'canonicalURL', null)}
                 checks={checks}
               />
             )}
             {checks?.structuredData && (
               <StructuredDataCheck
-                structuredData={_.get(modifiedData, 'seo.structuredData', null)}
+                structuredData={_.get(seo, 'structuredData', null)}
                 checks={checks}
               />
             )}
             {checks?.metaRobots && (
               <MetaRobotCheck
-                metaRobots={_.get(modifiedData, 'seo.metaRobots', null)}
+                metaRobots={_.get(seo, 'metaRobots', null)}
                 checks={checks}
               />
             )}

admin/src/components/CMEditView/RightLinksCompo/Summary/BrowserPreview/index.js

@@ -27,11 +27,12 @@ import { getTrad } from '../../../../../utils';
 
 import _ from 'lodash';
 
-const BrowserPreview = ({ modifiedData, setIsVisible }) => {
+const BrowserPreview = ({ layout, modifiedData, setIsVisible }) => {
   const { formatMessage } = useIntl();
   const [checked, setChecked] = useState(false);
 
-  const seo = _.get(modifiedData, 'seo', null);
+  const seoPropName = Object.entries(layout.attributes).find(([, attr]) => attr.type === "component" && attr.component === 'shared.seo')[0];
+  const seo = _.get(modifiedData, seoPropName, null);
   const metaTitle = _.get(seo, 'metaTitle', null);
   const metaDescription = _.get(seo, 'metaDescription', null);
   const keywords = _.get(seo, 'keywords', null);

admin/src/components/CMEditView/RightLinksCompo/Summary/SocialPreview/index.js

@@ -25,10 +25,11 @@ import TabContent from './TabContent';
 
 import { Illo } from '../../../../HomePage/Main/EmptyComponentLayout/illo';
 
-const SocialPreview = ({ modifiedData, setIsVisible }) => {
+const SocialPreview = ({ layout, modifiedData, setIsVisible }) => {
   const { formatMessage } = useIntl();
 
-  const seo = _.get(modifiedData, 'seo', null);
+  const seoPropName = Object.entries(layout.attributes).find(([, attr]) => attr.type === "component" && attr.component === 'shared.seo')[0];
+  const seo = _.get(modifiedData, seoPropName, null);
   const metaSocial = _.get(seo, 'metaSocial', []);
   const keywords = _.get(seo, 'keywords', null);
 

admin/src/components/CMEditView/RightLinksCompo/Summary/index.js

@@ -125,18 +125,21 @@ const Summary = () => {
 
         {isBrowserPreviewVisible && (
           <BrowserPreview
+            layout={layout}
             modifiedData={modifiedData}
             setIsVisible={setIsBrowserPreviewVisible}
           />
         )}
         {isSocialPreviewVisible && (
           <SocialPreview
+            layout={layout}
             modifiedData={modifiedData}
             setIsVisible={setIsSocialPreviewVisible}
           />
         )}
         {isSeoChecksVisible && (
           <SeoChecks
+            layout={layout}
             modifiedData={modifiedData}
             components={components}
             contentType={contentType}

admin/src/components/CMEditView/RightLinksCompo/index.js

@@ -9,9 +9,9 @@ import Summary from './Summary';
 import _ from 'lodash';
 
 const SeoChecker = () => {
-  const { modifiedData } = useCMEditViewDataManager();
+  const { layout } = useCMEditViewDataManager();
 
-  if (modifiedData.hasOwnProperty('seo')) {
+  if (Object.values(layout.attributes).some((attr) => attr.type === "component" && attr.component === 'shared.seo')) {
     return (
       <Box
         background="neutral0"

admin/src/components/CMEditView/utils/checks.js

@@ -4,8 +4,8 @@ const settingsAPI = require('../../../api/settings').default;
 
 import { getRichTextCheck } from '../utils';
 
-const getMetaTitleCheckPreview = (modifiedData) => {
-  const metaTitle = _.get(modifiedData, 'seo.metaTitle');
+const getMetaTitleCheckPreview = (seo) => {
+  const metaTitle = _.get(seo, 'metaTitle');
 
   let status = {
     message: '',
@@ -26,8 +26,8 @@ const getMetaTitleCheckPreview = (modifiedData) => {
   return status;
 };
 
-const getMetaDescriptionPreview = (modifiedData) => {
-  const metaDescription = _.get(modifiedData, 'seo.metaDescription');
+const getMetaDescriptionPreview = (seo) => {
+  const metaDescription = _.get(seo, 'metaDescription');
 
   let status = {
     message: '',
@@ -135,8 +135,8 @@ const getKeywordDensityPreview = (keywordsDensity) => {
   return status;
 };
 
-const canonicalUrlPreview = (modifiedData) => {
-  const canonicalUrl = _.get(modifiedData, 'seo.canonicalURL');
+const canonicalUrlPreview = (seo) => {
+  const canonicalUrl = _.get(seo, 'canonicalURL');
   let status = {
     message: '',
     color: 'success',
@@ -177,8 +177,8 @@ const lastUpdatedAtPreview = (modifiedData) => {
   return status;
 };
 
-const metaRobotPreview = (modifiedData) => {
-  const metaRobots = _.get(modifiedData, 'seo.metaRobots');
+const metaRobotPreview = (seo) => {
+  const metaRobots = _.get(seo, 'metaRobots');
   let status = {
     message: '',
     color: 'success',
@@ -192,8 +192,8 @@ const metaRobotPreview = (modifiedData) => {
   return status;
 };
 
-const metaSocialPreview = (modifiedData) => {
-  const metaSocial = _.get(modifiedData, 'seo.metaSocial');
+const metaSocialPreview = (seo) => {
+  const metaSocial = _.get(seo, 'metaSocial');
 
   let status = {
     message: '',
@@ -227,8 +227,8 @@ const metaSocialPreview = (modifiedData) => {
   return status;
 };
 
-const structuredDataPreview = (modifiedData) => {
-  const structuredData = _.get(modifiedData, 'seo.structuredData');
+const structuredDataPreview = (seo) => {
+  const structuredData = _.get(seo, 'structuredData');
   let status = {
     message: '',
     color: 'success',
@@ -245,36 +245,40 @@ const structuredDataPreview = (modifiedData) => {
 const getAllChecks = async (layout, modifiedData, components, contentType) => {
   const defaultSettings = await settingsAPI.get();
 
+  const seoPropName = Object.entries(layout.attributes).find(([, attr]) => attr.type === "component" && attr.component === 'shared.seo')[0];
+  const seo = _.get(modifiedData, seoPropName, null);
+
   const { wordCount, keywordsDensity, emptyAltCount } = getRichTextCheck(
+    seo,
     modifiedData,
     components,
     contentType
   );
 
   let result = {
     ...(defaultSettings[layout?.uid]?.seoChecks?.metaTitle && {
-      metaTitle: getMetaTitleCheckPreview(modifiedData),
+      metaTitle: getMetaTitleCheckPreview(seo),
     }),
     ...(defaultSettings[layout?.uid]?.seoChecks?.wordCount && {
       wordCount: getWordCountPreview(wordCount),
     }),
     ...(defaultSettings[layout?.uid]?.seoChecks?.metaRobots && {
-      metaRobots: metaRobotPreview(modifiedData),
+      metaRobots: metaRobotPreview(seo),
     }),
     ...(defaultSettings[layout?.uid]?.seoChecks?.metaSocial && {
-      metaSocial: metaSocialPreview(modifiedData),
+      metaSocial: metaSocialPreview(seo),
     }),
     ...(defaultSettings[layout?.uid]?.seoChecks?.canonicalUrl && {
-      canonicalUrl: canonicalUrlPreview(modifiedData),
+      canonicalUrl: canonicalUrlPreview(seo),
     }),
     ...(defaultSettings[layout?.uid]?.seoChecks?.lastUpdatedAt && {
       lastUpdatedAt: lastUpdatedAtPreview(modifiedData),
     }),
     ...(defaultSettings[layout?.uid]?.seoChecks?.structuredData && {
-      structuredData: structuredDataPreview(modifiedData),
+      structuredData: structuredDataPreview(seo),
     }),
     ...(defaultSettings[layout?.uid]?.seoChecks?.metaDescription && {
-      metaDescription: getMetaDescriptionPreview(modifiedData),
+      metaDescription: getMetaDescriptionPreview(seo),
     }),
     ...(defaultSettings[layout?.uid]?.seoChecks?.alternativeText && {
       alternativeText: getAlternativeTextPreview(emptyAltCount),

admin/src/components/CMEditView/utils/index.js

@@ -65,7 +65,7 @@ const buildKeywordDensityObject = (keywords, words) => {
   });
 };
 
-const getRichTextCheck = (modifiedData, components, contentType) => {
+const getRichTextCheck = (seo, modifiedData, components, contentType) => {
   const richTextFields = getRichTextFields(
     contentType,
     components,
@@ -83,7 +83,7 @@ const getRichTextCheck = (modifiedData, components, contentType) => {
   let keywords = [];
 
   // Keywords
-  const tmp = _.get(modifiedData, 'seo.keywords', null);
+  const tmp = _.get(seo, 'keywords', null);
   if (tmp) keywords = tmp.toLowerCase().split(',');
   keywordsDensity = {};