tech-story: [M3-8940] - Dev Tools fixes and improvements #11328

abailly-akamai · 2024-11-26T00:24:45Z

Description 📝

Long overdue updates to our beloved Dev Tools. This PR does not touch any client code. Brings a lot of improvements and fixes to presets and mocking.

Note

Code quality/readability/reusability is not as high as it would be for client code, tho I tried best to achieve that while working quickly. The goal aims to help the developer experience first 💨

Changes 🔄

Allow JSON/nested feature flags toggling (recursively)
Fix DevTools panel overflow
Improve re-haul Account/Profile mocking
Style improvements

Target release date 🗓️

Please specify a release date (and environment, if applicable) to guarantee timely review of this PR. If exact date is not known, please approximate and update it as needed.

Preview 📷

How to test 🧪

Verification steps

Play with MSW, verify
- Nested feature flags
- Profile and accounts
- No regressions in saving, storing mock data etc

As an Author, I have considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support
I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

All unit tests are passing
TypeScript compilation succeeded without errors
Code passes all linting rules

abailly-akamai · 2024-11-26T20:17:27Z

packages/api-v4/src/account/types.ts

+  'VPCs',
+] as const;
+
+export type AccountCapability = typeof accountCapabilities[number];


This changes nothing to the types, just allows to export the values

abailly-akamai · 2024-11-26T20:19:00Z

packages/manager/src/dev-tools/FeatureFlagTool.tsx

+      </details>
+    </ul>
+  );
+};


Allowing recursiveness so the JSON flag can be as deep as needed and represented here

Left to do: handle the cases for when a flag is something else than a boolean, which we rarely do

abailly-akamai · 2024-11-26T20:21:48Z

packages/manager/src/dev-tools/components/ExtraPresetProfile.tsx

+
+const FieldWrapper = ({ children }: { children: React.ReactNode }) => {
+  return <div className="dev-tools__modal-form__field">{children}</div>;
+};


Before we were only providing a static factory override. This updates allows much more flexibility for both the response.

github-actions · 2024-11-27T15:24:12Z

Coverage Report: ✅
Base Coverage: 86.85%
Current Coverage: 86.85%

jaalah-akamai

Nice work overall, I actually used the account preset for my testing today for OBJ. 🔥

packages/manager/src/dev-tools/FeatureFlagTool.tsx

packages/manager/src/dev-tools/ServiceWorkerTool.tsx

packages/manager/src/dev-tools/components/ExtraPresetAccount.tsx

packages/manager/src/dev-tools/components/ExtraPresetProfile.tsx

packages/manager/src/dev-tools/components/JsonTextArea.tsx

jdamore-linode

This is extremely cool @abailly-akamai, thanks for taking the time to add all this!

One technical question -- I was just messing around with the new feature flag work and tried to add a new JSON flag, but it's showing up in the dev tools as a checkbox. Can you spot what I did wrong?

// featureFlags.ts
interface JustMessingAroundFlag extends BaseFeatureFlag {
  optionA: boolean;
  optionB: boolean;
}

export interface Flags {
  justMessingAround: JustMessingAroundFlag;
  // ...
}

// FeatureFlagTool.tsx
const options: { flag: keyof Flags; label: string }[] = [
  { flag: 'justMessingAround', label: 'Just Messing Around' },
  // ...
];

Existing flags seem to work fine -- for example, I added the cloudManagerDesignUpdatesBanner flag to the array in FeatureFlagTool.tsx, and it showed up as expected, so I'm thinking I must be doing something wrong with the way I've set up my flag.

Either way, these are all such nice/powerful improvements! Thanks again Alban!

linode-gh-bot · 2024-12-04T17:46:29Z

Cloud Manager UI test results

🔺 1 failing test on test run #8 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
`1 Failing`	`464 Passing`	`2 Skipped`	`100m 41s`

Details

Failing Tests
	Spec	Test
❌	`smoke-billing-activity.spec.ts`	Billing Activity Feed » displays correct timezone for invoice and payment dates

Troubleshooting

Use this command to re-run the failing tests:

yarn cy:run -s "cypress/e2e/core/billing/smoke-billing-activity.spec.ts"

abailly-akamai · 2024-12-06T14:44:22Z

@jdamore-linode could it simply be the fact that justMessingAround is typed but does not return any actual value from LD?

jdamore-linode · 2024-12-06T15:37:11Z

@jdamore-linode could it simply be the fact that justMessingAround is typed but does not return any actual value from LD?

Ah thanks! I didn't realize they had to be tied to the actual Launch Darkly data since it's being mocked.

cypress · 2024-12-06T15:43:49Z

Cloud Manager E2E Run #6932

Run Properties: Failed #6932 • 5ac188d110: tech-story: [M3-8940] - Dev Tools fixes and improvements (#11328)

Project	`Cloud Manager E2E`
Branch Review	`develop`
Run status	`Failed #6932`
Run duration	`33m 53s`
Commit	`5ac188d110: tech-story: [M3-8940] - Dev Tools fixes and improvements (#11328)`
Committer	`Alban Bailly`
View all properties for this run ↗︎

Test results
Failures	`2`
Flaky	`5`
Pending	`2`
Skipped	`0`
Passing	`464`
View all changes introduced in this branch ↗︎

Tests for review

linodes/clone-linode.spec.ts • 1 failed test

