feat: file grid by gavinbarron · Pull Request #2057 · microsoftgraph/microsoft-graph-toolkit

gavinbarron · 2023-02-23T04:56:06Z

Closes #

PR Type

Feature

Description of the changes

Adds a file grid view with per item context menus to perform file actions

PR checklist

Project builds (yarn build) and changes have been tested in at least two supported browsers (Edge + non-Chromium based browser)
All public APIs (classes, methods, etc) have been documented following the jsdoc syntax
Stories have been added and existing stories have been tested
Added appropriate documentation. Docs PR:

License header has been added to all new source files (yarn setLicense)
Contains NO breaking changes

Other information

adds a new component to allow switching in the ui between light and dark modes adds a theme toggle to all stories by default updates developer test page to include toggle adds helper functions to assist with theme changing using fluentui web components theming tools

…st-enhancements

adds a file grid option to the file-list-composite

ghost · 2023-02-23T04:56:12Z

Thank you for creating a Pull Request @gavinbarron.

This is a checklist for the PR reviewer(s) to complete before approving and merging this PR:

I have verified a documentation PR has been linked and is approved (or not applicable)
I have ran this PR locally and have tested the fix/feature
I have verified that stories have been added to storybook (or not applicable)
I have tested existing stories in storybook to verify no regression has occured
I have tested the solution in at least two browsers (Edge + 1 non-Chromium based browser)

musale

Shall we remove the breadcrumbs story since we have the file-composite component? https://mgt.dev/next/?path=/story/components-mgt-file-list--open-folder-breadcrumbs

gavinbarron · 2023-02-23T17:32:09Z

Shall we remove the breadcrumbs story since we have the file-composite component? https://mgt.dev/next/?path=/story/components-mgt-file-list--open-folder-breadcrumbs

No, I think we'll leave that as a standalone component. as folks can use it independently of the file composite. However, we should expose it as a React component too

github-actions · 2023-03-10T17:36:06Z

The updated storybook is available here

…olders

github-actions · 2023-03-22T23:16:05Z

The updated storybook is available here

gavinbarron · 2023-03-22T23:22:58Z

page-size doesn't seem supported by default. We should also make sure all props from mgt-file-list are supported.

It is.
In this PR the properties from file and file-list were refactored to abstract base classes to eliminate the need to re-declare them on file-list, file-grid and file-composite

If you set the page-size value to 5 you see only 5 items. However, there is an existing bug in the file-list caching where values page-size is not considered during caching, so when you change the page-size to 20 without changing the underlying query being made to something not cached there is a cache hit and you see only the 10 results fetched by default.

Bug added to track caching issue separately #2147

…llback occurs

github-actions · 2023-03-27T23:31:34Z

The updated storybook is available here

github-actions · 2023-03-28T19:52:35Z

The updated storybook is available here

github-actions · 2023-03-28T21:57:23Z

Package	Line Rate	Branch Rate	Health
mgt-components.src.components.mgt-breadcrumb	100%	67%	✔
mgt-components.src.components.mgt-person	50%	42%	❌
mgt-components.src.components.mgt-theme-toggle	100%	100%	✔
mgt-components.src.components.sub-components.mgt-flyout	28%	12%	❌
mgt-components.src.components.sub-components.mgt-spinner	100%	100%	✔
mgt-components.src.graph	18%	8%	❌
mgt-components.src.styles	90%	57%	✔
mgt-components.src.utils	36%	4%	❌
mgt-element.src	42%	0%	❌
mgt-element.src.components	40%	0%	❌
mgt-element.src.mock	53%	45%	➖
mgt-element.src.providers	38%	22%	❌
mgt-element.src.utils	43%	24%	❌
providers.mgt-msal-provider.src	46%	38%	❌
Summary	38% (730 / 1944)	20% (229 / 1126)	❌

github-actions · 2023-03-28T21:59:38Z

The updated storybook is available here

musale · 2023-03-29T14:16:30Z

packages/mgt-components/src/components/mgt-file-grid/mgt-file-grid.ts

