feat(ARC-3818): configure labels on the overzichtsblok

api/src/modules/content-page-labels/content-page-labels.types.ts

@@ -1,3 +1,13 @@
+import type { ContentPageLabelQueryTypes } from './queries/content-page-label.queries';
+
+// The label rows come back as an avo | hetarchief union, and only hetarchief has a color column.
+// Narrowing to the hetarchief row keeps the color access type checked, so removing color from the
+// query is a compile error instead of a silently undefined value.
+export type HetArchiefContentPageLabel =
+	ContentPageLabelQueryTypes['GetContentPageLabelsQueryHetArchief']['app_content_label'][0];
+export type HetArchiefContentPageLabelById =
+	ContentPageLabelQueryTypes['GetContentPageLabelByIdQueryHetArchief']['app_content_label'][0];
+
 export type ContentPageLabelOverviewTableCols =
 	| 'label'
 	| 'content_type'

api/src/modules/content-page-labels/dto/content-page-label.dto.ts

@@ -61,6 +61,15 @@ export class InsertContentPageLabelDto {
 		required: false,
 	})
 	link_to?: PickerItemDto | null = null;
+
+	// Only exists on hetarchief, avo has no color on its content page labels
+	@IsString()
+	@IsOptional()
+	@ApiProperty({
+		type: String,
+		required: false,
+	})
+	color?: string;
 }
 
 export class UpdateContentPageLabelDto {
@@ -95,6 +104,15 @@ export class UpdateContentPageLabelDto {
 		required: false,
 	})
 	link_to?: PickerItemDto | null = null;
+
+	// Only exists on hetarchief, avo has no color on its content page labels
+	@IsString()
+	@IsOptional()
+	@ApiProperty({
+		type: String,
+		required: false,
+	})
+	color?: string;
 }
 
 export class ContentPageLabelDto {
@@ -130,6 +148,15 @@ export class ContentPageLabelDto {
 	})
 	language: Locale;
 