View Output Video

Test		Artifacts
clone linode > can clone a Linode from Linode details page		`Screenshots` `Video`

billing/smoke-billing-activity.spec.ts • 1 failed test

View Output Video

Test		Artifacts
Billing Activity Feed > displays correct timezone for invoice and payment dates		`Screenshots` `Video`

linodes/switch-linode-state.spec.ts • 1 flaky test

View Output Video

Test		Artifacts
switch linode state > reboots a linode from landing page		`Screenshots` `Video`

linodes/resize-linode.spec.ts • 1 flaky test

View Output Video

Test		Artifacts
resize linode > resizes a linode by increasing size when offline: cold migration		`Screenshots` `Video`

linodes/linode-config.spec.ts • 1 flaky test

View Output Video

Test		Artifacts
Linode Config management > End-to-End > Clones a config		`Screenshots` `Video`

kubernetes/lke-create.spec.ts • 1 flaky test

View Output Video

Test		Artifacts
LKE Cluster Creation > can create an LKE cluster		`Screenshots` `Video`

linodes/create-linode-with-user-data.spec.ts • 1 flaky test

View Output Video

Test		Artifacts
Create Linode with user data > cannot specify user data when selected image does not support it		`Screenshots` `Video`

abailly-akamai self-assigned this Nov 26, 2024

abailly-akamai changed the title ~~tech-story: [M3-8940] - MSW fixes and improvements~~ tech-story: [M3-8940] - Dev Tools fixes and improvements Nov 26, 2024

abailly-akamai marked this pull request as ready for review November 26, 2024 20:03

abailly-akamai requested a review from a team as a code owner November 26, 2024 20:03

abailly-akamai requested review from coliu-akamai, pmakode-akamai and jaalah-akamai and removed request for a team November 26, 2024 20:03

abailly-akamai commented Nov 26, 2024

View reviewed changes

abailly-akamai force-pushed the M3-8940 branch 2 times, most recently from 674f537 to 86d2c60 Compare November 27, 2024 13:41

abailly-akamai requested a review from jdamore-linode December 2, 2024 15:00

jaalah-akamai approved these changes Dec 4, 2024

View reviewed changes

jaalah-akamai added Add'tl Approval Needed Waiting on another approval! Ready for Review labels Dec 4, 2024

abailly-akamai added 11 commits December 4, 2024 10:54

nested JSON flags

e6f93b4

fix overflow

75217ec

Styling updates

9f29642

save progress

a23e596

save progress

f4bb4a8

Fix types

4a10cfe

Wrapping up account customization

78c75bd

form improvements profile

ad19f6d

cleanup

a50b984

Added changeset: Dev Tools fixes and improvements

4e96279

fix flake

33438f1

abailly-akamai force-pushed the M3-8940 branch from 593d833 to 33438f1 Compare December 4, 2024 15:54

feedback @jaalah-akamai

af6d982

jdamore-linode approved these changes Dec 4, 2024

View reviewed changes

abailly-akamai merged commit 5ac188d into linode:develop Dec 6, 2024
22 of 23 checks passed

This was referenced Jan 8, 2025

Release v1.134.0 - release → staging #11494

Closed

Release v1.134.0 - release → staging #11497

Merged

Release v1.134.0 - release → staging #11503

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

tech-story: [M3-8940] - Dev Tools fixes and improvements #11328

tech-story: [M3-8940] - Dev Tools fixes and improvements #11328

abailly-akamai commented Nov 26, 2024 •

edited

Loading

abailly-akamai Nov 26, 2024

abailly-akamai Nov 26, 2024

abailly-akamai Nov 26, 2024

github-actions bot commented Nov 27, 2024 •

edited

Loading

jaalah-akamai left a comment

jdamore-linode left a comment

linode-gh-bot commented Dec 4, 2024

abailly-akamai commented Dec 6, 2024

jdamore-linode commented Dec 6, 2024

cypress bot commented Dec 6, 2024

tech-story: [M3-8940] - Dev Tools fixes and improvements #11328

tech-story: [M3-8940] - Dev Tools fixes and improvements #11328

Conversation

abailly-akamai commented Nov 26, 2024 • edited Loading

Description 📝

Changes 🔄

Target release date 🗓️

Preview 📷

How to test 🧪

Verification steps

As an Author, I have considered 🤔

As an Author, before moving this PR from Draft to Open, I confirmed ✅

abailly-akamai Nov 26, 2024

Choose a reason for hiding this comment

abailly-akamai Nov 26, 2024

Choose a reason for hiding this comment

abailly-akamai Nov 26, 2024

Choose a reason for hiding this comment

github-actions bot commented Nov 27, 2024 • edited Loading

jaalah-akamai left a comment

Choose a reason for hiding this comment

jdamore-linode left a comment

Choose a reason for hiding this comment

linode-gh-bot commented Dec 4, 2024

Cloud Manager UI test results

🔺 1 failing test on test run #8 ↗︎

Details

Troubleshooting

abailly-akamai commented Dec 6, 2024

jdamore-linode commented Dec 6, 2024

cypress bot commented Dec 6, 2024

Cloud Manager E2E Run #6932

Tests for review

abailly-akamai commented Nov 26, 2024 •

edited

Loading

github-actions bot commented Nov 27, 2024 •

edited

Loading