diff --git a/web/packages/design/src/Alert/Alert.controls.story.tsx b/web/packages/design/src/Alert/Alert.controls.story.tsx
new file mode 100644
index 0000000000000..de4ef503c9005
--- /dev/null
+++ b/web/packages/design/src/Alert/Alert.controls.story.tsx
@@ -0,0 +1,84 @@
+/**
+ * Teleport
+ * Copyright (C) 2025 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
+
+import { Meta } from '@storybook/react';
+
+import { Alert, AlertKind, AlertProps } from './Alert';
+
+type StoryProps = {
+ kind: AlertKind;
+ children: string;
+ details: string;
+ dismissible: boolean;
+ primaryAction: string;
+ secondaryAction: string;
+ alignItems: AlertProps['alignItems'];
+};
+
+const meta: Meta = {
+ title: 'Design/Alerts/Controls',
+ component: Controls,
+ argTypes: {
+ kind: {
+ control: { type: 'select' },
+ options: [
+ 'neutral',
+ 'danger',
+ 'info',
+ 'warning',
+ 'success',
+ 'outline-danger',
+ 'outline-info',
+ 'outline-warn',
+ ],
+ },
+ alignItems: {
+ control: { type: 'radio' },
+ options: ['center', 'flex-start'],
+ },
+ },
+ args: {
+ kind: 'neutral',
+ children: 'Lorem ipsum dolor sit amet',
+ details: 'Maecenas ut scelerisque nunc, blandit porta est.',
+ dismissible: true,
+ primaryAction: 'Primary Action',
+ secondaryAction: 'Secondary Action',
+ alignItems: 'center',
+ },
+};
+export default meta;
+
+export function Controls(props: StoryProps) {
+ return (
+
+ {props.children}
+
+ );
+}
diff --git a/web/packages/design/src/Alert/Alert.tsx b/web/packages/design/src/Alert/Alert.tsx
index bfc58e4610850..e0022f36bf8db 100644
--- a/web/packages/design/src/Alert/Alert.tsx
+++ b/web/packages/design/src/Alert/Alert.tsx
@@ -38,7 +38,7 @@ const linkColor = style({
key: 'colors',
});
-type AlertKind =
+export type AlertKind =
| 'neutral'
| 'danger'
| 'info'
@@ -80,7 +80,9 @@ const alertBorder = (
}
};
-const backgroundColor = (props: ThemedAlertProps): { background: string } => {
+const backgroundColor = (
+ props: Pick
+): { background: string } => {
const { kind, theme } = props;
switch (kind) {
case 'success':
@@ -124,6 +126,7 @@ interface Props {
children?: React.ReactNode;
style?: React.CSSProperties;
onDismiss?: () => void;
+ alignItems?: 'center' | 'flex-start';
}
/**
@@ -176,6 +179,7 @@ export const Alert = ({
dismissible,
bg,
onDismiss,
+ alignItems = 'center',
...otherProps
}: AlertProps) => {
const alertIconSize = kind === 'neutral' ? 'large' : 'small';
@@ -192,7 +196,7 @@ export const Alert = ({
return (
-
+ `
${space}
${width}
- ${alertBorder}
- ${color}
- a {
- color: ${({ theme }) => theme.colors.light};
+ ${alertBorder}
+ ${color}
+ a {
+ // Using the same color as Link (theme.solid.interactive.solid.accent) looks bad in the BBLP
+ // theme, so instead let's default to the color of the text and decorate links only with an
+ // underline.
+ color: inherit;
${linkColor}
}
`;
/** Renders a transparent color overlay. */
-const InnerContainer = styled.div`
+const InnerContainer = styled.div<
+ Pick, 'kind' | 'alignItems'>
+>`
padding: 12px 16px;
overflow: auto;
word-break: break-word;
display: flex;
- align-items: center;
+ align-items: ${p => p.alignItems};
${backgroundColor}
`;
diff --git a/web/packages/teleport/src/Discover/ConnectMyComputer/SetupConnect/SetupConnect.tsx b/web/packages/teleport/src/Discover/ConnectMyComputer/SetupConnect/SetupConnect.tsx
index a0352cf4c55a6..ddd45f9ab2a15 100644
--- a/web/packages/teleport/src/Discover/ConnectMyComputer/SetupConnect/SetupConnect.tsx
+++ b/web/packages/teleport/src/Discover/ConnectMyComputer/SetupConnect/SetupConnect.tsx
@@ -19,7 +19,7 @@
import { useCallback, useEffect, useRef, useState } from 'react';
import { Link } from 'react-router-dom';
-import { Flex, H3, Subtitle3, Text } from 'design';
+import { Alert, Box, Flex, H3, Subtitle3, Text } from 'design';
import { ButtonSecondary } from 'design/Button';
import * as Icons from 'design/Icon';
import { getPlatform } from 'design/platform';
@@ -32,17 +32,7 @@ import * as connectMyComputer from 'shared/connectMyComputer';
import { makeDeepLinkWithSafeInput } from 'shared/deepLinks';
import cfg from 'teleport/config';
-import {
- ActionButtons,
- Header,
- StyledBox,
- TextIcon,
-} from 'teleport/Discover/Shared';
-import {
- HintBox,
- SuccessBox,
- WaitingInfo,
-} from 'teleport/Discover/Shared/HintBox';
+import { ActionButtons, Header, StyledBox } from 'teleport/Discover/Shared';
import { usePoll } from 'teleport/Discover/Shared/usePoll';
import { Node } from 'teleport/services/nodes';
import useTeleport from 'teleport/useTeleport';
@@ -119,74 +109,75 @@ export function SetupConnect(
let pollingStatus: JSX.Element;
if (showHint && !node) {
- pollingStatus = (
- // Override max-width to match StyledBox's max-width.
-
-
-
- There are a couple of possible reasons for why we haven't been able
- to detect your computer.
-
+ const details = (
+
+
+ There are a couple of possible reasons for why we haven't been
+ able to detect your computer.
+
-
p.theme.space[3]}px;
- `}
- >
-
-
- You did not start Connect My Computer in Teleport Connect yet.
-
-
-
-
- The Teleport agent started by Teleport Connect could not join
- this Teleport cluster. Check if the Connect My Computer tab in
- Teleport Connect shows any error messages.
-
-
-
-
- The computer you are trying to add has already joined the
- Teleport cluster before you entered this page. If that's the
- case, you can go back to{' '}
-
- the resources
- {' '}
- and connect to it.
-
-
-
+
p.theme.space[3]}px;
+ `}
+ >
+
+
+ You did not start Connect My Computer in Teleport Connect yet.
+
+
+
+
+ The Teleport agent started by Teleport Connect could not join this
+ Teleport cluster. Check if the Connect My Computer tab in Teleport
+ Connect shows any error messages.
+
+
+
+
+ The computer you are trying to add has already joined the Teleport
+ cluster before you entered this page. If that's the case, you
+ can go back to the{' '}
+
+ resources page
+ {' '}
+ and connect to it.
+
+
+
-
- We'll continue to look for the computer whilst you diagnose the
- issue.
-
-
-
+
+ We'll continue to look for the computer while you diagnose the
+ issue.
+
+
+ );
+ pollingStatus = (
+ // Override max-width to match StyledBox's max-width.
+
+
+ We're still looking for your computer
+
+
);
} else if (node) {
pollingStatus = (
-
-
- Your computer, {node.hostname}, has been detected!
-
-
+
+ Your computer, {node.hostname}, has been detected!
+
);
} else {
pollingStatus = (
-
-
-
-
+
After your computer is connected to the cluster, we’ll automatically
detect it.
-
+
);
}
diff --git a/web/packages/teleport/src/Discover/Database/DeployService/AutoDeploy/AutoDeploy.tsx b/web/packages/teleport/src/Discover/Database/DeployService/AutoDeploy/AutoDeploy.tsx
index 675393fa36256..0824ffb2ad9ca 100644
--- a/web/packages/teleport/src/Discover/Database/DeployService/AutoDeploy/AutoDeploy.tsx
+++ b/web/packages/teleport/src/Discover/Database/DeployService/AutoDeploy/AutoDeploy.tsx
@@ -20,6 +20,7 @@ import { useEffect, useState } from 'react';
import styled, { useTheme } from 'styled-components';
import {
+ Alert,
Box,
ButtonSecondary,
Link as ExternalLink,
@@ -39,11 +40,6 @@ import useAttempt from 'shared/hooks/useAttemptNext';
import { TextSelectCopyMulti } from 'teleport/components/TextSelectCopy';
import cfg from 'teleport/config';
-import {
- HintBox,
- SuccessBox,
- WaitingInfo,
-} from 'teleport/Discover/Shared/HintBox';
import { usePingTeleport } from 'teleport/Discover/Shared/PingTeleportContext';
import { DbMeta, useDiscover } from 'teleport/Discover/useDiscover';
import type { Database } from 'teleport/services/databases';
@@ -490,103 +486,104 @@ const DeployHints = ({
}, [result]);
if (showHint && !result) {
- return (
-
-
-
- Visit your AWS{' '}
-
- dashboard
- {' '}
- to see progress details.
-
-
- There are a few possible reasons for why we haven't been able to
- detect your database service:
-
-
p.theme.space[3]}px;
- `}
- >
-
- The subnets you selected do not route to an internet gateway (igw)
- or a NAT gateway in a public subnet.
-
-
- The security groups you selected do not allow outbound traffic
- (eg: 0.0.0.0/0) to pull the public Teleport image and
- to reach your Teleport cluster.
-
-
- The security groups attached to your database(s) neither allow
- inbound traffic from the security group you selected nor allow
- inbound traffic from all IPs in the subnets you selected.
-
-
- There may be issues in the region you selected ({region}). Check
- the{' '}
-
- AWS Health Dashboard
- {' '}
- for any problems.
-
-
- The network may be slow. Try waiting for a few more minutes or{' '}
-
- try manually deploying your own database service.
-
-
-
-
- Refer to the{' '}
-
+
+ Visit your AWS{' '}
+
+ dashboard
+ {' '}
+ to see progress details.
+
+
+ There are a few possible reasons for why we haven't been able to
+ detect your database service:
+
+
p.theme.space[3]}px;
+ `}
+ >
+
+ The subnets you selected do not route to an internet gateway (igw)
+ or a NAT gateway in a public subnet.
+
+
+ The security groups you selected do not allow outbound traffic (eg:{' '}
+ 0.0.0.0/0) to pull the public Teleport image and to
+ reach your Teleport cluster.
+
+
+ The security groups attached to your database(s) neither allow
+ inbound traffic from the security group you selected nor allow
+ inbound traffic from all IPs in the subnets you selected.
+
+
+ There may be issues in the region you selected ({region}). Check the{' '}
+
- troubleshooting documentation
- {' '}
- for more details.
-
-
-
+ AWS Health Dashboard
+ {' '}
+ for any problems.
+
+
+ The network may be slow. Try waiting for a few more minutes or{' '}
+
+ try manually deploying your own database service.
+
+
+
+
+ Refer to the{' '}
+
+ troubleshooting documentation
+ {' '}
+ for more details.
+
+
+ );
+ return (
+
+ We're still in the process of creating your database service
+
);
}
if (result) {
return (
-
- Successfully created and detected your new Database Service.
-
+
+ Successfully created and detected your new database service.
+
);
}
+ const details = (
+
+ It will take at least a minute for the Database Service to be created and
+ joined to your cluster.
+ We will update this status once detected, meanwhile visit your AWS{' '}
+
+ dashboard
+ {' '}
+ to see progress details.
+
+ );
return (
-
-
-
-
-
- Teleport is currently deploying a Database Service. It will take at
- least a minute for the Database Service to be created and joined to your
- cluster.
- We will update this status once detected, meanwhile visit your AWS{' '}
-
- dashboard
- {' '}
- to see progress details.
-
-
+
+ Teleport is currently deploying a database service
+
);
};
@@ -595,15 +592,19 @@ export function AutoDiscoverDeploySuccess({
}: {
svcDeployedAwsUrl: string;
}) {
- return (
-
- The required database services have been deployed successfully. Discovery
- will complete in a minute. You can visit your AWS{' '}
+ const details = (
+ <>
+ Discovery will complete in a minute. You can visit your AWS{' '}
dashboard
{' '}
to see progress details.
-
+
+ );
+ return (
+
+ The required database services have been deployed successfully.
+
);
}
diff --git a/web/packages/teleport/src/Discover/Database/DeployService/ManualDeploy/ManualDeploy.tsx b/web/packages/teleport/src/Discover/Database/DeployService/ManualDeploy/ManualDeploy.tsx
index cc241a9898c6f..7ea73f719eab7 100644
--- a/web/packages/teleport/src/Discover/Database/DeployService/ManualDeploy/ManualDeploy.tsx
+++ b/web/packages/teleport/src/Discover/Database/DeployService/ManualDeploy/ManualDeploy.tsx
@@ -18,7 +18,7 @@
import { Suspense, useEffect, useState } from 'react';
-import { Box, ButtonSecondary, H3, Mark, Text } from 'design';
+import { Alert, Box, ButtonSecondary, H3, Mark, Text } from 'design';
import * as Icons from 'design/Icon';
import Validation, { Validator } from 'shared/components/Validation';
@@ -27,11 +27,6 @@ import { TextSelectCopyMulti } from 'teleport/components/TextSelectCopy';
import cfg from 'teleport/config';
import { DatabaseLocation } from 'teleport/Discover/SelectResource';
import { CommandBox } from 'teleport/Discover/Shared/CommandBox';
-import {
- HintBox,
- SuccessBox,
- WaitingInfo,
-} from 'teleport/Discover/Shared/HintBox';
import { usePingTeleport } from 'teleport/Discover/Shared/PingTeleportContext';
import {
clearCachedJoinTokenResult,
@@ -179,48 +174,51 @@ export function ManualDeploy(props: {
let hint;
if (showHint && !result) {
- hint = (
-
+ const details = (
+ <>
- There are a couple of possible reasons for why we haven't been able to
- detect your database service.
+ There are a couple of possible reasons for why we haven't been
+ able to detect your database service.
-
- - The command was not run on the server you were trying to add.
-
-
-
- - The Teleport Database Service could not join this Teleport cluster.
- Check the logs for errors by running{' '}
- journalctl -fu teleport.
-
+
+
+
+ The command was not run on the server you were trying to add.
+
+
+
+
+ The Teleport database service could not join this Teleport
+ cluster. Check the logs for errors by running{' '}
+ journalctl -fu teleport.
+
+
+
- We'll continue to look for the database service whilst you diagnose
- the issue.
+ We'll continue to look for the database service whilst you
+ diagnose the issue.
-
+
+ );
+ hint = (
+
+ We're still looking for your database service
+
);
} else if (result) {
hint = (
-
+
Successfully detected your new Teleport database service.
-
+
);
} else {
hint = (
-
-
-
-
- After running the command above, we'll automatically detect your new
- Teleport database service.
-
+
+ After running the command above, we'll automatically detect your
+ new Teleport database service.
+
);
}
diff --git a/web/packages/teleport/src/Discover/Kubernetes/EnrollEKSCluster/AgentWaitingDialog.tsx b/web/packages/teleport/src/Discover/Kubernetes/EnrollEKSCluster/AgentWaitingDialog.tsx
index dcaa6245bcf94..37fc0dc43bd17 100644
--- a/web/packages/teleport/src/Discover/Kubernetes/EnrollEKSCluster/AgentWaitingDialog.tsx
+++ b/web/packages/teleport/src/Discover/Kubernetes/EnrollEKSCluster/AgentWaitingDialog.tsx
@@ -18,6 +18,7 @@
import { useEffect } from 'react';
import {
+ Alert,
AnimatedProgressBar,
Box,
ButtonPrimary,
@@ -29,7 +30,6 @@ import Dialog, { DialogContent } from 'design/DialogConfirmation';
import * as Icons from 'design/Icon';
import { TextIcon, useShowHint } from 'teleport/Discover/Shared';
-import { HintBox } from 'teleport/Discover/Shared/HintBox';
import { usePingTeleport } from 'teleport/Discover/Shared/PingTeleportContext';
import { Kube } from 'teleport/services/kube';
@@ -74,36 +74,47 @@ export function AgentWaitingDialog({
const showHint = useShowHint(active);
function hintMessage() {
- if (showHint && !result) {
- return (
-
-
-
- There are a few of possible reasons for why we haven't been able
- to detect your Kubernetes cluster.
-
-
- - The cluster doesn't have active nodes.
+ const details = (
+ <>
+
+ There are a few of possible reasons for why we haven't been able
+ to detect your Kubernetes cluster.
+
+
+
+ The cluster doesn't have active nodes.
+
+
- - The manual command was not run on the server you were trying to
+ The manual command was not run on the server you were trying to
add.
-
+
+
- - The Teleport Service could not join this Teleport cluster. Check
+ The Teleport Service could not join this Teleport cluster. Check
the logs for errors by running
kubectl logs -l app=teleport-kube-agent -n teleport-agent
+
+
-
- We'll continue to look for your Kubernetes cluster whilst you
- diagnose the issue.
-
-
+
+ We'll continue to look for your Kubernetes cluster while you
+ diagnose the issue.
+
+
+ );
+ if (showHint && !result) {
+ return (
+
+
+ We're still looking for your Kubernetes cluster
+
);
}
diff --git a/web/packages/teleport/src/Discover/Kubernetes/SelfHosted/HelmChart/HelmChart.test.tsx b/web/packages/teleport/src/Discover/Kubernetes/SelfHosted/HelmChart/HelmChart.test.tsx
index cbb90fe281295..88d0cf4536bbb 100644
--- a/web/packages/teleport/src/Discover/Kubernetes/SelfHosted/HelmChart/HelmChart.test.tsx
+++ b/web/packages/teleport/src/Discover/Kubernetes/SelfHosted/HelmChart/HelmChart.test.tsx
@@ -47,7 +47,7 @@ kubeClusterName: EKS1
labels:
teleport.internal/resource-id: resource-id
EOF
-
+
helm install teleport-agent teleport/teleport-kube-agent -f prod-cluster-values.yaml --version 12.3.4 \\
--create-namespace --namespace teleport-agent`,
},
@@ -62,7 +62,7 @@ kubeClusterName: EKS1
labels:
teleport.internal/resource-id: resource-id
EOF
-
+
helm install teleport-agent teleport/teleport-kube-agent -f prod-cluster-values.yaml --version 12.3.4 \\
--create-namespace --namespace teleport-agent`,
},
@@ -85,7 +85,7 @@ labels:
label1: value1
label2: value2
EOF
-
+
helm install teleport-agent teleport/teleport-kube-agent -f prod-cluster-values.yaml --version 12.3.4 \\
--create-namespace --namespace teleport-agent`,
},
@@ -104,7 +104,7 @@ labels:
teleport.internal/resource-id: resource-id
enterprise: true
EOF
-
+
helm install teleport-agent teleport/teleport-kube-agent -f prod-cluster-values.yaml --version 12.3.4 \\
--create-namespace --namespace teleport-agent`,
},
@@ -132,7 +132,7 @@ highAvailability:
enabled: true
minAvailable: 1
EOF
-
+
helm install teleport-agent teleport/teleport-kube-agent -f prod-cluster-values.yaml --version 14.5.6 \\
--create-namespace --namespace teleport-agent`,
},
@@ -168,7 +168,7 @@ highAvailability:
enabled: true
minAvailable: 1
EOF
-
+
helm install teleport-agent teleport/teleport-kube-agent -f prod-cluster-values.yaml --version 14.5.6 \\
--create-namespace --namespace teleport-agent`,
},
diff --git a/web/packages/teleport/src/Discover/Kubernetes/SelfHosted/HelmChart/HelmChart.tsx b/web/packages/teleport/src/Discover/Kubernetes/SelfHosted/HelmChart/HelmChart.tsx
index 031b048a836bb..c7454c23d5d98 100644
--- a/web/packages/teleport/src/Discover/Kubernetes/SelfHosted/HelmChart/HelmChart.tsx
+++ b/web/packages/teleport/src/Discover/Kubernetes/SelfHosted/HelmChart/HelmChart.tsx
@@ -20,6 +20,7 @@ import { Suspense, useEffect, useState } from 'react';
import styled from 'styled-components';
import {
+ Alert,
Box,
ButtonSecondary,
Flex,
@@ -38,11 +39,6 @@ import { requiredField } from 'shared/components/Validation/rules';
import { CatchError } from 'teleport/components/CatchError';
import { TextSelectCopyMulti } from 'teleport/components/TextSelectCopy';
import { CommandBox } from 'teleport/Discover/Shared/CommandBox';
-import {
- HintBox,
- SuccessBox,
- WaitingInfo,
-} from 'teleport/Discover/Shared/HintBox';
import { usePingTeleport } from 'teleport/Discover/Shared/PingTeleportContext';
import { ResourceLabelTooltip } from 'teleport/Discover/Shared/ResourceLabelTooltip';
import {
@@ -448,7 +444,7 @@ kubeClusterName: ${data.clusterName}
labels:
teleport.internal/resource-id: ${data.resourceId}${joinLabelsText}
${extraYAMLConfig}EOF
-
+
helm install teleport-agent teleport/teleport-kube-agent -f prod-cluster-values.yaml --version ${deployVersion} \\
--create-namespace --namespace ${data.namespace}`;
}
@@ -483,48 +479,51 @@ const InstallHelmChart = ({
let hint;
if (showHint && !result) {
- hint = (
-
+ const details = (
+ <>
- There are a couple of possible reasons for why we haven't been able to
- detect your Kubernetes cluster.
-
-
-
- - The command was not run on the server you were trying to add.
+ There are a couple of possible reasons for why we haven't been
+ able to detect your Kubernetes cluster.
-
- - The Teleport Service could not join this Teleport cluster. Check the
- logs for errors by running
- kubectl logs -l app=teleport-agent -n {namespace}
-
+
+
+
+ The command was not run on the server you were trying to add.
+
+
+
+
+ The Teleport Service could not join this Teleport cluster. Check
+ the logs for errors by running
+ kubectl logs -l app=teleport-agent -n {namespace}
+
+
+
- We'll continue to look for your Kubernetes cluster whilst you diagnose
- the issue.
+ We'll continue to look for your Kubernetes cluster while you
+ diagnose the issue.
-
+
+ );
+ hint = (
+
+ We're still looking for your Kubernetes cluster.
+
);
} else if (result) {
hint = (
-
+
Successfully detected your new Kubernetes cluster.
-
+
);
} else {
hint = (
-
-
-
-
- After running the command above, we'll automatically detect your new
- Kubernetes cluster.
-
+
+ After running the command above, we'll automatically detect your
+ new Kubernetes cluster.
+
);
}
diff --git a/web/packages/teleport/src/Discover/Server/DownloadScript/DownloadScript.tsx b/web/packages/teleport/src/Discover/Server/DownloadScript/DownloadScript.tsx
index 7e8de453f7f73..ec2f0f0e464ae 100644
--- a/web/packages/teleport/src/Discover/Server/DownloadScript/DownloadScript.tsx
+++ b/web/packages/teleport/src/Discover/Server/DownloadScript/DownloadScript.tsx
@@ -18,7 +18,7 @@
import { Suspense, useEffect, useState } from 'react';
-import { Box, ButtonSecondary, Flex, Mark, Text } from 'design';
+import { Alert, Box, ButtonSecondary, Flex, Mark, Text } from 'design';
import * as Icons from 'design/Icon';
import { H3, Subtitle3 } from 'design/Text/Text';
import Validation, { Validator } from 'shared/components/Validation';
@@ -26,11 +26,6 @@ import Validation, { Validator } from 'shared/components/Validation';
import { CatchError } from 'teleport/components/CatchError';
import { TextSelectCopyMulti } from 'teleport/components/TextSelectCopy';
import cfg from 'teleport/config';
-import {
- HintBox,
- SuccessBox,
- WaitingInfo,
-} from 'teleport/Discover/Shared/HintBox';
import { usePingTeleport } from 'teleport/Discover/Shared/PingTeleportContext';
import { ResourceLabelTooltip } from 'teleport/Discover/Shared/ResourceLabelTooltip/ResourceLabelTooltip';
import {
@@ -227,44 +222,51 @@ export function StepTwoWithActionBtns(
let hint;
if (showHint && !result) {
- hint = (
-
+ const details = (
+ <>
There are a couple of possible reasons for why we haven't been able to
detect your server.
-
- - The command was not run on the server you were trying to add.
-
-
-
- - The Teleport Service could not join this Teleport cluster. Check the
- logs for errors by running journalctl -fu teleport.
-
+
+
+
+ The command was not run on the server you were trying to add.
+
+
+
+
+ The Teleport Service could not join this Teleport cluster. Check
+ the logs for errors by running{' '}
+ journalctl -fu teleport.
+
+
+
- We'll continue to look for the server whilst you diagnose the issue.
+ We'll continue to look for the server whilst you diagnose the
+ issue.
-
+
+ );
+ hint = (
+
+ We're still looking for your server
+
);
} else if (result) {
hint = (
- Successfully detected your new Teleport instance.
+
+ Successfully detected your new Teleport instance.
+
);
} else {
hint = (
-
-
-
-
- After running the command above, we'll automatically detect your new
- Teleport instance.
-
+
+ After running the command above, we'll automatically detect your
+ new Teleport instance.
+
);
}
diff --git a/web/packages/teleport/src/Discover/Shared/HintBox.tsx b/web/packages/teleport/src/Discover/Shared/HintBox.tsx
deleted file mode 100644
index 16508b9826af7..0000000000000
--- a/web/packages/teleport/src/Discover/Shared/HintBox.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * Teleport
- * Copyright (C) 2023 Gravitational, Inc.
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see .
- */
-
-import React from 'react';
-import styled from 'styled-components';
-
-import { Box, Flex, Text } from 'design';
-import * as Icons from 'design/Icon';
-
-import { TextIcon } from 'teleport/Discover/Shared/Text';
-
-const HintBoxContainer = styled(Box).attrs<{ maxWidth?: string }>(props => ({
- maxWidth: props.maxWidth,
-}))`
- background-color: ${props => props.theme.colors.spotBackground[0]};
- padding: ${props => `${props.theme.space[3]}px`};
- border-radius: ${props => `${props.theme.space[2]}px`};
- border: 2px solid ${props => props.theme.colors.warning.main};
-`;
-
-// TODO(bl-nero): Migrate this component to an info or neutral alert box.
-export const WaitingInfo = styled(Box)`
- max-width: 1000px;
- background-color: ${props => props.theme.colors.spotBackground[0]};
- padding: ${props => `${props.theme.space[3]}px`};
- border-radius: ${props => `${props.theme.space[2]}px`};
- border: 2px solid ${props => props.theme.colors.text.muted};
- display: flex;
- align-items: center;
-`;
-
-export const SuccessInfo = styled(Box)`
- max-width: 1000px;
- background-color: ${props => props.theme.colors.spotBackground[0]};
- padding: ${props => `${props.theme.space[3]}px`};
- border-radius: ${props => `${props.theme.space[2]}px`};
- border: 2px solid ${props => props.theme.colors.success.main};
- display: flex;
- align-items: center;
-`;
-
-interface HintBoxProps {
- header: string;
- maxWidth?: string;
-}
-
-export function HintBox(props: React.PropsWithChildren) {
- return (
-
-
-
-
-
-
- {props.header}
-
-
-
- {props.children}
-
- );
-}
-
-export function SuccessBox(props: { children: React.ReactNode }) {
- return (
-
-
-
-
- {props.children}
-
- );
-}