fix: Add Basic Functionality to Settings Search (#25185)

## **Description**

Adds "Basic Functionality" to the Settings search

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/25185?quickstart=1)

## **Related issues**

Fixes: #25441

## **Manual testing steps**

1. Go to Settings
2. Search the term "Basic"
3. See "Basic Functionality" and click it
4. End up on top of the Privacy tab

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

---------

Co-authored-by: Brian Bergeron <brian.e.bergeron@gmail.com>

ui/helpers/constants/settings.js

@@ -144,46 +144,54 @@ const SETTINGS_CONSTANTS = [
     iconName: IconName.Book,
   },
   // securityAndPrivacy settingsRefs[0]
+  {
+    tabMessage: (t) => t('securityAndPrivacy'),
+    sectionMessage: (t) => t('basicConfigurationLabel'),
+    descriptionMessage: (t) => t('basicConfigurationDescription'),
+    route: `${SECURITY_ROUTE}#basic-functionality-toggle`,
+    icon: 'fa fa-lock',
+  },
+  // securityAndPrivacy settingsRefs[1]
   {
     tabMessage: (t) => t('securityAndPrivacy'),
     sectionMessage: (t) => t('revealSeedWords'),
     descriptionMessage: (t) => t('revealSeedWords'),
     route: `${SECURITY_ROUTE}#reveal-secretrecovery`,
     icon: 'fa fa-lock',
   },
-  // securityAndPrivacy settingsRefs[1]
+  // securityAndPrivacy settingsRefs[2]
   {
     tabMessage: (t) => t('securityAndPrivacy'),
     sectionMessage: (t) => t('showIncomingTransactions'),
     descriptionMessage: (t) => t('showIncomingTransactionsDescription'),
     route: `${SECURITY_ROUTE}#incoming-transaction`,
     icon: 'fa fa-lock',
   },
-  // securityAndPrivacy settingsRefs[2]
+  // securityAndPrivacy settingsRefs[3]
   {
     tabMessage: (t) => t('securityAndPrivacy'),
     sectionMessage: (t) => t('usePhishingDetection'),
     descriptionMessage: (t) => t('usePhishingDetectionDescription'),
     route: `${SECURITY_ROUTE}#phishing-detection`,
     icon: 'fa fa-lock',
   },
-  // securityAndPrivacy settingsRefs[3]
+  // securityAndPrivacy settingsRefs[4]
   {
     tabMessage: (t) => t('securityAndPrivacy'),
     sectionMessage: (t) => t('use4ByteResolution'),
     descriptionMessage: (t) => t('use4ByteResolutionDescription'),
     route: `${SECURITY_ROUTE}#decode-smart-contracts`,
     icon: 'fa fa-lock',
   },
-  // securityAndPrivacy settingsRefs[4]
+  // securityAndPrivacy settingsRefs[5]
   {
     tabMessage: (t) => t('securityAndPrivacy'),
     sectionMessage: (t) => t('participateInMetaMetrics'),
     descriptionMessage: (t) => t('participateInMetaMetricsDescription'),
     route: `${SECURITY_ROUTE}#metametrics`,
     icon: 'fa fa-lock',
   },
