fix(web): fix the display when app configuration is not in the bundle (…

…labring#1458)
HUAHUAI23 · Aug 12, 2023 · 3d7631a · 3d7631a
1 parent ec20355
commit 3d7631a
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 17 deletions.
diff --git a/web/src/pages/home/mods/CreateAppModal/BundleControl/index.tsx b/web/src/pages/home/mods/CreateAppModal/BundleControl/index.tsx
@@ -94,6 +94,7 @@ export default function BundleControl(props: {
             specs: { value: number; price: number }[];
             price: number;
           }) => {
+            const value = item.specs.findIndex((spec) => spec.value === bundle[item.type]);
             return item.specs.length > 0 ? (
               <div className="ml-8 mt-8 flex" key={item.type}>
                 <span className={clsx("w-2/12", darkMode ? "" : "text-grayModern-600")}>
@@ -102,7 +103,7 @@ export default function BundleControl(props: {
                 <Slider
                   id="slider"
                   className="mr-12"
-                  value={item.specs.findIndex((spec) => spec.value === bundle[item.type])}
+                  value={value}
                   min={0}
                   max={item.specs.length - 1}
                   colorScheme="primary"
@@ -131,7 +132,19 @@ export default function BundleControl(props: {
                   <SliderTrack>
                     <SliderFilledTrack bg={"primary.200"} />
                   </SliderTrack>
-                  <SliderThumb bg={"primary.500"} />
+                  {value >= 0 ? (
+                    <SliderThumb bg={"primary.500"} />
+                  ) : (
+                    <SliderThumb
+                      onClick={() => {
+                        setBundle({
+                          ...bundle,
+                          [item.type]: item.specs[0].value,
+                        });
+                      }}
+                      style={{ opacity: 0 }}
+                    />
+                  )}
                 </Slider>
               </div>
             ) : null;

diff --git a/web/src/pages/home/mods/CreateAppModal/index.tsx b/web/src/pages/home/mods/CreateAppModal/index.tsx
@@ -188,20 +188,22 @@ const CreateAppModal = (props: {
           autoscaling,
         });
 
-        const newResource = {
-          ...currentApp.bundle.resource,
-          limitCPU: bundle.cpu,
-          limitMemory: bundle.memory,
-          databaseCapacity: bundle.databaseCapacity,
-          storageCapacity: bundle.storageCapacity,
-        };
-
-        const newBundle = {
-          ...currentApp.bundle,
-          resource: newResource,
-          autoscaling: autoscaling,
-        };
-        isCurrentApp && setCurrentApp({ ...currentApp, bundle: newBundle });
+        if (isCurrentApp) {
+          const newResource = {
+            ...currentApp.bundle.resource,
+            limitCPU: bundle.cpu,
+            limitMemory: bundle.memory,
+            databaseCapacity: bundle.databaseCapacity,
+            storageCapacity: bundle.storageCapacity,
+          };
+
+          const newBundle = {
+            ...currentApp.bundle,
+            resource: newResource,
+            autoscaling: autoscaling,
+          };
+          setCurrentApp({ ...currentApp, bundle: newBundle });
+        }
         break;
 
       case "create":
@@ -306,7 +308,7 @@ const CreateAppModal = (props: {
               )}
               <div className="mr-2 flex items-center">
                 <span className="ml-4 mr-2">
-                  {t("Balance")}:
+                  {t("Balance") + ":"}
                   <span className="ml-2 text-xl">{formatPrice(accountRes?.data?.balance)}</span>
                 </span>
                 {totalPrice > accountRes?.data?.balance! ? (