refactor: [M3-7750] - Update launchdarkly-react-client-sdk to latest (

#10165) * update and refactor * use exact version * Added changeset: Update `launchdarkly-react-client-sdk` * fix eslint warnings --------- Co-authored-by: Banks Nussman <banks@nussman.us>
linode · Feb 9, 2024 · 586a24e · 586a24e
1 parent a53f63b
commit 586a24e
Show file tree

Hide file tree

Showing 12 changed files with 91 additions and 130 deletions.
diff --git a/packages/manager/.changeset/pr-10165-tech-stories-1707412665889.md b/packages/manager/.changeset/pr-10165-tech-stories-1707412665889.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Update `launchdarkly-react-client-sdk` ([#10165](https://github.com/linode/manager/pull/10165))
diff --git a/packages/manager/package.json b/packages/manager/package.json
@@ -39,7 +39,7 @@
     "ipaddr.js": "^1.9.1",
     "jspdf": "^2.3.1",
     "jspdf-autotable": "^3.5.14",
-    "launchdarkly-react-client-sdk": "^3.0.6",
+    "launchdarkly-react-client-sdk": "3.0.10",
     "libphonenumber-js": "^1.10.6",
     "lodash": "^4.17.21",
     "logic-query-parser": "^0.0.5",

diff --git a/packages/manager/src/App.tsx b/packages/manager/src/App.tsx
@@ -6,7 +6,6 @@ import {
   DocumentTitleSegment,
   withDocumentTitleProvider,
 } from 'src/components/DocumentTitle';
-import withFeatureFlagConsumer from 'src/containers/withFeatureFlagConsumer.container';
 import withFeatureFlagProvider from 'src/containers/withFeatureFlagProvider.container';
 import TheApplicationIsOnFire from 'src/features/TheApplicationIsOnFire';
 
@@ -23,37 +22,35 @@ import { useSetupFeatureFlags } from './useSetupFeatureFlags';
 export const App = () => <BaseApp />;
 
 const BaseApp = withDocumentTitleProvider(
-  withFeatureFlagProvider(
-    withFeatureFlagConsumer(() => {
-      const { isLoading } = useInitialRequests();
-
-      const { areFeatureFlagsLoading } = useSetupFeatureFlags();
-
-      if (isLoading || areFeatureFlagsLoading) {
-        return <SplashScreen />;
-      }
-
-      return (
-        <ErrorBoundary fallback={<TheApplicationIsOnFire />}>
-          {/** Accessibility helper */}
-          <a className="skip-link" href="#main-content">
-            Skip to main content
-          </a>
-          <div hidden>
-            <span id="new-window">Opens in a new window</span>
-            <span id="external-site">Opens an external site</span>
-            <span id="external-site-new-window">
-              Opens an external site in a new window
-            </span>
-          </div>
-          <GoTo />
-          <DocumentTitleSegment segment="Akamai Cloud Manager" />
-          <MainContent />
-          <GlobalListeners />
-        </ErrorBoundary>
-      );
-    })
-  )
+  withFeatureFlagProvider(() => {
+    const { isLoading } = useInitialRequests();
+
+    const { areFeatureFlagsLoading } = useSetupFeatureFlags();
+
+    if (isLoading || areFeatureFlagsLoading) {
+      return <SplashScreen />;
+    }
+
+    return (
+      <ErrorBoundary fallback={<TheApplicationIsOnFire />}>
+        {/** Accessibility helper */}
+        <a className="skip-link" href="#main-content">
+          Skip to main content
+        </a>
+        <div hidden>
+          <span id="new-window">Opens in a new window</span>
+          <span id="external-site">Opens an external site</span>
+          <span id="external-site-new-window">
+            Opens an external site in a new window
+          </span>
+        </div>
+        <GoTo />
+        <DocumentTitleSegment segment="Akamai Cloud Manager" />
+        <MainContent />
+        <GlobalListeners />
+      </ErrorBoundary>
+    );
+  })
 );
 
 const GlobalListeners = () => {

diff --git a/packages/manager/src/containers/flags.container.ts b/packages/manager/src/containers/flags.container.ts
@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { useFlags } from 'src/hooks/useFlags';
+
+import type { FlagSet } from 'src/featureFlags';
+
+export interface WithFeatureFlagProps {
+  flags: FlagSet;
+}
+
+export const withFeatureFlags = <Props>(
+  Component: React.ComponentType<Props & WithFeatureFlagProps>
+) => {
+  return (props: Props) => {
+    const flags = useFlags();
+
+    return React.createElement(Component, {
+      ...props,
+      flags,
+    });
+  };
+};
diff --git a/packages/manager/src/containers/withFeatureFlagConsumer.container.ts b/packages/manager/src/containers/withFeatureFlagConsumer.container.ts
diff --git a/packages/manager/src/features/Domains/DomainRecords.tsx b/packages/manager/src/features/Domains/DomainRecords.tsx
@@ -21,7 +21,6 @@ import {
   propEq,
 } from 'ramda';
 import * as React from 'react';
-import { compose as recompose } from 'recompose';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Button } from 'src/components/Button/Button';
@@ -37,9 +36,6 @@ import { TableHead } from 'src/components/TableHead';
 import { TableRow } from 'src/components/TableRow';
 import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
 import { Typography } from 'src/components/Typography';
-import withFeatureFlags, {
-  FeatureFlagConsumerProps,
-} from 'src/containers/withFeatureFlagConsumer.container';
 import {
   getAPIErrorOrDefault,
   getErrorStringOrDefault,
@@ -52,7 +48,7 @@ import { DomainRecordActionMenu } from './DomainRecordActionMenu';
 import { DomainRecordDrawer } from './DomainRecordDrawer';
 import { StyledDiv, StyledGrid, StyledTableCell } from './DomainRecords.styles';
 
-interface DomainRecordsProps {
+interface Props {
   domain: Domain;
   domainRecords: DomainRecord[];
   updateDomain: (data: { id: number } & UpdateDomainPayload) => Promise<Domain>;
@@ -79,8 +75,6 @@ interface State {
   types: IType[];
 }
 
-type CombinedProps = DomainRecordsProps & FeatureFlagConsumerProps;
-
 interface IType {
   columns: {
     render: (r: Domain | DomainRecord) => JSX.Element | null | string;
@@ -99,8 +93,8 @@ const createLink = (title: string, handler: () => void) => (
   </Button>
 );
 
-class DomainRecords extends React.Component<CombinedProps, State> {
-  constructor(props: CombinedProps) {
+class DomainRecords extends React.Component<Props, State> {
+  constructor(props: Props) {
     super(props);
     this.state = {
       confirmDialog: {
@@ -112,7 +106,7 @@ class DomainRecords extends React.Component<CombinedProps, State> {
     };
   }
 
-  componentDidUpdate(prevProps: CombinedProps) {
+  componentDidUpdate(prevProps: Props) {
     if (
       !equals(prevProps.domainRecords, this.props.domainRecords) ||
       !equals(prevProps.domain, this.props.domain)
@@ -879,12 +873,10 @@ const prependLinodeNS = compose<any, any, DomainRecord[]>(
 );
 
 const getNSRecords = compose<
-  DomainRecordsProps,
+  Props,
   DomainRecord[],
   DomainRecord[],
   DomainRecord[]
 >(prependLinodeNS, filter(typeEq('NS')), pathOr([], ['domainRecords']));
 
-export default recompose<CombinedProps, DomainRecordsProps>(withFeatureFlags)(
-  DomainRecords
-);
+export default DomainRecords;
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx b/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx
@@ -33,10 +33,10 @@ import {
   WithAccountProps,
   withAccount,
 } from 'src/containers/account.container';
+import { WithFeatureFlagProps } from 'src/containers/flags.container';
 import { DefaultProps as ImagesProps } from 'src/containers/images.container';
 import { RegionsProps } from 'src/containers/regions.container';
 import { WithTypesProps } from 'src/containers/types.container';
-import { FeatureFlagConsumerProps } from 'src/containers/withFeatureFlagConsumer.container';
 import { WithLinodesProps } from 'src/containers/withLinodes.container';
 import { EUAgreementCheckbox } from 'src/features/Account/Agreements/EUAgreementCheckbox';
 import { regionSupportsMetadata } from 'src/features/Linodes/LinodesCreate/utilities';
@@ -170,7 +170,7 @@ type InnerProps = WithTypesRegionsAndImages &
 
 type CombinedProps = AllFormStateAndHandlers &
   AppsData &
-  FeatureFlagConsumerProps &
+  WithFeatureFlagProps &
   ImagesProps &
   InnerProps &
   ReduxStateProps &

diff --git a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreateContainer.tsx b/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreateContainer.tsx
@@ -26,6 +26,10 @@ import {
   WithEventsPollingActionProps,
   withEventsPollingActions,
 } from 'src/containers/events.container';
+import {
+  WithFeatureFlagProps,
+  withFeatureFlags,
+} from 'src/containers/flags.container';
 import withImages, {
   DefaultProps as ImagesProps,
 } from 'src/containers/images.container';
@@ -35,9 +39,6 @@ import {
 } from 'src/containers/profile.container';
 import { RegionsProps, withRegions } from 'src/containers/regions.container';
 import { WithTypesProps, withTypes } from 'src/containers/types.container';
-import withFlags, {
-  FeatureFlagConsumerProps,
-} from 'src/containers/withFeatureFlagConsumer.container';
 import {
   WithLinodesProps,
   withLinodes,
@@ -136,7 +137,7 @@ type CombinedProps = WithSnackbarProps &
   WithTypesProps &
   WithLinodesProps &
   RegionsProps &
-  FeatureFlagConsumerProps &
+  WithFeatureFlagProps &
   RouteComponentProps<{}, any, any> &
   WithProfileProps &
   AgreementsProps &
@@ -952,7 +953,7 @@ export default recompose<CombinedProps, {}>(
   withTypes,
   connected,
   withSnackbar,
-  withFlags,
+  withFeatureFlags,
   withProfile,
   withAgreements,
   withQueryClient,

diff --git a/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx b/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx
@@ -15,7 +15,6 @@ import {
   WithProfileProps,
   withProfile,
 } from 'src/containers/profile.container';
-import withFeatureFlagConsumer from 'src/containers/withFeatureFlagConsumer.container';
 import { BackupsCTA } from 'src/features/Backups/BackupsCTA';
 import { MigrateLinode } from 'src/features/Linodes/MigrateLinode/MigrateLinode';
 import { DialogType } from 'src/features/Linodes/types';
@@ -432,7 +431,6 @@ const sendGroupByAnalytic = (value: boolean) => {
 
 export const enhanced = compose<CombinedProps, LinodesLandingProps>(
   withRouter,
-  withFeatureFlagConsumer,
   withProfile
 );
 

diff --git a/packages/manager/src/features/Users/UserPermissions.tsx b/packages/manager/src/features/Users/UserPermissions.tsx
@@ -33,9 +33,10 @@ import { TabPanels } from 'src/components/Tabs/TabPanels';
 import { Tabs } from 'src/components/Tabs/Tabs';
 import { Toggle } from 'src/components/Toggle/Toggle';
 import { Typography } from 'src/components/Typography';
-import withFlags, {
-  FeatureFlagConsumerProps,
-} from 'src/containers/withFeatureFlagConsumer.container';
+import {
+  WithFeatureFlagProps,
+  withFeatureFlags,
+} from 'src/containers/flags.container';
 import {
   WithQueryClientProps,
   withQueryClient,
@@ -89,7 +90,7 @@ interface State {
 type CombinedProps = Props &
   WithSnackbarProps &
   WithQueryClientProps &
-  FeatureFlagConsumerProps;
+  WithFeatureFlagProps;
 
 class UserPermissions extends React.Component<CombinedProps, State> {
   componentDidMount() {
@@ -815,5 +816,5 @@ class UserPermissions extends React.Component<CombinedProps, State> {
 export default recompose<CombinedProps, Props>(
   withSnackbar,
   withQueryClient,
-  withFlags
+  withFeatureFlags
 )(UserPermissions);
diff --git a/packages/manager/src/utilities/testHelpers.tsx b/packages/manager/src/utilities/testHelpers.tsx
@@ -7,7 +7,7 @@ import {
 import userEvent from '@testing-library/user-event';
 import mediaQuery from 'css-mediaquery';
 import { Formik, FormikConfig, FormikValues } from 'formik';
-import { Provider as LDProvider } from 'launchdarkly-react-client-sdk/lib/context';
+import { LDProvider } from 'launchdarkly-react-client-sdk';
 import { SnackbarProvider } from 'notistack';
 import { mergeDeepRight } from 'ramda';
 import * as React from 'react';
@@ -95,10 +95,10 @@ export const wrapWithTheme = (ui: any, options: Options = {}) => {
       <QueryClientProvider client={passedQueryClient || queryClient}>
         <LinodeThemeWrapper theme={options.theme}>
           <LDProvider
-            value={{
-              flagKeyMap: {},
-              flags: options.flags ?? {},
-            }}
+            clientSideID={''}
+            deferInitialization
+            flags={options.flags ?? {}}
+            options={{ bootstrap: options.flags }}
           >
             <SnackbarProvider>
               <MemoryRouter {...options.MemoryRouter}>