diff options
Diffstat (limited to 'app/assets/javascripts/ci_variable_list')
12 files changed, 4 insertions, 1274 deletions
diff --git a/app/assets/javascripts/ci_variable_list/components/legacy_ci_environments_dropdown.vue b/app/assets/javascripts/ci_variable_list/components/legacy_ci_environments_dropdown.vue deleted file mode 100644 index ecb39f214ec..00000000000 --- a/app/assets/javascripts/ci_variable_list/components/legacy_ci_environments_dropdown.vue +++ /dev/null @@ -1,81 +0,0 @@ -<script> -import { GlDropdown, GlDropdownItem, GlDropdownDivider, GlSearchBoxByType } from '@gitlab/ui'; -import { mapGetters } from 'vuex'; -import { __, sprintf } from '~/locale'; - -export default { - name: 'CiEnvironmentsDropdown', - components: { - GlDropdown, - GlDropdownItem, - GlDropdownDivider, - GlSearchBoxByType, - }, - props: { - value: { - type: String, - required: false, - default: '', - }, - }, - data() { - return { - searchTerm: '', - }; - }, - computed: { - ...mapGetters(['joinedEnvironments']), - composedCreateButtonLabel() { - return sprintf(__('Create wildcard: %{searchTerm}'), { searchTerm: this.searchTerm }); - }, - shouldRenderCreateButton() { - return this.searchTerm && !this.joinedEnvironments.includes(this.searchTerm); - }, - filteredResults() { - const lowerCasedSearchTerm = this.searchTerm.toLowerCase(); - return this.joinedEnvironments.filter((resultString) => - resultString.toLowerCase().includes(lowerCasedSearchTerm), - ); - }, - }, - methods: { - selectEnvironment(selected) { - this.$emit('selectEnvironment', selected); - this.searchTerm = ''; - }, - createClicked() { - this.$emit('createClicked', this.searchTerm); - this.searchTerm = ''; - }, - isSelected(env) { - return this.value === env; - }, - clearSearch() { - this.searchTerm = ''; - }, - }, -}; -</script> -<template> - <gl-dropdown :text="value" @show="clearSearch"> - <gl-search-box-by-type v-model.trim="searchTerm" data-testid="ci-environment-search" /> - <gl-dropdown-item - v-for="environment in filteredResults" - :key="environment" - :is-checked="isSelected(environment)" - is-check-item - @click="selectEnvironment(environment)" - > - {{ environment }} - </gl-dropdown-item> - <gl-dropdown-item v-if="!filteredResults.length" ref="noMatchingResults">{{ - __('No matching results') - }}</gl-dropdown-item> - <template v-if="shouldRenderCreateButton"> - <gl-dropdown-divider /> - <gl-dropdown-item data-testid="create-wildcard-button" @click="createClicked"> - {{ composedCreateButtonLabel }} - </gl-dropdown-item> - </template> - </gl-dropdown> -</template> diff --git a/app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_modal.vue b/app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_modal.vue deleted file mode 100644 index fa90e0e3e6c..00000000000 --- a/app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_modal.vue +++ /dev/null @@ -1,429 +0,0 @@ -<script> -import { - GlAlert, - GlButton, - GlCollapse, - GlFormCheckbox, - GlFormCombobox, - GlFormGroup, - GlFormSelect, - GlFormInput, - GlFormTextarea, - GlIcon, - GlLink, - GlModal, - GlSprintf, -} from '@gitlab/ui'; -import { mapActions, mapState } from 'vuex'; -import { getCookie, setCookie } from '~/lib/utils/common_utils'; -import { __ } from '~/locale'; -import Tracking from '~/tracking'; -import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; -import { mapComputed } from '~/vuex_shared/bindings'; -import { - AWS_TOKEN_CONSTANTS, - ADD_CI_VARIABLE_MODAL_ID, - AWS_TIP_DISMISSED_COOKIE_NAME, - AWS_TIP_MESSAGE, - CONTAINS_VARIABLE_REFERENCE_MESSAGE, - ENVIRONMENT_SCOPE_LINK_TITLE, - EVENT_LABEL, - EVENT_ACTION, -} from '../constants'; -import LegacyCiEnvironmentsDropdown from './legacy_ci_environments_dropdown.vue'; -import { awsTokens, awsTokenList } from './ci_variable_autocomplete_tokens'; - -const trackingMixin = Tracking.mixin({ label: EVENT_LABEL }); - -export default { - modalId: ADD_CI_VARIABLE_MODAL_ID, - tokens: awsTokens, - tokenList: awsTokenList, - awsTipMessage: AWS_TIP_MESSAGE, - containsVariableReferenceMessage: CONTAINS_VARIABLE_REFERENCE_MESSAGE, - environmentScopeLinkTitle: ENVIRONMENT_SCOPE_LINK_TITLE, - components: { - LegacyCiEnvironmentsDropdown, - GlAlert, - GlButton, - GlCollapse, - GlFormCheckbox, - GlFormCombobox, - GlFormGroup, - GlFormSelect, - GlFormInput, - GlFormTextarea, - GlIcon, - GlLink, - GlModal, - GlSprintf, - }, - mixins: [glFeatureFlagsMixin(), trackingMixin], - data() { - return { - isTipDismissed: getCookie(AWS_TIP_DISMISSED_COOKIE_NAME) === 'true', - validationErrorEventProperty: '', - }; - }, - computed: { - ...mapState([ - 'projectId', - 'environments', - 'typeOptions', - 'variable', - 'variableBeingEdited', - 'isGroup', - 'maskableRegex', - 'selectedEnvironment', - 'isProtectedByDefault', - 'awsLogoSvgPath', - 'awsTipDeployLink', - 'awsTipCommandsLink', - 'awsTipLearnLink', - 'containsVariableReferenceLink', - 'protectedEnvironmentVariablesLink', - 'maskedEnvironmentVariablesLink', - 'environmentScopeLink', - ]), - ...mapComputed( - [ - { key: 'key', updateFn: 'updateVariableKey' }, - { key: 'secret_value', updateFn: 'updateVariableValue' }, - { key: 'variable_type', updateFn: 'updateVariableType' }, - { key: 'environment_scope', updateFn: 'setEnvironmentScope' }, - { key: 'protected_variable', updateFn: 'updateVariableProtected' }, - { key: 'masked', updateFn: 'updateVariableMasked' }, - ], - false, - 'variable', - ), - isTipVisible() { - return !this.isTipDismissed && AWS_TOKEN_CONSTANTS.includes(this.variable.key); - }, - canSubmit() { - return ( - this.variableValidationState && - this.variable.key !== '' && - this.variable.secret_value !== '' - ); - }, - canMask() { - const regex = RegExp(this.maskableRegex); - return regex.test(this.variable.secret_value); - }, - containsVariableReference() { - const regex = /\$/; - return regex.test(this.variable.secret_value); - }, - displayMaskedError() { - return !this.canMask && this.variable.masked; - }, - maskedState() { - if (this.displayMaskedError) { - return false; - } - return true; - }, - modalActionText() { - return this.variableBeingEdited ? __('Update variable') : __('Add variable'); - }, - maskedFeedback() { - return this.displayMaskedError ? __('This variable can not be masked.') : ''; - }, - tokenValidationFeedback() { - const tokenSpecificFeedback = this.$options.tokens?.[this.variable.key]?.invalidMessage; - if (!this.tokenValidationState && tokenSpecificFeedback) { - return tokenSpecificFeedback; - } - return ''; - }, - tokenValidationState() { - const validator = this.$options.tokens?.[this.variable.key]?.validation; - - if (validator) { - return validator(this.variable.secret_value); - } - - return true; - }, - scopedVariablesAvailable() { - return !this.isGroup || this.glFeatures.groupScopedCiVariables; - }, - variableValidationFeedback() { - return `${this.tokenValidationFeedback} ${this.maskedFeedback}`; - }, - variableValidationState() { - return this.variable.secret_value === '' || (this.tokenValidationState && this.maskedState); - }, - }, - watch: { - variable: { - handler() { - this.trackVariableValidationErrors(); - }, - deep: true, - }, - }, - methods: { - ...mapActions([ - 'addVariable', - 'updateVariable', - 'resetEditing', - 'displayInputValue', - 'clearModal', - 'deleteVariable', - 'setEnvironmentScope', - 'addWildCardScope', - 'resetSelectedEnvironment', - 'setSelectedEnvironment', - 'setVariableProtected', - ]), - dismissTip() { - setCookie(AWS_TIP_DISMISSED_COOKIE_NAME, 'true', { expires: 90 }); - this.isTipDismissed = true; - }, - deleteVarAndClose() { - this.deleteVariable(); - this.hideModal(); - }, - hideModal() { - this.$refs.modal.hide(); - }, - resetModalHandler() { - if (this.variableBeingEdited) { - this.resetEditing(); - } - - this.clearModal(); - this.resetSelectedEnvironment(); - this.resetValidationErrorEvents(); - }, - updateOrAddVariable() { - if (this.variableBeingEdited) { - this.updateVariable(); - } else { - this.addVariable(); - } - this.hideModal(); - }, - setVariableProtectedByDefault() { - if (this.isProtectedByDefault && !this.variableBeingEdited) { - this.setVariableProtected(); - } - }, - trackVariableValidationErrors() { - const property = this.getTrackingErrorProperty(); - if (!this.validationErrorEventProperty && property) { - this.track(EVENT_ACTION, { property }); - this.validationErrorEventProperty = property; - } - }, - getTrackingErrorProperty() { - let property; - if (this.variable.secret_value?.length && !property) { - if (this.displayMaskedError && this.maskableRegex?.length) { - const supportedChars = this.maskableRegex.replace('^', '').replace(/{(\d,)}\$/, ''); - const regex = new RegExp(supportedChars, 'g'); - property = this.variable.secret_value.replace(regex, ''); - } - if (this.containsVariableReference) { - property = '$'; - } - } - - return property; - }, - resetValidationErrorEvents() { - this.validationErrorEventProperty = ''; - }, - }, -}; -</script> - -<template> - <gl-modal - ref="modal" - :modal-id="$options.modalId" - :title="modalActionText" - static - lazy - @hidden="resetModalHandler" - @shown="setVariableProtectedByDefault" - > - <form> - <gl-form-combobox - v-model="key" - :token-list="$options.tokenList" - :label-text="__('Key')" - data-testid="pipeline-form-ci-variable-key" - data-qa-selector="ci_variable_key_field" - /> - - <gl-form-group - :label="__('Value')" - label-for="ci-variable-value" - :state="variableValidationState" - :invalid-feedback="variableValidationFeedback" - > - <gl-form-textarea - id="ci-variable-value" - ref="valueField" - v-model="secret_value" - :state="variableValidationState" - rows="3" - max-rows="10" - data-testid="pipeline-form-ci-variable-value" - data-qa-selector="ci_variable_value_field" - class="gl-font-monospace!" - spellcheck="false" - /> - </gl-form-group> - - <div class="d-flex"> - <gl-form-group :label="__('Type')" label-for="ci-variable-type" class="w-50 gl-mr-5"> - <gl-form-select id="ci-variable-type" v-model="variable_type" :options="typeOptions" /> - </gl-form-group> - - <gl-form-group label-for="ci-variable-env" class="w-50" data-testid="environment-scope"> - <template #label> - {{ __('Environment scope') }} - <gl-link - :title="$options.environmentScopeLinkTitle" - :href="environmentScopeLink" - target="_blank" - data-testid="environment-scope-link" - > - <gl-icon name="question" :size="12" /> - </gl-link> - </template> - <legacy-ci-environments-dropdown - v-if="scopedVariablesAvailable" - class="w-100" - :value="environment_scope" - @selectEnvironment="setEnvironmentScope" - @createClicked="addWildCardScope" - /> - - <gl-form-input v-else v-model="environment_scope" class="w-100" readonly /> - </gl-form-group> - </div> - - <gl-form-group :label="__('Flags')" label-for="ci-variable-flags"> - <gl-form-checkbox - v-model="protected_variable" - class="mb-0" - data-testid="ci-variable-protected-checkbox" - > - {{ __('Protect variable') }} - <gl-link target="_blank" :href="protectedEnvironmentVariablesLink"> - <gl-icon name="question" :size="12" /> - </gl-link> - <p class="gl-mt-2 text-secondary"> - {{ __('Export variable to pipelines running on protected branches and tags only.') }} - </p> - </gl-form-checkbox> - - <gl-form-checkbox - ref="masked-ci-variable" - v-model="masked" - data-testid="ci-variable-masked-checkbox" - > - {{ __('Mask variable') }} - <gl-link target="_blank" :href="maskedEnvironmentVariablesLink"> - <gl-icon name="question" :size="12" /> - </gl-link> - <p class="gl-mt-2 gl-mb-0 text-secondary"> - {{ __('Variable will be masked in job logs.') }} - <span - :class="{ - 'bold text-plain': displayMaskedError, - }" - > - {{ __('Requires values to meet regular expression requirements.') }}</span - > - <gl-link target="_blank" :href="maskedEnvironmentVariablesLink">{{ - __('More information') - }}</gl-link> - </p> - </gl-form-checkbox> - </gl-form-group> - </form> - <gl-collapse :visible="isTipVisible"> - <gl-alert - :title="__('Deploying to AWS is easy with GitLab')" - variant="tip" - data-testid="aws-guidance-tip" - @dismiss="dismissTip" - > - <div class="gl-display-flex gl-flex-direction-row"> - <div> - <p> - <gl-sprintf :message="$options.awsTipMessage"> - <template #deployLink="{ content }"> - <gl-link :href="awsTipDeployLink" target="_blank">{{ content }}</gl-link> - </template> - <template #commandsLink="{ content }"> - <gl-link :href="awsTipCommandsLink" target="_blank">{{ content }}</gl-link> - </template> - </gl-sprintf> - </p> - <p> - <gl-button - :href="awsTipLearnLink" - target="_blank" - category="secondary" - variant="info" - class="gl-overflow-wrap-break" - >{{ __('Learn more about deploying to AWS') }}</gl-button - > - </p> - </div> - <img - class="gl-mt-3" - :alt="__('Amazon Web Services Logo')" - :src="awsLogoSvgPath" - height="32" - /> - </div> - </gl-alert> - </gl-collapse> - <gl-alert - v-if="containsVariableReference" - :title="__('Value might contain a variable reference')" - :dismissible="false" - variant="warning" - data-testid="contains-variable-reference" - > - <gl-sprintf :message="$options.containsVariableReferenceMessage"> - <template #code="{ content }"> - <code>{{ content }}</code> - </template> - <template #docsLink="{ content }"> - <gl-link :href="containsVariableReferenceLink" target="_blank">{{ content }}</gl-link> - </template> - </gl-sprintf> - </gl-alert> - <template #modal-footer> - <gl-button @click="hideModal">{{ __('Cancel') }}</gl-button> - <gl-button - v-if="variableBeingEdited" - ref="deleteCiVariable" - variant="danger" - category="secondary" - data-qa-selector="ci_variable_delete_button" - @click="deleteVarAndClose" - >{{ __('Delete variable') }}</gl-button - > - <gl-button - ref="updateOrAddVariable" - :disabled="!canSubmit" - variant="confirm" - category="primary" - data-testid="ciUpdateOrAddVariableBtn" - data-qa-selector="ci_variable_save_button" - @click="updateOrAddVariable" - >{{ modalActionText }} - </gl-button> - </template> - </gl-modal> -</template> diff --git a/app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_settings.vue b/app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_settings.vue deleted file mode 100644 index f1fe188348d..00000000000 --- a/app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_settings.vue +++ /dev/null @@ -1,32 +0,0 @@ -<script> -import { mapState, mapActions } from 'vuex'; -import LegacyCiVariableModal from './legacy_ci_variable_modal.vue'; -import LegacyCiVariableTable from './legacy_ci_variable_table.vue'; - -export default { - components: { - LegacyCiVariableModal, - LegacyCiVariableTable, - }, - computed: { - ...mapState(['isGroup', 'isProject']), - }, - mounted() { - if (this.isProject) { - this.fetchEnvironments(); - } - }, - methods: { - ...mapActions(['fetchEnvironments']), - }, -}; -</script> - -<template> - <div class="row"> - <div class="col-lg-12"> - <legacy-ci-variable-table /> - <legacy-ci-variable-modal /> - </div> - </div> -</template> diff --git a/app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_table.vue b/app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_table.vue deleted file mode 100644 index f3a84e22316..00000000000 --- a/app/assets/javascripts/ci_variable_list/components/legacy_ci_variable_table.vue +++ /dev/null @@ -1,209 +0,0 @@ -<script> -import { GlTable, GlButton, GlModalDirective, GlTooltipDirective } from '@gitlab/ui'; -import { mapState, mapActions } from 'vuex'; -import { s__, __ } from '~/locale'; -import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; -import { ADD_CI_VARIABLE_MODAL_ID } from '../constants'; - -export default { - modalId: ADD_CI_VARIABLE_MODAL_ID, - fields: [ - { - key: 'variable_type', - label: s__('CiVariables|Type'), - thClass: 'gl-w-10p', - }, - { - key: 'key', - label: s__('CiVariables|Key'), - tdClass: 'text-plain', - sortable: true, - }, - { - key: 'value', - label: s__('CiVariables|Value'), - thClass: 'gl-w-15p', - }, - { - key: 'options', - label: s__('CiVariables|Options'), - thClass: 'gl-w-10p', - }, - { - key: 'environment_scope', - label: s__('CiVariables|Environments'), - }, - { - key: 'actions', - label: '', - tdClass: 'text-right', - thClass: 'gl-w-5p', - }, - ], - components: { - GlButton, - GlTable, - }, - directives: { - GlModalDirective, - GlTooltip: GlTooltipDirective, - }, - mixins: [glFeatureFlagsMixin()], - computed: { - ...mapState(['variables', 'valuesHidden', 'isLoading', 'isDeleting']), - valuesButtonText() { - return this.valuesHidden ? __('Reveal values') : __('Hide values'); - }, - isTableEmpty() { - return !this.variables || this.variables.length === 0; - }, - fields() { - return this.$options.fields; - }, - variablesWithOptions() { - return this.variables?.map((item, index) => ({ - ...item, - options: this.getOptions(item), - index, - })); - }, - }, - mounted() { - this.fetchVariables(); - }, - methods: { - ...mapActions(['fetchVariables', 'toggleValues', 'editVariable']), - getOptions(item) { - const options = []; - if (item.protected) { - options.push(s__('CiVariables|Protected')); - } - if (item.masked) { - options.push(s__('CiVariables|Masked')); - } - return options.join(', '); - }, - editVariableClicked(index = -1) { - this.editVariable(this.variables[index] ?? null); - }, - }, -}; -</script> - -<template> - <div class="ci-variable-table" data-testid="ci-variable-table"> - <gl-table - :fields="fields" - :items="variablesWithOptions" - tbody-tr-class="js-ci-variable-row" - data-qa-selector="ci_variable_table_content" - sort-by="key" - sort-direction="asc" - stacked="lg" - table-class="text-secondary" - fixed - show-empty - sort-icon-left - no-sort-reset - > - <template #table-colgroup="scope"> - <col v-for="field in scope.fields" :key="field.key" :style="field.customStyle" /> - </template> - <template #cell(key)="{ item }"> - <div - class="gl-display-flex gl-align-items-flex-start gl-justify-content-end gl-lg-justify-content-start gl-mr-n3" - > - <span - :id="`ci-variable-key-${item.id}`" - class="gl-display-inline-block gl-max-w-full gl-word-break-word" - >{{ item.key }}</span - > - <gl-button - v-gl-tooltip - category="tertiary" - icon="copy-to-clipboard" - class="gl-my-n3 gl-ml-2" - :title="__('Copy key')" - :data-clipboard-text="item.key" - :aria-label="__('Copy to clipboard')" - /> - </div> - </template> - <template #cell(value)="{ item }"> - <div - class="gl-display-flex gl-align-items-flex-start gl-justify-content-end gl-lg-justify-content-start gl-mr-n3" - > - <span v-if="valuesHidden">*****</span> - <span - v-else - :id="`ci-variable-value-${item.id}`" - class="gl-display-inline-block gl-max-w-full gl-text-truncate" - >{{ item.value }}</span - > - <gl-button - v-gl-tooltip - category="tertiary" - icon="copy-to-clipboard" - class="gl-my-n3 gl-ml-2" - :title="__('Copy value')" - :data-clipboard-text="item.value" - :aria-label="__('Copy to clipboard')" - /> - </div> - </template> - <template #cell(options)="{ item }"> - <span>{{ item.options }}</span> - </template> - <template #cell(environment_scope)="{ item }"> - <div - class="gl-display-flex gl-align-items-flex-start gl-justify-content-end gl-lg-justify-content-start gl-mr-n3" - > - <span - :id="`ci-variable-env-${item.id}`" - class="gl-display-inline-block gl-max-w-full gl-word-break-word" - >{{ item.environment_scope }}</span - > - <gl-button - v-gl-tooltip - category="tertiary" - icon="copy-to-clipboard" - class="gl-my-n3 gl-ml-2" - :title="__('Copy environment')" - :data-clipboard-text="item.environment_scope" - :aria-label="__('Copy to clipboard')" - /> - </div> - </template> - <template #cell(actions)="{ item }"> - <gl-button - v-gl-modal-directive="$options.modalId" - icon="pencil" - :aria-label="__('Edit')" - data-qa-selector="edit_ci_variable_button" - @click="editVariableClicked(item.index)" - /> - </template> - <template #empty> - <p class="gl-text-center gl-py-6 gl-text-black-normal gl-mb-0"> - {{ __('There are no variables yet.') }} - </p> - </template> - </gl-table> - <div class="ci-variable-actions gl-display-flex gl-mt-5"> - <gl-button - v-gl-modal-directive="$options.modalId" - class="gl-mr-3" - data-qa-selector="add_ci_variable_button" - variant="confirm" - category="primary" - >{{ __('Add variable') }}</gl-button - > - <gl-button - v-if="!isTableEmpty" - data-qa-selector="reveal_ci_variable_value_button" - @click="toggleValues(!valuesHidden)" - >{{ valuesButtonText }}</gl-button - > - </div> - </div> -</template> diff --git a/app/assets/javascripts/ci_variable_list/index.js b/app/assets/javascripts/ci_variable_list/index.js index 1b69da9e086..174a59aba42 100644 --- a/app/assets/javascripts/ci_variable_list/index.js +++ b/app/assets/javascripts/ci_variable_list/index.js @@ -5,9 +5,7 @@ import { parseBoolean } from '~/lib/utils/common_utils'; import CiAdminVariables from './components/ci_admin_variables.vue'; import CiGroupVariables from './components/ci_group_variables.vue'; import CiProjectVariables from './components/ci_project_variables.vue'; -import LegacyCiVariableSettings from './components/legacy_ci_variable_settings.vue'; import { cacheConfig, resolvers } from './graphql/settings'; -import createStore from './store'; const mountCiVariableListApp = (containerEl) => { const { @@ -76,62 +74,10 @@ const mountCiVariableListApp = (containerEl) => { }); }; -const mountLegacyCiVariableListApp = (containerEl) => { - const { - endpoint, - projectId, - isGroup, - isProject, - maskableRegex, - protectedByDefault, - awsLogoSvgPath, - awsTipDeployLink, - awsTipCommandsLink, - awsTipLearnLink, - containsVariableReferenceLink, - protectedEnvironmentVariablesLink, - maskedEnvironmentVariablesLink, - environmentScopeLink, - } = containerEl.dataset; - - const parsedIsProject = parseBoolean(isProject); - const parsedIsGroup = parseBoolean(isGroup); - const isProtectedByDefault = parseBoolean(protectedByDefault); - - const store = createStore({ - endpoint, - projectId, - isGroup: parsedIsGroup, - isProject: parsedIsProject, - maskableRegex, - isProtectedByDefault, - awsLogoSvgPath, - awsTipDeployLink, - awsTipCommandsLink, - awsTipLearnLink, - containsVariableReferenceLink, - protectedEnvironmentVariablesLink, - maskedEnvironmentVariablesLink, - environmentScopeLink, - }); - - return new Vue({ - el: containerEl, - store, - render(createElement) { - return createElement(LegacyCiVariableSettings); - }, - }); -}; - -export default (containerId = 'js-ci-project-variables') => { +export default (containerId = 'js-ci-variables') => { const el = document.getElementById(containerId); - if (el) { - if (gon.features?.ciVariableSettingsGraphql) { - mountCiVariableListApp(el); - } else { - mountLegacyCiVariableListApp(el); - } - } + if (!el) return; + + mountCiVariableListApp(el); }; diff --git a/app/assets/javascripts/ci_variable_list/store/actions.js b/app/assets/javascripts/ci_variable_list/store/actions.js deleted file mode 100644 index ac31e845b0d..00000000000 --- a/app/assets/javascripts/ci_variable_list/store/actions.js +++ /dev/null @@ -1,208 +0,0 @@ -import Api from '~/api'; -import { createAlert } from '~/flash'; -import axios from '~/lib/utils/axios_utils'; -import { __ } from '~/locale'; -import * as types from './mutation_types'; -import { prepareDataForApi, prepareDataForDisplay, prepareEnvironments } from './utils'; - -export const toggleValues = ({ commit }, valueState) => { - commit(types.TOGGLE_VALUES, valueState); -}; - -export const clearModal = ({ commit }) => { - commit(types.CLEAR_MODAL); -}; - -export const resetEditing = ({ commit, dispatch }) => { - // fetch variables again if modal is being edited and then hidden - // without saving changes, to cover use case of reactivity in the table - dispatch('fetchVariables'); - commit(types.RESET_EDITING); -}; - -export const setVariableProtected = ({ commit }) => { - commit(types.SET_VARIABLE_PROTECTED); -}; - -export const requestAddVariable = ({ commit }) => { - commit(types.REQUEST_ADD_VARIABLE); -}; - -export const receiveAddVariableSuccess = ({ commit }) => { - commit(types.RECEIVE_ADD_VARIABLE_SUCCESS); -}; - -export const receiveAddVariableError = ({ commit }, error) => { - commit(types.RECEIVE_ADD_VARIABLE_ERROR, error); -}; - -export const addVariable = ({ state, dispatch }) => { - dispatch('requestAddVariable'); - - return axios - .patch(state.endpoint, { - variables_attributes: [prepareDataForApi(state.variable)], - }) - .then(() => { - dispatch('receiveAddVariableSuccess'); - dispatch('fetchVariables'); - }) - .catch((error) => { - createAlert({ - message: error.response.data[0], - }); - dispatch('receiveAddVariableError', error); - }); -}; - -export const requestUpdateVariable = ({ commit }) => { - commit(types.REQUEST_UPDATE_VARIABLE); -}; - -export const receiveUpdateVariableSuccess = ({ commit }) => { - commit(types.RECEIVE_UPDATE_VARIABLE_SUCCESS); -}; - -export const receiveUpdateVariableError = ({ commit }, error) => { - commit(types.RECEIVE_UPDATE_VARIABLE_ERROR, error); -}; - -export const updateVariable = ({ state, dispatch }) => { - dispatch('requestUpdateVariable'); - - const updatedVariable = prepareDataForApi(state.variable); - updatedVariable.secrect_value = updateVariable.value; - - return axios - .patch(state.endpoint, { variables_attributes: [updatedVariable] }) - .then(() => { - dispatch('receiveUpdateVariableSuccess'); - dispatch('fetchVariables'); - }) - .catch((error) => { - createAlert({ - message: error.response.data[0], - }); - dispatch('receiveUpdateVariableError', error); - }); -}; - -export const editVariable = ({ commit }, variable) => { - const variableToEdit = variable; - variableToEdit.secret_value = variableToEdit.value; - commit(types.VARIABLE_BEING_EDITED, variableToEdit); -}; - -export const requestVariables = ({ commit }) => { - commit(types.REQUEST_VARIABLES); -}; -export const receiveVariablesSuccess = ({ commit }, variables) => { - commit(types.RECEIVE_VARIABLES_SUCCESS, variables); -}; - -export const fetchVariables = ({ dispatch, state }) => { - dispatch('requestVariables'); - - return axios - .get(state.endpoint) - .then(({ data }) => { - dispatch('receiveVariablesSuccess', prepareDataForDisplay(data.variables)); - }) - .catch(() => { - createAlert({ - message: __('There was an error fetching the variables.'), - }); - }); -}; - -export const requestDeleteVariable = ({ commit }) => { - commit(types.REQUEST_DELETE_VARIABLE); -}; - -export const receiveDeleteVariableSuccess = ({ commit }) => { - commit(types.RECEIVE_DELETE_VARIABLE_SUCCESS); -}; - -export const receiveDeleteVariableError = ({ commit }, error) => { - commit(types.RECEIVE_DELETE_VARIABLE_ERROR, error); -}; - -export const deleteVariable = ({ dispatch, state }) => { - dispatch('requestDeleteVariable'); - - const destroy = true; - - return axios - .patch(state.endpoint, { variables_attributes: [prepareDataForApi(state.variable, destroy)] }) - .then(() => { - dispatch('receiveDeleteVariableSuccess'); - dispatch('fetchVariables'); - }) - .catch((error) => { - createAlert({ - message: error.response.data[0], - }); - dispatch('receiveDeleteVariableError', error); - }); -}; - -export const requestEnvironments = ({ commit }) => { - commit(types.REQUEST_ENVIRONMENTS); -}; - -export const receiveEnvironmentsSuccess = ({ commit }, environments) => { - commit(types.RECEIVE_ENVIRONMENTS_SUCCESS, environments); -}; - -export const fetchEnvironments = ({ dispatch, state }) => { - dispatch('requestEnvironments'); - - return Api.environments(state.projectId) - .then((res) => { - dispatch('receiveEnvironmentsSuccess', prepareEnvironments(res.data)); - }) - .catch(() => { - createAlert({ - message: __('There was an error fetching the environments information.'), - }); - }); -}; - -export const setEnvironmentScope = ({ commit, dispatch }, environment) => { - commit(types.SET_ENVIRONMENT_SCOPE, environment); - dispatch('setSelectedEnvironment', environment); -}; - -export const addWildCardScope = ({ commit, dispatch }, environment) => { - commit(types.ADD_WILD_CARD_SCOPE, environment); - commit(types.SET_ENVIRONMENT_SCOPE, environment); - dispatch('setSelectedEnvironment', environment); -}; - -export const resetSelectedEnvironment = ({ commit }) => { - commit(types.RESET_SELECTED_ENVIRONMENT); -}; - -export const setSelectedEnvironment = ({ commit }, environment) => { - commit(types.SET_SELECTED_ENVIRONMENT, environment); -}; - -export const updateVariableKey = ({ commit }, { key }) => { - commit(types.UPDATE_VARIABLE_KEY, key); -}; - -export const updateVariableValue = ({ commit }, { secret_value }) => { - commit(types.UPDATE_VARIABLE_VALUE, secret_value); -}; - -export const updateVariableType = ({ commit }, { variable_type }) => { - commit(types.UPDATE_VARIABLE_TYPE, variable_type); -}; - -export const updateVariableProtected = ({ commit }, { protected_variable }) => { - commit(types.UPDATE_VARIABLE_PROTECTED, protected_variable); -}; - -export const updateVariableMasked = ({ commit }, { masked }) => { - commit(types.UPDATE_VARIABLE_MASKED, masked); -}; diff --git a/app/assets/javascripts/ci_variable_list/store/getters.js b/app/assets/javascripts/ci_variable_list/store/getters.js deleted file mode 100644 index 6570f455541..00000000000 --- a/app/assets/javascripts/ci_variable_list/store/getters.js +++ /dev/null @@ -1,6 +0,0 @@ -import { uniq } from 'lodash'; - -export const joinedEnvironments = (state) => { - const scopesFromVariables = (state.variables || []).map((variable) => variable.environment_scope); - return uniq(state.environments.concat(scopesFromVariables)).sort(); -}; diff --git a/app/assets/javascripts/ci_variable_list/store/index.js b/app/assets/javascripts/ci_variable_list/store/index.js deleted file mode 100644 index 83802f6a36f..00000000000 --- a/app/assets/javascripts/ci_variable_list/store/index.js +++ /dev/null @@ -1,19 +0,0 @@ -import Vue from 'vue'; -import Vuex from 'vuex'; -import * as actions from './actions'; -import * as getters from './getters'; -import mutations from './mutations'; -import state from './state'; - -Vue.use(Vuex); - -export default (initialState = {}) => - new Vuex.Store({ - actions, - mutations, - getters, - state: { - ...state(), - ...initialState, - }, - }); diff --git a/app/assets/javascripts/ci_variable_list/store/mutation_types.js b/app/assets/javascripts/ci_variable_list/store/mutation_types.js deleted file mode 100644 index 5db8f610192..00000000000 --- a/app/assets/javascripts/ci_variable_list/store/mutation_types.js +++ /dev/null @@ -1,33 +0,0 @@ -export const TOGGLE_VALUES = 'TOGGLE_VALUES'; -export const VARIABLE_BEING_EDITED = 'VARIABLE_BEING_EDITED'; -export const RESET_EDITING = 'RESET_EDITING'; -export const CLEAR_MODAL = 'CLEAR_MODAL'; -export const SET_VARIABLE_PROTECTED = 'SET_VARIABLE_PROTECTED'; - -export const REQUEST_VARIABLES = 'REQUEST_VARIABLES'; -export const RECEIVE_VARIABLES_SUCCESS = 'RECEIVE_VARIABLES_SUCCESS'; - -export const REQUEST_DELETE_VARIABLE = 'REQUEST_DELETE_VARIABLE'; -export const RECEIVE_DELETE_VARIABLE_SUCCESS = 'RECEIVE_DELETE_VARIABLE_SUCCESS'; -export const RECEIVE_DELETE_VARIABLE_ERROR = 'RECEIVE_DELETE_VARIABLE_ERROR'; - -export const REQUEST_ADD_VARIABLE = 'REQUEST_ADD_VARIABLE'; -export const RECEIVE_ADD_VARIABLE_SUCCESS = 'RECEIVE_ADD_VARIABLE_SUCCESS'; -export const RECEIVE_ADD_VARIABLE_ERROR = 'RECEIVE_ADD_VARIABLE_ERROR'; - -export const REQUEST_UPDATE_VARIABLE = 'REQUEST_UPDATE_VARIABLE'; -export const RECEIVE_UPDATE_VARIABLE_SUCCESS = 'RECEIVE_UPDATE_VARIABLE_SUCCESS'; -export const RECEIVE_UPDATE_VARIABLE_ERROR = 'RECEIVE_UPDATE_VARIABLE_ERROR'; - -export const REQUEST_ENVIRONMENTS = 'REQUEST_ENVIRONMENTS'; -export const RECEIVE_ENVIRONMENTS_SUCCESS = 'RECEIVE_ENVIRONMENTS_SUCCESS'; -export const SET_ENVIRONMENT_SCOPE = 'SET_ENVIRONMENT_SCOPE'; -export const ADD_WILD_CARD_SCOPE = 'ADD_WILD_CARD_SCOPE'; -export const RESET_SELECTED_ENVIRONMENT = 'RESET_SELECTED_ENVIRONMENT'; -export const SET_SELECTED_ENVIRONMENT = 'SET_SELECTED_ENVIRONMENT'; - -export const UPDATE_VARIABLE_KEY = 'UPDATE_VARIABLE_KEY'; -export const UPDATE_VARIABLE_VALUE = 'UPDATE_VARIABLE_VALUE'; -export const UPDATE_VARIABLE_TYPE = 'UPDATE_VARIABLE_TYPE'; -export const UPDATE_VARIABLE_PROTECTED = 'UPDATE_VARIABLE_PROTECTED'; -export const UPDATE_VARIABLE_MASKED = 'UPDATE_VARIABLE_MASKED'; diff --git a/app/assets/javascripts/ci_variable_list/store/mutations.js b/app/assets/javascripts/ci_variable_list/store/mutations.js deleted file mode 100644 index 0e7c61cecb8..00000000000 --- a/app/assets/javascripts/ci_variable_list/store/mutations.js +++ /dev/null @@ -1,128 +0,0 @@ -import { displayText } from '../constants'; -import * as types from './mutation_types'; - -export default { - [types.REQUEST_VARIABLES](state) { - state.isLoading = true; - }, - - [types.RECEIVE_VARIABLES_SUCCESS](state, variables) { - state.isLoading = false; - state.variables = variables; - }, - - [types.REQUEST_DELETE_VARIABLE](state) { - state.isDeleting = true; - }, - - [types.RECEIVE_DELETE_VARIABLE_SUCCESS](state) { - state.isDeleting = false; - }, - - [types.RECEIVE_DELETE_VARIABLE_ERROR](state, error) { - state.isDeleting = false; - state.error = error; - }, - - [types.REQUEST_ADD_VARIABLE](state) { - state.isLoading = true; - }, - - [types.RECEIVE_ADD_VARIABLE_SUCCESS](state) { - state.isLoading = false; - }, - - [types.RECEIVE_ADD_VARIABLE_ERROR](state, error) { - state.isLoading = false; - state.error = error; - }, - - [types.REQUEST_UPDATE_VARIABLE](state) { - state.isLoading = true; - }, - - [types.RECEIVE_UPDATE_VARIABLE_SUCCESS](state) { - state.isLoading = false; - }, - - [types.RECEIVE_UPDATE_VARIABLE_ERROR](state, error) { - state.isLoading = false; - state.error = error; - }, - - [types.TOGGLE_VALUES](state, valueState) { - state.valuesHidden = valueState; - }, - - [types.REQUEST_ENVIRONMENTS](state) { - state.isLoading = true; - }, - - [types.RECEIVE_ENVIRONMENTS_SUCCESS](state, environments) { - state.isLoading = false; - state.environments = environments; - state.environments.unshift(displayText.allEnvironmentsText); - }, - - [types.VARIABLE_BEING_EDITED](state, variable) { - state.variableBeingEdited = true; - state.variable = variable; - }, - - [types.CLEAR_MODAL](state) { - state.variable = { - variable_type: displayText.variableText, - key: '', - secret_value: '', - protected_variable: false, - masked: false, - environment_scope: displayText.allEnvironmentsText, - }; - }, - - [types.RESET_EDITING](state) { - state.variableBeingEdited = false; - state.showInputValue = false; - }, - - [types.SET_ENVIRONMENT_SCOPE](state, environment) { - state.variable.environment_scope = environment; - }, - - [types.ADD_WILD_CARD_SCOPE](state, environment) { - state.environments.push(environment); - state.environments.sort(); - }, - - [types.RESET_SELECTED_ENVIRONMENT](state) { - state.selectedEnvironment = ''; - }, - - [types.SET_SELECTED_ENVIRONMENT](state, environment) { - state.selectedEnvironment = environment; - }, - - [types.SET_VARIABLE_PROTECTED](state) { - state.variable.protected_variable = true; - }, - - [types.UPDATE_VARIABLE_KEY](state, key) { - state.variable.key = key; - }, - - [types.UPDATE_VARIABLE_VALUE](state, value) { - state.variable.secret_value = value; - }, - - [types.UPDATE_VARIABLE_TYPE](state, type) { - state.variable.variable_type = type; - }, - - [types.UPDATE_VARIABLE_PROTECTED](state, bool) { - state.variable.protected_variable = bool; - }, - - [types.UPDATE_VARIABLE_MASKED](state, bool) { - state.variable.masked = bool; - }, -}; diff --git a/app/assets/javascripts/ci_variable_list/store/state.js b/app/assets/javascripts/ci_variable_list/store/state.js deleted file mode 100644 index 96b27792664..00000000000 --- a/app/assets/javascripts/ci_variable_list/store/state.js +++ /dev/null @@ -1,26 +0,0 @@ -import { displayText } from '../constants'; - -export default () => ({ - endpoint: null, - projectId: null, - isGroup: null, - maskableRegex: null, - isProtectedByDefault: null, - isLoading: false, - isDeleting: false, - variable: { - variable_type: displayText.variableText, - key: '', - secret_value: '', - protected_variable: false, - masked: false, - environment_scope: displayText.allEnvironmentsText, - }, - variables: null, - valuesHidden: true, - error: null, - environments: [], - typeOptions: [displayText.variableText, displayText.fileText], - variableBeingEdited: false, - selectedEnvironment: '', -}); diff --git a/app/assets/javascripts/ci_variable_list/store/utils.js b/app/assets/javascripts/ci_variable_list/store/utils.js deleted file mode 100644 index f46a671ae7b..00000000000 --- a/app/assets/javascripts/ci_variable_list/store/utils.js +++ /dev/null @@ -1,45 +0,0 @@ -import { cloneDeep } from 'lodash'; -import { displayText, types, allEnvironments } from '../constants'; - -const variableTypeHandler = (type) => - type === displayText.variableText ? types.variableType : types.fileType; - -export const prepareDataForDisplay = (variables) => { - const variablesToDisplay = []; - variables.forEach((variable) => { - const variableCopy = variable; - if (variableCopy.variable_type === types.variableType) { - variableCopy.variable_type = displayText.variableText; - } else { - variableCopy.variable_type = displayText.fileText; - } - variableCopy.secret_value = variableCopy.value; - - if (variableCopy.environment_scope === allEnvironments.type) { - variableCopy.environment_scope = displayText.allEnvironmentsText; - } - variableCopy.protected_variable = variableCopy.protected; - variablesToDisplay.push(variableCopy); - }); - return variablesToDisplay; -}; - -export const prepareDataForApi = (variable, destroy = false) => { - const variableCopy = cloneDeep(variable); - variableCopy.protected = variableCopy.protected_variable.toString(); - delete variableCopy.protected_variable; - variableCopy.masked = variableCopy.masked.toString(); - variableCopy.variable_type = variableTypeHandler(variableCopy.variable_type); - if (variableCopy.environment_scope === displayText.allEnvironmentsText) { - variableCopy.environment_scope = allEnvironments.type; - } - - if (destroy) { - // eslint-disable-next-line - variableCopy._destroy = destroy; - } - - return variableCopy; -}; - -export const prepareEnvironments = (environments) => environments.map((e) => e.name); |