fix: use the same save model modal component throughout the app (#3460)

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');
  }
 };
 

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,15 +400,15 @@ async function handleCode() {
 }
 
 function openModal() {
- isNewModelModalVisible.value = true;
+ if (selectedModel.value) showSaveModelModal.value = true;
 }
 
 function onAddModel(modelName: string) {
  if (!modelName || !selectedOutputId.value) return;
  updateNodeLabel(selectedOutputId.value, modelName);
 }
 function onCloseModelModal() {
- isNewModelModalVisible.value = false;
+ showSaveModelModal.value = false;
 }
 
 function handleCompileExprResponse() {

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) {

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;
 };

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: []