feat: Pipeline Tags

[camielvs]

Description

Adds UX for creating, editing and removing tags on Pipelines. This is done via a new PipelineTagEditor in the context panel below the pipeline notes.

Tags can be added using the "Add Tag" button. The tag input is a free input field - users can enter any string they like in there. To encourage our users to make wise and concise choices about tag names a length limit of 20 characters has been enforced.

Once created tags will be rendered below the input section and from there can be edited by clicking on them, or removed by clicking the "x".

The list of Pipeline Tags is saved as a csv string on the component spec annotations. This is used on the pipeline list to display the first three tags within the pipeline row. More tags can be view by clicking "+n" if there are more tags to see.

Related Issue and Pull requests

Progresses https://github.com/Shopify/oasis-frontend/issues/472

Type of Change

• New feature

Checklist

• I have tested this does not break current pipelines / runs functionality
• I have tested the changes on staging

Screenshots (if applicable)

Test Instructions

• Edit a pipeline
• In context panel you should see a section below "Notes" for "Tags"

Confirm you are able to:

• Add a tag
• Edit a tag
• Remove a tag

Once you have added some tags go to the homepage and open the pipeline list. Confirm that:

• The tags on your pipeline are shown
• Maximum three tags are shown
• A button is available to show more, if applicable
• If more tags are shown they wrap onto new lines and you are able to collapse them again

Additional Comments

I am not attached to the specific UX of adding & editing tags in-place, or the chosen render location of tags in the pipeline row (in the centre - between Time & Run details).

[camielvs]

• chore: Add onEnter and onEscape to Input Component #1850
• feat: Submit Pipeline Tags on Runs #1849
• feat: Pipeline Tags #1848 👈 (View in Graphite)
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

[maxy-shpfy]

For future: Pipeline Details grew significantly in recent months - we should consider UX review and re-think the panel, so it stays usable.

[camielvs]

I was also starting to think this

[maxy-shpfy]

I see mixed concerns here. This component must be split into multiple components, where one is responsible for managing collection (add / remove), another is responsible for one tag (edit). Likely some simple "Tag" component will arise.

[maxy-shpfy]

This markup is hard to read due to ternaries. I would consider splitting into components

[maxy-shpfy]

Using split as TagsEditor, Tag, and TagInput it could be simplified to:

return (
    <BlockStack gap="2">
      {isAdding ? (
        <TagInput
          value={newTagValue}
          onChange={setNewTagValue}
          onSubmit={handleAddTag}
          onCancel={handleCancelAdd}
        />
      ) : (
        <Button
          variant="outline"
          size="xs"
          onClick={() => setIsAdding(true)}
          className="my-0.5"
        >
          <Icon name="Plus" size="sm" />
          Add Tag
        </Button>
      )}

      {tags.length > 0 && (
        <InlineStack gap="2" wrap="wrap">
          {tags.map((tag, index) => (
            <Tag
              key={`${tag}-${index}`}
              value={tag}
              onSave={(newValue) => handleUpdateTag(index, newValue)}
              onRemove={() => handleRemoveTag(index)}
            />
          ))}
        </InlineStack>
      )}
    </BlockStack>
);