Page Layouts - Added data collection layout #4652

halocline · 2025-01-10T19:20:12Z

Deploy Preview

What does this PR do?

Adds data collection page layout to grommet demo app.

Where should the reviewer start?

sandbox/grommet-app/pages/layouts.index.tsx

What testing has been done on this PR?

In addition to the feature you are implementing, have you checked the following:

General UX Checks

Small, medium, and large screen sizes
Cross-browsers (FireFox, Chrome, and Safari)
Light & dark modes
All hyperlinks route properly

Accessibility Checks

Keyboard interactions
Screen reader experience
Run WAVE accessibility plugin (Chrome)

Code Quality Checks

Console is free of warnings and errors
Passes E2E commit checks
Visual snapshots are reasonable

How should this be manually tested?

Any background context you want to provide?

What are the relevant issues?

Screenshots (if appropriate)

Should this PR be mentioned in Design System updates?

Is this change backwards compatible or is it a breaking change?

changeset-bot · 2025-01-10T19:20:15Z

⚠️ No Changeset found

Latest commit: a407a05

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.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

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

netlify · 2025-01-10T19:20:33Z

✅ Deploy Preview for unrivaled-bublanina-3a9bae ready!

Name	Link
🔨 Latest commit	`a407a05`
🔍 Latest deploy log	https://app.netlify.com/sites/unrivaled-bublanina-3a9bae/deploys/6781a1b84ca78a0008979bba
😎 Deploy Preview	https://deploy-preview-4652--unrivaled-bublanina-3a9bae.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

taysea · 2025-01-10T20:56:25Z

sandbox/grommet-app/src/components/RoutedAnchor/RoutedAnchor.tsx

+
+export const RoutedAnchor = ({ ...rest }: RoutedAnchorProps) => (
+  <Anchor {...rest} />
+);


Suggested change

);

);

taysea · 2025-01-10T20:56:31Z

sandbox/grommet-app/src/components/RoutedAnchor/index.ts

@@ -0,0 +1 @@
+export * from './RoutedAnchor';


Suggested change

export * from './RoutedAnchor';

export * from './RoutedAnchor';

taysea · 2025-01-10T20:56:52Z

sandbox/grommet-app/src/pages/layouts/components/index.ts

@@ -0,0 +1 @@
+export * from './Region';


Suggested change

export * from './Region';

export * from './Region';

taysea · 2025-01-10T20:57:27Z

sandbox/grommet-app/src/pages/layouts/index.tsx

+        <PageHeader title="Layouts" />
+        <List data={layouts} defaultItemProps={{ pad: { vertical: 'xxsmall' } }}>
+          {(item) => (
+            <RoutedAnchor key={item} as={Link} to={`/layouts/${item.toLowerCase()}`} label={item} />


Suggested change

<RoutedAnchor key={item} as={Link} to={`/layouts/${item.toLowerCase()}`} label={item} />

<RoutedAnchor key={item} alignSelf="start" as={Link} to={`/layouts/${item.toLowerCase()}`} label={item} />

taysea · 2025-01-10T20:57:38Z

sandbox/grommet-app/src/pages/layouts/index.tsx

+  <Route key="dashboard" path="/layouts/dashboard" element={<div>Dashboard</div>} />
+]
+
+export { Layouts, routes };


Suggested change

export { Layouts, routes };

export { Layouts, routes };

taysea · 2025-01-10T20:58:05Z

sandbox/grommet-app/src/pages/layouts/kinds/Collection/Collection.tsx

+      </PageContent>
+    </Page >
+  );
+}


Suggested change

}

}

taysea · 2025-01-10T20:58:48Z

sandbox/grommet-app/src/pages/layouts/kinds/Collection/DataTableActions.tsx

+      <Menu label="Actions" items={tableActions} />
+    </Box>
+  );
+}


Suggested change

}

}

taysea · 2025-01-10T20:58:58Z

sandbox/grommet-app/src/pages/layouts/kinds/Collection/DataView.tsx

+      />
+    </Data>
+  );
+};


Suggested change

};

};

taysea · 2025-01-10T20:59:24Z

sandbox/grommet-app/src/pages/layouts/kinds/Collection/PageActions.tsx

+      />
+    </Box>
+  );
+}


Suggested change

}

}

taysea · 2025-01-10T20:59:30Z

sandbox/grommet-app/src/pages/layouts/kinds/Collection/index.ts

@@ -0,0 +1 @@
+export * from './Collection';


Suggested change

export * from './Collection';

export * from './Collection';

taysea · 2025-01-10T21:00:05Z

