diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-03-16 15:07:24 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-03-16 15:07:24 +0300 |
commit | d2199d74936cd5cb9f45f569f723a5370ae5013e (patch) | |
tree | f98a19436c9d37e2030c965f561497218dae9d27 /app/assets/javascripts/environments | |
parent | aeda2f64b45ff2bbcf2150dc75a6cbf1eec5c07f (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/environments')
-rw-r--r-- | app/assets/javascripts/environments/components/environment_folder.vue (renamed from app/assets/javascripts/environments/components/new_environment_folder.vue) | 0 | ||||
-rw-r--r-- | app/assets/javascripts/environments/components/environments_app.vue | 390 | ||||
-rw-r--r-- | app/assets/javascripts/environments/components/new_environments_app.vue | 271 | ||||
-rw-r--r-- | app/assets/javascripts/environments/index.js | 56 | ||||
-rw-r--r-- | app/assets/javascripts/environments/new_index.js | 40 |
5 files changed, 259 insertions, 498 deletions
diff --git a/app/assets/javascripts/environments/components/new_environment_folder.vue b/app/assets/javascripts/environments/components/environment_folder.vue index d5c6d26cfd0..d5c6d26cfd0 100644 --- a/app/assets/javascripts/environments/components/new_environment_folder.vue +++ b/app/assets/javascripts/environments/components/environment_folder.vue diff --git a/app/assets/javascripts/environments/components/environments_app.vue b/app/assets/javascripts/environments/components/environments_app.vue index acc16ecd874..c7008c03099 100644 --- a/app/assets/javascripts/environments/components/environments_app.vue +++ b/app/assets/javascripts/environments/components/environments_app.vue @@ -1,188 +1,272 @@ <script> -import { GlBadge, GlButton, GlModalDirective, GlTab, GlTabs } from '@gitlab/ui'; -import createFlash from '~/flash'; -import { s__ } from '~/locale'; -import eventHub from '../event_hub'; -import environmentsMixin from '../mixins/environments_mixin'; -import EnvironmentsPaginationApiMixin from '../mixins/environments_pagination_api_mixin'; -import ConfirmRollbackModal from './confirm_rollback_modal.vue'; -import DeleteEnvironmentModal from './delete_environment_modal.vue'; -import emptyState from './empty_state.vue'; +import { GlBadge, GlPagination, GlTab, GlTabs } from '@gitlab/ui'; +import { s__, __, sprintf } from '~/locale'; +import { updateHistory, setUrlParams, queryToObject } from '~/lib/utils/url_utility'; +import environmentAppQuery from '../graphql/queries/environment_app.query.graphql'; +import pollIntervalQuery from '../graphql/queries/poll_interval.query.graphql'; +import pageInfoQuery from '../graphql/queries/page_info.query.graphql'; +import environmentToDeleteQuery from '../graphql/queries/environment_to_delete.query.graphql'; +import environmentToRollbackQuery from '../graphql/queries/environment_to_rollback.query.graphql'; +import environmentToStopQuery from '../graphql/queries/environment_to_stop.query.graphql'; +import environmentToChangeCanaryQuery from '../graphql/queries/environment_to_change_canary.query.graphql'; +import { ENVIRONMENTS_SCOPE } from '../constants'; +import EnvironmentFolder from './environment_folder.vue'; import EnableReviewAppModal from './enable_review_app_modal.vue'; import StopEnvironmentModal from './stop_environment_modal.vue'; +import EnvironmentItem from './new_environment_item.vue'; +import ConfirmRollbackModal from './confirm_rollback_modal.vue'; +import DeleteEnvironmentModal from './delete_environment_modal.vue'; +import CanaryUpdateModal from './canary_update_modal.vue'; +import EmptyState from './empty_state.vue'; export default { - i18n: { - newEnvironmentButtonLabel: s__('Environments|New environment'), - reviewAppButtonLabel: s__('Environments|Enable review app'), - }, - modal: { - id: 'enable-review-app-info', - }, components: { + DeleteEnvironmentModal, + CanaryUpdateModal, ConfirmRollbackModal, - emptyState, + EmptyState, + EnvironmentFolder, EnableReviewAppModal, + EnvironmentItem, + StopEnvironmentModal, GlBadge, - GlButton, + GlPagination, GlTab, GlTabs, - StopEnvironmentModal, - DeleteEnvironmentModal, }, - directives: { - 'gl-modal': GlModalDirective, - }, - mixins: [EnvironmentsPaginationApiMixin, environmentsMixin], - props: { - endpoint: { - type: String, - required: true, + apollo: { + environmentApp: { + query: environmentAppQuery, + variables() { + return { + scope: this.scope, + page: this.page ?? 1, + }; + }, + pollInterval() { + return this.interval; + }, + }, + interval: { + query: pollIntervalQuery, + }, + pageInfo: { + query: pageInfoQuery, + }, + environmentToDelete: { + query: environmentToDeleteQuery, }, - canCreateEnvironment: { - type: Boolean, - required: true, + environmentToRollback: { + query: environmentToRollbackQuery, }, - newEnvironmentPath: { - type: String, - required: true, + environmentToStop: { + query: environmentToStopQuery, }, - helpPagePath: { - type: String, - required: true, + environmentToChangeCanary: { + query: environmentToChangeCanaryQuery, + }, + weight: { + query: environmentToChangeCanaryQuery, }, }, - - created() { - eventHub.$on('toggleFolder', this.toggleFolder); - eventHub.$on('toggleDeployBoard', this.toggleDeployBoard); + inject: ['newEnvironmentPath', 'canCreateEnvironment', 'helpPagePath'], + i18n: { + newEnvironmentButtonLabel: s__('Environments|New environment'), + reviewAppButtonLabel: s__('Environments|Enable review app'), + available: __('Available'), + stopped: __('Stopped'), + prevPage: __('Go to previous page'), + nextPage: __('Go to next page'), + next: __('Next'), + prev: __('Prev'), + goto: (page) => sprintf(__('Go to page %{page}'), { page }), }, - - beforeDestroy() { - // eslint-disable-next-line @gitlab/no-global-event-off - eventHub.$off('toggleFolder'); - // eslint-disable-next-line @gitlab/no-global-event-off - eventHub.$off('toggleDeployBoard'); + modalId: 'enable-review-app-info', + data() { + const { page = '1', scope } = queryToObject(window.location.search); + return { + interval: undefined, + isReviewAppModalVisible: false, + page: parseInt(page, 10), + pageInfo: {}, + scope: Object.values(ENVIRONMENTS_SCOPE).includes(scope) + ? scope + : ENVIRONMENTS_SCOPE.AVAILABLE, + environmentToDelete: {}, + environmentToRollback: {}, + environmentToStop: {}, + environmentToChangeCanary: {}, + weight: 0, + }; }, - - methods: { - toggleDeployBoard(model) { - this.store.toggleDeployBoard(model.id); + computed: { + canSetupReviewApp() { + return this.environmentApp?.reviewApp?.canSetupReviewApp; }, - toggleFolder(folder) { - this.store.toggleFolder(folder); - - if (!folder.isOpen) { - this.fetchChildEnvironments(folder, true); - } + folders() { + return this.environmentApp?.environments?.filter((e) => e.size > 1) ?? []; }, - - fetchChildEnvironments(folder, showLoader = false) { - this.store.updateEnvironmentProp(folder, 'isLoadingFolderContent', showLoader); - - this.service - .getFolderContent(folder.folder_path, folder.state) - .then((response) => this.store.setfolderContent(folder, response.data.environments)) - .then(() => this.store.updateEnvironmentProp(folder, 'isLoadingFolderContent', false)) - .catch(() => { - createFlash({ - message: s__('Environments|An error occurred while fetching the environments.'), - }); - this.store.updateEnvironmentProp(folder, 'isLoadingFolderContent', false); - }); + environments() { + return this.environmentApp?.environments?.filter((e) => e.size === 1) ?? []; }, + hasEnvironments() { + return this.environments.length > 0 || this.folders.length > 0; + }, + availableCount() { + return this.environmentApp?.availableCount; + }, + addEnvironment() { + if (!this.canCreateEnvironment) { + return null; + } - successCallback(resp) { - this.saveData(resp); - - // We need to verify if any folder is open to also update it - const openFolders = this.store.getOpenFolders(); - if (openFolders.length) { - openFolders.forEach((folder) => this.fetchChildEnvironments(folder)); + return { + text: this.$options.i18n.newEnvironmentButtonLabel, + attributes: { + href: this.newEnvironmentPath, + category: 'primary', + variant: 'confirm', + }, + }; + }, + openReviewAppModal() { + if (!this.canSetupReviewApp) { + return null; } + + return { + text: this.$options.i18n.reviewAppButtonLabel, + attributes: { + category: 'secondary', + variant: 'confirm', + }, + }; + }, + stoppedCount() { + return this.environmentApp?.stoppedCount; }, + totalItems() { + return this.pageInfo?.total; + }, + itemsPerPage() { + return this.pageInfo?.perPage; + }, + }, + mounted() { + window.addEventListener('popstate', this.syncPageFromQueryParams); }, + destroyed() { + window.removeEventListener('popstate', this.syncPageFromQueryParams); + this.$apollo.queries.environmentApp.stopPolling(); + }, + methods: { + showReviewAppModal() { + this.isReviewAppModalVisible = true; + }, + setScope(scope) { + this.scope = scope; + this.moveToPage(1); + }, + movePage(direction) { + this.moveToPage(this.pageInfo[`${direction}Page`]); + }, + moveToPage(page) { + this.page = page; + updateHistory({ + url: setUrlParams({ page: this.page }), + title: document.title, + }); + this.resetPolling(); + }, + syncPageFromQueryParams() { + const { page = '1' } = queryToObject(window.location.search); + this.page = parseInt(page, 10); + }, + resetPolling() { + this.$apollo.queries.environmentApp.stopPolling(); + this.$apollo.queries.environmentApp.refetch(); + this.$nextTick(() => { + if (this.interval) { + this.$apollo.queries.environmentApp.startPolling(this.interval); + } + }); + }, + }, + ENVIRONMENTS_SCOPE, }; </script> <template> - <div class="environments-section"> - <stop-environment-modal :environment="environmentInStopModal" /> - <delete-environment-modal :environment="environmentInDeleteModal" /> - <confirm-rollback-modal :environment="environmentInRollbackModal" /> - - <div class="gl-w-full"> - <div class="gl-display-flex gl-flex-direction-column gl-mt-3 gl-md-display-none!"> - <gl-button - v-if="state.reviewAppDetails.can_setup_review_app" - v-gl-modal="$options.modal.id" - data-testid="enable-review-app" - variant="info" - category="secondary" - type="button" - class="gl-mb-3 gl-flex-grow-1" - >{{ $options.i18n.reviewAppButtonLabel }}</gl-button - > - <gl-button - v-if="canCreateEnvironment" - :href="newEnvironmentPath" - data-testid="new-environment" - category="primary" - variant="confirm" - >{{ $options.i18n.newEnvironmentButtonLabel }}</gl-button - > - </div> - <gl-tabs :value="activeTab" content-class="gl-display-none"> - <gl-tab - v-for="(tab, idx) in tabs" - :key="idx" - :title-item-class="`js-environments-tab-${tab.scope}`" - @click="onChangeTab(tab.scope)" - > - <template #title> - <span>{{ tab.name }}</span> - <gl-badge size="sm" class="gl-tab-counter-badge">{{ tab.count }}</gl-badge> - </template> - </gl-tab> - <template #tabs-end> - <div - class="gl-display-none gl-md-display-flex gl-lg-align-items-center gl-lg-flex-direction-row gl-lg-flex-fill-1 gl-lg-justify-content-end gl-lg-mt-0" - > - <gl-button - v-if="state.reviewAppDetails.can_setup_review_app" - v-gl-modal="$options.modal.id" - data-testid="enable-review-app" - variant="info" - category="secondary" - type="button" - class="gl-mb-3 gl-lg-mr-3 gl-lg-mb-0" - >{{ $options.i18n.reviewAppButtonLabel }}</gl-button - > - <gl-button - v-if="canCreateEnvironment" - :href="newEnvironmentPath" - data-testid="new-environment" - category="primary" - variant="confirm" - >{{ $options.i18n.newEnvironmentButtonLabel }}</gl-button - > - </div> + <div> + <enable-review-app-modal + v-if="canSetupReviewApp" + v-model="isReviewAppModalVisible" + :modal-id="$options.modalId" + data-testid="enable-review-app-modal" + /> + <delete-environment-modal :environment="environmentToDelete" graphql /> + <stop-environment-modal :environment="environmentToStop" graphql /> + <confirm-rollback-modal :environment="environmentToRollback" graphql /> + <canary-update-modal :environment="environmentToChangeCanary" :weight="weight" /> + <gl-tabs + :action-secondary="addEnvironment" + :action-primary="openReviewAppModal" + sync-active-tab-with-query-params + query-param-name="scope" + @primary="showReviewAppModal" + > + <gl-tab + :query-param-value="$options.ENVIRONMENTS_SCOPE.AVAILABLE" + @click="setScope($options.ENVIRONMENTS_SCOPE.AVAILABLE)" + > + <template #title> + <span>{{ $options.i18n.available }}</span> + <gl-badge size="sm" class="gl-tab-counter-badge"> + {{ availableCount }} + </gl-badge> </template> - </gl-tabs> - <container - :is-loading="isLoading" - :environments="state.environments" - :pagination="state.paginationInformation" - @onChangePage="onChangePage" + </gl-tab> + <gl-tab + :query-param-value="$options.ENVIRONMENTS_SCOPE.STOPPED" + @click="setScope($options.ENVIRONMENTS_SCOPE.STOPPED)" > - <template v-if="!isLoading && state.environments.length === 0" #empty-state> - <empty-state :help-path="helpPagePath" /> + <template #title> + <span>{{ $options.i18n.stopped }}</span> + <gl-badge size="sm" class="gl-tab-counter-badge"> + {{ stoppedCount }} + </gl-badge> </template> - </container> - <enable-review-app-modal - v-if="state.reviewAppDetails.can_setup_review_app" - :modal-id="$options.modal.id" - data-testid="enable-review-app-modal" + </gl-tab> + </gl-tabs> + <template v-if="hasEnvironments"> + <environment-folder + v-for="folder in folders" + :key="folder.name" + class="gl-mb-3" + :scope="scope" + :nested-environment="folder" + /> + <environment-item + v-for="environment in environments" + :key="environment.name" + class="gl-mb-3 gl-border-gray-100 gl-border-1 gl-border-b-solid" + :environment="environment.latest" + @change="resetPolling" /> - </div> + </template> + <empty-state v-else :help-path="helpPagePath" /> + <gl-pagination + align="center" + :total-items="totalItems" + :per-page="itemsPerPage" + :value="page" + :next="$options.i18n.next" + :prev="$options.i18n.prev" + :label-previous-page="$options.prevPage" + :label-next-page="$options.nextPage" + :label-page="$options.goto" + @next="movePage('next')" + @previous="movePage('previous')" + @input="moveToPage" + /> </div> </template> diff --git a/app/assets/javascripts/environments/components/new_environments_app.vue b/app/assets/javascripts/environments/components/new_environments_app.vue deleted file mode 100644 index 087e9cd2fcd..00000000000 --- a/app/assets/javascripts/environments/components/new_environments_app.vue +++ /dev/null @@ -1,271 +0,0 @@ -<script> -import { GlBadge, GlPagination, GlTab, GlTabs } from '@gitlab/ui'; -import { s__, __, sprintf } from '~/locale'; -import { updateHistory, setUrlParams, queryToObject } from '~/lib/utils/url_utility'; -import environmentAppQuery from '../graphql/queries/environment_app.query.graphql'; -import pollIntervalQuery from '../graphql/queries/poll_interval.query.graphql'; -import pageInfoQuery from '../graphql/queries/page_info.query.graphql'; -import environmentToDeleteQuery from '../graphql/queries/environment_to_delete.query.graphql'; -import environmentToRollbackQuery from '../graphql/queries/environment_to_rollback.query.graphql'; -import environmentToStopQuery from '../graphql/queries/environment_to_stop.query.graphql'; -import environmentToChangeCanaryQuery from '../graphql/queries/environment_to_change_canary.query.graphql'; -import { ENVIRONMENTS_SCOPE } from '../constants'; -import EnvironmentFolder from './new_environment_folder.vue'; -import EnableReviewAppModal from './enable_review_app_modal.vue'; -import StopEnvironmentModal from './stop_environment_modal.vue'; -import EnvironmentItem from './new_environment_item.vue'; -import ConfirmRollbackModal from './confirm_rollback_modal.vue'; -import DeleteEnvironmentModal from './delete_environment_modal.vue'; -import CanaryUpdateModal from './canary_update_modal.vue'; -import EmptyState from './empty_state.vue'; - -export default { - components: { - DeleteEnvironmentModal, - CanaryUpdateModal, - ConfirmRollbackModal, - EmptyState, - EnvironmentFolder, - EnableReviewAppModal, - EnvironmentItem, - StopEnvironmentModal, - GlBadge, - GlPagination, - GlTab, - GlTabs, - }, - apollo: { - environmentApp: { - query: environmentAppQuery, - variables() { - return { - scope: this.scope, - page: this.page ?? 1, - }; - }, - pollInterval() { - return this.interval; - }, - }, - interval: { - query: pollIntervalQuery, - }, - pageInfo: { - query: pageInfoQuery, - }, - environmentToDelete: { - query: environmentToDeleteQuery, - }, - environmentToRollback: { - query: environmentToRollbackQuery, - }, - environmentToStop: { - query: environmentToStopQuery, - }, - environmentToChangeCanary: { - query: environmentToChangeCanaryQuery, - }, - weight: { - query: environmentToChangeCanaryQuery, - }, - }, - inject: ['newEnvironmentPath', 'canCreateEnvironment', 'helpPagePath'], - i18n: { - newEnvironmentButtonLabel: s__('Environments|New environment'), - reviewAppButtonLabel: s__('Environments|Enable review app'), - available: __('Available'), - stopped: __('Stopped'), - prevPage: __('Go to previous page'), - nextPage: __('Go to next page'), - next: __('Next'), - prev: __('Prev'), - goto: (page) => sprintf(__('Go to page %{page}'), { page }), - }, - modalId: 'enable-review-app-info', - data() { - const { page = '1', scope } = queryToObject(window.location.search); - return { - interval: undefined, - isReviewAppModalVisible: false, - page: parseInt(page, 10), - scope: Object.values(ENVIRONMENTS_SCOPE).includes(scope) - ? scope - : ENVIRONMENTS_SCOPE.AVAILABLE, - environmentToDelete: {}, - environmentToRollback: {}, - environmentToStop: {}, - environmentToChangeCanary: {}, - weight: 0, - }; - }, - computed: { - canSetupReviewApp() { - return this.environmentApp?.reviewApp?.canSetupReviewApp; - }, - folders() { - return this.environmentApp?.environments?.filter((e) => e.size > 1) ?? []; - }, - environments() { - return this.environmentApp?.environments?.filter((e) => e.size === 1) ?? []; - }, - hasEnvironments() { - return this.environments.length > 0 || this.folders.length > 0; - }, - availableCount() { - return this.environmentApp?.availableCount; - }, - addEnvironment() { - if (!this.canCreateEnvironment) { - return null; - } - - return { - text: this.$options.i18n.newEnvironmentButtonLabel, - attributes: { - href: this.newEnvironmentPath, - category: 'primary', - variant: 'confirm', - }, - }; - }, - openReviewAppModal() { - if (!this.canSetupReviewApp) { - return null; - } - - return { - text: this.$options.i18n.reviewAppButtonLabel, - attributes: { - category: 'secondary', - variant: 'confirm', - }, - }; - }, - stoppedCount() { - return this.environmentApp?.stoppedCount; - }, - totalItems() { - return this.pageInfo?.total; - }, - itemsPerPage() { - return this.pageInfo?.perPage; - }, - }, - mounted() { - window.addEventListener('popstate', this.syncPageFromQueryParams); - }, - destroyed() { - window.removeEventListener('popstate', this.syncPageFromQueryParams); - this.$apollo.queries.environmentApp.stopPolling(); - }, - methods: { - showReviewAppModal() { - this.isReviewAppModalVisible = true; - }, - setScope(scope) { - this.scope = scope; - this.moveToPage(1); - }, - movePage(direction) { - this.moveToPage(this.pageInfo[`${direction}Page`]); - }, - moveToPage(page) { - this.page = page; - updateHistory({ - url: setUrlParams({ page: this.page }), - title: document.title, - }); - this.resetPolling(); - }, - syncPageFromQueryParams() { - const { page = '1' } = queryToObject(window.location.search); - this.page = parseInt(page, 10); - }, - resetPolling() { - this.$apollo.queries.environmentApp.stopPolling(); - this.$apollo.queries.environmentApp.refetch(); - this.$nextTick(() => { - if (this.interval) { - this.$apollo.queries.environmentApp.startPolling(this.interval); - } - }); - }, - }, - ENVIRONMENTS_SCOPE, -}; -</script> -<template> - <div> - <enable-review-app-modal - v-if="canSetupReviewApp" - v-model="isReviewAppModalVisible" - :modal-id="$options.modalId" - data-testid="enable-review-app-modal" - /> - <delete-environment-modal :environment="environmentToDelete" graphql /> - <stop-environment-modal :environment="environmentToStop" graphql /> - <confirm-rollback-modal :environment="environmentToRollback" graphql /> - <canary-update-modal :environment="environmentToChangeCanary" :weight="weight" /> - <gl-tabs - :action-secondary="addEnvironment" - :action-primary="openReviewAppModal" - sync-active-tab-with-query-params - query-param-name="scope" - @primary="showReviewAppModal" - > - <gl-tab - :query-param-value="$options.ENVIRONMENTS_SCOPE.AVAILABLE" - @click="setScope($options.ENVIRONMENTS_SCOPE.AVAILABLE)" - > - <template #title> - <span>{{ $options.i18n.available }}</span> - <gl-badge size="sm" class="gl-tab-counter-badge"> - {{ availableCount }} - </gl-badge> - </template> - </gl-tab> - <gl-tab - :query-param-value="$options.ENVIRONMENTS_SCOPE.STOPPED" - @click="setScope($options.ENVIRONMENTS_SCOPE.STOPPED)" - > - <template #title> - <span>{{ $options.i18n.stopped }}</span> - <gl-badge size="sm" class="gl-tab-counter-badge"> - {{ stoppedCount }} - </gl-badge> - </template> - </gl-tab> - </gl-tabs> - <template v-if="hasEnvironments"> - <environment-folder - v-for="folder in folders" - :key="folder.name" - class="gl-mb-3" - :scope="scope" - :nested-environment="folder" - /> - <environment-item - v-for="environment in environments" - :key="environment.name" - class="gl-mb-3 gl-border-gray-100 gl-border-1 gl-border-b-solid" - :environment="environment.latest" - @change="resetPolling" - /> - </template> - <empty-state v-else :help-path="helpPagePath" /> - <gl-pagination - align="center" - :total-items="totalItems" - :per-page="itemsPerPage" - :value="page" - :next="$options.i18n.next" - :prev="$options.i18n.prev" - :label-previous-page="$options.prevPage" - :label-next-page="$options.nextPage" - :label-page="$options.goto" - @next="movePage('next')" - @previous="movePage('previous')" - @input="moveToPage" - /> - </div> -</template> diff --git a/app/assets/javascripts/environments/index.js b/app/assets/javascripts/environments/index.js index 5805fe6b1c0..d9a523fd806 100644 --- a/app/assets/javascripts/environments/index.js +++ b/app/assets/javascripts/environments/index.js @@ -1,49 +1,37 @@ import Vue from 'vue'; import VueApollo from 'vue-apollo'; -import createDefaultClient from '~/lib/graphql'; import { parseBoolean } from '../lib/utils/common_utils'; -import Translate from '../vue_shared/translate'; -import environmentsComponent from './components/environments_app.vue'; +import { apolloProvider } from './graphql/client'; +import EnvironmentsApp from './components/environments_app.vue'; -Vue.use(Translate); Vue.use(VueApollo); -const apolloProvider = new VueApollo({ - defaultClient: createDefaultClient(), -}); - export default (el) => { if (el) { + const { + canCreateEnvironment, + endpoint, + newEnvironmentPath, + helpPagePath, + projectPath, + defaultBranchName, + projectId, + } = el.dataset; + return new Vue({ el, - components: { - environmentsComponent, - }, - apolloProvider, + apolloProvider: apolloProvider(endpoint), provide: { - projectPath: el.dataset.projectPath, - projectId: el.dataset.projectId, - defaultBranchName: el.dataset.defaultBranchName, - }, - data() { - const environmentsData = el.dataset; - - return { - endpoint: environmentsData.environmentsDataEndpoint, - newEnvironmentPath: environmentsData.newEnvironmentPath, - helpPagePath: environmentsData.helpPagePath, - canCreateEnvironment: parseBoolean(environmentsData.canCreateEnvironment), - }; + projectPath, + defaultBranchName, + endpoint, + newEnvironmentPath, + helpPagePath, + projectId, + canCreateEnvironment: parseBoolean(canCreateEnvironment), }, - render(createElement) { - return createElement('environments-component', { - props: { - endpoint: this.endpoint, - newEnvironmentPath: this.newEnvironmentPath, - helpPagePath: this.helpPagePath, - canCreateEnvironment: this.canCreateEnvironment, - }, - }); + render(h) { + return h(EnvironmentsApp); }, }); } diff --git a/app/assets/javascripts/environments/new_index.js b/app/assets/javascripts/environments/new_index.js deleted file mode 100644 index d30ceb80f21..00000000000 --- a/app/assets/javascripts/environments/new_index.js +++ /dev/null @@ -1,40 +0,0 @@ -import Vue from 'vue'; -import VueApollo from 'vue-apollo'; -import { parseBoolean } from '../lib/utils/common_utils'; -import { apolloProvider } from './graphql/client'; -import EnvironmentsApp from './components/new_environments_app.vue'; - -Vue.use(VueApollo); - -export default (el) => { - if (el) { - const { - canCreateEnvironment, - endpoint, - newEnvironmentPath, - helpPagePath, - projectPath, - defaultBranchName, - projectId, - } = el.dataset; - - return new Vue({ - el, - apolloProvider: apolloProvider(endpoint), - provide: { - projectPath, - defaultBranchName, - endpoint, - newEnvironmentPath, - helpPagePath, - projectId, - canCreateEnvironment: parseBoolean(canCreateEnvironment), - }, - render(h) { - return h(EnvironmentsApp); - }, - }); - } - - return null; -}; |