Commit 1e180b7e authored by Dave Pisek's avatar Dave Pisek

Use gl-form-radio for setting primary security training provider

Due to an open issue within gitlab-ui the settings for the primary
security training provider were using a native form radio.

Since then the issue with `GlFormRadio` has been fixed and
we are now using it instead of the native radio buttons.
parent 4f2c22fc
......@@ -3,6 +3,7 @@ import {
GlAlert,
GlTooltipDirective,
GlCard,
GlFormRadio,
GlToggle,
GlLink,
GlSkeletonLoader,
......@@ -44,6 +45,7 @@ export default {
components: {
GlAlert,
GlCard,
GlFormRadio,
GlToggle,
GlLink,
GlSkeletonLoader,
......@@ -79,6 +81,9 @@ export default {
};
},
computed: {
primaryProviderId() {
return this.securityTrainingProviders.find(({ isPrimary }) => isPrimary)?.id;
},
enabledProviders() {
return this.securityTrainingProviders.filter(({ isEnabled }) => isEnabled);
},
......@@ -256,31 +261,19 @@ export default {
{{ __('Learn more.') }}
</gl-link>
</p>
<!-- Note: The following `div` and it's content will be replaced by 'GlFormRadio' once https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1720#note_857342988 is resolved -->
<div
class="gl-form-radio custom-control custom-radio"
data-testid="primary-provider-radio"
<gl-form-radio
:checked="primaryProviderId"
:disabled="!provider.isEnabled"
:value="provider.id"
@change="setPrimaryProvider(provider)"
>
<input
:id="`security-training-provider-${provider.id}`"
type="radio"
:checked="provider.isPrimary"
class="custom-control-input"
:disabled="!provider.isEnabled"
@change="setPrimaryProvider(provider)"
/>
<label
class="custom-control-label"
:for="`security-training-provider-${provider.id}`"
>
{{ $options.i18n.primaryTraining }}
</label>
{{ $options.i18n.primaryTraining }}
<gl-icon
v-gl-tooltip="$options.i18n.primaryTrainingDescription"
name="information-o"
class="gl-ml-2 gl-cursor-help"
/>
</div>
</gl-form-radio>
</div>
</div>
</gl-card>
......
import * as Sentry from '@sentry/browser';
import { GlAlert, GlLink, GlToggle, GlCard, GlSkeletonLoader, GlIcon } from '@gitlab/ui';
import {
GlAlert,
GlLink,
GlFormRadio,
GlToggle,
GlCard,
GlSkeletonLoader,
GlIcon,
} from '@gitlab/ui';
import Vue from 'vue';
import VueApollo from 'vue-apollo';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
......@@ -87,7 +95,7 @@ describe('TrainingProviderList component', () => {
const findLinks = () => wrapper.findAllComponents(GlLink);
const findToggles = () => wrapper.findAllComponents(GlToggle);
const findFirstToggle = () => findToggles().at(0);
const findPrimaryProviderRadios = () => wrapper.findAllByTestId('primary-provider-radio');
const findPrimaryProviderRadios = () => wrapper.findAllComponents(GlFormRadio);
const findLoader = () => wrapper.findComponent(GlSkeletonLoader);
const findErrorAlert = () => wrapper.findComponent(GlAlert);
const findLogos = () => wrapper.findAllByTestId('provider-logo');
......@@ -177,8 +185,8 @@ describe('TrainingProviderList component', () => {
const primaryProviderRadioForCurrentCard = findPrimaryProviderRadios().at(index);
// if the given provider is not enabled it should not be possible select it as primary
expect(primaryProviderRadioForCurrentCard.find('input').attributes('disabled')).toBe(
isEnabled ? undefined : 'disabled',
expect(primaryProviderRadioForCurrentCard.attributes('disabled')).toBe(
isEnabled ? undefined : 'true',
);
expect(primaryProviderRadioForCurrentCard.text()).toBe(
......
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