Skip to content
Snippets Groups Projects

Restyle framework create and edit screens

Merged Restyle framework create and edit screens
478077-style-create-and-edit-screens into master
2 unresolved threads
Merged Nataliia Radina requested to merge 478077-style-create-and-edit-screens into master
2 unresolved threads
Viewing commit 5bdaff01
Show latest version
10 files
+ 195
− 203
Compare changes
  • Side-by-side
  • Inline
Files
10
ee/app/assets/javascripts/compliance_dashboard/components/frameworks_report/edit_framework/components/basic_information_section.vue
+ 146
− 140
@@ -4,6 +4,7 @@ import {
GlFormCheckbox,
GlFormGroup,
GlFormInput,
GlFormTextarea,
GlLink,
GlSprintf,
GlButton,
@@ -37,6 +38,7 @@ export default {
GlPopover,
GlAlert,
GlButton,
GlFormTextarea,
},
inject: [
@@ -207,158 +209,162 @@ export default {
is-required
:is-completed="isValid"
>
<gl-form-group
:label="$options.i18n.titleInputLabel"
label-for="name-input"
:state="isValidName"
:invalid-feedback="nameFeedbackMessage"
data-testid="name-input-group"
>
<gl-form-input
id="name-input"
v-model="formData.name"
name="name"
<div class="lg:gl-w-1/2">
<gl-form-group
:label="$options.i18n.titleInputLabel"
label-for="name-input"
:state="isValidName"
data-testid="name-input"
/>
</gl-form-group>
<gl-form-group
:label="$options.i18n.descriptionInputLabel"
label-for="description-input"
:invalid-feedback="$options.i18n.descriptionInputInvalid"
:state="isValidDescription"
data-testid="description-input-group"
>
<gl-form-input
id="description-input"
v-model="formData.description"
name="description"
:invalid-feedback="nameFeedbackMessage"
data-testid="name-input-group"
>
<gl-form-input
id="name-input"
v-model="formData.name"
name="name"
:state="isValidName"
data-testid="name-input"
/>
</gl-form-group>
<gl-form-group
:label="$options.i18n.descriptionInputLabel"
label-for="description-input"
:invalid-feedback="$options.i18n.descriptionInputInvalid"
:state="isValidDescription"
data-testid="description-input"
data-testid="description-input-group"
>
<gl-form-textarea
id="description-input"
v-model="formData.description"
name="description"
:state="isValidDescription"
data-testid="description-input"
:no-resize="false"
:rows="6"
/>
</gl-form-group>
<color-picker
v-model="formData.color"
:label="$options.i18n.colorInputLabel"
:state="isValidColor"
/>
</gl-form-group>
<color-picker
v-model="formData.color"
:label="$options.i18n.colorInputLabel"
:state="isValidColor"
/>
<gl-form-group
v-if="pipelineConfigurationFullPathEnabled && pipelineConfigurationEnabled"
:label="$options.i18n.pipelineConfigurationInputLabel"
label-for="pipeline-configuration-input"
:invalid-feedback="pipelineConfigurationFeedbackMessage"
:state="isValidPipelineConfiguration"
data-testid="pipeline-configuration-input-group"
>
<template #description>
<gl-sprintf :message="$options.i18n.pipelineConfigurationInputDescription">
<template #code="{ content }">
<code>{{ content }}</code>
</template>
<template #link="{ content }">
<gl-link :href="compliancePipelineConfigurationHelpPath" target="_blank">{{
content
}}</gl-link>
</template>
</gl-sprintf>
</template>
<gl-alert
v-if="showMaintenanceModeAlert"
variant="warning"
class="gl-my-3"
data-testid="maintenance-mode-alert"
:dismissible="true"
:title="$options.i18n.deprecationWarning.title"
@dismiss="handleOnDismissMaintenanceMode"
<gl-form-group
v-if="pipelineConfigurationFullPathEnabled && pipelineConfigurationEnabled"
:label="$options.i18n.pipelineConfigurationInputLabel"
label-for="pipeline-configuration-input"
:invalid-feedback="pipelineConfigurationFeedbackMessage"
:state="isValidPipelineConfiguration"
data-testid="pipeline-configuration-input-group"
>
<p>
<gl-sprintf :message="$options.i18n.deprecationWarning.message">
<template #description>
<gl-sprintf :message="$options.i18n.pipelineConfigurationInputDescription">
<template #code="{ content }">
<code>{{ content }}</code>
</template>
<template #link="{ content }">
<gl-link :href="pipelineExecutionPolicyPath" target="_blank">{{ content }}</gl-link>
<gl-link :href="compliancePipelineConfigurationHelpPath" target="_blank">{{
content
}}</gl-link>
</template>
</gl-sprintf>
</p>
<gl-sprintf :message="$options.i18n.deprecationWarning.details">
<template #link="{ content }">
<gl-link :href="migratePipelineToPolicyPath" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
<template #actions>
<gl-button
category="primary"
variant="confirm"
data-testid="migrate-action-button"
:href="dynamicMigratePipelineToPolicyPath"
target="_blank"
>
{{ deprecationWarningButtonText }}
</gl-button>
<gl-button class="gl-ml-5" @click="handleOnDismissMaintenanceMode">
{{ $options.i18n.deprecationWarning.dismiss }}
</gl-button>
</template>
</gl-alert>
<gl-form-input
id="pipeline-configuration-input"
v-model="formData.pipelineConfigurationFullPath"
name="pipeline_configuration_full_path"
:state="isValidPipelineConfiguration"
data-testid="pipeline-configuration-input"
/>
</gl-form-group>
<template v-if="!pipelineConfigurationEnabled">
<gl-form-group
id="disabled-pipeline-configuration-input-group"
:label="$options.i18n.pipelineConfigurationInputLabel"
label-for="disabled-pipeline-configuration-input"
data-testid="disabled-pipeline-configuration-input-group"
>
<div :id="$options.disabledPipelineConfigurationInputPopoverTarget" tabindex="0">
<gl-form-input
id="disabled-pipeline-configuration-input"
disabled
data-testid="disabled-pipeline-configuration-input"
/>
</div>
</gl-form-group>
<gl-popover
:title="$options.i18n.pipelineConfigurationInputDisabledPopoverTitle"
show-close-button
:target="$options.disabledPipelineConfigurationInputPopoverTarget"
data-testid="disabled-pipeline-configuration-input-popover"
>
<p class="gl-mb-0">
<gl-sprintf :message="$options.i18n.pipelineConfigurationInputDisabledPopoverContent">
<gl-alert
v-if="showMaintenanceModeAlert"
variant="warning"
class="gl-my-3"
data-testid="maintenance-mode-alert"
:dismissible="true"
:title="$options.i18n.deprecationWarning.title"
@dismiss="handleOnDismissMaintenanceMode"
>
<p>
<gl-sprintf :message="$options.i18n.deprecationWarning.message">
<template #link="{ content }">
<gl-link :href="pipelineExecutionPolicyPath" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</p>
<gl-sprintf :message="$options.i18n.deprecationWarning.details">
<template #link="{ content }">
<gl-link
:href="$options.i18n.pipelineConfigurationInputDisabledPopoverLink"
target="_blank"
class="gl-text-sm"
>
{{ content }}</gl-link
>
<gl-link :href="migratePipelineToPolicyPath" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</p>
</gl-popover>
</template>
<gl-form-checkbox v-model="formData.default" name="default">
<span class="gl-font-bold">{{ $options.i18n.setAsDefault }}</span>
<template #help>
<div>
{{ $options.i18n.setAsDefaultDetails }}
</div>
<div>
{{ $options.i18n.setAsDefaultOnlyOne }}
</div>
<template #actions>
<gl-button
category="primary"
variant="confirm"
data-testid="migrate-action-button"
:href="dynamicMigratePipelineToPolicyPath"
target="_blank"
>
{{ deprecationWarningButtonText }}
</gl-button>
<gl-button class="gl-ml-5" @click="handleOnDismissMaintenanceMode">
{{ $options.i18n.deprecationWarning.dismiss }}
</gl-button>
</template>
</gl-alert>
<gl-form-input
id="pipeline-configuration-input"
v-model="formData.pipelineConfigurationFullPath"
name="pipeline_configuration_full_path"
:state="isValidPipelineConfiguration"
data-testid="pipeline-configuration-input"
/>
</gl-form-group>
<template v-if="!pipelineConfigurationEnabled">
<gl-form-group
id="disabled-pipeline-configuration-input-group"
:label="$options.i18n.pipelineConfigurationInputLabel"
label-for="disabled-pipeline-configuration-input"
data-testid="disabled-pipeline-configuration-input-group"
>
<div :id="$options.disabledPipelineConfigurationInputPopoverTarget" tabindex="0">
<gl-form-input
id="disabled-pipeline-configuration-input"
disabled
data-testid="disabled-pipeline-configuration-input"
/>
</div>
</gl-form-group>
<gl-popover
:title="$options.i18n.pipelineConfigurationInputDisabledPopoverTitle"
show-close-button
:target="$options.disabledPipelineConfigurationInputPopoverTarget"
data-testid="disabled-pipeline-configuration-input-popover"
>
<p class="gl-mb-0">
<gl-sprintf :message="$options.i18n.pipelineConfigurationInputDisabledPopoverContent">
<template #link="{ content }">
<gl-link
:href="$options.i18n.pipelineConfigurationInputDisabledPopoverLink"
target="_blank"
class="gl-text-sm"
>
{{ content }}</gl-link
>
</template>
</gl-sprintf>
</p>
</gl-popover>
</template>
</gl-form-checkbox>
<gl-form-checkbox v-model="formData.default" name="default">
<span class="gl-font-bold">{{ $options.i18n.setAsDefault }}</span>
<template #help>
<div>
{{ $options.i18n.setAsDefaultDetails }}
</div>
<div>
{{ $options.i18n.setAsDefaultOnlyOne }}
</div>
</template>
</gl-form-checkbox>
</div>
</edit-section>
</template>