Remove awkward lag when integration is loading its apps

frontend/components/integrations/CloudIntegration.tsx

@@ -8,17 +8,23 @@ import {
 import deleteIntegrationAuth from "../../pages/api/integrations/DeleteIntegrationAuth";
 
 interface CloudIntegrationOption {
+    isAvailable: Boolean;
     name: string;
     type: string;
     clientId: string;
     docsLink: string;
 }
 
+interface IntegrationAuth {
+    id: string;
+    integration: string;
+}
+
 interface Props {
     cloudIntegrationOption: CloudIntegrationOption;
     setSelectedIntegrationOption: () => void;
     integrationOptionPress: () => void;
-    integrationAuths: any;
+    integrationAuths: IntegrationAuth[];
 }
 
 const CloudIntegration = ({
@@ -27,34 +33,36 @@ const CloudIntegration = ({
     integrationOptionPress,
     integrationAuths
 }: Props) => {
+    console.log('cloudIntegrationOption', cloudIntegrationOption);
+    console.log('integrationAuths', integrationAuths);
     return integrationAuths ? (
         <div
-        className={`relative ${
-            ["Heroku"].includes(cloudIntegrationOption.name)
-            ? "hover:bg-white/10 duration-200 cursor-pointer"
-            : "opacity-50"
-        } flex flex-row bg-white/5 h-32 rounded-md p-4 items-center`}
-        onClick={() => {
-            if (!["Heroku"].includes(cloudIntegrationOption.name)) return;
-            setSelectedIntegrationOption(cloudIntegrationOption);
-            integrationOptionPress({
-                integrationOption: cloudIntegrationOption
-            });
-        }}
-        key={cloudIntegrationOption.name}
+            className={`relative ${
+                cloudIntegrationOption.isAvailable
+                ? "hover:bg-white/10 duration-200 cursor-pointer"
+                : "opacity-50"
+            } flex flex-row bg-white/5 h-32 rounded-md p-4 items-center`}
+            onClick={() => {
+                if (!cloudIntegrationOption.isAvailable) return;
+                setSelectedIntegrationOption(cloudIntegrationOption);
+                integrationOptionPress({
+                    integrationOption: cloudIntegrationOption
+                });
+            }}
+            key={cloudIntegrationOption.name}
         >
             <Image
-            src={`/images/integrations/${cloudIntegrationOption.name}.png`}
-            height={70}
-            width={70}
-            alt="integration logo"
+                src={`/images/integrations/${cloudIntegrationOption.name}.png`}
+                height={70}
+                width={70}
+                alt="integration logo"
             />
             {cloudIntegrationOption.name.split(" ").length > 2 ? (
             <div className="font-semibold text-gray-300 group-hover:text-gray-200 duration-200 text-3xl ml-4 max-w-xs">
                 <div>{cloudIntegrationOption.name.split(" ")[0]}</div>
                 <div className="text-base">
-                {cloudIntegrationOption.name.split(" ")[1]}{" "}
-                {cloudIntegrationOption.name.split(" ")[2]}
+                    {cloudIntegrationOption.name.split(" ")[1]}{" "}
+                    {cloudIntegrationOption.name.split(" ")[2]}
                 </div>
             </div>
             ) : (
@@ -62,25 +70,25 @@ const CloudIntegration = ({
                 {cloudIntegrationOption.name}
             </div>
             )}
-        {["Heroku"].includes(cloudIntegrationOption.name) &&
+        {cloudIntegrationOption.isAvailable &&
             integrationAuths
             .map((authorization) => authorization.integration)
             .includes(cloudIntegrationOption.name.toLowerCase()) && (
             <div className="absolute group z-50 top-0 right-0 flex flex-row">
                 <div
-                onClick={() => {
-                    deleteIntegrationAuth({
-                    integrationAuthId: integrationAuths
-                        .filter(
-                        (authorization) =>
-                            authorization.integration ==
-                            cloudIntegrationOption.name.toLowerCase()
-                        )
-                        .map((authorization) => authorization._id)[0],
-                    });
-                    router.reload();
-                }}
-                className="cursor-pointer w-max bg-red py-0.5 px-2 rounded-b-md text-xs flex flex-row items-center opacity-0 group-hover:opacity-100 duration-200"
+                    onClick={() => {
+                        deleteIntegrationAuth({
+                        integrationAuthId: integrationAuths
+                            .filter(
+                            (authorization) =>
+                                authorization.integration ==
+                                cloudIntegrationOption.name.toLowerCase()
+                            )
+                            .map((authorization) => authorization._id)[0],
+                        });
+                        router.reload();
+                    }}
+                    className="cursor-pointer w-max bg-red py-0.5 px-2 rounded-b-md text-xs flex flex-row items-center opacity-0 group-hover:opacity-100 duration-200"
                 >
                 <FontAwesomeIcon
                     icon={faX}
@@ -97,7 +105,7 @@ const CloudIntegration = ({
                 </div>
             </div>
             )}
-        {!["Heroku"].includes(cloudIntegrationOption.name) && (
+        {!cloudIntegrationOption.isAvailable && (
             <div className="absolute group z-50 top-0 right-0 flex flex-row">
             <div className="w-max bg-yellow py-0.5 px-2 rounded-bl-md rounded-tr-md text-xs flex flex-row items-center text-black opacity-90">
                 Coming Soon

frontend/components/integrations/Integration.tsx

@@ -15,6 +15,8 @@ import getIntegrationApps from "../../pages/api/integrations/GetIntegrationApps"
 import Button from "~/components/basic/buttons/Button";
 import ListBox from "~/components/basic/Listbox";
 
+// TODO: optimize laggy dropdown for app options
+
 interface Integration {
     app?: string;
     environment: string;
@@ -34,23 +36,21 @@ const Integration = ({
     const [fileState, setFileState] = useState([]);
     const router = useRouter();
     const [apps, setApps] = useState([]);
-    const [integrationApp, setIntegrationApp] = useState(
-      integration.app ? integration.app : apps[0]
-    );
+    const [integrationApp, setIntegrationApp] = useState(null);
   
     useEffect(async () => {
-      const tempHerokuApps = await getIntegrationApps({
+      const tempApps = await getIntegrationApps({
         integrationAuthId: integration.integrationAuth,
       });
       
-      const tempHerokuAppNames = tempHerokuApps.map((app) => app.name);
-      setApps(tempHerokuAppNames);
+      const tempAppNames = tempApps.map((app) => app.name);
+      setApps(tempAppNames);
       setIntegrationApp(
-        integration.app ? integration.app : tempHerokuAppNames[0]
+        integration.app ? integration.app : tempAppNames[0]
       );
     }, []);
   
-    return (
+    return (integrationApp && apps.length > 0) ? (
       <div className="flex flex-col max-w-5xl justify-center bg-white/5 p-6 rounded-md mx-6 mt-8">
         <div className="relative px-4 flex flex-row items-center justify-between mb-4">
           <div className="flex flex-row">
@@ -63,6 +63,7 @@ const Integration = ({
                   !integration.isActive && [
                     "Development",
                     "Staging",
+                    "Testing",
                     "Production",
                   ]
                 }
@@ -135,7 +136,9 @@ const Integration = ({
           </div>
         </div>
       </div>
-    );
+    ) : (
+      <div></div>
+    )
   };
 
 export default Integration;

frontend/public/json/cloudIntegrations.json

@@ -3,6 +3,7 @@
         "name": "Heroku",
         "slug": "heroku",
         "image": "Heroku",
+        "isAvailable": true,
         "type": "oauth2",
         "clientId": "bc132901-935a-4590-b010-f1857efc380d"
     },
@@ -10,6 +11,7 @@
         "name": "Netlify",
         "slug": "netlify",
         "image": "Netlify",
+        "isAvailable": false,
         "type": "oauth2",
         "clientId": ""
     },
@@ -17,6 +19,7 @@
         "name": "Digital Ocean",
         "slug": "digital-ocean",
         "image": "Digital Ocean",
+        "isAvailable": false,
         "type": "",
         "clientId": ""
     },
@@ -24,6 +27,7 @@
         "name": "Google Cloud Platform",
         "slug": "gcp",
         "image": "Google Cloud Platform",
+        "isAvailable": false,
         "type": "",
         "clientId": ""
     },
@@ -31,6 +35,7 @@
         "name": "Amazon Web Services",
         "slug": "aws",
         "image": "Amazon Web Services",
+        "isAvailable": false,
         "type": "",
         "clientId": ""
     },
@@ -38,6 +43,7 @@
         "name": "Microsoft Azure",
         "slug": "azure",
         "image": "Microsoft Azure",
+        "isAvailable": false,
         "type": "",
         "clientId": ""
     },
@@ -45,6 +51,7 @@
         "name": "Travis CI",
         "slug": "travisci",
         "image": "Travis CI",
+        "isAvailable": false,
         "type": "",
         "clientId": ""
     },
@@ -52,6 +59,7 @@
         "name": "Circle CI",
         "slug": "circleci",
         "image": "Circle CI",
+        "isAvailable": false,
         "type": "",
         "clientId": ""
     }