Fix: Bugs - 6 Feb (#530)

omnistrate-oss · Feb 6, 2025 · 3abb335 · 3abb335
1 parent c2911e9
commit 3abb335
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 8 deletions.
diff --git a/app/(dashboard)/components/SubscriptionPlanRadio/SubscriptionPlanRadio.tsx b/app/(dashboard)/components/SubscriptionPlanRadio/SubscriptionPlanRadio.tsx
@@ -2,7 +2,7 @@
 
 import clsx from "clsx";
 import Link from "next/link";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { ArrowOutward } from "@mui/icons-material";
 import { useMutation } from "@tanstack/react-query";
 
@@ -21,6 +21,7 @@ import { SubscriptionRequest } from "src/types/subscriptionRequest";
 import { createSubscriptionRequest } from "src/api/subscriptionRequests";
 import { getSubscriptionsRoute } from "src/utils/routes";
 import { ServiceOffering } from "src/types/serviceOffering";
+import LoadingSpinnerSmall from "src/components/CircularProgress/CircularProgress";
 
 const SubscriptionPlanCard = ({
   plan,
@@ -30,6 +31,7 @@ const SubscriptionPlanCard = ({
   isSelected,
   onClick,
   disabled,
+  isSubscribing,
   disabledMessage,
 }) => {
   const rootSubscription = subscriptions.find((sub) => sub.roleType === "root");
@@ -80,11 +82,12 @@ const SubscriptionPlanCard = ({
       {!rootSubscription && !subscriptionRequest && (
         <Button
           variant="contained"
-          disabled={disabled}
-          startIcon={<CirclePlusIcon disabled={disabled} />}
+          disabled={disabled || isSubscribing}
+          startIcon={<CirclePlusIcon disabled={disabled || isSubscribing} />}
           onClick={onSubscribeClick}
         >
           Subscribe
+          {isSubscribing && <LoadingSpinnerSmall />}
         </Button>
       )}
 
@@ -169,6 +172,7 @@ const SubscriptionPlanRadio: React.FC<SubscriptionPlanRadioProps> = ({
     refetchSubscriptionRequests,
   } = useGlobalData();
 
+  const [subscribingPlanId, setSubscribingPlanId] = useState<string>();
   const servicePlanId = formData.values[name];
 
   const subscriptionRequestsObj: Record<string, SubscriptionRequest> =
@@ -221,6 +225,9 @@ const SubscriptionPlanRadio: React.FC<SubscriptionPlanRadioProps> = ({
             )}
             subscriptionRequest={subscriptionRequestsObj[plan.productTierID]}
             onSubscribeClick={async () => {
+              if (subscribeMutation.isLoading) return;
+              setSubscribingPlanId(plan.productTierID);
+
               try {
                 const res = await subscribeMutation.mutateAsync({
                   productTierId: plan.productTierID,
@@ -241,11 +248,15 @@ const SubscriptionPlanRadio: React.FC<SubscriptionPlanRadioProps> = ({
                   snackbar.showSuccess("Subscribed successfully");
                 }
 
-                refetchSubscriptions();
-                refetchSubscriptionRequests();
+                await Promise.all([
+                  refetchSubscriptions(),
+                  refetchSubscriptionRequests(),
+                ]);
               } catch (error) {
                 console.error(error);
                 snackbar.showError("Failed to subscribe. Please try again");
+              } finally {
+                setSubscribingPlanId(undefined);
               }
             }}
             onClick={() => {
@@ -254,6 +265,7 @@ const SubscriptionPlanRadio: React.FC<SubscriptionPlanRadioProps> = ({
               }
               formData.setFieldValue(name, plan.productTierID);
             }}
+            isSubscribing={subscribingPlanId === plan.productTierID}
             isSelected={servicePlanId === plan.productTierID}
             disabled={disabled || plan.serviceModelStatus !== "READY"}
             disabledMessage={

diff --git a/app/(dashboard)/instances/components/InstanceFormFields.tsx b/app/(dashboard)/instances/components/InstanceFormFields.tsx
@@ -597,10 +597,10 @@ export const getDeploymentConfigurationFields = (
           label: param.displayName || param.key,
           subLabel: param.description,
           name: `requestParams.${param.key}`,
-          value: values.requestParams[param.key] || "",
+          value: values.requestParams[param.key],
           type: "number",
           required: formMode !== "modify" && param.required,
-          previewValue: String(values.requestParams[param.key]) || "",
+          previewValue: values.requestParams[param.key],
         });
       } else {
         fields.push({

diff --git a/src/components/DynamicForm/PreviewCard.tsx b/src/components/DynamicForm/PreviewCard.tsx
@@ -20,7 +20,7 @@ const FieldValue = ({ field, formData }: { field: Field; formData: any }) => {
   }
 
   const renderPreviewValue = () => {
-    if (typeof previewValue === "string") {
+    if (typeof previewValue === "string" || typeof previewValue === "number") {
       return (
         <Text
           title={previewValue}
@@ -37,6 +37,7 @@ const FieldValue = ({ field, formData }: { field: Field; formData: any }) => {
         </Text>
       );
     }
+
     if (typeof previewValue === "function") {
       return previewValue({ field, formData });
     }