feat(SLB-313 SLB-308): store uuid and entity type on cta elements

AmazeeLabs · Apr 16, 2024 · e925360 · e925360
1 parent e61121e
commit e925360
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 7 deletions.
diff --git a/packages/drupal/gutenberg_blocks/src/blocks/cta.tsx b/packages/drupal/gutenberg_blocks/src/blocks/cta.tsx
@@ -26,8 +26,11 @@ registerBlockType('custom/cta', {
       type: 'string',
     },
     // To have an easier integration with entity usage, we also retrieve and
-    // store the uuid of internal links.
-    uuid: {
+    // store the uuid (data-id) and the entity type of internal links.
+    'data-id': {
+      type: 'string',
+    },
+    'data-entity-type': {
       type: 'string',
     },
     openInNewTab: {
@@ -61,11 +64,37 @@ registerBlockType('custom/cta', {
             openInNewTab: props.attributes.openInNewTab,
           }}
           settings={{}}
+          // If you want to use a specific linkit profile for the suggestions,
+          // then you can do that by using the 'suggestionsQuery' property, like
+          // the one bellow, and change the 'subtype' property to the machine
+          // name of the linkit profile. By default, the 'gutenberg' profile
+          // is used. Of course, in this case, if the linkit profile can search
+          // through multiple entity types, then you'll have to set the value
+          // for 'data-entity-type' in the onChange() handler by yourself.
+
+          //suggestionsQuery={{
+          //  type: 'post',
+          //  subtype: 'gutenberg',
+          //}}
           // @ts-ignore
           onChange={(link) => {
             props.setAttributes({
               url: link.url,
-              uuid: link.id,
+              'data-id': link.id,
+              'data-entity-type':
+                // At the moment, the silverback_gutenberg link autocomplete
+                // controller does not return the machine name of the entity
+                // type. Instead, it returns the human readable, translated,
+                // entity type label. We should refactor the LinkAutocomplete
+                // controller to return the machine name of the entity type, and
+                // then we can set the data-entity-type value more accurate.
+                // Right now, we just make a "guess" based on the the human
+                // readable label for English and German.
+                link.type.startsWith('Media') || link.type.startsWith('Medien')
+                  ? 'media'
+                  : link.type !== 'URL'
+                    ? 'node'
+                    : '',
             });
           }}
         />

diff --git a/packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml b/packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml
@@ -74,9 +74,11 @@ default:
         <!-- wp:custom/image-teaser {"mediaEntityIds":["72187a1f-3e48-4b45-a9b7-189c6fd7ee26"],"title":"Teaser 2","ctaUrl":"https://google.com","ctaText":"Bar"} /-->
         <!-- /wp:custom/image-teasers -->
 
-        <!-- wp:custom/cta {"url":"/en/drupal","text":"Internal CTA","uuid":"f1f827c9-ed06-4e7d-b89d-a169e70a459c"} /-->
+        <!-- wp:custom/cta {"url":"/en/drupal","text":"Internal CTA","data-id":"f1f827c9-ed06-4e7d-b89d-a169e70a459c","data-entity-type":"node"} /-->
 
-        <!-- wp:custom/cta {"url":"https://www.google.com","text":"External CTA","uuid":"https://www.google.com","openInNewTab":true} /-->
+        <!-- wp:custom/cta {"url":"https://www.google.com","text":"External CTA","data-id":"https://www.google.com","data-entity-type":"","openInNewTab":true} /-->
+
+        <!-- wp:custom/cta {"url":"/media/1","text":"CTA with link to media","data-id":"b998ae5e-8b56-40ca-8f80-fd4404e7e716","data-entity-type":"media"} /-->
         <!-- wp:paragraph -->
         <p></p>
         <!-- /wp:paragraph -->
@@ -142,9 +144,11 @@ translations:
           <blockquote class="wp-block-quote"><p>Quote DE</p><cite>Citation DE</cite></blockquote>
           <!-- /wp:quote -->
 
-          <!-- wp:custom/cta {"url":"/en/drupal","text":"Internal CTA DE","uuid":"f1f827c9-ed06-4e7d-b89d-a169e70a459c"} /-->
+          <!-- wp:custom/cta {"url":"/en/drupal","text":"Internal CTA DE","data-id":"f1f827c9-ed06-4e7d-b89d-a169e70a459c","data-entity-type":"node"} /-->
+
+          <!-- wp:custom/cta {"url":"https://www.example.com","text":"External CTA DE","data-id":"https://www.example.com","data-entity-type":"","openInNewTab":true} /-->
 
-          <!-- wp:custom/cta {"url":"https://www.example.com","text":"External CTA DE","uuid":"https://www.example.com","openInNewTab":true} /-->
+          <!-- wp:custom/cta {"url":"/media/1","text":"CTA with link to media DE","data-id":"b998ae5e-8b56-40ca-8f80-fd4404e7e716","data-entity-type":"media"} /-->
           <!-- /wp:custom/content -->
         format: gutenberg
         summary: ''
diff --git a/packages/schema/src/fragments/Page.gql b/packages/schema/src/fragments/Page.gql
@@ -32,6 +32,7 @@ fragment Page on Page {
     ...BlockMedia
     ...BlockForm
     ...BlockImageTeasers
+    ...BlockCta
   }
   metaTags {
     tag

diff --git a/packages/schema/src/fragments/PageContent/BlockCta.gql b/packages/schema/src/fragments/PageContent/BlockCta.gql
@@ -0,0 +1,5 @@
+fragment BlockCta on BlockCta {
+  url
+  text
+  openInNewTab
+}
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx b/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx
@@ -0,0 +1,7 @@
+import { BlockCtaFragment } from '@custom/schema';
+import React from 'react';
+
+export function BlockCta(props: BlockCtaFragment) {
+  console.log(props);
+  return <div />;
+}
diff --git a/packages/ui/src/components/Organisms/PageDisplay.tsx b/packages/ui/src/components/Organisms/PageDisplay.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { isTruthy } from '../../utils/isTruthy';
 import { UnreachableCaseError } from '../../utils/unreachable-case-error';
 import { PageTransition } from '../Molecules/PageTransition';
+import { BlockCta } from './PageContent/BlockCta';
 import { BlockForm } from './PageContent/BlockForm';
 import { BlockMarkup } from './PageContent/BlockMarkup';
 import { BlockMedia } from './PageContent/BlockMedia';
@@ -40,6 +41,8 @@ export function PageDisplay(page: PageFragment) {
                         BlockImageTeasers goes here
                       </div>
                     );
+                  case 'BlockCta':
+                    return <BlockCta key={index} {...block} />;
                   default:
                     throw new UnreachableCaseError(block);
                 }

diff --git a/tests/schema/specs/blocks.spec.ts b/tests/schema/specs/blocks.spec.ts
@@ -71,6 +71,12 @@ test('Blocks', async () => {
     'data-id="[numeric]"',
   );
 
+  const ctaToMediaBlock = result.data.complete.content[8];
+  ctaToMediaBlock.url = ctaToMediaBlock.url.replace(
+    /media\/\d+/,
+    'media/[numeric]',
+  );
+
   expect(result).toMatchInlineSnapshot(`
     {
       "data": {
@@ -149,6 +155,12 @@ test('Blocks', async () => {
               "text": "External CTA",
               "url": "https://www.google.com",
             },
+            {
+              "__typename": "BlockCta",
+              "openInNewTab": null,
+              "text": "CTA with link to media",
+              "url": "/media/[numeric]",
+            },
             {
               "__typename": "BlockMarkup",
               "markup": "