Refactor how the RightDrawer listen to outside clicks so it doesn't close when clicking on workflow elements

[Devessier]

Problem

The RightDrawer component is defined globally and contains a router that determines which right drawer is displayed. The RightDrawer has an outside click listener.

The drawer uses the pixel-compare mode, which doesn't support excluding elements by their class name.

I want the right drawer not to close when selecting a workflow step. Currently, the drawer flickers when selecting a node. It's unnoticeable, but the effects depending on the state of the drawer will run. That's particularly bad since I animate the flow when the drawer opens, which causes flickering.

Refactor

The ideal refactor should be discussed. However, I think it would be great to "fork" the right drawer and create a custom drawer with more specific behaviors for the workflows. We could rely on composition to achieve that. It would be ugly to "fix" the issue directly in the root right drawer component.

[Devessier]

Code suggested by Lucas:

In EmailThreadPreview:

  const { isSameEventThanRightDrawerClose } = useRightDrawer();

  const handleThreadClick = useRecoilCallback(
    ({ snapshot }) =>
      (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
        const clickJustTriggeredEmailDrawerClose =
          isSameEventThanRightDrawerClose(event.nativeEvent);

        const emailThreadIdWhenEmailThreadWasClosed = snapshot
          .getLoadable(emailThreadIdWhenEmailThreadWasClosedState)
          .getValue();

        const canOpen =
          thread.visibility === MessageChannelVisibility.ShareEverything &&
          (!clickJustTriggeredEmailDrawerClose ||
            emailThreadIdWhenEmailThreadWasClosed !== thread.id);

        if (canOpen) {
          openEmailThread(thread.id);
        }
      },
    [
      isSameEventThanRightDrawerClose,
      openEmailThread,
      thread.id,
      thread.visibility,
    ],
  );