digma-ai · kshmidt-digma · Jun 15, 2023 · Jun 15, 2023
diff --git a/src/components/InstallationWizard/FinishStep/index.tsx b/src/components/InstallationWizard/FinishStep/index.tsx
@@ -135,7 +135,7 @@ export const FinishStep = (props: FinishStepProps) => {
       </s.GiveUsFeedbackTitle>
       <s.SlackLink onClick={props.onSlackLinkClick}>
         <SlackLogoIcon />
-        Join Our Slack Channel
+        Join Our Slack Group
       </s.SlackLink>
     </s.Container>
   );

diff --git a/src/components/InstallationWizard/InstallStep/index.tsx b/src/components/InstallationWizard/InstallStep/index.tsx
@@ -3,9 +3,11 @@ import { useTheme } from "styled-components";
 import { actions as globalActions } from "../../common/App";
 import { getThemeKind } from "../../common/App/styles";
 import { Loader } from "../../common/Loader";
+import { ChatFillIcon } from "../../common/icons/ChatIFillIcon";
 import { CheckmarkCircleInvertedIcon } from "../../common/icons/CheckmarkCircleInvertedIcon";
 import { CodeIcon } from "../../common/icons/CodeIcon";
 import { DockerLogoIcon } from "../../common/icons/DockerLogoIcon";
+import { SlackLogoIcon } from "../../common/icons/SlackLogoIcon";
 import { CodeSnippet } from "../CodeSnippet";
 import { Tabs } from "../Tabs";
 import { Link, MainButton, SectionDescription } from "../styles";
@@ -66,14 +68,42 @@ export const InstallStep = (props: InstallStepProps) => {
     });
   };
 
+  const renderDockerComposeInstructions = () => (
+    <>
+      <SectionDescription>Then run:</SectionDescription>
+      <CodeSnippet text={RUN_DOCKER_COMPOSE_COMMAND} />
+      <SectionDescription>
+        Prefer to use a helm file? Check out{" "}
+        <Link
+          href={DIGMA_HELM_CHART_URL}
+          target={"_blank"}
+          rel={"noopener noreferrer"}
+        >
+          these
+        </Link>{" "}
+        instructions instead
+      </SectionDescription>
+    </>
+  );
+
   const dockerComposeOSTabs = [
     {
       title: "Linux & macOS",
-      content: <CodeSnippet text={GET_DIGMA_DOCKER_COMPOSE_COMMAND_LINUX} />
+      content: (
+        <s.DockerComposeOSTabContentContainer>
+          <CodeSnippet text={GET_DIGMA_DOCKER_COMPOSE_COMMAND_LINUX} />
+          {renderDockerComposeInstructions()}
+        </s.DockerComposeOSTabContentContainer>
+      )
     },
     {
       title: "Windows (PowerShell)",
-      content: <CodeSnippet text={GET_DIGMA_DOCKER_COMPOSE_COMMAND_WINDOWS} />
+      content: (
+        <s.DockerComposeOSTabContentContainer>
+          <CodeSnippet text={GET_DIGMA_DOCKER_COMPOSE_COMMAND_WINDOWS} />
+          {renderDockerComposeInstructions()}
+        </s.DockerComposeOSTabContentContainer>
+      )
     }
   ];
 
