Add installation type to the Wizard

.storybook/preview-body.html

@@ -1,6 +1,6 @@
 <script>
   window.platform = "JetBrains";
-  window.ide = "IntelliJ IDEA";
+  window.ide = "IDEA";
   window.theme;
   window.mainFont;
   window.codeFont;

src/components/InstallationWizard/FinishStep/index.tsx

@@ -1,20 +1,19 @@
 import { DefaultTheme, useTheme } from "styled-components";
 import { getThemeKind } from "../../common/App/styles";
 import { GearIcon } from "../../common/icons/GearIcon";
-import { LightBulbIcon } from "../../common/icons/LightBulbIcon";
-import { OpenTelemetryLogoIcon } from "../../common/icons/OpenTelemetryLogoIcon";
+import { PlayCircleIcon } from "../../common/icons/PlayCircleIcon";
 import { PlayIcon } from "../../common/icons/PlayIcon";
 import { Link } from "../styles";
 import * as s from "./styles";
 import { FinishStepProps } from "./types";
 
-const getTipIconColor = (theme: DefaultTheme): string => {
+const getPlayIconColor = (theme: DefaultTheme) => {
   switch (theme.mode) {
     case "light":
-      return "#788ca9";
+      return "#3538cd";
     case "dark":
     case "dark-jetbrains":
-      return "#b9c2eb";
+      return "#dadada";
   }
 };
 
@@ -50,25 +49,25 @@ export const FinishStep = (props: FinishStepProps) => {
       <s.IllustrationContainer>
         <s.RunOrDebugIllustration src={`/images/runOrDebug_${themeKind}.gif`} />
       </s.IllustrationContainer>
-      <s.SectionTitle icon={OpenTelemetryLogoIcon}>
-        Observability Panel
-      </s.SectionTitle>
+      <s.SectionTitle>Getting Started</s.SectionTitle>
       <s.SectionDescription>
-        You&apos;ll be able to see the results in the observability panel below,
-        you can open it by clicking on the &quot;Telescope&quot;.
+        We&apos;ve prepared a short video to show you the ropes on getting
+        started analyzing your code with Digma.
       </s.SectionDescription>
-      <s.IllustrationContainer>
-        <s.ObservabilityPanelIllustration
-          src={`/images/observabilityPanel_${themeKind}.gif`}
-        />
-      </s.IllustrationContainer>
-      <s.TipContainer>
-        <s.TipIconContainer>
-          <LightBulbIcon size={16} color={getTipIconColor(theme)} />
-        </s.TipIconContainer>
-        More and more information about your code will continue to appear as you
-        perform more actions.
-      </s.TipContainer>
+      <Link
+        href={"https://www.youtube.com/watch?v=jzBEXfCrnlg"}
+        target={"_blank"}
+        rel={"noopener noreferrer"}
+      >
+        <s.IllustrationContainer>
+          <s.PlayIconContainer>
+            <PlayCircleIcon size={32} color={getPlayIconColor(theme)} />
+          </s.PlayIconContainer>
+          <s.GettingStartedVideoThumbnail
+            src={`/images/gettingStartedVideoThumbnail_${themeKind}.png`}
+          />
+        </s.IllustrationContainer>
+      </Link>
     </s.Container>
   );
 };

src/components/InstallationWizard/FinishStep/styles.ts

@@ -22,36 +22,24 @@ export const SectionDescription = styled(CommonSectionDescription)`
 
 export const IllustrationContainer = styled(CommonIllustrationContainer)`
   margin: 0 0 12px;
+  position: relative;
 `;
 
-export const ObservabilityPanelIllustration = styled.img`
+export const PlayIconContainer = styled.div`
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  height: 32px;
+  width: 32px;
+`;
+
+export const GettingStartedVideoThumbnail = styled.img`
   width: 100%;
 `;
 
 export const RunOrDebugIllustration = styled.img`
   width: 206px;
 `;
-
-export const TipContainer = styled.div`
-  display: flex;
-  flex-shrink: 0;
-  gap: 4px;
-  font-weight: 500;
-  font-size: 12px;
-  margin-top: 8px;
-
-  color: ${({ theme }) => {
-    switch (theme.mode) {
-      case "light":
-        return "#788ca9";
-      case "dark":
-      case "dark-jetbrains":
-        return "#b9c2eb";
-    }
-  }};
-`;
-
-export const TipIconContainer = styled.div`
-  display: flex;
-  flex-shrink: 0;
-`;

src/components/InstallationWizard/InstallationTypeButton/index.tsx

@@ -0,0 +1,22 @@
+import * as s from "./styles";
+import { InstallationTypeButtonProps } from "./types";
+
+export const InstallationTypeButton = (props: InstallationTypeButtonProps) => {
+  const handleClick = () => {
+    props.onClick(props.installationType);
+  };
+
+  return (
+    <s.InstallationTypeButton onClick={handleClick} disabled={props.disabled}>
+      <s.InstallationTypeButtonIconContainer disabled={props.disabled}>
+        {props.icon}
+      </s.InstallationTypeButtonIconContainer>
+      <s.InstallationTypeButtonTextContainer>
+        <s.InstallationTypeButtonTitle disabled={props.disabled}>
+          {props.title}
+        </s.InstallationTypeButtonTitle>
+        {props.description}
+      </s.InstallationTypeButtonTextContainer>
+    </s.InstallationTypeButton>
+  );
+};

