feature: External Link (in Action Block)

config/datocms/lib/fields.ts

@@ -0,0 +1,23 @@
+import type { SimpleSchemaTypes } from '@datocms/cli/lib/cma-client-node'; 
+
+export const actionStyleField: SimpleSchemaTypes.FieldCreateSchema = {
+  label: 'Style',
+  field_type: 'string',
+  api_key: 'style',
+  validators: {
+    required: {},
+    enum: { values: ['default', 'primary', 'secondary'] },
+  },
+  appearance: {
+    addons: [],
+    editor: 'string_select',
+    parameters: {
+      options: [
+        { hint: '', label: 'Default action', value: 'default' },
+        { hint: '', label: 'Primary action', value: 'primary' },
+        { hint: '', label: 'Secondary action', value: 'secondary' },
+      ],
+    },
+  },
+  default_value: 'default',
+};

config/datocms/migrations/1734363388_actionBlock.ts

@@ -1,4 +1,5 @@
 import { Client } from '@datocms/cli/lib/cma-client-node';
+import { actionStyleField } from '../lib/fields';
 
 export default async function (client: Client) {
   console.log('Create new models/block models');
@@ -102,25 +103,7 @@ export default async function (client: Client) {
   );
   await client.fields.create('GWnhoQDqQoGJj4-sQTVttw', {
     id: 'S3JQgijhRmalePX3GeugPg',
-    label: 'Style',
-    field_type: 'string',
-    api_key: 'style',
-    validators: {
-      required: {},
-      enum: { values: ['default', 'primary', 'secondary'] },
-    },
-    appearance: {
-      addons: [],
-      editor: 'string_select',
-      parameters: {
-        options: [
-          { hint: '', label: 'Default action', value: 'default' },
-          { hint: '', label: 'Primary action', value: 'primary' },
-          { hint: '', label: 'Secondary action', value: 'secondary' },
-        ],
-      },
-    },
-    default_value: 'default',
+    ...actionStyleField,
   });
 
   console.log('Update existing fields/fieldsets');

config/datocms/migrations/1735337726_externalLinks.ts

@@ -0,0 +1,93 @@
+import type { Client } from '@datocms/cli/lib/cma-client-node';
+import { actionStyleField } from '../lib/fields';
+
+export default async function (client: Client) {
+  console.log('Create new models/block models');
+
+  console.log(
+    'Create block model "\uD83D\uDD17 External Link" (`external_link`)'
+  );
+  await client.itemTypes.create(
+    {
+      id: 'Yk1ge9eTTf25Iwph1Dx3_g',
+      name: '\uD83D\uDD17 External Link',
+      api_key: 'external_link',
+      modular_block: true,
+      inverse_relationships_enabled: false,
+    },
+    {
+      skip_menu_item_creation: true,
+      schema_menu_item_id: 'OiBwyNPrR82ZWMawg47csg',
+    }
+  );
+
+  console.log('Creating new fields/fieldsets');
+
+  console.log(
+    'Create Single-line string field "Title" (`title`) in block model "\uD83D\uDD17 External Link" (`external_link`)'
+  );
+  await client.fields.create('Yk1ge9eTTf25Iwph1Dx3_g', {
+    id: 'Epmmtd7MTfeqpiwLP23D1Q',
+    label: 'Title',
+    field_type: 'string',
+    api_key: 'title',
+    validators: { required: {} },
+    appearance: {
+      addons: [],
+      editor: 'single_line',
+      parameters: { heading: false, placeholder: null },
+    },
+    default_value: '',
+  });
+
+  console.log(
+    'Create Single-line string field "URL" (`url`) in block model "\uD83D\uDD17 External Link" (`external_link`)'
+  );
+  await client.fields.create('Yk1ge9eTTf25Iwph1Dx3_g', {
+    id: 'bUvYLCENQ3SP_vGhoN07nA',
+    label: 'URL',
+    field_type: 'string',
+    api_key: 'url',
+    validators: { required: {}, format: { predefined_pattern: 'url' } },
+    appearance: {
+      addons: [],
+      editor: 'single_line',
+      parameters: { heading: false, placeholder: null },
+    },
+    default_value: '',
+  });
+
+  console.log(
+    'Create Boolean field "Open in new tab" (`open_in_new_tab`) in block model "\uD83D\uDD17 External Link" (`external_link`)'
+  );
+  await client.fields.create('Yk1ge9eTTf25Iwph1Dx3_g', {
+    id: 'AlPRQFQdRlixBp4Tgz5qsQ',
+    label: 'Open in new tab',
+    field_type: 'boolean',
+    api_key: 'open_in_new_tab',
+    appearance: { addons: [], editor: 'boolean', parameters: {} },
+    default_value: false,
+  });
+
+  console.log(
+    'Create Single-line string field "Style" (`style`) in block model "\uD83D\uDD17 External Link" (`external_link`)'
+  );
+  await client.fields.create('Yk1ge9eTTf25Iwph1Dx3_g', {
+    id: 'TNl63OntSe6ZLD3wCYxK-g',
+    ...actionStyleField,
+  });
+
+  console.log('Update existing fields/fieldsets');
+
+  console.log(
+    'Update Modular Content (Multiple blocks) field "Items" (`items`) in block model "\uD83C\uDF9B\uFE0F Action Block" (`action_block`)'
+  );
+  await client.fields.update('dAUckF8qR0edf_f7zam6hA', {
+    validators: {
+      rich_text_blocks: {
+        item_types: ['GWnhoQDqQoGJj4-sQTVttw', 'Yk1ge9eTTf25Iwph1Dx3_g'],
+      },
+      size: { min: 1 },
+    },
+  });
+}

datocms-environment.ts

@@ -3,5 +3,5 @@
  * @see docs/getting-started.md on how to use this file
  * @see docs/decision-log/2023-10-24-datocms-env-file.md on why file is preferred over env vars
  */
-export const datocmsEnvironment = 'action-block';
+export const datocmsEnvironment = 'external-links';
 export const datocmsBuildTriggerId = '30535';

src/blocks/ActionBlock/ActionBlock.astro

@@ -1,24 +1,38 @@
 ---
 import type { ActionBlockFragment } from '@lib/datocms/types';
+import Link from '@components/Link/Link.astro';
 import LinkToRecord from '@components/LinkToRecord/LinkToRecord.astro';
 
 export interface Props {
   block: ActionBlockFragment;
 }
 const { block } = Astro.props;
 const { items } = block;
+const actionClassList = (style: string) => ['action', `action--${style}`];
 ---
 
 <div class="action-block">
   {
-    items.map((item) => (
-      <LinkToRecord
-        record={item.link}
-        class:list={['action', `action--${item.style}`]}
-      >
-        {item.title}
-      </LinkToRecord>
-    ))
+    items.map((item) =>
+      item.__typename === 'InternalLinkRecord' ? (
+        <LinkToRecord
+          record={item.link}
+          class:list={actionClassList(item.style)}
+        >
+          {item.title}
+        </LinkToRecord>
+      ) : item.__typename === 'ExternalLinkRecord' ? (
+        <Link
+          href={item.url}
+          openInNewTab={item.openInNewTab}
+          class:list={actionClassList(item.style)}
+        >
+          {item.title}
+        </Link>
+      ) : (
+        <Fragment />
+      )
+    )
   }
 </div>
 

src/blocks/ActionBlock/ActionBlock.fragment.graphql

@@ -1,4 +1,5 @@
 #import './InternalLink.fragment.graphql'
+#import './ExternalLink.fragment.graphql'
 
 fragment ActionBlock on ActionBlockRecord {
   __typename
@@ -8,5 +9,8 @@ fragment ActionBlock on ActionBlockRecord {
     ... on InternalLinkRecord {
       ...InternalLink
     }
+    ... on ExternalLinkRecord {
+      ...ExternalLink
+    }
   }
 }

src/blocks/ActionBlock/ActionBlock.test.ts

@@ -1,9 +1,13 @@
 import { renderToFragment } from '@lib/renderer';
 import { describe, expect, test } from 'vitest';
 import InlineBlock, { type Props } from './ActionBlock.astro';
-import type { ActionBlockFragment, InternalLinkFragment, SiteLocale } from '@lib/datocms/types';
+import type { ActionBlockFragment, ExternalLinkFragment, InternalLinkFragment, SiteLocale } from '@lib/datocms/types';
 import { locales } from '@lib/i18n';
 
+type ActionBlockItem = 
+  | InternalLinkFragment
+  | ExternalLinkFragment;
+
 const createInternalLinkFragment = (title: string, slug: string, style: string) => ({
   '__typename': 'InternalLinkRecord',
   'id': `${slug}-123`,
@@ -19,14 +23,23 @@ const createInternalLinkFragment = (title: string, slug: string, style: string)
   }
 } satisfies InternalLinkFragment);
 
