🪟 🎉 Display "Credits" in sidebar and add info when user is running out of credits #20595
Conversation
octavia-squidington-iv
added
area/platform
| @@ -21,7 +21,7 @@ export const InfoBox: React.FC<React.PropsWithChildren<Props>> = ({ children, cl | |||
| return ( | |||
| <Box className={className}> | |||
| {icon && <FontAwesomeIcon size="lg" icon={icon} />} | |||
| <div>{children}</div> | |||
There was a problem hiding this comment.
Shouldn't this be the responsibility of the children?
I remove it in order to be able to have full control on the children node.
I double check that it won't impact any other places where <InfoBox /> is used
There was a problem hiding this comment.
I guess the only reason might have been vertical alignment issues why this was here. But if it works in all places without it, no reason to keep it around.
...ges/cloud/views/credits/CreditsPage/components/LowCreditBalanceHint/LowCreditBalanceHint.tsx
Outdated
Show resolved
Hide resolved
| <Block> | ||
| <CreditView> | ||
| <FormattedMessage id="credits.remainingCredits" /> | ||
| <Count> | ||
| <FormattedNumber value={cloudWorkspace.remainingCredits} /> | ||
| </Count> | ||
| </CreditView> | ||
| <Actions> | ||
| <Button | ||
| disabled={!selfServiceCheckoutEnabled} | ||
| type="button" | ||
| size="xs" | ||
| onClick={startStripeCheckout} | ||
| isLoading={isLoading || isWaitingForCredits} | ||
| icon={<FontAwesomeIcon icon={faPlus} />} | ||
| > | ||
| <FormattedMessage id="credits.buyCredits" /> | ||
| </Button> | ||
| <Button size="xs" onClick={() => window.open(links.contactSales, "_blank")}> | ||
| <FormattedMessage id="credits.talkToSales" /> | ||
| </Button> | ||
| </Actions> | ||
| </Block> |
There was a problem hiding this comment.
This snippet remains the same.
| {cloudWorkspace.remainingCredits <= LOW_BALANCE_CREDIT_TRESHOLD && ( | ||
| <Indicator className={styles.lowBalanceIndicator} /> | ||
| )} |
There was a problem hiding this comment.
Show indicator only when credits <= 20
...ges/cloud/views/credits/CreditsPage/components/LowCreditBalanceHint/LowCreditBalanceHint.tsx
Outdated
Show resolved
Hide resolved
...ges/cloud/views/credits/CreditsPage/components/LowCreditBalanceHint/LowCreditBalanceHint.tsx
Outdated
Show resolved
Hide resolved
...d/views/credits/CreditsPage/components/LowCreditBalanceHint/LowCreditBalanceHint.module.scss
Outdated
Show resolved
Hide resolved
...d/views/credits/CreditsPage/components/LowCreditBalanceHint/LowCreditBalanceHint.module.scss
Outdated
Show resolved
Hide resolved
letiescanciano
force-pushed
the
leti/display-credits-in-sidebar
branch
from
aaf1ddc to
a9ce58b
Compare
...d/views/credits/CreditsPage/components/LowCreditBalanceHint/LowCreditBalanceHint.module.scss
Outdated
Show resolved
Hide resolved
...d/views/credits/CreditsPage/components/LowCreditBalanceHint/LowCreditBalanceHint.module.scss
Outdated
Show resolved
Hide resolved
...ges/cloud/views/credits/CreditsPage/components/LowCreditBalanceHint/LowCreditBalanceHint.tsx
Outdated
Show resolved
Hide resolved
|
@timroes It looks like the notification button (red or yellow) is no longer showing up in the lef-thand sidebar. Do you know if that was intentional? |
|
Yes that is indeed a bug in the current code, it's somehow mixed up checking for connector updates with the indicator for low credits. Could you maybe fill a new issue for this and cc Joey and Teal on it? This broke with https://github.com/airbytehq/airbyte-platform-internal/commit/b735183a0481675b1f07145bb7efc6b0ad2395db |
Closes #19571
Demo: https://www.loom.com/share/ca43d6b72dcc42208add0bd91e1b1efc
What
<CreditsPage />to inform users about low/zero balance