feat: Add custom category to activity library (#9319)

* feat: Add custom category to activity library

The custom category lists all team and organization custom templates.

* Color adjustment

packages/client/components/ActivityLibrary/ActivityLibrary.tsx

@@ -20,6 +20,7 @@ import {
   CategoryID,
   CATEGORY_ID_TO_NAME,
   CATEGORY_THEMES,
+  CUSTOM_CATEGORY_ID,
   QUICK_START_CATEGORY_ID
 } from './Categories'
 import CreateActivityCard from './CreateActivityCard'
@@ -36,6 +37,7 @@ graphql`
     name
     type
     category
+    scope
     ... on PokerTemplate {
       dimensions {
         name
@@ -124,14 +126,11 @@ const getTemplateDocumentValue = (
     .flat()
     .join('-')
 
-const CategoryIDToColorClass = {
-  [QUICK_START_CATEGORY_ID]: 'bg-grape-700',
-  ...Object.fromEntries(
-    Object.entries(CATEGORY_THEMES).map(([key, value]) => {
-      return [key, value.primary]
-    })
-  )
-} as Record<CategoryID | typeof QUICK_START_CATEGORY_ID, string>
+const CategoryIDToColorClass = Object.fromEntries(
+  Object.entries(CATEGORY_THEMES).map(([key, value]) => {
+    return [key, value.primary]
+  })
+) as Record<keyof typeof CATEGORY_THEMES, string>
 
 type Template = Omit<ActivityLibrary_template$data, ' $fragmentType'>
 
@@ -246,6 +245,8 @@ export const ActivityLibrary = (props: Props) => {
     return filteredTemplates.filter((template) =>
       categoryId === QUICK_START_CATEGORY_ID
         ? template.isRecommended
+        : categoryId === CUSTOM_CATEGORY_ID
+        ? template.scope !== 'PUBLIC'
         : template.category === categoryId
     )
   }, [searchQuery, filteredTemplates, categoryId])

packages/client/components/ActivityLibrary/Categories.ts

@@ -10,35 +10,55 @@ export const MAIN_CATEGORIES = [
   'premortem',
   'postmortem'
 ] as const
+
+export const QUICK_START_CATEGORY_ID = 'recommended'
+export const CUSTOM_CATEGORY_ID = 'custom'
+
+export const ALL_CATEGORIES = [
+  QUICK_START_CATEGORY_ID,
+  ...MAIN_CATEGORIES,
+  CUSTOM_CATEGORY_ID
+] as const
+
 export type CategoryID = typeof MAIN_CATEGORIES[number]
+export type AllCategoryID = typeof ALL_CATEGORIES[number]
 
 export const DEFAULT_CARD_THEME: CardTheme = {
   primary: 'bg-slate-500',
   secondary: 'bg-slate-200',
   text: 'text-slate-500'
 }
 
-export const CATEGORY_THEMES: Record<CategoryID, CardTheme> = {
+export const CATEGORY_THEMES: Record<AllCategoryID, CardTheme> = {
+  [QUICK_START_CATEGORY_ID]: {
+    primary: 'bg-grape-700',
+    secondary: 'bg-slate-200',
+    text: 'text-slate-500'
+  },
   standup: {primary: 'bg-aqua-400', secondary: 'bg-aqua-100', text: 'text-aqua-400'},
   estimation: {primary: 'bg-tomato-500', secondary: 'bg-tomato-100', text: 'text-tomato-500'},
   retrospective: {primary: 'bg-grape-500', secondary: 'bg-[#F2E1F7]', text: 'text-grape-500'},
   feedback: {primary: 'bg-jade-400', secondary: 'bg-jade-100', text: 'text-jade-400'},
   strategy: {primary: 'bg-rose-500', secondary: 'bg-rose-100', text: 'text-rose-500'},
   premortem: {primary: 'bg-gold-500', secondary: 'bg-gold-100', text: 'text-gold-500'},
-  postmortem: {primary: 'bg-grass-500', secondary: 'bg-grass-100', text: 'text-grass-500'}
+  postmortem: {primary: 'bg-grass-500', secondary: 'bg-grass-100', text: 'text-grass-500'},
+  [CUSTOM_CATEGORY_ID]: {
+    primary: 'bg-fuscia-400',
+    secondary: 'bg-slate-200',
+    text: 'text-slate-500'
+  }
 }
 
-export const QUICK_START_CATEGORY_ID = 'recommended'
-
-export const CATEGORY_ID_TO_NAME: Record<CategoryID | typeof QUICK_START_CATEGORY_ID, string> = {
+export const CATEGORY_ID_TO_NAME: Record<AllCategoryID, string> = {
   [QUICK_START_CATEGORY_ID]: 'Quick Start',
   retrospective: 'Retrospective',
   estimation: 'Estimation',
   standup: 'Standup',
   feedback: 'Feedback',
   strategy: 'Strategy',
   premortem: 'Pre-Mortem',
-  postmortem: 'Post-Mortem'
+  postmortem: 'Post-Mortem',
+  [CUSTOM_CATEGORY_ID]: 'Custom'
 }
 
 export const MEETING_TYPE_TO_CATEGORY: Record<MeetingTypeEnum, CategoryID> = {

packages/client/components/ActivityLibrary/CreateActivityCard.tsx

@@ -4,22 +4,11 @@ import {ActivityBadge} from './ActivityBadge'
 import {Add as AddIcon} from '@mui/icons-material'
 import clsx from 'clsx'
 import {Link} from 'react-router-dom'
-import {
-  QUICK_START_CATEGORY_ID,
-  DEFAULT_CARD_THEME,
-  CATEGORY_THEMES,
-  CategoryID,
-  CATEGORY_ID_TO_NAME
-} from './Categories'
-
-const CREATE_ACTIVITY_CARD_THEMES = {
-  [QUICK_START_CATEGORY_ID]: DEFAULT_CARD_THEME,
-  ...CATEGORY_THEMES
-}
+import {CATEGORY_THEMES, CATEGORY_ID_TO_NAME, AllCategoryID} from './Categories'
 
 interface Props {
   className?: string
-  category: CategoryID | typeof QUICK_START_CATEGORY_ID
+  category: AllCategoryID
 }
 
 const CreateActivityCard = (props: Props) => {
@@ -29,7 +18,7 @@ const CreateActivityCard = (props: Props) => {
     <Link className={clsx('flex', className)} to={`/activity-library/new-activity/${category}`}>
       <ActivityLibraryCard
         className={'flex-1 cursor-pointer'}
-        theme={CREATE_ACTIVITY_CARD_THEMES[category]}
+        theme={CATEGORY_THEMES[category]}
         badge={<ActivityBadge className='mx-2 bg-gold-300 text-grape-700'>Premium</ActivityBadge>}
       >
         <div className='flex flex-1 flex-col items-center justify-center text-center font-semibold md:mx-10'>