Frontend: For ci_job_assistant_drawer - support spaces in entrypoint input
The following discussion from !112581 (merged) should be addressed:
-
@pslaughter started a discussion: (+5 comments) issue: Sorry for not catching this earlier! Unfortunately, I don't think splitting the input by spaces is going to work out in all contexts
😬 What's the problem?
In the wild, it's possible for an item to actually contain spaces (example:
entrypoint: [ '/bin/bash', '-c', 'ln -snf /bin/bash /bin/sh && /bin/bash -c $0' ]
). Imagine needing to pass an argument to a command which actually contains a space. It would probably be problematic if this was split across multiple items.What's the solution?
I don't even know if we have a preexisting UX pattern for entering an arbitrary set of items
🤷 . I'm thinking we'd need something that supports dynamically adding / removing inputs (like an automatic "Add more"/"Remove")🤔 WDYT @qk44077907 @QiangGu0 && @gdoyle? Does the problem make sense? Is this something we should take care of here or in a follow-up?
I'm fine if we want to create a follow-up issue for this, but I think this is something we'll need to address before enabling the feature flag.
Brainstorm:
Here's a quick way we can do this in Vue:
Patch
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/accordion_items/image_item.vue b/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/accordion_items/image_item.vue index c2ae7d7be496..c65cfe0e4bff 100644 --- a/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/accordion_items/image_item.vue +++ b/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/accordion_items/image_item.vue @@ -15,6 +15,24 @@ export default { required: true, }, }, + methods: { + updateEntrypointItem(idx, value) { + this.$emit('update-job', 'image.entrypoint', [ + ...this.job.image.entrypoint.slice(0, idx), + value, + ...this.job.image.entrypoint.slice(idx + 1), + ]); + }, + blurEntrypointItem(idx) { + // If value is empty and we left the input. Let's remove it. + if (!this.job.image.entrypoint[idx]) { + this.$emit('update-job', 'image.entrypoint', [ + ...this.job.image.entrypoint.slice(0, idx), + ...this.job.image.entrypoint.slice(idx + 1), + ]); + } + }, + }, }; </script> <template> @@ -29,9 +47,13 @@ export default { </gl-form-group> <gl-form-group class="gl-flex-grow-1" :label="$options.i18n.IMAGE_ENTRYPOINT"> <gl-form-input - :value="job.image.entrypoint.join(' ')" + v-for="idx in job.image.entrypoint.length + 1" + :key="idx - 1" + class="gl-mb-3" data-testid="image-entrypoint-input" - @input="$emit('update-job', 'image.entrypoint', $event.split(' '))" + :value="job.image.entrypoint[idx - 1]" + @input="updateEntrypointItem(idx - 1, $event)" + @blur="blurEntrypointItem(idx - 1)" /> </gl-form-group> </div>
And here's what it looks like: