microsoft-graph-explorer-v4 icon indicating copy to clipboard operation
microsoft-graph-explorer-v4 copied to clipboard
verified publisher icon microsoftgraph

feat: investigate fluentui v9 migration

Open Mnickii opened this issue 1 year ago • 7 comments

Overview

This PR investigates possibility of migrating GE components to use fluentUI v9. Migrates some button usage and investigates theming changes

W.I.P

Demo

Notes

Theming changes require more work This PR showcases instances where some component counterparts may not work to the desired GE experience

Testing Instructions

  • How to test this PR : Test on the jolly link

Mnickii avatar Aug 21 '24 08:08 Mnickii

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-3286.centralus.azurestaticapps.net

github-actions[bot] avatar Aug 22 '24 09:08 github-actions[bot]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-3286.centralus.azurestaticapps.net

github-actions[bot] avatar Aug 22 '24 10:08 github-actions[bot]

Quality Gate Failed Quality Gate failed

Failed conditions
0.0% Coverage on New Code (required ≥ 80%)

See analysis details on SonarCloud

sonarqubecloud[bot] avatar Aug 27 '24 06:08 sonarqubecloud[bot]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-3286.centralus.azurestaticapps.net

github-actions[bot] avatar Aug 27 '24 06:08 github-actions[bot]

@Mnickii some feedback;

1.Please ensure the run query text area is responsive to the size of the Graph query. In this upgrade, the size of this text area is not responsive to the Graph query text string size

image

  1. The docs icon, sample query text and method names seems to be 'floating' ie too much padding. Can the size of these be increased to reduce the padding? image

  2. The dividers here are overlapping, refer to the image image

  3. Vertical scrollbars for Samples is missing - refer to the image (taken from Graph Explorer pro) image

  4. The header is not aligned with the rest of the GE components mainly the share icon. Additionally, the share icon (on my screen) has be cut off and the rest of the components on the right side of the screen. When Graph Explorer view is minimized using the minimize side bar (at the top left), the problem does not exist image

  5. Any reason why the docs icons changed from blue to black & white? image

  6. The GE resources, history etc icons also changed from blue to black and white. When you hover the icons, only the sample queries icon changes color to blue. image

  7. Consent type on the permission tab is not visible even when I resize the browser tab window or zoom out image

adhiambovivian avatar Aug 27 '24 13:08 adhiambovivian

@adhiambovivian as this is still a work in progress and a proof of concept, not all parts of the application have been migrated into fluentUI v9. This is meant to showcase how migration can be done, and in particular, how some experiences may need adapting to use different components. Theming also hasn't been migrated app-wide. Some of these changes are fixable in the scope of the POC but others would require actual project-wide migration.

Mnickii avatar Aug 27 '24 13:08 Mnickii

@Mnickii going forward, is it possible to break this out into smaller portions where we have scoped PRs?

musale avatar Oct 03 '24 17:10 musale

Closing this: Investigation complete and work in progress, tracked by https://github.com/microsoftgraph/microsoft-graph-explorer-v4/issues/3294

Mnickii avatar Dec 11 '24 10:12 Mnickii