Resolve "Add UI for parameter translation layer"

Closes #105 (closed)

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

@@ -5,7 +5,7 @@ import { useBucketStore } from "@/stores/buckets";
 import type { SizeModifierType } from "@/types/PropTypes";
 
 const model = defineModel<string | undefined>({ required: true });
-const s3Regex = /s3:\/\/(\S*)\/(\S*)/g;
+const s3Regex = /s3:\/\/([^\s/]*)(\/\S*)?/g;
 
 const props = defineProps({
   parameter: {
@@ -23,8 +23,13 @@ const props = defineProps({
     type: String as PropType<SizeModifierType>,
   },
   border: Boolean,
+  allowRaw: Boolean,
 });
 
+const emit = defineEmits<{
+  (e: "switch-to-raw"): void;
+}>();
+
 const s3ObjectRepository = useS3ObjectStore();
 const bucketRepository = useBucketStore();
 const randomIDSuffix = Math.random().toString(16).substring(2, 8);
@@ -45,7 +50,7 @@ const inputDynamicClass = computed<string[]>(() => {
   if (props.sizeModifier) {
     cssClasses.push(`form-control-${props.sizeModifier}`);
   }
-  if (!helpTextPresent.value) {
+  if (!helpTextPresent.value && !props.allowRaw) {
     cssClasses.push("rounded-end");
   }
   return cssClasses;
@@ -61,7 +66,7 @@ watch(model, (newVal, oldVal) => {
 });
 
 function parseModel(val?: string) {
-  if (val == undefined) {
+  if (val == undefined || val.length === 0) {
     s3Path.bucket = "";
     s3Path.key = undefined;
     return;
@@ -69,12 +74,14 @@ function parseModel(val?: string) {
   const match = s3Regex.exec(val ?? "");
   if (match) {
     s3Path.bucket = match[1];
-    s3Path.key = match[2];
+    s3Path.key = match[2]?.slice(1);
     if (bucketRepository.bucketMapping[s3Path.bucket] == undefined) {
-      console.log("Missing bucket");
+      // Missing bucket
+      emit("switch-to-raw");
     }
   } else {
-    console.log("Not S3 Path");
+    // Not S3 Path
+    emit("switch-to-raw");
   }
 }
 
@@ -186,6 +193,14 @@ onMounted(() => {
   <datalist :id="'keys-options-' + randomIDSuffix">
     <option v-for="obj in keyDataList" :value="obj" :key="obj" />
   </datalist>
+  <button
+    v-if="allowRaw"
+    type="button"
+    class="btn btn-outline-secondary"
+    @click="emit('switch-to-raw')"
+  >
+    Advanced
+  </button>
 </template>
 
 <style scoped></style>