252 lines
7.6 KiB
Vue
252 lines
7.6 KiB
Vue
<script>
|
|
import { GlAlert, GlBadge, GlButton, GlModalDirective, GlSprintf } from '@gitlab/ui';
|
|
import { isEmpty } from 'lodash';
|
|
import { mapState, mapActions } from 'vuex';
|
|
|
|
import {
|
|
buildUrlWithCurrentLocation,
|
|
getParameterByName,
|
|
historyPushState,
|
|
} from '~/lib/utils/common_utils';
|
|
import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
|
|
import ConfigureFeatureFlagsModal from './configure_feature_flags_modal.vue';
|
|
import EmptyState from './empty_state.vue';
|
|
import FeatureFlagsTable from './feature_flags_table.vue';
|
|
|
|
export default {
|
|
components: {
|
|
ConfigureFeatureFlagsModal,
|
|
EmptyState,
|
|
FeatureFlagsTable,
|
|
GlAlert,
|
|
GlBadge,
|
|
GlButton,
|
|
GlSprintf,
|
|
TablePagination,
|
|
},
|
|
directives: {
|
|
GlModal: GlModalDirective,
|
|
},
|
|
inject: {
|
|
userListPath: { default: '' },
|
|
newFeatureFlagPath: { default: '' },
|
|
canUserConfigure: {},
|
|
featureFlagsLimitExceeded: {},
|
|
featureFlagsLimit: {},
|
|
},
|
|
data() {
|
|
return {
|
|
page: getParameterByName('page') || '1',
|
|
shouldShowFeatureFlagsLimitWarning: this.featureFlagsLimitExceeded,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState([
|
|
'featureFlags',
|
|
'alerts',
|
|
'count',
|
|
'pageInfo',
|
|
'isLoading',
|
|
'hasError',
|
|
'options',
|
|
'instanceId',
|
|
'isRotating',
|
|
'hasRotateError',
|
|
]),
|
|
topAreaBaseClasses() {
|
|
return ['gl-display-flex', 'gl-flex-direction-column'];
|
|
},
|
|
canUserRotateToken() {
|
|
return this.rotateInstanceIdPath !== '';
|
|
},
|
|
shouldRenderPagination() {
|
|
return (
|
|
!this.isLoading &&
|
|
!this.hasError &&
|
|
this.featureFlags.length > 0 &&
|
|
this.pageInfo.total > this.pageInfo.perPage
|
|
);
|
|
},
|
|
shouldShowEmptyState() {
|
|
return !this.isLoading && !this.hasError && this.featureFlags.length === 0;
|
|
},
|
|
shouldRenderErrorState() {
|
|
return this.hasError && !this.isLoading;
|
|
},
|
|
shouldRenderFeatureFlags() {
|
|
return !this.isLoading && this.featureFlags.length > 0 && !this.hasError;
|
|
},
|
|
hasNewPath() {
|
|
return !isEmpty(this.newFeatureFlagPath);
|
|
},
|
|
},
|
|
created() {
|
|
this.setFeatureFlagsOptions({ page: this.page });
|
|
this.fetchFeatureFlags();
|
|
},
|
|
methods: {
|
|
...mapActions([
|
|
'setFeatureFlagsOptions',
|
|
'fetchFeatureFlags',
|
|
'rotateInstanceId',
|
|
'toggleFeatureFlag',
|
|
'clearAlert',
|
|
]),
|
|
onChangePage(page) {
|
|
this.updateFeatureFlagOptions({
|
|
/* URLS parameters are strings, we need to parse to match types */
|
|
page: Number(page).toString(),
|
|
});
|
|
},
|
|
updateFeatureFlagOptions(parameters) {
|
|
const queryString = Object.keys(parameters)
|
|
.map((parameter) => {
|
|
const value = parameters[parameter];
|
|
return `${parameter}=${encodeURIComponent(value)}`;
|
|
})
|
|
.join('&');
|
|
|
|
historyPushState(buildUrlWithCurrentLocation(`?${queryString}`));
|
|
this.setFeatureFlagsOptions(parameters);
|
|
this.fetchFeatureFlags();
|
|
},
|
|
onDismissFeatureFlagsLimitWarning() {
|
|
this.shouldShowFeatureFlagsLimitWarning = false;
|
|
},
|
|
onNewFeatureFlagCLick() {
|
|
if (this.featureFlagsLimitExceeded) {
|
|
this.shouldShowFeatureFlagsLimitWarning = true;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<gl-alert
|
|
v-if="shouldShowFeatureFlagsLimitWarning"
|
|
variant="warning"
|
|
@dismiss="onDismissFeatureFlagsLimitWarning"
|
|
>
|
|
<gl-sprintf
|
|
:message="
|
|
s__(
|
|
'FeatureFlags|Feature flags limit reached (%{featureFlagsLimit}). Delete one or more feature flags before adding new ones.',
|
|
)
|
|
"
|
|
>
|
|
<template #featureFlagsLimit>
|
|
<span>{{ featureFlagsLimit }}</span>
|
|
</template>
|
|
</gl-sprintf>
|
|
</gl-alert>
|
|
<configure-feature-flags-modal
|
|
v-if="canUserConfigure"
|
|
:instance-id="instanceId"
|
|
:is-rotating="isRotating"
|
|
:has-rotate-error="hasRotateError"
|
|
:can-user-rotate-token="canUserRotateToken"
|
|
modal-id="configure-feature-flags"
|
|
@token="rotateInstanceId()"
|
|
/>
|
|
<div :class="topAreaBaseClasses">
|
|
<div class="gl-display-flex gl-flex-direction-column gl-md-display-none!">
|
|
<gl-button
|
|
v-if="userListPath"
|
|
:href="userListPath"
|
|
variant="confirm"
|
|
category="tertiary"
|
|
class="gl-mb-3"
|
|
data-testid="ff-new-list-button"
|
|
>
|
|
{{ s__('FeatureFlags|View user lists') }}
|
|
</gl-button>
|
|
<gl-button
|
|
v-if="canUserConfigure"
|
|
v-gl-modal="'configure-feature-flags'"
|
|
variant="info"
|
|
category="secondary"
|
|
data-qa-selector="configure_feature_flags_button"
|
|
data-testid="ff-configure-button"
|
|
class="gl-mb-3"
|
|
>
|
|
{{ s__('FeatureFlags|Configure') }}
|
|
</gl-button>
|
|
|
|
<gl-button
|
|
v-if="hasNewPath"
|
|
:href="featureFlagsLimitExceeded ? '' : newFeatureFlagPath"
|
|
variant="confirm"
|
|
data-testid="ff-new-button"
|
|
@click="onNewFeatureFlagCLick"
|
|
>
|
|
{{ s__('FeatureFlags|New feature flag') }}
|
|
</gl-button>
|
|
</div>
|
|
<div
|
|
class="gl-display-flex gl-align-items-baseline gl-flex-direction-row gl-justify-content-space-between gl-mt-6"
|
|
>
|
|
<div class="gl-display-flex gl-align-items-center">
|
|
<h2 data-testid="feature-flags-tab-title" class="gl-font-size-h2 gl-my-0">
|
|
{{ s__('FeatureFlags|Feature Flags') }}
|
|
</h2>
|
|
<gl-badge v-if="count" class="gl-ml-4">{{ count }}</gl-badge>
|
|
</div>
|
|
<div
|
|
class="gl-display-none gl-md-display-flex gl-align-items-center gl-justify-content-end"
|
|
>
|
|
<gl-button
|
|
v-if="userListPath"
|
|
:href="userListPath"
|
|
variant="confirm"
|
|
category="tertiary"
|
|
class="gl-mb-0 gl-mr-4"
|
|
data-testid="ff-user-list-button"
|
|
>
|
|
{{ s__('FeatureFlags|View user lists') }}
|
|
</gl-button>
|
|
<gl-button
|
|
v-if="canUserConfigure"
|
|
v-gl-modal="'configure-feature-flags'"
|
|
variant="info"
|
|
category="secondary"
|
|
data-qa-selector="configure_feature_flags_button"
|
|
data-testid="ff-configure-button"
|
|
class="gl-mb-0 gl-mr-4"
|
|
>
|
|
{{ s__('FeatureFlags|Configure') }}
|
|
</gl-button>
|
|
|
|
<gl-button
|
|
v-if="hasNewPath"
|
|
:href="featureFlagsLimitExceeded ? '' : newFeatureFlagPath"
|
|
variant="confirm"
|
|
data-testid="ff-new-button"
|
|
@click="onNewFeatureFlagCLick"
|
|
>
|
|
{{ s__('FeatureFlags|New feature flag') }}
|
|
</gl-button>
|
|
</div>
|
|
</div>
|
|
<empty-state
|
|
:alerts="alerts"
|
|
:is-loading="isLoading"
|
|
:loading-label="s__('FeatureFlags|Loading feature flags')"
|
|
:error-state="shouldRenderErrorState"
|
|
:error-title="s__(`FeatureFlags|There was an error fetching the feature flags.`)"
|
|
:empty-state="shouldShowEmptyState"
|
|
: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"
|
|
>
|
|
<feature-flags-table :feature-flags="featureFlags" @toggle-flag="toggleFeatureFlag" />
|
|
</empty-state>
|
|
</div>
|
|
<table-pagination v-if="shouldRenderPagination" :change="onChangePage" :page-info="pageInfo" />
|
|
</div>
|
|
</template>
|