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 ? (