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

Jump to bottom

Fix: Response and Request area heights and style #3619

Merged
merged 110 commits into from
Feb 18, 2025
Merged

Fix: Response and Request area heights and style #3619

merged 110 commits into from
Feb 18, 2025

Conversation

ElinorW
Copy link
Contributor

@ElinorW ElinorW commented Feb 14, 2025 •
edited
Loading

Overview

Fixes the issues with the request and response area overflows.
Adjusts styling to match what is on the design.

Demo

image
image

Notes

Optional. Ancillary topics, caveats, alternative strategies that didn't work out, anything else.

Testing Instructions

  • Prefer bulleted description
  • Start after checking out this branch
  • Include any setup required, such as bundling scripts, restarting services, etc.
  • Include test case, and expected output

musale added 30 commits November 28, 2024 17:50
@musale
feat: add new components for Monaco and response display in v9
2aa1628
@musale
feat: implement Monaco v9 editor and enhance response display functio…
2ec1728 
…nality
@musale
feat: implement ResponseV9 component and update pivot items to use it
8e40ecb
@musale
feat: add OneNote and PDF content types, update response headers hand…
c5a8cea 
…ling, and enhance response display components
@musale
feat: add @microsoft/microsoft-graph-types dependency, update respons…
4934e83 
…e handling, and improve type safety in graph request functions
@musale
feat: update graph response handling to initialize headers and remove…
f2d4bbe 
… unused response headers in history item
@musale
Merge branch 'feat/fluent-v9-upgrade' into feat/response-v9
1fdc231
@musale
Use a Record to allow serialization of headers
dd7ffa6
@musale
refactor: update response handling to use ResponseBody type and impro…
06c6133 
…ve header processing
@musale
feat: add CopyButtonV9 and ResponseHeadersV9 components, update compo…
ee93483 
…nent registry
@musale
feat: introduce SnippetV9 and CopyButtonV9 components, update related…
093d8ea 
… imports and types
@musale
feat: enhance MonacoV9 and SnippetsV9 components with extra informati…
ada6582 
…on display and improved styling
@musale
feat: add GraphToolkitV9 component and integrate it into pivot items
719a95e
@musale
refactor: remove unused styledGraphToolkit definition from GraphToolk…
48651dc 
…itV9 component
@musale
refactor: update adaptive cards lookup and improve error handling in …
3e24781 
…adaptive card utilities
@musale
refactor: clean up imports and reorganize state selection in Adaptive…
f8e4032 
…CardV9 component
@musale
WIP: back from leave
a1609c5
@musale
Merge branch 'feat/fluent-v9-upgrade' into feat/response-v9
ca176fa
@musale
refactor: Update imports and clean up code formatting in QueryRespons…
4fa32da 
…e and App components
@musale
refactor: Simplify QueryResponse component by returning GetPivotItems…
64a4424 
… directly
@musale
refactor: Restore GetPivotItems usage and reintroduce QueryResponse l…
163aa75 
…ayout
@musale
refactor: Introduce QueryResponseV9 component and update App to use it
6665ff1
@musale
Merge branch 'feat/fluent-v9-upgrade' into feat/response-v9
5daf913
@musale
Merge branch 'feat/fluent-v9-upgrade' into feat/response-v9
8e4415c
@musale
fix: update Permissions component props type to any
08c99e9
@musale
refactor: improve layout and styling in QueryResponse and Monaco comp…
7b74d99 
…onents
@musale
feat: enhance PivotItemsDialog with new icons and improved styling
5424d73
@musale
refactor: enhance QueryResponseV9 styling with borders and padding
626a8ff
@musale
refactor: clean up code formatting and improve layout in App and Quer…
e9561aa 
…yResponse components
@musale
add sidebar and main content resizing
a4ed622
@github-actions GitHub Actions
Copy link
Contributor

Azure Static Web Apps: Your stage site is ready! Visit it here: https://calm-wave-0c4fb390f-3619.eastus2.4.azurestaticapps.net

@ElinorW ElinorW marked this pull request as ready for review February 17, 2025 13:15
@ElinorW ElinorW requested a review from a team as a code owner February 17, 2025 13:16
musale
musale reviewed Feb 17, 2025
View reviewed changes
Copy link
Contributor

@musale musale left a comment

Choose a reason for hiding this comment

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

In request headers, could you -re-adjust the height of the headers container so that it doesn't overflow and the lower end of the scroll bar can be seen
image

@Mnickii
Copy link
Contributor

Mnickii commented Feb 17, 2025

The query runner and headers are not responsive in mobile view
screenshot-1739802106196

@Mnickii Mnickii linked an issue Feb 17, 2025 that may be closed by this pull request
Monaco editor responsiveness issues in Response and Request areas #3615
Closed
6 tasks
@github-actions GitHub Actions
Copy link
Contributor

Azure Static Web Apps: Your stage site is ready! Visit it here: https://calm-wave-0c4fb390f-3619.eastus2.4.azurestaticapps.net

1 similar comment
@github-actions GitHub Actions
Copy link
Contributor

Azure Static Web Apps: Your stage site is ready! Visit it here: https://calm-wave-0c4fb390f-3619.eastus2.4.azurestaticapps.net

@github-actions GitHub Actions
Copy link
Contributor

Azure Static Web Apps: Your stage site is ready! Visit it here: https://calm-wave-0c4fb390f-3619.eastus2.4.azurestaticapps.net

@github-actions GitHub Actions
Copy link
Contributor

Azure Static Web Apps: Your stage site is ready! Visit it here: https://calm-wave-0c4fb390f-3619.eastus2.4.azurestaticapps.net

Mnickii
Mnickii reviewed Feb 17, 2025
View reviewed changes
Copy link
Contributor

@Mnickii Mnickii left a comment

Choose a reason for hiding this comment

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

Mobile view is looking great!
I've noticed though that I can't scroll to the response area.
screenshot-1739809205234

public/index.html Outdated
@@ -66,7 +66,7 @@
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
/* overflow: hidden; */
Copy link
Contributor

Choose a reason for hiding this comment

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

let's delete

src/app/views/query-response/adaptive-cards/AdaptiveCardV9.tsx Outdated
@@ -275,13 +275,12 @@ const RenderJSONSchema = (props: RenderCardJSONProps) => {
</Link>
</MessageBarBody>
</MessageBar>
<div>
<div style={{ display: 'flex', flexDirection: 'column',height: '500px' }}>
Copy link
Contributor

Choose a reason for hiding this comment

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

let's use classNames for consistency

@github-actions GitHub Actions
Copy link
Contributor

Azure Static Web Apps: Your stage site is ready! Visit it here: https://calm-wave-0c4fb390f-3619.eastus2.4.azurestaticapps.net

@github-actions GitHub Actions
Copy link
Contributor

Azure Static Web Apps: Your stage site is ready! Visit it here: https://calm-wave-0c4fb390f-3619.eastus2.4.azurestaticapps.net

@Mnickii Mnickii merged commit ca62b3d into feat/fluent-v9-upgrade Feb 18, 2025
16 of 17 checks passed
@sonarqubecloud SonarQubeCloud
Copy link

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@musale musale musale left review comments

@Mnickii Mnickii Mnickii left review comments

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Monaco editor responsiveness issues in Response and Request areas
3 participants
@ElinorW @Mnickii @musale