Add email field for notification when Digma Cloud will become available

src/components/InstallationWizard/InstallationTypeCard/index.tsx

@@ -0,0 +1,25 @@
+import * as s from "./styles";
+import { InstallationTypeCardProps } from "./types";
+
+export const InstallationTypeCard = (props: InstallationTypeCardProps) => {
+  const handleClick = () => {
+    if (!props.disabled) {
+      props.onClick(props.installationType);
+    }
+  };
+
+  return (
+    <s.Container disabled={props.disabled} onClick={handleClick}>
+      <s.ContentContainer>
+        <s.IconContainer disabled={props.disabled}>
+          {props.icon}
+        </s.IconContainer>
+        <s.TextContainer>
+          <s.Title disabled={props.disabled}>{props.title}</s.Title>
+          {props.description}
+        </s.TextContainer>
+      </s.ContentContainer>
+      {props.additionalContent && <div>{props.additionalContent}</div>}
+    </s.Container>
+  );
+};

src/components/InstallationWizard/InstallationTypeButton/styles.ts → src/components/InstallationWizard/InstallationTypeCard/styles.ts

@@ -1,27 +1,18 @@
 import styled from "styled-components";
-import { InstallationTypeButtonElementProps } from "./types";
+import { ButtonProps, ContainerProps } from "./types";
 
-export const InstallationTypeButton = styled.button`
+export const Container = styled.div<ContainerProps>`
   display: flex;
+  flex-direction: column;
+  gap: 20px;
   padding: 12px;
-  gap: 8px;
   border-radius: 4px;
-  font-size: 12px;
-  line-height: 14px;
   border: 1px solid transparent;
-  color: ${({ theme }) => {
-    switch (theme.mode) {
-      case "light":
-        return "#828797";
-      case "dark":
-      case "dark-jetbrains":
-        return "#9b9b9b";
-    }
-  }};
+  cursor: ${({ disabled }) => (disabled ? "default" : "pointer")};
   background: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
-        return "#f1f5fa";
+        return "#e9eef4";
       case "dark":
       case "dark-jetbrains":
         return "#2e2e2e";
@@ -61,21 +52,25 @@ export const InstallationTypeButton = styled.button`
         }
       }};
   }
+`;
 
-  &:disabled {
-    color: ${({ theme }) => {
-      switch (theme.mode) {
-        case "light":
-          return "#b9c0d4";
-        case "dark":
-        case "dark-jetbrains":
-          return "#9b9b9b";
-      }
-    }};
-  }
+export const ContentContainer = styled.div`
+  display: flex;
+  gap: 8px;
+  font-size: 12px;
+  line-height: normal;
+  color: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#828797";
+      case "dark":
+      case "dark-jetbrains":
+        return "#9b9b9b";
+    }
+  }};
 `;
 
-export const InstallationTypeButtonIconContainer = styled.span<InstallationTypeButtonElementProps>`
+export const IconContainer = styled.span<ButtonProps>`
   display: flex;
   flex-shrink: 0;
   height: 72px;
@@ -92,35 +87,23 @@ export const InstallationTypeButtonIconContainer = styled.span<InstallationTypeB
         return "#3c3c3c";
     }
   }};
-
-  ${({ disabled }) => (disabled ? "opacity: 0.5;" : "")}
 `;
 
-export const InstallationTypeButtonTextContainer = styled.span`
+export const TextContainer = styled.span`
   display: flex;
   flex-direction: column;
   text-align: start;
 `;
 
-export const InstallationTypeButtonTitle = styled.span<InstallationTypeButtonElementProps>`
+export const Title = styled.span<ButtonProps>`
   display: flex;
   align-items: center;
   gap: 4px;
   font-weight: 600;
   font-size: 14px;
   line-height: 16px;
   margin-bottom: 8px;
