fix(web): workflow settings - providers warnings were cut off #5300
Conversation
❌ Deploy Preview for dev-web-novu failed.
|
| const providersForTheCurrentEnvironment = useMemo( | ||
| () => | ||
| channelProviders.filter((provider) => provider.connected && provider.environmentId === currentEnvironment?._id), | ||
| [channelProviders, currentEnvironment?._id] | ||
| ); | ||
| const hasProviders = providersForTheCurrentEnvironment.length > 0; | ||
| const hasNovuProvider = providersForTheCurrentEnvironment.length === 1 && containsNovuProvider; |
There was a problem hiding this comment.
Under the Providers tab, we are showing all the integrations from the current environment, so the one change that I introduced is the logic to show the warnings is based on the assumption of the current environment.
| padding: '7.5px 15px', | ||
| }} | ||
| variant={providers.filter((provider) => provider.connected).length > 0 ? 'outline' : 'gradient'} | ||
| <ListProvidersContainer> |
There was a problem hiding this comment.
I could spend probably more time refactoring it, but I don't think it's worth it and to me, the current state is better than what we had before.
| > | ||
| <div | ||
| style={{ | ||
| marginBottom: -28, |
There was a problem hiding this comment.
the reason why it was cut off
There was a problem hiding this comment.
💭 thought: This could be a great opportunity to use panda instead! It should simplify some of this CSS
There was a problem hiding this comment.
I thought about it, but wasn't sure how should I map the current colors to the new color palette.
| const containsNovuProvider = useMemo( | ||
| () => | ||
| NOVU_SMS_EMAIL_PROVIDERS.some( | ||
| (providerId) => providerId === channelProviders.find((provider) => provider.connected)?.providerId | ||
| ), | ||
| [channelProviders] | ||
| ); | ||
| const providersForTheCurrentEnvironment = useMemo( | ||
| () => | ||
| channelProviders.filter((provider) => provider.connected && provider.environmentId === currentEnvironment?._id), | ||
| [channelProviders, currentEnvironment?._id] | ||
| ); |
There was a problem hiding this comment.
🎯 suggestion: These are more or less "selectors," and could be written and reused as standalone functions outside of this component and file. This will help us from re-inventing the wheel because I imagine we have an instance or two of this implemented elsewhere in the app
There was a problem hiding this comment.
We don't because they are specific to this case, but we can extract it into more reusable code.
What change does this PR introduce?
Fixed the issue in the Workflow Settings - Providers tab, that the channel "warning banners" were cut off.
Why was this change needed?
Other information (Screenshots)
Screen.Recording.2024-03-13.at.18.59.54.mov