upcoming: [M3-7938] - Show custom error message in EditAccessKeyDrawer

packages/manager/.changeset/pr-10329-upcoming-features-1711724710965.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Show custom error message in EditAccessKeyDrawer ([#10329](https://github.com/linode/manager/pull/10329))

packages/manager/src/components/Autocomplete/Autocomplete.tsx

@@ -24,7 +24,7 @@ export interface EnhancedAutocompleteProps<
     'renderInput'
   > {
   /** Provides a hint with error styling to assist users. */
-  errorText?: string;
+  errorText?: React.ReactNode | string;
   /** Provides a hint with normal styling to assist users. */
   helperText?: string;
   /** A required label for the Autocomplete to ensure accessibility. */

packages/manager/src/components/EditableText/EditableText.tsx

@@ -104,7 +104,7 @@ const useStyles = makeStyles<void, 'editIcon' | 'icon'>()(
 interface Props {
   className?: string;
   disabledBreadcrumbEditButton?: boolean;
-  errorText?: string;
+  errorText?: React.ReactNode | string;
   /**
    * Send event analytics
    */

packages/manager/src/components/TextField.tsx

@@ -90,7 +90,7 @@ interface BaseProps {
   /**
    * When defined, makes the input show an error state with the defined text
    */
-  errorText?: string;
+  errorText?: React.ReactNode | string;
   /**
    * Makes the TextField use 100% of the available width
    * @default false

packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyRegions/AccessKeyRegions.tsx

@@ -10,7 +10,7 @@ import type { RegionSelectOption } from 'src/components/RegionSelect/RegionSelec
 
 interface Props {
   disabled?: boolean;
-  error?: string;
+  error?: React.ReactNode | string;
   name: string;
   onBlur: (e: any) => void;
   onChange: (value: string[]) => void;

packages/manager/src/features/ObjectStorage/AccessKeyLanding/OMC_AccessKeyDrawer.tsx

@@ -18,6 +18,7 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { CircleProgress } from 'src/components/CircleProgress';
 import { Drawer } from 'src/components/Drawer';
 import { Link } from 'src/components/Link';
+import { LinkButton } from 'src/components/LinkButton';
 import { Notice } from 'src/components/Notice/Notice';
 import { TextField } from 'src/components/TextField';
 import { Typography } from 'src/components/Typography';
@@ -289,6 +290,23 @@ export const OMC_AccessKeyDrawer = (props: AccessKeyDrawerProps) => {
             value={formik.values.label}
           />
           <AccessKeyRegions
+            error={
+              !createMode && formik.errors.regions ? (
+                <span>
+                  Select at least one region. To remove all regions,{' '}
+                  <LinkButton
+                    onClick={() => {
+                      onClose();
+                    }}
+                  >
+                    revoke
+                  </LinkButton>{' '}
+                  the access key.
+                </span>
+              ) : (
+                (formik.errors.regions as string)
+              )
+            }
             onBlur={() => {
               const bucketsInRegions = buckets?.filter(
                 (bucket) =>
@@ -312,7 +330,6 @@ export const OMC_AccessKeyDrawer = (props: AccessKeyDrawerProps) => {
               formik.setFieldValue('regions', values);
             }}
             disabled={isRestrictedUser}
-            error={formik.errors.regions as string}
             name="regions"
             required
             selectedRegion={formik.values.regions}