-  color: ${({ disabled, theme }) => {
-    if (disabled) {
-      switch (theme.mode) {
-        case "light":
-          return "#b9c0d4";
-        case "dark":
-        case "dark-jetbrains":
-          return "#9b9b9b";
-      }
-    }
-
+  color: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
         return "#4d668a";

src/components/InstallationWizard/InstallationTypeButton/types.ts → src/components/InstallationWizard/InstallationTypeCard/types.ts

@@ -1,15 +1,18 @@
 import { ReactNode } from "react";
 import { InstallationType } from "../types";
 
-export type InstallationTypeButtonProps = {
+export type InstallationTypeCardProps = {
   disabled?: boolean;
   installationType: InstallationType;
   icon: ReactNode;
   title: ReactNode;
   description: ReactNode;
   onClick: (installationType: InstallationType) => void;
+  additionalContent?: ReactNode;
 };
 
-export type InstallationTypeButtonElementProps = {
+export type ButtonProps = {
   disabled?: boolean;
 };
+
+export type ContainerProps = ButtonProps;

src/components/InstallationWizard/index.tsx

@@ -11,13 +11,17 @@ import { addPrefix } from "../../utils/addPrefix";
 import { actions as globalActions } from "../common/App";
 import { ConfigContext } from "../common/App/ConfigContext";
 import { getThemeKind } from "../common/App/styles";
+import { Button } from "../common/Button";
+import { Checkbox } from "../common/Checkbox";
+import { Loader } from "../common/Loader";
+import { TextField } from "../common/TextField";
 import { CloudDownloadIcon } from "../common/icons/CloudDownloadIcon";
 import { DigmaGreetingIcon } from "../common/icons/DigmaGreetingIcon";
 import { OpenTelemetryDisplayIcon } from "../common/icons/OpenTelemetryDisplayIcon";
 import { SlackLogoIcon } from "../common/icons/SlackLogoIcon";
 import { FinishStep } from "./FinishStep";
 import { InstallStep } from "./InstallStep";
-import { InstallationTypeButton } from "./InstallationTypeButton";
+import { InstallationTypeCard } from "./InstallationTypeCard";
 import { ObservabilityStep } from "./ObservabilityStep";
 import { Step } from "./Step";
 import { StepData, StepStatus } from "./Step/types";
@@ -97,6 +101,8 @@ export const InstallationWizard = () => {
   const [connectionCheckStatus, setConnectionCheckStatus] =
     useState<AsyncActionStatus>();
   const footerContentRef = useRef<HTMLDivElement>(null);
+  const [userEmail, setUserEmail] = useState("");
+  const [isUserEmailCaptured, setIsUserEmailCaptured] = useState(false);
 
   // TO DO:
   // add environment variable for presetting the correct installation type
@@ -117,6 +123,10 @@ export const InstallationWizard = () => {
   );
   const [isEmailValidating, setIsEmailValidating] = useState(false);
   const debouncedEmail = useDebounce(email, 1000);
+  const [
+    isDigmaCloudNotificationCheckboxChecked,
+    setIsDigmaCloudNotificationCheckboxChecked
+  ] = useState(false);
 
   useEffect(() => {
     if (email === debouncedEmail) {
@@ -285,6 +295,30 @@ export const InstallationWizard = () => {
     });
   };
 
+  const handleDigmaCloudNotificationCheckboxChange = (value: boolean) => {
+    setIsDigmaCloudNotificationCheckboxChecked(value);
+  };
+
+  const handleUserEmailInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setUserEmail(e.target.value);
+  };
+
+  const handleEmailAddButton = () => {
+    if (userEmail.length > 0) {
+      setIsUserEmailCaptured(true);
+      window.sendMessageToDigma({
+        action: globalActions.SEND_TRACKING_EVENT,
+        payload: {
+          eventName:
+            trackingEvents.DIGMA_CLOUD_AVAILABILITY_NOTIFICATION_EMAIL_ADDRESS_CAPTURED,
+          data: {
+            email: userEmail
+          }
+        }
+      });
+    }
+  };
+
   const steps: StepData[] = [
     {
       key: "install",
@@ -365,7 +399,7 @@ export const InstallationWizard = () => {
             Select installation type:
           </s.InstallationTypeText>
           <s.InstallationTypeButtonsContainer>
-            <InstallationTypeButton
+            <InstallationTypeCard
               key={"local"}
               installationType={"local"}
               onClick={handleInstallationTypeButtonClick}
@@ -383,7 +417,7 @@ export const InstallationWizard = () => {
                 </>
               }
             />
-            <InstallationTypeButton
+            <InstallationTypeCard
               key={"cloud"}
               installationType={"cloud"}
               onClick={handleInstallationTypeButtonClick}
@@ -397,6 +431,45 @@ export const InstallationWizard = () => {
               description={
                 <>Data will be sent anonymously to Digma for processing</>
               }
+              additionalContent={
+                <s.SubscriptionContentContainer>
+                  {isUserEmailCaptured ? (
+                    <s.SubscriptionSuccessMessage>
+                      <Loader
+                        size={24}
+                        status={"success"}
+                        themeKind={themeKind}
+                      />
+                      Thank you for subscription!
+                    </s.SubscriptionSuccessMessage>
+                  ) : (
+                    <>
+                      <Checkbox
+                        id={"digma-cloud-notification"}
+                        onChange={handleDigmaCloudNotificationCheckboxChange}
+                        label={
+                          "Let me know when Digma Cloud will become available"
+                        }
+                        value={isDigmaCloudNotificationCheckboxChecked}
+                      />
+                      {isDigmaCloudNotificationCheckboxChecked && (
+                        <TextField
+                          onChange={handleUserEmailInputChange}
+                          value={userEmail}
+                          inputEndContent={
+                            <Button
+                              disabled={userEmail.length === 0}
+                              onClick={handleEmailAddButton}
+                            >
+                              Add
+                            </Button>
+                          }
+                        />
+                      )}
+                    </>
+                  )}
+                </s.SubscriptionContentContainer>
+              }
               disabled={true}
             />
           </s.InstallationTypeButtonsContainer>

src/components/InstallationWizard/styles.ts

@@ -234,6 +234,7 @@ export const Badge = styled.span`
   font-weight: 400;
   border-radius: 4px;
   padding: 2px 4px;
+  text-align: center;
   background: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
@@ -244,3 +245,28 @@ export const Badge = styled.span`
     }
   }};
 `;
+
+export const SubscriptionContentContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+export const SubscriptionSuccessMessage = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: normal;
+  margin-bottom: 43px;
+  color: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#1dc693";
+      case "dark":
+      case "dark-jetbrains":
+        return "#67d28b";
+    }
+  }};
+`;

src/components/InstallationWizard/tracking.ts

@@ -12,7 +12,9 @@ export const trackingEvents = addPrefix(
     OBSERVABILITY_BUTTON_CLICKED: "set observability button clicked",
     TAB_CLICKED: "tab clicked",
     NO_DOCKER_SLACK_LINK_CLICKED: "no docker slack link clicked",
-    ENGINE_ACTION_BUTTON_CLICKED: "engine action button clicked"
+    ENGINE_ACTION_BUTTON_CLICKED: "engine action button clicked",
+    DIGMA_CLOUD_AVAILABILITY_NOTIFICATION_EMAIL_ADDRESS_CAPTURED:
+      "digma cloud availability notification email address captured"
   },
   " "
 );

src/components/common/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,24 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Checkbox } from ".";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof Checkbox> = {
+  title: "Common/Checkbox",
+  component: Checkbox,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "fullscreen"
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    id: "id",
+    label: "Click me",
+    value: false
+  }
+};