fix: [M3-7741] - Hide error notices for $0 regions in Resize Pool and Add a Node Pool drawers #10157
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -1,7 +1,7 @@ | ||||||
| import { KubeNodePoolResponse, Region } from '@linode/api-v4'; | ||||||
| import { Theme } from '@mui/material/styles'; | ||||||
| import * as React from 'react'; | ||||||
| import { makeStyles } from 'tss-react/mui'; | ||||||
|
|
||||||
| import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; | ||||||
| import { CircleProgress } from 'src/components/CircleProgress'; | ||||||
|
|
@@ -107,85 +107,92 @@ export const ResizeNodePoolDrawer = (props: Props) => { | |||||
| types: planType ? [planType] : [], | ||||||
| }); | ||||||
|
|
||||||
| const isInvalidPricePerNode = !pricePerNode && pricePerNode !== 0; | ||||||
| const isInvalidTotalMonthlyPrice = | ||||||
| !totalMonthlyPrice && totalMonthlyPrice !== 0; | ||||||
|
|
||||||
|
There was a problem hiding this comment.
There was a problem hiding this comment. Might be good to have this clarification as a comment in the code There was a problem hiding this comment. I second this. Am also thinking you could consolidate this logic with the addNodePool drawer logic in a util with your comments. |
||||||
| return ( | ||||||
| <Drawer | ||||||
| onClose={onClose} | ||||||
| open={open} | ||||||
| title={`Resize Pool: ${planType?.formattedLabel ?? 'Unknown'} Plan`} | ||||||
| > | ||||||
| {isLoadingTypes ? ( | ||||||
| <CircleProgress /> | ||||||
| ) : ( | ||||||
| <form | ||||||
| onSubmit={(e: React.ChangeEvent<HTMLFormElement>) => { | ||||||
| e.preventDefault(); | ||||||
| handleSubmit(); | ||||||
| }} | ||||||
| > | ||||||
| <div className={classes.section}> | ||||||
|
Comment on lines
+123
to
+132
There was a problem hiding this comment. Most of this diff is an indentation change caused by fixing an issue where the loading spinner was displaying above the form, instead of in its place, while
|
||||||
| <Typography className={classes.summary}> | ||||||
| Current pool: $ | ||||||
| {renderMonthlyPriceToCorrectDecimalPlace(totalMonthlyPrice)} | ||||||
| /month ({pluralize('node', 'nodes', nodePool.count)} at $ | ||||||
| {renderMonthlyPriceToCorrectDecimalPlace(pricePerNode)} | ||||||
| /month) | ||||||
| </Typography> | ||||||
| </div> | ||||||
|
|
||||||
| {error && <Notice text={error?.[0].reason} variant="error" />} | ||||||
|
|
||||||
| <div className={classes.section}> | ||||||
| <Typography className={classes.helperText}> | ||||||
| Enter the number of nodes you'd like in this pool: | ||||||
| </Typography> | ||||||
| <EnhancedNumberInput | ||||||
| min={1} | ||||||
| setValue={handleChange} | ||||||
| value={updatedCount} | ||||||
| /> | ||||||
| </div> | ||||||
|
|
||||||
| <div className={classes.section}> | ||||||
| {/* Renders total pool price/month for N nodes at price per node/month. */} | ||||||
| <Typography className={classes.summary}> | ||||||
| {`Resized pool: $${renderMonthlyPriceToCorrectDecimalPlace( | ||||||
| !isInvalidPricePerNode ? updatedCount * pricePerNode : undefined | ||||||
|
There was a problem hiding this comment. Because the |
||||||
| )}/month`}{' '} | ||||||
| ({pluralize('node', 'nodes', updatedCount)} at $ | ||||||
| {renderMonthlyPriceToCorrectDecimalPlace(pricePerNode)} | ||||||
| /month) | ||||||
| </Typography> | ||||||
| </div> | ||||||
|
|
||||||
| {updatedCount < nodePool.count && ( | ||||||
| <Notice important text={resizeWarning} variant="warning" /> | ||||||
| )} | ||||||
|
|
||||||
| {updatedCount < 3 && ( | ||||||
| <Notice important text={nodeWarning} variant="warning" /> | ||||||
| )} | ||||||
|
|
||||||
| {nodePool.count && | ||||||
| (isInvalidPricePerNode || isInvalidTotalMonthlyPrice) && ( | ||||||
|
There was a problem hiding this comment. Only real change in this section is the updated bools to determine whether to display the pricing error notice or not - the rest of the diff is due to indentation. |
||||||
| <Notice | ||||||
| spacingBottom={16} | ||||||
| spacingTop={8} | ||||||
| text={PRICES_RELOAD_ERROR_NOTICE_TEXT} | ||||||
| variant="error" | ||||||
| /> | ||||||
| )} | ||||||
|
|
||||||
| <ActionsPanel | ||||||
| primaryButtonProps={{ | ||||||
| 'data-testid': 'submit', | ||||||
| disabled: | ||||||
| updatedCount === nodePool.count || | ||||||
| isInvalidPricePerNode || | ||||||
| isInvalidTotalMonthlyPrice, | ||||||
| label: 'Save Changes', | ||||||
| loading: isLoading, | ||||||
| onClick: handleSubmit, | ||||||
| }} | ||||||
| /> | ||||||
| </form> | ||||||
| )} | ||||||
| </Drawer> | ||||||
| ); | ||||||
| }; | ||||||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Changes in the file are to account for the loading state that is now present before form data is rendered.