From 5fdac5815120ed373385f4ad7967216b72eee22a Mon Sep 17 00:00:00 2001 From: Yuki Hattori Date: Wed, 7 Oct 2020 11:14:14 +0900 Subject: [PATCH 1/5] Allow using and in --- src/block-kit/container/Blocks.ts | 11 +-- src/block-kit/elements/CheckboxGroup.ts | 3 - src/block-kit/elements/RadioButtonGroup.ts | 3 - .../block-elements/interactive-components.tsx | 80 +++---------------- 4 files changed, 15 insertions(+), 82 deletions(-) diff --git a/src/block-kit/container/Blocks.ts b/src/block-kit/container/Blocks.ts index 6207a493..c68d0e2e 100644 --- a/src/block-kit/container/Blocks.ts +++ b/src/block-kit/container/Blocks.ts @@ -9,9 +9,6 @@ import { generateSectionValidator, } from './utils' -// Message block cannot use "radio_buttons" and "checkboxes" -const blockTypeFilter = (t) => t !== 'radio_buttons' && t !== 'checkboxes' - /** * The basic container component for Slack Block Kit suited to * {@link https://api.slack.com/surfaces/messages|messages}. @@ -48,18 +45,14 @@ const blockTypeFilter = (t) => t !== 'radio_buttons' && t !== 'checkboxes' export const Blocks = generateBlocksContainer({ name: 'Blocks', availableBlockTypes: { - actions: generateActionsValidator( - availableActionTypes.filter(blockTypeFilter) - ), + actions: generateActionsValidator([...availableActionTypes]), call: true, context: true, divider: true, file: true, header: true, image: true, - section: generateSectionValidator( - availableSectionAccessoryTypes.filter(blockTypeFilter) - ), + section: generateSectionValidator(availableSectionAccessoryTypes), }, aliases: { header: Header, diff --git a/src/block-kit/elements/CheckboxGroup.ts b/src/block-kit/elements/CheckboxGroup.ts index 570d94a7..b7ff4b15 100644 --- a/src/block-kit/elements/CheckboxGroup.ts +++ b/src/block-kit/elements/CheckboxGroup.ts @@ -38,9 +38,6 @@ type CheckboxGroupProps = InputComponentProps * * Provide the container to choose multiple options supplied by ``. * - * _This component is available only in `` and `` container, and - * cannot use in `` container for messaging._ - * * @example * ```jsx * diff --git a/src/block-kit/elements/RadioButtonGroup.ts b/src/block-kit/elements/RadioButtonGroup.ts index a5d2a786..8092fe00 100644 --- a/src/block-kit/elements/RadioButtonGroup.ts +++ b/src/block-kit/elements/RadioButtonGroup.ts @@ -39,9 +39,6 @@ type RadioButtonGroupProps = InputComponentProps * Provide the container to choose one of the options supplied by * ``. * - * _This component is available only in `` and `` container, and - * cannot use in `` container for messaging._ - * * @example * ```jsx * diff --git a/test/block-kit/block-elements/interactive-components.tsx b/test/block-kit/block-elements/interactive-components.tsx index 3b094f73..2791ef74 100644 --- a/test/block-kit/block-elements/interactive-components.tsx +++ b/test/block-kit/block-elements/interactive-components.tsx @@ -1121,7 +1121,7 @@ describe('Interactive components', () => { expect( JSXSlack( - + @@ -1140,8 +1140,8 @@ describe('Interactive components', () => { 3rd - - ).blocks + + ) ).toStrictEqual([action(radioButtonAction)]) // `checked` state prop, `confirm` prop and HTML-compatible props in @@ -1178,15 +1178,15 @@ describe('Interactive components', () => { it('outputs radio button group in section block', () => { const [section]: SectionBlock[] = JSXSlack( - +
test A
- - ).blocks + + ) // eslint-disable-next-line @typescript-eslint/no-non-null-assertion expect(section.accessory!.type).toBe('radio_buttons') @@ -1270,33 +1270,6 @@ describe('Interactive components', () => { )).toThrow(/must contain/i) }) - - it('throws error when using within container', () => { - expect(() => - JSXSlack( - -
- test - - A - -
- - ) - ).toThrow(/incompatible/i) - - expect(() => - JSXSlack( - - - - A - - - - ) - ).toThrow(/incompatible/i) - }) }) describe('', () => { @@ -1428,15 +1401,15 @@ describe('Interactive components', () => { it('outputs checkbox group in section block', () => { const [section]: SectionBlock[] = JSXSlack( - +
test A
- - ).blocks + + ) // eslint-disable-next-line @typescript-eslint/no-non-null-assertion expect(section.accessory!.type).toBe('checkboxes') @@ -1445,52 +1418,25 @@ describe('Interactive components', () => { it('throws error when has not contained ', () => { expect(() => JSXSlack( - + {} - - ) - ).toThrow(/must contain/i) - - expect(() => - JSXSlack( - - - - - - - - ) - ).toThrow(/must contain/i) - }) - - it('throws error when using within container', () => { - expect(() => - JSXSlack( - -
- test - - A - -
) - ).toThrow(/incompatible/i) + ).toThrow(/must contain/i) expect(() => JSXSlack( - A + ) - ).toThrow(/incompatible/i) + ).toThrow(/must contain/i) }) it('prefers description prop of rather than the content in element', () => { From e072a65c9fc1c9bbcf6ef8a98c616c4cd6ab5ad3 Mon Sep 17 00:00:00 2001 From: Yuki Hattori Date: Wed, 7 Oct 2020 11:17:12 +0900 Subject: [PATCH 2/5] Update docs --- docs/block-elements.md | 8 ++++---- docs/jsx-components-for-block-kit.md | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/block-elements.md b/docs/block-elements.md index cabdb0e9..c4b5f952 100644 --- a/docs/block-elements.md +++ b/docs/block-elements.md @@ -418,9 +418,9 @@ An easy way to let the user selecting any date is using `` component - `title`/ `hint` (optional): Specify a helpful text appears under the element. - `required` (optional): A boolean prop to specify whether any value must be filled when user confirms modal. -### [``: Checkbox group](https://api.slack.com/reference/block-kit/block-elements#checkboxes) (Only for modal and home tab) +### [``: Checkbox group](https://api.slack.com/reference/block-kit/block-elements#checkboxes) -A container for grouping checkboxes. _This component is only for [``](block-containers.md#modal) and [``](block-containers.md#home) container. It cannot use in [``](block-containers.md#blocks) container for messaging._ +A container for grouping checkboxes. ```jsx @@ -547,9 +547,9 @@ A below checkbox is meaning exactly the same as an example shown earlier. ``` -### [``: Radio button group](https://api.slack.com/reference/block-kit/block-elements#radio) (Only for modal and home tab) +### [``: Radio button group](https://api.slack.com/reference/block-kit/block-elements#radio) -A container for grouping radio buttons. _This component is only for [``](block-containers.md#modal) and [``](block-containers.md#home) container. It cannot use in [``](block-containers.md#blocks) container for messaging._ +A container for grouping radio buttons. ```jsx diff --git a/docs/jsx-components-for-block-kit.md b/docs/jsx-components-for-block-kit.md index 88acc524..b81d92d4 100644 --- a/docs/jsx-components-for-block-kit.md +++ b/docs/jsx-components-for-block-kit.md @@ -37,9 +37,9 @@ - [**``**: Overflow menu](block-elements.md#overflow) - [**``**: Menu item in overflow menu](block-elements.md#overflow-item) - [**``**: Select date from calendar](block-elements.md#date-picker) -- [**``**: Checkbox group](block-elements.md#checkbox-group) (Only for modal and home tab) +- [**``**: Checkbox group](block-elements.md#checkbox-group) - [**``**: Checkbox](block-elements.md#checkbox) -- [**``**: Radio button group](block-elements.md#radio-button-group) (Only for modal and home tab) +- [**``**: Radio button group](block-elements.md#radio-button-group) - [**``**: Radio button](block-elements.md#radio-button) ### **[Composition objects](block-elements.md#composition-objects)** From fb8e50488b666b0911b599413171b2869834233d Mon Sep 17 00:00:00 2001 From: Yuki Hattori Date: Wed, 7 Oct 2020 11:21:34 +0900 Subject: [PATCH 3/5] Update jsdoc --- src/block-kit/layout/Actions.ts | 4 ++-- src/block-kit/layout/Section.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/block-kit/layout/Actions.ts b/src/block-kit/layout/Actions.ts index 01601182..7ad0fad5 100644 --- a/src/block-kit/layout/Actions.ts +++ b/src/block-kit/layout/Actions.ts @@ -81,8 +81,8 @@ const actionTypeValidators: Record void> = { * - `` _(Single-select only)_ * - `` * - `` - * - `` _(Only for `` and `` container)_ - * - `` _(Only for `` and `` container)_ + * - `` + * - `` * * @return The partial JSON for `actions` layout block */ diff --git a/src/block-kit/layout/Section.ts b/src/block-kit/layout/Section.ts index 8d2aa708..414d715c 100644 --- a/src/block-kit/layout/Section.ts +++ b/src/block-kit/layout/Section.ts @@ -143,8 +143,8 @@ export const Field = createComponent( * - `` * - `` * - `` - * - `` _(Only for `` and `` container)_ - * - `` _(Only for `` and `` container)_ + * - `` + * - `` * * ### Fields * From 498cf8a8229bd0a689d2c923b03be1cd8bcdb446 Mon Sep 17 00:00:00 2001 From: Yuki Hattori Date: Wed, 7 Oct 2020 12:54:49 +0900 Subject: [PATCH 4/5] Update CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index c5173108..da608460 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ ### Changed +- Allow using `` and `` in message container `` ([#196](https://github.com/speee/jsx-slack/issues/196), [#197](https://github.com/speee/jsx-slack/pull/197)) - Upgrade dependent packages to the latest version ([#191](https://github.com/speee/jsx-slack/pull/191), [#198](https://github.com/speee/jsx-slack/pull/198)) ## v2.4.0 - 2020-07-30 From 8cdf1227b897ce4788fa4b37a4a3f03fb189a4dc Mon Sep 17 00:00:00 2001 From: Yuki Hattori Date: Wed, 7 Oct 2020 13:31:41 +0900 Subject: [PATCH 5/5] Recover test of validation for incompatible elements --- test/block-kit/container-components.tsx | 71 ++++++++++++++++--------- 1 file changed, 45 insertions(+), 26 deletions(-) diff --git a/test/block-kit/container-components.tsx b/test/block-kit/container-components.tsx index ec9e1ea9..93caea1d 100644 --- a/test/block-kit/container-components.tsx +++ b/test/block-kit/container-components.tsx @@ -1,6 +1,7 @@ /** @jsx JSXSlack.h */ import { PlainTextElement, View } from '@slack/types' import { + Actions, Blocks, Call, Escape, @@ -22,34 +23,52 @@ describe('Container components', () => { describe('', () => { it('throws error when has unexpected element', () => { - expect(() => - JSXSlack( - - unexpected - - ) - ).toThrow() - - expect(() => - JSXSlack( - - unexpected - - ) - ).toThrow() + expect(() => ( + + unexpected + + )).toThrow() + + expect(() => ( + + unexpected + + )).toThrow() // block cannot use in message - expect(() => - JSXSlack( - - - - - - ) - ).toThrow() + expect(() => ( + + + + + + )).toThrow() + + // Incompatible accessory for section block + expect(() => ( + + { + { + type: 'section', + accessory: { type: 'incompatible' }, + } as any + } + + )).toThrow(/incompatible/) + + // Incompatible interactive element for actions block + expect(() => ( + + { + { + type: 'actions', + elements: [{ type: 'incompatible' }], + } as any + } + + )).toThrow(/incompatible/) }) it('ignores invalid literal values to keep compatibillity with v1', () => {