From 4a8a7e7f9653d918044b1c10ad106c0e2b5e4db1 Mon Sep 17 00:00:00 2001
From: Jo Booth <jo.m.booth@gmail.com>
Date: Wed, 5 Apr 2023 18:20:18 -0400
Subject: [PATCH] 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.
---
 ui/src/hooks/use-akita-services.ts            |  6 ++---
 ui/src/views/agent/AgentPage.tsx              |  2 +-
 ui/src/views/agent/components/AgentStatus.tsx | 10 +++----
 ui/src/views/config/ConfigPage.tsx            | 26 +++++++++----------
 4 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/ui/src/hooks/use-akita-services.ts b/ui/src/hooks/use-akita-services.ts
index d9329e5..a34012f 100644
--- 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
index f229ade..8d3e891 100644
--- 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
index e46ea41..b68d8b5 100644
--- 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
index 790db80..236ec97 100644
--- 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"