Add specific instructions for each particular IDE in Wizard

.storybook/preview-body.html

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

assets/assets/index.ejs

@@ -15,7 +15,7 @@
     <div id="root"></div>
     <!-- Environment variables -->
     <script>
-      window.environment;
+      window.platform;
       window.theme;
       window.mainFont;
       window.codeFont;

assets/installationWizard/index.ejs

@@ -15,7 +15,8 @@
     <div id="root"></div>
     <!-- Environment variables -->
     <script>
-      window.environment;
+      window.platform;
+      window.ide;
       window.theme;
       window.mainFont;
       window.codeFont;

assets/recentActivity/index.ejs

@@ -15,7 +15,7 @@
     <div id="root"></div>
     <!-- Environment variables -->
     <script>
-      window.environment;
+      window.platform;
       window.theme;
       window.mainFont;
       window.codeFont;

src/components/InstallationWizard/FinishStep/index.tsx

@@ -1,10 +1,12 @@
 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 { PlayIcon } from "../../common/icons/PlayIcon";
-import { SectionDescription } from "../styles";
+import { Link } from "../styles";
 import * as s from "./styles";
+import { FinishStepProps } from "./types";
 
 const getTipIconColor = (theme: DefaultTheme): string => {
   switch (theme.mode) {
@@ -16,29 +18,45 @@ const getTipIconColor = (theme: DefaultTheme): string => {
   }
 };
 
-export const FinishStep = () => {
+export const FinishStep = (props: FinishStepProps) => {
   const theme = useTheme();
   const themeKind = getThemeKind(theme);
 
   return (
     <s.Container>
+      {props.quickstartURL && (
+        <>
+          <s.SectionTitle icon={GearIcon}>Instrument your code</s.SectionTitle>
+          <s.SectionDescription>
+            Follow our{" "}
+            <Link
+              target={"_blank"}
+              rel={"noopener noreferrer"}
+              href={props.quickstartURL}
+            >
+              quickstart
+            </Link>{" "}
+            guide to begin collecting data from your code
+          </s.SectionDescription>
+        </>
+      )}
       <s.SectionTitle icon={PlayIcon}>
         Run / Debug your application
       </s.SectionTitle>
-      <SectionDescription>
+      <s.SectionDescription>
         Run or debug your application and trigger some actions or APIs to
         collect observability.
-      </SectionDescription>
+      </s.SectionDescription>
       <s.IllustrationContainer>
         <s.RunOrDebugIllustration src={`/images/runOrDebug_${themeKind}.gif`} />
       </s.IllustrationContainer>
       <s.SectionTitle icon={OpenTelemetryLogoIcon}>
         Observability Panel
       </s.SectionTitle>
-      <SectionDescription>
+      <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;.
-      </SectionDescription>
+      </s.SectionDescription>
       <s.IllustrationContainer>
         <s.ObservabilityPanelIllustration
           src={`/images/observabilityPanel_${themeKind}.gif`}

src/components/InstallationWizard/FinishStep/styles.ts

@@ -1,6 +1,9 @@
 import styled from "styled-components";
 import { SectionTitle as CommonSectionTitle } from "../SectionTitle";
-import { IllustrationContainer as CommonIllustrationContainer } from "../styles";
+import {
+  IllustrationContainer as CommonIllustrationContainer,
+  SectionDescription as CommonSectionDescription
+} from "../styles";
 
 export const Container = styled.div`
   display: flex;
@@ -13,8 +16,12 @@ export const SectionTitle = styled(CommonSectionTitle)`
   margin-bottom: 4px;
 `;
 
+export const SectionDescription = styled(CommonSectionDescription)`
+  margin-bottom: 12px;
+`;
+
 export const IllustrationContainer = styled(CommonIllustrationContainer)`
-  margin: 12px 0 12px;
+  margin: 0 0 12px;
 `;
 
 export const ObservabilityPanelIllustration = styled.img`

src/components/InstallationWizard/FinishStep/types.ts

@@ -0,0 +1,3 @@
+export interface FinishStepProps {
+  quickstartURL?: string;
+}

src/components/InstallationWizard/index.tsx

@@ -1,7 +1,9 @@
 import { useEffect, useRef, useState } from "react";
 import { CSSTransition } from "react-transition-group";
 import { dispatcher } from "../../dispatcher";
+import { IDE } from "../../globals";
 import { usePrevious } from "../../hooks/usePrevious";
+import { ide } from "../../platform";
 import { addPrefix } from "../../utils/addPrefix";
 import { actions as globalActions } from "../common/App";
 import { FinishStep } from "./FinishStep";
@@ -24,6 +26,17 @@ const actions = addPrefix(ACTION_PREFIX, {
 const DIGMA_DOCKER_EXTENSION_URL =
   "https://open.docker.com/extensions/marketplace?extensionId=digmaai/digma-docker-extension";
 
+const getQuickstartURL = (ide: IDE | undefined): string | undefined => {
+  switch (ide) {
+    case "PyCharm":
+      return "https://digma.ai/python-quick-start-guide/";
+    case "Rider":
+      return "https://digma.ai/net-quick-start-guide/";
+  }
+};
+
+const quickstartURL = getQuickstartURL(ide);
+
 const TRACKING_PREFIX = "installation wizard";
 
 const trackingEvents = addPrefix(
@@ -191,23 +204,27 @@ export const InstallationWizard = () => {
         />
       )
     },
-    {
-      title: isAlreadyUsingOtel
-        ? "If you're already using OpenTelemetry…"
-        : "Observe your application",
-      content: (
-        <ObservabilityStep
-          isAlreadyUsingOtel={isAlreadyUsingOtel}
-          onIsAlreadyUsingOtelChange={handleIsAlreadyUsingOtelChange}
-          onGoToNextStep={goToNextStep}
-          isObservabilityEnabled={isObservabilityEnabled}
-          onObservabilityChange={handleObservabilityChange}
-        />
-      )
-    },
+    ...(ide === "IntelliJ IDEA"
+      ? [
+          {
+            title: isAlreadyUsingOtel
+              ? "If you're already using OpenTelemetry…"
+              : "Observe your application",
+            content: (
+              <ObservabilityStep
+                isAlreadyUsingOtel={isAlreadyUsingOtel}
+                onIsAlreadyUsingOtelChange={handleIsAlreadyUsingOtelChange}
+                onGoToNextStep={goToNextStep}
+                isObservabilityEnabled={isObservabilityEnabled}
+                onObservabilityChange={handleObservabilityChange}
+              />
+            )
+          }
+        ]
+      : []),
     {
       title: "You're done!",
-      content: <FinishStep />
+      content: <FinishStep quickstartURL={quickstartURL} />
     }
   ];
 

src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/index.tsx

@@ -1,14 +1,25 @@
+import { useRef } from "react";
 import { Badge } from "../../../common/Badge";
 import * as s from "./styles";
 import { EnvironmentTabProps } from "./types";
 
 export const EnvironmentTab = (props: EnvironmentTabProps) => {
+  const containerRef = useRef<HTMLLIElement>(null);
+
   const handleClick = () => {
+    if (containerRef.current) {
+      containerRef.current.scrollIntoView();
+    }
+
     props.onClick(props.text);
   };
 
   return (
-    <s.Container isSelected={props.isSelected} onClick={handleClick}>
+    <s.Container
+      ref={containerRef}
+      isSelected={props.isSelected}
+      onClick={handleClick}
+    >
       {props.hasBadge && (
         <s.BadgeContainer>
           <Badge />

src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/styles.ts

@@ -8,6 +8,7 @@ export const Container = styled.li<ContainerProps>`
   font-weight: ${({ isSelected }) => (isSelected ? 700 : 500)};
   font-size: 14px;
   padding: 4px 12px;
+  user-select: none;
 
   color: ${({ isSelected, theme }) => {
     if (isSelected) {

src/components/RecentActivity/EnvironmentPanel/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import useDimensions from "react-cool-dimensions";
 import { DefaultTheme, useTheme } from "styled-components";
 import { IconButton } from "../../common/IconButton";
@@ -35,12 +35,6 @@ export const EnvironmentPanel = (props: EnvironmentPanelProps) => {
     table: TableIcon
   };
 
-  useEffect(() => {
-    if (entry) {
-      entry.target.scrollLeft = scrollLeft;
-    }
-  }, [entry, scrollLeft]);
-
   const handleViewModeButtonClick = () => {
     const mode = props.viewMode === "table" ? "list" : "table";
     props.onViewModeChange(mode);
@@ -55,15 +49,17 @@ export const EnvironmentPanel = (props: EnvironmentPanelProps) => {
 
       let newScrollLeft = entry.target.scrollLeft + delta;
 
-      if (newScrollLeft >= entry.target.scrollWidth - width) {
-        newScrollLeft = entry.target.scrollWidth - width;
+      const maxScrollLeft = entry.target.scrollWidth - width;
+      if (newScrollLeft >= maxScrollLeft) {
+        newScrollLeft = maxScrollLeft;
       }
 
       if (newScrollLeft < 0) {
         newScrollLeft = 0;
       }
 
       setScrollLeft(newScrollLeft);
+      entry.target.scrollLeft = newScrollLeft;
     }
   };
 

src/components/common/App/styles.ts

@@ -4,8 +4,8 @@ import {
   DefaultTheme,
   FlattenSimpleInterpolation
 } from "styled-components";
-import { environment } from "../../../environment";
 import { os } from "../../../os";
+import { platform } from "../../../platform";
 
 export const getMainFont = (customFont: string): FlattenSimpleInterpolation => {
   let osFont = "";
@@ -41,7 +41,7 @@ export const getCodeFont = (customFont: string): FlattenSimpleInterpolation => {
   let osFont = "";
 
   // Source: https://github.com/microsoft/vscode/blob/main/src/vs/editor/common/config/editorOptions.ts#L4721
-  if (environment === "VS Code") {
+  if (platform === "VS Code") {
     if (os === "Linux") {
       osFont = '"Droid Sans Mono", "monospace"';
     }
@@ -58,7 +58,7 @@ export const getCodeFont = (customFont: string): FlattenSimpleInterpolation => {
   // Sources:
   // https://jetbrains.github.io/ui/principles/typography/#06
   // https://github.com/JetBrains/intellij-community/blob/master/platform/editor-ui-api/src/com/intellij/openapi/editor/colors/FontPreferences.java#L111
-  if (environment === "JetBrains") {
+  if (platform === "JetBrains") {
     osFont = '"JetBrains Mono"';
   }
 

src/components/common/icons/GearIcon.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { useIconProps } from "./hooks";
+import { IconProps } from "./types";
+
+const GearIconComponent = (props: IconProps) => {
+  const { size, color } = useIconProps(props);
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 16 16"
+    >
+      <path
+        fill={color}
+        fillRule="evenodd"
+        d="M14.186 10.002 12.708 8.94a4.821 4.821 0 0 0 0-1.882L14.186 6a6.493 6.493 0 0 0-1.356-2.35l-1.658.748a4.794 4.794 0 0 0-1.635-.946l-.18-1.81a6.526 6.526 0 0 0-2.714 0l-.18 1.81a4.795 4.795 0 0 0-1.635.946L3.17 3.65a6.493 6.493 0 0 0-1.356 2.349l1.478 1.06a4.823 4.823 0 0 0 0 1.882L1.814 10c.284.88.751 1.678 1.356 2.35l1.658-.748c.472.415 1.026.74 1.635.946l.18 1.81a6.528 6.528 0 0 0 2.714 0l.18-1.81a4.794 4.794 0 0 0 1.635-.946l1.658.747a6.493 6.493 0 0 0 1.356-2.348ZM10.3 8a2.3 2.3 0 1 1-4.6 0 2.3 2.3 0 0 1 4.6 0Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export const GearIcon = React.memo(GearIconComponent);

src/globals.d.ts

@@ -2,7 +2,9 @@ import { DigmaOutgoingMessageData } from "./api/types";
 
 export {};
 
-export type Environment = "JetBrains" | "VS Code" | "Other";
+export type Platform = "JetBrains" | "VS Code" | "Other";
+
+export type IDE = "IntelliJ IDEA" | "Rider" | "PyCharm";
 
 export type Mode = "light" | "dark" | "dark-jetbrains";
 
@@ -21,7 +23,8 @@ declare global {
     ) => string | undefined;
     cancelMessageToDigma: (request_id: string) => void;
     theme?: unknown;
-    environment?: unknown;
+    platform?: unknown;
+    ide?: unknown;
     mainFont?: unknown;
     codeFont?: unknown;
     isJaegerEnabled?: unknown;

src/platform.ts

@@ -0,0 +1,21 @@
+import { IDE, Platform } from "./globals";
+
+const PLATFORMS = ["JetBrains", "VS Code", "Other"];
+
+const isPlatform = (platform: unknown): platform is Platform =>
+  typeof platform === "string" && PLATFORMS.includes(platform);
+
+export const getPlatform = (platform: unknown): Platform =>
+  isPlatform(platform) ? platform : "Other";
+
+export const platform = getPlatform(window.platform);
+
+const IDES = ["IntelliJ IDEA", "Rider", "PyCharm"];
+
+const isIDE = (ide: unknown): ide is IDE =>
+  typeof ide === "string" && IDES.includes(ide);
+
+export const getIDE = (ide: unknown): IDE | undefined =>
+  isIDE(ide) ? ide : undefined;
+
+export const ide = getIDE(window.ide);