From 74e69bd27ade730bc3cf01ea352d4a26716d9fcb Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Mon, 29 Apr 2024 18:15:19 -0400
Subject: [PATCH] fix: use the same save model modal component throughout the
 app (#3460)

---
 .../ops/model-edit/tera-model-edit.vue        |  43 ++----
 .../model-from-code/tera-model-from-code.vue  |  17 +-
 .../tera-model-from-equations-drilldown.vue   |  17 +-
 .../ops/stratify-mira/tera-stratify-mira.vue  |  58 ++-----
 .../petrinet/petrinet-service.ts              |   3 +-
 .../project/components/tera-model-modal.vue   | 114 --------------
 .../components/tera-save-model-modal.vue      | 145 ++++++++++++++++++
 .../src/page/project/tera-project.vue         |  15 +-
 .../client/hmi-client/src/services/model.ts   |  13 --
 9 files changed, 198 insertions(+), 227 deletions(-)
 delete mode 100644 packages/client/hmi-client/src/page/project/components/tera-model-modal.vue
 create mode 100644 packages/client/hmi-client/src/page/project/components/tera-save-model-modal.vue

diff --git a/packages/client/hmi-client/src/components/workflow/ops/model-edit/tera-model-edit.vue b/packages/client/hmi-client/src/components/workflow/ops/model-edit/tera-model-edit.vue
index 27fc6ff353..8b2e2dda22 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/model-edit/tera-model-edit.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/model-edit/tera-model-edit.vue
@@ -64,12 +64,6 @@
 						<img src="@assets/svg/plants.svg" alt="" draggable="false" />
 					</div>
 					<template #footer>
-						<InputText
-							v-model="newModelName"
-							placeholder="model name"
-							type="text"
-							class="input-small"
-						/>
 						<div class="flex gap-2">
 							<Button
 								:disabled="!amr"
@@ -79,7 +73,7 @@
 								class="white-space-nowrap"
 								style="margin-right: auto"
 								label="Save as new model"
-								@click="saveNewModel({ addToProject: true, appendOutputPort: true })"
+								@click="showSaveModelModal = true"
 							/>
 							<Button label="Close" size="large" @click="emit('close')" />
 						</div>
@@ -88,22 +82,26 @@
 			</div>
 		</div>
 	</tera-drilldown>
+	<tera-save-model-modal
+		v-if="amr"
+		:model="amr"
+		:is-visible="showSaveModelModal"
+		@close-modal="showSaveModelModal = false"
+		@on-save="onSaveModel"
+	/>
 </template>
 
 <script setup lang="ts">
 import _ from 'lodash';
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import Button from 'primevue/button';
-import InputText from 'primevue/inputtext';
 import { VAceEditor } from 'vue3-ace-editor';
 import { VAceEditorInstance } from 'vue3-ace-editor/types';
 import '@/ace-config';
 import { v4 as uuidv4 } from 'uuid';
 import type { Model } from '@/types/Types';
-import { AssetType } from '@/types/Types';
-import { createModel, getModel } from '@/services/model';
+import { getModel } from '@/services/model';
 import { WorkflowNode, WorkflowOutput, OperatorStatus } from '@/types/workflow';
-import { useProjects } from '@/composables/project';
 import { logger } from '@/utils/logger';
 import TeraModelDiagram from '@/components/model/petrinet/model-diagrams/tera-model-diagram.vue';
 import TeraNotebookError from '@/components/drilldown/tera-notebook-error.vue';
@@ -115,6 +113,7 @@ import TeraNotebookJupyterInput from '@/components/llm/tera-notebook-jupyter-inp
 
 import { KernelSessionManager } from '@/services/jupyter';
 import { getModelIdFromModelConfigurationId } from '@/services/model-configurations';
+import TeraSaveModelModal from '@/page/project/components/tera-save-model-modal.vue';
 import { ModelEditOperationState } from './model-edit-operation';
 
 const props = defineProps<{
@@ -149,8 +148,8 @@ const activeOutput = ref<WorkflowOutput<ModelEditOperationState> | null>(null);
 const kernelManager = new KernelSessionManager();
 const isKernelReady = ref(false);
 const amr = ref<Model | null>(null);
+const showSaveModelModal = ref(false);
 
-const newModelName = ref('');
 let editor: VAceEditorInstance['_editor'] | null;
 const sampleAgentQuestions = [
 	'Add a new transition from S to R with the name vaccine with the rate of v and unit Days.',
@@ -316,29 +315,15 @@ const inputChangeHandler = async () => {
 	}
 };
 
-const saveNewModel = async (options: SaveOptions) => {
-	if (!amr.value) return;
-	amr.value.header.name = newModelName.value;
-
-	const projectResource = useProjects();
-	const modelData = await createModel(amr.value);
-	const projectId = projectResource.activeProject.value?.id;
-
-	if (!modelData) return;
-
-	if (options.addToProject) {
-		await projectResource.addAsset(AssetType.Model, modelData.id, projectId);
-	}
-
+const onSaveModel = (savedModel: Model, options: SaveOptions = { appendOutputPort: true }) => {
 	if (options.appendOutputPort) {
 		emit('append-output', {
 			id: uuidv4(),
-			label: newModelName.value,
+			label: savedModel.name,
 			type: 'modelId',
 			state: _.cloneDeep(props.node.state),
-			value: [modelData.id]
+			value: [savedModel.id]
 		});
-		emit('close');
 	}
 };
 
diff --git a/packages/client/hmi-client/src/components/workflow/ops/model-from-code/tera-model-from-code.vue b/packages/client/hmi-client/src/components/workflow/ops/model-from-code/tera-model-from-code.vue
index 3dbaaa12dd..e49d4fe7a0 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/model-from-code/tera-model-from-code.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/model-from-code/tera-model-from-code.vue
@@ -137,11 +137,12 @@
 			</tera-drilldown-preview>
 		</template>
 	</tera-drilldown>
-	<tera-model-modal
-		:modelId="selectedModel?.id"
-		:is-visible="isNewModelModalVisible"
+	<tera-save-model-modal
+		v-if="selectedModel"
+		:model="selectedModel"
+		:is-visible="showSaveModelModal"
 		@close-modal="onCloseModelModal"
-		@update="onAddModel"
+		@on-save="onAddModel"
 	/>
 </template>
 
@@ -156,7 +157,7 @@ import TeraModelDescription from '@/components/model/petrinet/tera-model-descrip
 import TeraOperatorPlaceholder from '@/components/operator/tera-operator-placeholder.vue';
 import TeraAssetBlock from '@/components/widgets/tera-asset-block.vue';
 import { useProjects } from '@/composables/project';
-import TeraModelModal from '@/page/project/components/tera-model-modal.vue';
+import TeraSaveModelModal from '@/page/project/components/tera-save-model-modal.vue';
 import { getCodeAsset } from '@/services/code';
 import { getDocumentAsset } from '@/services/document-assets';
 import { KernelSessionManager } from '@/services/jupyter';
@@ -192,7 +193,7 @@ enum ModelFramework {
 	Petrinet = 'Petrinet',
 	Decapodes = 'Decapodes'
 }
-const isNewModelModalVisible = ref(false);
+const showSaveModelModal = ref(false);
 const isProcessing = ref(false);
 const fetchingInputBlocks = ref(false);
 
@@ -399,7 +400,7 @@ async function handleCode() {
 }
 
 function openModal() {
-	isNewModelModalVisible.value = true;
+	if (selectedModel.value) showSaveModelModal.value = true;
 }
 
 function onAddModel(modelName: string) {
@@ -407,7 +408,7 @@ function onAddModel(modelName: string) {
 	updateNodeLabel(selectedOutputId.value, modelName);
 }
 function onCloseModelModal() {
-	isNewModelModalVisible.value = false;
+	showSaveModelModal.value = false;
 }
 
 function handleCompileExprResponse() {
diff --git a/packages/client/hmi-client/src/components/workflow/ops/model-from-equations/tera-model-from-equations-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/model-from-equations/tera-model-from-equations-drilldown.vue
index cffe292534..483c047a55 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/model-from-equations/tera-model-from-equations-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/model-from-equations/tera-model-from-equations-drilldown.vue
@@ -96,7 +96,7 @@
 						:disabled="!selectedModel"
 						outlined
 						:loading="savingAsset"
-						@click="isNewModelModalVisible = true"
+						@click="showSaveModelModal = true"
 					></Button>
 					<Button label="Close" @click="emit('close')" severity="secondary" outlined size="large" />
 					<Button
@@ -110,11 +110,12 @@
 			</tera-drilldown-preview>
 		</template>
 	</tera-drilldown>
-	<tera-model-modal
-		:modelId="selectedModel?.id"
-		:is-visible="isNewModelModalVisible"
+	<tera-save-model-modal
+		v-if="selectedModel"
+		:model="selectedModel"
+		:is-visible="showSaveModelModal"
 		@close-modal="onCloseModelModal"
-		@update="onAddModel"
+		@on-save="onAddModel"
 	/>
 </template>
 
@@ -138,7 +139,7 @@ import TeraOperatorPlaceholder from '@/components/operator/tera-operator-placeho
 import { useProjects } from '@/composables/project';
 import TeraMathEditor from '@/components/mathml/tera-math-editor.vue';
 import InputText from 'primevue/inputtext';
-import TeraModelModal from '@/page/project/components/tera-model-modal.vue';
+import TeraSaveModelModal from '@/page/project/components/tera-save-model-modal.vue';
 import { ModelServiceType } from '@/types/common';
 import TeraOutputDropdown from '@/components/drilldown/tera-output-dropdown.vue';
 import TeraModelDescription from '@/components/model/petrinet/tera-model-description.vue';
@@ -234,7 +235,7 @@ const selectedModel = ref<Model | null>(null);
 const card = ref<Card | null>(null);
 const goLLMCard = computed<any>(() => document.value?.metadata?.gollmCard);
 
-const isNewModelModalVisible = ref(false);
+const showSaveModelModal = ref(false);
 const savingAsset = ref(false);
 const isGeneratingCard = ref(false);
 onMounted(async () => {
@@ -367,7 +368,7 @@ function onAddModel(modelName: string) {
 }
 
 function onCloseModelModal() {
-	isNewModelModalVisible.value = false;
+	showSaveModelModal.value = false;
 }
 
 function updateNodeLabel(id: string, label: string) {
diff --git a/packages/client/hmi-client/src/components/workflow/ops/stratify-mira/tera-stratify-mira.vue b/packages/client/hmi-client/src/components/workflow/ops/stratify-mira/tera-stratify-mira.vue
index b2ed62b5c7..f6d70ad8a2 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/stratify-mira/tera-stratify-mira.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/stratify-mira/tera-stratify-mira.vue
@@ -97,61 +97,40 @@
 						severity="secondary"
 						size="large"
 						label="Save as new model"
-						@click="isNewModelModalVisible = true"
+						@click="showSaveModelModal = true"
 					/>
 					<Button label="Close" size="large" @click="emit('close')" />
 				</template>
 			</tera-drilldown-preview>
 		</template>
 	</tera-drilldown>
-	<tera-modal v-if="isNewModelModalVisible" class="save-as-dialog">
-		<template #header>
-			<h4>Save as a new model</h4>
-		</template>
-		<form @submit.prevent class="mt-3">
-			<label for="new-model">What would you like to call it?</label>
-			<InputText
-				id="new-model"
-				type="text"
-				v-model="newModelName"
-				placeholder="Enter a unique name for your model"
-			/>
-		</form>
-		<template #footer>
-			<Button label="Save" size="large" @click="saveNewModel" />
-			<Button
-				class="p-button-secondary"
-				size="large"
-				label="Cancel"
-				@click="isNewModelModalVisible = false"
-			/>
-		</template>
-	</tera-modal>
+	<tera-save-model-modal
+		v-if="stratifiedAmr"
+		:model="stratifiedAmr"
+		:is-visible="showSaveModelModal"
+		@close-modal="showSaveModelModal = false"
+	/>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import _ from 'lodash';
-import { AssetType } from '@/types/Types';
 import TeraDrilldownPreview from '@/components/drilldown/tera-drilldown-preview.vue';
 import TeraDrilldownSection from '@/components/drilldown/tera-drilldown-section.vue';
 import TeraDrilldown from '@/components/drilldown/tera-drilldown.vue';
 import TeraModelDiagram from '@/components/model/petrinet/model-diagrams/tera-model-diagram.vue';
 import TeraOperatorPlaceholder from '@/components/operator/tera-operator-placeholder.vue';
 import TeraModelSemanticTables from '@/components/model/tera-model-semantic-tables.vue';
-
+import TeraSaveModelModal from '@/page/project/components/tera-save-model-modal.vue';
 import TeraStratificationGroupForm from '@/components/workflow/ops/stratify-mira/tera-stratification-group-form.vue';
-import TeraModal from '@/components/widgets/tera-modal.vue';
-import { useProjects } from '@/composables/project';
+
 import { createModel, getModel } from '@/services/model';
 import { WorkflowNode, OperatorStatus } from '@/types/workflow';
 import { logger } from '@/utils/logger';
 import Button from 'primevue/button';
-import InputText from 'primevue/inputtext';
 import { v4 as uuidv4 } from 'uuid';
 import { VAceEditor } from 'vue3-ace-editor';
 import { VAceEditorInstance } from 'vue3-ace-editor/types';
-import { useToastService } from '@/services/toast';
 import '@/ace-config';
 import TeraNotebookError from '@/components/drilldown/tera-notebook-error.vue';
 import type { Model } from '@/types/Types';
@@ -191,9 +170,7 @@ const executeResponse = ref({
 	traceback: ''
 });
 const modelNodeOptions = ref<string[]>([]);
-
-const isNewModelModalVisible = ref(false);
-const newModelName = ref('');
+const showSaveModelModal = ref(false);
 
 const selectedOutputId = ref<string>();
 const outputs = computed(() => {
@@ -391,21 +368,6 @@ const inputChangeHandler = async () => {
 	}
 };
 
-const saveNewModel = async () => {
-	if (!stratifiedAmr.value) return;
-	stratifiedAmr.value.header.name = newModelName.value;
-
-	const projectResource = useProjects();
-	const modelData = await createModel(stratifiedAmr.value);
-	const projectId = projectResource.activeProject.value?.id;
-
-	if (!modelData) return;
-	await projectResource.addAsset(AssetType.Model, modelData.id, projectId);
-	useToastService().success('', `Saved to project ${projectResource.activeProject.value?.name}`);
-
-	isNewModelModalVisible.value = false;
-};
-
 const initialize = (editorInstance: any) => {
 	editor = editorInstance;
 };
diff --git a/packages/client/hmi-client/src/model-representation/petrinet/petrinet-service.ts b/packages/client/hmi-client/src/model-representation/petrinet/petrinet-service.ts
index e14b2f5f94..b8fdd33b4b 100644
--- a/packages/client/hmi-client/src/model-representation/petrinet/petrinet-service.ts
+++ b/packages/client/hmi-client/src/model-representation/petrinet/petrinet-service.ts
@@ -127,7 +127,7 @@ export const updateConfigFields = async (
 	});
 };
 
-export function newAMR(modelName: string) {
+export function newAMR(modelName: string = '') {
 	const amr: Model = {
 		header: {
 			name: modelName,
@@ -137,7 +137,6 @@ export function newAMR(modelName: string) {
 			schema_name: 'petrinet',
 			model_version: '0.1'
 		},
-		id: '',
 		model: {
 			states: [],
 			transitions: []
diff --git a/packages/client/hmi-client/src/page/project/components/tera-model-modal.vue b/packages/client/hmi-client/src/page/project/components/tera-model-modal.vue
deleted file mode 100644
index eb466040cb..0000000000
--- a/packages/client/hmi-client/src/page/project/components/tera-model-modal.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<template>
-	<Teleport to="body">
-		<tera-modal
-			v-if="isVisible"
-			@modal-mask-clicked="emit('close-modal')"
-			@modal-enter-press="createNewModel"
-		>
-			<template #header>
-				<h4>New model</h4>
-			</template>
-			<template #default>
-				<form @submit.prevent>
-					<label for="new-model">Enter a unique name for your model</label>
-					<InputText
-						v-bind:class="invalidInputStyle"
-						id="new-model"
-						type="text"
-						v-model="newModelName"
-						placeholder="new model"
-					/>
-				</form>
-			</template>
-			<template #footer>
-				<Button @click="createOrUpdateModel">Create model</Button>
-				<Button class="p-button-secondary" @click="emit('close-modal')"> Cancel </Button>
-			</template>
-		</tera-modal>
-	</Teleport>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-import TeraModal from '@/components/widgets/tera-modal.vue';
-import Button from 'primevue/button';
-import InputText from 'primevue/inputtext';
-import router from '@/router';
-import { RouteName } from '@/router/routes';
-import { AssetType } from '@/types/Types';
-import {
-	addNewPetrinetModelToProject,
-	getModel,
-	updateModel,
-	validateModelName
-} from '@/services/model';
-import { useProjects } from '@/composables/project';
-import { addAsset } from '@/services/project';
-import { useToastService } from '@/services/toast';
-
-const props = defineProps<{
-	isVisible: boolean;
-	modelId?: string;
-}>();
-const emit = defineEmits(['close-modal', 'update']);
-
-// New Model Modal
-const newModelName = ref<string>('');
-const isValidName = ref<boolean>(true);
-const invalidInputStyle = computed(() => (!isValidName.value ? 'p-invalid' : ''));
-
-async function createNewModel() {
-	isValidName.value = validateModelName(newModelName.value);
-	if (!isValidName.value) return;
-	const modelId = await addNewPetrinetModelToProject(newModelName.value.trim());
-	let newAsset;
-	if (modelId) {
-		newAsset = await useProjects().addAsset(AssetType.Model, modelId);
-	}
-	if (newAsset) {
-		router.push({
-			name: RouteName.Project,
-			params: {
-				pageType: AssetType.Model,
-				assetId: modelId
-			}
-		});
-	}
-	emit('close-modal');
-}
-
-async function updateModelName() {
-	if (!validateModelName(newModelName.value) || !props.modelId) return;
-
-	// 1. Update model name
-	const model = await getModel(props.modelId);
-	if (!model) return;
-	model.header.name = newModelName.value;
-	const updateResponse = await updateModel(model);
-	if (!updateResponse) return;
-
-	// 2. Save asset to project
-	const projectId = useProjects().activeProject.value?.id;
-	if (!projectId) return;
-	const response = await addAsset(projectId, AssetType.Model, props.modelId);
-	await useProjects().refresh();
-
-	if (!response) {
-		return;
-	}
-
-	useToastService().success('', 'Model saved successfully');
-	emit('update', newModelName.value);
-	emit('close-modal');
-}
-
-async function createOrUpdateModel() {
-	if (props.modelId) {
-		updateModelName();
-	} else {
-		createNewModel();
-	}
-}
-</script>
-
-<style scoped></style>
diff --git a/packages/client/hmi-client/src/page/project/components/tera-save-model-modal.vue b/packages/client/hmi-client/src/page/project/components/tera-save-model-modal.vue
new file mode 100644
index 0000000000..89bb695761
--- /dev/null
+++ b/packages/client/hmi-client/src/page/project/components/tera-save-model-modal.vue
@@ -0,0 +1,145 @@
+<template>
+	<Teleport to="body">
+		<tera-modal
+			v-if="isVisible"
+			class="save-as-dialog"
+			@modal-mask-clicked="emit('close-modal')"
+			@modal-enter-press="save"
+		>
+			<template #header>
+				<h4>{{ title }}</h4>
+			</template>
+			<template #default>
+				<form @submit.prevent>
+					<label for="new-model">What would you like to call it?</label>
+					<InputText
+						id="new-model"
+						type="text"
+						v-model="newModelName"
+						placeholder="Enter a unique name for your model"
+					/>
+				</form>
+			</template>
+			<template #footer>
+				<Button label="Save" size="large" @click="save" />
+				<Button label="Cancel" class="p-button-secondary" size="large" outlined @click="cancel" />
+			</template>
+		</tera-modal>
+	</Teleport>
+</template>
+
+<script setup lang="ts">
+import { cloneDeep } from 'lodash';
+import { ref, PropType } from 'vue';
+import TeraModal from '@/components/widgets/tera-modal.vue';
+import Button from 'primevue/button';
+import InputText from 'primevue/inputtext';
+import router from '@/router';
+import { RouteName } from '@/router/routes';
+import { AssetType } from '@/types/Types';
+import type { Model } from '@/types/Types';
+import { createModel, updateModel } from '@/services/model';
+import { useProjects } from '@/composables/project';
+import { newAMR } from '@/model-representation/petrinet/petrinet-service';
+import { logger } from '@/utils/logger';
+
+const props = defineProps({
+	title: {
+		type: String,
+		default: 'Save as a new model'
+	},
+	isVisible: {
+		type: Boolean,
+		default: false
+	},
+	model: {
+		type: Object as PropType<Model>,
+		default: newAMR()
+	},
+	openOnSave: {
+		type: Boolean,
+		default: false
+	},
+	isUpdatingName: {
+		type: Boolean,
+		default: false
+	}
+});
+
+const emit = defineEmits(['close-modal', 'on-save']);
+
+const newModelName = ref<string>('');
+
+const projectResource = useProjects();
+
+// TODO: Consider letting the user just know if what they are typing currently is a duplicate (do not prevent them from saving)
+// const isValidName = ref<boolean>(true);
+// const invalidInputStyle = computed(() => (!isValidName.value ? 'p-invalid' : ''));	v-bind:class="invalidInputStyle"
+
+async function saveAs() {
+	const newModel = cloneDeep(props.model);
+	newModel.header.name = newModelName.value.trim();
+
+	const modelData = await createModel(newModel);
+	if (!modelData) return;
+
+	const projectId = projectResource.activeProject.value?.id;
+	await projectResource.addAsset(AssetType.Model, modelData.id, projectId);
+
+	const assetRouteParams = {
+		name: RouteName.Project,
+		params: {
+			pageType: AssetType.Model,
+			assetId: modelData.id
+		}
+	};
+
+	logger.info(
+		`${modelData.name} saved successfully in project ${projectResource.activeProject.value?.name}.`
+	);
+	if (props.openOnSave) {
+		router.push(assetRouteParams);
+	}
+
+	emit('on-save', modelData);
+	emit('close-modal');
+}
+
+async function updateName() {
+	const modelToUpdate = cloneDeep(props.model);
+	modelToUpdate.header.name = newModelName.value.trim();
+
+	const response = await updateModel(modelToUpdate);
+	if (!response) return;
+
+	// TODO: Consider calling this refresh within the update functions in the services themselves
+	projectResource.refresh();
+
+	logger.info(`Updated model name to ${newModelName.value}.`);
+	emit('on-save', newModelName.value);
+	emit('close-modal');
+}
+
+function save() {
+	if (props.isUpdatingName) {
+		updateName();
+	} else {
+		saveAs();
+	}
+}
+
+function cancel() {
+	newModelName.value = '';
+	emit('close-modal');
+}
+</script>
+
+<style scoped>
+.save-as-dialog:deep(section) {
+	width: 40rem;
+}
+
+form {
+	margin-top: var(--gap);
+}
+</style>
diff --git a/packages/client/hmi-client/src/page/project/tera-project.vue b/packages/client/hmi-client/src/page/project/tera-project.vue
index 5318a9e0bf..55e41de3cb 100644
--- a/packages/client/hmi-client/src/page/project/tera-project.vue
+++ b/packages/client/hmi-client/src/page/project/tera-project.vue
@@ -66,7 +66,12 @@
 			</template>
 		</tera-slider-panel>
 		<!-- New model modal -->
-		<tera-model-modal :is-visible="isNewModelModalVisible" @close-modal="onCloseModelModal" />
+		<tera-save-model-modal
+			title="Create new model"
+			:is-visible="showSaveModelModal"
+			open-on-save
+			@close-modal="onCloseModelModal"
+		/>
 	</main>
 </template>
 
@@ -93,8 +98,8 @@ import { getCodeFileAsText } from '@/services/code';
 import TeraCode from '@/components/code/tera-code.vue';
 import TeraWorkflow from '@/components/workflow/tera-workflow.vue';
 import Button from 'primevue/button';
-import TeraModelModal from './components/tera-model-modal.vue';
 import TeraUploadResourcesModal from './components/tera-upload-resources-modal.vue';
+import TeraSaveModelModal from './components/tera-save-model-modal.vue';
 
 const route = useRoute();
 const router = useRouter();
@@ -102,7 +107,7 @@ const router = useRouter();
 const code = ref<string>();
 const isResourcesSliderOpen = ref(true);
 const isNotesSliderOpen = ref(false);
-const isNewModelModalVisible = ref(false);
+const showSaveModelModal = ref(false);
 const isUploadResourcesModalVisible = ref(false);
 
 const pageType = computed(() => (route.params.pageType as ProjectPages | AssetType) ?? '');
@@ -177,7 +182,7 @@ const openWorkflow = async () => {
 const openNewAsset = (assetType: AssetType) => {
 	switch (assetType) {
 		case AssetType.Model:
-			isNewModelModalVisible.value = true;
+			showSaveModelModal.value = true;
 			break;
 		case AssetType.Workflow:
 			openWorkflow();
@@ -206,7 +211,7 @@ async function openCode() {
 }
 
 const onCloseModelModal = () => {
-	isNewModelModalVisible.value = false;
+	showSaveModelModal.value = false;
 };
 
 onMounted(() => {
diff --git a/packages/client/hmi-client/src/services/model.ts b/packages/client/hmi-client/src/services/model.ts
index 9df8577843..b8cab1c9fa 100644
--- a/packages/client/hmi-client/src/services/model.ts
+++ b/packages/client/hmi-client/src/services/model.ts
@@ -1,6 +1,5 @@
 import API from '@/api/api';
 import { useProjects } from '@/composables/project';
-import { newAMR } from '@/model-representation/petrinet/petrinet-service';
 import * as EventService from '@/services/event';
 import type { Initial, Model, ModelConfiguration, ModelParameter } from '@/types/Types';
 import { Artifact, AssetType, EventType } from '@/types/Types';
@@ -81,18 +80,6 @@ export async function getModelConfigurations(modelId: Model['id']): Promise<Mode
 	return response?.data ?? ([] as ModelConfiguration[]);
 }
 
-// function adds model to project, returns modelId if successful otherwise null
-export async function addNewPetrinetModelToProject(modelName: string): Promise<string | null> {
-	// 1. Load an empty AMR
-	const amr = newAMR(modelName);
-	(amr as any).id = undefined; // FIXME: id hack
-
-	const response = await createModel(amr);
-	const modelId = response?.id;
-
-	return modelId ?? null;
-}
-
 export async function processAndAddModelToProject(artifact: Artifact): Promise<string | null> {
 	const response = await API.post(`/mira/convert-and-create-model`, {
 		artifactId: artifact.id