فهرست منبع

Disable Button on Click (#2871)

Co-authored-by: Soham Dessai <sohamdessai@sohams-mbp.mynetworksettings.com>
sdess09 3 سال پیش
والد
کامیت
bbfd0528cf
1فایلهای تغییر یافته به همراه13 افزوده شده و 6 حذف شده
  1. 13 6
      dashboard/src/components/ProvisionerSettings.tsx

+ 13 - 6
dashboard/src/components/ProvisionerSettings.tsx

@@ -90,6 +90,7 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
   const [clusterVersion, setClusterVersion] = useState("v1.24.0");
   const [isReadOnly, setIsReadOnly] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string>(undefined);
+  const [isClicked, setIsClicked] = useState(false);
 
   const markStepStarted = async (step: string) => {
     try {
@@ -117,8 +118,16 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
     }
     return undefined;
   };
-
+  const isDisabled = () => {
+    return (
+      (!clusterName && true) ||
+      (isReadOnly && props.provisionerError === "") ||
+      props.provisionerError === "" ||
+      isClicked
+    );
+  };
   const createCluster = async () => {
+    setIsClicked(true);
     var data = new Contract({
       cluster: new Cluster({
         projectId: currentProject.id,
@@ -211,6 +220,7 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
     } catch (err) {
       const errMessage = err.response.data.error.replace("unknown: ", "");
       // hacky, need to standardize error contract with backend
+      setIsClicked(false);
       if (errMessage.includes("elastic IP")) {
         setErrorMessage(AWS_EIP_QUOTA_ERROR_MESSAGE);
       } else if (errMessage.includes("VPC")) {
@@ -226,6 +236,7 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
       }
     } finally {
       setIsReadOnly(false);
+      setIsClicked(false);
     }
   };
 
@@ -361,11 +372,7 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
     <>
       <StyledForm>{renderForm()}</StyledForm>
       <Button
-        disabled={
-          (!clusterName && true) ||
-          (isReadOnly && props.provisionerError == "") ||
-          props.provisionerError == ""
-        }
+        disabled={isDisabled()}
         onClick={createCluster}
         status={getStatus()}
       >