ci

package
v1.3.2 Latest Latest
Warning

This package is not in the latest version of its module.

Go to latest
Published: Jan 14, 2026 License: MIT Imports: 2 Imported by: 0

README

GitLab UI CI/CD Pipeline

This is the GitLab UI component library's CI/CD pipeline, imported from gitlab-org/gitlab-ui.

Overview

GitLab UI is a Vue.js component library that provides the design system for GitLab. Its pipeline demonstrates modern frontend development workflows.

Pipeline Characteristics

  • Project ID: 7071551
  • Lines of Code: ~287 lines
  • Language: JavaScript/TypeScript (Vue.js)
  • Features Demonstrated:
    • Frontend testing and linting
    • Storybook deployment
    • Visual regression testing
    • NPM package publishing
    • Component documentation
    • Accessibility testing

Key Features

Component Library Testing

Comprehensive testing of Vue.js components including:

  • Unit tests
  • Visual regression tests
  • Accessibility tests
Storybook Integration

Automated Storybook builds and deployments for component documentation.

NPM Publishing

Automated publishing to npm registry on releases.

Code Quality
  • ESLint for code quality
  • Prettier for code formatting
  • Jest for unit testing
  • Percy for visual regression

What You Can Learn

  1. Frontend CI/CD - Modern JavaScript/TypeScript workflows
  2. Component library testing - Testing UI components
  3. Visual regression - Automated visual testing
  4. Documentation automation - Storybook deployment
  5. Package publishing - Automated npm releases

Source

Building This Example

This example is imported as a single file:

# View the pipeline code
cat pipeline.go

# To create a buildable version:
mkdir my-ui-pipeline
cp pipeline.go my-ui-pipeline/
cd my-ui-pipeline
go mod init example/my-ui-pipeline
go mod tidy
  • gitlab - Main GitLab project with frontend testing

Documentation

Index

Constants

This section is empty.

Variables

