Template management func generation UI

app/web/src/components/ApplyChangeSetButton.vue

@@ -1,6 +1,8 @@
 <template>
   <VButton
-    v-if="ffStore.DEV_SLICE_REBASING && statusWithBase?.conflictsWithBase"
+    v-if="
+      featureFlagsStore.DEV_SLICE_REBASING && statusWithBase?.conflictsWithBase
+    "
     size="md"
     tone="destructive"
     disabled
@@ -9,7 +11,9 @@
   >
   </VButton>
   <VButton
-    v-else-if="ffStore.DEV_SLICE_REBASING && statusWithBase?.baseHasUpdates"
+    v-else-if="
+      featureFlagsStore.DEV_SLICE_REBASING && statusWithBase?.baseHasUpdates
+    "
     size="md"
     tone="warning"
     square
@@ -141,7 +145,6 @@ const statusStoreUpdating = computed(() => {
   } else return false;
 });
 
-const ffStore = useFeatureFlagsStore();
 const statusWithBase = computed(
   () =>
     changeSetsStore.statusWithBase[changeSetsStore.selectedChangeSetId || ""],

app/web/src/components/AssetDetailsPanel.vue

@@ -238,6 +238,7 @@ import {
   VButton,
   VormInput,
   Icon,
+  ColorPicker,
 } from "@si/vue-lib/design-system";
 import * as _ from "lodash-es";
 import { useToast } from "vue-toastification";
@@ -264,7 +265,6 @@ import {
 } from "@/api/sdf/dal/schema";
 import { useFuncStore } from "@/store/func/funcs.store";
 import { PropId } from "@/api/sdf/dal/prop";
-import ColorPicker from "./ColorPicker.vue";
 import AssetFuncAttachModal from "./AssetFuncAttachModal.vue";
 import AssetNameModal from "./AssetNameModal.vue";
 import AssetDetailIntrinsicInput from "./AssetDetailIntrinsicInput.vue";

app/web/src/components/AssetFuncAttachModal.vue

@@ -195,7 +195,7 @@ const props = defineProps<{
 
 const funcStore = useFuncStore();
 const assetStore = useAssetStore();
-const ffStore = useFeatureFlagsStore();
+const featureFlagsStore = useFeatureFlagsStore();
 
 const createFuncStarted = ref(false);
 
@@ -213,7 +213,7 @@ const funcKindOptions = Object.keys(CUSTOMIZABLE_FUNC_TYPES)
   .filter((kind) => {
     if (
       kind === CustomizableFuncKind.Management &&
-      !ffStore.MANAGEMENT_FUNCTIONS
+      !featureFlagsStore.MANAGEMENT_FUNCTIONS
     )
       return false;
     return true;

app/web/src/components/ComponentCard.vue

@@ -104,7 +104,7 @@ import {
 } from "./ModelingDiagram/diagram_types";
 
 const props = defineProps<{
-  titleCard: boolean;
+  titleCard?: boolean;
   component: DiagramGroupData | DiagramNodeData | DiagramViewData;
 }>();
 

app/web/src/components/EdgeCard.vue

@@ -1,14 +1,14 @@
 <template>
   <div v-if="fromComponent && toComponent">
-    <ComponentCard :component="fromComponent" :titleCard="false" />
+    <ComponentCard :component="fromComponent" />
     <div class="_connection-label text-xs italic">
       <!-- currently output and input socket always have the same label/name -->
       <span v-if="edge?.isManagement" class="capsize">Manages</span>
       <span v-else class="capsize">{{ fromSocket?.name }}</span>
       <!-- <div>to</div>
         <span class="capsize">{{ toSocket?.name }}</span> -->
     </div>
-    <ComponentCard :component="toComponent" :titleCard="false" />
+    <ComponentCard :component="toComponent" />
   </div>
 </template>
 

app/web/src/components/FuncEditor/FuncList.vue

@@ -57,7 +57,7 @@ import {
 } from "@/api/sdf/dal/func";
 import { useFeatureFlagsStore } from "@/store/feature_flags.store";
 
-const ffStore = useFeatureFlagsStore();
+const featureFlagsStore = useFeatureFlagsStore();
 
 // filtering out a func type if FF for mgmt functions is off
 // When you use an enum as keys in a record
@@ -66,7 +66,10 @@ const ffStore = useFeatureFlagsStore();
 // So, I can Partial to make all keys optional
 const funcKindOptions: Partial<FUNC_TYPES> = {};
 Object.entries(CUSTOMIZABLE_FUNC_TYPES).forEach(([key, value]) => {
-  if (!ffStore.MANAGEMENT_FUNCTIONS && key === CustomizableFuncKind.Management)
+  if (
+    !featureFlagsStore.MANAGEMENT_FUNCTIONS &&
+    key === CustomizableFuncKind.Management
+  )
     return;
   funcKindOptions[key] = value;
 });

app/web/src/components/ModelingDiagram/DiagramGroup.vue

@@ -362,6 +362,7 @@
       />
     </v-group>
 
+    <!-- upgrade icon -->
     <DiagramIcon
       v-if="group.def.canBeUpgraded"
       :color="getToneColorHex('action')"
@@ -396,6 +397,22 @@
       @mouseover="diffIconHover = true"
       @mouseout="diffIconHover = false"
     />
+
+    <!-- debug text to show the group width and height -->
+    <v-text
+      v-if="debug"
+      :config="{
+        x: -nodeWidth / 2,
+        y: -(NODE_HEADER_HEIGHT + GROUP_HEADER_BOTTOM_MARGIN + 22),
+        verticalAlign: 'top',
+        align: 'left',
+        text: `width: ${irect.width} height: ${irect.height}`,
+        fill: 'red',
+        fontStyle: 'bold',
+        fontFamily: DIAGRAM_FONT_FAMILY,
+        listening: false,
+      }"
+    />
   </v-group>
 </template>
 
@@ -496,9 +513,13 @@ const viewStore = useViewsStore();
 const irect = computed(() => {
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const r = viewStore.groups[props.group.def.id]!;
-  r.width = Math.max(r.width, MIN_NODE_DIMENSION);
-  r.height = Math.max(r.height, MIN_NODE_DIMENSION);
-  return r;
+
+  return {
+    x: r.x,
+    y: r.y,
+    width: Math.max(r.width, MIN_NODE_DIMENSION),
+    height: Math.max(r.height, MIN_NODE_DIMENSION),
+  };
 });
 
 const isDeleted = computed(

app/web/src/components/ModelingDiagram/DiagramNode.vue

@@ -265,16 +265,21 @@
       </v-group>
     </v-group>
 
-    <!-- deleted icon overlay (large centered) -->
-    <!-- <DiagramIcon
-      v-if="isDeleted"
-      icon="minus-square"
-      shadeBg
-      :color="getToneColorHex('destructive')"
-      :size="DELETED_X_SIZE"
-      :x="0"
-      :y="nodeHeight / 2"
-    /> -->
+    <!-- debug text to show the node width and height -->
+    <v-text
+      v-if="debug"
+      :config="{
+        x: -nodeWidth / 2,
+        y: -22,
+        verticalAlign: 'top',
+        align: 'left',
+        text: `width: ${nodeWidth} height: ${nodeHeight}`,
+        fill: 'red',
+        fontStyle: 'bold',
+        fontFamily: DIAGRAM_FONT_FAMILY,
+        listening: false,
+      }"
+    />
   </v-group>
 </template>
 
@@ -309,7 +314,6 @@ import {
   NODE_TITLE_HEADER_MARGIN_RIGHT as NODE_HEADER_MARGIN_RIGHT,
   NODE_HEADER_HEIGHT,
   NODE_HEADER_TEXT_HEIGHT,
-  NODE_WIDTH,
 } from "./diagram_constants";
 import DiagramIcon from "./DiagramIcon.vue";
 
@@ -417,9 +421,11 @@ const parentComponentId = computed(() => props.node.def.parentId);
 const position = computed(() => {
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const r = viewStore.components[props.node.def.id]!;
-  r.width = Math.max(r.width, NODE_WIDTH);
-  r.height = Math.max(r.height, NODE_WIDTH);
-  return r;
+
+  return {
+    x: r.x,
+    y: r.y,
+  };
 });
 
 const colors = computed(() => {

app/web/src/components/ModelingDiagram/ModelingDiagram.vue

@@ -311,6 +311,7 @@ import { useStatusStore } from "@/store/status.store";
 import { useQualificationsStore } from "@/store/qualifications.store";
 import { nonNullable } from "@/utils/typescriptLinter";
 import { ViewId } from "@/api/sdf/dal/views";
+import { useFeatureFlagsStore } from "@/store/feature_flags.store";
 import DiagramGridBackground from "./DiagramGridBackground.vue";
 import {
   DiagramDrawEdgeState,
@@ -370,6 +371,10 @@ import DiagramView from "./DiagramView.vue";
 
 const LEFT_PANEL_DRAWER_WIDTH = 230;
 
+// SET THIS BOOLEAN TO TRUE TO ENABLE DEBUG MODE!
+// VERY HELPFUL FOR DEBUGGING ISSUES ON THE DIAGRAM!
+const enableDebugMode = false;
+
 const route = useRoute();
 const toast = useToast();
 
@@ -394,12 +399,11 @@ const emit = defineEmits<{
 const componentsStore = useComponentsStore();
 const viewStore = useViewsStore();
 const statusStore = useStatusStore();
+const featureFlagsStore = useFeatureFlagsStore();
 const modelingEventBus = componentsStore.eventBus;
 
 const fetchDiagramReqStatus = viewStore.getRequestStatus("FETCH_VIEW");
 
-const enableDebugMode = false;
-
 const customFontsLoaded = useCustomFontsLoaded();
 
 let kStage: KonvaStage;
@@ -879,6 +883,17 @@ async function onKeyDown(e: KeyboardEvent) {
     e.preventDefault();
     renameOnDiagramByComponentId(viewStore.selectedComponentId);
   }
+  if (
+    !props.readOnly &&
+    featureFlagsStore.TEMPLATE_MGMT_FUNC_GENERATION &&
+    e.key === "t" &&
+    viewStore.restorableSelectedComponents.length === 0 &&
+    viewStore.selectedComponents.length > 0 &&
+    !viewStore.selectedComponents.some((c) => c instanceof DiagramViewData)
+  ) {
+    e.preventDefault();
+    modelingEventBus.emit("templateFromSelection");
+  }
 }
 
 function onKeyUp(e: KeyboardEvent) {

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

@@ -23,7 +23,6 @@
             <ComponentCard
               v-for="component in erasableViews"
               :key="component.def.id"
-              :titleCard="false"
               :component="component"
             />
           </Stack>
@@ -50,7 +49,6 @@
             <ComponentCard
               v-for="component in deletableComponentsInView"
               :key="component.def.id"
-              :titleCard="false"
               :component="component"
             />
           </Stack>

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

@@ -14,7 +14,6 @@
           <ComponentCard
             v-for="component in viewStore.erasableSelectedComponents"
             :key="component.def.id"
-            :titleCard="false"
             :component="component"
           />
         </Stack>

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

@@ -74,7 +74,7 @@ const componentsStore = useComponentsStore();
 const funcStore = useFuncStore();
 const actionsStore = useActionsStore();
 const viewStore = useViewsStore();
-const ffStore = useFeatureFlagsStore();
+const featureFlagsStore = useFeatureFlagsStore();
 
 const {
   selectedComponentId,
@@ -265,7 +265,7 @@ const rightClickMenuItems = computed(() => {
   const items: DropdownMenuItemObjectDef[] = [];
   const disabled = false;
 
-  if (ffStore.OUTLINER_VIEWS) {
+  if (featureFlagsStore.OUTLINER_VIEWS) {
     items.push({
       label: "VIEWS",
       header: true,
@@ -365,7 +365,7 @@ const rightClickMenuItems = computed(() => {
   // management funcs for a single selected component
   if (
     funcStore.managementFunctionsForSelectedComponent.length > 0 &&
-    ffStore.MANAGEMENT_FUNCTIONS
+    featureFlagsStore.MANAGEMENT_FUNCTIONS
   ) {
     const submenuItems: DropdownMenuItemObjectDef[] = [];
     funcStore.managementFunctionsForSelectedComponent.forEach((fn) => {
@@ -384,7 +384,7 @@ const rightClickMenuItems = computed(() => {
     });
   }
 
-  // you copy, restore, delete,
+  // you copy, restore, delete, template
   items.push({
     label: `Copy`,
     shortcut: "⌘C",
@@ -416,6 +416,18 @@ const rightClickMenuItems = computed(() => {
       disabled,
     });
   }
+  if (
+    restorableSelectedComponents.value.length === 0 &&
+    featureFlagsStore.TEMPLATE_MGMT_FUNC_GENERATION
+  ) {
+    items.push({
+      label: `Create Template`,
+      shortcut: "T",
+      icon: "tools",
+      onSelect: triggerTemplateFromSelection,
+      disabled,
+    });
+  }
 
   // can erase so long as you have not selected a view
   if (
@@ -549,6 +561,11 @@ function triggerRestoreSelection() {
   elementPos.value = null;
 }
 
+function triggerTemplateFromSelection() {
+  modelingEventBus.emit("templateFromSelection");
+  elementPos.value = null;
+}
+
 function triggerWipeFromDiagram() {
   modelingEventBus.emit("eraseSelection");
   elementPos.value = null;