Commit 3288a0f5 authored by Jose Ivan Vargas's avatar Jose Ivan Vargas

Merge branch 'emilyring-cluster-callout-migration' into 'master'

Cluster ancestor notice migration

See merge request gitlab-org/gitlab!35375
parents df50254f 8ebc7e31
<script>
import { GlLink, GlSprintf } from '@gitlab/ui';
import { mapState } from 'vuex';
export default {
components: {
GlLink,
GlSprintf,
},
computed: {
...mapState(['ancestorHelperPath', 'hasAncestorClusters']),
},
};
</script>
<template>
<div v-if="hasAncestorClusters" class="bs-callout bs-callout-info">
<p>
<gl-sprintf
:message="
s__(
'ClusterIntegration|Clusters are utilized by selecting the nearest ancestor with a matching environment scope. For example, project clusters will override group clusters. %{linkStart}More information%{linkEnd}',
)
"
>
<template #link="{ content }">
<gl-link :href="ancestorHelperPath">
<strong>{{ content }}</strong>
</gl-link>
</template>
</gl-sprintf>
</p>
</div>
</template>
......@@ -9,6 +9,7 @@ import {
GlSprintf,
GlTable,
} from '@gitlab/ui';
import AncestorNotice from './ancestor_notice.vue';
import tooltip from '~/vue_shared/directives/tooltip';
import { CLUSTER_TYPES, STATUSES } from '../constants';
import { __, sprintf } from '~/locale';
......@@ -17,6 +18,7 @@ export default {
nodeMemoryText: __('%{totalMemory} (%{freeSpacePercentage}%{percentSymbol} free)'),
nodeCpuText: __('%{totalCpu} (%{freeSpacePercentage}%{percentSymbol} free)'),
components: {
AncestorNotice,
GlBadge,
GlLink,
GlLoadingIcon,
......@@ -195,6 +197,8 @@ export default {
<gl-loading-icon v-if="loadingClusters" size="md" class="gl-mt-3" />
<section v-else>
<ancestor-notice />
<gl-table :items="clusters" :fields="fields" stacked="md" class="qa-clusters-table">
<template #cell(name)="{ item }">
<div :class="[contentAlignClasses, 'js-status']">
......
export default (initialState = {}) => ({
ancestorHelperPath: initialState.ancestorHelpPath,
endpoint: initialState.endpoint,
hasAncestorClusters: false,
clusters: [],
......
......@@ -18,6 +18,7 @@ module ClustersHelper
def js_clusters_list_data(path = nil)
{
ancestor_help_path: help_page_path('user/group/clusters/index', anchor: 'cluster-precedence'),
endpoint: path,
img_tags: {
aws: { path: image_path('illustrations/logos/amazon_eks.svg'), text: s_('ClusterIntegration|Amazon EKS') },
......
......@@ -12,15 +12,14 @@
= s_('ClusterIntegration|Kubernetes clusters can be used to deploy applications and to provide Review Apps for this project')
= render 'clusters/clusters/buttons'
- if @has_ancestor_clusters
.bs-callout.bs-callout-info
= s_('ClusterIntegration|Clusters are utilized by selecting the nearest ancestor with a matching environment scope. For example, project clusters will override group clusters.')
%strong
= link_to _('More information'), help_page_path('user/group/clusters/index', anchor: 'cluster-precedence')
- if Feature.enabled?(:clusters_list_redesign)
#js-clusters-list-app{ data: js_clusters_list_data(clusterable.index_path(format: :json)) }
- else
- if @has_ancestor_clusters
.bs-callout.bs-callout-info
= s_('ClusterIntegration|Clusters are utilized by selecting the nearest ancestor with a matching environment scope. For example, project clusters will override group clusters.')
%strong
= link_to _('More information'), help_page_path('user/group/clusters/index', anchor: 'cluster-precedence')
.clusters-table.js-clusters-list
.gl-responsive-table-row.table-row-header{ role: "row" }
.table-section.section-60{ role: "rowheader" }
......
......@@ -5054,6 +5054,9 @@ msgstr ""
msgid "ClusterIntegration|Clusters are utilized by selecting the nearest ancestor with a matching environment scope. For example, project clusters will override group clusters."
msgstr ""
msgid "ClusterIntegration|Clusters are utilized by selecting the nearest ancestor with a matching environment scope. For example, project clusters will override group clusters. %{linkStart}More information%{linkEnd}"
msgstr ""
msgid "ClusterIntegration|Copy API URL"
msgstr ""
......
import AncestorNotice from '~/clusters_list/components/ancestor_notice.vue';
import ClusterStore from '~/clusters_list/store';
import { shallowMount } from '@vue/test-utils';
import { GlLink, GlSprintf } from '@gitlab/ui';
describe('ClustersAncestorNotice', () => {
let store;
let wrapper;
const createWrapper = () => {
store = ClusterStore({ ancestorHelperPath: '/some/ancestor/path' });
wrapper = shallowMount(AncestorNotice, { store, stubs: { GlSprintf } });
return wrapper.vm.$nextTick();
};
beforeEach(() => {
return createWrapper();
});
afterEach(() => {
wrapper.destroy();
});
describe('when cluster does not have ancestors', () => {
beforeEach(() => {
store.state.hasAncestorClusters = false;
return wrapper.vm.$nextTick();
});
it('displays no notice', () => {
expect(wrapper.isEmpty()).toBe(true);
});
});
describe('when cluster has ancestors', () => {
beforeEach(() => {
store.state.hasAncestorClusters = true;
return wrapper.vm.$nextTick();
});
it('displays notice text', () => {
expect(wrapper.text()).toContain(
'Clusters are utilized by selecting the nearest ancestor with a matching environment scope. For example, project clusters will override group clusters.',
);
});
it('displays link', () => {
expect(wrapper.contains(GlLink)).toBe(true);
});
});
});
......@@ -60,18 +60,24 @@ RSpec.describe ClustersHelper do
end
describe '#js_clusters_list_data' do
it 'displays endpoint path and images' do
js_data = helper.js_clusters_list_data('/path')
subject { helper.js_clusters_list_data('/path') }
expect(js_data[:endpoint]).to eq('/path')
it 'displays endpoint path' do
expect(subject[:endpoint]).to eq('/path')
end
it 'generates svg image data', :aggregate_failures do
expect(subject.dig(:img_tags, :aws, :path)).to match(%r(/illustrations/logos/amazon_eks|svg))
expect(subject.dig(:img_tags, :default, :path)).to match(%r(/illustrations/logos/kubernetes|svg))
expect(subject.dig(:img_tags, :gcp, :path)).to match(%r(/illustrations/logos/google_gke|svg))
expect(js_data.dig(:img_tags, :aws, :path)).to match(%r(/illustrations/logos/amazon_eks|svg))
expect(js_data.dig(:img_tags, :default, :path)).to match(%r(/illustrations/logos/kubernetes|svg))
expect(js_data.dig(:img_tags, :gcp, :path)).to match(%r(/illustrations/logos/google_gke|svg))
expect(subject.dig(:img_tags, :aws, :text)).to eq('Amazon EKS')
expect(subject.dig(:img_tags, :default, :text)).to eq('Kubernetes Cluster')
expect(subject.dig(:img_tags, :gcp, :text)).to eq('Google GKE')
end
expect(js_data.dig(:img_tags, :aws, :text)).to eq('Amazon EKS')
expect(js_data.dig(:img_tags, :default, :text)).to eq('Kubernetes Cluster')
expect(js_data.dig(:img_tags, :gcp, :text)).to eq('Google GKE')
it 'displays and ancestor_help_path' do
expect(subject[:ancestor_help_path]).to eq('/help/user/group/clusters/index#cluster-precedence')
end
end
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment