feat: New getting started section

assets/src/components/cd/clusters/Clusters.tsx

@@ -5,6 +5,7 @@ import {
   TabPanel,
   Table,
   useSetBreadcrumbs,
+  WrapWithIf,
 } from '@pluralsh/design-system'
 import { useDebounce } from '@react-hooks-library/core'
 import { Row } from '@tanstack/react-table'
@@ -60,6 +61,7 @@ import { useProjectId } from '../../contexts/ProjectsContext'
 import { cdClustersColumns } from './ClustersColumns'
 import { DemoTable } from './ClustersDemoTable'
 import CreateCluster from './create/CreateCluster'
+import { GettingStartedBlock } from '../../home/GettingStarted.tsx'
 
 export const CD_CLUSTERS_BASE_CRUMBS: Breadcrumb[] = [
   { label: 'cd', url: '/cd' },
@@ -106,6 +108,7 @@ export default function Clusters() {
   const navigate = useNavigate()
   const projectId = useProjectId()
   const cdIsEnabled = useCDEnabled()
+  const showGettingStarted = true // TODO
   const tabStateRef = useRef<any>(null)
   const [statusFilter, setStatusFilter] = useState<ClusterStatusTabKey>('ALL')
   const [selectedTagKeys, setSelectedTagKeys] = useState(new Set<Key>())
@@ -239,17 +242,35 @@ export default function Clusters() {
         stateRef={tabStateRef}
         css={{ height: '100%', overflow: 'hidden' }}
       >
-        <ClustersTable
-          fullHeightWrap
-          data={tableData || []}
-          refetch={refetch}
-          virtualizeRows
-          hasNextPage={pageInfo?.hasNextPage}
-          fetchNextPage={fetchNextPage}
-          isFetchingNextPage={loading}
-          reactVirtualOptions={DEFAULT_REACT_VIRTUAL_OPTIONS}
-          onVirtualSliceChange={setVirtualSlice}
-        />
+        <WrapWithIf
+          condition={showGettingStarted}
+          wrapper={
+            <div
+              css={{
+                display: 'flex',
+                border: theme.borders['fill-two'],
+                borderRadius: theme.borderRadiuses.medium,
+                flexDirection: 'column',
+                overflow: 'hidden',
+                height: '100%',
+              }}
+            />
+          }
+        >
+          <ClustersTable
+            flush={showGettingStarted}
+            fullHeightWrap={!showGettingStarted}
+            data={tableData || []}
+            refetch={refetch}
+            virtualizeRows
+            hasNextPage={pageInfo?.hasNextPage}
+            fetchNextPage={fetchNextPage}
+            isFetchingNextPage={loading}
+            reactVirtualOptions={DEFAULT_REACT_VIRTUAL_OPTIONS}
+            onVirtualSliceChange={setVirtualSlice}
+          />
+          {showGettingStarted && <GettingStartedBlock />}
+        </WrapWithIf>
       </TabPanel>
     </div>
   ) : (

assets/src/components/home/GettingStarted.tsx

@@ -0,0 +1,104 @@
+import { Button, Card, ConfettiIcon, Flex } from '@pluralsh/design-system'
+import { Body1BoldP, Body2P } from '../utils/typography/Text.tsx'
+import { useTheme } from 'styled-components'
+
+export function GettingStartedPopup() {
+  const theme = useTheme()
+
+  return (
+    <div
+      css={{
+        backdropFilter: 'blur(4px)',
+        inset: 0,
+        position: 'absolute',
+        zIndex: theme.zIndexes.modal,
+      }}
+    >
+      <Card
+        css={{
+          backgroundColor: theme.colors['fill-one'],
+          border: theme.borders.input,
+          boxShadow: theme.boxShadows.modal,
+          left: '50%',
+          padding: theme.spacing.xxlarge,
+          position: 'absolute',
+          top: 88,
+          transform: 'translateX(-50%)',
+        }}
+      >
+        <GettingStartedContent />
+      </Card>
+    </div>
+  )
+}
+
+export function GettingStartedBlock() {
+  const theme = useTheme()
+
+  return (
+    <Card
+      css={{
+        backgroundColor: theme.colors['fill-one'],
+        border: 'none',
+        borderTop: theme.borders['fill-two'],
+        borderRadius: 0,
+        display: 'flex',
+        flexGrow: 1,
+        justifyContent: 'center',
+        padding: theme.spacing.xxxlarge,
+      }}
+    >
+      <GettingStartedContent />
+    </Card>
+  )
+}
+
+export function GettingStartedContent() {
+  const theme = useTheme()
+
+  return (
+    <div
+      css={{
+        alignItems: 'center',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: theme.spacing.medium,
+        width: 576,
+      }}
+    >
+      <ConfettiIcon
+        size={64}
+        color={'icon-primary'}
+      />
+      <Body1BoldP>Congrats on deploying your Plural Console!</Body1BoldP>
+      <Body2P css={{ color: theme.colors['text-light'], textAlign: 'center' }}>
+        To get the most out of the Continuous Deployment (CD) experience, you
+        can begin to add more clusters. Check out the docs or contact us to
+        learn more.
+      </Body2P>
+      <Flex
+        gap="xsmall"
+        marginTop={theme.spacing.xsmall}
+      >
+        <Button secondary>Dismiss</Button>
+        <Button
+          floating
+          as="a"
+          href="https://www.plural.sh/contact"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Contact the team
+        </Button>
+        <Button
+          as="a"
+          href="https://docs.plural.sh/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Read docs
+        </Button>
+      </Flex>
+    </div>
+  )
+}

assets/src/components/home/Home.tsx

@@ -8,44 +8,49 @@ import { DeploymentsCard } from './deployments/DeploymentsCard'
 import { PrCard } from './pullrequests/PrCard'
 import { ServiceCatalogs } from './ServiceCatalog.tsx'
 import { ConstraintViolationsCard } from './violations/ConstraintViolationsCard'
+import { GettingStartedPopup } from './GettingStarted.tsx'
 
 const breadcrumbs: Breadcrumb[] = [{ label: 'home', url: '/' }]
 
 export default function Home() {
   const theme = useTheme()
   const isManager = useIsManager()
+  const showGettingStarted = true // TODO
 
   useSetBreadcrumbs(breadcrumbs)
 
   return (
-    <ResponsivePageFullWidth maxContentWidth={1440}>
-      <div
-        css={{
-          display: 'flex',
-          flexDirection: 'column',
-          gap: theme.spacing.large,
-          paddingBottom: theme.spacing.large,
-        }}
-      >
-        <ClusterOverviewCard />
-        <ServiceCatalogs />
-        <AiThreads />
-        {isManager && <ConstraintViolationsCard />}
+    <>
+      {showGettingStarted && <GettingStartedPopup />}
+      <ResponsivePageFullWidth maxContentWidth={1440}>
         <div
           css={{
             display: 'flex',
             flexDirection: 'column',
             gap: theme.spacing.large,
-
-            '@media (min-width: 1168px)': {
-              flexDirection: 'row',
-            },
+            paddingBottom: theme.spacing.large,
           }}
         >
-          <PrCard />
-          <DeploymentsCard />
+          <ClusterOverviewCard />
+          <ServiceCatalogs />
+          <AiThreads />
+          {isManager && <ConstraintViolationsCard />}
+          <div
+            css={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: theme.spacing.large,
+
+              '@media (min-width: 1168px)': {
+                flexDirection: 'row',
+              },
+            }}
+          >
+            <PrCard />
+            <DeploymentsCard />
+          </div>
         </div>
-      </div>
-    </ResponsivePageFullWidth>
+      </ResponsivePageFullWidth>
+    </>
   )
 }