diff --git a/src/components/RecentActivity/EnvironmentTypePanel/index.tsx b/src/components/RecentActivity/EnvironmentTypePanel/index.tsx
index 06de2a61d..59b1e7fd5 100644
--- a/src/components/RecentActivity/EnvironmentTypePanel/index.tsx
+++ b/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:
diff --git a/src/components/RecentActivity/RegistrationPanel/index.tsx b/src/components/RecentActivity/RegistrationPanel/index.tsx
index 7aa9b54a0..6fc55ca37 100644
--- a/src/components/RecentActivity/RegistrationPanel/index.tsx
+++ b/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(null);
+ const fullNameTextFieldRef = useRef(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) => {
+ setFullName(e.target.value);
+ };
+
const handleEmailTextFieldChange = (e: ChangeEvent) => {
setEmail(e.target.value);
};
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === "Enter" && !errorMessage) {
- props.onSubmit(email);
+ props.onSubmit({
+ fullName,
+ email
+ });
}
};
return (
- Register with your email
+ Register
-
- Please register using your work email to start collecting data from
- CI/Prod or other shared environments
-
-
-
- {props.isRegistrationInProgress ? (
-
-
-
- ) : (
-
- Submit
-
- )}
-
+ Please register first to create new environments in Digma
+
+
+ {props.isRegistrationInProgress ? (
+
+
+
+ ) : (
+
+ Submit
+
+ )}
{email.length > 0 && errorMessage && (
diff --git a/src/components/RecentActivity/RegistrationPanel/styles.ts b/src/components/RecentActivity/RegistrationPanel/styles.ts
index 722a3ef11..751e29960 100644
--- a/src/components/RecentActivity/RegistrationPanel/styles.ts
+++ b/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;
diff --git a/src/components/RecentActivity/RegistrationPanel/types.ts b/src/components/RecentActivity/RegistrationPanel/types.ts
index 38250a1e6..cd31fdcf7 100644
--- a/src/components/RecentActivity/RegistrationPanel/types.ts
+++ b/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;
+}
diff --git a/src/components/RecentActivity/index.tsx b/src/components/RecentActivity/index.tsx
index aa7b252ae..23de9459d 100644
--- a/src/components/RecentActivity/index.tsx
+++ b/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
}
});