diff options
Diffstat (limited to 'app/assets/javascripts/admin')
6 files changed, 485 insertions, 1 deletions
diff --git a/app/assets/javascripts/admin/application_settings/runner_token_expiration/components/expiration_interval_description.vue b/app/assets/javascripts/admin/application_settings/runner_token_expiration/components/expiration_interval_description.vue new file mode 100644 index 00000000000..2f74b44625f --- /dev/null +++ b/app/assets/javascripts/admin/application_settings/runner_token_expiration/components/expiration_interval_description.vue @@ -0,0 +1,52 @@ +<script> +import { GlLink, GlSprintf } from '@gitlab/ui'; +import { helpPagePath } from '~/helpers/help_page_helper'; +import { s__ } from '~/locale'; + +export default { + components: { + GlLink, + GlSprintf, + }, + props: { + message: { + type: String, + required: true, + }, + }, + i18n: { + fieldHelpText: s__( + 'AdminSettings|If no unit is written, it defaults to seconds. For example, these are all equivalent: %{oneDayInSeconds}, %{oneDayInHoursHumanReadable}, or %{oneDayHumanReadable}. Minimum value is two hours. %{linkStart}Learn more.%{linkEnd}', + ), + }, + computed: { + helpUrl() { + return helpPagePath('ci/runners/configure_runners', { + anchor: 'authentication-token-security', + }); + }, + }, +}; +</script> +<template> + <p> + {{ message }} + <gl-sprintf :message="$options.i18n.fieldHelpText"> + <template #oneDayInSeconds> + <!-- eslint-disable-next-line @gitlab/vue-require-i18n-strings --> + <code>86400</code> + </template> + <template #oneDayInHoursHumanReadable> + <!-- eslint-disable-next-line @gitlab/vue-require-i18n-strings --> + <code>24 hours</code> + </template> + <template #oneDayHumanReadable> + <!-- eslint-disable-next-line @gitlab/vue-require-i18n-strings --> + <code>1 day</code> + </template> + <template #link> + <gl-link :href="helpUrl" target="_blank">{{ __('Learn more.') }}</gl-link> + </template> + </gl-sprintf> + </p> +</template> diff --git a/app/assets/javascripts/admin/application_settings/runner_token_expiration/components/expiration_intervals.vue b/app/assets/javascripts/admin/application_settings/runner_token_expiration/components/expiration_intervals.vue new file mode 100644 index 00000000000..371a26d2664 --- /dev/null +++ b/app/assets/javascripts/admin/application_settings/runner_token_expiration/components/expiration_intervals.vue @@ -0,0 +1,123 @@ +<script> +import { GlFormGroup } from '@gitlab/ui'; +import { s__ } from '~/locale'; +import ChronicDurationInput from '~/vue_shared/components/chronic_duration_input.vue'; +import ExpirationIntervalDescription from './expiration_interval_description.vue'; + +export default { + components: { + ChronicDurationInput, + ExpirationIntervalDescription, + GlFormGroup, + }, + props: { + instanceRunnerExpirationInterval: { + type: Number, + required: false, + default: null, + }, + groupRunnerExpirationInterval: { + type: Number, + required: false, + default: null, + }, + projectRunnerExpirationInterval: { + type: Number, + required: false, + default: null, + }, + }, + data() { + return { + perInput: { + instance: { + value: this.instanceRunnerExpirationInterval, + valid: null, + feedback: '', + }, + group: { + value: this.groupRunnerExpirationInterval, + valid: null, + feedback: '', + }, + project: { + value: this.projectRunnerExpirationInterval, + valid: null, + feedback: '', + }, + }, + }; + }, + methods: { + updateValidity(obj, event) { + /* eslint-disable no-param-reassign */ + obj.valid = event.valid; + obj.feedback = event.feedback; + /* eslint-enable no-param-reassign */ + }, + }, + i18n: { + instanceRunnerTitle: s__('AdminSettings|Instance runners expiration'), + instanceRunnerDescription: s__( + 'AdminSettings|Set the expiration time of authentication tokens of newly registered instance runners. Authentication tokens are automatically reset at these intervals.', + ), + groupRunnerTitle: s__('AdminSettings|Group runners expiration'), + groupRunnerDescription: s__( + 'AdminSettings|Set the expiration time of authentication tokens of newly registered group runners.', + ), + projectRunnerTitle: s__('AdminSettings|Project runners expiration'), + projectRunnerDescription: s__( + 'AdminSettings|Set the expiration time of authentication tokens of newly registered project runners.', + ), + }, +}; +</script> +<template> + <div> + <gl-form-group + :label="$options.i18n.instanceRunnerTitle" + :invalid-feedback="perInput.instance.feedback" + :state="perInput.instance.valid" + > + <template #description> + <expiration-interval-description :message="$options.i18n.instanceRunnerDescription" /> + </template> + <chronic-duration-input + v-model="perInput.instance.value" + name="application_setting[runner_token_expiration_interval]" + :state="perInput.instance.valid" + @valid="updateValidity(perInput.instance, $event)" + /> + </gl-form-group> + <gl-form-group + :label="$options.i18n.groupRunnerTitle" + :invalid-feedback="perInput.group.feedback" + :state="perInput.group.valid" + > + <template #description> + <expiration-interval-description :message="$options.i18n.groupRunnerDescription" /> + </template> + <chronic-duration-input + v-model="perInput.group.value" + name="application_setting[group_runner_token_expiration_interval]" + :state="perInput.group.valid" + @valid="updateValidity(perInput.group, $event)" + /> + </gl-form-group> + <gl-form-group + :label="$options.i18n.projectRunnerTitle" + :invalid-feedback="perInput.project.feedback" + :state="perInput.project.valid" + > + <template #description> + <expiration-interval-description :message="$options.i18n.projectRunnerDescription" /> + </template> + <chronic-duration-input + v-model="perInput.project.value" + name="application_setting[project_runner_token_expiration_interval]" + :state="perInput.project.valid" + @valid="updateValidity(perInput.project, $event)" + /> + </gl-form-group> + </div> +</template> diff --git a/app/assets/javascripts/admin/application_settings/runner_token_expiration/index.js b/app/assets/javascripts/admin/application_settings/runner_token_expiration/index.js new file mode 100644 index 00000000000..79d7ff0451a --- /dev/null +++ b/app/assets/javascripts/admin/application_settings/runner_token_expiration/index.js @@ -0,0 +1,32 @@ +import Vue from 'vue'; +import { parseInterval } from '~/runner/utils'; +import ExpirationIntervals from './components/expiration_intervals.vue'; + +const initRunnerTokenExpirationIntervals = (selector = '#js-runner-token-expiration-intervals') => { + const el = document.querySelector(selector); + + if (!el) { + return null; + } + + const { + instanceRunnerTokenExpirationInterval, + groupRunnerTokenExpirationInterval, + projectRunnerTokenExpirationInterval, + } = el.dataset; + + return new Vue({ + el, + render(h) { + return h(ExpirationIntervals, { + props: { + instanceRunnerExpirationInterval: parseInterval(instanceRunnerTokenExpirationInterval), + groupRunnerExpirationInterval: parseInterval(groupRunnerTokenExpirationInterval), + projectRunnerExpirationInterval: parseInterval(projectRunnerTokenExpirationInterval), + }, + }); + }, + }); +}; + +export default initRunnerTokenExpirationIntervals; diff --git a/app/assets/javascripts/admin/topics/components/merge_topics.vue b/app/assets/javascripts/admin/topics/components/merge_topics.vue new file mode 100644 index 00000000000..921b762bbef --- /dev/null +++ b/app/assets/javascripts/admin/topics/components/merge_topics.vue @@ -0,0 +1,141 @@ +<script> +import { GlAlert, GlButton, GlModal, GlModalDirective, GlSprintf } from '@gitlab/ui'; +import { __, s__ } from '~/locale'; +import { getIdFromGraphQLId } from '~/graphql_shared/utils'; +import csrf from '~/lib/utils/csrf'; +import TopicSelect from './topic_select.vue'; + +export default { + components: { + GlAlert, + GlButton, + GlModal, + GlSprintf, + TopicSelect, + }, + directives: { + GlModal: GlModalDirective, + }, + inject: ['path'], + data() { + return { + sourceTopic: {}, + targetTopic: {}, + }; + }, + computed: { + sourceTopicId() { + return getIdFromGraphQLId(this.sourceTopic?.id); + }, + targetTopicId() { + return getIdFromGraphQLId(this.targetTopic?.id); + }, + validSelectedTopics() { + return ( + Object.keys(this.sourceTopic).length && + Object.keys(this.targetTopic).length && + this.sourceTopic !== this.targetTopic + ); + }, + actionPrimary() { + return { + text: __('Merge'), + attributes: { + variant: 'danger', + disabled: !this.validSelectedTopics, + }, + }; + }, + }, + methods: { + selectSourceTopic(topic) { + this.sourceTopic = topic; + }, + selectTargetTopic(topic) { + this.targetTopic = topic; + }, + mergeTopics() { + this.$refs.mergeForm.submit(); + }, + }, + i18n: { + title: s__('MergeTopics|Merge topics'), + body: s__( + 'MergeTopics|Move all assigned projects from the source topic to the target topic and remove the source topic.', + ), + sourceTopic: s__('MergeTopics|Source topic'), + targetTopic: s__('MergeTopics|Target topic'), + warningTitle: s__('MergeTopics|Merging topics will cause the following:'), + warningBody: s__('MergeTopics|This action cannot be undone.'), + warningRemoveTopic: s__('MergeTopics|%{sourceTopic} will be removed'), + warningMoveProjects: s__('MergeTopics|All assigned projects will be moved to %{targetTopic}'), + }, + modal: { + id: 'merge-topics', + actionSecondary: { + text: __('Cancel'), + attributes: { + variant: 'default', + }, + }, + }, + csrf, +}; +</script> +<template> + <div class="gl-mr-3"> + <gl-button v-gl-modal="$options.modal.id" category="secondary">{{ + $options.i18n.title + }}</gl-button> + <gl-modal + :title="$options.i18n.title" + :action-primary="actionPrimary" + :action-secondary="$options.modal.actionSecondary" + :modal-id="$options.modal.id" + size="sm" + @primary="mergeTopics" + > + <p>{{ $options.i18n.body }}</p> + <topic-select + :selected-topic="sourceTopic" + :label-text="$options.i18n.sourceTopic" + @click="selectSourceTopic" + /> + <topic-select + :selected-topic="targetTopic" + :label-text="$options.i18n.targetTopic" + @click="selectTargetTopic" + /> + <gl-alert + v-if="validSelectedTopics" + :title="$options.i18n.warningTitle" + :dismissible="false" + variant="danger" + > + <ul> + <li> + <gl-sprintf :message="$options.i18n.warningRemoveTopic"> + <template #sourceTopic> + <strong>{{ sourceTopic.name }}</strong> + </template> + </gl-sprintf> + </li> + <li> + <gl-sprintf :message="$options.i18n.warningMoveProjects"> + <template #targetTopic> + <strong>{{ targetTopic.name }}</strong> + </template> + </gl-sprintf> + </li> + </ul> + {{ $options.i18n.warningBody }} + </gl-alert> + <form ref="mergeForm" method="post" :action="path"> + <input type="hidden" name="_method" value="post" /> + <input type="hidden" name="authenticity_token" :value="$options.csrf.token" /> + <input type="hidden" name="source_topic_id" :value="sourceTopicId" /> + <input type="hidden" name="target_topic_id" :value="targetTopicId" /> + </form> + </gl-modal> + </div> +</template> diff --git a/app/assets/javascripts/admin/topics/components/topic_select.vue b/app/assets/javascripts/admin/topics/components/topic_select.vue new file mode 100644 index 00000000000..8bf5be1afd1 --- /dev/null +++ b/app/assets/javascripts/admin/topics/components/topic_select.vue @@ -0,0 +1,106 @@ +<script> +import { + GlAvatarLabeled, + GlDropdown, + GlDropdownItem, + GlDropdownText, + GlSearchBoxByType, +} from '@gitlab/ui'; +import { s__ } from '~/locale'; +import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants'; +import searchProjectTopics from '~/graphql_shared/queries/project_topics_search.query.graphql'; + +export default { + components: { + GlAvatarLabeled, + GlDropdown, + GlDropdownItem, + GlDropdownText, + GlSearchBoxByType, + }, + props: { + selectedTopic: { + type: Object, + required: false, + default: () => ({}), + }, + labelText: { + type: String, + required: false, + default: null, + }, + }, + apollo: { + topics: { + query: searchProjectTopics, + variables() { + return { + search: this.search, + }; + }, + update(data) { + return data.topics?.nodes || []; + }, + debounce: 250, + }, + }, + data() { + return { + topics: [], + search: '', + }; + }, + computed: { + loading() { + return this.$apollo.queries.topics.loading; + }, + isResultEmpty() { + return this.topics.length === 0; + }, + dropdownText() { + if (Object.keys(this.selectedTopic).length) { + return this.selectedTopic.name; + } + + return this.$options.i18n.dropdownText; + }, + }, + methods: { + selectTopic(topic) { + this.$emit('click', topic); + }, + }, + i18n: { + dropdownText: s__('TopicSelect|Select a topic'), + searchPlaceholder: s__('TopicSelect|Search topics'), + emptySearchResult: s__('TopicSelect|No matching results'), + }, + AVATAR_SHAPE_OPTION_RECT, +}; +</script> + +<template> + <div> + <label v-if="labelText">{{ labelText }}</label> + <gl-dropdown block :text="dropdownText"> + <gl-search-box-by-type + v-model="search" + :is-loading="loading" + :placeholder="$options.i18n.searchPlaceholder" + /> + <gl-dropdown-item v-for="topic in topics" :key="topic.id" @click="selectTopic(topic)"> + <gl-avatar-labeled + :label="topic.title" + :sub-label="topic.name" + :src="topic.avatarUrl" + :entity-name="topic.name" + :size="32" + :shape="$options.AVATAR_SHAPE_OPTION_RECT" + /> + </gl-dropdown-item> + <gl-dropdown-text v-if="isResultEmpty && !loading"> + <span class="gl-text-gray-500">{{ $options.i18n.emptySearchResult }}</span> + </gl-dropdown-text> + </gl-dropdown> + </div> +</template> diff --git a/app/assets/javascripts/admin/topics/index.js b/app/assets/javascripts/admin/topics/index.js index 09e9b20f220..d81690e8f4c 100644 --- a/app/assets/javascripts/admin/topics/index.js +++ b/app/assets/javascripts/admin/topics/index.js @@ -1,7 +1,20 @@ import Vue from 'vue'; +import VueApollo from 'vue-apollo'; +import createDefaultClient from '~/lib/graphql'; +import showToast from '~/vue_shared/plugins/global_toast'; import RemoveAvatar from './components/remove_avatar.vue'; +import MergeTopics from './components/merge_topics.vue'; -export default () => { +const toasts = document.querySelectorAll('.js-toast-message'); +toasts.forEach((toast) => showToast(toast.dataset.message)); + +Vue.use(VueApollo); + +const apolloProvider = new VueApollo({ + defaultClient: createDefaultClient(), +}); + +export const initRemoveAvatar = () => { const el = document.querySelector('.js-remove-topic-avatar'); if (!el) { @@ -21,3 +34,20 @@ export default () => { }, }); }; + +export const initMergeTopics = () => { + const el = document.querySelector('.js-merge-topics'); + + if (!el) return false; + + const { path } = el.dataset; + + return new Vue({ + el, + apolloProvider, + provide: { path }, + render(createElement) { + return createElement(MergeTopics); + }, + }); +}; |