implement new app designs (#1458)

Co-authored-by: michaeljguarino <[email protected]>

Author: jsladerman

apps/core/lib/core/pubsub/protocols/cacheable.ex

@@ -38,7 +38,8 @@ defimpl Core.PubSub.Cacheable, for: Core.PubSub.ClusterDependencyCreated do
   end
 end
 
-defimpl Core.PubSub.Cacheable, for: Core.PubSub.UserDeleted do
+
+defimpl Core.PubSub.Cacheable, for: [Core.PubSub.UserDeleted, Core.PubSub.UserCreated] do
   def cache(%{item: %{id: user_id}}), do: {:del, {:login, user_id}, nil}
 end
 

apps/core/lib/core/schema/invite.ex

@@ -40,7 +40,7 @@ defmodule Core.Schema.Invite do
     |> foreign_key_constraint(:oidc_provider_id)
     |> foreign_key_constraint(:service_account_id)
     |> unique_constraint(:secure_id)
-    |> unique_constraint(:email)
+    |> unique_constraint(:email, message: "the user with this email has already been invited")
     |> validate_format(:email, @email_re)
     |> validate_required([:email, :account_id,  :secure_id])
   end

apps/core/test/pubsub/cache/users_test.exs

@@ -19,6 +19,21 @@ defmodule Core.PubSub.Consumers.Cache.UsersTest do
     test "it will wipe the login cache" do
       user = insert(:user)
 
+      Core.Cache.put({:login, user.id}, user)
+
+      event = %PubSub.UserDeleted{item: user}
+      Cache.handle_event(event)
+
+      refute Core.Cache.get({:login, user.id})
+    end
+  end
+
+  describe "UserCreated" do
+    test "it will wipe the login cache" do
+      user = insert(:user)
+
+      Core.Cache.put({:login, user.id}, user)
+
       event = %PubSub.UserDeleted{item: user}
       Cache.handle_event(event)
 

www/public/login-bg-img.webp

@@ -1,44 +1,46 @@
-import 'react-toggle/style.css'
-import { Suspense, lazy } from 'react'
-import { Route, Routes } from 'react-router-dom'
 import { ApolloProvider } from '@apollo/client'
-import { IntercomProvider } from 'react-use-intercom'
-import { Grommet, ThemeType } from 'grommet'
+import { mergeDeep } from '@apollo/client/utilities'
+import { GrowthBook, GrowthBookProvider } from '@growthbook/growthbook-react'
 import {
   BreadcrumbsProvider,
   GlobalStyle,
-  honorableThemeDark,
-  honorableThemeLight,
-  styledThemeDark,
-  styledThemeLight,
   useThemeColorMode,
 } from '@pluralsh/design-system'
 import { MarkdocContextProvider } from '@pluralsh/design-system/dist/markdoc'
+import { Grommet, ThemeType } from 'grommet'
 import {
   CssBaseline,
   ThemeProvider as HonorableThemeProvider,
   mergeTheme,
 } from 'honorable'
+import mpRecipe from 'honorable-recipe-mp'
+import { Suspense, lazy } from 'react'
+import { Route, Routes } from 'react-router-dom'
+import 'react-toggle/style.css'
+import { IntercomProvider } from 'react-use-intercom'
 import styled, {
   StyleSheetManager,
   ThemeProvider as StyledThemeProvider,
 } from 'styled-components'
-import { mergeDeep } from '@apollo/client/utilities'
-import mpRecipe from 'honorable-recipe-mp'
-import { GrowthBook, GrowthBookProvider } from '@growthbook/growthbook-react'
 
 import { shouldForwardProp } from './utils/shouldForwardProp'
 
 import { PluralErrorBoundary } from './components/utils/PluralErrorBoundary'
 
-import { client } from './helpers/client'
-import { INTERCOM_APP_ID } from './constants'
-import { DEFAULT_THEME } from './theme'
-import { HistoryRouter, browserHistory } from './router'
-import { growthbook } from './helpers/growthbook'
+import {
+  polyfilledHonorableThemeDark,
+  polyfilledHonorableThemeLight,
+  polyfilledStyledThemeDark,
+  polyfilledStyledThemeLight,
+} from './styles'
 import { OverlayContextProvider } from './components/layout/Overlay'
-import NavContextProvider from './contexts/NavigationContext'
 import { CursorPositionProvider } from './components/utils/CursorPosition'
+import { INTERCOM_APP_ID } from './constants'
+import NavContextProvider from './contexts/NavigationContext'
+import { client } from './helpers/client'
+import { growthbook } from './helpers/growthbook'
+import { HistoryRouter, browserHistory } from './router'
+import { DEFAULT_THEME } from './theme'
 
 const Plural = lazy(() => import('./components/Plural'))
 const Invite = lazy(() => import('./components/Invite'))
@@ -105,7 +107,9 @@ function App() {
   const colorMode = useThemeColorMode()
 
   const honorableTheme = mergeTheme(
-    colorMode === 'light' ? honorableThemeLight : honorableThemeDark,
+    colorMode === 'light'
+      ? polyfilledHonorableThemeLight
+      : polyfilledHonorableThemeDark,
     {
       global: [
         // This provides the mp spacing props to honorable
@@ -114,7 +118,10 @@ function App() {
       ],
     }
   )
-  const styledTheme = colorMode === 'light' ? styledThemeLight : styledThemeDark
+  const styledTheme =
+    colorMode === 'light'
+      ? polyfilledStyledThemeLight
+      : polyfilledStyledThemeDark
   const mergedStyledTheme = mergeDeep(DEFAULT_THEME, styledTheme)
 
   const routes = (
@@ -182,6 +189,7 @@ function App() {
         <IntercomProvider appId={INTERCOM_APP_ID}>
           <StyleSheetManager shouldForwardProp={shouldForwardProp}>
             <HonorableThemeProvider theme={honorableTheme}>
+              {/* @ts-ignore - this will be fixed when we bump DS */}
               <StyledThemeProvider theme={mergedStyledTheme}>
                 <GrowthBookProvider
                   growthbook={growthbook as any as GrowthBook}

www/src/App.tsx

@@ -76,6 +76,11 @@ const Clusters = lazy(() =>
     default: module.Clusters,
   }))
 )
+const AllClusters = lazy(() =>
+  import('./overview/clusters/all/AllClusters').then((module) => ({
+    default: module.AllClusters,
+  }))
+)
 const SelfHostedClusters = lazy(() =>
   import('./overview/clusters/self-hosted/SelfHostedClusters').then(
     (module) => ({
@@ -646,10 +651,14 @@ export function PluralInner() {
                     element={
                       <Navigate
                         replace
-                        to="self-hosted"
+                        to="all"
                       />
                     }
                   />
+                  <Route
+                    path="all"
+                    element={<AllClusters />}
+                  />
                   <Route
                     path="self-hosted"
                     element={<SelfHostedClusters />}

www/src/components/Plural.tsx

@@ -1,32 +1,30 @@
-import { ReactElement } from 'react'
-
-import LoadingIndicator from '../utils/LoadingIndicator'
+import { ClusterFragment, useRepositoryQuery } from '../../generated/graphql'
 import { EmptyListMessage } from '../overview/clusters/misc'
-import { Cluster, useRepositoryQuery } from '../../generated/graphql'
+import LoadingIndicator from '../utils/LoadingIndicator'
 
-import { GqlError } from '../utils/Alert'
-import { useNavigate, useParams } from 'react-router-dom'
-import { useTheme } from 'styled-components'
 import {
-  IconFrame,
-  Flex,
+  ArrowTopRightIcon,
+  Button,
   Card,
   Chip,
+  Flex,
   GearTrainIcon,
-  Button,
-  ArrowTopRightIcon,
+  IconFrame,
 } from '@pluralsh/design-system'
-import { Body1BoldP } from '../utils/Typography'
-import { ensureURLValidity } from '../../utils/url'
+import { useNavigate, useParams } from 'react-router-dom'
+import { useTheme } from 'styled-components'
 import { ignoreEvent } from '../../utils/ignore-event'
+import { ensureURLValidity } from '../../utils/url'
+import { GqlError } from '../utils/Alert'
+import { Body1BoldP } from '../utils/Typography'
 
 const CONSOLE_APP_NAME = 'console'
 
-type ClusterAppsProps = { cluster: Cluster }
-
 export function ClusterConsole({
   cluster: { consoleUrl },
-}: ClusterAppsProps): ReactElement {
+}: {
+  cluster: ClusterFragment
+}) {
   const theme = useTheme()
   const navigate = useNavigate()
   const { clusterId } = useParams()

www/src/components/cluster/ClusterConsole.tsx

@@ -5,7 +5,7 @@ import { useMutation } from '@apollo/client'
 
 import subscriptionContext from '../../contexts/SubscriptionContext'
 
-import { Cluster } from '../../generated/graphql'
+import { ClusterFragment } from '../../generated/graphql'
 import { ClusterPicker } from '../utils/ClusterPicker'
 import { GqlError } from '../utils/Alert'
 
@@ -16,7 +16,7 @@ import UpgradeNeededModal from './UpgradeNeededModal'
 type ClusterDependencyModalProps = {
   open: boolean
   setOpen: Dispatch<boolean>
-  destination: Cluster
+  destination: ClusterFragment
 }
 
 export function ClusterDependencyModal({
@@ -25,7 +25,7 @@ export function ClusterDependencyModal({
   destination,
 }: ClusterDependencyModalProps) {
   const { isPaidPlan, isTrialPlan } = useContext(subscriptionContext)
-  const [source, setSource] = useState<Cluster | undefined>()
+  const [source, setSource] = useState<ClusterFragment | undefined>()
 
   const close = useCallback(() => {
     setOpen(false)
@@ -42,7 +42,7 @@ export function ClusterDependencyModal({
   )
 
   const filterSources = useCallback(
-    (s: Cluster) => {
+    (s: ClusterFragment) => {
       const d = destination
 
       return (

www/src/components/cluster/ClusterDependencyModal.tsx

@@ -1,18 +1,18 @@
 import { A } from 'honorable'
 import moment from 'moment'
 import { Tooltip } from '@pluralsh/design-system'
-import { Dispatch, ReactElement } from 'react'
+import { Dispatch } from 'react'
 import { Link } from 'react-router-dom'
 
-import { Cluster } from '../../generated/graphql'
+import { ClusterFragment } from '../../generated/graphql'
 import CopyButton from '../utils/CopyButton'
 import ClusterHealth from '../overview/clusters/ClusterHealth'
 import ClusterOwner from '../overview/clusters/ClusterOwner'
 import { InfoPanel } from '../utils/InfoPanel'
 import Prop from '../utils/Prop'
 
 type ClusterMetadataPanelProps = {
-  cluster: Cluster
+  cluster: ClusterFragment
   open: boolean
   setOpen: Dispatch<boolean>
 }
@@ -21,7 +21,7 @@ export default function ClusterMetadataPanel({
   cluster,
   open,
   setOpen,
-}: ClusterMetadataPanelProps): ReactElement | null {
+}: ClusterMetadataPanelProps) {
   if (!open) return null
 
   return (

www/src/components/cluster/ClusterMetadataPanel.tsx

@@ -4,7 +4,7 @@ import { Dispatch, useCallback, useContext, useState } from 'react'
 import isNil from 'lodash/isNil'
 import { useMutation } from '@apollo/client'
 
-import { Cluster } from '../../generated/graphql'
+import { ClusterFragment } from '../../generated/graphql'
 import { ClusterPicker } from '../utils/ClusterPicker'
 import { GqlError } from '../utils/Alert'
 import { ensureURLValidity } from '../../utils/url'
@@ -18,7 +18,7 @@ import ClustersContext from '../../contexts/ClustersContext'
 type ClusterPromoteModalProps = {
   open: boolean
   setOpen: Dispatch<boolean>
-  destination: Cluster
+  destination: ClusterFragment
 }
 
 export function ClusterPromoteModal({