Add full name field to Registration form

src/components/RecentActivity/EnvironmentTypePanel/index.tsx

@@ -43,7 +43,7 @@ export const EnvironmentTypePanel = (props: EnvironmentTypePanelProps) => {
   }[] = [
     {
       type: "local",
-      title: "Digma environment",
+      title: "Local environment",
       description:
         "Define an environment for specific branches, types of tests or other criteria",
       icon: <CodeDisplayIcon />

src/components/RecentActivity/RegistrationPanel/index.tsx

@@ -1,86 +1,102 @@
 import { ChangeEvent, KeyboardEvent, useEffect, useRef, useState } from "react";
 import { isValidEmailFormat } from "../../../utils/isValidEmailFormat";
 import { NewCircleLoader } from "../../common/NewCircleLoader";
+import { TextField } from "../../common/TextField";
 import { CrossIcon } from "../../common/icons/CrossIcon";
 import { WarningCircleLargeIcon } from "../../common/icons/WarningCircleLargeIcon";
 import { isWorkEmail } from "./isWorkEmail";
 import * as s from "./styles";
-import { RegistrationPanelProps } from "./types";
+import { RegistrationFormData, RegistrationPanelProps } from "./types";
 
-const validateEmail = (email: string): string | null => {
-  const message = "Please enter a valid work email address";
+const validateTextFields = (data: RegistrationFormData): string | null => {
+  if (data.fullName.length === 0) {
+    return "Full name is required";
+  }
+
+  const emailMessage = "Please enter a valid work email address";
 
-  if (!isValidEmailFormat(email)) {
-    return message;
+  if (!isValidEmailFormat(data.email)) {
+    return emailMessage;
   }
 
-  if (!isWorkEmail(email)) {
-    return message;
+  if (!isWorkEmail(data.email)) {
+    return emailMessage;
   }
 
   return null;
 };
 
 export const RegistrationPanel = (props: RegistrationPanelProps) => {
+  const [fullName, setFullName] = useState("");
   const [email, setEmail] = useState("");
-  const emailTextFieldRef = useRef<HTMLInputElement>(null);
+  const fullNameTextFieldRef = useRef<HTMLInputElement>(null);
 
-  const errorMessage = validateEmail(email);
+  const errorMessage = validateTextFields({ fullName, email });
 
   useEffect(() => {
-    emailTextFieldRef.current?.focus();
+    fullNameTextFieldRef.current?.focus();
   }, []);
 
   const handleSubmitButtonClick = () => {
-    props.onSubmit(email);
+    props.onSubmit({
+      fullName: fullName.trim(),
+      email
+    });
   };
 
   const handleCloseButtonClick = () => {
     props.onClose();
   };
 
+  const handleFullNameTextFieldChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setFullName(e.target.value);
+  };
+
   const handleEmailTextFieldChange = (e: ChangeEvent<HTMLInputElement>) => {
     setEmail(e.target.value);
   };
 
   const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
     if (e.key === "Enter" && !errorMessage) {
-      props.onSubmit(email);
+      props.onSubmit({
+        fullName,
+        email
+      });
     }
   };
 
   return (
     <s.Container onKeyDown={handleKeyDown}>
       <s.Header>
-        <s.Title>Register with your email</s.Title>
+        <s.Title>Register</s.Title>
         <s.CloseButton onClick={handleCloseButtonClick}>
           <CrossIcon color={"currentColor"} size={14} />
         </s.CloseButton>
       </s.Header>
-      <s.Description>
-        Please register using your work email to start collecting data from
-        CI/Prod or other shared environments
-      </s.Description>
-      <s.TextFieldContainer>
-        <s.EmailTextField
-          ref={emailTextFieldRef}
-          value={email}
-          onChange={handleEmailTextFieldChange}
-          placeholder={"Enter your email"}
-        />
-        {props.isRegistrationInProgress ? (
-          <s.CircleLoaderContainer>
-            <NewCircleLoader size={32} />
-          </s.CircleLoaderContainer>
-        ) : (
-          <s.SubmitButton
-            disabled={Boolean(errorMessage)}
-            onClick={handleSubmitButtonClick}
-          >
-            Submit
-          </s.SubmitButton>
-        )}
-      </s.TextFieldContainer>
+      Please register first to create new environments in Digma
+      <TextField
+        ref={fullNameTextFieldRef}
+        value={fullName}
+        onChange={handleFullNameTextFieldChange}
+        placeholder={"Enter your full name"}
+      />
+      <TextField
+        value={email}
+        onChange={handleEmailTextFieldChange}
+        placeholder={"Enter your email"}
+      />
+      {props.isRegistrationInProgress ? (
+        <s.CircleLoaderContainer>
+          <NewCircleLoader size={32} />
+        </s.CircleLoaderContainer>
+      ) : (
+        <s.SubmitButton
+          disabled={Boolean(errorMessage)}
+          onClick={handleSubmitButtonClick}
+        >
+          Submit
+        </s.SubmitButton>
+      )}
       {email.length > 0 && errorMessage && (
         <s.ErrorMessage>
           <WarningCircleLargeIcon size={14} color={"currentColor"} />

src/components/RecentActivity/RegistrationPanel/styles.ts

@@ -1,6 +1,5 @@
 import styled from "styled-components";
 import { Button } from "../../common/Button";
-import { TextField } from "../../common/TextField";
 
 export const Container = styled.div`
   display: flex;
@@ -52,10 +51,6 @@ export const Title = styled.span`
   }};
 `;
 
-export const Description = styled.span`
-  width: 350px;
-`;
-
 export const ButtonsContainer = styled.div`
   display: flex;
   padding-top: 8px;
@@ -71,15 +66,6 @@ export const CloseButton = styled.button`
   cursor: pointer;
 `;
 
-export const TextFieldContainer = styled.div`
-  display: flex;
-  gap: 8px;
-`;
-
-export const EmailTextField = styled(TextField)`
-  width: 301px;
-`;
-
 export const CircleLoaderContainer = styled.div`
   display: flex;
   justify-content: center;

src/components/RecentActivity/RegistrationPanel/types.ts

@@ -1,5 +1,10 @@
 export interface RegistrationPanelProps {
-  onSubmit: (email: string) => void;
+  onSubmit: (data: RegistrationFormData) => void;
   onClose: () => void;
   isRegistrationInProgress: boolean;
 }
+
+export interface RegistrationFormData {
+  fullName: string;
+  email: string;
+}

src/components/RecentActivity/index.tsx

@@ -21,6 +21,7 @@ import { LiveData } from "./LiveView/types";
 import { ObservabilityStatusBadge } from "./ObservabilityStatusBadge";
 import { RecentActivityTable, isRecent } from "./RecentActivityTable";
 import { RegistrationPanel } from "./RegistrationPanel";
+import { RegistrationFormData } from "./RegistrationPanel/types";
 import { SetupOrgDigmaPanel } from "./SetupOrgDigmaPanel";
 import { actions } from "./actions";
 import * as s from "./styles";
@@ -253,7 +254,7 @@ export const RecentActivity = (props: RecentActivityProps) => {
     environment: string,
     type: EnvironmentType
   ) => {
-    if (type === "shared" && !config.userEmail) {
+    if (!config.userEmail) {
       setIsRegistrationPopupVisible(true);
       setEnvironmentToSetType({
         environment,
@@ -310,11 +311,11 @@ export const RecentActivity = (props: RecentActivityProps) => {
     });
   };
 
-  const handleRegistrationSubmit = (email: string) => {
+  const handleRegistrationSubmit = (formData: RegistrationFormData) => {
     window.sendMessageToDigma({
       action: actions.REGISTER,
       payload: {
-        email
+        ...formData
       }
     });