feat: generate templates from selected components

Takes a set of component ids, and a view, and generates a management
function that will recreate the components on demand, with their
(relative) position, connections, and parentage preserved. Then attaches
that function to a brand new schema variant.

app/web/src/components/ModelingView/TemplateSelectionModal.vue

@@ -81,11 +81,7 @@ import { useComponentsStore } from "@/store/components.store";
 import { useViewsStore } from "@/store/views.store";
 import { useFeatureFlagsStore } from "@/store/feature_flags.store";
 import ComponentCard from "../ComponentCard.vue";
-import {
-  DiagramGroupData,
-  DiagramNodeData,
-  DiagramViewData,
-} from "../ModelingDiagram/diagram_types";
+import { DiagramViewData } from "../ModelingDiagram/diagram_types";
 
 const componentsStore = useComponentsStore();
 const viewsStore = useViewsStore();
@@ -147,15 +143,19 @@ onBeforeUnmount(() => {
 });
 
 const onCreateTemplate = () => {
-  if (!readyToSubmit.value || !validSelectedComponents.value) return;
+  if (
+    !readyToSubmit.value ||
+    !validSelectedComponents.value ||
+    !viewsStore.selectedViewId
+  )
+    return;
 
   const templateData = {
-    assetColor: assetColor.value,
+    color: assetColor.value,
     assetName: assetName.value,
     funcName: funcName.value,
-    components: selectedComponents.value as Array<
-      DiagramNodeData | DiagramGroupData
-    >,
+    componentIds: selectedComponents.value.map((component) => component.def.id),
+    viewId: viewsStore.selectedViewId,
   };
 
   componentsStore.CREATE_TEMPLATE_FUNC_FROM_COMPONENTS(templateData);

app/web/src/store/components.store.ts

@@ -37,6 +37,7 @@ import { Resource } from "@/api/sdf/dal/resource";
 import { CodeView } from "@/api/sdf/dal/code_view";
 import ComponentUpgrading from "@/components/toasts/ComponentUpgrading.vue";
 import { nonNullable } from "@/utils/typescriptLinter";
+import { ViewId } from "@/api/sdf/dal/views";
 import handleStoreError from "./errors";
 import { useChangeSetsStore } from "./change_sets.store";
 import { useAssetStore } from "./asset.store";
@@ -1163,14 +1164,26 @@ export const useComponentsStore = (forceChangeSetId?: ChangeSetId) => {
           },
 
           async CREATE_TEMPLATE_FUNC_FROM_COMPONENTS(templateData: {
-            assetColor: string;
+            color: string;
             assetName: string;
             funcName: string;
-            components: Array<DiagramNodeData | DiagramGroupData>;
+            componentIds: ComponentId[];
+            viewId: ViewId;
           }) {
-            // TODO(Wendy) - this is where the end point would be called!
-            // eslint-disable-next-line no-console
-            console.log(templateData);
+            const { color, assetName, funcName, componentIds, viewId } =
+              templateData;
+
+            return new ApiRequest({
+              method: "post",
+              url: `v2/workspaces/${workspaceId}/change-sets/${changeSetId}/management/generate_template/${viewId}`,
+              params: {
+                componentIds,
+                assetName,
+                funcName,
+                category: "Templates",
+                color,
+              },
+            });
           },
 
           setComponentDisplayName(

lib/dal/src/component.rs

@@ -1465,16 +1465,16 @@ impl Component {
         &mut self,
         ctx: &DalContext,
         view_id: ViewId,
-        x: impl Into<isize>,
-        y: impl Into<isize>,
-        width: Option<impl Into<isize>>,
-        height: Option<impl Into<isize>>,
+        x: isize,
+        y: isize,
+        width: Option<isize>,
+        height: Option<isize>,
     ) -> ComponentResult<Geometry> {
         let new_geometry = RawGeometry {
-            x: x.into(),
-            y: y.into(),
-            width: width.map(|w| w.into()),
-            height: height.map(|h| h.into()),
+            x,
+            y,
+            width,
+            height,
         };
 
         self.set_raw_geometry(ctx, new_geometry, view_id).await