From d9a7450ef361fd4a5898f96fc163aaa5094c4a44 Mon Sep 17 00:00:00 2001 From: cpathipa <119517080+cpathipa@users.noreply.github.com> Date: Fri, 29 Mar 2024 10:03:52 -0500 Subject: [PATCH 1/7] upcoming: [M3-7938] - Show custom error message in EditAccessKeyDrawer --- .../components/Autocomplete/Autocomplete.tsx | 2 +- .../components/EditableText/EditableText.tsx | 2 +- packages/manager/src/components/TextField.tsx | 2 +- .../AccessKeyRegions/AccessKeyRegions.tsx | 2 +- .../AccessKeyLanding/OMC_AccessKeyDrawer.tsx | 19 ++++++++++++++++++- 5 files changed, 22 insertions(+), 5 deletions(-) diff --git a/packages/manager/src/components/Autocomplete/Autocomplete.tsx b/packages/manager/src/components/Autocomplete/Autocomplete.tsx index 20fd80ba968..c249e986cda 100644 --- a/packages/manager/src/components/Autocomplete/Autocomplete.tsx +++ b/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. */ diff --git a/packages/manager/src/components/EditableText/EditableText.tsx b/packages/manager/src/components/EditableText/EditableText.tsx index 6a048460590..cb189ad88ff 100644 --- a/packages/manager/src/components/EditableText/EditableText.tsx +++ b/packages/manager/src/components/EditableText/EditableText.tsx @@ -104,7 +104,7 @@ const useStyles = makeStyles()( interface Props { className?: string; disabledBreadcrumbEditButton?: boolean; - errorText?: string; + errorText?: React.ReactNode | string; /** * Send event analytics */ diff --git a/packages/manager/src/components/TextField.tsx b/packages/manager/src/components/TextField.tsx index bac96accd5d..28f382792d3 100644 --- a/packages/manager/src/components/TextField.tsx +++ b/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 diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyRegions/AccessKeyRegions.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyRegions/AccessKeyRegions.tsx index fb83a6eb02d..7f64307c854 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyRegions/AccessKeyRegions.tsx +++ b/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; diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/OMC_AccessKeyDrawer.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/OMC_AccessKeyDrawer.tsx index 8b3dca3276b..4e879c090ef 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/OMC_AccessKeyDrawer.tsx +++ b/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} /> + Select at least one region. To delete all keys,{' '} + { + onClose(); + }} + > + revoke + {' '} + an access key individually. + + ) : ( + (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} From 7232569ad2d757860a391481ad3ce42ee23de90f Mon Sep 17 00:00:00 2001 From: cpathipa <119517080+cpathipa@users.noreply.github.com> Date: Fri, 29 Mar 2024 10:05:11 -0500 Subject: [PATCH 2/7] Added changeset: Show custom error message in EditAccessKeyDrawer. --- .../.changeset/pr-10329-upcoming-features-1711724710965.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-10329-upcoming-features-1711724710965.md diff --git a/packages/manager/.changeset/pr-10329-upcoming-features-1711724710965.md b/packages/manager/.changeset/pr-10329-upcoming-features-1711724710965.md new file mode 100644 index 00000000000..f92ad84e36a --- /dev/null +++ b/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)) From 30a1dd55ac6d8d5bc9d7d82a3c71ff72170d55b4 Mon Sep 17 00:00:00 2001 From: cpathipa <119517080+cpathipa@users.noreply.github.com> Date: Fri, 29 Mar 2024 11:45:42 -0500 Subject: [PATCH 3/7] Update packages/manager/.changeset/pr-10329-upcoming-features-1711724710965.md Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com> --- .../.changeset/pr-10329-upcoming-features-1711724710965.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/manager/.changeset/pr-10329-upcoming-features-1711724710965.md b/packages/manager/.changeset/pr-10329-upcoming-features-1711724710965.md index f92ad84e36a..fbcbbbb5264 100644 --- a/packages/manager/.changeset/pr-10329-upcoming-features-1711724710965.md +++ b/packages/manager/.changeset/pr-10329-upcoming-features-1711724710965.md @@ -2,4 +2,4 @@ "@linode/manager": Upcoming Features --- -Show custom error message in EditAccessKeyDrawer. ([#10329](https://github.com/linode/manager/pull/10329)) +Show custom error message in EditAccessKeyDrawer ([#10329](https://github.com/linode/manager/pull/10329)) From fc7bfc80babd5475598f27d4dc3a758a8665c8c1 Mon Sep 17 00:00:00 2001 From: cpathipa <119517080+cpathipa@users.noreply.github.com> Date: Fri, 29 Mar 2024 15:07:52 -0500 Subject: [PATCH 4/7] PR feedback - @DevDW @mjac0bs --- .../ObjectStorage/AccessKeyLanding/OMC_AccessKeyDrawer.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/OMC_AccessKeyDrawer.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/OMC_AccessKeyDrawer.tsx index 4e879c090ef..22df55f9834 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/OMC_AccessKeyDrawer.tsx +++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/OMC_AccessKeyDrawer.tsx @@ -293,7 +293,7 @@ export const OMC_AccessKeyDrawer = (props: AccessKeyDrawerProps) => { error={ !createMode && formik.errors.regions ? ( - Select at least one region. To delete all keys,{' '} + Select at least one region. To remove all regions,{' '} { onClose(); @@ -301,7 +301,7 @@ export const OMC_AccessKeyDrawer = (props: AccessKeyDrawerProps) => { > revoke {' '} - an access key individually. + the access key. ) : ( (formik.errors.regions as string) From 7943e74fc036abda0543f4c83dd0bfab11cb8103 Mon Sep 17 00:00:00 2001 From: cpathipa <119517080+cpathipa@users.noreply.github.com> Date: Mon, 1 Apr 2024 10:39:23 -0500 Subject: [PATCH 5/7] PR - feedback - @alioso --- packages/manager/src/components/Autocomplete/Autocomplete.tsx | 2 +- packages/manager/src/components/EditableText/EditableText.tsx | 2 +- packages/manager/src/components/TextField.tsx | 2 +- .../AccessKeyLanding/AccessKeyRegions/AccessKeyRegions.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/manager/src/components/Autocomplete/Autocomplete.tsx b/packages/manager/src/components/Autocomplete/Autocomplete.tsx index c249e986cda..519818e5f23 100644 --- a/packages/manager/src/components/Autocomplete/Autocomplete.tsx +++ b/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?: React.ReactNode | string; + errorText?: JSX.Element | string; /** Provides a hint with normal styling to assist users. */ helperText?: string; /** A required label for the Autocomplete to ensure accessibility. */ diff --git a/packages/manager/src/components/EditableText/EditableText.tsx b/packages/manager/src/components/EditableText/EditableText.tsx index cb189ad88ff..7b3ea1aa697 100644 --- a/packages/manager/src/components/EditableText/EditableText.tsx +++ b/packages/manager/src/components/EditableText/EditableText.tsx @@ -104,7 +104,7 @@ const useStyles = makeStyles()( interface Props { className?: string; disabledBreadcrumbEditButton?: boolean; - errorText?: React.ReactNode | string; + errorText?: JSX.Element | string; /** * Send event analytics */ diff --git a/packages/manager/src/components/TextField.tsx b/packages/manager/src/components/TextField.tsx index 28f382792d3..298961cd1d9 100644 --- a/packages/manager/src/components/TextField.tsx +++ b/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?: React.ReactNode | string; + errorText?: JSX.Element | string; /** * Makes the TextField use 100% of the available width * @default false diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyRegions/AccessKeyRegions.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyRegions/AccessKeyRegions.tsx index 7f64307c854..26a6ac0b28f 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyRegions/AccessKeyRegions.tsx +++ b/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?: React.ReactNode | string; + error?: JSX.Element | string; name: string; onBlur: (e: any) => void; onChange: (value: string[]) => void; From b72b7e94530ae1af711dcfc790ff527c8bb282d0 Mon Sep 17 00:00:00 2001 From: cpathipa <119517080+cpathipa@users.noreply.github.com> Date: Tue, 2 Apr 2024 11:31:41 -0500 Subject: [PATCH 6/7] UX - Change - update error message. --- .../components/Autocomplete/Autocomplete.tsx | 2 +- .../components/EditableText/EditableText.tsx | 2 +- packages/manager/src/components/TextField.tsx | 2 +- .../AccessKeyRegions/AccessKeyRegions.tsx | 2 +- .../AccessKeyLanding/OMC_AccessKeyDrawer.tsx | 19 +------------------ .../src/objectStorageKeys.schema.ts | 2 +- 6 files changed, 6 insertions(+), 23 deletions(-) diff --git a/packages/manager/src/components/Autocomplete/Autocomplete.tsx b/packages/manager/src/components/Autocomplete/Autocomplete.tsx index 519818e5f23..20fd80ba968 100644 --- a/packages/manager/src/components/Autocomplete/Autocomplete.tsx +++ b/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?: JSX.Element | string; + errorText?: string; /** Provides a hint with normal styling to assist users. */ helperText?: string; /** A required label for the Autocomplete to ensure accessibility. */ diff --git a/packages/manager/src/components/EditableText/EditableText.tsx b/packages/manager/src/components/EditableText/EditableText.tsx index 7b3ea1aa697..6a048460590 100644 --- a/packages/manager/src/components/EditableText/EditableText.tsx +++ b/packages/manager/src/components/EditableText/EditableText.tsx @@ -104,7 +104,7 @@ const useStyles = makeStyles()( interface Props { className?: string; disabledBreadcrumbEditButton?: boolean; - errorText?: JSX.Element | string; + errorText?: string; /** * Send event analytics */ diff --git a/packages/manager/src/components/TextField.tsx b/packages/manager/src/components/TextField.tsx index 298961cd1d9..bac96accd5d 100644 --- a/packages/manager/src/components/TextField.tsx +++ b/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?: JSX.Element | string; + errorText?: string; /** * Makes the TextField use 100% of the available width * @default false diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyRegions/AccessKeyRegions.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyRegions/AccessKeyRegions.tsx index 26a6ac0b28f..fb83a6eb02d 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyRegions/AccessKeyRegions.tsx +++ b/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?: JSX.Element | string; + error?: string; name: string; onBlur: (e: any) => void; onChange: (value: string[]) => void; diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/OMC_AccessKeyDrawer.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/OMC_AccessKeyDrawer.tsx index 22df55f9834..8b3dca3276b 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/OMC_AccessKeyDrawer.tsx +++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/OMC_AccessKeyDrawer.tsx @@ -18,7 +18,6 @@ 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'; @@ -290,23 +289,6 @@ export const OMC_AccessKeyDrawer = (props: AccessKeyDrawerProps) => { value={formik.values.label} /> - Select at least one region. To remove all regions,{' '} - { - onClose(); - }} - > - revoke - {' '} - the access key. - - ) : ( - (formik.errors.regions as string) - ) - } onBlur={() => { const bucketsInRegions = buckets?.filter( (bucket) => @@ -330,6 +312,7 @@ 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} diff --git a/packages/validation/src/objectStorageKeys.schema.ts b/packages/validation/src/objectStorageKeys.schema.ts index 4cb404e60ba..4c1369055d2 100644 --- a/packages/validation/src/objectStorageKeys.schema.ts +++ b/packages/validation/src/objectStorageKeys.schema.ts @@ -24,7 +24,7 @@ export const updateObjectStorageKeysSchema = object({ .of(string()) .min( 1, - 'You need to select at least one region. To delete all keys, go to the Access Keys page in Cloud Manager and select Revoke.' + `Select at least one region. To remove all regions, use 'Revoke' in the actions menu and remove the access key.` ) .notRequired(), }); From 13d8a95eb0b2e2513594d58cd4e2ffee0d7f4658 Mon Sep 17 00:00:00 2001 From: cpathipa <119517080+cpathipa@users.noreply.github.com> Date: Tue, 2 Apr 2024 11:33:42 -0500 Subject: [PATCH 7/7] Update pr-10329-upcoming-features-1711724710965.md --- .../.changeset/pr-10329-upcoming-features-1711724710965.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/manager/.changeset/pr-10329-upcoming-features-1711724710965.md b/packages/manager/.changeset/pr-10329-upcoming-features-1711724710965.md index fbcbbbb5264..f0fbb509a16 100644 --- a/packages/manager/.changeset/pr-10329-upcoming-features-1711724710965.md +++ b/packages/manager/.changeset/pr-10329-upcoming-features-1711724710965.md @@ -2,4 +2,4 @@ "@linode/manager": Upcoming Features --- -Show custom error message in EditAccessKeyDrawer ([#10329](https://github.com/linode/manager/pull/10329)) +Update error message in EditAccessKeyDrawer ([#10329](https://github.com/linode/manager/pull/10329))