@@ -92,7 +122,7 @@ export const InstallStep = (props: InstallStepProps) => {
       icon: DockerLogoIcon,
       title: "Docker Desktop",
       content: (
-        <s.InstallTabContentContainer>
+        <s.TabContentContainer>
           <s.SectionTitle>
             <DockerLogoIcon size={24} color={"#2396ed"} />
             Install Digma Docker extension
@@ -110,14 +140,14 @@ export const InstallStep = (props: InstallStepProps) => {
           >
             Get Digma Docker Extension
           </s.GetDockerExtensionButton>
-        </s.InstallTabContentContainer>
+        </s.TabContentContainer>
       )
     },
     {
       icon: CodeIcon,
       title: "Docker Compose",
       content: (
-        <s.DockerComposeOSTabContentContainer>
+        <s.TabContentContainer>
           <s.SectionTitle>
             Run the following from the terminal/command line to start the Digma
             backend:
@@ -138,32 +168,29 @@ export const InstallStep = (props: InstallStepProps) => {
             onSelect={handleSelectDockerComposeOSTab}
             selectedTab={selectedDockerComposeOSTab}
           />
-          <SectionDescription>Then run:</SectionDescription>
-          <CodeSnippet text={RUN_DOCKER_COMPOSE_COMMAND} />
-          <SectionDescription>
-            Prefer to use a helm file? Check out{" "}
-            <Link
-              href={DIGMA_HELM_CHART_URL}
-              target={"_blank"}
-              rel={"noopener noreferrer"}
-            >
-              these
-            </Link>{" "}
-            instructions instead
-          </SectionDescription>
-        </s.DockerComposeOSTabContentContainer>
+        </s.TabContentContainer>
       )
     },
     {
       title: "I don't have Docker",
       content: (
-        <s.DockerComposeOSTabContentContainer>
-          <SectionDescription>
-            We&apos;ll be adding more options soon but please reach out via{" "}
-            <Link onClick={handleSlackLinkClick}>Slack</Link> and we&apos;ll see
-            if we can still get your Digma up and running
-          </SectionDescription>
-        </s.DockerComposeOSTabContentContainer>
+        <s.NoDockerTabContentContainer>
+          <s.IconBackgroundCircle>
+            <ChatFillIcon
+              size={28}
+              color={theme.mode === "light" ? "#fbfdff" : "#83858e"}
+            />
+          </s.IconBackgroundCircle>
+          <s.NoDockerText>
+            <span>We&apos;ll be adding more options soon</span>
+            <span>but please reach out via Slack and we&apos;ll see</span>
+            <span>if we can still get your Digma up and running</span>
+          </s.NoDockerText>
+          <s.SlackLink onClick={handleSlackLinkClick}>
+            <SlackLogoIcon />
+            Slack group
+          </s.SlackLink>
+        </s.NoDockerTabContentContainer>
       )
     }
   ];
@@ -174,38 +201,41 @@ export const InstallStep = (props: InstallStepProps) => {
         tabs={installTabs}
         onSelect={handleInstallTabSelect}
         selectedTab={selectedInstallTab}
+        fullWidth={true}
       />
-      <s.LoaderContainer>
-        {props.connectionCheckStatus && (
-          <Loader
-            size={84}
-            status={props.connectionCheckStatus}
-            themeKind={getThemeKind(theme)}
-          />
+      <s.CommonContentContainer>
+        <s.LoaderContainer>
+          {props.connectionCheckStatus && (
+            <Loader
+              size={84}
+              status={props.connectionCheckStatus}
+              themeKind={getThemeKind(theme)}
+            />
+          )}
+        </s.LoaderContainer>
+        {!isConnectionCheckStarted && (
+          <MainButton onClick={handleDigmaIsInstalledButtonClick}>
+            OK, I&apos;ve installed Digma
+          </MainButton>
         )}
-      </s.LoaderContainer>
-      {!isConnectionCheckStarted && (
-        <MainButton onClick={handleDigmaIsInstalledButtonClick}>
-          OK, I&apos;ve installed Digma
-        </MainButton>
-      )}
-      {props.connectionCheckStatus === "pending" && (
-        <MainButton disabled={true}>Complete</MainButton>
-      )}
-      {props.connectionCheckStatus === "failure" && (
-        <MainButton onClick={handleRetryButtonClick}>Retry</MainButton>
-      )}
-      {props.connectionCheckStatus === "success" && (
-        <MainButton
-          icon={{
-            component: CheckmarkCircleInvertedIcon,
-            color: "#0fbf00"
-          }}
-          onClick={handleNextButtonClick}
-        >
-          Complete
-        </MainButton>
-      )}
+        {props.connectionCheckStatus === "pending" && (
+          <MainButton disabled={true}>Complete</MainButton>
+        )}
+        {props.connectionCheckStatus === "failure" && (
+          <MainButton onClick={handleRetryButtonClick}>Retry</MainButton>
+        )}
+        {props.connectionCheckStatus === "success" && (
+          <MainButton
+            icon={{
+              component: CheckmarkCircleInvertedIcon,
+              color: "#0fbf00"
+            }}
+            onClick={handleNextButtonClick}
+          >
+            Complete
+          </MainButton>
+        )}
+      </s.CommonContentContainer>
     </s.Container>
   );
 };
diff --git a/src/components/InstallationWizard/InstallStep/styles.ts b/src/components/InstallationWizard/InstallStep/styles.ts
@@ -2,11 +2,12 @@ import styled from "styled-components";
 import { Button } from "../../common/Button";
 import { SectionTitle as CommonSectionTitle } from "../SectionTitle";
 import { Tabs } from "../Tabs";
+import { Link, SectionDescription } from "../styles";
 
 export const Container = styled.div`
   display: flex;
   flex-direction: column;
-  padding: 0 8px 12px;
+  padding-bottom: 12px;
 `;
 
 export const SectionTitle = styled(CommonSectionTitle)`
@@ -22,17 +23,16 @@ export const GetDockerExtensionButton = styled(Button)`
   margin-top: 12px;
 `;
 
-export const InstallTabContentContainer = styled.div`
+export const TabContentContainer = styled.div`
   display: flex;
   flex-direction: column;
-  padding: 12px 0 12px;
+  padding: 12px 8px;
 `;
 
 export const DockerComposeOSTabContentContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 8px;
-  padding: 8px 0 12px;
 `;
 
 export const LoaderContainer = styled.div`
@@ -43,3 +43,47 @@ export const LoaderContainer = styled.div`
   flex-grow: 1;
   box-sizing: border-box;
 `;
+
+export const CommonContentContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0 8px;
+`;
+
+export const IconBackgroundCircle = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  width: 40px;
+  border-radius: 50%;
+
+  background: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#d0d6eb";
+      case "dark":
+      case "dark-jetbrains":
+        return "#323334";
+    }
+  }};
+`;
+
+export const NoDockerTabContentContainer = styled(TabContentContainer)`
+  align-items: center;
+  gap: 8px;
+  padding: 79px 21px 0;
+`;
+
+export const NoDockerText = styled(SectionDescription)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-weight: 500;
+`;
+
+export const SlackLink = styled(Link)`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
diff --git a/src/components/InstallationWizard/SectionTitle/styles.ts b/src/components/InstallationWizard/SectionTitle/styles.ts
@@ -5,7 +5,6 @@ export const Container = styled.div`
   font-weight: 500;
   font-size: 14px;
   align-items: center;
-  text-transform: capitalize;
 
   color: ${({ theme }) => {
     switch (theme.mode) {

diff --git a/src/components/InstallationWizard/Tabs/Tab/index.tsx b/src/components/InstallationWizard/Tabs/Tab/index.tsx
@@ -65,6 +65,7 @@ export const Tab = (props: TabProps) => {
       onMouseLeave={handleMouseLeave}
       onFocus={handleFocus}
       onBlur={handleBlur}
+      fullWidth={props.fullWidth}
     >
       {props.icon && (
         <props.icon

diff --git a/src/components/InstallationWizard/Tabs/Tab/styles.ts b/src/components/InstallationWizard/Tabs/Tab/styles.ts
@@ -11,6 +11,14 @@ export const Container = styled.li<TabProps>`
   gap: 4px;
   user-select: none;
 
+  ${({ fullWidth }) =>
+    fullWidth &&
+    `
+    flex-grow: 1;
+    flex-basis: 0;
+    justify-content: center;
+  `}
+
   cursor: ${({ isDisabled }) => (isDisabled ? "initial" : "pointer")};
 
   border-bottom: ${({ isSelected }) =>

diff --git a/src/components/InstallationWizard/Tabs/Tab/types.ts b/src/components/InstallationWizard/Tabs/Tab/types.ts
@@ -7,4 +7,5 @@ export interface TabProps {
   onClick: () => void;
   icon?: ComponentType<IconProps>;
   children: ReactNode;
+  fullWidth?: boolean;
 }
diff --git a/src/components/InstallationWizard/Tabs/index.tsx b/src/components/InstallationWizard/Tabs/index.tsx
@@ -20,6 +20,7 @@ export const Tabs = (props: TabsProps) => {
               isSelected={isSelected}
               onClick={() => handleTabClick(i)}
               icon={tab.icon}
+              fullWidth={props.fullWidth}
             >
               {tab.title}
             </Tab>

diff --git a/src/components/InstallationWizard/Tabs/types.ts b/src/components/InstallationWizard/Tabs/types.ts
@@ -11,4 +11,5 @@ export interface TabsProps {
   selectedTab: number;
   onSelect: (tabIndex: number) => void;
   className?: string;
+  fullWidth?: boolean;
 }
diff --git a/src/components/InstallationWizard/index.tsx b/src/components/InstallationWizard/index.tsx
@@ -13,6 +13,7 @@ import { getThemeKind } from "../common/App/styles";
 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";
@@ -39,7 +40,7 @@ const actions = addPrefix(ACTION_PREFIX, {
   SET_OBSERVABILITY: "SET_OBSERVABILITY"
 });
 
-const SLACK_CHANNEL_URL =
+const SLACK_WORKSPACE_URL =
   "https://join.slack.com/t/continuous-feedback/shared_invite/zt-1hk5rbjow-yXOIxyyYOLSXpCZ4RXstgA";
 
 const DIGMA_DOCKER_EXTENSION_URL =
@@ -257,7 +258,7 @@ export const InstallationWizard = () => {
     window.sendMessageToDigma({
       action: globalActions.OPEN_URL_IN_DEFAULT_BROWSER,
       payload: {
-        url: SLACK_CHANNEL_URL
+        url: SLACK_WORKSPACE_URL
       }
     });
   };
@@ -413,6 +414,7 @@ export const InstallationWizard = () => {
           </CSSTransition>
         )}
         <s.FooterSlackLink onClick={handleSlackLinkClick}>
+          <SlackLogoIcon />
           Having trouble? Please reach out in our Slack group
         </s.FooterSlackLink>
       </s.Footer>

diff --git a/src/components/InstallationWizard/styles.ts b/src/components/InstallationWizard/styles.ts
@@ -81,6 +81,9 @@ export const Link = styled(CommonLink)`
 
 export const FooterSlackLink = styled(Link)`
   margin: 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 4px;
 `;
 
 export const Footer = styled.div`