feat: button migration from product to form

Author: ClementNumericite

webapp-backoffice/prisma/migrations/20250318092552_add_root_form_template_and_forms/migration.sql

@@ -0,0 +1,53 @@
+-- Step 1: Create the form template if it doesn't exist
+DO $$ 
+BEGIN
+  IF NOT EXISTS (SELECT 1 FROM "FormTemplate" WHERE slug = 'root') THEN
+    INSERT INTO "FormTemplate" (title, slug, active, created_at, updated_at)
+    VALUES ('Formulaire des démarches', 'root', true, NOW(), NOW());
+  END IF;
+END $$;
+
+-- Step 2: Get the ID of the root form template and create forms for each product
+DO $$
+DECLARE
+  root_template_id INTEGER;
+BEGIN
+  -- Get the ID of the root form template
+  SELECT id INTO root_template_id FROM "FormTemplate" WHERE slug = 'root';
+
+  -- Create a form for each product if it doesn't already have one linked to the root template
+  INSERT INTO "Form" (product_id, form_template_id, created_at, updated_at)
+  SELECT p.id, root_template_id, NOW(), NOW()
+  FROM "Product" p
+  WHERE NOT EXISTS (
+    SELECT 1 
+    FROM "Form" f 
+    WHERE f.product_id = p.id 
+    AND f.form_template_id = root_template_id
+  );
+END $$;
+
+-- Step 3: Add form_id column to Button table without NOT NULL constraint initially
+ALTER TABLE "Button" ADD COLUMN "form_id" INTEGER;
+
+-- Step 4: Update the form_id for all buttons based on their product_id
+UPDATE "Button" b
+SET form_id = f.id
+FROM "Form" f
+JOIN "Product" p ON f.product_id = p.id
+WHERE b.product_id = p.id;
+
+-- Step 5: Add foreign key constraint for form_id
+ALTER TABLE "Button" 
+ADD CONSTRAINT "Button_form_id_fkey" 
+FOREIGN KEY ("form_id") REFERENCES "Form"("id") 
+ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- Step 6: Make form_id NOT NULL after populating it
+ALTER TABLE "Button" ALTER COLUMN "form_id" SET NOT NULL;
+
+-- Step 7: Drop the foreign key constraint for product_id
+ALTER TABLE "Button" DROP CONSTRAINT "Button_product_id_fkey";
+
+-- Step 8: Drop the product_id column
+ALTER TABLE "Button" DROP COLUMN "product_id";

webapp-backoffice/prisma/migrations/20250319130419_form_data_migration/migration.sql

@@ -265,8 +265,8 @@ model Button {
   description String?
   xwiki_title String?
   isTest      Boolean? @default(false)
-  product     Product? @relation(fields: [product_id], references: [id])
-  product_id  Int
+  form        Form    @relation(fields: [form_id], references: [id])
+  form_id     Int
 
   reviews Review[]
 
@@ -308,7 +308,6 @@ model Product {
   urls            String[]
   volume          Int?
   xwiki_id        Int?          @unique
-  buttons         Button[]
   accessRights    AccessRight[]
   forms           Form[]
   favorites       Favorite[]
@@ -523,6 +522,7 @@ model Form {
   product          Product      @relation(fields: [product_id], references: [id])
   product_id       Int
   form_configs     FormConfig[]
+  buttons          Button[]
   created_at       DateTime     @default(now())
   updated_at       DateTime     @default(now())
 }

webapp-backoffice/prisma/schema.prisma

@@ -60,7 +60,7 @@ async function seed_users_products() {
 	const promisesProducts: Promise<Product>[] = [];
 	const promisesWLDs: Promise<WhiteListedDomain>[] = [];
 
-	await prisma.formTemplate.upsert({
+	const rootFormTemplate = await prisma.formTemplate.upsert({
 		where: { slug: 'root' },
 		update: {},
 		create: {
@@ -110,12 +110,6 @@ async function seed_users_products() {
 								name: randomEntity.name
 							}
 						},
-						buttons: {
-							create: buttons.map(b => ({
-								...b,
-								product_id: b.product_id
-							})) as Button[]
-						},
 						accessRights: {
 							create: {
 								user_email: users.filter(u => u.active && u?.role !== 'admin')[
@@ -127,10 +121,9 @@ async function seed_users_products() {
 						forms: {
 							create: [
 								{
-									form_template: {
-										connect: {
-											slug: 'root'
-										}
+									form_template_id: rootFormTemplate.id,
+									buttons: {
+										create: buttons as Button[]
 									}
 								}
 							]

webapp-backoffice/prisma/seed.ts

@@ -1,4 +1,4 @@
-import { ProductWithButtons } from '@/src/types/prismaTypesExtended';
+import { ProductWithForms } from '@/src/types/prismaTypesExtended';
 import { getIntentionFromAverage } from '@/src/utils/stats';
 import {
 	formatNumberWithSpaces,
@@ -65,7 +65,7 @@ const ProductCard = ({
 	onDeleteProduct,
 	onDeleteEssential
 }: {
-	product: ProductWithButtons;
+	product: ProductWithForms;
 
 	userId: number;
 	entity: Entity;
@@ -591,7 +591,7 @@ const ProductCard = ({
 											width={'full'}
 											height={50}
 										/>
-									) : (product.buttons.length > 0 &&
+									) : (product.forms[0]?.buttons.length > 0 &&
 											nbReviews &&
 											nbReviews > 0) ||
 									  session?.user.role.includes('admin') ? (
@@ -724,7 +724,7 @@ const ProductCard = ({
 												</div>
 											)}
 										</div>
-									) : product.buttons.length === 0 ? (
+									) : product.forms[0]?.buttons.length === 0 ? (
 										<NoButtonsPanel onButtonClick={handleButtonClick} />
 									) : (
 										<NoReviewsPanel

webapp-backoffice/src/components/dashboard/Product/ProductCard.tsx

@@ -1,16 +1,16 @@
+import { ButtonWithForm } from '@/src/types/prismaTypesExtended';
+import { trpc } from '@/src/utils/trpc';
 import { fr } from '@codegouvfr/react-dsfr';
+import Button from '@codegouvfr/react-dsfr/Button';
+import { Checkbox } from '@codegouvfr/react-dsfr/Checkbox';
+import { Input } from '@codegouvfr/react-dsfr/Input';
 import { ModalProps } from '@codegouvfr/react-dsfr/Modal';
 import { RadioButtons } from '@codegouvfr/react-dsfr/RadioButtons';
-import { Input } from '@codegouvfr/react-dsfr/Input';
-import { Accordion } from '@codegouvfr/react-dsfr/Accordion';
 import { Button as PrismaButtonType } from '@prisma/client';
+import { push } from '@socialgouv/matomo-next';
+import Image from 'next/image';
 import React from 'react';
 import { tss } from 'tss-react/dsfr';
-import { Checkbox } from '@codegouvfr/react-dsfr/Checkbox';
-import Image from 'next/image';
-import { trpc } from '@/src/utils/trpc';
-import Button from '@codegouvfr/react-dsfr/Button';
-import { push } from '@socialgouv/matomo-next';
 
 interface CustomModalProps {
 	buttonProps: {
@@ -29,16 +29,16 @@ interface Props {
 	isOpen: boolean;
 	modal: CustomModalProps;
 	modalType: string;
-	button?: PrismaButtonType | null;
+	button?: ButtonWithForm | null;
 	onButtonCreatedOrUpdated: (isTest: boolean) => void;
-	product_id: number;
+	form_id: number;
 }
 
 const defaultButton = {
 	title: '',
 	description: '',
 	xwiki_title: null,
-	product_id: -1,
+	form_id: -1,
 	isTest: false
 };
 
@@ -126,7 +126,7 @@ const ButtonModal = (props: Props) => {
 			return;
 		}
 
-		currentButton.product_id = props.product_id;
+		currentButton.form_id = props.form_id;
 
 		if ('id' in currentButton) {
 			updateButton.mutate(currentButton);
@@ -135,11 +135,11 @@ const ButtonModal = (props: Props) => {
 		}
 	};
 
-	const buttonCodeClair = `<a href="https://jedonnemonavis.numerique.gouv.fr/Demarches/${button?.product_id}?button=${button?.id}" target='_blank' title="Je donne mon avis - nouvelle fenêtre">
+	const buttonCodeClair = `<a href="https://jedonnemonavis.numerique.gouv.fr/Demarches/${button?.form.product_id}?button=${button?.id}" target='_blank' title="Je donne mon avis - nouvelle fenêtre">
       <img src="https://jedonnemonavis.numerique.gouv.fr/static/bouton-${buttonColor}-clair.svg" alt="Je donne mon avis" />
 </a>`;
 
-	const buttonCodeSombre = `<a href="https://jedonnemonavis.numerique.gouv.fr/Demarches/${button?.product_id}?button=${button?.id}" target='_blank' title="Je donne mon avis - nouvelle fenêtre">
+	const buttonCodeSombre = `<a href="https://jedonnemonavis.numerique.gouv.fr/Demarches/${button?.form.product_id}?button=${button?.id}" target='_blank' title="Je donne mon avis - nouvelle fenêtre">
 	<img src="https://jedonnemonavis.numerique.gouv.fr/static/bouton-${buttonColor}-sombre.svg" alt="Je donne mon avis" />
 	</a>`;
 

webapp-backoffice/src/components/dashboard/ProductButton/ButtonModal.tsx

@@ -1,16 +1,16 @@
-import { formatDateToFrenchString } from '@/src/utils/tools';
+import { ButtonWithForm } from '@/src/types/prismaTypesExtended';
 import { fr } from '@codegouvfr/react-dsfr';
 import Button from '@codegouvfr/react-dsfr/Button';
 import { Tag } from '@codegouvfr/react-dsfr/Tag';
-import { Button as PrismaButtonType, RightAccessStatus } from '@prisma/client';
-import React from 'react';
 import { Menu, MenuItem } from '@mui/material';
-import { tss } from 'tss-react/dsfr';
+import { RightAccessStatus } from '@prisma/client';
 import { push } from '@socialgouv/matomo-next';
+import React from 'react';
+import { tss } from 'tss-react/dsfr';
 
 interface Props {
-	button: PrismaButtonType;
-	onButtonClick: (modalType: string, button?: PrismaButtonType) => void;
+	button: ButtonWithForm;
+	onButtonClick: (modalType: string, button?: ButtonWithForm) => void;
 	ownRight: Exclude<RightAccessStatus, 'removed'>;
 }
 
@@ -106,7 +106,7 @@ const ProductButtonCard = (props: Props) => {
 								<MenuItem
 									onClick={() => {
 										navigator.clipboard.writeText(
-											`https://jedonnemonavis.numerique.gouv.fr/Demarches/${button.product_id}?button=${button.id}`
+											`https://jedonnemonavis.numerique.gouv.fr/Demarches/${button.form.product_id}?button=${button.id}`
 										);
 										handleClose();
 									}}

webapp-backoffice/src/components/dashboard/ProductButton/ProductButtonCard.tsx

@@ -2,34 +2,31 @@ import ProductButtonCard from '@/src/components/dashboard/ProductButton/ProductB
 import ProductLayout from '@/src/layouts/Product/ProductLayout';
 import { fr } from '@codegouvfr/react-dsfr';
 import Button from '@codegouvfr/react-dsfr/Button';
-import Checkbox from '@codegouvfr/react-dsfr/Checkbox';
-import {
-	Button as PrismaButtonType,
-	Product,
-	RightAccessStatus
-} from '@prisma/client';
+import { RightAccessStatus } from '@prisma/client';
 import { tss } from 'tss-react/dsfr';
 import { getServerSideProps } from '.';
 import { Pagination } from '../../../../../components/ui/Pagination';
 
+import NoButtonsPanel from '@/src/components/dashboard/Pannels/NoButtonsPanel';
+import ProductFormConfigurationInfo from '@/src/components/dashboard/Product/ProductFormConfigurationInfo';
 import ButtonModal from '@/src/components/dashboard/ProductButton/ButtonModal';
 import { Loader } from '@/src/components/ui/Loader';
+import { useFilters } from '@/src/contexts/FiltersContext';
+import {
+	ButtonWithForm,
+	ProductWithForms
+} from '@/src/types/prismaTypesExtended';
 import { getNbPages } from '@/src/utils/tools';
+import { trpc } from '@/src/utils/trpc';
 import { createModal } from '@codegouvfr/react-dsfr/Modal';
 import { useIsModalOpen } from '@codegouvfr/react-dsfr/Modal/useIsModalOpen';
-import React, { useEffect } from 'react';
-import { trpc } from '@/src/utils/trpc';
+import { push } from '@socialgouv/matomo-next';
 import Head from 'next/head';
-import NoButtonsPanel from '@/src/components/dashboard/Pannels/NoButtonsPanel';
 import { useRouter } from 'next/router';
-import ProductBottomInfo from '@/src/components/dashboard/ProductButton/ProductBottomInfo';
-import { useFilters } from '@/src/contexts/FiltersContext';
-import Select from '@codegouvfr/react-dsfr/Select';
-import { push } from '@socialgouv/matomo-next';
-import ProductFormConfigurationInfo from '@/src/components/dashboard/Product/ProductFormConfigurationInfo';
+import React from 'react';
 
 interface Props {
-	product: Product;
+	product: ProductWithForms;
 	ownRight: Exclude<RightAccessStatus, 'removed'>;
 }
 
@@ -46,7 +43,7 @@ const ProductButtonsPage = (props: Props) => {
 	const [modalType, setModalType] = React.useState<string>('');
 
 	const [currentButton, setCurrentButton] =
-		React.useState<PrismaButtonType | null>(null);
+		React.useState<ButtonWithForm | null>(null);
 	const router = useRouter();
 
 	const [testFilter, setTestFilter] = React.useState<boolean>(false);
@@ -63,7 +60,7 @@ const ProductButtonsPage = (props: Props) => {
 		{
 			numberPerPage,
 			page: currentPage,
-			product_id: product.id,
+			form_id: product.forms[0].id,
 			isTest: testFilter,
 			filterByTitle: filters.filter
 		},
@@ -92,7 +89,7 @@ const ProductButtonsPage = (props: Props) => {
 
 	const isModalOpen = useIsModalOpen(modal);
 
-	const handleModalOpening = (modalType: string, button?: PrismaButtonType) => {
+	const handleModalOpening = (modalType: string, button?: ButtonWithForm) => {
 		setCurrentButton(button ? button : null);
 		setModalType(modalType);
 		modal.open();
@@ -126,7 +123,7 @@ const ProductButtonsPage = (props: Props) => {
 				/>
 			</Head>
 			<ButtonModal
-				product_id={product.id}
+				form_id={product.forms[0].id}
 				modal={modal}
 				isOpen={isModalOpen}
 				modalType={modalType}
@@ -141,7 +138,7 @@ const ProductButtonsPage = (props: Props) => {
 					<p>
 						Vous pouvez{' '}
 						<a
-							href={`${process.env.NEXT_PUBLIC_FORM_APP_URL}/Demarches/${buttons[0]?.product_id}?button=${buttons[0]?.id}&iframe=true`}
+							href={`${process.env.NEXT_PUBLIC_FORM_APP_URL}/Demarches/${buttons[0]?.form.product_id}?button=${buttons[0]?.id}&iframe=true`}
 							target="_blank"
 						>
 							prévisualiser le formulaire JDMA

webapp-backoffice/src/pages/administration/dashboard/product/[id]/forms.tsx

@@ -12,6 +12,9 @@ export const getServerSideProps: GetServerSideProps = async context => {
 		where: {
 			id: parseInt(id as string),
 			status: 'published'
+		},
+		include: {
+			forms: true
 		}
 	});