diff --git a/www/src/components/create-cluster/steps/AuthenticationStep.tsx b/www/src/components/create-cluster/steps/AuthenticationStep.tsx
index b7f5b1f1b..f73f7880b 100644
--- a/www/src/components/create-cluster/steps/AuthenticationStep.tsx
+++ b/www/src/components/create-cluster/steps/AuthenticationStep.tsx
@@ -10,6 +10,7 @@ import {
import styled, { CSSProp, useTheme } from 'styled-components'
import { useCreateClusterContext } from '../CreateClusterWizard'
+import { sanitizeConsoleUrl } from 'components/overview/clusters/all/AllClustersTableCols'
export function AuthenticationStep() {
const theme = useTheme()
@@ -54,7 +55,7 @@ export function AuthenticationStep() {
}
diff --git a/www/src/components/overview/clusters/SelfHostedTableCols.tsx b/www/src/components/overview/clusters/SelfHostedTableCols.tsx
index 83047dc62..8048ef3d8 100644
--- a/www/src/components/overview/clusters/SelfHostedTableCols.tsx
+++ b/www/src/components/overview/clusters/SelfHostedTableCols.tsx
@@ -11,11 +11,12 @@ import { A, Div } from 'honorable'
import { Link } from 'react-router-dom'
import styled, { useTheme } from 'styled-components'
-import { ClusterFragment, Source } from '../../../generated/graphql'
+import { Source } from '../../../generated/graphql'
import { ProviderIcon } from '../../utils/ProviderIcon'
import ClusterHealth from './ClusterHealth'
import ClusterOwner from './ClusterOwner'
+import { sanitizeConsoleUrl } from './all/AllClustersTableCols'
import { ClusterListElement } from './clusterListUtils'
const clusterExists = (row: ClusterListElement): boolean =>
@@ -143,9 +144,10 @@ export const ColActions = columnHelper.accessor((row) => row.consoleUrl, {
secondary
startIcon={}
as="a"
- href={`${row.consoleUrl}`}
+ href={sanitizeConsoleUrl(row.consoleUrl)}
target="_blank"
rel="noopener noreferrer"
+ onClick={(e) => e.stopPropagation()}
>
Go to Console
diff --git a/www/src/components/overview/clusters/all/AllClustersTableCols.tsx b/www/src/components/overview/clusters/all/AllClustersTableCols.tsx
index a99e771c3..00b0c22a4 100644
--- a/www/src/components/overview/clusters/all/AllClustersTableCols.tsx
+++ b/www/src/components/overview/clusters/all/AllClustersTableCols.tsx
@@ -121,9 +121,10 @@ const ColActions = columnHelper.accessor((instance) => instance, {
small
startIcon={}
as={Link}
- to={`https://${instance.consoleUrl}`}
+ to={sanitizeConsoleUrl(instance.consoleUrl)}
target="_blank"
rel="noopener noreferrer"
+ onClick={(e) => e.stopPropagation()}
>
Go to Console
@@ -144,3 +145,6 @@ export const allClustersCols = [
ColOwner,
ColActions,
]
+
+export const sanitizeConsoleUrl = (url: Nullable) =>
+ url ? `https://${url.replace(/^https?:\/\//, '')}` : ''
diff --git a/www/src/components/overview/clusters/plural-cloud/CloudInstanceTableCols.tsx b/www/src/components/overview/clusters/plural-cloud/CloudInstanceTableCols.tsx
index 52fd2cc8a..10c048701 100644
--- a/www/src/components/overview/clusters/plural-cloud/CloudInstanceTableCols.tsx
+++ b/www/src/components/overview/clusters/plural-cloud/CloudInstanceTableCols.tsx
@@ -22,6 +22,7 @@ import { useTheme } from 'styled-components'
import { CellCaption, CellWrap } from '../SelfHostedTableCols'
import { Link } from 'react-router-dom'
+import { sanitizeConsoleUrl } from '../all/AllClustersTableCols'
const columnHelper = createColumnHelper()
@@ -172,9 +173,10 @@ const ColActions = columnHelper.accessor((instance) => instance, {
small
startIcon={}
as={Link}
- to={`https://${instance.url}`}
+ to={sanitizeConsoleUrl(instance.url)}
target="_blank"
rel="noopener noreferrer"
+ onClick={(e) => e.stopPropagation()}
>
Go to Console