diff --git a/src/components/InstallationWizard/FinishStep/index.tsx b/src/components/InstallationWizard/FinishStep/index.tsx index 45b4d0086..499e54c3f 100644 --- a/src/components/InstallationWizard/FinishStep/index.tsx +++ b/src/components/InstallationWizard/FinishStep/index.tsx @@ -135,7 +135,7 @@ export const FinishStep = (props: FinishStepProps) => { - Join Our Slack Channel + Join Our Slack Group ); diff --git a/src/components/InstallationWizard/InstallStep/index.tsx b/src/components/InstallationWizard/InstallStep/index.tsx index f53ce1515..db8713352 100644 --- 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 = () => ( + <> + Then run: + + + Prefer to use a helm file? Check out{" "} + + these + {" "} + instructions instead + + + ); + const dockerComposeOSTabs = [ { title: "Linux & macOS", - content: + content: ( + + + {renderDockerComposeInstructions()} + + ) }, { title: "Windows (PowerShell)", - content: + content: ( + + + {renderDockerComposeInstructions()} + + ) } ]; @@ -92,7 +122,7 @@ export const InstallStep = (props: InstallStepProps) => { icon: DockerLogoIcon, title: "Docker Desktop", content: ( - + Install Digma Docker extension @@ -110,14 +140,14 @@ export const InstallStep = (props: InstallStepProps) => { > Get Digma Docker Extension - + ) }, { icon: CodeIcon, title: "Docker Compose", content: ( - + 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} /> - Then run: - - - Prefer to use a helm file? Check out{" "} - - these - {" "} - instructions instead - - + ) }, { title: "I don't have Docker", content: ( - - - We'll be adding more options soon but please reach out via{" "} - Slack and we'll see - if we can still get your Digma up and running - - + + + + + + We'll be adding more options soon + but please reach out via Slack and we'll see + if we can still get your Digma up and running + + + + Slack group + + ) } ]; @@ -174,38 +201,41 @@ export const InstallStep = (props: InstallStepProps) => { tabs={installTabs} onSelect={handleInstallTabSelect} selectedTab={selectedInstallTab} + fullWidth={true} /> - - {props.connectionCheckStatus && ( - + + + {props.connectionCheckStatus && ( + + )} + + {!isConnectionCheckStarted && ( + + OK, I've installed Digma + )} - - {!isConnectionCheckStarted && ( - - OK, I've installed Digma - - )} - {props.connectionCheckStatus === "pending" && ( - Complete - )} - {props.connectionCheckStatus === "failure" && ( - Retry - )} - {props.connectionCheckStatus === "success" && ( - - Complete - - )} + {props.connectionCheckStatus === "pending" && ( + Complete + )} + {props.connectionCheckStatus === "failure" && ( + Retry + )} + {props.connectionCheckStatus === "success" && ( + + Complete + + )} + ); }; diff --git a/src/components/InstallationWizard/InstallStep/styles.ts b/src/components/InstallationWizard/InstallStep/styles.ts index 29f494f21..8357167d8 100644 --- 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 index 761ed4f38..54aa00b44 100644 --- 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 index 28b521d23..1fd8f9ab1 100644 --- 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 && ( ` 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 index ab23d0887..18b336a39 100644 --- 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; children: ReactNode; + fullWidth?: boolean; } diff --git a/src/components/InstallationWizard/Tabs/index.tsx b/src/components/InstallationWizard/Tabs/index.tsx index 09532585d..35e3aa80b 100644 --- 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} diff --git a/src/components/InstallationWizard/Tabs/types.ts b/src/components/InstallationWizard/Tabs/types.ts index c887cc7d7..05eabdb2f 100644 --- 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 index 7d9a11caf..3623f5c88 100644 --- 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 = () => { )} + Having trouble? Please reach out in our Slack group diff --git a/src/components/InstallationWizard/styles.ts b/src/components/InstallationWizard/styles.ts index eccd838af..83cbd373a 100644 --- 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` diff --git a/src/components/common/icons/ChatIFillIcon.tsx b/src/components/common/icons/ChatIFillIcon.tsx new file mode 100644 index 000000000..bdcc848a3 --- /dev/null +++ b/src/components/common/icons/ChatIFillIcon.tsx @@ -0,0 +1,24 @@ +import React from "react"; +import { useIconProps } from "./hooks"; +import { IconProps } from "./types"; + +const ChatFillIconComponent = (props: IconProps) => { + const { size, color } = useIconProps(props); + + return ( + + + + ); +}; + +export const ChatFillIcon = React.memo(ChatFillIconComponent);