add feature flag to enable setting a group as global, and a list of g…

…lobal groups display in the groups page

messages/de-DE.json

@@ -56,6 +56,7 @@
     "recent": "Letzte Gruppen",
     "starred": "Favorisierte Gruppen",
     "archived": "Archivierte Gruppen",
+    "global": "Global Groups",
     "archive": "Gruppe archivieren",
     "unarchive": "Gruppe wiederherstellen",
     "removeRecent": "Aus letzten Gruppen entfernen",

messages/en-US.json

@@ -56,6 +56,7 @@
     "recent": "Recent groups",
     "starred": "Starred groups",
     "archived": "Archived groups",
+    "global": "Global Groups",
     "archive": "Archive group",
     "unarchive": "Unarchive group",
     "removeRecent": "Remove from recent groups",

messages/es.json

@@ -56,6 +56,7 @@
     "recent": "Grupos recientes",
     "starred": "Grupos favoritos",
     "archived": "Grupos archivados",
+    "global": "Global Groups",
     "archive": "Archivar grupo",
     "unarchive": "Desarchivar groupo",
     "removeRecent": "Remove from recent groups",

messages/fi.json

@@ -56,6 +56,7 @@
     "recent": "Äskettäiset",
     "starred": "Suosikit",
     "archived": "Arkistoidut",
+    "global": "Global Groups",
     "archive": "Arkistoi ryhmä",
     "unarchive": "Palauta ryhmä arkistosta",
     "removeRecent": "Poista äskettäisistä",

messages/fr-FR.json

@@ -56,6 +56,7 @@
     "recent": "Groupes récents",
     "starred": "Groupes favoris",
     "archived": "Groupes archivés",
+    "global": "Global Groups",
     "archive": "Archiver le groupe",
     "unarchive": "Désarchiver le groupe",
     "removeRecent": "Supprimer des groupes récents",

messages/it-IT.json

@@ -56,6 +56,7 @@
     "recent": "Gruppi recenti",
     "starred": "Gruppi speciali",
     "archived": "Gruppi archiviati",
+    "global": "Global Groups",
     "archive": "Archivia gruppo",
     "unarchive": "Rimuovi il gruppo dall'archivio",
     "removeRecent": "Rimuovi dai gruppi recenti",

messages/pl-PL.json

@@ -56,6 +56,7 @@
     "recent": "Ostatnie grupy",
     "starred": "Ogwiazdkowane grupy",
     "archived": "Zarchiwizowane grupy",
+    "global": "Global Groups",
     "archive": "Zarchiwizuj grupę",
     "unarchive": "Odarchwiruj grupę",
     "removeRecent": "Usuń z ostatnich grup",

messages/ro.json

@@ -56,6 +56,7 @@
     "recent": "Ultimele grupuri",
     "starred": "Grupuri favorite",
     "archived": "Grupuri arhivate",
+    "global": "Global Groups",
     "archive": "Arhivează grupul",
     "unarchive": "Dezarhivează grupul",
     "removeRecent": "Șterge din ultimele grupuri",

messages/ru-RU.json

@@ -56,6 +56,7 @@
     "recent": "Недавние группы",
     "starred": "Избранные",
     "archived": "Архивированные группы",
+    "global": "Global Groups",
     "archive": "Архивировать группу",
     "unarchive": "Восстановить группу",
     "removeRecent": "Убрать группу из недавних",

messages/ua-UA.json

@@ -56,6 +56,7 @@
     "recent": "Нещодавні групи",
     "starred": "Обрані групи",
     "archived": "Архівовані групи",
+    "global": "Global Groups",
     "archive": "Архівувати групу",
     "unarchive": "Розархівувати групу",
     "removeRecent": "Видалити з останніх груп",

messages/zh-CN.json

@@ -56,6 +56,7 @@
     "recent": "最近的群组",
     "starred": "已收藏的群组",
     "archived": "已归档的群组",
+    "global": "Global Groups",
     "archive": "归档群组",
     "unarchive": "取消归档群组",
     "removeRecent": "从最近的群组中删除",

prisma/migrations/20241020161712_add_global_groups/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Group" ADD COLUMN     "isGlobal" BOOLEAN NOT NULL DEFAULT false;

prisma/schema.prisma