-const createActionBlockFragment = (items: InternalLinkFragment[]) => ({
+const createExternalLinkFragment = (title: string, url: string, style: string) => ({
+  '__typename': 'ExternalLinkRecord',
+  'id': `${url}-123`,
+  'title': title,
+  'style': style,
+  'openInNewTab': false,
+  'url': url
+} satisfies ExternalLinkFragment);
+
+const createActionBlockFragment = (items: ActionBlockItem[]) => ({
   '__typename': 'ActionBlockRecord',
   'id': 'PL9XQGyWQjuyHpdDNsXCNg',
   'items': items
 } satisfies ActionBlockFragment);
 
 describe('ActionBlock', () => {
-  test('Block is rendered', async () => {
+  test('Block is rendered with internal links', async () => {
     const blockWithTwoItems = createActionBlockFragment([
       createInternalLinkFragment('First item', 'first-item', 'primary'),
       createInternalLinkFragment('Second item', 'second-item', 'secondary'),
@@ -42,4 +55,20 @@ describe('ActionBlock', () => {
     expect(fragment.querySelector('a.action--secondary')?.textContent).toBe('Second item');
   });
 
+  test('Block is rendered with external links', async () => {
+    const blockWithTwoItems = createActionBlockFragment([
+      createExternalLinkFragment('First item', 'https://example.com/first', 'primary'),
+      createExternalLinkFragment('Second item', 'https://example.com/second', 'secondary'),
+    ]);
+    const fragment = await renderToFragment<Props>(InlineBlock, {
+      props: {
+        block: blockWithTwoItems,
+      }
+    });
+
+    expect(fragment.querySelectorAll('a.action').length).toBe(2);
+    expect(fragment.querySelector('a.action--primary')?.textContent).toBe('First item');
+    expect(fragment.querySelector('a.action--secondary')?.textContent).toBe('Second item');
+  });
+
 });

src/blocks/ActionBlock/ExternalLink.fragment.graphql

@@ -0,0 +1,8 @@
+fragment ExternalLink on ExternalLinkRecord {
+  __typename
+  id
+  title
+  url
+  openInNewTab
+  style
+}