diff options
Diffstat (limited to 'app/assets/javascripts/editor')
7 files changed, 196 insertions, 2 deletions
diff --git a/app/assets/javascripts/editor/components/source_editor_toolbar.vue b/app/assets/javascripts/editor/components/source_editor_toolbar.vue new file mode 100644 index 00000000000..1427f2df461 --- /dev/null +++ b/app/assets/javascripts/editor/components/source_editor_toolbar.vue @@ -0,0 +1,70 @@ +<script> +import { isEmpty } from 'lodash'; +import { GlButtonGroup } from '@gitlab/ui'; +import getToolbarItemsQuery from '~/editor/graphql/get_items.query.graphql'; +import { EDITOR_TOOLBAR_LEFT_GROUP, EDITOR_TOOLBAR_RIGHT_GROUP } from '~/editor/constants'; +import SourceEditorToolbarButton from './source_editor_toolbar_button.vue'; + +export default { + name: 'SourceEditorToolbar', + components: { + SourceEditorToolbarButton, + GlButtonGroup, + }, + data() { + return { + items: [], + }; + }, + apollo: { + items: { + query: getToolbarItemsQuery, + update(data) { + return this.setDefaultGroup(data?.items?.nodes); + }, + }, + }, + computed: { + isVisible() { + return this.items.length; + }, + }, + methods: { + setDefaultGroup(nodes = []) { + return nodes.map((item) => { + return { + ...item, + group: + (this.$options.groups.includes(item.group) && item.group) || EDITOR_TOOLBAR_RIGHT_GROUP, + }; + }); + }, + getGroupItems(group) { + return this.items.filter((item) => item.group === group); + }, + hasGroupItems(group) { + return !isEmpty(this.getGroupItems(group)); + }, + }, + groups: [EDITOR_TOOLBAR_LEFT_GROUP, EDITOR_TOOLBAR_RIGHT_GROUP], +}; +</script> +<template> + <section + v-if="isVisible" + id="se-toolbar" + class="gl-py-3 gl-px-5 gl-bg-white gl-border-t gl-border-b gl-display-flex gl-justify-content-space-between gl-align-items-center" + > + <template v-for="group in $options.groups"> + <gl-button-group v-if="hasGroupItems(group)" :key="group"> + <template v-for="item in getGroupItems(group)"> + <source-editor-toolbar-button + :key="item.id" + :button="item" + @click="$emit('click', item)" + /> + </template> + </gl-button-group> + </template> + </section> +</template> diff --git a/app/assets/javascripts/editor/components/source_editor_toolbar_button.vue b/app/assets/javascripts/editor/components/source_editor_toolbar_button.vue new file mode 100644 index 00000000000..2595d67af34 --- /dev/null +++ b/app/assets/javascripts/editor/components/source_editor_toolbar_button.vue @@ -0,0 +1,89 @@ +<script> +import { GlButton, GlTooltipDirective } from '@gitlab/ui'; +import updateToolbarItemMutation from '~/editor/graphql/update_item.mutation.graphql'; +import getToolbarItemQuery from '~/editor/graphql/get_item.query.graphql'; + +export default { + name: 'SourceEditorToolbarButton', + components: { + GlButton, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + props: { + button: { + type: Object, + required: false, + default() { + return {}; + }, + }, + }, + data() { + return { + buttonItem: this.button, + }; + }, + apollo: { + buttonItem: { + query: getToolbarItemQuery, + variables() { + return { + id: this.button.id, + }; + }, + update({ item }) { + return item; + }, + skip() { + return !this.button.id; + }, + }, + }, + computed: { + icon() { + return this.buttonItem.selected + ? this.buttonItem.selectedIcon || this.buttonItem.icon + : this.buttonItem.icon; + }, + label() { + return this.buttonItem.selected + ? this.buttonItem.selectedLabel || this.buttonItem.label + : this.buttonItem.label; + }, + }, + methods: { + clickHandler() { + if (this.buttonItem.onClick) { + this.buttonItem.onClick(); + } + this.$apollo.mutate({ + mutation: updateToolbarItemMutation, + variables: { + id: this.buttonItem.id, + propsToUpdate: { + selected: !this.buttonItem.selected, + }, + }, + }); + this.$emit('click'); + }, + }, +}; +</script> +<template> + <div> + <gl-button + v-gl-tooltip.hover + :category="buttonItem.category" + :variant="buttonItem.variant" + type="button" + :selected="buttonItem.selected" + :icon="icon" + :title="label" + :aria-label="label" + @click="clickHandler" + /> + </div> +</template> diff --git a/app/assets/javascripts/editor/constants.js b/app/assets/javascripts/editor/constants.js index 2ae9c377683..361122d8890 100644 --- a/app/assets/javascripts/editor/constants.js +++ b/app/assets/javascripts/editor/constants.js @@ -12,6 +12,9 @@ export const EDITOR_TYPE_DIFF = 'vs.editor.IDiffEditor'; export const EDITOR_CODE_INSTANCE_FN = 'createInstance'; export const EDITOR_DIFF_INSTANCE_FN = 'createDiffInstance'; +export const EDITOR_TOOLBAR_LEFT_GROUP = 'left'; +export const EDITOR_TOOLBAR_RIGHT_GROUP = 'right'; + export const SOURCE_EDITOR_INSTANCE_ERROR_NO_EL = s__( 'SourceEditor|"el" parameter is required for createInstance()', ); diff --git a/app/assets/javascripts/editor/graphql/get_item.query.graphql b/app/assets/javascripts/editor/graphql/get_item.query.graphql new file mode 100644 index 00000000000..7c8bc09f7b0 --- /dev/null +++ b/app/assets/javascripts/editor/graphql/get_item.query.graphql @@ -0,0 +1,9 @@ +query ToolbarItem($id: String!) { + item(id: $id) @client { + id + label + icon + selected + group + } +} diff --git a/app/assets/javascripts/editor/graphql/get_items.query.graphql b/app/assets/javascripts/editor/graphql/get_items.query.graphql new file mode 100644 index 00000000000..bfac816d276 --- /dev/null +++ b/app/assets/javascripts/editor/graphql/get_items.query.graphql @@ -0,0 +1,5 @@ +query ToolbarItems { + items @client { + nodes + } +} diff --git a/app/assets/javascripts/editor/graphql/update_item.mutation.graphql b/app/assets/javascripts/editor/graphql/update_item.mutation.graphql new file mode 100644 index 00000000000..f8424c65181 --- /dev/null +++ b/app/assets/javascripts/editor/graphql/update_item.mutation.graphql @@ -0,0 +1,3 @@ +mutation updateItem($id: String!, $propsToUpdate: Item!) { + updateToolbarItem(id: $id, propsToUpdate: $propsToUpdate) @client +} diff --git a/app/assets/javascripts/editor/schema/ci.json b/app/assets/javascripts/editor/schema/ci.json index 1c56327c03c..fe3229ac91b 100644 --- a/app/assets/javascripts/editor/schema/ci.json +++ b/app/assets/javascripts/editor/schema/ci.json @@ -187,6 +187,21 @@ } ] }, + "coverage_report": { + "type": "object", + "description": "Used to collect coverage reports from the job.", + "properties": { + "coverage_format": { + "description": "Code coverage format used by the test framework.", + "enum": ["cobertura"] + }, + "path": { + "description": "Path to the coverage report file that should be parsed.", + "type": "string", + "minLength": 1 + } + } + }, "codequality": { "$ref": "#/definitions/string_file_list", "description": "Path to file or list of files with code quality report(s) (such as Code Climate)." @@ -1276,7 +1291,7 @@ }, "pipeline_variables": { "type": "boolean", - "description": "Variables added for manual pipeline runs are passed to downstream pipelines.", + "description": "Variables added for manual pipeline runs and scheduled pipelines are passed to downstream pipelines.", "default": false } } @@ -1392,7 +1407,7 @@ }, "pipeline_variables": { "type": "boolean", - "description": "Variables added for manual pipeline runs are passed to downstream pipelines.", + "description": "Variables added for manual pipeline runs and scheduled pipelines are passed to downstream pipelines.", "default": false } } |