## Problem to solve A `.gitlab-ci.yml` file can be difficult to understand, and even for the author if it is a complex CI configuration. Without a visualization of the pipeline created by the yml file, it could be hard to imagine how the pipeline might behave. ## Intended users * [Sasha (Software Developer)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#sasha-software-developer) * [Devon (DevOps Engineer)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#devon-devops-engineer) ## User experience goal When a user views a CI yaml file they should have the options to see graphic representation of the file. ## Proposal Translate the .gitlab-ci.yml file into a graphic visualization when viewing the static, checked-in file from a page like https://gitlab.com/gitlab-com/www-gitlab-com/-/blob/master/.gitlab-ci.yml. The first iteration of this feature is a view only representation. Design proposal (see Design section for most current version):  ## Links * Wercker's plugin to Bitbucket: http://blog.wercker.com/2015/12/02/Pipeline-Viewer-For-Bitbucket.html * gitlab-ce#21485 ## UX Definition of done <details> <summary> Entry Criteria for `workflow:design` </summary> - [x] Problem has been validated going though the `workflow::problem validation` - [x] Issue has a clear problem background (why it is prioritised) description - [ ] User stories and acceptance criteria have been created - [ ] Edge cases were considered and described by PM and Product Designer - [x] ~UX label is added to the issue </details> --- <details> <summary> Criteria for UX DoD (exit criteria for `workflow:design`) </summary> - [ ] Cross-team dependencies have been identified and documented, if applicable - [ ] [Incremental design](https://uxdworld.com/2019/08/20/incremental-design/) approach was applied to split the design problem into small problems and deliverables (UX to work with Engineering) - [ ] Prototype or mock for each user story have been created - [ ] Empty states - [ ] Responsiveness - [ ] Edge cases - [ ] Design proposal was ran and is aligned with engineering team to avoid not feasible solutions and ensure the [iteration](https://about.gitlab.com/handbook/product/#iteration) in our development process - [ ] If changes involve copy, ~"UI text" label has been added - [ ] Pajamas: UI Component design have been identified - [ ] Pajamas issue is created (new workflow) - [ ] Marked as Ready for engineering evaluation per user story moved into ~"workflow::planning breakdown" & ~"needs weight" </details> --- <details> <summary> Entry Criteria for `workflow::ready for development` </summary> - [ ] Scope has been defined and reviewed with engineering - [ ] User stories have been weighed and are **less than 5**. See more information on [weighting issues](https://about.gitlab.com/handbook/engineering/development/ci-cd/verify/continuous-integration/index.html#weighting-issues) - [ ] Create new issues for follow up user stories </details> --- **NOTE: **The above criteria is subject to change with iteration on the process. ## Further details <!-- Include use cases, benefits, goals, or any other details that will help us understand the problem better. --> ## Permissions and Security <!-- What permissions are required to perform the described actions? Are they consistent with the existing permissions as documented for users, groups, and projects as appropriate? Is the proposed behavior consistent between the UI, API, and other access methods (e.g. email replies)? Consider adding checkboxes and expectations of users with certain levels of membership https://docs.gitlab.com/ee/user/permissions.html * [ ] Add expected impact to members with no access (0) * [ ] Add expected impact to Guest (10) members * [ ] Add expected impact to Reporter (20) members * [ ] Add expected impact to Developer (30) members * [ ] Add expected impact to Maintainer (40) members * [ ] Add expected impact to Owner (50) members --> ## Documentation <!-- See the Feature Change Documentation Workflow https://docs.gitlab.com/ee/development/documentation/workflow.html#for-a-product-change * Add all known Documentation Requirements in this section. See https://docs.gitlab.com/ee/development/documentation/feature-change-workflow.html#documentation-requirements * If this feature requires changing permissions, update the permissions document. See https://docs.gitlab.com/ee/user/permissions.html --> ## Availability & Testing <!-- This section needs to be retained and filled in during the workflow planning breakdown phase of this feature proposal, if not earlier. What risks does this change pose to our availability? How might it affect the quality of the product? What additional test coverage or changes to tests will be needed? Will it require cross-browser testing? Please list the test areas (unit, integration and end-to-end) that needs to be added or updated to ensure that this feature will work as intended. Please use the list below as guidance. * Unit test changes * Integration test changes * End-to-end test change See the test engineering planning process and reach out to your counterpart Software Engineer in Test for assistance: https://about.gitlab.com/handbook/engineering/quality/test-engineering/#test-planning --> ## What does success look like, and how can we measure that? <!-- Define both the success metrics and acceptance criteria. Note that success metrics indicate the desired business outcomes, while acceptance criteria indicate when the solution is working correctly. If there is no way to measure success, link to an issue that will implement a way to measure this. --> ## What is the type of buyer? <!-- What is the buyer persona for this feature? See https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/buyer-persona/ In which enterprise tier should this feature go? See https://about.gitlab.com/handbook/product/pricing/#four-tiers --> ## Is this a cross-stage feature? <!-- Communicate if this change will affect multiple Stage Groups or product areas. We recommend always start with the assumption that a feature request will have an impact into another Group. Loop in the most relevant PM and Product Designer from that Group to provide strategic support to help align the Group's broader plan and vision, as well as to avoid UX and technical debt. https://about.gitlab.com/handbook/product/#cross-stage-features --> ## Links / references <!-- triage-serverless v3 PLEASE DO NOT REMOVE THIS SECTION --> *This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.* <!-- triage-serverless v3 PLEASE DO NOT REMOVE THIS SECTION -->