change: [M3-7785] - Improve Dev Tools #10220

abailly-akamai · 2024-02-22T16:45:10Z

Description 📝

This PR brings non-breaking, minor improvement to the dev tools.

Changes 🔄

Add a theme select to persist theme choice while using MSW
Add a rest button to bring the feature flags values back to their Launch Darkly defaults
Color the dev tools icon red when MSW is enabled
Add a link to the preference modal for convenience
Comment out banners present of EVERY page cluttering the UI. (they can be easily re-enabled in serverHandlers.ts
Update documentation

Preview 📷

How to test 🧪

Verification steps

Pull local code locally and yarn up your application
Confirm behavior of dev tools menu

As an Author I have considered 🤔

Check all that apply

abailly-akamai · 2024-02-22T16:54:52Z

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

+
+    setMockTheme(selectedValue);
+    setStorage(MOCK_THEME_STORAGE_KEY, selectedValue);
+    window.location.reload();


Switching theme is not going to be as common as toggling or flags. I opted to no add this to redux as there is not a lot of value there and it would increase the complexity of this feature by a lot.

abailly-akamai · 2024-02-22T16:55:16Z

packages/manager/src/dev-tools/dev-tools.css

 #dev-tools:hover {
-  height: 325px;
+  height: 375px;


increasing the height here a bit to allow for more room and the new reset button

abailly-akamai · 2024-02-22T16:55:36Z

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

+      <div className={isMSWEnabled ? 'mswEnabled' : ''} id="dev-tools">
+        <div>
+          <Handyman />
+        </div>


this way we can color it with CSS

Can we also/or add text to indicate the MSW is "on"? For accessibility, color should not be the only indicator haha

abailly-akamai · 2024-02-22T17:02:01Z

packages/manager/src/mocks/serverHandlers.ts

-          abuseTicket,
-          emailBounce,
+          // abuseTicket,
+          // emailBounce,


Those ALWAYS show up, and on EVERY page. They can now be toggled on manually as needed

Agreed that these are annoying. I don't think I'll miss them, but not sure if anyone else on the team has a reason behind why they have historically been kept visible by default.

feels to me like something that was implemented at once and never changed to no particular reason. If anyone is affected I will add them back but I doubt it

mjac0bs

This is great, thank you for the improvements!!

Are you seeing the scrollbar to the side of the MSW icon now too?

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

mjac0bs · 2024-02-22T17:25:40Z

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

+        href="/profile/settings?preferenceEditor=true"
+        style={{ color: '#fff' }}
+      >
+        Open preference Modal


I love this. ++

This one is from @jaalah-akamai!

packages/manager/.changeset/pr-10220-changed-1708622627827.md

packages/manager/src/dev-tools/dev-tools.css

mjac0bs · 2024-02-22T17:38:08Z

packages/manager/src/mocks/serverHandlers.ts

-          abuseTicket,
-          emailBounce,
+          // abuseTicket,
+          // emailBounce,


Agreed that these are annoying. I don't think I'll miss them, but not sure if anyone else on the team has a reason behind why they have historically been kept visible by default.

github-actions · 2024-02-22T17:45:09Z

Coverage Report: ✅
Base Coverage: 81.29%
Current Coverage: 81.29%

abailly-akamai · 2024-02-22T18:30:22Z

@mjac0bs yes I could see it if I turned on always show scrollbar in my OS

I fixed it too!

mjac0bs

🛠️ ✅ 🎉

bnussman-akamai

Thanks for doing this!

I did get a bit confused at first when I tried setting a theme and nothing happened because I had the MSW off.

I wonder if we should somehow indicate that this theme selector is only for when the MSW is on. Or maybe we could make Cloud Manager respect the override even when the MSW if off.

abailly-akamai · 2024-02-22T19:21:56Z

@bnussman-akamai fair enough - it's in the documentation but I'll add it to the label as well)

bnussman-akamai

Only other feature I can think of would be a button that clears all local storage and reloads the page.

It's relatively easy to do this in the browser's dev tools, but I don't think it would hurt to put in our own dev tools.

abailly-akamai · 2024-02-22T19:31:25Z

@bnussman-akamai I'll hold on that item cause it has implications and we'd need to pick and choose what to clear. I'd rather leave that to the developer's discretion. Besides, clearing ALL local storage will log you out (I think?)

bnussman-akamai · 2024-02-22T19:33:31Z

@abailly-akamai Yaya, that's kind of the point. Clearing local storage is super useful for debugging things like our login redirect logic for example. It won't log you out necessarily.

I'm cool either way. I've never had a problem opening dev tools to do this

hana-akamai

Looks great, have we also considered what support for toggling object feature flags would look like?

hana-akamai · 2024-02-22T21:46:55Z

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

@@ -75,6 +84,9 @@ export const FeatureFlagTool = withFeatureFlagProvider(() => {
              </div>
            );
          })}
+          <button onClick={resetFlags} style={{ marginTop: 8 }}>
+            Reset default flags


Can we reword this to Reset to LaunchDarkly default flags for more clarity?

Suggested change

Reset default flags

Reset to LaunchDarkly default flags

I almost made this same comment, then deleted it, and asked for a code comment, ha. I do still think it would be nice.

