small azure patches (#4341)

Author: d-g-town

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<Props> = ({
@@ -22,14 +24,39 @@ const Link: React.FC<Props> = ({
   color = "#ffffff",
   hoverColor,
   showTargetBlankIcon = true,
+  inline = true,
 }) => {
   return (
     <LinkWrapper hoverColor={hoverColor} color={color}>
       {to ? (
-        <StyledLink to={to} target={target} color={color}>
+        <StyledLink
+          to={to}
+          target={target}
+          color={color}
+          inline={inline}
+        >
           {children}
           {target === "_blank" && showTargetBlankIcon && (
-              <Svg color={color} hoverColor={hoverColor} data-testid="geist-icon" fill="none" height="1em" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" strokeLinejoin="round" stroke-width="2" viewBox="0 0 24 24" width="1em" data-darkreader-inline-stroke="" data-darkreader-inline-color=""><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path><path d="M15 3h6v6"></path><path d="M10 14L21 3"></path></Svg>
+            <Svg
+              color={color}
+              hoverColor={hoverColor}
+              data-testid="geist-icon"
+              fill="none"
+              height="1em"
+              shape-rendering="geometricPrecision"
+              stroke="currentColor"
+              stroke-linecap="round"
+              strokeLinejoin="round"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="1em"
+              data-darkreader-inline-stroke=""
+              data-darkreader-inline-color=""
+            >
+              <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path>
+              <path d="M15 3h6v6"></path>
+              <path d="M10 14L21 3"></path>
+            </Svg>
           )}
         </StyledLink>
       ) : (
@@ -44,7 +71,7 @@ const Link: React.FC<Props> = ({
 
 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};
     }
-  };
-`;
+  }
+`;

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, string>
 ): 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}`;
     }
   }

dashboard/src/main/home/infrastructure-dashboard/modals/help/preflight/ResolutionStepsModalContents.tsx

@@ -24,7 +24,7 @@ const ResolutionStepsModalContents: React.FC<Props> = ({ resolution }) => {
         {resolution.steps.map((step, i) => (
           <Step number={i + 1} key={i}>
             {step.externalLink ? (
-              <Link to={step.externalLink} target="_blank">
+              <Link to={step.externalLink} target="_blank" inline={false}>
                 {step.text}
               </Link>
             ) : (