Commit 62019516 authored by Nicolò Maria Mezzopera's avatar Nicolò Maria Mezzopera

Merge branch '330001-geo-beta-multiple-secondaries' into 'master'

Geo 2.0 Regression - Multiple Secondaries

See merge request gitlab-org/gitlab!61173
parents 795ed209 8305be7e
...@@ -18,6 +18,8 @@ export default { ...@@ -18,6 +18,8 @@ export default {
modalBody: s__( modalBody: s__(
'Geo|Removing a Geo secondary node stops the synchronization to that node. Are you sure?', 'Geo|Removing a Geo secondary node stops the synchronization to that node. Are you sure?',
), ),
primarySite: s__('Geo|Primary site'),
secondarySite: s__('Geo|Secondary site'),
}, },
components: { components: {
GlLink, GlLink,
...@@ -43,6 +45,12 @@ export default { ...@@ -43,6 +45,12 @@ export default {
noNodes() { noNodes() {
return !this.nodes || this.nodes.length === 0; return !this.nodes || this.nodes.length === 0;
}, },
primaryNodes() {
return this.nodes.filter((n) => n.primary);
},
secondaryNodes() {
return this.nodes.filter((n) => !n.primary);
},
}, },
created() { created() {
this.fetchNodes(); this.fetchNodes();
...@@ -89,10 +97,25 @@ export default { ...@@ -89,10 +97,25 @@ export default {
</gl-button> </gl-button>
</div> </div>
<gl-loading-icon v-if="isLoading" size="xl" class="gl-mt-5" /> <gl-loading-icon v-if="isLoading" size="xl" class="gl-mt-5" />
<div v-if="!isLoading"> <template v-if="!isLoading">
<geo-nodes v-for="node in nodes" :key="node.id" :node="node" /> <div v-if="!noNodes">
<geo-nodes-empty-state v-if="noNodes" :svg-path="geoNodesEmptyStateSvg" /> <h4 class="gl-font-lg gl-my-5">{{ $options.i18n.primarySite }}</h4>
</div> <geo-nodes
v-for="node in primaryNodes"
:key="node.id"
:node="node"
data-testid="primary-nodes"
/>
<h4 class="gl-font-lg gl-my-5">{{ $options.i18n.secondarySite }}</h4>
<geo-nodes
v-for="node in secondaryNodes"
:key="node.id"
:node="node"
data-testid="secondary-nodes"
/>
</div>
<geo-nodes-empty-state v-else :svg-path="geoNodesEmptyStateSvg" />
</template>
<gl-modal <gl-modal
:modal-id="$options.REMOVE_NODE_MODAL_ID" :modal-id="$options.REMOVE_NODE_MODAL_ID"
:title="$options.i18n.modalTitle" :title="$options.i18n.modalTitle"
......
<script> <script>
import { s__ } from '~/locale';
import GeoNodeDetails from './details/geo_node_details.vue'; import GeoNodeDetails from './details/geo_node_details.vue';
import GeoNodeHeader from './header/geo_node_header.vue'; import GeoNodeHeader from './header/geo_node_header.vue';
export default { export default {
name: 'GeoNodes', name: 'GeoNodes',
i18n: {
primarySite: s__('Geo|Primary site'),
secondarySite: s__('Geo|Secondary site'),
},
components: { components: {
GeoNodeHeader, GeoNodeHeader,
GeoNodeDetails, GeoNodeDetails,
...@@ -25,11 +20,6 @@ export default { ...@@ -25,11 +20,6 @@ export default {
collapsed: false, collapsed: false,
}; };
}, },
computed: {
siteTitle() {
return this.node.primary ? this.$options.i18n.primarySite : this.$options.i18n.secondarySite;
},
},
methods: { methods: {
toggleCollapse() { toggleCollapse() {
this.collapsed = !this.collapsed; this.collapsed = !this.collapsed;
...@@ -39,8 +29,7 @@ export default { ...@@ -39,8 +29,7 @@ export default {
</script> </script>
<template> <template>
<div> <div class="gl-mb-4">
<h4 class="gl-font-lg gl-my-5">{{ siteTitle }}</h4>
<geo-node-header :node="node" :collapsed="collapsed" @collapse="toggleCollapse" /> <geo-node-header :node="node" :collapsed="collapsed" @collapse="toggleCollapse" />
<geo-node-details v-if="!collapsed" :node="node" /> <geo-node-details v-if="!collapsed" :node="node" />
</div> </div>
......
...@@ -6,6 +6,7 @@ import GeoNodesBetaApp from 'ee/geo_nodes_beta/components/app.vue'; ...@@ -6,6 +6,7 @@ import GeoNodesBetaApp from 'ee/geo_nodes_beta/components/app.vue';
import GeoNodes from 'ee/geo_nodes_beta/components/geo_nodes.vue'; import GeoNodes from 'ee/geo_nodes_beta/components/geo_nodes.vue';
import GeoNodesEmptyState from 'ee/geo_nodes_beta/components/geo_nodes_empty_state.vue'; import GeoNodesEmptyState from 'ee/geo_nodes_beta/components/geo_nodes_empty_state.vue';
import { GEO_INFO_URL } from 'ee/geo_nodes_beta/constants'; import { GEO_INFO_URL } from 'ee/geo_nodes_beta/constants';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import { MOCK_NODES, MOCK_NEW_NODE_URL, MOCK_EMPTY_STATE_SVG } from '../mock_data'; import { MOCK_NODES, MOCK_NEW_NODE_URL, MOCK_EMPTY_STATE_SVG } from '../mock_data';
Vue.use(Vuex); Vue.use(Vuex);
...@@ -32,14 +33,16 @@ describe('GeoNodesBetaApp', () => { ...@@ -32,14 +33,16 @@ describe('GeoNodesBetaApp', () => {
actions: actionSpies, actions: actionSpies,
}); });
wrapper = shallowMount(GeoNodesBetaApp, { wrapper = extendedWrapper(
store, shallowMount(GeoNodesBetaApp, {
propsData: { store,
...defaultProps, propsData: {
...props, ...defaultProps,
}, ...props,
stubs: { GlSprintf }, },
}); stubs: { GlSprintf },
}),
);
}; };
afterEach(() => { afterEach(() => {
...@@ -52,6 +55,8 @@ describe('GeoNodesBetaApp', () => { ...@@ -52,6 +55,8 @@ describe('GeoNodesBetaApp', () => {
const findGlLoadingIcon = () => wrapper.findComponent(GlLoadingIcon); const findGlLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
const findGeoEmptyState = () => wrapper.findComponent(GeoNodesEmptyState); const findGeoEmptyState = () => wrapper.findComponent(GeoNodesEmptyState);
const findGeoNodes = () => wrapper.findAllComponents(GeoNodes); const findGeoNodes = () => wrapper.findAllComponents(GeoNodes);
const findPrimaryGeoNodes = () => wrapper.findAllByTestId('primary-nodes');
const findSecondaryGeoNodes = () => wrapper.findAllByTestId('secondary-nodes');
const findGlModal = () => wrapper.findComponent(GlModal); const findGlModal = () => wrapper.findComponent(GlModal);
describe('template', () => { describe('template', () => {
...@@ -108,12 +113,16 @@ describe('GeoNodesBetaApp', () => { ...@@ -108,12 +113,16 @@ describe('GeoNodesBetaApp', () => {
); );
describe('with Geo Nodes', () => { describe('with Geo Nodes', () => {
const primaryNodes = MOCK_NODES.filter((n) => n.primary);
const secondaryNodes = MOCK_NODES.filter((n) => !n.primary);
beforeEach(() => { beforeEach(() => {
createComponent({ nodes: MOCK_NODES }); createComponent({ nodes: MOCK_NODES });
}); });
it('renders a Geo Node component for each node', () => { it('renders the correct Geo Node component for each node', () => {
expect(findGeoNodes()).toHaveLength(MOCK_NODES.length); expect(findPrimaryGeoNodes()).toHaveLength(primaryNodes.length);
expect(findSecondaryGeoNodes()).toHaveLength(secondaryNodes.length);
}); });
}); });
}); });
......
...@@ -25,7 +25,6 @@ describe('GeoNodes', () => { ...@@ -25,7 +25,6 @@ describe('GeoNodes', () => {
}); });
const findGeoNodesContainer = () => wrapper.find('div'); const findGeoNodesContainer = () => wrapper.find('div');
const findGeoSiteTitle = () => wrapper.find('h4');
const findGeoNodeHeader = () => wrapper.findComponent(GeoNodeHeader); const findGeoNodeHeader = () => wrapper.findComponent(GeoNodeHeader);
const findGeoNodeDetails = () => wrapper.findComponent(GeoNodeDetails); const findGeoNodeDetails = () => wrapper.findComponent(GeoNodeDetails);
...@@ -56,19 +55,4 @@ describe('GeoNodes', () => { ...@@ -56,19 +55,4 @@ describe('GeoNodes', () => {
}); });
}); });
}); });
describe.each`
node | siteTitle
${MOCK_NODES[0]} | ${'Primary site'}
${MOCK_NODES[1]} | ${'Secondary site'}
`(`Site Title`, ({ node, siteTitle }) => {
beforeEach(() => {
createComponent({ node });
});
it(`is ${siteTitle} when primary is ${node.primary}`, () => {
expect(findGeoSiteTitle().exists()).toBe(true);
expect(findGeoSiteTitle().text()).toBe(siteTitle);
});
});
}); });
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