refactor: [M3-8785] - Remove feature flag, tracking events used for A/B testing in API CLI tools Modal

packages/manager/.changeset/pr-11156-tech-stories-1729784052355.md

@@ -0,0 +1,5 @@
+---
+'@linode/manager': Tech Stories
+---
+
+Remove the feature flag and tracking events used for A/B testing in the API CLI Tools modal, and update the DX Tools modal button copy to 'View Code Snippets ([#11156](https://github.com/linode/manager/pull/11156))

packages/manager/cypress/e2e/core/linodes/create-linode-view-code-snippet.spec.ts

@@ -6,18 +6,12 @@ import { ui } from 'support/ui';
 
 import { randomLabel, randomString } from 'support/util/random';
 import { linodeCreatePage } from 'support/ui/pages';
-import { mockAppendFeatureFlags } from 'support/intercepts/feature-flags';
 
 describe('Create Linode flow to validate code snippet modal', () => {
   /*
    * tests for create Linode flow to validate code snippet modal.
    */
-  // TODO Delete these mocks once `testdxtoolabexperiment` feature flag is retired.
-  beforeEach(() => {
-    mockAppendFeatureFlags({
-      testdxtoolabexperiment: 'Create using command line',
-    });
-  });
+
   it(`view code snippets in create linode flow`, () => {
     const linodeLabel = randomLabel();
     const rootPass = randomString(32);
@@ -33,7 +27,7 @@ describe('Create Linode flow to validate code snippet modal', () => {
 
     // View Code Snippets and confirm it's provisioned as expected.
     ui.button
-      .findByTitle('Create using command line')
+      .findByTitle('View Code Snippets')
       .should('be.visible')
       .should('be.enabled')
       .click();

packages/manager/src/components/CodeBlock/CodeBlock.tsx

@@ -1,8 +1,5 @@
-import { useLDClient } from 'launchdarkly-react-client-sdk';
 import React from 'react';
 
-import { useFlags } from 'src/hooks/useFlags';
-import { useIsAkamaiAccount } from 'src/hooks/useIsAkamaiAccount';
 import { sendApiAwarenessClickEvent } from 'src/utilities/analytics/customEventAnalytics';
 
 import {
@@ -22,32 +19,13 @@ export interface CodeBlockProps {
   handleCopyIconClick?: () => void;
   /** The command language */
   language: SupportedLanguage;
-  ldTrackingKey?: string;
 }
 
 export const CodeBlock = (props: CodeBlockProps) => {
-  const flags = useFlags();
-  const ldClient = useLDClient();
-  const { isAkamaiAccount: isInternalAccount } = useIsAkamaiAccount();
-
-  const {
-    command,
-    commandType,
-    handleCopyIconClick,
-    language,
-    ldTrackingKey,
-  } = props;
-
-  const apicliButtonCopy = flags?.testdxtoolabexperiment;
+  const { command, commandType, handleCopyIconClick, language } = props;
 
   const _handleCopyIconClick = () => {
     sendApiAwarenessClickEvent('Copy Icon', commandType);
-    if (ldTrackingKey && !isInternalAccount) {
-      ldClient?.track(ldTrackingKey, {
-        variation: apicliButtonCopy,
-      });
-      ldClient?.flush();
-    }
   };
 
   return (

packages/manager/src/featureFlags.ts

@@ -124,7 +124,6 @@ export interface Flags {
   taxCollectionBanner: TaxCollectionBanner;
   taxId: BaseFeatureFlag;
   taxes: Taxes;
-  testdxtoolabexperiment: string;
   tpaProviders: Provider[];
 }
 

packages/manager/src/features/Linodes/LinodeCreate/Actions.test.tsx

@@ -16,12 +16,12 @@ describe('Actions', () => {
     expect(button).toHaveAttribute('type', 'submit');
     expect(button).toBeEnabled();
   });
-  it("should render a 'Create using command line' button", () => {
+  it("should render a ' View Code Snippets' button", () => {
     const { getByText } = renderWithThemeAndHookFormContext({
       component: <Actions />,
     });
 
-    const button = getByText('Create Using Command Line').closest('button');
+    const button = getByText('View Code Snippets').closest('button');
 
     expect(button).toBeVisible();
     expect(button).toBeEnabled();

packages/manager/src/features/Linodes/LinodeCreate/Actions.tsx

@@ -1,12 +1,8 @@
-import { useLDClient } from 'launchdarkly-react-client-sdk';
 import React, { useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 
 import { Box } from 'src/components/Box';
 import { Button } from 'src/components/Button/Button';
-import { LD_DX_TOOLS_METRICS_KEYS } from 'src/constants';
-import { useFlags } from 'src/hooks/useFlags';
-import { useIsAkamaiAccount } from 'src/hooks/useIsAkamaiAccount';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 import { sendApiAwarenessClickEvent } from 'src/utilities/analytics/customEventAnalytics';
 import { sendLinodeCreateFormInputEvent } from 'src/utilities/analytics/formEventAnalytics';
@@ -21,15 +17,10 @@ import {
 import type { LinodeCreateFormValues } from './utilities';
 
 export const Actions = () => {
-  const flags = useFlags();
-  const ldClient = useLDClient();
   const { params } = useLinodeCreateQueryParams();
-  const { isAkamaiAccount: isInternalAccount } = useIsAkamaiAccount();
 
   const [isAPIAwarenessModalOpen, setIsAPIAwarenessModalOpen] = useState(false);
 
-  const apicliButtonCopy = flags?.testdxtoolabexperiment;
-
   const {
     formState,
     getValues,
@@ -44,22 +35,15 @@ export const Actions = () => {
     isLinodeCreateRestricted || 'firewallOverride' in formState.errors;
 
   const onOpenAPIAwareness = async () => {
-    sendApiAwarenessClickEvent('Button', 'Create Using Command Line');
+    sendApiAwarenessClickEvent('Button', 'View Code Snippets');
     sendLinodeCreateFormInputEvent({
       createType: params.type ?? 'OS',
       interaction: 'click',
-      label: apicliButtonCopy ?? 'Create Using Command Line',
+      label: 'View Code Snippets',
     });
     if (await trigger()) {
       // If validation is successful, we open the dialog.
       setIsAPIAwarenessModalOpen(true);
-      if (!isInternalAccount) {
-        ldClient?.track(LD_DX_TOOLS_METRICS_KEYS.OPEN_MODAL, {
-          variation: apicliButtonCopy,
-        });
-      }
-
-      ldClient?.flush();
     } else {
       scrollErrorIntoView(undefined, { behavior: 'smooth' });
     }
@@ -68,7 +52,7 @@ export const Actions = () => {
   return (
     <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
       <Button buttonType="outlined" onClick={onOpenAPIAwareness}>
-        {apicliButtonCopy ?? 'Create Using Command Line'}
+        View Code Snippets
       </Button>
       <Button
         buttonType="primary"

packages/manager/src/features/Linodes/LinodeCreate/ApiAwarenessModal/AnsibleIntegrationResources.tsx

@@ -1,11 +1,7 @@
-import { useLDClient } from 'launchdarkly-react-client-sdk';
 import React from 'react';
 
 import { ResourceLinks } from 'src/components/EmptyLandingPageResources/ResourcesLinks';
 import { Typography } from 'src/components/Typography';
-import { LD_DX_TOOLS_METRICS_KEYS } from 'src/constants';
-import { useFlags } from 'src/hooks/useFlags';
-import { useIsAkamaiAccount } from 'src/hooks/useIsAkamaiAccount';
 
 import type { ResourcesLinks } from 'src/components/EmptyLandingPageResources/ResourcesLinksTypes';
 
@@ -41,24 +37,6 @@ export const gettingStartedGuides: ResourcesLinks['links'] = [
 ];
 
 export const AnsibleIntegrationResources = () => {
-  const ldClient = useLDClient();
-  const flags = useFlags();
-  const { isAkamaiAccount: isInternalAccount } = useIsAkamaiAccount();
-
-  const apicliButtonCopy = flags?.testdxtoolabexperiment;
-
-  const handleClick = () => {
-    if (!isInternalAccount) {
-      ldClient?.track(
-        LD_DX_TOOLS_METRICS_KEYS.INTEGRATION_ANSIBLE_RESOURCE_LINKS,
-        {
-          variation: apicliButtonCopy,
-        }
-      );
-    }
-
-    ldClient?.flush();
-  };
   return (
     <>
       <Typography sx={(theme) => ({ mt: theme.spacing(2) })} variant="h3">
@@ -67,7 +45,6 @@ export const AnsibleIntegrationResources = () => {
       <ResourceLinks
         linkAnalyticsEvent={linkAnalyticsEvent}
         links={gettingStartedGuides}
-        onClick={handleClick}
       />
     </>
   );

packages/manager/src/features/Linodes/LinodeCreate/ApiAwarenessModal/ApiAwarenessModal.tsx

@@ -1,5 +1,4 @@
 import { styled } from '@mui/material/styles';
-import { useLDClient } from 'launchdarkly-react-client-sdk';
 import React, { useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 
@@ -11,9 +10,6 @@ import { TabList } from 'src/components/Tabs/TabList';
 import { TabPanels } from 'src/components/Tabs/TabPanels';
 import { Tabs } from 'src/components/Tabs/Tabs';
 import { Typography } from 'src/components/Typography';
-import { LD_DX_TOOLS_METRICS_KEYS } from 'src/constants';
-import { useFlags } from 'src/hooks/useFlags';
-import { useIsAkamaiAccount } from 'src/hooks/useIsAkamaiAccount';
 import { useInProgressEvents } from 'src/queries/events/events';
 import { sendApiAwarenessClickEvent } from 'src/utilities/analytics/customEventAnalytics';
 
@@ -56,11 +52,8 @@ export const tabs = [
 export const ApiAwarenessModal = (props: ApiAwarenessModalProps) => {
   const { isOpen, onClose, payLoad } = props;
 
-  const flags = useFlags();
-  const ldClient = useLDClient();
   const history = useHistory();
   const { data: events } = useInProgressEvents();
-  const { isAkamaiAccount: isInternalAccount } = useIsAkamaiAccount();
 
   const linodeCreationEvent = events?.find(
     (event) =>
@@ -71,33 +64,10 @@ export const ApiAwarenessModal = (props: ApiAwarenessModalProps) => {
 
   const isLinodeCreated = linodeCreationEvent !== undefined;
 
-  const apicliButtonCopy = flags?.testdxtoolabexperiment;
-
   const handleTabChange = (index: number) => {
-    const { title, type } = tabs[index];
+    const { type } = tabs[index];
 
     sendApiAwarenessClickEvent(`${type} Tab`, type);
-
-    const trackingKey =
-      type === 'INTEGRATIONS' && title !== 'SDKs'
-        ? LD_DX_TOOLS_METRICS_KEYS.INTEGRATION_TAB_SELECTION
-        : type === 'API'
-        ? LD_DX_TOOLS_METRICS_KEYS.CURL_TAB_SELECTION
-        : title === 'SDKs'
-        ? LD_DX_TOOLS_METRICS_KEYS.SDK_TAB_SELECTION
-        : title === 'Linode CLI'
-        ? LD_DX_TOOLS_METRICS_KEYS.LINODE_CLI_TAB_SELECTION
-        : undefined;
-
-    if (trackingKey) {
-      if (!isInternalAccount) {
-        ldClient?.track(trackingKey, {
-          variation: apicliButtonCopy,
-        });
-      }
-
-      ldClient?.flush();
-    }
   };
 
   useEffect(() => {

packages/manager/src/features/Linodes/LinodeCreate/ApiAwarenessModal/CurlTabPanel.tsx

@@ -1,14 +1,10 @@
 import { useTheme } from '@mui/material/styles';
-import { useLDClient } from 'launchdarkly-react-client-sdk';
 import React, { useMemo } from 'react';
 
 import { CodeBlock } from 'src/components/CodeBlock/CodeBlock';
 import { Link } from 'src/components/Link';
 import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel';
 import { Typography } from 'src/components/Typography';
-import { LD_DX_TOOLS_METRICS_KEYS } from 'src/constants';
-import { useFlags } from 'src/hooks/useFlags';
-import { useIsAkamaiAccount } from 'src/hooks/useIsAkamaiAccount';
 import { sendApiAwarenessClickEvent } from 'src/utilities/analytics/customEventAnalytics';
 import { generateCurlCommand } from 'src/utilities/codesnippets/generate-cURL';
 
@@ -21,29 +17,20 @@ export interface CurlTabPanelProps {
 }
 
 export const CurlTabPanel = ({ index, payLoad, title }: CurlTabPanelProps) => {
-  const flags = useFlags();
-  const ldClient = useLDClient();
   const theme = useTheme();
-  const { isAkamaiAccount: isInternalAccount } = useIsAkamaiAccount();
+
   const curlCommand = useMemo(
     () => generateCurlCommand(payLoad, '/linode/instances'),
     [payLoad]
   );
-  const apicliButtonCopy = flags?.testdxtoolabexperiment;
+
   return (
     <SafeTabPanel index={index}>
       <Typography sx={{ marginTop: theme.spacing(2) }} variant="body1">
         Most Linode API requests need to be authenticated with a valid{' '}
         <Link
           onClick={() => {
             sendApiAwarenessClickEvent('link', 'personal access token');
-            if (!isInternalAccount) {
-              ldClient?.track(LD_DX_TOOLS_METRICS_KEYS.CURL_RESOURCE_LINKS, {
-                variation: apicliButtonCopy,
-              });
-            }
-
-            ldClient?.flush();
           }}
           to="/profile/tokens"
         >
@@ -57,13 +44,6 @@ export const CurlTabPanel = ({ index, payLoad, title }: CurlTabPanelProps) => {
               'link',
               'Get Started with the Linode API'
             );
-            if (!isInternalAccount) {
-              ldClient?.track(LD_DX_TOOLS_METRICS_KEYS.CURL_RESOURCE_LINKS, {
-                variation: apicliButtonCopy,
-              });
-            }
-
-            ldClient?.flush();
           }}
           to="https://techdocs.akamai.com/linode-api/reference/get-started"
         >
@@ -73,26 +53,14 @@ export const CurlTabPanel = ({ index, payLoad, title }: CurlTabPanelProps) => {
         <Link
           onClick={() => {
             sendApiAwarenessClickEvent('link', 'Linode API Guides');
-            if (!isInternalAccount) {
-              ldClient?.track(LD_DX_TOOLS_METRICS_KEYS.CURL_RESOURCE_LINKS, {
-                variation: apicliButtonCopy,
-              });
-            }
-
-            ldClient?.flush();
           }}
           to="https://techdocs.akamai.com/linode-api/reference/api"
         >
           Linode API Guides
         </Link>
         .
       </Typography>
-      <CodeBlock
-        command={curlCommand}
-        commandType={title}
-        language={'bash'}
-        ldTrackingKey={LD_DX_TOOLS_METRICS_KEYS.CURL_CODE_SNIPPET}
-      />
+      <CodeBlock command={curlCommand} commandType={title} language={'bash'} />
     </SafeTabPanel>
   );
 };