diff options
Diffstat (limited to 'app/assets/javascripts/clusters_list/components/agent_empty_state.vue')
-rw-r--r-- | app/assets/javascripts/clusters_list/components/agent_empty_state.vue | 81 |
1 files changed, 35 insertions, 46 deletions
diff --git a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue index 405339b3d36..af44a23b4b3 100644 --- a/app/assets/javascripts/clusters_list/components/agent_empty_state.vue +++ b/app/assets/javascripts/clusters_list/components/agent_empty_state.vue @@ -1,9 +1,16 @@ <script> import { GlButton, GlEmptyState, GlLink, GlSprintf, GlAlert, GlModalDirective } from '@gitlab/ui'; -import { INSTALL_AGENT_MODAL_ID } from '../constants'; +import { helpPagePath } from '~/helpers/help_page_helper'; +import { INSTALL_AGENT_MODAL_ID, I18N_AGENTS_EMPTY_STATE } from '../constants'; export default { + i18n: I18N_AGENTS_EMPTY_STATE, modalId: INSTALL_AGENT_MODAL_ID, + multipleClustersDocsUrl: helpPagePath('user/project/clusters/multiple_kubernetes_clusters'), + installDocsUrl: helpPagePath('administration/clusters/kas'), + getStartedDocsUrl: helpPagePath('user/clusters/agent/index', { + anchor: 'define-a-configuration-repository', + }), components: { GlButton, GlEmptyState, @@ -14,19 +21,17 @@ export default { directives: { GlModalDirective, }, - inject: [ - 'emptyStateImage', - 'projectPath', - 'agentDocsUrl', - 'installDocsUrl', - 'getStartedDocsUrl', - 'integrationDocsUrl', - ], + inject: ['emptyStateImage', 'projectPath'], props: { hasConfigurations: { type: Boolean, required: true, }, + isChildComponent: { + default: false, + required: false, + type: Boolean, + }, }, computed: { repositoryPath() { @@ -37,22 +42,19 @@ export default { </script> <template> - <gl-empty-state - :svg-path="emptyStateImage" - :title="s__('ClusterAgents|Integrate Kubernetes with a GitLab Agent')" - class="empty-state--agent" - > + <gl-empty-state :svg-path="emptyStateImage" title="" class="agents-empty-state"> <template #description> - <p class="mw-460 gl-mx-auto"> - <gl-sprintf - :message=" - s__( - 'ClusterAgents|The GitLab Kubernetes Agent allows an Infrastructure as Code, GitOps approach to integrating Kubernetes clusters with GitLab. %{linkStart}Learn more.%{linkEnd}', - ) - " - > + <p class="mw-460 gl-mx-auto gl-text-left"> + {{ $options.i18n.introText }} + </p> + <p class="mw-460 gl-mx-auto gl-text-left"> + <gl-sprintf :message="$options.i18n.multipleClustersText"> <template #link="{ content }"> - <gl-link :href="agentDocsUrl" target="_blank" data-testid="agent-docs-link"> + <gl-link + :href="$options.multipleClustersDocsUrl" + target="_blank" + data-testid="multiple-clusters-docs-link" + > {{ content }} </gl-link> </template> @@ -60,19 +62,9 @@ export default { </p> <p class="mw-460 gl-mx-auto"> - <gl-sprintf - :message=" - s__( - 'ClusterAgents|The GitLab Agent also requires %{linkStart}enabling the Agent Server%{linkEnd}', - ) - " - > - <template #link="{ content }"> - <gl-link :href="installDocsUrl" target="_blank" data-testid="install-docs-link"> - {{ content }} - </gl-link> - </template> - </gl-sprintf> + <gl-link :href="$options.installDocsUrl" target="_blank" data-testid="install-docs-link"> + {{ $options.i18n.learnMoreText }} + </gl-link> </p> <gl-alert @@ -81,24 +73,20 @@ export default { class="gl-mb-5 text-left" :dismissible="false" > - {{ - s__( - 'ClusterAgents|To install an Agent you should create an agent directory in the Repository first. We recommend that you add the Agent configuration to the directory before you start the installation process.', - ) - }} + {{ $options.i18n.warningText }} <template #actions> <gl-button category="primary" variant="info" - :href="getStartedDocsUrl" + :href="$options.getStartedDocsUrl" target="_blank" class="gl-ml-0!" > - {{ s__('ClusterAgents|Read more about getting started') }} + {{ $options.i18n.readMoreText }} </gl-button> <gl-button category="secondary" variant="info" :href="repositoryPath"> - {{ s__('ClusterAgents|Go to the repository') }} + {{ $options.i18n.repositoryButtonText }} </gl-button> </template> </gl-alert> @@ -106,13 +94,14 @@ export default { <template #actions> <gl-button + v-if="!isChildComponent" v-gl-modal-directive="$options.modalId" :disabled="!hasConfigurations" data-testid="integration-primary-button" category="primary" - variant="success" + variant="confirm" > - {{ s__('ClusterAgents|Integrate with the GitLab Agent') }} + {{ $options.i18n.primaryButtonText }} </gl-button> </template> </gl-empty-state> |