@@ -20,6 +20,7 @@ model Group {
   expenses     Expense[]
   activities   Activity[]
   createdAt    DateTime      @default(now())
+  isGlobal     Boolean       @default(false)
 }
 
 model Participant {

scripts/build.env

@@ -20,3 +20,6 @@ S3_UPLOAD_ENDPOINT=s3://minio.example.com
 NEXT_PUBLIC_ENABLE_RECEIPT_EXTRACT=false
 OPENAI_API_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXX
 NEXT_PUBLIC_ENABLE_CATEGORY_EXTRACT=false
+
+# self-hosted features
+GLOBAL_GROUPS_ENABLE=false

src/app/groups/[groupId]/edit/edit-group.tsx

@@ -1,9 +1,16 @@
 'use client'
 
 import { GroupForm } from '@/components/group-form'
+import { RuntimeFeatureFlags } from '@/lib/featureFlags'
 import { trpc } from '@/trpc/client'
 
-export const EditGroup = ({ groupId }: { groupId: string }) => {
+export const EditGroup = ({
+  groupId,
+  runtimeFeatureFlags,
+}: {
+  groupId: string
+  runtimeFeatureFlags: RuntimeFeatureFlags
+}) => {
   const { data, isLoading } = trpc.groups.get.useQuery({ groupId })
   const { mutateAsync } = trpc.groups.update.useMutation()
   const utils = trpc.useUtils()
@@ -18,6 +25,7 @@ export const EditGroup = ({ groupId }: { groupId: string }) => {
         await utils.groups.invalidate()
       }}
       protectedParticipantIds={data?.participantsWithExpenses}
+      runtimeFeatureFlags={runtimeFeatureFlags}
     />
   )
 }

src/app/groups/[groupId]/edit/page.tsx

@@ -1,4 +1,5 @@
 import { EditGroup } from '@/app/groups/[groupId]/edit/edit-group'
+import { getRuntimeFeatureFlags } from '@/lib/featureFlags'
 import { Metadata } from 'next'
 
 export const metadata: Metadata = {
@@ -10,5 +11,10 @@ export default async function EditGroupPage({
 }: {
   params: { groupId: string }
 }) {
-  return <EditGroup groupId={groupId} />
+  return (
+    <EditGroup
+      groupId={groupId}
+      runtimeFeatureFlags={await getRuntimeFeatureFlags()}
+    />
+  )
 }

src/app/groups/create/create-group.tsx

@@ -1,10 +1,14 @@
 'use client'
-
 import { GroupForm } from '@/components/group-form'
+import { RuntimeFeatureFlags } from '@/lib/featureFlags'
 import { trpc } from '@/trpc/client'
 import { useRouter } from 'next/navigation'
 
-export const CreateGroup = () => {
+export const CreateGroup = ({
+  runtimeFeatureFlags,
+}: {
+  runtimeFeatureFlags: RuntimeFeatureFlags
+}) => {
   const { mutateAsync } = trpc.groups.create.useMutation()
   const utils = trpc.useUtils()
   const router = useRouter()
@@ -16,6 +20,7 @@ export const CreateGroup = () => {
         await utils.groups.invalidate()
         router.push(`/groups/${groupId}`)
       }}
+      runtimeFeatureFlags={runtimeFeatureFlags}
     />
   )
 }

src/app/groups/create/page.tsx

@@ -1,10 +1,11 @@
 import { CreateGroup } from '@/app/groups/create/create-group'
+import { getRuntimeFeatureFlags } from '@/lib/featureFlags'
 import { Metadata } from 'next'
 
 export const metadata: Metadata = {
   title: 'Create Group',
 }
 