src/components/InstallationWizard/InstallationTypeButton/styles.ts

@@ -0,0 +1,136 @@
+import styled from "styled-components";
+import { InstallationTypeButtonElementProps } from "./types";
+
+export const InstallationTypeButton = styled.button`
+  display: flex;
+  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";
+    }
+  }};
+
+  background: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#f1f5fa";
+      case "dark":
+      case "dark-jetbrains":
+        return "#2e2e2e";
+    }
+  }};
+
+  &:hover {
+    border: 1px solid
+      ${({ theme, disabled }) => {
+        if (disabled) {
+          return "transparent";
+        }
+
+        switch (theme.mode) {
+          case "light":
+            return "#b9c2eb";
+          case "dark":
+          case "dark-jetbrains":
+            return "#49494d";
+        }
+      }};
+  }
+
+  &:active {
+    border: 1px solid
+      ${({ theme, disabled }) => {
+        if (disabled) {
+          return "transparent";
+        }
+
+        switch (theme.mode) {
+          case "light":
+            return "#7891d0";
+          case "dark":
+          case "dark-jetbrains":
+            return "#7c7c94";
+        }
+      }};
+  }
+
+  &:disabled {
+    color: ${({ theme }) => {
+      switch (theme.mode) {
+        case "light":
+          return "#b9c0d4";
+        case "dark":
+        case "dark-jetbrains":
+          return "#9b9b9b";
+      }
+    }};
+  }
+`;
+
+export const InstallationTypeButtonIconContainer = styled.span<InstallationTypeButtonElementProps>`
+  display: flex;
+  flex-shrink: 0;
+  height: 72px;
+  width: 72px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+
+  background: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#fbfdff";
+      case "dark":
+      case "dark-jetbrains":
+        return "#3c3c3c";
+    }
+  }};
+
+  ${({ disabled }) => (disabled ? "opacity: 0.5;" : "")}
+`;
+
+export const InstallationTypeButtonTextContainer = styled.span`
+  display: flex;
+  flex-direction: column;
+  text-align: start;
+`;
+
+export const InstallationTypeButtonTitle = styled.span<InstallationTypeButtonElementProps>`
+  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";
+      }
+    }
+
+    switch (theme.mode) {
+      case "light":
+        return "#4d668a";
+      case "dark":
+      case "dark-jetbrains":
+        return "#fff";
+    }
+  }};
+`;

src/components/InstallationWizard/InstallationTypeButton/types.ts

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

src/components/InstallationWizard/ObservabilityStep/index.tsx

@@ -2,11 +2,11 @@ import { useState } from "react";
 import { useTheme } from "styled-components";
 import { getThemeKind } from "../../common/App/styles";
 import { Loader } from "../../common/Loader";
-import { ToggleSwitch } from "../../common/ToggleSwitch";
 import { OpenTelemetryLogoIcon } from "../../common/icons/OpenTelemetryLogoIcon";
 import { CodeSnippet } from "../CodeSnippet";
 import { SectionTitle } from "../SectionTitle";
-import { Link, MainButton, SectionDescription } from "../styles";
+import { Tip } from "../Tip";
+import { Link, MainButton } from "../styles";
 import * as s from "./styles";
 import { ObservabilityStepProps } from "./types";
 
@@ -38,7 +38,7 @@ export const ObservabilityStep = (props: ObservabilityStepProps) => {
     setIsCollectorModified(true);
   };
 
-  const handleObservabilityContainerClick = () => {
+  const handleObservabilityToggleSwitch = () => {
     props.onObservabilityChange(!props.isObservabilityEnabled);
   };
 
@@ -74,7 +74,7 @@ export const ObservabilityStep = (props: ObservabilityStepProps) => {
   ) : (
     <s.Container>
       <SectionTitle>How to get started?</SectionTitle>
-      <s.ObservabilityContainer onClick={handleObservabilityContainerClick}>
+      <s.ObservabilityContainer>
         <OpenTelemetryLogoIcon size={32} />
         <s.ObservabilityTitle>
           Observe your application in one click
@@ -85,9 +85,11 @@ export const ObservabilityStep = (props: ObservabilityStepProps) => {
           </span>
           <span>You can just toggle observability on now to get started</span>
           <s.ObservabilityToggleSwitchContainer>
-            <ToggleSwitch
+            <s.ObservabilityToggleSwitch
+              onChange={handleObservabilityToggleSwitch}
               checked={props.isObservabilityEnabled}
               label={"Click here"}
+              size={"large"}
             />
           </s.ObservabilityToggleSwitchContainer>
         </s.ObservabilityDescription>
@@ -99,15 +101,10 @@ export const ObservabilityStep = (props: ObservabilityStepProps) => {
           </s.CongratulationsTextContainer>
         )}
       </s.ObservabilityContainer>
-      <SectionDescription>
-        You can always expand the Digma side panel and open the Settings menu as
-        seen bellow
-      </SectionDescription>
-      <s.IllustrationContainer>
-        <s.ObservabilityButtonIllustration
-          src={`/images/observabilityButton_${themeKind}.gif`}
-        />
-      </s.IllustrationContainer>
+      <Tip>
+        You can always expand the Digma side panel and open the settings menu to
+        toggle observability on/off later
+      </Tip>
       <s.StepFooter>
         <MainButton onClick={handleNextButtonClick}>Next</MainButton>
         <Link onClick={handleAlreadyUsingOTELLinkClick}>