sandbox/grommet-app/src/pages/layouts/kinds/Collection/tableColumns.tsx

+  { property: 'type', header: 'Type' },
+];
+
+export { privateCloudColumns, publicCloudColumns };


Suggested change

export { privateCloudColumns, publicCloudColumns };

export { privateCloudColumns, publicCloudColumns };

taysea · 2025-01-10T21:00:44Z

sandbox/grommet-app/src/pages/layouts/kinds/Collection/CollectionMenu.tsx

+      })}
+    </Box >
+  );
+}


Suggested change

}

}

taysea · 2025-01-10T21:03:14Z

sandbox/grommet-app/src/pages/layouts/kinds/Collection/Collection.tsx

+          onActive={index => setCloudType(cloudTypes[index])}
+        >
+          <Tab title="Private cloud">
+            <Grid columns={['auto', 'flex']} gap="large" pad={{ top: 'medium' }} align="start">


Soft opinion/refinement -- should we set a max-width on the left column in case the menu labels ever gotten too long?

Suggested change

<Grid columns={['auto', 'flex']} gap="large" pad={{ top: 'medium' }} align="start">

<Grid columns={[['auto', 'medium'], 'flex']} gap="large" pad={{ top: 'medium' }} align="start">

I see now that the CollectionMenu is already setting its own min/max, so feel free to ignore this.

Yeah, I might come back to this. It'd be nice to have the Grid fully in charge, but when I did [['auto', 'medium'], ...] it was always growing to medium because the table had room to flex and the menu width just felt excessive.

If only we had greater granularity in our t-shirt sizes... 🤪

taysea · 2025-01-10T21:05:37Z

sandbox/grommet-app/src/pages/layouts/kinds/Collection/Collection.tsx

+                skeleton={undefined}
+                round="small"
+              >
+                <CollectionMenu items={dataSets[cloudType]} selected={dataSet} onSelect={setDataSet} />


Refinement -- seems like we have this repeated here and line 105. Should we pull it out into a variable to simplify any logic changes in future

const collectionMenu = <CollectionMenu .../> ... <ContentPane ...> {collectionMenu} </ContentPane>

taysea

Thank you! This will be helpful.

halocline added 10 commits January 8, 2025 14:28

Create layouts route in demo-app

a950c0a

Added RoutedAnchor component

92be68d

Started data collection page layout

b0ebf8c

Progress on data collection layout

233f8d3

Added VM data

6dab857

Refactor

e6c666e

customize columns based on cloud type

e316d7c

Refactoring

4f05d00

Adjust Grid content alignment

7ad7d5e

Added back button

ae68edf

halocline requested a review from taysea January 10, 2025 19:22

taysea reviewed Jan 10, 2025

View reviewed changes

halocline added 2 commits January 10, 2025 15:36

Added lines at end of files and small refactor

7605773

remove excessive line

a407a05

halocline requested a review from taysea January 10, 2025 22:42

taysea approved these changes Jan 10, 2025

View reviewed changes

halocline merged commit f9c370c into master Jan 10, 2025
9 of 10 checks passed

halocline deleted the layout-grids branch January 10, 2025 23:35

	export * from './RoutedAnchor';
	export * from './RoutedAnchor';

	<RoutedAnchor key={item} as={Link} to={`/layouts/${item.toLowerCase()}`} label={item} />
	<RoutedAnchor key={item} alignSelf="start" as={Link} to={`/layouts/${item.toLowerCase()}`} label={item} />

	export { privateCloudColumns, publicCloudColumns };
	export { privateCloudColumns, publicCloudColumns };

	<Grid columns={['auto', 'flex']} gap="large" pad={{ top: 'medium' }} align="start">
	<Grid columns={[['auto', 'medium'], 'flex']} gap="large" pad={{ top: 'medium' }} align="start">

Page Layouts - Added data collection layout #4652

Page Layouts - Added data collection layout #4652

Uh oh!

Conversation

halocline commented Jan 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

Where should the reviewer start?

What testing has been done on this PR?

How should this be manually tested?

Any background context you want to provide?

What are the relevant issues?

Screenshots (if appropriate)

Should this PR be mentioned in Design System updates?

Is this change backwards compatible or is it a breaking change?

Uh oh!

changeset-bot bot commented Jan 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

netlify bot commented Jan 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for unrivaled-bublanina-3a9bae ready!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

halocline commented Jan 10, 2025 •

edited

Loading

changeset-bot bot commented Jan 10, 2025 •

edited

Loading

netlify bot commented Jan 10, 2025 •

edited

Loading