add cost estimate message if available set constEstimate to single value if low and high are the same (#1845)

Author: ahussein3

ui-cra/src/components/Templates/Form/Partials/CostEstimation.tsx

@@ -1,13 +1,20 @@
 import { createStyles, Grid, makeStyles } from '@material-ui/core';
+import { Alert } from '@material-ui/lab';
 import { Button, LoadingPage, theme } from '@weaveworks/weave-gitops';
 import React, { FC } from 'react';
 import { validateFormData } from '../../../../utils/form';
 
 const CostEstimation: FC<{
   costEstimate: string;
   isCostEstimationLoading: boolean;
+  costEstimateMessage: string;
   handleCostEstimation: () => Promise<void>;
-}> = ({ handleCostEstimation, costEstimate, isCostEstimationLoading }) => {
+}> = ({
+  handleCostEstimation,
+  costEstimate,
+  isCostEstimationLoading,
+  costEstimateMessage,
+}) => {
   const useStyles = makeStyles(() =>
     createStyles({
       getEstimationButton: {
@@ -20,54 +27,66 @@ const CostEstimation: FC<{
       previewLoading: {
         padding: theme.spacing.base,
       },
+      errorMessage: {
+        marginTop: theme.spacing.xs,
+        marginRight: theme.spacing.medium,
+        borderRadius: theme.spacing.xxs,
+      },
     }),
   );
   const classes = useStyles();
-  return isCostEstimationLoading ? (
-    <LoadingPage className={classes.previewLoading} />
-  ) : (
-    <div>
+  return (
+    <>
       <h2>Cost Estimation</h2>
-      <Grid container>
-        <Grid item xs={6} sm={6} md={6} lg={6}>
-          <Grid container>
-            <Grid
-              item
-              xs={6}
-              justifyContent="flex-start"
-              alignItems="center"
-              container
-            >
-              <div>Monthly Cost:</div>
-            </Grid>
-            <Grid
-              item
-              xs={6}
-              justifyContent="flex-end"
-              alignItems="center"
-              container
-            >
-              <div className={classes.costWrapper}>{costEstimate}</div>
+      {isCostEstimationLoading ? (
+        <LoadingPage className={classes.previewLoading} />
+      ) : (
+        <Grid alignItems="center" container>
+          <Grid item xs={6} sm={6} md={6} lg={6}>
+            <Grid container>
+              <Grid
+                item
+                xs={6}
+                justifyContent="flex-start"
+                alignItems="center"
+                container
+              >
+                <div>Monthly Cost:</div>
+              </Grid>
+              <Grid
+                item
+                xs={6}
+                justifyContent="flex-end"
+                alignItems="center"
+                container
+              >
+                <div className={classes.costWrapper}>{costEstimate}</div>
+              </Grid>
             </Grid>
           </Grid>
-        </Grid>
-        <Grid
-          item
-          xs={6}
-          justifyContent="flex-end"
-          alignItems="center"
-          container
-        >
-          <Button
-            id="get-estimation"
-            className={classes.getEstimationButton}
-            onClick={event => validateFormData(event, handleCostEstimation)}
+          <Grid
+            item
+            xs={6}
+            justifyContent="flex-end"
+            alignItems="center"
+            container
           >
-            GET ESTIMATION
-          </Button>
+            <Button
+              id="get-estimation"
+              className={classes.getEstimationButton}
+              onClick={event => validateFormData(event, handleCostEstimation)}
+            >
+              GET ESTIMATION
+            </Button>
+          </Grid>
+          {costEstimateMessage && (
+            <Alert className={classes.errorMessage} severity="warning">
+              {costEstimateMessage}
+            </Alert>
+          )}
         </Grid>
-      </Grid>
-    </div>
+      )}
+    </>
   );
 };
 

ui-cra/src/components/Templates/Form/index.tsx

@@ -300,6 +300,7 @@ const ResourceForm: FC<ResourceFormProps> = ({ template, resource }) => {
   const [costEstimationLoading, setCostEstimationLoading] =
     useState<boolean>(false);
   const [costEstimate, setCostEstimate] = useState<string>('00.00 USD');
+  const [costEstimateMessage, setCostEstimateMessage] = useState<string>('');
   const [enableCreatePR, setEnableCreatePR] = useState<boolean>(false);
 
   // get the cost estimate feature flag
@@ -364,6 +365,7 @@ const ResourceForm: FC<ResourceFormProps> = ({ template, resource }) => {
       .then(data => {
         const { costEstimate } = data;
         setCostEstimate(getFormattedCostEstimate(costEstimate));
+        setCostEstimateMessage(costEstimate?.message || '');
       })
       .catch(err =>
         setNotifications([
@@ -531,6 +533,7 @@ const ResourceForm: FC<ResourceFormProps> = ({ template, resource }) => {
                 handleCostEstimation={handleCostEstimation}
                 costEstimate={costEstimate}
                 isCostEstimationLoading={costEstimationLoading}
+                costEstimateMessage={costEstimateMessage}
               />
             ) : null}
           </Grid>
@@ -579,6 +582,7 @@ const ResourceForm: FC<ResourceFormProps> = ({ template, resource }) => {
     costEstimationLoading,
     handleCostEstimation,
     costEstimate,
+    costEstimateMessage,
     isCredentialEnabled,
     isCostEstimationEnabled,
     isKustomizationsEnabled,

ui-cra/src/utils/formatters.ts

@@ -42,9 +42,13 @@ export const getFormattedCostEstimate = (
   });
   if (costEstimate) {
     const { currency, range } = costEstimate;
-    const estimate = `${costFormatter.format(
-      range?.low || 0,
-    )} - ${costFormatter.format(range?.high || 0)} ${currency}`;
+    const lowFormated = costFormatter.format(range?.low || 0);
+    const highFormated = costFormatter.format(range?.high || 0);
+
+    const estimate =
+      (lowFormated === highFormated
+        ? `${lowFormated}`
+        : `${lowFormated} - ${highFormated}`) + ` ${currency}`;
     return estimate;
   } else return 'N/A';
 };