-  // securityAndPrivacy settingsRefs[5]
+  // securityAndPrivacy settingsRefs[6]
   {
     tabMessage: (t) => t('securityAndPrivacy'),
     sectionMessage: (t) => t('networkProvider'),
@@ -192,23 +200,23 @@ const SETTINGS_CONSTANTS = [
     route: `${SECURITY_ROUTE}#network-provider`,
     icon: 'fa fa-lock',
   },
-  // securityAndPrivacy settingsRefs[6]
+  // securityAndPrivacy settingsRefs[7]
   {
     tabMessage: (t) => t('securityAndPrivacy'),
     sectionMessage: (t) => t('ipfsGateway'),
     descriptionMessage: (t) => t('ipfsGatewayDescription'),
     route: `${SECURITY_ROUTE}#add-custom-ipfs-gateway`,
     icon: 'fa fa-lock',
   },
-  // securityAndPrivacy settingsRefs[7]
+  // securityAndPrivacy settingsRefs[8]
   {
     tabMessage: (t) => t('securityAndPrivacy'),
     sectionMessage: (t) => t('autoDetectTokens'),
     descriptionMessage: (t) => t('autoDetectTokensDescription'),
     route: `${SECURITY_ROUTE}#auto-detect-tokens`,
     icon: 'fa fa-lock',
   },
-  // securityAndPrivacy settingsRefs[8]
+  // securityAndPrivacy settingsRefs[9]
   {
     tabMessage: (t) => t('securityAndPrivacy'),
     sectionMessage: (t) => t('useMultiAccountBalanceChecker'),
@@ -217,63 +225,63 @@ const SETTINGS_CONSTANTS = [
     route: `${SECURITY_ROUTE}#batch-account-balance-requests`,
     icon: 'fa fa-lock',
   },
-  // securityAndPrivacy settingsRefs[9]
+  // securityAndPrivacy settingsRefs[10]
   {
     tabMessage: (t) => t('securityAndPrivacy'),
     sectionMessage: (t) => t('currencyRateCheckToggle'),
     descriptionMessage: (t) => t('currencyRateCheckToggleDescription'),
     route: `${SECURITY_ROUTE}#price-checker`,
     icon: 'fa fa-lock',
   },
-  // securityAndPrivacy settingsRefs[10]
+  // securityAndPrivacy settingsRefs[11]
   {
     tabMessage: (t) => t('securityAndPrivacy'),
     sectionMessage: (t) => t('ensDomainsSettingTitle'),
     descriptionMessage: (t) => t('ensDomainsSettingDescriptionIntroduction'),
     route: `${SECURITY_ROUTE}#ens-domains`,
     icon: 'fa fa-lock',
   },
-  // securityAndPrivacy settingsRefs[11]
+  // securityAndPrivacy settingsRefs[12]
   {
     tabMessage: (t) => t('securityAndPrivacy'),
     sectionMessage: (t) => t('displayNftMedia'),
     descriptionMessage: (t) => t('displayNftMediaDescription'),
     route: `${SECURITY_ROUTE}#display-nft-media`,
     icon: 'fa fa-lock',
   },
-  // securityAndPrivacy settingsRefs[12]
+  // securityAndPrivacy settingsRefs[13]
   {
     tabMessage: (t) => t('securityAndPrivacy'),
     sectionMessage: (t) => t('useNftDetection'),
     descriptionMessage: (t) => t('useNftDetectionDescriptionText'),
     route: `${SECURITY_ROUTE}#autodetect-nfts`,
     icon: 'fa fa-lock',
   },
-  // securityAndPrivacy settingsRefs[13]
+  // securityAndPrivacy settingsRefs[14]
   {
     tabMessage: (t) => t('securityAndPrivacy'),
     sectionMessage: (t) => t('useSafeChainsListValidation'),
     descriptionMessage: (t) => t('useSafeChainsListValidationDescription'),
     route: `${SECURITY_ROUTE}#network-details-check`,
     icon: 'fa fa-lock',
   },
-  // securityAndPrivacy settingsRefs[14]
+  // securityAndPrivacy settingsRefs[15]
   {
     tabMessage: (t) => t('securityAndPrivacy'),
     sectionMessage: (t) => t('externalNameSourcesSetting'),
     descriptionMessage: (t) => t('externalNameSourcesSettingDescription'),
     route: `${SECURITY_ROUTE}#proposed-nicknames`,
     icon: 'fa fa-lock',
   },
-  // securityAndPrivacy settingsRefs[15]
+  // securityAndPrivacy settingsRefs[16]
   {
     tabMessage: (t) => t('securityAndPrivacy'),
     sectionMessage: (t) => t('securityAlerts'),
     descriptionMessage: (t) => t('securityAlertsDescription'),
     route: `${SECURITY_ROUTE}#security-alerts`,
     icon: 'fa fa-lock',
   },
-  // securityAndPrivacy settingsRefs[16]
+  // securityAndPrivacy settingsRefs[17]
   {
     tabMessage: (t) => t('securityAndPrivacy'),
     sectionMessage: (t) => t('blockaid'),

ui/helpers/utils/settings-search.test.js

@@ -170,7 +170,7 @@ describe('Settings Search Utils', () => {
     it('returns "Security & privacy" section count', () => {
       expect(
         getNumberOfSettingRoutesInTab(t, t('securityAndPrivacy')),
-      ).toStrictEqual(18);
+      ).toStrictEqual(19);
     });
 
     it('returns "Alerts" section count', () => {

ui/pages/settings/security-tab/security-tab.component.js

@@ -161,7 +161,7 @@ export default class SecurityTab extends PureComponent {
     return (
       <>
         <div
-          ref={this.settingsRefs[0]}
+          ref={this.settingsRefs[1]}
           className="settings-page__security-tab-sub-header"
         >
           {t('secretRecoveryPhrase')}
@@ -211,14 +211,14 @@ export default class SecurityTab extends PureComponent {
 
     return (
       <>
-        <div ref={this.settingsRefs[15]}>
+        <div ref={this.settingsRefs[16]}>
           <span className="settings-page__security-tab-sub-header">
             {t('securityAlerts')}
           </span>
         </div>
         <div className="settings-page__content-padded">
           <Box
-            ref={this.settingsRefs[2]}
+            ref={this.settingsRefs[3]}
             className="settings-page__content-row"
             display={Display.Flex}
             flexDirection={FlexDirection.Row}
@@ -265,7 +265,7 @@ export default class SecurityTab extends PureComponent {
 
     return (
       <IncomingTransactionToggle
-        wrapperRef={this.settingsRefs[1]}
+        wrapperRef={this.settingsRefs[2]}
         allNetworks={allNetworks}
         setIncomingTransactionsPreferences={setIncomingTransactionsPreferences}
         incomingTransactionsPreferences={incomingTransactionsPreferences}
@@ -279,7 +279,7 @@ export default class SecurityTab extends PureComponent {
 
     return (
       <Box
-        ref={this.settingsRefs[2]}
+        ref={this.settingsRefs[3]}
         className="settings-page__content-row"
         display={Display.Flex}
         flexDirection={FlexDirection.Row}
@@ -313,7 +313,7 @@ export default class SecurityTab extends PureComponent {
     const { use4ByteResolution, setUse4ByteResolution } = this.props;
     return (
       <Box
-        ref={this.settingsRefs[3]}
+        ref={this.settingsRefs[4]}
         className="settings-page__content-row"
         display={Display.Flex}
         flexDirection={FlexDirection.Row}
@@ -454,7 +454,7 @@ export default class SecurityTab extends PureComponent {
 
     return (
       <Box
-        ref={this.settingsRefs[13]}
+        ref={this.settingsRefs[14]}
         className="settings-page__content-row"
         data-testid="setting-safe-chains-validation"
         display={Display.Flex}
@@ -533,7 +533,7 @@ export default class SecurityTab extends PureComponent {
 
     return (
       <Box
-        ref={this.settingsRefs[6]}
+        ref={this.settingsRefs[7]}
         className="settings-page__content-row"
         data-testid="setting-ipfs-gateway"
         display={Display.Flex}
@@ -598,7 +598,7 @@ export default class SecurityTab extends PureComponent {
           flexDirection={FlexDirection.Row}
           justifyContent={JustifyContent.spaceBetween}
           gap={4}
-          ref={this.settingsRefs[10]}
+          ref={this.settingsRefs[11]}
           marginTop={3}
           id="ens-domains"
         >
@@ -660,7 +660,7 @@ export default class SecurityTab extends PureComponent {
 
     return (
       <Box
-        ref={this.settingsRefs[7]}
+        ref={this.settingsRefs[8]}
         className="settings-page__content-row"
         data-testid="advanced-setting-gas-fee-estimation"
         display={Display.Flex}
@@ -715,7 +715,7 @@ export default class SecurityTab extends PureComponent {
 
     return (
       <Box
-        ref={this.settingsRefs[8]}
+        ref={this.settingsRefs[9]}
         className="settings-page__content-row"
         display={Display.Flex}
         flexDirection={FlexDirection.Row}
@@ -757,7 +757,7 @@ export default class SecurityTab extends PureComponent {
 
     return (
       <Box
-        ref={this.settingsRefs[9]}
+        ref={this.settingsRefs[10]}
         className="settings-page__content-row"
         display={Display.Flex}
         flexDirection={FlexDirection.Row}
@@ -822,7 +822,7 @@ export default class SecurityTab extends PureComponent {
 
     return (
       <Box
-        ref={this.settingsRefs[11]}
+        ref={this.settingsRefs[12]}
         className="settings-page__content-row"
         display={Display.Flex}
         flexDirection={FlexDirection.Row}
@@ -875,7 +875,7 @@ export default class SecurityTab extends PureComponent {
     } = this.props;
     return (
       <Box
-        ref={this.settingsRefs[12]}
+        ref={this.settingsRefs[13]}
         className="settings-page__content-row"
         display={Display.Flex}
         flexDirection={FlexDirection.Row}
@@ -923,7 +923,7 @@ export default class SecurityTab extends PureComponent {
 
     return (
       <Box
-        ref={this.settingsRefs[14]}
+        ref={this.settingsRefs[15]}
         className="settings-page__content-row"
         display={Display.Flex}
         flexDirection={FlexDirection.Row}
@@ -1025,7 +1025,7 @@ export default class SecurityTab extends PureComponent {
 
     return (
       <Box
-        ref={this.settingsRefs[3]}
+        ref={this.settingsRefs[0]}
         className="settings-page__content-row"
         display={Display.Flex}
         flexDirection={FlexDirection.Row}
@@ -1180,7 +1180,7 @@ export default class SecurityTab extends PureComponent {
 
         <span
           className="settings-page__security-tab-sub-header"
-          ref={this.settingsRefs[5]}
+          ref={this.settingsRefs[6]}
         >
           {this.context.t('networkProvider')}
         </span>