diff options
Diffstat (limited to 'app/assets/javascripts/clusters_list/components')
10 files changed, 300 insertions, 174 deletions
diff --git a/app/assets/javascripts/clusters_list/components/agent_table.vue b/app/assets/javascripts/clusters_list/components/agent_table.vue index 61c4904aacf..1144ce68e2c 100644 --- a/app/assets/javascripts/clusters_list/components/agent_table.vue +++ b/app/assets/javascripts/clusters_list/components/agent_table.vue @@ -1,5 +1,13 @@ <script> -import { GlLink, GlTable, GlIcon, GlSprintf, GlTooltip, GlPopover } from '@gitlab/ui'; +import { + GlLink, + GlTable, + GlIcon, + GlSprintf, + GlTooltip, + GlTooltipDirective, + GlPopover, +} from '@gitlab/ui'; import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; import timeagoMixin from '~/vue_shared/mixins/timeago'; import { helpPagePath } from '~/helpers/help_page_helper'; @@ -19,12 +27,18 @@ export default { TimeAgoTooltip, DeleteAgentButton, }, + directives: { + GlTooltip: GlTooltipDirective, + }, mixins: [timeagoMixin], AGENT_STATUSES, troubleshootingLink: helpPagePath('user/clusters/agent/troubleshooting'), versionUpdateLink: helpPagePath('user/clusters/agent/install/index', { anchor: 'update-the-agent-version', }), + configHelpLink: helpPagePath('user/clusters/agent/install/index', { + anchor: 'create-an-agent-without-configuration-file', + }), inject: ['gitlabVersion'], props: { agents: { @@ -256,7 +270,16 @@ export default { {{ getAgentConfigPath(item.name) }} </gl-link> - <span v-else>{{ getAgentConfigPath(item.name) }}</span> + <span v-else + >{{ $options.i18n.defaultConfigText }} + <gl-link + v-gl-tooltip + :href="$options.configHelpLink" + :title="$options.i18n.defaultConfigTooltip" + :aria-label="$options.i18n.defaultConfigTooltip" + class="gl-vertical-align-middle" + ><gl-icon name="question" :size="14" /></gl-link + ></span> </span> </template> diff --git a/app/assets/javascripts/clusters_list/components/agent_token.vue b/app/assets/javascripts/clusters_list/components/agent_token.vue new file mode 100644 index 00000000000..eab3fc3ed63 --- /dev/null +++ b/app/assets/javascripts/clusters_list/components/agent_token.vue @@ -0,0 +1,109 @@ +<script> +import { GlAlert, GlFormInputGroup, GlLink, GlSprintf } from '@gitlab/ui'; +import { helpPagePath } from '~/helpers/help_page_helper'; +import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue'; +import CodeBlock from '~/vue_shared/components/code_block.vue'; +import { generateAgentRegistrationCommand } from '../clusters_util'; +import { I18N_AGENT_TOKEN } from '../constants'; + +export default { + i18n: I18N_AGENT_TOKEN, + basicInstallPath: helpPagePath('user/clusters/agent/install/index', { + anchor: 'install-the-agent-into-the-cluster', + }), + advancedInstallPath: helpPagePath('user/clusters/agent/install/index', { + anchor: 'advanced-installation', + }), + components: { + GlAlert, + CodeBlock, + GlFormInputGroup, + GlLink, + GlSprintf, + ModalCopyButton, + }, + inject: ['kasAddress'], + props: { + agentToken: { + required: true, + type: String, + }, + modalId: { + required: true, + type: String, + }, + }, + computed: { + agentRegistrationCommand() { + return generateAgentRegistrationCommand(this.agentToken, this.kasAddress); + }, + }, +}; +</script> + +<template> + <div> + <p> + <strong>{{ $options.i18n.tokenTitle }}</strong> + </p> + + <p> + <gl-sprintf :message="$options.i18n.tokenBody"> + <template #link="{ content }"> + <gl-link :href="$options.basicInstallPath" target="_blank"> {{ content }}</gl-link> + </template> + </gl-sprintf> + </p> + + <p> + <gl-alert + :title="$options.i18n.tokenSingleUseWarningTitle" + variant="warning" + :dismissible="false" + > + {{ $options.i18n.tokenSingleUseWarningBody }} + </gl-alert> + </p> + + <p> + <gl-form-input-group readonly :value="agentToken" :select-on-click="true"> + <template #append> + <modal-copy-button + :text="agentToken" + :title="$options.i18n.copyToken" + :modal-id="modalId" + /> + </template> + </gl-form-input-group> + </p> + + <p> + <strong>{{ $options.i18n.basicInstallTitle }}</strong> + </p> + + <p> + {{ $options.i18n.basicInstallBody }} + </p> + + <p class="gl-display-flex gl-align-items-flex-start"> + <code-block class="gl-w-full" :code="agentRegistrationCommand" /> + <modal-copy-button + :title="$options.i18n.copyCommand" + :text="agentRegistrationCommand" + :modal-id="modalId" + /> + </p> + + <p> + <strong>{{ $options.i18n.advancedInstallTitle }}</strong> + </p> + + <p> + <gl-sprintf :message="$options.i18n.advancedInstallBody"> + <template #link="{ content }"> + <gl-link :href="$options.advancedInstallPath" target="_blank"> {{ content }}</gl-link> + </template> + </gl-sprintf> + </p> + </div> +</template> diff --git a/app/assets/javascripts/clusters_list/components/agents.vue b/app/assets/javascripts/clusters_list/components/agents.vue index bf096f53e9d..70b9b8ac3c9 100644 --- a/app/assets/javascripts/clusters_list/components/agents.vue +++ b/app/assets/javascripts/clusters_list/components/agents.vue @@ -116,9 +116,6 @@ export default { }, }, methods: { - reloadAgents() { - this.$apollo.queries.agents.refetch(); - }, nextPage() { this.cursor = { first: MAX_LIST_COUNT, diff --git a/app/assets/javascripts/clusters_list/components/available_agents_dropdown.vue b/app/assets/javascripts/clusters_list/components/available_agents_dropdown.vue index 1630d0d5c92..662cf2a7e36 100644 --- a/app/assets/javascripts/clusters_list/components/available_agents_dropdown.vue +++ b/app/assets/javascripts/clusters_list/components/available_agents_dropdown.vue @@ -1,5 +1,11 @@ <script> -import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; +import { + GlDropdown, + GlDropdownItem, + GlDropdownDivider, + GlSearchBoxByType, + GlSprintf, +} from '@gitlab/ui'; import { I18N_AVAILABLE_AGENTS_DROPDOWN } from '../constants'; export default { @@ -8,6 +14,9 @@ export default { components: { GlDropdown, GlDropdownItem, + GlDropdownDivider, + GlSearchBoxByType, + GlSprintf, }, props: { isRegistering: { @@ -22,6 +31,7 @@ export default { data() { return { selectedAgent: null, + searchTerm: '', }; }, computed: { @@ -34,22 +44,45 @@ export default { return this.selectedAgent; }, + shouldRenderCreateButton() { + return this.searchTerm && !this.availableAgents.includes(this.searchTerm); + }, + filteredResults() { + const lowerCasedSearchTerm = this.searchTerm.toLowerCase(); + return this.availableAgents.filter((resultString) => + resultString.toLowerCase().includes(lowerCasedSearchTerm), + ); + }, }, methods: { selectAgent(agent) { this.$emit('agentSelected', agent); this.selectedAgent = agent; + this.clearSearch(); }, isSelected(agent) { return this.selectedAgent === agent; }, + clearSearch() { + this.searchTerm = ''; + }, + focusSearch() { + this.$refs.searchInput.focusInput(); + }, + handleShow() { + this.clearSearch(); + this.focusSearch(); + }, }, }; </script> <template> - <gl-dropdown :text="dropdownText" :loading="isRegistering"> + <gl-dropdown :text="dropdownText" :loading="isRegistering" @shown="handleShow"> + <template #header> + <gl-search-box-by-type ref="searchInput" v-model.trim="searchTerm" /> + </template> <gl-dropdown-item - v-for="agent in availableAgents" + v-for="agent in filteredResults" :key="agent" :is-checked="isSelected(agent)" is-check-item @@ -57,5 +90,16 @@ export default { > {{ agent }} </gl-dropdown-item> + <gl-dropdown-item v-if="!filteredResults.length" ref="noMatchingResults">{{ + $options.i18n.noResults + }}</gl-dropdown-item> + <template v-if="shouldRenderCreateButton"> + <gl-dropdown-divider /> + <gl-dropdown-item data-testid="create-config-button" @click="selectAgent(searchTerm)"> + <gl-sprintf :message="$options.i18n.createButton"> + <template #searchTerm>{{ searchTerm }}</template> + </gl-sprintf> + </gl-dropdown-item> + </template> </gl-dropdown> </template> diff --git a/app/assets/javascripts/clusters_list/components/clusters.vue b/app/assets/javascripts/clusters_list/components/clusters.vue index 7fb3aa3ff7e..59cfdde731d 100644 --- a/app/assets/javascripts/clusters_list/components/clusters.vue +++ b/app/assets/javascripts/clusters_list/components/clusters.vue @@ -6,7 +6,7 @@ import { GlPagination, GlDeprecatedSkeletonLoading as GlSkeletonLoading, GlSprintf, - GlTable, + GlTableLite, GlTooltipDirective, } from '@gitlab/ui'; import { mapState, mapActions } from 'vuex'; @@ -27,7 +27,7 @@ export default { GlPagination, GlSkeletonLoading, GlSprintf, - GlTable, + GlTableLite, NodeErrorHelpText, ClustersEmptyState, }, @@ -229,7 +229,7 @@ export default { <section v-else> <ancestor-notice /> - <gl-table + <gl-table-lite v-if="hasClusters" :items="clusters" :fields="fields" @@ -326,7 +326,7 @@ export default { {{ value }} </gl-badge> </template> - </gl-table> + </gl-table-lite> <clusters-empty-state v-else :is-child-component="isChildComponent" /> diff --git a/app/assets/javascripts/clusters_list/components/clusters_actions.vue b/app/assets/javascripts/clusters_list/components/clusters_actions.vue index 5b8dc74b84f..ccb973f1eb8 100644 --- a/app/assets/javascripts/clusters_list/components/clusters_actions.vue +++ b/app/assets/javascripts/clusters_list/components/clusters_actions.vue @@ -1,5 +1,6 @@ <script> import { + GlButton, GlDropdown, GlDropdownItem, GlModalDirective, @@ -14,6 +15,7 @@ export default { i18n: CLUSTERS_ACTIONS, INSTALL_AGENT_MODAL_ID, components: { + GlButton, GlDropdown, GlDropdownItem, GlDropdownDivider, @@ -23,11 +25,27 @@ export default { GlModalDirective, GlTooltip: GlTooltipDirective, }, - inject: ['newClusterPath', 'addClusterPath', 'canAddCluster'], + inject: [ + 'newClusterPath', + 'addClusterPath', + 'canAddCluster', + 'displayClusterAgents', + 'certificateBasedClustersEnabled', + ], computed: { tooltip() { - const { connectWithAgent, dropdownDisabledHint } = this.$options.i18n; - return this.canAddCluster ? connectWithAgent : dropdownDisabledHint; + const { connectWithAgent, connectExistingCluster, dropdownDisabledHint } = this.$options.i18n; + + if (!this.canAddCluster) { + return dropdownDisabledHint; + } else if (this.displayClusterAgents) { + return connectWithAgent; + } + + return connectExistingCluster; + }, + shouldTriggerModal() { + return this.canAddCluster && this.displayClusterAgents; }, }, }; @@ -36,25 +54,29 @@ export default { <template> <div class="nav-controls gl-ml-auto"> <gl-dropdown + v-if="certificateBasedClustersEnabled" ref="dropdown" - v-gl-modal-directive="canAddCluster && $options.INSTALL_AGENT_MODAL_ID" + v-gl-modal-directive="shouldTriggerModal && $options.INSTALL_AGENT_MODAL_ID" v-gl-tooltip="tooltip" category="primary" variant="confirm" :text="$options.i18n.actionsButton" :disabled="!canAddCluster" - split + :split="displayClusterAgents" right > - <gl-dropdown-section-header>{{ $options.i18n.agent }}</gl-dropdown-section-header> - <gl-dropdown-item - v-gl-modal-directive="$options.INSTALL_AGENT_MODAL_ID" - data-testid="connect-new-agent-link" - > - {{ $options.i18n.connectWithAgent }} - </gl-dropdown-item> - <gl-dropdown-divider /> - <gl-dropdown-section-header>{{ $options.i18n.certificate }}</gl-dropdown-section-header> + <template v-if="displayClusterAgents"> + <gl-dropdown-section-header>{{ $options.i18n.agent }}</gl-dropdown-section-header> + <gl-dropdown-item + v-gl-modal-directive="$options.INSTALL_AGENT_MODAL_ID" + data-testid="connect-new-agent-link" + > + {{ $options.i18n.connectWithAgent }} + </gl-dropdown-item> + <gl-dropdown-divider /> + <gl-dropdown-section-header>{{ $options.i18n.certificate }}</gl-dropdown-section-header> + </template> + <gl-dropdown-item :href="newClusterPath" data-testid="new-cluster-link" @click.stop> {{ $options.i18n.createNewCluster }} </gl-dropdown-item> @@ -62,5 +84,15 @@ export default { {{ $options.i18n.connectExistingCluster }} </gl-dropdown-item> </gl-dropdown> + <gl-button + v-else + v-gl-modal-directive="$options.INSTALL_AGENT_MODAL_ID" + v-gl-tooltip="tooltip" + :disabled="!canAddCluster" + category="primary" + variant="confirm" + > + {{ $options.i18n.connectWithAgent }} + </gl-button> </div> </template> diff --git a/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue b/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue index ce601de57bd..76bec05cfc7 100644 --- a/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue +++ b/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue @@ -13,7 +13,7 @@ export default { GlSprintf, GlAlert, }, - inject: ['emptyStateHelpText', 'clustersEmptyStateImage', 'newClusterPath'], + inject: ['emptyStateHelpText', 'clustersEmptyStateImage', 'addClusterPath'], props: { isChildComponent: { default: false, @@ -57,7 +57,7 @@ export default { category="primary" variant="confirm" :disabled="!canAddCluster" - :href="newClusterPath" + :href="addClusterPath" > {{ $options.i18n.buttonText }} </gl-button> diff --git a/app/assets/javascripts/clusters_list/components/clusters_main_view.vue b/app/assets/javascripts/clusters_list/components/clusters_main_view.vue index 7dd5ece9b8e..aab6d3dc1f0 100644 --- a/app/assets/javascripts/clusters_list/components/clusters_main_view.vue +++ b/app/assets/javascripts/clusters_list/components/clusters_main_view.vue @@ -3,11 +3,13 @@ import { GlTabs, GlTab } from '@gitlab/ui'; import Tracking from '~/tracking'; import { CLUSTERS_TABS, + CERTIFICATE_TAB, MAX_CLUSTERS_LIST, MAX_LIST_COUNT, AGENT, EVENT_LABEL_TABS, EVENT_ACTIONS_CHANGE, + AGENT_TAB, } from '../constants'; import Agents from './agents.vue'; import InstallAgentModal from './install_agent_modal.vue'; @@ -27,8 +29,8 @@ export default { Agents, InstallAgentModal, }, - CLUSTERS_TABS, mixins: [trackingMixin], + inject: ['displayClusterAgents', 'certificateBasedClustersEnabled'], props: { defaultBranchName: { default: '.noBranch', @@ -42,13 +44,30 @@ export default { maxAgents: MAX_CLUSTERS_LIST, }; }, + computed: { + availableTabs() { + const clusterTabs = this.displayClusterAgents ? CLUSTERS_TABS : [CERTIFICATE_TAB]; + return this.certificateBasedClustersEnabled ? clusterTabs : [AGENT_TAB]; + }, + }, + watch: { + selectedTabIndex: { + handler(val) { + this.onTabChange(val); + }, + immediate: true, + }, + }, methods: { - onTabChange(tabName) { - this.selectedTabIndex = CLUSTERS_TABS.findIndex((tab) => tab.queryParamValue === tabName); - this.maxAgents = tabName === AGENT ? MAX_LIST_COUNT : MAX_CLUSTERS_LIST; + setSelectedTab(tabName) { + this.selectedTabIndex = this.availableTabs.findIndex( + (tab) => tab.queryParamValue === tabName, + ); }, - trackTabChange(tab) { - const tabName = CLUSTERS_TABS[tab].queryParamValue; + onTabChange(tab) { + const tabName = this.availableTabs[tab].queryParamValue; + + this.maxAgents = tabName === AGENT ? MAX_LIST_COUNT : MAX_CLUSTERS_LIST; this.track(EVENT_ACTIONS_CHANGE, { property: tabName }); }, }, @@ -61,10 +80,9 @@ export default { sync-active-tab-with-query-params nav-class="gl-flex-grow-1 gl-align-items-center" lazy - @input="trackTabChange" > <gl-tab - v-for="(tab, idx) in $options.CLUSTERS_TABS" + v-for="(tab, idx) in availableTabs" :key="idx" :title="tab.title" :query-param-value="tab.queryParamValue" @@ -74,7 +92,7 @@ export default { :is="tab.component" :default-branch-name="defaultBranchName" data-testid="clusters-tab-component" - @changeTab="onTabChange" + @changeTab="setSelectedTab" /> </gl-tab> diff --git a/app/assets/javascripts/clusters_list/components/delete_agent_button.vue b/app/assets/javascripts/clusters_list/components/delete_agent_button.vue index 6588d304d5c..6f2c353a67b 100644 --- a/app/assets/javascripts/clusters_list/components/delete_agent_button.vue +++ b/app/assets/javascripts/clusters_list/components/delete_agent_button.vue @@ -116,7 +116,7 @@ export default { this.$toast.show(this.error || successMessage); - this.$refs.modal.hide(); + this.$refs.modal?.hide(); } }, deleteAgentMutation() { diff --git a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue index 8fc0a66cd7e..ae0affe4c8b 100644 --- a/app/assets/javascripts/clusters_list/components/install_agent_modal.vue +++ b/app/assets/javascripts/clusters_list/components/install_agent_modal.vue @@ -1,18 +1,7 @@ <script> -import { - GlAlert, - GlButton, - GlFormGroup, - GlFormInputGroup, - GlLink, - GlModal, - GlSprintf, -} from '@gitlab/ui'; +import { GlAlert, GlButton, GlFormGroup, GlLink, GlModal, GlSprintf } from '@gitlab/ui'; import { helpPagePath } from '~/helpers/help_page_helper'; -import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue'; -import CodeBlock from '~/vue_shared/components/code_block.vue'; import Tracking from '~/tracking'; -import { generateAgentRegistrationCommand } from '../clusters_util'; import { INSTALL_AGENT_MODAL_ID, I18N_AGENT_MODAL, @@ -30,39 +19,32 @@ import createAgentToken from '../graphql/mutations/create_agent_token.mutation.g import getAgentsQuery from '../graphql/queries/get_agents.query.graphql'; import agentConfigurations from '../graphql/queries/agent_configurations.query.graphql'; import AvailableAgentsDropdown from './available_agents_dropdown.vue'; +import AgentToken from './agent_token.vue'; const trackingMixin = Tracking.mixin({ label: EVENT_LABEL_MODAL }); export default { modalId: INSTALL_AGENT_MODAL_ID, + i18n: I18N_AGENT_MODAL, EVENT_ACTIONS_OPEN, EVENT_ACTIONS_CLICK, EVENT_LABEL_MODAL, - basicInstallPath: helpPagePath('user/clusters/agent/install/index', { - anchor: 'install-the-agent-into-the-cluster', - }), - advancedInstallPath: helpPagePath('user/clusters/agent/install/index', { - anchor: 'advanced-installation', - }), enableKasPath: helpPagePath('administration/clusters/kas'), - installAgentPath: helpPagePath('user/clusters/agent/install/index'), registerAgentPath: helpPagePath('user/clusters/agent/install/index', { anchor: 'register-an-agent-with-gitlab', }), components: { AvailableAgentsDropdown, - CodeBlock, + AgentToken, GlAlert, GlButton, GlFormGroup, - GlFormInputGroup, GlLink, GlModal, GlSprintf, - ModalCopyButton, }, mixins: [trackingMixin], - inject: ['projectPath', 'kasAddress', 'emptyStateImage'], + inject: ['projectPath', 'emptyStateImage'], props: { defaultBranchName: { default: '.noBranch', @@ -109,13 +91,10 @@ export default { return !this.registering && this.agentName !== null; }, canCancel() { - return !this.registered && !this.registering && this.isAgentRegistrationModal; + return !this.registered && !this.registering && !this.kasDisabled; }, canRegister() { - return !this.registered && this.isAgentRegistrationModal; - }, - agentRegistrationCommand() { - return generateAgentRegistrationCommand(this.agentToken, this.kasAddress); + return !this.registered && !this.kasDisabled; }, getAgentsQueryVariables() { return { @@ -125,32 +104,20 @@ export default { projectPath: this.projectPath, }; }, - i18n() { - return I18N_AGENT_MODAL[this.modalType]; - }, + repositoryPath() { return `/${this.projectPath}`; }, modalType() { - return !this.availableAgents?.length && !this.registered - ? MODAL_TYPE_EMPTY - : MODAL_TYPE_REGISTER; + return this.kasDisabled ? MODAL_TYPE_EMPTY : MODAL_TYPE_REGISTER; }, modalSize() { - return this.isEmptyStateModal ? 'sm' : 'md'; - }, - isEmptyStateModal() { - return this.modalType === MODAL_TYPE_EMPTY; - }, - isAgentRegistrationModal() { - return this.modalType === MODAL_TYPE_REGISTER; - }, - isKasEnabledInEmptyStateModal() { - return this.isEmptyStateModal && !this.kasDisabled; + return this.kasDisabled ? 'sm' : 'md'; }, }, methods: { setAgentName(name) { + this.error = null; this.agentName = name; this.track(EVENT_ACTIONS_SELECT); }, @@ -194,13 +161,13 @@ export default { return createClusterAgent; }); }, - createAgentTokenMutation(agendId) { + createAgentTokenMutation(agentId) { return this.$apollo .mutate({ mutation: createAgentToken, variables: { input: { - clusterAgentId: agendId, + clusterAgentId: agentId, name: this.agentName, }, }, @@ -244,7 +211,7 @@ export default { if (error) { this.error = error.message; } else { - this.error = this.i18n.unknownError; + this.error = this.$options.i18n.unknownError; } } finally { this.registering = false; @@ -258,22 +225,21 @@ export default { <gl-modal ref="modal" :modal-id="$options.modalId" - :title="i18n.modalTitle" + :title="$options.i18n.modalTitle" :size="modalSize" static lazy @hidden="resetModal" @show="track($options.EVENT_ACTIONS_OPEN, { property: modalType })" > - <template v-if="isAgentRegistrationModal"> + <template v-if="!kasDisabled"> <template v-if="!registered"> - <p> - <strong>{{ i18n.selectAgentTitle }}</strong> - </p> - - <p class="gl-mb-0">{{ i18n.selectAgentBody }}</p> - <p> - <gl-link :href="$options.registerAgentPath"> {{ i18n.learnMoreLink }}</gl-link> + <p class="gl-mb-0"> + <gl-sprintf :message="$options.i18n.modalBody"> + <template #link="{ content }"> + <gl-link :href="repositoryPath">{{ content }}</gl-link> + </template> + </gl-sprintf> </p> <form> @@ -287,90 +253,36 @@ export default { </gl-form-group> </form> - <p v-if="error"> - <gl-alert :title="i18n.registrationErrorTitle" variant="danger" :dismissible="false"> - {{ error }} - </gl-alert> - </p> - </template> - - <template v-else> - <p> - <strong>{{ i18n.tokenTitle }}</strong> - </p> - <p> - <gl-sprintf :message="i18n.tokenBody"> - <template #link="{ content }"> - <gl-link :href="$options.basicInstallPath" target="_blank"> {{ content }}</gl-link> - </template> - </gl-sprintf> + <gl-link :href="$options.registerAgentPath"> {{ $options.i18n.learnMoreLink }}</gl-link> </p> - <p> - <gl-alert :title="i18n.tokenSingleUseWarningTitle" variant="warning" :dismissible="false"> - {{ i18n.tokenSingleUseWarningBody }} + <p v-if="error"> + <gl-alert + :title="$options.i18n.registrationErrorTitle" + variant="danger" + :dismissible="false" + > + {{ error }} </gl-alert> </p> - - <p> - <gl-form-input-group readonly :value="agentToken" :select-on-click="true"> - <template #append> - <modal-copy-button - :text="agentToken" - :title="i18n.copyToken" - :modal-id="$options.modalId" - /> - </template> - </gl-form-input-group> - </p> - - <p> - <strong>{{ i18n.basicInstallTitle }}</strong> - </p> - - <p> - {{ i18n.basicInstallBody }} - </p> - - <p> - <code-block :code="agentRegistrationCommand" /> - </p> - - <p> - <strong>{{ i18n.advancedInstallTitle }}</strong> - </p> - - <p> - <gl-sprintf :message="i18n.advancedInstallBody"> - <template #link="{ content }"> - <gl-link :href="$options.advancedInstallPath" target="_blank"> {{ content }}</gl-link> - </template> - </gl-sprintf> - </p> </template> + + <agent-token v-else :agent-token="agentToken" :modal-id="$options.modalId" /> </template> <template v-else> <div class="gl-text-center gl-mb-5"> - <img :alt="i18n.altText" :src="emptyStateImage" height="100" /> + <img :alt="$options.i18n.altText" :src="emptyStateImage" height="100" /> </div> <p v-if="kasDisabled"> - <gl-sprintf :message="i18n.enableKasText"> + <gl-sprintf :message="$options.i18n.enableKasText"> <template #link="{ content }"> <gl-link :href="$options.enableKasPath">{{ content }}</gl-link> </template> </gl-sprintf> </p> - - <p v-else> - <gl-sprintf :message="i18n.modalBody"> - <template #link="{ content }"> - <gl-link :href="$options.installAgentPath">{{ content }}</gl-link> - </template> - </gl-sprintf> - </p> </template> <template #modal-footer> @@ -382,7 +294,7 @@ export default { :data-track-label="$options.EVENT_LABEL_MODAL" data-track-property="close" @click="closeModal" - >{{ i18n.close }} + >{{ $options.i18n.close }} </gl-button> <gl-button @@ -391,7 +303,7 @@ export default { :data-track-label="$options.EVENT_LABEL_MODAL" data-track-property="cancel" @click="closeModal" - >{{ i18n.cancel }} + >{{ $options.i18n.cancel }} </gl-button> <gl-button @@ -403,25 +315,16 @@ export default { :data-track-label="$options.EVENT_LABEL_MODAL" data-track-property="register" @click="registerAgent" - >{{ i18n.registerAgentButton }} + >{{ $options.i18n.registerAgentButton }} </gl-button> <gl-button - v-if="isEmptyStateModal" + v-if="kasDisabled" :data-track-action="$options.EVENT_ACTIONS_CLICK" :data-track-label="$options.EVENT_LABEL_MODAL" data-track-property="done" @click="closeModal" - >{{ i18n.done }} - </gl-button> - - <gl-button - v-if="isKasEnabledInEmptyStateModal" - :href="repositoryPath" - variant="confirm" - category="primary" - data-testid="agent-primary-button" - >{{ i18n.primaryButton }} + >{{ $options.i18n.close }} </gl-button> </template> </gl-modal> |