View Source
var BootstrapVue = pipeline.Job{
	Name:   "bootstrap-vue",
	Stage:  "test",
	Script: List("cd src/vendor/bootstrap-vue", "yarn install --check-files --frozen-lockfile --non-interactive", "yarn run test"),
}
View Source
var BootstrapVueVue3 = pipeline.Job{
	Name: "bootstrap-vue_vue3",
}
View Source
var BuildPackage = pipeline.Job{
	Name:   "build_package",
	Stage:  "build",
	Script: List("yarn build", "npm pack", "mv *.tgz $TAR_ARCHIVE_NAME", "DEPENDENCY_URL=\"$CI_PROJECT_URL/-/jobs/$CI_JOB_ID/artifacts/raw/$TAR_ARCHIVE_NAME\"", "echo \"The package.json dependency URL is $DEPENDENCY_URL\"", "echo \"DEPENDENCY_URL=$DEPENDENCY_URL\" > build_package.env"),
	Variables: Json{
		"TAR_ARCHIVE_NAME": "gitlab-ui.$CI_COMMIT_REF_SLUG.tgz",
	},
	Artifacts: pipeline.Artifacts{
		Paths: List("bin/migrate_custom_utils_to_tw.bundled.mjs", "dist", "$TAR_ARCHIVE_NAME"),
		When:  "always",
	},
}
View Source
var BuildStorybook = pipeline.Job{
	Name: "build_storybook",
}
View Source
var BuildStorybookVue3 = pipeline.Job{
	Name: "build_storybook_vue3",
}
View Source
var BuildTailwindConfigViewer = pipeline.Job{
	Name:   "build_tailwind_config_viewer",
	Stage:  "build",
	Script: List("yarn tailwind-config-viewer:export"),
	Artifacts: pipeline.Artifacts{
		Paths: List("tailwind-config-viewer-static/"),
	},
}
View Source
var BuildTestStorybook = pipeline.Job{
	Name: "build_test_storybook",
}
View Source
var BuildTestStorybookVue3 = pipeline.Job{
	Name: "build_test_storybook_vue3",
}
View Source
var CheckTokensBuild = pipeline.Job{
	Name:   "check_tokens_build",
	Script: List("./bin/check_tokens_build.sh"),
}
View Source
var CheckTranslationsDictionary = pipeline.Job{
	Name:   "check_translations_dictionary",
	Script: List("./bin/check_translations_dict.sh"),
}
View Source
var CreateIntegrationBranch = pipeline.Job{
	Name:   "create_integration_branch",
	Stage:  "manual",
	Script: List("bin/create_integration_branch.mjs"),
	Needs:  []any{BuildPackage},
}
View Source
var DangerReview = pipeline.Job{
	Name:         "danger-review",
	BeforeScript: List("[[ ! -f \"Gemfile\" ]] && bundle init && bundle add gitlab-dangerfiles", "bundle install"),
}
View Source
var DuoJob = pipeline.Job{
	Name:  "duo_job",
	Stage: "deploy",
	Variables: Json{
		"UPSTREAM_GITLAB_UI_VERSION": "$DEPENDENCY_URL",
		"UPSTREAM_BRANCH_NAME":       "$CI_MERGE_REQUEST_SOURCE_BRANCH_NAME",
	},
	Rules: List(
		pipeline.Rule{
			If:           "$CI_MERGE_REQUEST_LABELS =~ /duo-ui-allowed-to-fail/",
			When:         "always",
			AllowFailure: true,
		},
		pipeline.Rule{
			If:   "$CI_MERGE_REQUEST_IID",
			When: "always",
		},
	),
	Needs: []any{BuildPackage},
}
View Source
var GemnasiumDependencyScanning = pipeline.Job{
	Name: "gemnasium-dependency_scanning",
}
View Source
var GitlabAdvancedSast = pipeline.Job{
	Name: "gitlab-advanced-sast",
}
View Source
var IntegrationTests = pipeline.Job{
	Name: "integration_tests",
}
View Source
var IntegrationTestsVue3 = pipeline.Job{
	Name:  "integration_tests_vue3",
	Needs: []any{BuildTestStorybookVue3},
}
View Source
var Lint = pipeline.Job{
	Name:   "lint",
	Stage:  "test",
	Script: List("yarn eslint --format gitlab", "yarn prettier", "yarn markdownlint", "grep -r -i '<style' --include \\*.vue src/components && echo \"Vue components should not contain <style tags\" && exit 1 || echo \"No Vue component contains <style tags\"\n"),
	Variables: Json{
		"ESLINT_CODE_QUALITY_REPORT": "gl-code-quality-report-eslint.json",
	},
}
View Source
var MainPipeline = pipeline.Pipeline{
	Stages: List("pre-build", "test", "build", "deploy", "publish", "manual"),
	Variables: Json{
		"GITLAB_ADVANCED_SAST_ENABLED": "true",
	},
}
View Source
var MergeCoverageReports = pipeline.Job{
	Name:   "merge_coverage_reports",
	Script: List("yarn run merge-cobertura -o coverage/cobertura-coverage.xml package1=coverage/vue2/cobertura-coverage.xml package2=coverage/vue3/cobertura-coverage.xml"),
	Needs:  []any{UnitTestsVue2, UnitTestsVue3},
	Artifacts: pipeline.Artifacts{
		Paths: List("coverage/"),
		When:  "always",
		Name:  "coverage",
	},
}
View Source
var Pages = pipeline.Job{
	Name: "pages",
}
View Source
var PopulateNpmCache = pipeline.Job{
	Name:   "populate_npm_cache",
	Stage:  "pre-build",
	Script: List("echo \"successfully installed dependencies\""),
	Rules: List(
		pipeline.Rule{
			When:    "always",
			Changes: List(".gitlab-ci.yml", "yarn.lock"),
		},
		pipeline.Rule{
			When: "never",
		},
	),
	Cache: pipeline.Cache{
		Key: pipeline.CacheKey{
			Files:  List(".gitlab-ci.yml", "yarn.lock"),
			Prefix: "node_modules",
		},
		Paths:  List("node_modules/"),
		Policy: "push",
	},
}
View Source
var PublishToNpm = pipeline.Job{
	Name:  "publish_to_npm",
	Stage: "publish",
}
View Source
var PublishToNpmDryRun = pipeline.Job{
	Name:   "publish-to-npm-dry-run",
	Stage:  "deploy",
	Script: List("semantic-release --branches \"$CI_MERGE_REQUEST_SOURCE_BRANCH_NAME\" --dry-run --no-ci"),
	Rules: List(
		pipeline.Rule{
			If:   "$CI_MERGE_REQUEST_SOURCE_PROJECT_ID != $CI_MERGE_REQUEST_ID",
			When: "never",
		},
	),
	Needs: []any{BuildPackage},
}
View Source
var ReviewApp = pipeline.Job{
	Name: "review-app",
}
View Source
var ScreenshotCollector = pipeline.Job{
	Name:   "screenshot_collector",
	Stage:  "manual",
	Script: List("find tests"),
	Variables: Json{
		"GIT_STRATEGY": "none",
	},
	Needs: []any{Visual},
	Artifacts: pipeline.Artifacts{
		Paths: List("tests/"),
		When:  "always",
	},
	When: "always",
}
View Source
var SecretDetection = pipeline.Job{
	Name: "secret_detection",
}
View Source
var SemgrepSast = pipeline.Job{
	Name: "semgrep-sast",
}
View Source
var Stylelint = pipeline.Job{
	Name:   "stylelint",
	Stage:  "test",
	Script: List("yarn stylelint --custom-formatter=@studiometa/stylelint-formatter-gitlab"),
	Variables: Json{
		"STYLELINT_CODE_QUALITY_REPORT": "gl-code-quality-report-stylelint.json",
	},
}
View Source
var UnitTestsVue2 = pipeline.Job{
	Name: "unit_tests_vue2",
	Variables: Json{
		"COVERAGE_DIR":  "coverage/vue2",
		"ARTIFACT_NAME": "coverage-vue2",
	},
}
View Source
var UnitTestsVue3 = pipeline.Job{
	Name: "unit_tests_vue3",
	Variables: Json{
		"COVERAGE_DIR":  "coverage/vue3",
		"ARTIFACT_NAME": "coverage-vue3",
	},
}
View Source
var UpdateDeployments = pipeline.Job{
	Name:   "update_deployments",
	Stage:  "manual",
	Script: List("bin/update_deployments.mjs"),
	Rules: List(
		pipeline.Rule{
			If: "$CI_PIPELINE_SOURCE == \"schedule\"",
		},
		pipeline.Rule{
			If: "$CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH",
		},
		pipeline.Rule{
			If:   "$CI_PIPELINE_SOURCE == \"merge_request_event\"",
			When: "manual",
		},
	),
	Needs:        []any{PublishToNpm},
	AllowFailure: true,
}
View Source
var UpdateScreenshots = pipeline.Job{
	Name:   "update_screenshots",
	Stage:  "manual",
	Script: List("./bin/update-screenshots.sh"),
	Needs:  []any{ScreenshotCollector},
	When:   "manual",
}
View Source
var Visual = pipeline.Job{
	Name: "visual",
}
View Source
var VisualVue3 = pipeline.Job{
	Name:  "visual_vue3",
	Needs: []any{BuildTestStorybookVue3},
}
View Source
var YarnDeduplicate = pipeline.Job{
	Name:   "yarn_deduplicate",
	Stage:  "test",
	Script: List("yarn yarn-deduplicate --strategy fewer --list --fail"),
	Rules: List(
		pipeline.Rule{
			When:    "always",
			Changes: List(".gitlab-ci.yml", "package.json", "yarn.lock"),
		},
	),
}

Functions

This section is empty.

Types

This section is empty.

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL