diff --git a/src/components/InstallationWizard/CodeSnippet/index.tsx b/src/components/InstallationWizard/CodeSnippet/index.tsx new file mode 100644 index 000000000..8a78359d7 --- /dev/null +++ b/src/components/InstallationWizard/CodeSnippet/index.tsx @@ -0,0 +1,19 @@ +import copy from "copy-to-clipboard"; +import { CopyIcon } from "../../common/icons/CopyIcon"; +import * as s from "./styles"; +import { CodeSnippetProps } from "./types"; + +export const CodeSnippet = (props: CodeSnippetProps) => { + const handleCopyButtonClick = () => { + copy(props.text); + }; + + return ( + + {props.text} + + + + + ); +}; diff --git a/src/components/InstallationWizard/CodeSnippet/styles.ts b/src/components/InstallationWizard/CodeSnippet/styles.ts new file mode 100644 index 000000000..0fd293e1f --- /dev/null +++ b/src/components/InstallationWizard/CodeSnippet/styles.ts @@ -0,0 +1,33 @@ +import styled from "styled-components"; +import { getCodeFont } from "../../common/App/styles"; +import { ContainerProps } from "./types"; + +export const Container = styled.div` + background: #0c0b0b; + padding: 8px 12px; + border-radius: 2px; + margin: 8px 0 12px; + display: flex; + gap: 27px; + align-items: flex-start; + justify-content: space-between; + + ${({ disabled }) => (disabled ? "opacity: 0.5;" : "")} +`; + +export const Code = styled.code` + ${({ theme }) => getCodeFont(theme.codeFont)} + font-weight: 500; + font-size: 9px; + line-height: 20px; + letter-spacing: -0.1px; + color: #dadada; + white-space: pre-wrap; +`; + +export const CopyButton = styled.button` + padding: 0; + background: transparent; + border: none; + cursor: pointer; +`; diff --git a/src/components/InstallationWizard/CodeSnippet/types.ts b/src/components/InstallationWizard/CodeSnippet/types.ts new file mode 100644 index 000000000..5234e9976 --- /dev/null +++ b/src/components/InstallationWizard/CodeSnippet/types.ts @@ -0,0 +1,8 @@ +export interface CodeSnippetProps { + disabled?: boolean; + text: string; +} + +export interface ContainerProps { + disabled?: boolean; +} diff --git a/src/components/InstallationWizard/index.tsx b/src/components/InstallationWizard/index.tsx index 4c0e7daf6..fb01df715 100644 --- a/src/components/InstallationWizard/index.tsx +++ b/src/components/InstallationWizard/index.tsx @@ -1,14 +1,13 @@ -import copy from "copy-to-clipboard"; import { useEffect, useState } from "react"; import { dispatcher } from "../../dispatcher"; import { getActions } from "../../utils/getActions"; import { actions as globalActions } from "../common/App"; import { CheckmarkCircleIcon } from "../common/icons/CheckmarkCircleIcon"; import { CheckmarkCircleInvertedIcon } from "../common/icons/CheckmarkCircleInvertedIcon"; -import { CopyIcon } from "../common/icons/CopyIcon"; import { CrossCircleIcon } from "../common/icons/CrossCircleIcon"; import { Loader } from "../common/Loader"; import { Button } from "./Button"; +import { CodeSnippet } from "./CodeSnippet"; import * as s from "./styles"; import { ConnectionCheckResultData, ConnectionCheckStatus } from "./types"; @@ -47,23 +46,15 @@ export const InstallationWizard = () => { }; }, []); - const handleCopyButtonClick = (text: string) => { - copy(text); - }; - - const startConnectionCheck = () => { + const handleDigmaIsInstalledButtonClick = () => { setConnectionCheckStatus("pending"); window.sendMessageToDigma({ action: actions.checkConnection }); }; - const handleDigmaIsInstalledButtonClick = () => { - startConnectionCheck(); - }; - const handleRetryButtonClick = () => { - startConnectionCheck(); + setConnectionCheckStatus(undefined); }; const handleInstallDigmaButtonClick = () => { @@ -157,36 +148,21 @@ export const InstallationWizard = () => { installed) Linux & MacOS: - - {getDigmaDockerComposeCommandLinux} - - handleCopyButtonClick(getDigmaDockerComposeCommandLinux) - } - > - - - + + Windows (PowerShell): - - {getDigmaDockerComposeCommandWindows} - - handleCopyButtonClick(getDigmaDockerComposeCommandWindows) - } - > - - - + Then run: - - {runDockerComposeCommand} - handleCopyButtonClick(runDockerComposeCommand)} - > - - - + Prefer to use a helm file? Check out{" "} Add Digma to your collector: - Modify your collector configuration file to add Digma’s backend as a - target. For example: + Modify your collector configuration file to add Digma's backend + as a target. For example: - - {collectorConfigurationSnippet} - handleCopyButtonClick(collectorConfigurationSnippet)} - > - - - + {isCollectorModified ? (