[RFC][Feature] Add ability to open modal using triggerID from command.

[SirensOfTitan]

This diff adds the ability to open up a modal using a trigger_id passed from some action like a command from inside slack.

I do so by adding two new optional props to the Modal component: onSubmit and onCancel that are run on submission of a modal. If the model was triggered by a useModal function, then onSubmit and onCancel will run in both the Modal component and the useModal callbacks.

I'm not really sure if this is the correct approach, it felt the most natural after a little discovery in the reconciler. Looking for feedback on method here, some discussion as to whether the author would like to merge this (I see this and ephemeral messages as the two small missing features), and how I might be able to adjust to merge.

I've tested the basic functionality in an application I'm building, but have done little verification past that.

[rafaeelaudibert]

Awesome job, I would like to have this merged as well. Just a pinpoint, nothing that really matter:

That could be simplified, without the need for 2 map calls.

You can just build action on the fly inside the 2nd map, along with data

const action = Object.keys(payload.view.state.values[key])[0]

[maxchehab]

Thank you @SirensOfTitan for your pull request, this is super cool!

If the developer opens a modal from within a message (using useModal) and specifies an onCancel or onSubmit callback in the declaration of useModal, ex:

const openModal = useModal(
  "modal",
  MyModal,
  () => console.log("submit"),
  () => console.log("cancel")
);

and they also specify onCancel and onSubmit props in their modal component, ex:

<Modal
  onSubmit={() => console.log("submit")}
  onCancel={() => console.log("cancel")}
  title="A fancy pants modal"
  submit="submit the form"
/>

will both prop callbacks and the callbacks passed into useModal be executed? Should we save whether the modal was initiated by useModal or openModal to determine which callbacks are executed?

[SirensOfTitan]

will both prop callbacks and the callbacks passed into useModal be executed? Should we save whether the modal was initiated by useModal or openModal to determine which callbacks are executed?

Yeah, they'll both be executed right now. I like the idea of keeping track of where the modal was initiated! Perhaps with some typing alongside to make it clear which modality you're opting into?

type ModalProps = {
  /** Array of Actions, Context, Divider, ImageBlock, Input, or Section components	 */
  children: PheliaChildren;
  /** The title of the modal. */
  title: ReactElement | string;
  /**
   * An optional plain_text Text component that defines the text displayed in the submit button
   * at the bottom-right of the view. submit is required when an input block is within the
   * blocks array. Max length of 24 characters.
   */
  submit?: ReactElement | string;
} & ({
  type: "inline"
} | {
  type: "root",
  onSubmit: ...
  onCancel ...
})

If possible this kind of paradigm also might be nice (we use this pattern a lot in our react codebase):

const openModal = useModal("modal1", () => 
  <Modal onSubmit={() => ...} onCancel={() => ...})
);

// or
const openModal = useModal(() => 
  <Modal key="modal1" onSubmit={() => ...} onCancel={() => ...} />
);

[SirensOfTitan]

Alright, I've added types differentiating between inline and root modals: inlines are initiated by another component by way of useModal, roots are initiated by a shortcut or channel response. root modals only execute prop-based onX callbacks, inlines execute useModal callbacks. Open to name suggestions. 😅

I'll loop back and test the additional code later this afternoon.

Awesome job, I would like to have this merged as well. Just a pinpoint, nothing that really matter:

Thank you! I'm going to avoid adding anything to that part now, as it was all just moved code, but happy to push a PR for that after this is merged.

[SirensOfTitan]

Tested basic functionality against slack with the updates, looks good!

[maxchehab]

This is great. I'm happy to merge, but before I do would you mind documenting the new features in either an example or in the main docs.

Thank you for this PR, I can't wait to get this merged!

[SirensOfTitan]

@maxchehab done!

[maxchehab]

Perfect, thank you!

[maxchehab]

Released in 0.1.8.