Onboarding improvements + build fix (#41)

The functional effect of this PR is to add a `docker_desktop` query param (which doesn't yet do anything) to the extension's link for creating an Akita account, and to move "Project" above the api key and api key secret fields in the frontend. This ordering change corresponds to the order the project and key are created during the onboarding in the Akita app. Also, #40 left a couple of lint errors that block the `make` command for building the extension from working; this happened because the extension was already built, and the changes that made it into the diff were hot-reloaded.
akitasoftware · Apr 5, 2023 · 4a8a7e7 · 4a8a7e7
1 parent 6c3c116
commit 4a8a7e7
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 22 deletions.
diff --git a/ui/src/hooks/use-akita-services.ts b/ui/src/hooks/use-akita-services.ts
@@ -23,10 +23,10 @@ export const useAkitaServices = (pollInterval: number, config?: AgentConfig): Se
     };
 
     // Immediately fetch services once
-    fetchServices()
+    fetchServices();
     // and poll thereafter.
-    const interval = setInterval(fetchServices, pollInterval)
-    return () => clearInterval(interval)
+    const interval = setInterval(fetchServices, pollInterval);
+    return () => clearInterval(interval);
   }, [ddClient, config, pollInterval]);
 
   return services;

diff --git a/ui/src/views/agent/AgentPage.tsx b/ui/src/views/agent/AgentPage.tsx
@@ -4,9 +4,9 @@ import { useNavigate } from "react-router-dom";
 import { AgentConfig, createAgentConfig, deleteAgentConfig } from "../../data/queries/agent-config";
 import { removeAkitaContainer } from "../../data/queries/container";
 import { useAkitaAgent } from "../../hooks/use-akita-agent";
+import { useAkitaServices } from "../../hooks/use-akita-services";
 import { useAkitaUser } from "../../hooks/use-akita-user";
 import { useDockerDesktopClient } from "../../hooks/use-docker-desktop-client";
-import { useAkitaServices } from "../../hooks/use-akita-services";
 import { HelpSpeedDial } from "../shared/components/HelpSpeedDial";
 import { AgentHeader } from "./components/AgentHeader";
 import { AgentStatus } from "./components/AgentStatus";

diff --git a/ui/src/views/agent/components/AgentStatus.tsx b/ui/src/views/agent/components/AgentStatus.tsx
@@ -104,7 +104,7 @@ export const AgentStatus = ({
   );
   const fourHoursAgo = new Date(new Date().getTime() - 4 * 60 * 60 * 1000);
 
-  const previouslySeenDeploymentInfos = !!targetProject
+  const previouslySeenDeploymentInfos = targetProject
     ? targetProject.deployment_infos.filter((di) => !!di.last_observed)
     : [];
   const projectLastSeenAt =
@@ -172,9 +172,9 @@ export const AgentStatus = ({
             ) : (
               <>
                 but has not seen any traffic{" "}
-                {!!projectLastSeenAt ? "recently" : "yet"}. Please note that
-                your app must be running within Docker Desktop for Akita to see
-                its traffic. If this issue persists, check your{" "}
+                {projectLastSeenAt ? "recently" : "yet"}. Please note that your
+                app must be running within Docker Desktop for Akita to see its
+                traffic. If this issue persists, check your{" "}
                 <Link
                   onClick={onSettingsClick}
                   sx={{
@@ -213,7 +213,7 @@ export const AgentStatus = ({
               " to debug this issue."}
           </Typography>
           {!projectLastSeenRecently &&
-            (!!projectLastSeenAt ? (
+            (projectLastSeenAt ? (
               <Typography sx={{ marginTop: 2 }}>
                 You have previously sent traffic to Akita.{" "}
                 <Link

diff --git a/ui/src/views/config/ConfigPage.tsx b/ui/src/views/config/ConfigPage.tsx
@@ -155,7 +155,7 @@ export const ConfigPage = () => {
 
   const handleSignupClick = () => {
     ddClient.host.openExternal(
-      "https://app.akita.software/login?sign_up&utm_source=docker&utm_medium=link&utm_campaign=beta_from_docker"
+      "https://app.akita.software/login?sign_up&docker_desktop&utm_source=docker&utm_medium=link&utm_campaign=beta_from_docker"
     );
   };
 
@@ -181,6 +181,18 @@ export const ConfigPage = () => {
               <CardMedia component={AkitaLogo} />
               <CardContent>
                 <Stack spacing={4} marginX={1}>
+                  <TextField
+                    error={isInvalidProjectName}
+                    helperText={isInvalidProjectName ? "Project does not exist" : ""}
+                    required
+                    label={"Project"}
+                    placeholder={"Project"}
+                    name={"projectName"}
+                    type={"text"}
+                    variant={"outlined"}
+                    value={configInput.projectName}
+                    onChange={handleInputChange}
+                  />
                   <TextField
                     error={isInvalidAPICredentials}
                     required
@@ -203,18 +215,6 @@ export const ConfigPage = () => {
                     value={configInput.apiSecret}
                     onChange={handleInputChange}
                   />
-                  <TextField
-                    error={isInvalidProjectName}
-                    helperText={isInvalidProjectName ? "Project does not exist" : ""}
-                    required
-                    label={"Project"}
-                    placeholder={"Project"}
-                    name={"projectName"}
-                    type={"text"}
-                    variant={"outlined"}
-                    value={configInput.projectName}
-                    onChange={handleInputChange}
-                  />
                   <Button
                     disabled={!isSubmitEnabled}
                     variant="contained"