Skip to content
Snippets Groups Projects
Verified Commit 63abcc4a authored by Eduardo Sanz García's avatar Eduardo Sanz García :zero:
Browse files

Use CodeBlockHighlighted for guided instructions

In the Google Cloud IAM integration we make use of
`CodeBlockHighlighted` component to enhance and highlight the command.

Changelog: changed

EE: true
parent 60a0fb8a
No related branches found
No related tags found
1 merge request!148203Use CodeBlockHighlighted for guided instructions
......@@ -2,6 +2,7 @@
import { GlButton, GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
import { refreshCurrentPage } from '~/lib/utils/url_utility';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import CodeBlockHighlighted from '~/vue_shared/components/code_block_highlighted.vue';
import { STATE_MANUAL } from './constants';
export default {
......@@ -11,6 +12,7 @@ export default {
GlLink,
GlSprintf,
ClipboardButton,
CodeBlockHighlighted,
},
curlLine: `export GL_PAT=<your_access_token>
curl --request GET \\
......@@ -130,10 +132,14 @@ curl --request GET \\
<li>{{ s__('GoogleCloudPlatformService|You might be prompted to sign in to Google.') }}</li>
</ul>
<div class="position-relative">
<pre class="gl-w-full">{{ $options.curlLine }}</pre>
<code-block-highlighted
class="gl-border gl-p-4"
language="powershell"
:code="$options.curlLine"
/>
<clipboard-button
:text="$options.curlLine"
:title="__('Copy')"
:title="__('Copy command')"
category="tertiary"
class="gl-display-none gl-md-display-flex position-absolute position-top-0 position-right-0 gl-m-3"
/>
......
......@@ -3,6 +3,8 @@ import { shallowMount } from '@vue/test-utils';
import { STATE_MANUAL } from 'ee/integrations/edit/components/google_cloud_iam/constants';
import GuidedSetup from 'ee/integrations/edit/components/google_cloud_iam/guided_setup.vue';
import { refreshCurrentPage } from '~/lib/utils/url_utility';
import CodeBlockHighlighted from '~/vue_shared/components/code_block_highlighted.vue';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
jest.mock('~/lib/utils/url_utility', () => ({
...jest.requireActual('~/lib/utils/url_utility'),
......@@ -18,6 +20,8 @@ describe('GuidedSetup', () => {
const findFirstLink = () => wrapper.findAllComponents(GlLink).at(0);
const findButton = (variant) =>
wrapper.findAllComponents(GlButton).filter((button) => button.props('variant') === variant);
const findCodeBlockHighlighted = () => wrapper.findComponent(CodeBlockHighlighted);
const findClipboardButton = () => wrapper.findComponent(ClipboardButton);
beforeEach(() => {
createComponent();
......@@ -84,4 +88,16 @@ describe('GuidedSetup', () => {
expect(wrapper.emitted().show[0]).toContain('empty');
});
});
it('renders code instruction with copy button', () => {
expect(findCodeBlockHighlighted().props()).toMatchObject({
language: 'powershell',
code: wrapper.vm.$options.curlLine,
});
expect(findClipboardButton().props()).toMatchObject({
title: 'Copy command',
text: wrapper.vm.$options.curlLine,
});
});
});
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment