Staging --> main

frisk.config.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import {
 	getFunction,
+	getFunctionMetadata,
 	getFunctions,
 	getMyMicrosoftTeams,
 	getTeam,
@@ -40,6 +41,29 @@ export async function getConfig(): Promise<FriskConfig> {
 						value: team.id,
 					}));
 				},
+				onChange: async (input) => {
+					const metadata = await getFunctionMetadata(input.functionId);
+
+					if (!metadata) return;
+
+					const metaMap = new Map(
+						metadata.map((meta) => [meta.key, meta.value]),
+					);
+
+					const matchingSchemas = schemas.filter((schema) =>
+						metaMap.has(schema.id),
+					);
+
+					await Promise.all(
+						matchingSchemas.map((schema) =>
+							changeFormTeam({
+								// biome-ignore lint/style/noNonNullAssertion: <explanation>
+								contextId: metaMap.get(schema.id)!,
+								teamId: input.value,
+							}),
+						),
+					);
+				},
 				getDisplayValue: async (input) => {
 					const team = await getTeam(input.value);
 					return { displayValue: team.displayName };
@@ -142,7 +166,7 @@ export async function getConfig(): Promise<FriskConfig> {
 						});
 						const url = `${getregelrettFrontendUrl()}/context/${contextId}?${searchParams.toString()}`;
 						return {
-							displayValue: "Skjema",
+							displayValue: schema.name,
 							displayOptions: {
 								type: "custom",
 								component: (
@@ -248,6 +272,12 @@ type GeneralMetadataContent = {
 					component: React.ReactNode;
 			  };
 	}>;
+	onChange?: (input: {
+		key: string;
+		value: string;
+		functionId: number;
+		id: number;
+	}) => void;
 };
 
 type GeneralRequiredMetadata = GeneralMetadataContent;
@@ -403,7 +433,7 @@ function SchemaDisplay({
 				onClick={(e) => e.stopPropagation()}
 				overflow="hidden"
 				fontWeight="medium"
-				fontSize="sm"
+				fontSize="xs"
 				justifyContent="start"
 				flex="1"
 			>
@@ -524,7 +554,21 @@ export async function createRegelrettContext({
 
 const RegelrettContext = object({
 	id: string(),
-	name: string(),
-	tableId: string(),
-	teamId: string(),
 });
+
+async function changeFormTeam({
+	contextId,
+	teamId,
+}: { contextId: string; teamId: string }) {
+	const response = await fetchFromRegelrett(`/contexts/${contextId}/team`, {
+		method: "PATCH",
+		headers: {
+			"Content-Type": "application/json",
+		},
+		body: JSON.stringify({ teamId }),
+	});
+
+	if (!response.ok) {
+		throw new Error(`Backend error: ${response.status} ${response.statusText}`);
+	}
+}

package.json

@@ -22,6 +22,7 @@
 		"@tanstack/router-zod-adapter": "1.58.3",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
+		"react-textarea-autosize": "^8.5.7",
 		"zod": "3.23.8"
 	},
 	"devDependencies": {

src/components/delete-function-modal.tsx

@@ -23,7 +23,7 @@ type Props = {
 export function DeleteFunctionModal({ onClose, isOpen, functionId }: Props) {
 	const { func, removeFunction } = useFunction(functionId);
 	const navigate = Route.useNavigate();
-	const { path, flags, filters } = Route.useSearch();
+	const search = Route.useSearch();
 
 	return (
 		<Modal onClose={onClose} isOpen={isOpen} isCentered>
@@ -56,13 +56,12 @@ export function DeleteFunctionModal({ onClose, isOpen, functionId }: Props) {
 								await removeFunction.mutateAsync(func.data.id);
 								navigate({
 									search: {
-										path: path.map((pathString) =>
+										...search,
+										path: search.path.map((pathString) =>
 											pathString === func.data.path
 												? deletedFunctionParentPath
 												: pathString,
 										) ?? ["1"],
-										filters,
-										flags: flags,
 									},
 								});
 							}}

src/components/function-card-edit.tsx

@@ -84,33 +84,37 @@ export function FunctionCardEdit({ functionId }: { functionId: number }) {
 				}
 				await Promise.all(promises);
 			} else {
-				const existingMd = existingMetadata[0];
+				if (formElement.value.trim() === "") {
+					if (metaDataKeyExists) {
+						const existingMd = existingMetadata[0];
+						if (existingMd.id) {
+							await removeMetadata.mutateAsync({
+								id: existingMd.id,
+								functionId,
+							});
+						}
+					}
+					continue;
+				}
 				// if metadatakey not exists: addMetadata
 				if (!metaDataKeyExists) {
 					await addMetadata.mutateAsync({
 						functionId,
 						key: md.key,
 						value: formElement.value,
 					});
-				}
-				// if form key exists in metadata and new value: updatemetadatavalue
-				if (metaDataKeyExists) {
+				} else {
+					const existingMd = existingMetadata[0];
 					if (existingMd.value !== formElement.value) {
 						existingMd.id &&
 							(await updateMetadataValue.mutateAsync({
 								id: existingMd.id,
 								value: formElement.value,
+								key: existingMd.key,
+								functionId: existingMd.functionId,
 							}));
 					}
 				}
-				// if input field is set to empty: delete
-				if (formElement.value.trim() === "" && metaDataKeyExists) {
-					existingMd.id &&
-						(await removeMetadata.mutateAsync({
-							id: existingMd.id,
-							functionId,
-						}));
-				}
 			}
 		}
 

src/components/function-card.tsx

@@ -7,6 +7,7 @@ import { EditAndSelectButtons } from "./edit-and-select-buttons";
 import { useEffect, useState } from "react";
 import { useHasFunctionAccess } from "@/hooks/use-has-function-access";
 import { Draggable } from "./draggable";
+import { css, keyframes } from "@emotion/react";
 
 export function FunctionCard({
 	functionId,
@@ -49,6 +50,34 @@ export function FunctionCard({
 		};
 	}, [functionId]);
 
+	useEffect(() => {
+		if (search.highlighted === functionId) {
+			const timeout = setTimeout(() => {
+				navigate({
+					search: {
+						...search,
+						highlighted: undefined,
+					},
+				});
+			}, 2000);
+			return () => {
+				clearTimeout(timeout);
+			};
+		}
+	}, [search, functionId, navigate]);
+
+	const highlightBorder = keyframes`
+	0% {
+	  outline: 1px solid black;
+	}
+	50% {
+	  outline: 3px solid black;
+	}
+	100% {
+	  outline: 1px solid black;
+	}
+  `;
+
 	const hasAccess = useHasFunctionAccess(functionId);
 	// const isDraggable = config.enableEntra ? hasAccess : true;
 
@@ -57,17 +86,30 @@ export function FunctionCard({
 			{({ listeners }) => (
 				<Card
 					id={functionId.toString()}
+					ref={(e) => {
+						if (search.highlighted === functionId) {
+							e?.scrollIntoView({ behavior: "smooth" });
+						}
+					}}
 					marginBottom={bottomMargin}
 					borderColor="blue.500"
 					opacity={lowlighted ? 0.5 : 1}
 					borderWidth={1}
+					css={
+						search.highlighted === functionId
+							? css`
+						animation:  ${highlightBorder} 1s ease;
+					  `
+							: undefined
+					}
 					onClick={() => {
 						if (!func.data) return;
 						if (search.edit !== undefined) {
 							return;
 						}
 						navigate({
 							search: {
+								...search,
 								path: [
 									...search.path.filter(
 										(path) =>
@@ -83,9 +125,6 @@ export function FunctionCard({
 											]
 										: [`${func?.data?.path}`]),
 								],
-								filters: search.filters,
-								edit: search.edit,
-								flags: search.flags,
 							},
 						});
 						if (selected) {
@@ -104,15 +143,14 @@ export function FunctionCard({
 							});
 							navigate({
 								search: {
+									...search,
 									path: newPath,
-									filters: search.filters,
-									edit: search.edit,
-									flags: search.flags,
 								},
 							});
 						} else {
 							navigate({
 								search: {
+									...search,
 									path: [
 										...search.path.filter(
 											(path) =>
@@ -121,9 +159,6 @@ export function FunctionCard({
 										),
 										func?.data?.path,
 									],
-									filters: search.filters,
-									edit: search.edit,
-									flags: search.flags,
 								},
 							});
 						}