I was thinking of (1) more text requiring further height increase of the dev tools panel and (2) whether we'd want to specify LD if to save some trouble of updating it if we were to switch to another tool in the future - but really that's such an easy change.

Same brain cell 🧠 . (1) We can shorthand to LD to save some width space (2) Agreed

hana-akamai · 2024-02-22T21:52:10Z

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

+      <div className={isMSWEnabled ? 'mswEnabled' : ''} id="dev-tools">
+        <div>
+          <Handyman />
+        </div>


Can we also/or add text to indicate the MSW is "on"? For accessibility, color should not be the only indicator haha

abailly-akamai · 2024-02-26T14:25:36Z

Can we also/or add text to indicate the MSW is "on"? For accessibility, color should not be the only indicator haha

@hana-linode I want to avoid taking extra real estate on the page with the dev tools badge, so I made the expanded MSW enabled label color the same green which creates a relationship. I also have a line in the doc that speaks to the status icon color. I think that's good enough for now, we can revisit if the need to provide a text based status is strong. All other items have been addressed!

abailly-akamai self-assigned this Feb 22, 2024

abailly-akamai commented Feb 22, 2024

View reviewed changes

abailly-akamai marked this pull request as ready for review February 22, 2024 17:03

abailly-akamai requested a review from a team as a code owner February 22, 2024 17:03

abailly-akamai requested review from mjac0bs and hana-akamai and removed request for a team February 22, 2024 17:03

mjac0bs reviewed Feb 22, 2024

View reviewed changes

mjac0bs approved these changes Feb 22, 2024

View reviewed changes

mjac0bs added the Add'tl Approval Needed Waiting on another approval! label Feb 22, 2024

bnussman-akamai reviewed Feb 22, 2024

View reviewed changes

bnussman-akamai approved these changes Feb 22, 2024

View reviewed changes

bnussman-akamai added Enhancement Approved Multiple approvals and ready to merge! and removed Add'tl Approval Needed Waiting on another approval! labels Feb 22, 2024

hana-akamai reviewed Feb 22, 2024

View reviewed changes

abailly-akamai added 9 commits February 25, 2024 15:35

Initial commit - save work

a28cd2e

No store

83403cc

Active MSW icon color

3910c67

Documentation update

0147fa0

Cleanup

3c318e2

Added changeset: Improve dev toolsUI

2f10465

Feedback

d132a45

fix overflow issue

ac5fdcd

improve clarity

eb1140a

abailly-akamai force-pushed the M3-7785 branch from ce31aee to eb1140a Compare February 25, 2024 20:35

feedback

36a42d0

abailly-akamai merged commit 9c88cb1 into linode:develop Feb 26, 2024
18 checks passed

This was referenced Mar 1, 2024

Release v1.114.0 - release → staging #10246

Merged

Release v1.114.0 - staging → master #10253

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

change: [M3-7785] - Improve Dev Tools #10220

change: [M3-7785] - Improve Dev Tools #10220

abailly-akamai commented Feb 22, 2024 •

edited

Loading

abailly-akamai Feb 22, 2024

abailly-akamai Feb 22, 2024

abailly-akamai Feb 22, 2024

hana-akamai Feb 22, 2024

abailly-akamai Feb 22, 2024

mjac0bs Feb 22, 2024

abailly-akamai Feb 22, 2024

mjac0bs left a comment

mjac0bs Feb 22, 2024

abailly-akamai Feb 22, 2024

mjac0bs Feb 22, 2024

github-actions bot commented Feb 22, 2024 •

edited

Loading

abailly-akamai commented Feb 22, 2024

mjac0bs left a comment

bnussman-akamai left a comment

abailly-akamai commented Feb 22, 2024

bnussman-akamai left a comment •

edited

Loading

abailly-akamai commented Feb 22, 2024 •

edited

Loading

bnussman-akamai commented Feb 22, 2024

hana-akamai left a comment

hana-akamai Feb 22, 2024

mjac0bs Feb 22, 2024

hana-akamai Feb 22, 2024

hana-akamai Feb 22, 2024

abailly-akamai commented Feb 26, 2024

change: [M3-7785] - Improve Dev Tools #10220

change: [M3-7785] - Improve Dev Tools #10220

Conversation

abailly-akamai commented Feb 22, 2024 • edited Loading

Description 📝

Changes 🔄

Preview 📷

How to test 🧪

Verification steps

As an Author I have considered 🤔

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mjac0bs left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Feb 22, 2024 • edited Loading

abailly-akamai commented Feb 22, 2024

mjac0bs left a comment

Choose a reason for hiding this comment

bnussman-akamai left a comment

Choose a reason for hiding this comment

abailly-akamai commented Feb 22, 2024

bnussman-akamai left a comment • edited Loading

Choose a reason for hiding this comment

abailly-akamai commented Feb 22, 2024 • edited Loading

bnussman-akamai commented Feb 22, 2024

hana-akamai left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

abailly-akamai commented Feb 26, 2024

abailly-akamai commented Feb 22, 2024 •

edited

Loading

github-actions bot commented Feb 22, 2024 •

edited

Loading

bnussman-akamai left a comment •

edited

Loading

abailly-akamai commented Feb 22, 2024 •

edited

Loading