feat: Add alert message in the FE when exceeded the API usage #4027
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Ignored Deployment
|
novakzaballa
requested review from
a team and
kyle-ssg
and removed request for
a team
github-actions
bot
added
the
front-end
|
Uffizzi Preview |
There was a problem hiding this comment.
The code looks good to me, but just to be safe try to get @kyle-ssg to review it since he's better at frontend code review than I am.
Also, just a reminder that we discussed adding a feature flag for this. Please add it and share the flag name with me so we can test this on staging when we're ready.
| <b>{apiOrganisationUsage?.results[0].percent_usage}</b> | ||
| {'% '} |
There was a problem hiding this comment.
Tiny nit: the % should be within the bold tag, since it looks weird to bold just the number without the percent.
There was a problem hiding this comment.
Done, also I added the flag name in the description PR.
|
Is this feature tied to the following flag? I believe it's setup incorrectly - doesn't look like it should be permanent and was also never enabled.
|
|
@novakzaballa as discussed, this code should be mostly deleted (sorry!). We should reuse the code in |
novakzaballa
changed the title
| <> | ||
| Your organisation has exceeded its API usage quota{' '} | ||
| <b>{`(${error}).`}</b>{' '} | ||
| {Utils.getPlanName(this.props.organisationPlan) === 'Free' ? ( | ||
| <b>Please upgrade your plan to continue receiving service.</b> | ||
| ) : ( | ||
| <b>Automated billing for the overages may apply.</b> | ||
| )} | ||
| </> |
There was a problem hiding this comment.
The bolding of the error amount looks weird because the end of the sentence extends into the next one. I recommend doing it like this:
| <> | |
| Your organisation has exceeded its API usage quota{' '} | |
| <b>{`(${error}).`}</b>{' '} | |
| {Utils.getPlanName(this.props.organisationPlan) === 'Free' ? ( | |
| <b>Please upgrade your plan to continue receiving service.</b> | |
| ) : ( | |
| <b>Automated billing for the overages may apply.</b> | |
| )} | |
| </> | |
| <> | |
| Your organisation has exceeded its API usage quota{' '} | |
| {`(${error}).`}{' '} | |
| {Utils.getPlanName(this.props.organisationPlan) === 'Free' ? ( | |
| <b>Please upgrade your plan to continue receiving service.</b> | |
| ) : ( | |
| <b>Automated billing for the overages may apply.</b> | |
| )} | |
| </> |
…or-api-usage-notification
github-actions
bot
added
feature
github-actions
bot
added
feature
@matthewelwell Done |
| body = { ...body, ...{ billing_period: 'current_billing_period' } } | ||
| } | ||
|
|
||
| const { data: totalApiCalls } = useGetOrganisationUsageQuery(body, { |
There was a problem hiding this comment.
Can’t this just go into the new component ? It may as well be just self contained / can be added anywhere
There was a problem hiding this comment.
I'm not quite sure I understand your suggestion. Are you suggesting using this hook in the new QuotaExceededMessagecomponent?
There was a problem hiding this comment.
Yes or just move the QuotaExceededMessagecomponent to this, it doesn't look like it's necessary
github-actions
bot
added
feature
github-actions
bot
added
feature
novakzaballa
deleted the
feat/add-a-butter-bar-in-the-fe-for-api-usage-notification
branch
Thanks for submitting a PR! Please check the boxes below:
pre-committo check lintingdocs/if required so people know about the feature!Changes
How did you test this code?