+          f => f.id,
+          f => html`
+                <div
+                  class="${this.isSelected(f) ? 'file-row selected' : 'file-row'}"


Suggested change

class="${this.isSelected(f) ? 'file-row selected' : 'file-row'}"

class="${classMap({'file-row': true, selected: this.isSelected(f)})}"

musale · 2023-03-29T14:23:46Z

When interacting with the first 3 menu items on a file, they appear on top of the dialog/modal that is supposed to be active.

github-actions · 2023-04-20T18:42:54Z

The updated storybook is available here

… the composite

github-actions · 2023-04-20T21:55:56Z

The updated storybook is available here

github-actions · 2023-04-20T22:39:23Z

The updated storybook is available here

github-actions · 2023-05-09T21:41:31Z

The updated storybook is available here

github-actions · 2023-05-09T22:14:12Z

The updated storybook is available here

gavinbarron added 19 commits January 5, 2023 15:03

feat: add breadcrumb and folder navigation to file list

02f4ec6

Merge branch 'next/enhanced-file-list' into feat/file-list-enhancements

ef3227f

feat: add generic breadcrumb component

6149a58

renamed toggle component

a4d4c0e

fixing broken stories

badd280

added copyright headers and adjusted theme names to account for Teams

1d08034

merging theme toggle

f539707

refactored breadcrumb to separate component, added styling

4e263f8

adds tests for breadcrumb

f6f6106

Merge remote-tracking branch 'origin/next/fluentui' into feat/file-li…

19a0064

…st-enhancements

added basic story for file composite

bb0763f

merge from next/fluentui

e2fbf68

fixes story name and heirachy placement

ebe30f0

adding stories for file composite and breadcrumb

4b65582

fixing property bindings on file-list

d04bbb9

feat: file-grid

4672407

adds a file grid option to the file-list-composite

refactor: move file dialogs up to composite

d3c6561

Merge branch 'main' into merge/from-main

90aa651

musale reviewed Feb 23, 2023

View reviewed changes

Mnickii added the Build: Storybook label Feb 23, 2023

gavinbarron added 6 commits February 27, 2023 10:41

adding reload logic to rename process

b9de2aa

adding file-grid and file-composite to react components

5771ab4

fixing generation for arbirary generic types in mgt-components

745c164

need to ensure Command is exported

0fb1ed9

resolving conflicts

2de2c03

adding file grid to composite stories

e3b0a65

gavinbarron mentioned this pull request Mar 11, 2023

feat: migrate to eslint #2125

Merged

6 tasks

gavinbarron added 3 commits March 21, 2023 15:00

wip

39f73f4

fixing breadcrumb logic to preserve driveId when navigating through f…

2851f8d

…olders

merge from next/fluentui

e6fdc87

fix to account for React wrapper not setting props before connectedCa…

c4830fa

…llback occurs

adding command bar for file upload and new folder commands

48046d0

fixing styling for drap + drop target styling

3757af9

musale reviewed Mar 29, 2023

View reviewed changes

gavinbarron added 2 commits April 14, 2023 21:06

merge from next/fluentui

40030f3

refactoring file upload progress to separate component

78d65b7

allows clearing of upload status notices and improves their layout in…

7d785be

… the composite

Merge remote-tracking branch 'origin/next/fluentui' into next/fix-grid

45f8631

remove duplicate object key from merge

656f294

resolved linting issues

a34c8fc

gavinbarron added the DO NOT MERGE label Jun 23, 2023

gavinbarron deleted the branch v3-feature-branch June 27, 2023 16:00

gavinbarron closed this Jun 27, 2023

gavinbarron mentioned this pull request Jun 27, 2023

feat: file grid #2564

Open

6 tasks

	class="${this.isSelected(f) ? 'file-row selected' : 'file-row'}"
	class="${classMap({'file-row': true, selected: this.isSelected(f)})}"

Comments

Conversation

gavinbarron commented Feb 23, 2023

PR Type

Description of the changes

PR checklist

Other information

Uh oh!

ghost commented Feb 23, 2023

Uh oh!

musale left a comment

Choose a reason for hiding this comment

Uh oh!

gavinbarron commented Feb 23, 2023

Uh oh!

github-actions bot commented Mar 10, 2023

Uh oh!

github-actions bot commented Mar 22, 2023

Uh oh!

gavinbarron commented Mar 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Mar 27, 2023

Uh oh!

github-actions bot commented Mar 28, 2023

Uh oh!

github-actions bot commented Mar 28, 2023

Uh oh!

github-actions bot commented Mar 28, 2023

Uh oh!

musale Mar 29, 2023

Choose a reason for hiding this comment

Uh oh!

musale commented Mar 29, 2023

Uh oh!

github-actions bot commented Apr 20, 2023

Uh oh!

github-actions bot commented Apr 20, 2023

Uh oh!

github-actions bot commented Apr 20, 2023

Uh oh!

github-actions bot commented May 9, 2023

Uh oh!

github-actions bot commented May 9, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

gavinbarron commented Mar 22, 2023 •

edited

Loading