Skip to content

G
gitlab-ce
Commit e202d8eb authored by Zack Cuddy's avatar Zack Cuddy
Browse files
Options

Geo - Update Verification Popover 

Currently there is repitive information
around Geo Verification in the UI.

This consolidates the info onto
a Popover at the tab level.

From here there is a consitant
popover, that has the link
to the Geo Docs.
parent 83a67aaa
Show whitespace changes
Inline Side-by-side
Showing with 92 additions and 104 deletions
ee/app/assets/javascripts/geo_nodes/components/geo_node_detail_item.vue
View file @ e202d8eb
......@@ -74,11 +74,6 @@ export default {
required: false,
default: false,
},
helpInfo: {
type: [Boolean, Object],
required: false,
default: false,
},
featureDisabled: {
type: Boolean,
required: false,
......@@ -101,26 +96,6 @@ export default {
isCustomTypeSync() {
return this.customType === CUSTOM_TYPE.SYNC;
},
popoverConfig() {
return {
html: true,
trigger: 'click',
placement: 'top',
template: `
<div class="popover geo-node-detail-popover" role="tooltip">
<div class="arrow"></div>
<p class="popover-header"></p>
<div class="popover-body"></div>
</div>
`,
title: this.helpInfo.title,
content: `
<a href="${this.helpInfo.url}">
${this.helpInfo.urlText}
</a>
`,
};
},
},
};
</script>
......@@ -129,13 +104,6 @@ export default {
<div v-if="!featureDisabled" class="mt-2 ml-2 node-detail-item">
<div class="d-flex align-items-center text-secondary-700">
<span class="node-detail-title">{{ itemTitle }}</span>
<icon
v-if="hasHelpInfo"
v-popover="popoverConfig"
:size="12"
class="text-primary-600 ml-1 node-detail-help-text"
name="question"
/>
</div>
<div v-if="isValueTypePlain" :class="cssClass" class="mt-1 node-detail-value">
{{ itemValue }}
......
ee/app/assets/javascripts/geo_nodes/components/node_detail_sections/node_details_section_verification.vue
View file @ e202d8eb
<script>
import { GlPopover, GlLink, GlIcon, GlSprintf } from '@gitlab/ui';
import { s__ } from '~/locale';
import { VALUE_TYPE, HELP_INFO_URL } from '../../constants';
......@@ -10,6 +12,10 @@ import SectionRevealButton from './section_reveal_button.vue';
export default {
components: {
GlIcon,
GlPopover,
GlLink,
GlSprintf,
GeoNodeDetailItem,
SectionRevealButton,
},
......@@ -37,6 +43,9 @@ export default {
? this.getPrimaryNodeDetailItems()
: this.getSecondaryNodeDetailItems();
},
nodeText() {
return this.nodeTypePrimary ? s__('GeoNodes|secondary nodes') : s__('GeoNodes|primary node');
},
},
methods: {
getPrimaryNodeDetailItems() {
......@@ -48,13 +57,6 @@ export default {
successLabel: s__('GeoNodes|Checksummed'),
neutraLabel: s__('GeoNodes|Not checksummed'),
failureLabel: s__('GeoNodes|Failed'),
helpInfo: {
title: s__(
'GeoNodes|Repositories checksummed for verification with their counterparts on Secondary nodes',
),
url: HELP_INFO_URL,
urlText: s__('GeoNodes|Learn more about Repository checksum progress'),
},
},
{
itemTitle: s__('GeoNodes|Wiki checksum progress'),
......@@ -63,13 +65,6 @@ export default {
successLabel: s__('GeoNodes|Checksummed'),
neutraLabel: s__('GeoNodes|Not checksummed'),
failureLabel: s__('GeoNodes|Failed'),
helpInfo: {
title: s__(
'GeoNodes|Wikis checksummed for verification with their counterparts on Secondary nodes',
),
url: HELP_INFO_URL,
urlText: s__('GeoNodes|Learn more about Wiki checksum progress'),
},
},
];
},
......@@ -82,13 +77,6 @@ export default {
successLabel: s__('GeoNodes|Verified'),
neutraLabel: s__('GeoNodes|Unverified'),
failureLabel: s__('GeoNodes|Failed'),
helpInfo: {
title: s__(
'GeoNodes|Repositories verified with their counterparts on the Primary node',
),
url: HELP_INFO_URL,
urlText: s__('GeoNodes|Learn more about Repository verification'),
},
},
{
itemTitle: s__('GeoNodes|Wiki verification progress'),
......@@ -97,11 +85,6 @@ export default {
successLabel: s__('GeoNodes|Verified'),
neutraLabel: s__('GeoNodes|Unverified'),
failureLabel: s__('GeoNodes|Failed'),
helpInfo: {
title: s__('GeoNodes|Wikis verified with their counterparts on the Primary node'),
url: HELP_INFO_URL,
urlText: s__('GeoNodes|Learn more about Wiki verification'),
},
},
];
},
......@@ -109,16 +92,39 @@ export default {
this.showSectionItems = toggleState;
},
},
HELP_INFO_URL,
};
</script>
<template>
<div class="row-fluid clearfix py-3 border-top border-color-default verification-section">
<div class="col-md-12">
<div class="col-md-12 d-flex align-items-center">
<section-reveal-button
:button-title="__('Verification information')"
@toggleButton="handleSectionToggle"
/>
<gl-icon
ref="verificationInfo"
tabindex="0"
name="question"
class="text-primary-600 ml-1 cursor-pointer"
/>
<gl-popover :target="() => $refs.verificationInfo.$el" placement="top" triggers="hover focus">
<p>
<gl-sprintf
:message="
s__('GeoNodes|Replicated data is verified with the %{nodeText} using checksums')
"
>
<template #nodeText>
{{ nodeText }}
</template>
</gl-sprintf>
</p>
<gl-link class="mt-3" :href="$options.HELP_INFO_URL" target="_blank">{{
__('More information')
}}</gl-link>
</gl-popover>
</div>
<template v-if="showSectionItems">
<div class="col-md-6 ml-2 mt-2 section-items-container">
......@@ -135,7 +141,6 @@ export default {
:neutral-label="nodeDetailItem.neutraLabel"
:failure-label="nodeDetailItem.failureLabel"
:custom-type="nodeDetailItem.customType"
:help-info="nodeDetailItem.helpInfo"
/>
</div>
</template>
......
ee/changelogs/unreleased/209262-geo-verification-popovers.yml 0 → 100644
View file @ e202d8eb
---
title: Create more intuitive Verification Popover for Geo Node Syncs
merge_request: 27624
author:
type: changed
ee/spec/frontend/geo_nodes/components/geo_node_detail_item_spec.js
View file @ e202d8eb
import { shallowMount } from '@vue/test-utils';
import Icon from '~/vue_shared/components/icon.vue';
import StackedProgressBar from '~/vue_shared/components/stacked_progress_bar.vue';
import GeoNodeDetailItemComponent from 'ee/geo_nodes/components/geo_node_detail_item.vue';
import GeoNodeSyncSettings from 'ee/geo_nodes/components/geo_node_sync_settings.vue';
......@@ -55,24 +54,6 @@ describe('GeoNodeDetailItemComponent', () => {
);
});
describe('with help info', () => {
beforeEach(() => {
createComponent({
helpInfo: {
title: 'Foo title tooltip',
url: 'https://docs.gitlab.com',
urlText: 'Help',
},
});
});
it('renders item title help info icon', () => {
const helpTextIconEl = wrapper.find(Icon);
expect(helpTextIconEl.exists()).toBeTruthy();
expect(helpTextIconEl.attributes('name')).toBe('question');
});
});
describe('when graph item value', () => {
beforeEach(() => {
createComponent({
......
ee/spec/frontend/geo_nodes/components/node_detail_sections/node_details_section_verification_spec.js
View file @ e202d8eb
import { shallowMount } from '@vue/test-utils';
import { GlPopover, GlSprintf } from '@gitlab/ui';
import NodeDetailsSectionVerificationComponent from 'ee/geo_nodes/components/node_detail_sections/node_details_section_verification.vue';
import SectionRevealButton from 'ee/geo_nodes/components/node_detail_sections/section_reveal_button.vue';
......@@ -8,14 +9,17 @@ import { mockNodeDetails } from '../../mock_data';
describe('NodeDetailsSectionVerification', () => {
let wrapper;
const propsData = {
const defaultProps = {
nodeDetails: mockNodeDetails,
nodeTypePrimary: false,
};
const createComponent = () => {
const createComponent = (props = {}) => {
wrapper = shallowMount(NodeDetailsSectionVerificationComponent, {
propsData,
propsData: {
...defaultProps,
...props,
},
});
};
......@@ -27,6 +31,8 @@ describe('NodeDetailsSectionVerification', () => {
wrapper.destroy();
});
const findGlPopover = () => wrapper.find(GlPopover);
describe('data', () => {
it('returns default data props', () => {
expect(wrapper.vm.showSectionItems).toBe(false);
......@@ -81,6 +87,30 @@ describe('NodeDetailsSectionVerification', () => {
});
});
describe('computed', () => {
describe('nodeText', () => {
describe('on Primary node', () => {
beforeEach(() => {
createComponent({ nodeTypePrimary: true });
});
it('returns text about secondary nodes', () => {
expect(wrapper.vm.nodeText).toBe('secondary nodes');
});
});
describe('on Secondary node', () => {
beforeEach(() => {
createComponent();
});
it('returns text about secondary nodes', () => {
expect(wrapper.vm.nodeText).toBe('primary node');
});
});
});
});
describe('template', () => {
it('renders component container element', () => {
expect(wrapper.vm.$el.classList.contains('verification-section')).toBe(true);
......@@ -99,5 +129,19 @@ describe('NodeDetailsSectionVerification', () => {
expect(wrapper.vm.$el.querySelector('.section-items-container')).not.toBeNull();
});
});
describe('GlPopover', () => {
it('renders always', () => {
expect(findGlPopover().exists()).toBeTruthy();
});
it('contains text about Replicated data', () => {
expect(
findGlPopover()
.find(GlSprintf)
.attributes('message'),
).toContain('Replicated data is verified');
});
});
});
});
locale/gitlab.pot
View file @ e202d8eb
......@@ -9166,18 +9166,6 @@ msgstr ""
msgid "GeoNodes|Last event ID seen from primary"
msgstr ""
msgid "GeoNodes|Learn more about Repository checksum progress"
msgstr ""
msgid "GeoNodes|Learn more about Repository verification"
msgstr ""
msgid "GeoNodes|Learn more about Wiki checksum progress"
msgstr ""
msgid "GeoNodes|Learn more about Wiki verification"
msgstr ""
msgid "GeoNodes|Loading nodes"
msgstr ""
......@@ -9208,6 +9196,9 @@ msgstr ""
msgid "GeoNodes|Removing a Geo secondary node stops the synchronization to that node. Are you sure?"
msgstr ""
msgid "GeoNodes|Replicated data is verified with the %{nodeText} using checksums"
msgstr ""
msgid "GeoNodes|Replication slot WAL"
msgstr ""
......@@ -9217,12 +9208,6 @@ msgstr ""
msgid "GeoNodes|Repositories"
msgstr ""
msgid "GeoNodes|Repositories checksummed for verification with their counterparts on Secondary nodes"
msgstr ""
msgid "GeoNodes|Repositories verified with their counterparts on the Primary node"
msgstr ""
msgid "GeoNodes|Repository checksum progress"
msgstr ""
......@@ -9274,16 +9259,16 @@ msgstr ""
msgid "GeoNodes|Wikis"
msgstr ""
msgid "GeoNodes|Wikis checksummed for verification with their counterparts on Secondary nodes"
msgid "GeoNodes|With %{geo} you can install a special read-only and replicated instance anywhere. Before you add nodes, follow the %{instructions} in the exact order they appear."
msgstr ""
msgid "GeoNodes|Wikis verified with their counterparts on the Primary node"
msgid "GeoNodes|You have configured Geo nodes using an insecure HTTP connection. We recommend the use of HTTPS."
msgstr ""
msgid "GeoNodes|With %{geo} you can install a special read-only and replicated instance anywhere. Before you add nodes, follow the %{instructions} in the exact order they appear."
msgid "GeoNodes|primary node"
msgstr ""
msgid "GeoNodes|You have configured Geo nodes using an insecure HTTP connection. We recommend the use of HTTPS."
msgid "GeoNodes|secondary nodes"
msgstr ""
msgid "Geo|%{name} is scheduled for forced re-download"
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7