Implement Plural Stacks (#528)

* Update README to create an empty commit * New onboarding layout (#531) * Update deps * Remove Stepper * Implement new Layout * Lint and remove old files * Add stacks to the marketplace (#533) * Bump design system version * Fetch stacks from API * Show app icons * Use different hues * Adjust spacings * Apply same grid as for repos * Remove comment Co-authored-by: David Hérault <[email protected]> * Add trending info to repositories (#539) * Add trending info to repositories * Bump design system version * Force correct order * Ignore case while sorting * Optimize imports * Add stack details view (#540) * Register stack view * Add bundle list * Remove console logs * Fix spacings * Add sidenav * Get verification info * Use collections instead of bundles * Fix GraphQL queries * Use new stack icon * Remove unused import * Add install panel for stacks (#546) * Fix merge issues (#555) * Change creator text * Fix merge issue * Onboarding applications selection (#545) * Start working on applications * Update deps * Display applications * Implement search in ApplicationsSelection * Use darkIcon * Add no search result state * Add stepsCli * Handle restart * Lint * Stack design updates (#556) * Add Stacks page to Onboarding (#553) * Start working on applications * Update deps * Display applications * Implement search in ApplicationsSelection * Use darkIcon * Add no search result state * Add stepsCli * Handle restart * Add Stack state * Add max selected state * Move some exports * Move Buffer * Implement OnboardingSidecarApplications * Stacks enhacements (#561) * Use collections instead of bundles to display stack apps * Bump design system version * Fix imports * Fix icon colors in profile security view * Use stack display names * Update redirect logic for stack installation (#568) * Revert dependency change (#570) * Improve stacks availability check (#569) * Improve stacks availability check * Fix logic * Fix logic * Stack: Change step two of the cloud shell demo (#558) * Add useQuickStack * Persist provider and applications * Stack fight * Add usePluralCommand and redesign onboarding layout * Complete commands * Remove debug token * Lint * Run yarn * Persist console * rm yarn.lock * Remove package-lock * Retrieve console * Adapt working * Skip demo * Update deps * Remove debug token Co-authored-by: Marcin Maciaszczyk <[email protected]> * fix merge Co-authored-by: Marcin Maciaszczyk <[email protected]> Co-authored-by: Sebastian Florek <[email protected]> Co-authored-by: michaeljguarino <[email protected]> Co-authored-by: michaeljguarino <[email protected]>
pluralsh · Sep 27, 2022 · cc6335d · cc6335d
1 parent 3ba3ceb
commit cc6335d
Show file tree

Hide file tree

Showing 59 changed files with 2,921 additions and 1,864 deletions.
diff --git a/README.md b/README.md
@@ -2,6 +2,7 @@
   <img src="www/public/logos/plural-full-logo-black.svg" width="30%" />
 </p>
 
+
 <h3 align="center">
   The fastest way to build great infrastructure
 </h3>

diff --git a/www/package.json b/www/package.json
@@ -25,17 +25,17 @@
   "dependencies": {
     "@absinthe/socket": "0.2.1",
     "@apollo/client": "3.6.9",
-    "@emotion/react": "11.10.0",
-    "@emotion/styled": "11.10.0",
+    "@emotion/react": "11.10.4",
+    "@emotion/styled": "11.10.4",
     "@gitbeaker/browser": "35.7.0",
     "@growthbook/growthbook": "0.18.1",
-    "@jest/types": "28.1.3",
-    "@nivo/core": "0.79.0",
-    "@nivo/geo": "0.79.1",
-    "@nivo/line": "0.79.1",
+    "@jest/types": "29.0.3",
+    "@nivo/core": "0.80.0",
+    "@nivo/geo": "0.80.0",
+    "@nivo/line": "0.80.0",
     "@octokit/core": "3.6.0",
     "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "13.3.0",
+    "@testing-library/react": "13.4.0",
     "apollo-absinthe-upload-link": "1.7.0",
     "buffer": "6.0.3",
     "country-code-lookup": "0.0.20",
@@ -47,8 +47,8 @@
     "fireworks-js": "1.4.1",
     "forge-core": "1.4.6",
     "fuse.js": "6.6.2",
-    "grommet": "2.25.3",
-    "honorable": "0.139.0",
+    "grommet": "2.26.0",
+    "honorable": "0.140.0",
     "honorable-recipe-mp": "0.3.0",
     "honorable-theme-default": "0.65.0",
     "js-yaml": "4.1.0",
@@ -57,7 +57,7 @@
     "moment": "2.29.4",
     "phoenix": "1.6.12",
     "pluralsh-absinthe-socket-apollo-link": "0.2.0",
-    "pluralsh-design-system": "1.205.0",
+    "pluralsh-design-system": "1.217.0",
     "prop-types": "15.8.1",
     "query-string": "7.1.1",
     "randomcolor": "0.6.2",
@@ -78,7 +78,7 @@
     "react-multiline-clamp": "2.0.0",
     "react-portal": "4.2.2",
     "react-resize-detector": "7.1.2",
-    "react-router-dom": "6.3.0",
+    "react-router-dom": "6.4.1",
     "react-sage": "0.3.16",
     "react-scripts": "5.0.1",
     "react-spinners": "0.13.4",
@@ -93,9 +93,9 @@
     "rehype-raw": "6.1.1",
     "slate": "0.82.1",
     "slate-history": "0.81.3",
-    "slate-react": "0.82.2",
+    "slate-react": "0.83.0",
     "styled-components": "5.3.5",
-    "uuid": "8.3.2",
+    "uuid": "9.0.0",
     "workbox-core": "6.5.4",
     "workbox-expiration": "6.5.4",
     "workbox-precaching": "6.5.4",
@@ -106,29 +106,29 @@
     "xterm-theme": "1.1.0"
   },
   "devDependencies": {
-    "@babel/core": "7.18.10",
-    "@babel/eslint-parser": "7.18.9",
-    "@babel/preset-env": "7.18.10",
+    "@babel/core": "7.19.1",
+    "@babel/eslint-parser": "7.19.1",
+    "@babel/preset-env": "7.19.1",
     "@babel/preset-react": "7.18.6",
     "@graphql-codegen/add": "3.2.1",
-    "@graphql-codegen/cli": "2.11.8",
+    "@graphql-codegen/cli": "2.13.0",
     "@graphql-codegen/introspection": "2.2.1",
     "@graphql-codegen/typescript": "2.7.3",
     "@graphql-codegen/typescript-operations": "2.5.3",
     "@graphql-codegen/typescript-react-apollo": "3.3.3",
     "@pluralsh/eslint-config-typescript": "2.3.0",
     "@pluralsh/stylelint-config": "1.0.0",
     "@types/randomcolor": "0.5.6",
-    "@typescript-eslint/eslint-plugin": "5.33.1",
-    "@typescript-eslint/parser": "5.33.1",
-    "concurrently": "7.3.0",
-    "eslint": "8.22.0",
+    "@typescript-eslint/eslint-plugin": "5.38.1",
+    "@typescript-eslint/parser": "5.38.1",
+    "concurrently": "7.4.0",
+    "eslint": "8.24.0",
     "eslint-config-pluralsh": "3.1.0",
     "eslint-plugin-import": "2.26.0",
     "postcss-import": "8.2.0",
     "serve": "14.0.1",
-    "source-map-explorer": "2.5.2",
-    "stylelint": "14.11.0",
+    "source-map-explorer": "2.5.3",
+    "stylelint": "14.12.1",
     "typescript": "4.8.3",
     "wait-on": "6.0.1"
   },

diff --git a/www/src/components/Plural.js b/www/src/components/Plural.js
@@ -61,6 +61,8 @@ import PackageDependencies from './repos/common/PackageDependencies'
 import ImagePullMetrics from './repos/common/ImagePullMetrics'
 import ImageVulnerabilities from './repos/common/ImageVulnerabilities'
 import Publisher from './publisher/Publisher'
+import StackApps from './stack/StackApps'
+import Stack from './stack/Stack'
 
 function EditBilling(props) {
   return (
@@ -246,6 +248,16 @@ export function PluralInner() {
                 element={<RepositoryEdit />}
               />
             </Route>
+            {/* --- STACK --- */}
+            <Route
+              path="/stack/:name"
+              element={<Stack />}
+            >
+              <Route
+                index
+                element={<StackApps />}
+              />
+            </Route>
             {/* --- HELM CHARTS --- */}
             <Route
               path="/charts/:chartId"

diff --git a/www/src/components/incidents/Responses.js b/www/src/components/incidents/Responses.js
@@ -110,8 +110,6 @@ function StatusSelector({ statuses, setStatuses }) {
     }
   }, [hasStatus, statuses, setStatuses])
 
-  console.log(statuses)
-
   return (
     <>
       <Box

diff --git a/www/src/components/layout/Sidebar.js b/www/src/components/layout/Sidebar.js
@@ -25,7 +25,7 @@ import {
 
 import { getPreviousUserData, wipeToken } from '../../helpers/authentication'
 import { CurrentUserContext, handlePreviousUserClick } from '../login/CurrentUser'
-import { useOnboarded } from '../shell/onboarding/useOnboarded'
+import useOnboarded from '../shell/onboarding/useOnboarded'
 
 import CreatePublisherModal from '../publisher/CreatePublisherModal'
 

diff --git a/www/src/components/marketplace/MarketplaceRepositories.js b/www/src/components/marketplace/MarketplaceRepositories.js
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
 import { Link, useSearchParams } from 'react-router-dom'
 import {
-  A, Br, Button, Div, Flex, H1, Hr, Span, useMediaQuery,
+  A, Br, Button, Div, Flex, H1, Hr, Span,
 } from 'honorable'
 import {
   ArrowTopRightIcon,
@@ -10,7 +10,6 @@ import {
   FiltersIcon,
   Input,
   MagnifyingGlassIcon,
-  RepositoryCard,
   Tab,
   TabList,
   TabPanel,
@@ -19,6 +18,9 @@ import Fuse from 'fuse.js'
 import styled from 'styled-components'
 import isEmpty from 'lodash/isEmpty'
 import capitalize from 'lodash/capitalize'
+import orderBy from 'lodash/orderBy'
+
+import { growthbook } from 'helpers/growthbook'
 
 import usePaginatedQuery from '../../hooks/usePaginatedQuery'
 
@@ -35,6 +37,8 @@ import PublisherSideCar from '../publisher/PublisherSideCar'
 import { MARKETPLACE_QUERY } from './queries'
 
 import MarketplaceSidebar from './MarketplaceSidebar'
+import MarketplaceStacks from './MarketplaceStacks'
+import { RepoCardList } from './RepoCardList'
 
 const searchOptions = {
   keys: ['name', 'description', 'tags.tag'],
@@ -52,73 +56,6 @@ const chipProps = {
 
 const sidebarWidth = 256 - 32
 
-function RepoCardList({
-  repositories, repoProps, maxWidth, stretchLastRow = false, size = 'small', ...props
-}) {
-  const flexBasis = '400px'
-
-  // Workaround that will render empty columns to align the last row.
-  // It is better to use bigger columns number to prevent issues on all kinds of viewports.
-  function fillEmptyColumns(columns) {
-    return (
-      <>
-        {[...Array(columns)].map((x, i) => (
-          <Flex
-            key={i}
-            flexGrow={1}
-            flexBasis={flexBasis}
-          />
-        ))}
-      </>
-    )
-  }
-
-  return (
-    <Flex
-      mx={-1}
-      align="stretch"
-      wrap="wrap"
-      {...props}
-    >
-      {
-        repositories.map(repository => (
-          <Flex
-            key={`${repository.id}flex`}
-            px={0.75}
-            marginBottom="large"
-            width="auto"
-            flexBasis={flexBasis}
-            flexGrow={1}
-            flexShrink={1}
-            minWidth="250px"
-            maxWidth={maxWidth || '800px'}
-          >
-            <RepositoryCard
-              key={repository.id}
-              as={Link}
-              to={`/repository/${repository.id}`}
-              color="text"
-              textDecoration="none"
-              width="100%"
-              title={repository.name}
-              imageUrl={repository.darkIcon || repository.icon}
-              publisher={repository.publisher?.name}
-              description={repository.description}
-              tags={repository.tags.map(({ tag }) => tag)}
-              priv={repository.private}
-              installed={!!repository.installation}
-              verified={repository.verified}
-              size={size}
-              {...repoProps}
-            />
-          </Flex>
-        ))
-      }
-      {!stretchLastRow && fillEmptyColumns(10)}
-    </Flex>
-  )
-}
-
 const StyledTabPanel = styled(TabPanel)(() => ({
   display: 'flex',
   flexDirection: 'column',
@@ -135,7 +72,6 @@ function MarketplaceRepositories({ installed, publisher }) {
   const [search, setSearch] = useState('')
   const [areFiltersOpen, setAreFiltersOpen] = useState(true)
   const tabStateRef = useRef()
-  const isDesktopLarge = useMediaQuery('up', 'desktopLarge')
 
   const [repositories, loadingRepositories, hasMoreRepositories, fetchMoreRepositories] = usePaginatedQuery(MARKETPLACE_QUERY,
     {
@@ -145,7 +81,7 @@ function MarketplaceRepositories({ installed, publisher }) {
     },
     data => data.repositories)
 
-  const shouldRenderFeatured = !categories.length && !tags.length && !installed && !search
+  const shouldRenderStacks = growthbook.isOn('stacks') && !categories.length && !tags.length && !installed && !search
 
   useEffect(() => {
     const { current } = scrollRef
@@ -178,8 +114,7 @@ function MarketplaceRepositories({ installed, publisher }) {
     )
   }
 
-  const sortedRepositories = repositories.slice()
-    .sort((a, b) => a.name.localeCompare(b.name))
+  const sortedRepositories = orderBy(repositories.slice(), ['trending', r => r.name.toLowerCase()], ['desc', 'asc'])
     .filter(repository => (categories.length ? categories.includes(repository.category.toLowerCase()) : true))
     .filter(repository => {
       if (!tags.length) return true
@@ -192,7 +127,9 @@ function MarketplaceRepositories({ installed, publisher }) {
 
   const fuse = new Fuse(sortedRepositories, searchOptions)
 
-  const resultRepositories = search ? fuse.search(search).map(({ item }) => item) : sortedRepositories
+  const resultRepositories = search
+    ? orderBy(fuse.search(search).map(({ item }) => item), ['trending', r => r.name.toLowerCase()], ['desc', 'asc'])
+    : sortedRepositories
 
   function handleClearToken(key, value) {
     const existing = searchParams.getAll(key)
@@ -212,29 +149,6 @@ function MarketplaceRepositories({ installed, publisher }) {
     setSearchParams({})
   }
 
-  function renderFeatured() {
-    if (publisher) return null
-
-    const featuredA = sortedRepositories.shift()
-    const featuredB = sortedRepositories.shift()
-
-    return (
-      <>
-        <H1 subtitle1>
-          Featured Repositories
-        </H1>
-        <RepoCardList
-          repositories={[featuredA, featuredB]}
-          repoProps={{ featured: true }}
-          marginTop="medium"
-          maxWidth="100%"
-          stretchLastRow
-          size={isDesktopLarge ? 'large' : 'medium'}
-        />
-      </>
-    )
-  }
-
   function renderTitle() {
     let title = installed ? 'Installed Repositories' : 'All Repositories'
 
@@ -413,11 +327,11 @@ function MarketplaceRepositories({ installed, publisher }) {
             position="relative"
             ref={scrollRef}
           >
-            {shouldRenderFeatured && renderFeatured()}
+            {shouldRenderStacks && <MarketplaceStacks />}
             {resultRepositories?.length > 0 && !publisher && (
               <H1
                 subtitle1
-                marginTop={shouldRenderFeatured ? 'xlarge' : 0}
+                marginTop={shouldRenderStacks ? 'xlarge' : 0}
               >
                 {renderTitle()}
               </H1>
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,6 +2,7 @@ @@
       <img src="www/public/logos/plural-full-logo-black.svg" width="30%" />
     </p>
     <h3 align="center">
       The fastest way to build great infrastructure
     </h3>
@@ Expand Down @@