feat: [UIE-8269], [UIE-8290] - refactoring

packages/manager/src/features/Databases/DatabaseDetail/AddAccessControlDrawer.tsx

@@ -7,6 +7,12 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Drawer } from 'src/components/Drawer';
 import { Link } from 'src/components/Link';
 import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput';
+import {
+  ACCESS_CONTROLS_DRAWER_TEXT,
+  ACCESS_CONTROLS_DRAWER_TEXT_LEGACY,
+  LEARN_MORE_LINK,
+  LEARN_MORE_LINK_LEGACY,
+} from 'src/features/Databases/constants';
 import { isDefaultDatabase } from 'src/features/Databases/utilities';
 import { enforceIPMasks } from 'src/features/Firewalls/FirewallDetail/Rules/FirewallRuleDrawer.utils';
 import { useDatabaseMutation } from 'src/queries/databases/databases';
@@ -171,9 +177,7 @@ const AddAccessControlDrawer = (props: CombinedProps) => {
     }
   }, [open, resetForm]);
 
-  const learnMoreLink = isDefaultDB
-    ? 'https://techdocs.akamai.com/cloud-computing/docs/aiven-manage-database#ipv6-support'
-    : 'https://techdocs.akamai.com/cloud-computing/docs/manage-access-controls';
+  const learnMoreLink = isDefaultDB ? LEARN_MORE_LINK : LEARN_MORE_LINK_LEGACY;
   return (
     <Drawer onClose={onClose} open={open} title="Manage Access">
       <React.Fragment>
@@ -189,9 +193,9 @@ const AddAccessControlDrawer = (props: CombinedProps) => {
           : null}
         <Typography className={classes.instructions} variant="body1">
           {isDefaultDB
-            ? 'Add, edit, or remove IPv6 (recommended) or IPv4 addresses or ranges that should be authorized to access your cluster.'
-            : 'Add, edit, or remove IPv4 addresses and ranges that should be authorized to access your cluster.'}{' '}
-          <Link to={learnMoreLink}>Learn more</Link>
+            ? ACCESS_CONTROLS_DRAWER_TEXT
+            : ACCESS_CONTROLS_DRAWER_TEXT_LEGACY}{' '}
+          <Link to={learnMoreLink}>Learn more</Link>.
         </Typography>
         <form onSubmit={handleSubmit}>
           <MultipleIPInput

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.tsx

@@ -1,6 +1,15 @@
 import { Divider, Paper, Stack, Typography } from '@linode/ui';
 import * as React from 'react';
 
+import {
+  ACCESS_CONTROLS_IN_SETTINGS_TEXT,
+  ACCESS_CONTROLS_IN_SETTINGS_TEXT_LEGACY,
+  DELETE_CLUSTER_TEXT,
+  DELETE_CLUSTER_TEXT_LEGACY,
+  RESET_ROOT_PASSWORD_TEXT,
+  RESET_ROOT_PASSWORD_TEXT_LEGACY,
+  SUSPEND_CLUSTER_TEXT,
+} from 'src/features/Databases/constants';
 import { DatabaseSettingsReviewUpdatesDialog } from 'src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsReviewUpdatesDialog';
 import { DatabaseSettingsUpgradeVersionDialog } from 'src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsUpgradeVersionDialog';
 import {
@@ -32,21 +41,21 @@ export const DatabaseSettings: React.FC<Props> = (props) => {
 
   const accessControlCopy = (
     <Typography>
-      {isDefaultDB
-        ? 'Add or remove IPv6 (recommended) or IPv4 addresses or ranges that should be authorized to access your cluster.'
-        : 'Add or remove IPv4 addresses or ranges that should be authorized to access your cluster.'}
+      {!isDefaultDB
+        ? ACCESS_CONTROLS_IN_SETTINGS_TEXT_LEGACY
+        : ACCESS_CONTROLS_IN_SETTINGS_TEXT}
     </Typography>
   );
 
-  const suspendClusterCopy = `Suspend the cluster if you don't use it temporarily to prevent being billed for it.`;
+  const suspendClusterCopy = SUSPEND_CLUSTER_TEXT;
 
   const resetRootPasswordCopy = !isDefaultDB
-    ? 'Resetting your root password will automatically generate a new password. You can view the updated password on your database cluster summary page. '
-    : 'Reset your root password if someone should no longer have access to the root user or if you believe your password may have been compromised. This will automatically generate a new password that you’ll be able to see on your database cluster summary page.';
+    ? RESET_ROOT_PASSWORD_TEXT_LEGACY
+    : RESET_ROOT_PASSWORD_TEXT;
 
   const deleteClusterCopy = !isDefaultDB
-    ? 'Deleting a database cluster is permanent and cannot be undone.'
-    : 'Permanently remove an unused database cluster.';
+    ? DELETE_CLUSTER_TEXT_LEGACY
+    : DELETE_CLUSTER_TEXT;
 
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = React.useState(false);
   const [

packages/manager/src/features/Databases/constants.ts

@@ -0,0 +1,30 @@
+// Various constants for the Databases
+
+// Copy
+export const ACCESS_CONTROLS_DRAWER_TEXT =
+  'Add, edit, or remove IPv6 (recommended) or IPv4 addresses or ranges that should be authorized to access your cluster.';
+export const ACCESS_CONTROLS_DRAWER_TEXT_LEGACY =
+  'Add, edit, or remove IPv4 addresses and ranges that should be authorized to access your cluster.';
+
+export const ACCESS_CONTROLS_IN_SETTINGS_TEXT =
+  'Add or remove IPv6 (recommended) or IPv4 addresses or ranges that should be authorized to access your cluster.';
+export const ACCESS_CONTROLS_IN_SETTINGS_TEXT_LEGACY =
+  'Add or remove IPv4 addresses or ranges that should be authorized to access your cluster.';
+
+export const SUSPEND_CLUSTER_TEXT = `Suspend the cluster if you don't use it temporarily to prevent being billed for it.`;
+
+export const RESET_ROOT_PASSWORD_TEXT =
+  'Reset your root password if someone should no longer have access to the root user or if you believe your password may have been compromised. This will automatically generate a new password that you’ll be able to see on your database cluster summary page.';
+export const RESET_ROOT_PASSWORD_TEXT_LEGACY =
+  'Resetting your root password will automatically generate a new password. You can view the updated password on your database cluster summary page. ';
+
+export const DELETE_CLUSTER_TEXT =
+  'Permanently remove an unused database cluster.';
+export const DELETE_CLUSTER_TEXT_LEGACY =
+  'Deleting a database cluster is permanent and cannot be undone.';
+
+// Links
+export const LEARN_MORE_LINK_LEGACY =
+  'https://techdocs.akamai.com/cloud-computing/docs/manage-access-controls';
+export const LEARN_MORE_LINK =
+  'https://techdocs.akamai.com/cloud-computing/docs/aiven-manage-database#ipv6-support';