diff --git a/dashboard/src/components/porter/Link.tsx b/dashboard/src/components/porter/Link.tsx index 40b8a4d5ef..0e83da35e4 100644 --- a/dashboard/src/components/porter/Link.tsx +++ b/dashboard/src/components/porter/Link.tsx @@ -1,7 +1,8 @@ -import DynamicLink from "components/DynamicLink"; import React from "react"; import styled from "styled-components"; +import DynamicLink from "components/DynamicLink"; + type Props = { to?: string; onClick?: () => void; @@ -11,6 +12,7 @@ type Props = { color?: string; hoverColor?: string; showTargetBlankIcon?: boolean; + inline?: boolean; }; const Link: React.FC = ({ @@ -22,14 +24,39 @@ const Link: React.FC = ({ color = "#ffffff", hoverColor, showTargetBlankIcon = true, + inline = true, }) => { return ( {to ? ( - + {children} {target === "_blank" && showTargetBlankIcon && ( - + + + + + )} ) : ( @@ -44,7 +71,7 @@ const Link: React.FC = ({ export default Link; -const Svg = styled.svg<{ color: string, hoverColor?: string }>` +const Svg = styled.svg<{ color: string; hoverColor?: string }>` margin-left: 5px; stroke: ${(props) => props.color}; stroke-width: 2; @@ -59,9 +86,13 @@ const Underline = styled.div<{ color: string }>` background: ${(props) => props.color}; `; -const StyledLink = styled(DynamicLink) <{ hasunderline?: boolean, color: string, removeInline?: boolean }>` +const StyledLink = styled(DynamicLink)<{ + hasunderline?: boolean; + color: string; + inline: boolean; +}>` color: ${(props) => props.color}; - ${(props) => !props.removeInline && "display: inline-flex;"}; + ${(props) => props.inline && "display: inline-flex;"}; font-size: 13px; cursor: pointer; align-items: center; @@ -75,7 +106,7 @@ const Div = styled.span<{ color: string }>` align-items: center; `; -const LinkWrapper = styled.span<{ hoverColor?: string, color: string }>` +const LinkWrapper = styled.span<{ hoverColor?: string; color: string }>` position: relative; display: inline-flex; align-items: center; @@ -95,5 +126,5 @@ const LinkWrapper = styled.span<{ hoverColor?: string, color: string }>` svg { stroke: ${({ hoverColor, color }) => hoverColor ?? color}; } - }; -`; \ No newline at end of file + } +`; diff --git a/dashboard/src/lib/hooks/useCluster.ts b/dashboard/src/lib/hooks/useCluster.ts index ff1e223ff5..273bab2c99 100644 --- a/dashboard/src/lib/hooks/useCluster.ts +++ b/dashboard/src/lib/hooks/useCluster.ts @@ -426,7 +426,11 @@ export const useUpdateCluster = ({ // otherwise, continue to create the contract } catch (err) { throw new Error( - getErrorMessageFromNetworkCall(err, "Cluster preflight checks") + getErrorMessageFromNetworkCall( + err, + "Cluster preflight checks", + preflightCheckErrorReplacements + ) ); } finally { setIsHandlingPreflightChecks(false); @@ -531,15 +535,28 @@ export const useClusterNodeList = ({ }; }; +const preflightCheckErrorReplacements = { + RequestThrottled: + "Your cloud provider is currently throttling API requests. Please try again in a few minutes.", +}; + const getErrorMessageFromNetworkCall = ( err: unknown, - networkCallDescription: string + networkCallDescription: string, + replaceError?: Record ): string => { if (axios.isAxiosError(err)) { const parsed = z .object({ error: z.string() }) .safeParse(err.response?.data); if (parsed.success) { + if (replaceError) { + for (const key in replaceError) { + if (parsed.data.error.includes(key)) { + return `${networkCallDescription} failed: ${replaceError[key]}`; + } + } + } return `${networkCallDescription} failed: ${parsed.data.error}`; } } diff --git a/dashboard/src/main/home/infrastructure-dashboard/modals/help/preflight/ResolutionStepsModalContents.tsx b/dashboard/src/main/home/infrastructure-dashboard/modals/help/preflight/ResolutionStepsModalContents.tsx index 870a8fed68..f2316289ff 100644 --- a/dashboard/src/main/home/infrastructure-dashboard/modals/help/preflight/ResolutionStepsModalContents.tsx +++ b/dashboard/src/main/home/infrastructure-dashboard/modals/help/preflight/ResolutionStepsModalContents.tsx @@ -24,7 +24,7 @@ const ResolutionStepsModalContents: React.FC = ({ resolution }) => { {resolution.steps.map((step, i) => ( {step.externalLink ? ( - + {step.text} ) : (