Skip to content

fix: Formatted network request payload has weird formatting#8603

Merged
Vadman97 merged 2 commits intohighlight:mainfrom
jemiluv8:formatted-network-payload
May 17, 2024
Merged

fix: Formatted network request payload has weird formatting#8603
Vadman97 merged 2 commits intohighlight:mainfrom
jemiluv8:formatted-network-payload

Conversation

@jemiluv8
Copy link
Copy Markdown
Contributor

@jemiluv8 jemiluv8 commented May 17, 2024 •
edited
Loading

fixes #8560
/claim #8560

Summary

There was a class name conflict between two third party components

  1. react-command-pallette
  2. react-syntax-highlighter

The react-command-pallete library comes with a default theme called "atom" that has a declaration for "atom-input"
This theme is imported whenever the react-command-pallete is used and was thus globally available.

Our graphql variable "Type" also has the class name atom-input and therefore inherits the global styling for the default
atom theme from the react-command-pallete component.

My proposed solution just overrides those styles by introducing a global declaration with higher specificity that
unsets the css declaration. I';ve seen similar done for the atom-overlay class.

Default atom style from the command-pallete library.

This is imported as a global css by the library.
Screenshot 2024-05-17 at 12 03 49 PM

Fixed output

Screenshot 2024-05-17 at 1 00 52 PM

How did you test this change?

Click testing

Are there any deployment considerations?

No

Does this work require review from our design team?

No

@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented May 17, 2024 •
edited
Loading

⚠️ No Changeset found

Latest commit: af1cdfb

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

💥 An error occurred when fetching the changed packages and changesets in this PR 
Some errors occurred when validating the changesets config:
The package or glob expression "rrdom" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrdom-nodejs" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrweb" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrweb-player" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrweb-snapshot" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@rrweb/types" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@rrweb/web-extension" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrvideo" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.

greptile-apps[bot]
greptile-apps bot reviewed May 17, 2024
View reviewed changes
Copy link
Copy Markdown

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

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

Pull Request Summary

  • Resolved Class Name Conflict: Addressed a class name conflict between react-command-palette and react-syntax-highlighter by overriding the atom-input class styles with higher specificity in frontend/src/index.css.

Potential Pitfalls

  • Global CSS Overrides: Ensure that the global CSS overrides do not unintentionally affect other components or styles within the application.

@algora-pbc algora-pbc bot mentioned this pull request May 17, 2024
Closed
Vadman97
Vadman97 approved these changes May 17, 2024
View reviewed changes
Copy link
Copy Markdown
Member

@Vadman97 Vadman97 left a comment

Choose a reason for hiding this comment

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

awesome, this fixes the issue for a session that currently displays this behavior. https://app.highlight.io/1/sessions/vRDmvFdZpssWFOwu1NCGPN03oTI1?network-resource-id=341

thank you for your contribution!

Screenshot from 2024-05-17 10-13-57

@Vadman97 Vadman97 enabled auto-merge (squash) May 17, 2024 17:14
@Vadman97 Vadman97 merged commit f9d932e into highlight:main May 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Vadman97 Vadman97 Vadman97 approved these changes

+1 more reviewer

@greptile-apps greptile-apps[bot] greptile-apps[bot] left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

🙋 Bounty claim

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

formatted network request payload has weird formatting

2 participants

@jemiluv8 @Vadman97