9426 migrate workflow pages to command menu

[bosiraphael]

Closes twentyhq/core-team-issues#53

• Removes command menu top bar text input when the user is not on root page
• Fixes bug when resetting command menu context
• Added animations on command menu open and close
• Refactored workflow visualizer code to remove unnecessary rerenders and props drilling

Enregistrement.de.l.ecran.2025-01-10.a.11.01.28.mov

[greptile-apps]

PR Summary

This PR migrates workflow-related pages to the command menu system, adding support for workflow step management and improving context reset functionality.

• Added 4 new workflow pages in CommandMenuPages.ts: trigger type selection, action selection, step viewing, and step editing
• Updated CommandMenuTopBar.tsx to conditionally render search input only on root page
• Added workflow components to COMMAND_MENU_PAGES_CONFIG map with corresponding right drawer mappings
• Implemented resetCommandMenuContext function in useCommandMenu hook to properly reset targeted records, selected records count, and view type
• Enhanced hotkey handling in useCommandMenuHotKeys.ts to only reset context on Backspace/Delete when on root page

_{6 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings | Greptile}

[Devessier]

Some regressions we can fix in a follow-up PR that someone else could be responsible of:

• The flow is no longer accounting the width of the right drawer for its positioning.
• The opening state of the right drawer no longer animates. See https://discord.com/channels/1130383047699738754/1326927651029389343/1326927651029389343 for a demo. I'm unsure that's a problem but I don't know what @Bonapara things about it.

CleanShot.2025-01-09.at.17.45.29.mp4

[bosiraphael]

Good catches @Devessier ! I will try to fix these regressions in this PR :)

[Devessier]

I think a container should take all the available height.

CleanShot.2025-01-09.at.17.55.49.mp4

[Devessier]

I spotted this code:

const StyledCommandMenu = styled.div`
  background: ${({ theme }) => theme.background.secondary};
  border-left: 1px solid ${({ theme }) => theme.border.color.medium};
  box-shadow: ${({ theme }) => theme.boxShadow.strong};
  font-family: ${({ theme }) => theme.font.family};
  height: 100%;
  overflow: hidden;
  padding: 0;
  position: fixed;
  right: 0%;
  top: 0%;
  width: ${() => (useIsMobile() ? '100%' : '500px')};
  z-index: 30;
`;

I don't know where this code comes from but I find it strange to call a hook in a style expression. I don't know how emotion works internally and can't be sure it won't break the Rules of Hooks. It would be more idiomatic to let the StyledCommandMenu component take an isMobile property, which would be declared in the parent component like so:

const isMobile = useIsMobile()

<StyledCommandMenu isMobile={isMobile} />

I spotted this code at several places. Not sure about them.

[Devessier]

It looks good to me! As you said, you want to fix regressions in this PR. I will approve it once you've done them 😉 Thank you!

[bosiraphael]

I spotted this code:

const StyledCommandMenu = styled.div`
  background: ${({ theme }) => theme.background.secondary};
  border-left: 1px solid ${({ theme }) => theme.border.color.medium};
  box-shadow: ${({ theme }) => theme.boxShadow.strong};
  font-family: ${({ theme }) => theme.font.family};
  height: 100%;
  overflow: hidden;
  padding: 0;
  position: fixed;
  right: 0%;
  top: 0%;
  width: ${() => (useIsMobile() ? '100%' : '500px')};
  z-index: 30;
`;

I don't know where this code comes from but I find it strange to call a hook in a style expression. I don't know how emotion works internally and can't be sure it won't break the Rules of Hooks. It would be more idiomatic to let the StyledCommandMenu component take an isMobile property, which would be declared in the parent component like so:

const isMobile = useIsMobile()

<StyledCommandMenu isMobile={isMobile} />

I spotted this code at several places. Not sure about them.

Yes indeed we shouldn't do that, I copy pasted this component from another file and let that slide. good catch

[Devessier]

I spotted another small bug.

[Devessier]

Thanks for your hard work! It works really great and the code is clean. Your refactors in the workflows look good.