Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 4 commits into from
Feb 9, 2024
Merged

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

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
516067d
update and refactor
bnussman Feb 8, 2024
83e9cc7
use exact version
bnussman Feb 8, 2024
77e9188
Added changeset: Update `launchdarkly-react-client-sdk`
bnussman Feb 8, 2024
aef9682
fix eslint warnings
bnussman Feb 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/manager/.changeset/pr-10165-tech-stories-1707412665889.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@linode/manager": Tech Stories
---

Update `launchdarkly-react-client-sdk` ([#10165](https://github.com/linode/manager/pull/10165))
2 changes: 1 addition & 1 deletion packages/manager/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think I'm going to start pinning exact versions (without the ^) so that if we ever have to re-generate the lockfile, the minor version won't update. Usually this is fine because minor versions shouldn't case breaking changes, but in this case for launch darkly, it did.

Using the exact version will make things more predictable and safe

"libphonenumber-js": "^1.10.6",
"lodash": "^4.17.21",
"logic-query-parser": "^0.0.5",
Expand Down
61 changes: 29 additions & 32 deletions packages/manager/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -23,37 +22,35 @@ import { useSetupFeatureFlags } from './useSetupFeatureFlags';
export const App = () => <BaseApp />;

const BaseApp = withDocumentTitleProvider(
withFeatureFlagProvider(
withFeatureFlagConsumer(() => {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The consumer is not needed here because we don't need to read flags in this component.

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 = () => {
Expand Down
22 changes: 22 additions & 0 deletions packages/manager/src/containers/flags.container.ts
View file
Open in desktop
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is just a much cleaner rewrite of withFeatureFlagConsumer.container.ts

Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import * as React from 'react';

import { useFlags } from 'src/hooks/useFlags';

import type { FlagSet } from 'src/featureFlags'
bnussman-akamai marked this conversation as resolved.
Show resolved Hide resolved

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,
});
};
};
55 changes: 0 additions & 55 deletions packages/manager/src/containers/withFeatureFlagConsumer.container.ts
View file
Open in desktop

This file was deleted.

20 changes: 6 additions & 14 deletions packages/manager/src/features/Domains/DomainRecords.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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,
Expand All @@ -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>;
Expand All @@ -79,8 +75,6 @@ interface State {
types: IType[];
}

type CombinedProps = DomainRecordsProps & FeatureFlagConsumerProps;

interface IType {
columns: {
render: (r: Domain | DomainRecord) => JSX.Element | null | string;
Expand All @@ -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: {
Expand All @@ -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)
Expand Down Expand Up @@ -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)(
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This component does not consume feature flags

DomainRecords
);
export default DomainRecords;
4 changes: 2 additions & 2 deletions packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -170,7 +170,7 @@ type InnerProps = WithTypesRegionsAndImages &

type CombinedProps = AllFormStateAndHandlers &
AppsData &
FeatureFlagConsumerProps &
WithFeatureFlagProps &
ImagesProps &
InnerProps &
ReduxStateProps &
Expand Down
11 changes: 6 additions & 5 deletions packages/manager/src/features/Linodes/LinodesCreate/LinodeCreateContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,10 @@ 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 {
WithFeatureFlagProps,
withFeatureFlags
} from 'src/containers/flags.container';
bnussman-akamai marked this conversation as resolved.
Show resolved Hide resolved
import {
WithLinodesProps,
withLinodes,
Expand Down Expand Up @@ -136,7 +137,7 @@ type CombinedProps = WithSnackbarProps &
WithTypesProps &
WithLinodesProps &
RegionsProps &
FeatureFlagConsumerProps &
WithFeatureFlagProps &
RouteComponentProps<{}, any, any> &
WithProfileProps &
AgreementsProps &
Expand Down Expand Up @@ -952,7 +953,7 @@ export default recompose<CombinedProps, {}>(
withTypes,
connected,
withSnackbar,
withFlags,
withFeatureFlags,
withProfile,
withAgreements,
withQueryClient,
Expand Down
2 changes: 0 additions & 2 deletions packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -432,7 +431,6 @@ const sendGroupByAnalytic = (value: boolean) => {

export const enhanced = compose<CombinedProps, LinodesLandingProps>(
withRouter,
withFeatureFlagConsumer,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This component does not consume feature flags so this can be removed.

withProfile
);

Expand Down
11 changes: 6 additions & 5 deletions packages/manager/src/features/Users/UserPermissions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
bnussman-akamai marked this conversation as resolved.
Show resolved Hide resolved
} from 'src/containers/flags.container';
import {
WithQueryClientProps,
withQueryClient,
Expand Down Expand Up @@ -89,7 +90,7 @@ interface State {
type CombinedProps = Props &
WithSnackbarProps &
WithQueryClientProps &
FeatureFlagConsumerProps;
WithFeatureFlagProps;

class UserPermissions extends React.Component<CombinedProps, State> {
componentDidMount() {
Expand Down Expand Up @@ -815,5 +816,5 @@ class UserPermissions extends React.Component<CombinedProps, State> {
export default recompose<CombinedProps, Props>(
withSnackbar,
withQueryClient,
withFlags
withFeatureFlags
)(UserPermissions);
10 changes: 5 additions & 5 deletions packages/manager/src/utilities/testHelpers.tsx
View file
Open in desktop
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Had to address a breaking change here. Launch Darkly no longer exports Provider so we have to use LDProvider.

See launchdarkly/react-client-sdk#30 (comment)

Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 }}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, here is some context for others:

The bootstrapping feature lets you decrease startup times for client-side SDKs by providing them with an initial set of flag values that are immediately available during client initialization.

>
<SnackbarProvider>
<MemoryRouter {...options.MemoryRouter}>
Expand Down
18 changes: 9 additions & 9 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10202,10 +10202,10 @@ language-tags@=1.0.5:
dependencies:
language-subtag-registry "~0.3.2"

launchdarkly-js-client-sdk@^3.1.3:
version "3.1.3"
resolved "https://registry.yarnpkg.com/launchdarkly-js-client-sdk/-/launchdarkly-js-client-sdk-3.1.3.tgz#e046439f0e4f0bfd6d38b9eaa4420a6e40ffc0c7"
integrity sha512-/JR/ri8z3bEj9RFTTKDjd+con4F1MsWUea1MmBDtFj4gDA0l9NDm1KzhMKiIeoBdmB2rSaeFYe4CaYOEp8IryA==
launchdarkly-js-client-sdk@^3.1.4:
version "3.1.4"
resolved "https://registry.yarnpkg.com/launchdarkly-js-client-sdk/-/launchdarkly-js-client-sdk-3.1.4.tgz#e613cb53412533c07ccf140ae570fc994c59758d"
integrity sha512-yq0FeklpVuHMSRz7jfUAfyM7I/659RvGztqJ0Y9G5eN/ZrG1o2W61ZU0Nrv/gqZCtLXjarh/u1otxSFFBjTpHw==
dependencies:
escape-string-regexp "^4.0.0"
launchdarkly-js-sdk-common "5.0.3"
Expand All @@ -10219,13 +10219,13 @@ launchdarkly-js-sdk-common@5.0.3:
fast-deep-equal "^2.0.1"
uuid "^8.0.0"

launchdarkly-react-client-sdk@^3.0.6:
version "3.0.6"
resolved "https://registry.yarnpkg.com/launchdarkly-react-client-sdk/-/launchdarkly-react-client-sdk-3.0.6.tgz#5c694a4a013757d2afb5213efd28d9c16af1595e"
integrity sha512-r7gSshScugjnJB4lJ6mAOMKpV4Pj/wUks3tsRHdfeXgER9jPdxmZOAkm0besMjK0S7lfQdjxJ2KIXrh+Mn1sQA==
launchdarkly-react-client-sdk@3.0.10:
version "3.0.10"
resolved "https://registry.yarnpkg.com/launchdarkly-react-client-sdk/-/launchdarkly-react-client-sdk-3.0.10.tgz#33816d939d9bd18b0723c0fd30b4772f2429f3de"
integrity sha512-ssb3KWe9z42+q8X2u32OrlDntGLsv0NP/p4E2Hx4O9RU0OeFm9v6omOlIk9SMsYEQD4QzLSXAp5L3cSN2ssLlA==
dependencies:
hoist-non-react-statics "^3.3.2"
launchdarkly-js-client-sdk "^3.1.3"
launchdarkly-js-client-sdk "^3.1.4"
lodash.camelcase "^4.3.0"

lazy-ass@^1.6.0:
Expand Down
Loading