From fed3a1fc07dae5f880d2c10c267498821745992d Mon Sep 17 00:00:00 2001 From: mjac0bs Date: Tue, 16 Jul 2024 11:58:55 -0700 Subject: [PATCH 01/14] Conditionally show the Linode plan type field --- .../SupportTicketAccountLimitFields.tsx | 49 +++++++++++-------- 1 file changed, 28 insertions(+), 21 deletions(-) diff --git a/packages/manager/src/features/Support/SupportTickets/SupportTicketAccountLimitFields.tsx b/packages/manager/src/features/Support/SupportTickets/SupportTicketAccountLimitFields.tsx index cc1752548d1..deafe87a30f 100644 --- a/packages/manager/src/features/Support/SupportTickets/SupportTicketAccountLimitFields.tsx +++ b/packages/manager/src/features/Support/SupportTickets/SupportTicketAccountLimitFields.tsx @@ -17,18 +17,23 @@ export interface AccountLimitCustomFields extends CustomFields { } export const SupportTicketAccountLimitFields = () => { - const { control, formState, reset } = useFormContext< + const { control, formState, reset, watch } = useFormContext< AccountLimitCustomFields & SupportTicketFormFields >(); const { data: account } = useAccount(); + const { entityType } = watch(); + const defaultValues = { companyName: account?.company, customerName: `${account?.first_name} ${account?.last_name}`, ...formState.defaultValues, }; + const shouldShowLinodeTypeField = + entityType === 'linode_id' || entityType === 'lkecluster_id'; + React.useEffect(() => { reset(defaultValues); }, []); @@ -65,26 +70,28 @@ export const SupportTicketAccountLimitFields = () => { name="companyName" /> - ( - - View types of plans - - } - data-qa-ticket-linode-plan - errorText={fieldState.error?.message} - label={ACCOUNT_LIMIT_FIELD_NAME_TO_LABEL_MAP.linodePlan} - name="linodePlan" - onChange={field.onChange} - placeholder="Dedicated 4GB, Shared 8GB, High Memory 24GB, etc." - value={field.value} - /> - )} - control={control} - name="linodePlan" - /> + {shouldShowLinodeTypeField && ( + ( + + View types of plans + + } + data-qa-ticket-linode-plan + errorText={fieldState.error?.message} + label={ACCOUNT_LIMIT_FIELD_NAME_TO_LABEL_MAP.linodePlan} + name="linodePlan" + onChange={field.onChange} + placeholder="Dedicated 4GB, Shared 8GB, High Memory 24GB, etc." + value={field.value} + /> + )} + control={control} + name="linodePlan" + /> + )} ( Date: Tue, 16 Jul 2024 12:21:43 -0700 Subject: [PATCH 02/14] Fix Volumes bug and render general errors --- .../src/features/Volumes/VolumeCreate.tsx | 10 ++++------ .../manager/src/utilities/formikErrorUtils.ts | 18 +++++++++++------- 2 files changed, 15 insertions(+), 13 deletions(-) diff --git a/packages/manager/src/features/Volumes/VolumeCreate.tsx b/packages/manager/src/features/Volumes/VolumeCreate.tsx index 5c60b9daaf8..123f4a55f86 100644 --- a/packages/manager/src/features/Volumes/VolumeCreate.tsx +++ b/packages/manager/src/features/Volumes/VolumeCreate.tsx @@ -44,6 +44,7 @@ import { PRICES_RELOAD_ERROR_NOTICE_TEXT } from 'src/utilities/pricing/constants import { ConfigSelect } from './VolumeDrawer/ConfigSelect'; import { SizeField } from './VolumeDrawer/SizeField'; +import { ErrorMessage } from 'src/components/ErrorMessage'; export const SIZE_FIELD_WIDTH = 160; @@ -281,12 +282,9 @@ export const VolumeCreate = () => { {error && ( - + + + )} - {errorMap.none && } + {generalError && ( + + + + )} ) => From 225a89d1ccdb28a90c6013b3895e3b77db45d5cd Mon Sep 17 00:00:00 2001 From: mjac0bs Date: Tue, 16 Jul 2024 12:49:51 -0700 Subject: [PATCH 04/14] Link account limit ticket in Add a Node Pool flow --- .../NodePoolsDisplay/AddNodePoolDrawer.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AddNodePoolDrawer.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AddNodePoolDrawer.tsx index 9ccd1979c3c..b967c0c236d 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AddNodePoolDrawer.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AddNodePoolDrawer.tsx @@ -24,6 +24,7 @@ import { nodeWarning } from '../../kubeUtils'; import { hasInvalidNodePoolPrice } from './utils'; import type { Region } from '@linode/api-v4'; +import { ErrorMessage } from 'src/components/ErrorMessage'; const useStyles = makeStyles()((theme: Theme) => ({ boxOuter: { @@ -162,11 +163,12 @@ export const AddNodePoolDrawer = (props: Props) => { wide > {error && ( - + + + )}
Date: Tue, 16 Jul 2024 12:50:32 -0700 Subject: [PATCH 05/14] Lint --- .../NodePoolsDisplay/AddNodePoolDrawer.tsx | 4 ++-- packages/manager/src/features/Volumes/VolumeCreate.tsx | 8 +++++--- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AddNodePoolDrawer.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AddNodePoolDrawer.tsx index b967c0c236d..e424e4759e7 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AddNodePoolDrawer.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AddNodePoolDrawer.tsx @@ -1,10 +1,10 @@ -import { Theme } from '@mui/material/styles'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Box } from 'src/components/Box'; import { Drawer } from 'src/components/Drawer'; +import { ErrorMessage } from 'src/components/ErrorMessage'; import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { useCreateNodePoolMutation } from 'src/queries/kubernetes'; @@ -24,7 +24,7 @@ import { nodeWarning } from '../../kubeUtils'; import { hasInvalidNodePoolPrice } from './utils'; import type { Region } from '@linode/api-v4'; -import { ErrorMessage } from 'src/components/ErrorMessage'; +import type { Theme } from '@mui/material/styles'; const useStyles = makeStyles()((theme: Theme) => ({ boxOuter: { diff --git a/packages/manager/src/features/Volumes/VolumeCreate.tsx b/packages/manager/src/features/Volumes/VolumeCreate.tsx index 123f4a55f86..fded98105d3 100644 --- a/packages/manager/src/features/Volumes/VolumeCreate.tsx +++ b/packages/manager/src/features/Volumes/VolumeCreate.tsx @@ -1,6 +1,5 @@ -import { Linode } from '@linode/api-v4/lib/linodes/types'; import { CreateVolumeSchema } from '@linode/validation/lib/volumes.schema'; -import { Theme, useTheme } from '@mui/material/styles'; +import { useTheme } from '@mui/material/styles'; import { useFormik } from 'formik'; import { useSnackbar } from 'notistack'; import * as React from 'react'; @@ -10,6 +9,7 @@ import { makeStyles } from 'tss-react/mui'; import { Box } from 'src/components/Box'; import { Button } from 'src/components/Button/Button'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; +import { ErrorMessage } from 'src/components/ErrorMessage'; import { LandingHeader } from 'src/components/LandingHeader'; import { Notice } from 'src/components/Notice/Notice'; import { Paper } from 'src/components/Paper'; @@ -44,7 +44,9 @@ import { PRICES_RELOAD_ERROR_NOTICE_TEXT } from 'src/utilities/pricing/constants import { ConfigSelect } from './VolumeDrawer/ConfigSelect'; import { SizeField } from './VolumeDrawer/SizeField'; -import { ErrorMessage } from 'src/components/ErrorMessage'; + +import type { Linode } from '@linode/api-v4/lib/linodes/types'; +import type { Theme } from '@mui/material/styles'; export const SIZE_FIELD_WIDTH = 160; From a88a5620659b20d0af0045d15d9679c565710785 Mon Sep 17 00:00:00 2001 From: mjac0bs Date: Tue, 16 Jul 2024 13:03:35 -0700 Subject: [PATCH 06/14] Link account limit ticket in NodeBalancer Create flow --- .../manager/src/features/NodeBalancers/NodeBalancerCreate.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx index 92c38f87ae5..c06b15f7b15 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx @@ -20,6 +20,7 @@ import { CheckoutSummary } from 'src/components/CheckoutSummary/CheckoutSummary' import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { DocsLink } from 'src/components/DocsLink/DocsLink'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; +import { ErrorMessage } from 'src/components/ErrorMessage'; import { LandingHeader } from 'src/components/LandingHeader'; import { Link } from 'src/components/Link'; import { Notice } from 'src/components/Notice/Notice'; @@ -481,7 +482,7 @@ const NodeBalancerCreate = () => { /> {generalError && !isRestricted && ( - {generalError} + )} {isRestricted && ( From f1c6a181193dbd28685572a32b36ff35a8b244a9 Mon Sep 17 00:00:00 2001 From: mjac0bs Date: Tue, 16 Jul 2024 13:11:56 -0700 Subject: [PATCH 07/14] Link account limit ticket in Create Firewall flow --- .../FirewallLanding/CreateFirewallDrawer.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/manager/src/features/Firewalls/FirewallLanding/CreateFirewallDrawer.tsx b/packages/manager/src/features/Firewalls/FirewallLanding/CreateFirewallDrawer.tsx index 3ae0a3244f0..1acd3005bbd 100644 --- a/packages/manager/src/features/Firewalls/FirewallLanding/CreateFirewallDrawer.tsx +++ b/packages/manager/src/features/Firewalls/FirewallLanding/CreateFirewallDrawer.tsx @@ -8,6 +8,7 @@ import { useLocation } from 'react-router-dom'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Box } from 'src/components/Box'; import { Drawer } from 'src/components/Drawer'; +import { ErrorMessage } from 'src/components/ErrorMessage'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { Link } from 'src/components/Link'; import { Notice } from 'src/components/Notice/Notice'; @@ -254,12 +255,12 @@ export const CreateFirewallDrawer = React.memo( /> ) : null} {generalError && ( - + + + )} Date: Tue, 16 Jul 2024 13:24:09 -0700 Subject: [PATCH 08/14] Link account limit ticket in Create Database flow --- .../DatabaseCreate/DatabaseCreate.tsx | 39 ++++++++++--------- 1 file changed, 21 insertions(+), 18 deletions(-) diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx index 36a598f3b4e..35127bcd302 100644 --- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx +++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx @@ -1,15 +1,4 @@ -import { - ClusterSize, - ComprehensiveReplicationType, - CreateDatabasePayload, - DatabaseClusterSizeObject, - DatabaseEngine, - DatabasePriceObject, - Engine, -} from '@linode/api-v4/lib/databases/types'; -import { APIError } from '@linode/api-v4/lib/types'; import { createDatabaseSchema } from '@linode/validation/lib/databases.schema'; -import { Theme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import { useFormik } from 'formik'; import { groupBy } from 'ramda'; @@ -25,7 +14,8 @@ import { Button } from 'src/components/Button/Button'; import { CircleProgress } from 'src/components/CircleProgress'; import { Divider } from 'src/components/Divider'; import { _SingleValue } from 'src/components/EnhancedSelect/components/SingleValue'; -import Select, { Item } from 'src/components/EnhancedSelect/Select'; +import Select from 'src/components/EnhancedSelect/Select'; +import { ErrorMessage } from 'src/components/ErrorMessage'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { FormControl } from 'src/components/FormControl'; import { FormControlLabel } from 'src/components/FormControlLabel'; @@ -55,14 +45,23 @@ import { useRegionsQuery } from 'src/queries/regions/regions'; import { formatStorageUnits } from 'src/utilities/formatStorageUnits'; import { handleAPIErrors } from 'src/utilities/formikErrorUtils'; import { getSelectedOptionFromGroupedOptions } from 'src/utilities/getSelectedOptionFromGroupedOptions'; -import { - ExtendedIP, - ipFieldPlaceholder, - validateIPs, -} from 'src/utilities/ipUtils'; +import { ipFieldPlaceholder, validateIPs } from 'src/utilities/ipUtils'; import { scrollErrorIntoViewV2 } from 'src/utilities/scrollErrorIntoViewV2'; +import type { + ClusterSize, + ComprehensiveReplicationType, + CreateDatabasePayload, + DatabaseClusterSizeObject, + DatabaseEngine, + DatabasePriceObject, + Engine, +} from '@linode/api-v4/lib/databases/types'; +import type { APIError } from '@linode/api-v4/lib/types'; +import type { Theme } from '@mui/material/styles'; +import type { Item } from 'src/components/EnhancedSelect/Select'; import type { PlanSelectionType } from 'src/features/components/PlansPanel/types'; +import type { ExtendedIP } from 'src/utilities/ipUtils'; const useStyles = makeStyles()((theme: Theme) => ({ btnCtn: { @@ -461,7 +460,11 @@ const DatabaseCreate = () => { title="Create" /> - {createError ? : null} + {createError && ( + + + + )} Name Your Cluster Date: Tue, 16 Jul 2024 14:31:40 -0700 Subject: [PATCH 09/14] Another attempt to fix the CI flake for open-support-ticket.spec.ts --- .../core/helpAndSupport/open-support-ticket.spec.ts | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/manager/cypress/e2e/core/helpAndSupport/open-support-ticket.spec.ts b/packages/manager/cypress/e2e/core/helpAndSupport/open-support-ticket.spec.ts index 94b0aba76e6..1161505d52b 100644 --- a/packages/manager/cypress/e2e/core/helpAndSupport/open-support-ticket.spec.ts +++ b/packages/manager/cypress/e2e/core/helpAndSupport/open-support-ticket.spec.ts @@ -422,14 +422,11 @@ describe('help & support', () => { .click(); cy.wait('@createLinode'); - cy.get('[data-qa-error="true"]') - .first() - .scrollIntoView() - .within(() => { - cy.contains(ACCOUNT_THING_LIMIT_ERROR); - // Navigate to the account limit ticket form. - cy.findByText('contact Support').should('be.visible').click(); - }); + cy.get('[data-qa-error="true"]').first().scrollIntoView(); + cy.contains(ACCOUNT_THING_LIMIT_ERROR); + + // Navigate to the account limit ticket form. + cy.findByText('contact Support').should('be.visible').click(); // Fill out ticket form. ui.dialog From ffb6bc38193c0ce75aca5039a14e0e7dea184f2a Mon Sep 17 00:00:00 2001 From: mjac0bs Date: Tue, 16 Jul 2024 14:34:05 -0700 Subject: [PATCH 10/14] Added changeset: Account Limit support ticket to remaining create flows --- packages/manager/.changeset/pr-10684-added-1721165645259.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-10684-added-1721165645259.md diff --git a/packages/manager/.changeset/pr-10684-added-1721165645259.md b/packages/manager/.changeset/pr-10684-added-1721165645259.md new file mode 100644 index 00000000000..2c990749fdc --- /dev/null +++ b/packages/manager/.changeset/pr-10684-added-1721165645259.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Added +--- + +Account Limit support ticket to remaining create flows ([#10684](https://github.com/linode/manager/pull/10684)) From 5343faeeb38f9ba5bf3047bb36569cf27db953a5 Mon Sep 17 00:00:00 2001 From: mjac0bs Date: Wed, 17 Jul 2024 11:53:57 -0700 Subject: [PATCH 11/14] Remove global interception of support error --- .../manager/src/components/ErrorMessage.tsx | 11 +++-- .../manager/src/components/SupportError.tsx | 49 ------------------- .../components/SupportTicketGeneralError.tsx | 12 ++--- packages/manager/src/request.tsx | 11 ----- 4 files changed, 13 insertions(+), 70 deletions(-) delete mode 100644 packages/manager/src/components/SupportError.tsx diff --git a/packages/manager/src/components/ErrorMessage.tsx b/packages/manager/src/components/ErrorMessage.tsx index 218fc9b0b7e..b0092809348 100644 --- a/packages/manager/src/components/ErrorMessage.tsx +++ b/packages/manager/src/components/ErrorMessage.tsx @@ -7,15 +7,16 @@ import type { EntityType } from 'src/features/Support/SupportTickets/SupportTick interface Props { entityType: EntityType; - message: JSX.Element | string; + message: string; } +export const supportTextRegex = /(open a support ticket|contact Support)/i; + export const ErrorMessage = (props: Props) => { const { entityType, message } = props; + const isSupportTicketError = supportTextRegex.test(message); - if (typeof message === 'string') { - return {message}; - } else { + if (isSupportTicketError) { return ( { /> ); } + + return {message}; }; diff --git a/packages/manager/src/components/SupportError.tsx b/packages/manager/src/components/SupportError.tsx deleted file mode 100644 index 4436952c82d..00000000000 --- a/packages/manager/src/components/SupportError.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { useTheme } from '@mui/material/styles'; -import * as React from 'react'; - -import { SupportLink } from 'src/components/SupportLink'; -import { Typography } from 'src/components/Typography'; -import { capitalize } from 'src/utilities/capitalize'; - -import type { APIError } from '@linode/api-v4/lib/types'; - -interface Props { - errors: APIError[]; -} - -export const SupportError = (props: Props) => { - const theme = useTheme(); - const { errors } = props; - const supportTextRegex = new RegExp( - /(open a support ticket|contact Support)/i - ); - const errorMsg = errors[0].reason.split(supportTextRegex); - - return ( - - {errorMsg.map((substring: string, idx) => { - const openTicket = substring.match(supportTextRegex); - if (openTicket) { - return ( - - ); - } else { - return substring; - } - })} - - ); -}; diff --git a/packages/manager/src/components/SupportTicketGeneralError.tsx b/packages/manager/src/components/SupportTicketGeneralError.tsx index 5d49c71fd33..6e09556dc37 100644 --- a/packages/manager/src/components/SupportTicketGeneralError.tsx +++ b/packages/manager/src/components/SupportTicketGeneralError.tsx @@ -4,28 +4,28 @@ import React from 'react'; import { SupportLink } from 'src/components/SupportLink'; import { capitalize } from 'src/utilities/capitalize'; +import { supportTextRegex } from './ErrorMessage'; import { Typography } from './Typography'; import type { EntityType } from 'src/features/Support/SupportTickets/SupportTicketDialog'; interface SupportTicketGeneralErrorProps { entityType: EntityType; - generalError: JSX.Element; + generalError: string; } +const accountLimitRegex = /(limit|limit for the number of active services) on your account/i; + export const SupportTicketGeneralError = ( props: SupportTicketGeneralErrorProps ) => { const { entityType, generalError } = props; const theme = useTheme(); - const supportTextRegex = /(open a support ticket|contact Support)/i; - const reason: string = generalError.props.errors[0].reason; - const limitError = reason.split(supportTextRegex); + const limitError = generalError.split(supportTextRegex); // Determine whether we'll need to link to a specific support ticket form based on ticketType. - const accountLimitRegex = /(limit|limit for the number of active services) on your account/i; - const isAccountLimitSupportTicket = accountLimitRegex.test(reason); + const isAccountLimitSupportTicket = accountLimitRegex.test(generalError); return ( , }, - { - condition: (e) => { - return ( - (!!e.reason.match(/.*open a support ticket/i) || - !!e.reason.match(/contact Support/i)) && - !e.field - ); - }, - replacementText: , - }, ]); // Downstream components should only have to handle ApiFieldErrors, not AxiosErrors. From 49e44201c2581a4c8da143122f7755ff57673573 Mon Sep 17 00:00:00 2001 From: mjac0bs Date: Wed, 17 Jul 2024 12:13:02 -0700 Subject: [PATCH 12/14] Fix variable name --- .../SupportTickets/SupportTicketAccountLimitFields.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/manager/src/features/Support/SupportTickets/SupportTicketAccountLimitFields.tsx b/packages/manager/src/features/Support/SupportTickets/SupportTicketAccountLimitFields.tsx index deafe87a30f..3c1f061adaa 100644 --- a/packages/manager/src/features/Support/SupportTickets/SupportTicketAccountLimitFields.tsx +++ b/packages/manager/src/features/Support/SupportTickets/SupportTicketAccountLimitFields.tsx @@ -31,7 +31,7 @@ export const SupportTicketAccountLimitFields = () => { ...formState.defaultValues, }; - const shouldShowLinodeTypeField = + const shouldShowLinodePlanField = entityType === 'linode_id' || entityType === 'lkecluster_id'; React.useEffect(() => { @@ -70,7 +70,7 @@ export const SupportTicketAccountLimitFields = () => { name="companyName" /> - {shouldShowLinodeTypeField && ( + {shouldShowLinodePlanField && ( ( Date: Fri, 19 Jul 2024 12:22:56 -0700 Subject: [PATCH 13/14] Address feedback: replace generic 'entities' with entity name --- .../SupportTicketAccountLimitFields.tsx | 6 +++++- .../SupportTicketProductSelectionFields.tsx | 11 ++++++----- .../Support/SupportTickets/ticketUtils.test.ts | 18 +++++++++++++++++- .../Support/SupportTickets/ticketUtils.ts | 18 ++++++++++++++++++ 4 files changed, 46 insertions(+), 7 deletions(-) diff --git a/packages/manager/src/features/Support/SupportTickets/SupportTicketAccountLimitFields.tsx b/packages/manager/src/features/Support/SupportTickets/SupportTicketAccountLimitFields.tsx index 3c1f061adaa..338766dd73d 100644 --- a/packages/manager/src/features/Support/SupportTickets/SupportTicketAccountLimitFields.tsx +++ b/packages/manager/src/features/Support/SupportTickets/SupportTicketAccountLimitFields.tsx @@ -7,6 +7,7 @@ import { useAccount } from 'src/queries/account/account'; import { ACCOUNT_LIMIT_FIELD_NAME_TO_LABEL_MAP } from './constants'; import { SupportTicketProductSelectionFields } from './SupportTicketProductSelectionFields'; +import { getEntityNameFromEntityType } from './ticketUtils'; import type { CustomFields } from './constants'; import type { SupportTicketFormFields } from './SupportTicketDialog'; @@ -95,10 +96,13 @@ export const SupportTicketAccountLimitFields = () => { ( { return eachTopic.value === entityType; }); - const _entityType = - entityType !== 'general' && entityType !== 'none' - ? `${ENTITY_ID_TO_NAME_MAP[entityType]}s` - : 'entities'; + const _entityType = getEntityNameFromEntityType(entityType, true); return ( // eslint-disable-next-line react/jsx-no-useless-fragment @@ -181,10 +179,13 @@ export const SupportTicketProductSelectionFields = (props: Props) => { ( { ).toEqual(expectedFormattedDescription); }); }); + +describe('getEntityNameFromEntityType', () => { + it('returns a human-readable entity name or default from the entity type', () => { + const nbEntityType = 'nodebalancer_id'; + const generalEntityType = 'general'; + + expect(getEntityNameFromEntityType(nbEntityType)).toEqual('NodeBalancer'); + expect(getEntityNameFromEntityType(nbEntityType, true)).toEqual( + 'NodeBalancers' + ); + expect(getEntityNameFromEntityType(generalEntityType)).toEqual('entity'); + expect(getEntityNameFromEntityType(generalEntityType, true)).toEqual( + 'entities' + ); + }); +}); diff --git a/packages/manager/src/features/Support/SupportTickets/ticketUtils.ts b/packages/manager/src/features/Support/SupportTickets/ticketUtils.ts index 2aa2d2a7212..919a40d5260 100644 --- a/packages/manager/src/features/Support/SupportTickets/ticketUtils.ts +++ b/packages/manager/src/features/Support/SupportTickets/ticketUtils.ts @@ -6,12 +6,14 @@ import { isFeatureEnabled } from 'src/utilities/accountCapabilities'; import { ACCOUNT_LIMIT_FIELD_NAME_TO_LABEL_MAP, + ENTITY_ID_TO_NAME_MAP, SMTP_FIELD_NAME_TO_LABEL_MAP, TICKET_TYPE_TO_CUSTOM_FIELD_KEYS_MAP, } from './constants'; import type { AllSupportTicketFormFields, + EntityType, SupportTicketFormFields, TicketType, } from './SupportTicketDialog'; @@ -111,3 +113,19 @@ export const formatDescription = ( }) .join('\n\n'); }; + +/** + * getEntityNameFromEntityType + * + * @param entityType - the entity type submitted with the support ticket; ends in '_id' + * @param isPlural - if true, pluralize the entity name; defaults to false + * @returns human readable entity name, singular or plural; falls back on generic 'entity' + */ +export const getEntityNameFromEntityType = ( + entityType: EntityType, + isPlural = false +) => { + return entityType !== 'general' && entityType !== 'none' + ? `${ENTITY_ID_TO_NAME_MAP[entityType]}${isPlural ? 's' : ''}` + : `${isPlural ? 'entities' : 'entity'}`; +}; From 0f02ac806e7ec7419591d5d175b092d03162d549 Mon Sep 17 00:00:00 2001 From: mjac0bs Date: Fri, 19 Jul 2024 12:38:09 -0700 Subject: [PATCH 14/14] Revert e1db32b; this is a pain with formatDescription --- .../SupportTicketAccountLimitFields.tsx | 6 +----- .../SupportTicketProductSelectionFields.tsx | 11 +++++------ .../Support/SupportTickets/ticketUtils.test.ts | 18 +----------------- .../Support/SupportTickets/ticketUtils.ts | 18 ------------------ 4 files changed, 7 insertions(+), 46 deletions(-) diff --git a/packages/manager/src/features/Support/SupportTickets/SupportTicketAccountLimitFields.tsx b/packages/manager/src/features/Support/SupportTickets/SupportTicketAccountLimitFields.tsx index 338766dd73d..3c1f061adaa 100644 --- a/packages/manager/src/features/Support/SupportTickets/SupportTicketAccountLimitFields.tsx +++ b/packages/manager/src/features/Support/SupportTickets/SupportTicketAccountLimitFields.tsx @@ -7,7 +7,6 @@ import { useAccount } from 'src/queries/account/account'; import { ACCOUNT_LIMIT_FIELD_NAME_TO_LABEL_MAP } from './constants'; import { SupportTicketProductSelectionFields } from './SupportTicketProductSelectionFields'; -import { getEntityNameFromEntityType } from './ticketUtils'; import type { CustomFields } from './constants'; import type { SupportTicketFormFields } from './SupportTicketDialog'; @@ -96,13 +95,10 @@ export const SupportTicketAccountLimitFields = () => { ( { return eachTopic.value === entityType; }); - const _entityType = getEntityNameFromEntityType(entityType, true); + const _entityType = + entityType !== 'general' && entityType !== 'none' + ? `${ENTITY_ID_TO_NAME_MAP[entityType]}s` + : 'entities'; return ( // eslint-disable-next-line react/jsx-no-useless-fragment @@ -179,13 +181,10 @@ export const SupportTicketProductSelectionFields = (props: Props) => { ( { ).toEqual(expectedFormattedDescription); }); }); - -describe('getEntityNameFromEntityType', () => { - it('returns a human-readable entity name or default from the entity type', () => { - const nbEntityType = 'nodebalancer_id'; - const generalEntityType = 'general'; - - expect(getEntityNameFromEntityType(nbEntityType)).toEqual('NodeBalancer'); - expect(getEntityNameFromEntityType(nbEntityType, true)).toEqual( - 'NodeBalancers' - ); - expect(getEntityNameFromEntityType(generalEntityType)).toEqual('entity'); - expect(getEntityNameFromEntityType(generalEntityType, true)).toEqual( - 'entities' - ); - }); -}); diff --git a/packages/manager/src/features/Support/SupportTickets/ticketUtils.ts b/packages/manager/src/features/Support/SupportTickets/ticketUtils.ts index 919a40d5260..2aa2d2a7212 100644 --- a/packages/manager/src/features/Support/SupportTickets/ticketUtils.ts +++ b/packages/manager/src/features/Support/SupportTickets/ticketUtils.ts @@ -6,14 +6,12 @@ import { isFeatureEnabled } from 'src/utilities/accountCapabilities'; import { ACCOUNT_LIMIT_FIELD_NAME_TO_LABEL_MAP, - ENTITY_ID_TO_NAME_MAP, SMTP_FIELD_NAME_TO_LABEL_MAP, TICKET_TYPE_TO_CUSTOM_FIELD_KEYS_MAP, } from './constants'; import type { AllSupportTicketFormFields, - EntityType, SupportTicketFormFields, TicketType, } from './SupportTicketDialog'; @@ -113,19 +111,3 @@ export const formatDescription = ( }) .join('\n\n'); }; - -/** - * getEntityNameFromEntityType - * - * @param entityType - the entity type submitted with the support ticket; ends in '_id' - * @param isPlural - if true, pluralize the entity name; defaults to false - * @returns human readable entity name, singular or plural; falls back on generic 'entity' - */ -export const getEntityNameFromEntityType = ( - entityType: EntityType, - isPlural = false -) => { - return entityType !== 'general' && entityType !== 'none' - ? `${ENTITY_ID_TO_NAME_MAP[entityType]}${isPlural ? 's' : ''}` - : `${isPlural ? 'entities' : 'entity'}`; -};