8000 Add org plan and num projects to organization action card (#35035) · CodersSampling/supabase@5376444 · GitHub
[go: up one dir, main page]
Skip to content

Commit 5376444

Browse files
joshenlimjoshenlim
authored
Add org plan and num projects to organization action card (supabase#35035)
* Add org plan and num projects to organization action card * Small fix to feature preview modal
1 parent 5d1bec7 commit 5376444

File tree

3 files changed

+24
-26
lines changed

3 files changed

+24
-26
lines changed

‎apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ExternalLink, Eye, EyeOff, FlaskConical } from 'lucide-react'
22
import Link from 'next/link'
3-
import { useEffect, useState } from 'react'
3+
import { useEffect } from 'react'
44

55
import { useParams } from 'common'
66
import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
@@ -36,13 +36,11 @@ const FeaturePreviewModal = () => {
3636
}
3737
}
3838

39-
const selectedFeaturePreview =
39+
const selectedFeatureKey =
4040
snap.selectedFeaturePreview === ''
4141
? FEATURE_PREVIEWS.filter((feature) => isReleasedToPublic(feature))[0].key
4242
: snap.selectedFeaturePreview
4343

44-
const [selectedFeatureKey, setSelectedFeatureKey] = useState<string>(selectedFeaturePreview)
45-
4644
const { flags, onUpdateFlag } = featurePreviewContext
4745
const selectedFeature = FEATURE_PREVIEWS.find((preview) => preview.key === selectedFeatureKey)
4846
const isSelectedFeatureEnabled = flags[selectedFeatureKey]
@@ -65,18 +63,8 @@ const FeaturePreviewModal = () => {
6563

6664
function handleCloseFeaturePreviewModal() {
6765
snap.setShowFeaturePreviewModal(false)
68-
snap.setSelectedFeaturePreview(FEATURE_PREVIEWS[0].key)
6966
}
7067

71-
// this modal can be triggered on other pages
72-
// Update local state when valtio state changes
73-
74-
useEffect(() => {
75-
if (snap.selectedFeaturePreview !== '') {
76-
setSelectedFeatureKey(snap.selectedFeaturePreview)
77-
}
78-
}, [snap.selectedFeaturePreview])
79-
8068
useEffect(() => {
8169
if (snap.showFeaturePreviewModal) {
8270
sendEvent({
@@ -109,7 +97,7 @@ const FeaturePreviewModal = () => {
10997
return (
11098
<div
11199
key={feature.key}
112-
onClick={() => setSelectedFeatureKey(feature.key)}
100+
onClick={() => snap.setSelectedFeaturePreview(feature.key)}
113101
className={cn(
114102
'flex items-center space-x-3 p-4 border-b cursor-pointer bg transition',
115103
selectedFeatureKey === feature.key ? 'bg-surface-300' : 'bg-surface-100'

‎apps/studio/components/ui/ActionCard.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export const ActionCard = (card: {
3030
</div>
3131
<div className="flex flex-col gap-0">
3232
<h3 className="text-sm text-foreground mb-0">{card.title}</h3>
33-
<p className="text-xs text-foreground-light">{card.description}</p>
33+
<pre className="text-xs text-foreground-light font-sans">{card.description}</pre>
3434
</div>
3535
</div>
3636
</Card>

‎apps/studio/pages/organizations.tsx

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,15 @@ import DefaultLayout from 'components/layouts/DefaultLayout'
77
import { ScaffoldContainerLegacy, ScaffoldTitle } from 'components/layouts/Scaffold'
88
import { ActionCard } from 'components/ui/ActionCard'
99
import { useOrganizationsQuery } from 'data/organizations/organizations-query'
10+
import { useProjectsQuery } from 'data/projects/projects-query'
1011
import { NextPageWithLayout } from 'types'
1112
import { Skeleton } from 'ui'
1213

1314
const OrganizationsPage: NextPageWithLayout = () => {
1415
const router = useRouter()
16+
1517
const { data: organizations, isLoading, isError, error, isSuccess } = useOrganizationsQuery()
18+
const { data: projects = [] } = useProjectsQuery()
1619

1720
useEffect(() => {
1821
// If there are no organizations, force the user to create one
@@ -37,16 +40,23 @@ const OrganizationsPage: NextPageWithLayout = () => {
3740
)}
3841
{isError && <div>Error loading organizations</div>}
3942
{isSuccess &&
40-
organizations?.map((organization) => (
41-
<ActionCard
42-
bgColor="bg border"
43-
className="[&>div]:items-center"
44-
key={organization.id}
45-
icon={<Boxes size={18} strokeWidth={1} className="text-foreground" />}
46-
title={organization.name}
47-
onClick={() => router.push(`/org/${organization.slug}`)}
48-
/>
49-
))}
43+
organizations?.map((organization) => {
44+
const numProjects = projects.filter(
45+
(x) => x.organization_slug === organization.slug
46+
).length
47+
48+
return (
49+
<ActionCard
50+
bgColor="bg border"
51+
className="[&>div]:items-center"
52+
key={organization.id}
53+
icon={<Boxes size={18} strokeWidth={1} className="text-foreground" />}
54+
title={organization.name}
55+
description={`${organization.plan.name} Plan${numProjects > 0 ? `${' '}•${' '}${numProjects} project${numProjects > 1 ? 's' : ''}` : ''}`}
56+
onClick={() => router.push(`/org/${organization.slug}`)}
57+
/>
58+
)
59+
})}
5060
</div>
5161
</ScaffoldContainerLegacy>
5262
</>

0 commit comments

Comments
 (0)
0