-export default function CreateGroupPage() {
-  return <CreateGroup />
+export default async function CreateGroupPage() {
+  return <CreateGroup runtimeFeatureFlags={await getRuntimeFeatureFlags()} />
 }

src/app/groups/page.tsx

@@ -1,10 +1,11 @@
 import { RecentGroupList } from '@/app/groups/recent-group-list'
+import { getGlobalGroups } from '@/lib/api'
 import { Metadata } from 'next'
 
 export const metadata: Metadata = {
   title: 'Recently visited groups',
 }
 
 export default async function GroupsPage() {
-  return <RecentGroupList />
+  return <RecentGroupList globalGroups={await getGlobalGroups()} />
 }

src/app/groups/recent-group-list.tsx

@@ -8,7 +8,7 @@ import {
   getStarredGroups,
 } from '@/app/groups/recent-groups-helpers'
 import { Button } from '@/components/ui/button'
-import { getGroups } from '@/lib/api'
+import { getGlobalGroups, getGroups } from '@/lib/api'
 import { Loader2 } from 'lucide-react'
 import { useTranslations } from 'next-intl'
 import Link from 'next/link'
@@ -22,13 +22,15 @@ export type RecentGroupsState =
       groups: RecentGroups
       starredGroups: string[]
       archivedGroups: string[]
+      globalGroups: NonNullable<Awaited<ReturnType<typeof getGlobalGroups>>>
     }
   | {
       status: 'complete'
       groups: RecentGroups
       groupsDetails: Awaited<ReturnType<typeof getGroups>>
       starredGroups: string[]
       archivedGroups: string[]
+      globalGroups: NonNullable<Awaited<ReturnType<typeof getGlobalGroups>>>
     }
 
 function sortGroups(
@@ -37,6 +39,10 @@ function sortGroups(
   const starredGroupInfo = []
   const groupInfo = []
   const archivedGroupInfo = []
+  const globalGroupInfo = state.globalGroups.filter(
+    (group) => state.groups.filter((g) => g.id == group.id).length == 0,
+  )
+
   for (const group of state.groups) {
     if (state.starredGroups.includes(group.id)) {
       starredGroupInfo.push(group)
@@ -50,14 +56,21 @@ function sortGroups(
     starredGroupInfo,
     groupInfo,
     archivedGroupInfo,
+    globalGroupInfo,
   }
 }
 
-export function RecentGroupList() {
+export type Props = {
+  globalGroups: NonNullable<Awaited<ReturnType<typeof getGlobalGroups>>>
+}
+
+export function RecentGroupList({ globalGroups }: Props) {
   const t = useTranslations('Groups')
   const [state, setState] = useState<RecentGroupsState>({ status: 'pending' })
 
-  function loadGroups() {
+  function loadGroups(
+    globalGroups: NonNullable<Awaited<ReturnType<typeof getGlobalGroups>>>,
+  ) {
     const groupsInStorage = getRecentGroups()
     const starredGroups = getStarredGroups()
     const archivedGroups = getArchivedGroups()
@@ -66,6 +79,7 @@ export function RecentGroupList() {
       groups: groupsInStorage,
       starredGroups,
       archivedGroups,
+      globalGroups,
     })
     getGroupsAction(groupsInStorage.map((g) => g.id)).then((groupsDetails) => {
       setState({
@@ -74,17 +88,18 @@ export function RecentGroupList() {
         groupsDetails,
         starredGroups,
         archivedGroups,
+        globalGroups,
       })
     })
   }
 
   useEffect(() => {
-    loadGroups()
+    loadGroups(globalGroups)
   }, [])
 
   if (state.status === 'pending') {
     return (
-      <GroupsPage reload={loadGroups}>
+      <GroupsPage reload={() => loadGroups(globalGroups)}>
         <p>
           <Loader2 className="w-4 m-4 mr-2 inline animate-spin" />{' '}
           {t('loadingRecent')}
@@ -93,9 +108,9 @@ export function RecentGroupList() {
     )
   }
 
-  if (state.groups.length === 0) {
+  if (state.groups.length === 0 && state.globalGroups.length === 0) {
     return (
-      <GroupsPage reload={loadGroups}>
+      <GroupsPage reload={() => loadGroups(globalGroups)}>
         <div className="text-sm space-y-2">
           <p>{t('NoRecent.description')}</p>
           <p>
@@ -109,10 +124,11 @@ export function RecentGroupList() {
     )
   }
 
-  const { starredGroupInfo, groupInfo, archivedGroupInfo } = sortGroups(state)
+  const { starredGroupInfo, groupInfo, archivedGroupInfo, globalGroupInfo } =
+    sortGroups(state)
 
   return (
-    <GroupsPage reload={loadGroups}>
+    <GroupsPage reload={() => loadGroups(globalGroups)}>
       {starredGroupInfo.length > 0 && (
         <>
           <h2 className="mb-2">{t('starred')}</h2>
@@ -143,6 +159,16 @@ export function RecentGroupList() {
           </div>
         </>
       )}
+      {globalGroupInfo.length > 0 && (
+        <>
+          <h2 className="mt-6 mb-2">{t('global')}</h2>
+          <GroupList
+            groups={globalGroupInfo}
+            state={state}
+            setState={setState}
+          />
+        </>
+      )}
     </GroupsPage>
   )
 }