+	// Only exists on hetarchief, avo has no color on its content page labels
+	@IsString()
+	@IsOptional()
+	@ApiProperty({
+		type: String,
+		required: false,
+	})
+	color?: string;
+
 	@IsString()
 	@ApiProperty({
 		type: String,

api/src/modules/content-page-labels/mocks/content-page-labels.mocks.ts

@@ -17,12 +17,32 @@ export const mockGqlContentPageLabel1: GetContentPageLabelsQuery['app_content_la
 		value: '/faq?label=Gebruik%20van%20het%20materiaal',
 		target: '_self',
 	},
+	color: '#E694B3',
 	created_at: '2022-05-17T08:47:49.271562',
 	updated_at: '2022-05-17T08:47:49.271562',
 	id: '13d00f95-5597-4470-b5ce-d3ee96212ff4',
 };
 
 export const mockGqlContentPageLabel2: GetContentPageLabelByIdQuery['app_content_label'][0] = {
+	label: 'Gebruik van het materiaal',
+	content_type: Lookup_App_Content_Type_Enum.FaqItem,
+	language: Locale.Nl,
+	link_to: {
+		type: 'INTERNAL_LINK',
+		value: '/faq?label=Gebruik%20van%20het%20materiaal',
+		target: '_self',
+	},
+	color: '#E694B3',
+	created_at: '2022-05-17T08:47:49.271562',
+	updated_at: '2022-05-17T08:47:49.271562',
+	id: '13d00f95-5597-4470-b5ce-d3ee96212ff4',
+};
+
+// Avo has no color column on its content page labels, so the mapped color stays undefined
+export const mockGqlContentPageLabelWithoutColor: Omit<
+	GetContentPageLabelsQuery['app_content_label'][0],
+	'color'
+> = {
 	label: 'Gebruik van het materiaal',
 	content_type: Lookup_App_Content_Type_Enum.FaqItem,
 	language: Locale.Nl,

api/src/modules/content-page-labels/queries/hetarchief/getContentPageLabelById.graphql

@@ -5,6 +5,7 @@ query getContentPageLabelById($id: uuid!) {
 		content_type
 		link_to
 		language
+		color
 		created_at
 		updated_at
 	}

api/src/modules/content-page-labels/queries/hetarchief/getContentPageLabels.graphql

@@ -9,6 +9,7 @@ query getContentPageLabels(
 		content_type
 		link_to
 		language
+		color
 		created_at
 		updated_at
 		id

api/src/modules/content-page-labels/queries/hetarchief/insertContentPageLabel.graphql

@@ -6,6 +6,7 @@ mutation insertContentPageLabel($contentPageLabels: [app_content_label_insert_in
 			content_type
 			language
 			link_to
+			color
 			created_at
 			updated_at
 		}

api/src/modules/content-page-labels/queries/hetarchief/updateContentPageLabel.graphql

@@ -9,6 +9,7 @@ mutation updateContentPageLabel(
 			content_type
 			link_to
 			language
+			color
 			created_at
 			updated_at
 		}

api/src/modules/content-page-labels/services/content-page-labels.service.spec.ts

@@ -19,6 +19,7 @@ import {
 	mockContentPageLabelDto,
 	mockGqlContentPageLabel1,
 	mockGqlContentPageLabel2,
+	mockGqlContentPageLabelWithoutColor,
 	mockLabelObj,
 } from '../mocks/content-page-labels.mocks';
 
@@ -114,6 +115,37 @@ describe('ContentPageLabelsService', () => {
 			expect(response[0][0].label).toBe(mockGqlContentPageLabel1.label);
 			expect(response[0][0].content_type).toBe(mockGqlContentPageLabel1.content_type);
 		});
+		it('should map the background color of the visual label', async () => {
+			mockDataService.execute.mockResolvedValueOnce(getDefaultContentPageLabelsResponse());
+
+			const response = await contentPageLabelsService.fetchContentPageLabels(
+				0,
+				20,
+				'label',
+				AvoSearchOrderDirection.ASC,
+				'{}'
+			);
+
+			expect(response[0][0].color).toBe(mockGqlContentPageLabel1.color);
+		});
+		it('should leave the color undefined for labels that have no color column', async () => {
+			mockDataService.execute.mockResolvedValueOnce({
+				// biome-ignore lint/suspicious/noExplicitAny: avo vs hetarchief number vs uuid
+				app_content_label: [mockGqlContentPageLabelWithoutColor as any],
+				app_content_label_aggregate: { aggregate: { count: 1 } },
+			});
+
+			const response = await contentPageLabelsService.fetchContentPageLabels(
+				0,
+				20,
+				'label',
+				AvoSearchOrderDirection.ASC,
+				'{}'
+			);
+
+			expect(response[0][0].color).toBeUndefined();
+			expect(response[0][0].label).toBe(mockGqlContentPageLabelWithoutColor.label);
+		});
 		it('should return an error when the response fails to get content page labels', async () => {
 			mockDataService.execute.mockRejectedValueOnce(getEmptyContentPageLabelsResponse());
 

api/src/modules/content-page-labels/services/content-page-labels.service.ts

@@ -6,7 +6,12 @@ import { DataService } from '../../data';
 import { CustomError } from '../../shared/helpers/error';
 import { getDatabaseType } from '../../shared/helpers/get-database-type';
 import { isAvo } from '../../shared/helpers/is-avo';
-import type { ContentPageLabelOverviewTableCols } from '../content-page-labels.types';
+import { isHetArchief } from '../../shared/helpers/is-hetarchief';
+import type {
+	ContentPageLabelOverviewTableCols,
+	HetArchiefContentPageLabel,
+	HetArchiefContentPageLabelById,
+} from '../content-page-labels.types';
 import type {
 	ContentPageLabelDto,
 	InsertContentPageLabelDto,
@@ -55,6 +60,8 @@ export class ContentPageLabelsService {
 					id: labelObj?.id,
 					language: labelObj?.language,
 					link_to: labelObj?.link_to,
+					// Only hetarchief content page labels have a color
+					color: (labelObj as HetArchiefContentPageLabel)?.color,
 					created_at: labelObj?.created_at,
 					updated_at: labelObj?.updated_at,
 				})
@@ -112,6 +119,8 @@ export class ContentPageLabelsService {
 				id: contentPageLabelRaw.id,
 				language: contentPageLabelRaw.language,
 				link_to: contentPageLabelRaw.link_to,
+				// Only hetarchief content page labels have a color
+				color: (contentPageLabelRaw as HetArchiefContentPageLabelById).color,
 				created_at: contentPageLabelRaw.created_at,
 				updated_at: contentPageLabelRaw.updated_at,
 			};
@@ -137,6 +146,8 @@ export class ContentPageLabelsService {
 					// biome-ignore lint/suspicious/noExplicitAny: locale from other repo complains about types
 					language: contentPageLabel.language as any,
 					link_to: contentPageLabel.link_to || null,
+					// The color column only exists on hetarchief
+					...(isHetArchief() ? { color: contentPageLabel.color } : {}),
 					created_at: new Date().toISOString(),
 					updated_at: new Date().toISOString(),
 				})),
@@ -176,6 +187,8 @@ export class ContentPageLabelsService {
 					content_type: contentPageLabelInfo.content_type as any,
 					language: contentPageLabelInfo.language,
 					link_to: contentPageLabelInfo.link_to || null,
+					// The color column only exists on hetarchief
+					...(isHetArchief() ? { color: contentPageLabelInfo.color } : {}),
 					updated_at: new Date().toISOString(),
 				},
 				contentPageLabelId: contentPageLabelInfo.id,

api/src/modules/content-pages/content-pages.types.ts

@@ -53,6 +53,8 @@ export interface ContentPageLabel {
 	content_type: ContentPageType;
 	language: Locale;
 	link_to: PickerItem | null;
+	// The background color of the generated visual label. Only exists on hetarchief
+	color?: string;
 	created_at: string;
 	updated_at: string;
 }
@@ -108,6 +110,11 @@ export type GqlContentBlockHetArchief =
 	GetContentPageByPathQueryHetArchief['app_content_page'][0]['content_blocks'][0];
 export type GqlContentBlock = GqlContentBlockAvo | GqlContentBlockHetArchief;
 
+// Only hetarchief content page labels have a color, so narrowing to the hetarchief label keeps
+// that access type checked instead of silently undefined
+export type GqlContentPageLabelHetArchief =
+	GetContentPageByPathQueryHetArchief['app_content_page'][0]['content_content_labels'][0]['content_label'];
+
 export type GqlInsertOrUpdateContentPage =
 	| ContentPageQueryTypes['InsertContentMutationVariables']['contentPage']
 	| ContentPageQueryTypes['UpdateContentPageWithBlocksAndLabelsMutationVariables']['contentPage'];

api/src/modules/content-pages/queries/hetarchief/getContentById.graphql

@@ -50,6 +50,7 @@ query getContentById($id: uuid!) {
 				label
 				id
 				link_to
+				color
 			}
 		}
 		content_blocks(order_by: { position: asc }) {

api/src/modules/content-pages/queries/hetarchief/getContentByIds.graphql

@@ -50,6 +50,7 @@ query getContentByIds($ids: [uuid!]!) {
 				label
 				id
 				link_to
+				color
 			}
 		}
 		content_blocks(order_by: { position: asc }) {

api/src/modules/content-pages/queries/hetarchief/getContentPageByPath.graphql

@@ -52,6 +52,7 @@ query getContentPageByPath($path: String!, $language: lookup_languages_enum!) {
 				id
 				label
 				link_to
+				color
 			}
 		}
 		content_blocks(order_by: { position: asc }) {

api/src/modules/content-pages/queries/hetarchief/getContentPages.graphql

@@ -50,6 +50,7 @@ query getContentPages(
 				id
 				label
 				link_to
+				color
 			}
 		}
 	}

api/src/modules/content-pages/queries/hetarchief/getContentPagesWithBlocks.graphql

@@ -50,6 +50,7 @@ query getContentPagesWithBlocks(
 				id
 				label
 				link_to
+				color
 			}
 		}
 		content_blocks(order_by: { position: asc }) {

api/src/modules/content-pages/services/content-pages.service.ts

@@ -76,6 +76,7 @@ import type {
 	GqlAvoUser,
 	GqlContentBlock,
 	GqlContentPage,
+	GqlContentPageLabelHetArchief,
 	GqlHetArchiefUser,
 	GqlInsertOrUpdateContentPage,
 	GqlUser,
@@ -189,6 +190,8 @@ export class ContentPagesService {
 					label: labelObj?.content_label?.label,
 					language: labelObj?.content_label?.language,
 					link_to: labelObj?.content_label?.link_to,
+					// Only hetarchief content page labels have a color
+					color: (labelObj?.content_label as GqlContentPageLabelHetArchief)?.color,
 					created_at: labelObj?.content_label?.created_at,
 					updated_at: labelObj?.content_label?.updated_at,
 				})