From 82adc31d8ef67704f44fed566335176cca27cf18 Mon Sep 17 00:00:00 2001 From: rudouglas Date: Fri, 4 Jun 2021 14:59:32 +0100 Subject: [PATCH] feat: pack list view Added alternate List view for all packs which is responsive to view size Changed the name of a couple of components to keep them in line with functionality: `PackList` -> `PackGrid` (the list view uses `PackList` and vice-versa `PackTile` -> `PackGridTile` (to differentiate from `PackListTile` --- src/components/PackGrid.js | 33 +++++ .../{PackTile.js => PackGridTile.js} | 6 +- src/components/PackList.js | 10 +- src/components/PackListTile.js | 120 ++++++++++++++++++ src/pages/observability-packs.js | 93 ++++++++++---- 5 files changed, 228 insertions(+), 34 deletions(-) create mode 100644 src/components/PackGrid.js rename src/components/{PackTile.js => PackGridTile.js} (96%) create mode 100644 src/components/PackListTile.js diff --git a/src/components/PackGrid.js b/src/components/PackGrid.js new file mode 100644 index 000000000..e0a3f5983 --- /dev/null +++ b/src/components/PackGrid.js @@ -0,0 +1,33 @@ +import React from 'react'; +import { css } from '@emotion/react'; +import PropTypes from 'prop-types'; + +const PackGrid = ({ children, className }) => { + return ( +
+ {children} +
+ ); +}; + +PackGrid.propTypes = { + children: PropTypes.node.isRequired, + className: PropTypes.string, +}; + +export default PackGrid; diff --git a/src/components/PackTile.js b/src/components/PackGridTile.js similarity index 96% rename from src/components/PackTile.js rename to src/components/PackGridTile.js index 7b7d86220..6370d62e0 100644 --- a/src/components/PackTile.js +++ b/src/components/PackGridTile.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { css } from '@emotion/react'; import { Link, Icon, Surface } from '@newrelic/gatsby-theme-newrelic'; -const PackTile = ({ +const PackGridTile = ({ name, description, featuredImageUrl, @@ -85,7 +85,7 @@ const PackTile = ({ ); -PackTile.propTypes = { +PackGridTile.propTypes = { name: PropTypes.string.isRequired, description: PropTypes.string.isRequired, featuredImageUrl: PropTypes.string, @@ -94,4 +94,4 @@ PackTile.propTypes = { className: PropTypes.string, }; -export default PackTile; +export default PackGridTile; diff --git a/src/components/PackList.js b/src/components/PackList.js index 1d7ac717b..5636a2890 100644 --- a/src/components/PackList.js +++ b/src/components/PackList.js @@ -7,17 +7,9 @@ const PackList = ({ children, className }) => {
{children} diff --git a/src/components/PackListTile.js b/src/components/PackListTile.js new file mode 100644 index 000000000..2e9449c00 --- /dev/null +++ b/src/components/PackListTile.js @@ -0,0 +1,120 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { css } from '@emotion/react'; +import { Link, Icon, Surface } from '@newrelic/gatsby-theme-newrelic'; + +const PackListTile = ({ + name, + description, + featuredImageUrl, + supportLevel, + to, + className, +}) => ( + +
+
+ {featuredImageUrl && ( + Preview of the pack in action + )} +
+
+
+

+ {name}{' '} + {supportLevel === 'NEWRELIC' && ( + + + + )} +

+
+

+ {description} +

+
+
+ +); + +PackListTile.propTypes = { + name: PropTypes.string.isRequired, + description: PropTypes.string.isRequired, + featuredImageUrl: PropTypes.string, + supportLevel: PropTypes.string, + to: PropTypes.string.isRequired, + className: PropTypes.string, +}; + +export default PackListTile; diff --git a/src/pages/observability-packs.js b/src/pages/observability-packs.js index 790e1cd00..6aa2e2966 100644 --- a/src/pages/observability-packs.js +++ b/src/pages/observability-packs.js @@ -3,7 +3,9 @@ import { graphql } from 'gatsby'; import React, { useState, useEffect } from 'react'; import DevSiteSeo from '../components/DevSiteSeo'; import { css } from '@emotion/react'; -import PackTile from '../components/PackTile'; +import PackGrid from '../components/PackGrid'; +import PackGridTile from '../components/PackGridTile'; +import PackListTile from '../components/PackListTile'; import PackList from '../components/PackList'; import { SearchInput, Button, Dropdown } from '@newrelic/gatsby-theme-newrelic'; import { useQueryParam, StringParam } from 'use-query-params'; @@ -34,6 +36,11 @@ const ObservabilityPacksPage = ({ data, location }) => { } }, [querySearch, queryFilter, querySort]); + const [packView, setPackView] = useState('GRID_VIEW'); + + useEffect(() => { + setPackView(packView); + }, [packView]); useEffect(() => { let tempFilteredPacks = o11yPacks.filter( (pack) => @@ -239,30 +246,72 @@ const ObservabilityPacksPage = ({ data, location }) => {
- - + +
- - {filteredPacks.map((pack) => { - // TODO: Figure out what image should be shown - // if not added to API explicitly - const imgSrc = pack.dashboards?.[0]?.screenshots?.[0]; - return ( - - ); - })} - + {packView === 'GRID_VIEW' ? ( + + {filteredPacks.map((pack) => { + // TODO: Figure out what image should be shown + // if not added to API explicitly + const imgSrc = pack.dashboards?.[0]?.screenshots?.[0]; + return ( + + ); + })} + + ) : ( + + {filteredPacks.map((pack) => { + // TODO: Figure out what image should be shown + // if not added to API explicitly + const imgSrc = pack.dashboards?.[0]?.screenshots?.[0]; + return ( + + ); + })} + + )}
);