Revert ParameterStringInput.vue to fix bug introduced by defineModel

The user could not select an object via the object select dialog,
because it would automatically switch to the advanced form input
when selecting an option from the HTML select tag

#95

.gitlab-ci.yml

@@ -13,6 +13,7 @@ default:
     - docker
   before_script:
     - npm --version  # For debugging
+    - node --version
     - npm install --no-fund
 
 lint:

src/components/parameter-schema/form-mode/ParameterStringInput.vue

@@ -10,8 +10,6 @@ const s3objectRepository = useS3ObjectStore();
 const resourceRepository = useResourceStore();
 const randomIDSuffix = Math.random().toString(16).substring(2, 8);
 
-const model = defineModel<string | undefined>({ required: true });
-
 const props = defineProps({
   parameter: {
     type: Object,
@@ -25,6 +23,9 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  modelValue: {
+    type: String,
+  },
   helpId: {
     type: String,
   },
@@ -38,6 +39,10 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits<{
+  (e: "update:modelValue", value?: string): void;
+}>();
+
 const s3Path = reactive<{
   bucket: string;
   key?: string;
@@ -56,8 +61,10 @@ const selectedResource = reactive<{
 
 const formState = reactive<{
   advancedInput: boolean;
+  stringVal?: string;
 }>({
   advancedInput: false,
+  stringVal: undefined,
 });
 
 const stringInput = ref<HTMLInputElement | undefined>(undefined);
@@ -124,17 +131,22 @@ watch(
   },
 );
 
+watch(() => formState.stringVal, updateValue);
 watch(selectedResource, () => {
   if (clowmResource.value && !formState.advancedInput) {
     updateStringFromResource();
   }
 });
 
-watch(model, (newVal, oldVal) => {
-  if (newVal && newVal !== oldVal) {
-    formState.advancedInput = true;
-  }
-});
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (formState.stringVal != newVal) {
+      formState.stringVal = newVal;
+      formState.advancedInput = true;
+    }
+  },
+);
 
 watch(
   () => formState.advancedInput,
@@ -149,14 +161,18 @@ watch(
   },
 );
 
+function updateValue() {
+  emit("update:modelValue", formState.stringVal);
+}
+
 function updateStringFromS3() {
-  model.value = !s3Path.bucket
+  formState.stringVal = !s3Path.bucket
     ? undefined
     : `s3://${s3Path.bucket}${s3Path.key ? "/" + s3Path.key : ""}`;
 }
 
 function updateStringFromResource() {
-  model.value =
+  formState.stringVal =
     resourceRepository.resourceMapping[selectedResource.resourceId]?.versions[
       selectedResource.resourceVersionIndex
     ]?.cluster_path ?? undefined;
@@ -172,7 +188,8 @@ function updateKeysInBucket(bucketName?: string) {
 }
 
 onMounted(() => {
-  if (model.value) {
+  formState.stringVal = props.modelValue;
+  if (formState.stringVal) {
     formState.advancedInput = true;
   }
 });
@@ -248,7 +265,7 @@ onMounted(() => {
       class="form-control border border-secondary"
       :class="{ 'rounded-end': props.removeAdvanced && !helpTextPresent }"
       type="text"
-      v-model="model"
+      v-model="formState.stringVal"
       :required="props.required"
       :aria-describedby="props.helpId"
       :pattern="pattern"