diff options
Diffstat (limited to 'app/assets/javascripts/feature_flags')
9 files changed, 32 insertions, 76 deletions
diff --git a/app/assets/javascripts/feature_flags/components/configure_feature_flags_modal.vue b/app/assets/javascripts/feature_flags/components/configure_feature_flags_modal.vue index bf47d7cf7c0..5953a4fbad8 100644 --- a/app/assets/javascripts/feature_flags/components/configure_feature_flags_modal.vue +++ b/app/assets/javascripts/feature_flags/components/configure_feature_flags_modal.vue @@ -9,10 +9,10 @@ import { GlSprintf, GlLink, GlIcon, + GlAlert, } from '@gitlab/ui'; import { s__, __ } from '~/locale'; import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue'; -import Callout from '~/vue_shared/components/callout.vue'; export default { components: { @@ -22,10 +22,10 @@ export default { GlModal, ModalCopyButton, GlIcon, - Callout, GlLoadingIcon, GlSprintf, GlLink, + GlAlert, }, directives: { @@ -153,8 +153,7 @@ export default { </template> </gl-sprintf> </p> - - <callout category="warning"> + <gl-alert variant="warning" class="gl-mb-5" :dismissible="false"> <gl-sprintf :message=" s__( @@ -168,7 +167,7 @@ export default { }}</gl-link> </template> </gl-sprintf> - </callout> + </gl-alert> <gl-form-group :label="$options.translations.apiUrlLabelText" label-for="api-url"> <gl-form-input-group id="api-url" :value="unleashApiUrl" readonly type="text" name="api-url"> <template #append> @@ -212,11 +211,9 @@ export default { <gl-icon name="warning" class="gl-mr-2" /> <span>{{ $options.translations.instanceIdRegenerateError }}</span> </div> - <callout - v-if="canUserRotateToken" - category="danger" - :message="$options.translations.instanceIdRegenerateText" - /> + <gl-alert v-if="canUserRotateToken" variant="danger" class="gl-mb-5" :dismissible="false"> + {{ $options.translations.instanceIdRegenerateText }} + </gl-alert> <p v-if="canUserRotateToken" data-testid="prevent-accident-text"> <gl-sprintf :message=" diff --git a/app/assets/javascripts/feature_flags/components/edit_feature_flag.vue b/app/assets/javascripts/feature_flags/components/edit_feature_flag.vue index 9ec65bb0b43..b89e9723606 100644 --- a/app/assets/javascripts/feature_flags/components/edit_feature_flag.vue +++ b/app/assets/javascripts/feature_flags/components/edit_feature_flag.vue @@ -4,7 +4,7 @@ import { mapState, mapActions } from 'vuex'; import axios from '~/lib/utils/axios_utils'; import { sprintf, s__ } from '~/locale'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; -import { LEGACY_FLAG, NEW_FLAG_ALERT } from '../constants'; +import { LEGACY_FLAG } from '../constants'; import FeatureFlagForm from './form.vue'; export default { @@ -36,7 +36,6 @@ export default { legacyReadOnlyFlagAlert: s__( 'FeatureFlags|GitLab is moving to a new way of managing feature flags. This feature flag is read-only, and it will be removed in 14.0. Please create a new feature flag.', ), - newFlagAlert: NEW_FLAG_ALERT, }, computed: { ...mapState([ @@ -58,7 +57,7 @@ export default { : sprintf(s__('Edit %{name}'), { name: this.name }); }, deprecated() { - return this.hasNewVersionFlags && this.version === LEGACY_FLAG; + return this.version === LEGACY_FLAG; }, deprecatedAndEditable() { return this.deprecated && !this.hasLegacyReadOnlyFlags; @@ -66,18 +65,12 @@ export default { deprecatedAndReadOnly() { return this.deprecated && this.hasLegacyReadOnlyFlags; }, - hasNewVersionFlags() { - return this.glFeatures.featureFlagsNewVersion; - }, hasLegacyReadOnlyFlags() { return ( this.glFeatures.featureFlagsLegacyReadOnly && !this.glFeatures.featureFlagsLegacyReadOnlyOverride ); }, - shouldShowNewFlagAlert() { - return !this.hasNewVersionFlags && this.userShouldSeeNewFlagAlert; - }, }, created() { return this.fetchFeatureFlag(); @@ -95,14 +88,6 @@ export default { </script> <template> <div> - <gl-alert - v-if="shouldShowNewFlagAlert" - variant="warning" - class="gl-my-5" - @dismiss="dismissNewVersionFlagAlert" - > - {{ $options.translations.newFlagAlert }} - </gl-alert> <gl-loading-icon v-if="isLoading" size="xl" class="gl-mt-7" /> <template v-else-if="!isLoading && !hasError"> diff --git a/app/assets/javascripts/feature_flags/components/feature_flags.vue b/app/assets/javascripts/feature_flags/components/feature_flags.vue index 340cf68793f..fe327a98605 100644 --- a/app/assets/javascripts/feature_flags/components/feature_flags.vue +++ b/app/assets/javascripts/feature_flags/components/feature_flags.vue @@ -7,7 +7,6 @@ import { FEATURE_FLAG_SCOPE, USER_LIST_SCOPE } from '../constants'; import FeatureFlagsTab from './feature_flags_tab.vue'; import FeatureFlagsTable from './feature_flags_table.vue'; import UserListsTable from './user_lists_table.vue'; -import { s__ } from '~/locale'; import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue'; import { buildUrlWithCurrentLocation, @@ -96,9 +95,6 @@ export default { hasNewPath() { return !isEmpty(this.newFeatureFlagPath); }, - emptyStateTitle() { - return s__('FeatureFlags|Get started with feature flags'); - }, }, created() { this.setFeatureFlagsOptions({ scope: this.scope, page: this.page }); @@ -246,7 +242,12 @@ export default { :error-state="shouldRenderErrorState" :error-title="s__(`FeatureFlags|There was an error fetching the feature flags.`)" :empty-state="shouldShowEmptyState" - :empty-title="emptyStateTitle" + :empty-title="s__('FeatureFlags|Get started with feature flags')" + :empty-description=" + s__( + 'FeatureFlags|Feature flags allow you to configure your code into different flavors by dynamically toggling certain functionality.', + ) + " data-testid="feature-flags-tab" @dismissAlert="clearAlert" @changeTab="onFeatureFlagsTab" @@ -266,7 +267,12 @@ export default { :error-state="shouldRenderErrorState" :error-title="s__(`FeatureFlags|There was an error fetching the user lists.`)" :empty-state="shouldShowEmptyState" - :empty-title="emptyStateTitle" + :empty-title="s__('FeatureFlags|Get started with user lists')" + :empty-description=" + s__( + 'FeatureFlags|User lists allow you to define a set of users to use with Feature Flags.', + ) + " data-testid="user-lists-tab" @dismissAlert="clearAlert" @changeTab="onUserListsTab" diff --git a/app/assets/javascripts/feature_flags/components/feature_flags_tab.vue b/app/assets/javascripts/feature_flags/components/feature_flags_tab.vue index 5c35aa33e14..0539b5ff832 100644 --- a/app/assets/javascripts/feature_flags/components/feature_flags_tab.vue +++ b/app/assets/javascripts/feature_flags/components/feature_flags_tab.vue @@ -41,6 +41,10 @@ export default { required: true, type: String, }, + emptyDescription: { + required: true, + type: String, + }, }, inject: ['errorStateSvgPath', 'featureFlagsHelpPagePath'], computed: { @@ -92,11 +96,7 @@ export default { data-testid="empty-state" > <template #description> - {{ - s__( - 'FeatureFlags|Feature flags allow you to configure your code into different flavors by dynamically toggling certain functionality.', - ) - }} + {{ emptyDescription }} <gl-link :href="featureFlagsHelpPagePath" target="_blank"> {{ s__('FeatureFlags|More information') }} </gl-link> diff --git a/app/assets/javascripts/feature_flags/components/feature_flags_table.vue b/app/assets/javascripts/feature_flags/components/feature_flags_table.vue index 54d038606f4..ba46bab2df0 100644 --- a/app/assets/javascripts/feature_flags/components/feature_flags_table.vue +++ b/app/assets/javascripts/feature_flags/components/feature_flags_table.vue @@ -38,9 +38,6 @@ export default { permissions() { return this.glFeatures.featureFlagPermissions; }, - isNewVersionFlagsEnabled() { - return this.glFeatures.featureFlagsNewVersion; - }, isLegacyReadOnlyFlagsEnabled() { return ( this.glFeatures.featureFlagsLegacyReadOnly && @@ -68,7 +65,7 @@ export default { }, methods: { isLegacyFlag(flag) { - return !this.isNewVersionFlagsEnabled || flag.version !== NEW_VERSION_FLAG; + return flag.version !== NEW_VERSION_FLAG; }, statusToggleDisabled(flag) { return this.isLegacyReadOnlyFlagsEnabled && flag.version === LEGACY_FLAG; diff --git a/app/assets/javascripts/feature_flags/components/form.vue b/app/assets/javascripts/feature_flags/components/form.vue index 36ebf893486..12856b79f63 100644 --- a/app/assets/javascripts/feature_flags/components/form.vue +++ b/app/assets/javascripts/feature_flags/components/form.vue @@ -137,14 +137,13 @@ export default { return this.glFeatures.featureFlagPermissions; }, supportsStrategies() { - return this.glFeatures.featureFlagsNewVersion && this.version === NEW_VERSION_FLAG; + return this.version === NEW_VERSION_FLAG; }, showRelatedIssues() { return this.featureFlagIssuesEndpoint.length > 0; }, readOnly() { return ( - this.glFeatures.featureFlagsNewVersion && this.glFeatures.featureFlagsLegacyReadOnly && !this.glFeatures.featureFlagsLegacyReadOnlyOverride && this.version === LEGACY_FLAG diff --git a/app/assets/javascripts/feature_flags/components/new_feature_flag.vue b/app/assets/javascripts/feature_flags/components/new_feature_flag.vue index 9472eddf336..e6949d8028b 100644 --- a/app/assets/javascripts/feature_flags/components/new_feature_flag.vue +++ b/app/assets/javascripts/feature_flags/components/new_feature_flag.vue @@ -1,21 +1,14 @@ <script> import { mapState, mapActions } from 'vuex'; -import { GlAlert } from '@gitlab/ui'; import axios from '~/lib/utils/axios_utils'; import FeatureFlagForm from './form.vue'; -import { - LEGACY_FLAG, - NEW_VERSION_FLAG, - NEW_FLAG_ALERT, - ROLLOUT_STRATEGY_ALL_USERS, -} from '../constants'; +import { NEW_VERSION_FLAG, ROLLOUT_STRATEGY_ALL_USERS } from '../constants'; import { createNewEnvironmentScope } from '../store/helpers'; import featureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; export default { components: { - GlAlert, FeatureFlagForm, }, mixins: [featureFlagsMixin()], @@ -33,9 +26,6 @@ export default { userShouldSeeNewFlagAlert: this.showUserCallout, }; }, - translations: { - newFlagAlert: NEW_FLAG_ALERT, - }, computed: { ...mapState(['error', 'path']), scopes() { @@ -50,13 +40,7 @@ export default { ]; }, version() { - return this.hasNewVersionFlags ? NEW_VERSION_FLAG : LEGACY_FLAG; - }, - hasNewVersionFlags() { - return this.glFeatures.featureFlagsNewVersion; - }, - shouldShowNewFlagAlert() { - return !this.hasNewVersionFlags && this.userShouldSeeNewFlagAlert; + return NEW_VERSION_FLAG; }, strategies() { return [{ name: ROLLOUT_STRATEGY_ALL_USERS, parameters: {}, scopes: [] }]; @@ -75,14 +59,6 @@ export default { </script> <template> <div> - <gl-alert - v-if="shouldShowNewFlagAlert" - variant="warning" - class="gl-my-5" - @dismiss="dismissNewVersionFlagAlert" - > - {{ $options.translations.newFlagAlert }} - </gl-alert> <h3 class="page-title">{{ s__('FeatureFlags|New feature flag') }}</h3> <div v-if="error.length" class="alert alert-danger"> diff --git a/app/assets/javascripts/feature_flags/components/strategy.vue b/app/assets/javascripts/feature_flags/components/strategy.vue index 9c41dde62e4..ce03248381c 100644 --- a/app/assets/javascripts/feature_flags/components/strategy.vue +++ b/app/assets/javascripts/feature_flags/components/strategy.vue @@ -183,11 +183,11 @@ export default { <span v-if="appliesToAllEnvironments" class="text-secondary gl-mt-3 mt-md-0 ml-md-3"> {{ $options.i18n.allEnvironments }} </span> - <div v-else class="gl-display-flex gl-align-items-center"> + <div v-else class="gl-display-flex gl-align-items-center gl-flex-wrap"> <gl-token v-for="environment in filteredEnvironments" :key="environment.id" - class="gl-mt-3 gl-mr-3 mt-md-0 mr-md-0 ml-md-2 rounded-pill" + class="gl-mt-3 gl-mr-3 gl-mb-3 mt-md-0 mr-md-0 ml-md-2 rounded-pill" @close="removeScope(environment)" > {{ environment.environmentScope }} diff --git a/app/assets/javascripts/feature_flags/constants.js b/app/assets/javascripts/feature_flags/constants.js index 4843eca149a..658984456a5 100644 --- a/app/assets/javascripts/feature_flags/constants.js +++ b/app/assets/javascripts/feature_flags/constants.js @@ -21,10 +21,6 @@ export const fetchUserIdParams = property(['parameters', 'userIds']); export const NEW_VERSION_FLAG = 'new_version_flag'; export const LEGACY_FLAG = 'legacy_flag'; -export const NEW_FLAG_ALERT = s__( - 'FeatureFlags|Feature Flags will look different in the next milestone. No action is needed, but you may notice the functionality was changed to improve the workflow.', -); - export const FEATURE_FLAG_SCOPE = 'featureFlags'; export const USER_LIST_SCOPE = 'userLists'; |