From dfc4f2535e76c58ef0a973f1e70c61f6197d95b7 Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Wed, 29 Nov 2023 21:35:05 +0100 Subject: [PATCH] Add full name field to Registration form --- .../EnvironmentTypePanel/index.tsx | 2 +- .../RegistrationPanel/index.tsx | 90 +++++++++++-------- .../RegistrationPanel/styles.ts | 14 --- .../RecentActivity/RegistrationPanel/types.ts | 7 +- src/components/RecentActivity/index.tsx | 7 +- 5 files changed, 64 insertions(+), 56 deletions(-) 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 } });