Skip to content

G
gitlab-ce
Commit 3bffcebf authored by Phil Hughes's avatar Phil Hughes
Browse files
Options

Merge branch 'afontaine/move-user-lists' into 'master' 

Move User Lists to its own Page

See merge request gitlab-org/gitlab!61830
parents f8e1d6e4 9e1da9fc
Show whitespace changes
Inline Side-by-side
Showing with 1013 additions and 690 deletions
app/assets/javascripts/feature_flags/components/feature_flags_tab.vue → app/assets/javascripts/feature_flags/components/empty_state.vue
View file @ 3bffcebf
<script>
import { GlAlert, GlBadge, GlEmptyState, GlLink, GlLoadingIcon, GlTab } from '@gitlab/ui';
import { GlAlert, GlEmptyState, GlLink, GlLoadingIcon } from '@gitlab/ui';
export default {
components: { GlAlert, GlBadge, GlEmptyState, GlLink, GlLoadingIcon, GlTab },
components: { GlAlert, GlEmptyState, GlLink, GlLoadingIcon },
inject: ['errorStateSvgPath', 'featureFlagsHelpPagePath'],
props: {
title: {
required: true,
type: String,
},
count: {
required: false,
type: Number,
......@@ -56,18 +52,11 @@ export default {
clearAlert(index) {
this.$emit('dismissAlert', index);
},
onClick(event) {
return this.$emit('changeTab', event);
},
},
};
</script>
<template>
<gl-tab @click="onClick">
<template #title>
<span data-testid="feature-flags-tab-title">{{ title }}</span>
<gl-badge size="sm" class="gl-tab-counter-badge">{{ itemCount }}</gl-badge>
</template>
<div>
<gl-alert
v-for="(message, index) in alerts"
:key="index"
......@@ -83,7 +72,7 @@ export default {
<gl-empty-state
v-else-if="errorState"
:title="errorTitle"
:description="s__(`FeatureFlags|Try again in a few moments or contact your support team.`)"
:description="s__('FeatureFlags|Try again in a few moments or contact your support team.')"
:svg-path="errorStateSvgPath"
data-testid="error-state"
/>
......@@ -101,6 +90,6 @@ export default {
</gl-link>
</template>
</gl-empty-state>
<slot> </slot>
</gl-tab>
<slot v-else> </slot>
</div>
</template>
app/assets/javascripts/feature_flags/components/feature_flags.vue
View file @ 3bffcebf
<script>
import { GlAlert, GlButton, GlModalDirective, GlSprintf, GlTabs } from '@gitlab/ui';
import { GlAlert, GlBadge, GlButton, GlModalDirective, GlSprintf } from '@gitlab/ui';
import { isEmpty } from 'lodash';
import { mapState, mapActions } from 'vuex';
......@@ -9,50 +9,40 @@ import {
historyPushState,
} from '~/lib/utils/common_utils';
import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
import { FEATURE_FLAG_SCOPE, USER_LIST_SCOPE } from '../constants';
import ConfigureFeatureFlagsModal from './configure_feature_flags_modal.vue';
import FeatureFlagsTab from './feature_flags_tab.vue';
import EmptyState from './empty_state.vue';
import FeatureFlagsTable from './feature_flags_table.vue';
import UserListsTable from './user_lists_table.vue';
const SCOPES = { FEATURE_FLAG_SCOPE, USER_LIST_SCOPE };
export default {
components: {
ConfigureFeatureFlagsModal,
FeatureFlagsTab,
EmptyState,
FeatureFlagsTable,
GlAlert,
GlBadge,
GlButton,
GlSprintf,
GlTabs,
TablePagination,
UserListsTable,
},
directives: {
GlModal: GlModalDirective,
},
inject: {
newUserListPath: { default: '' },
userListPath: { default: '' },
newFeatureFlagPath: { default: '' },
canUserConfigure: {},
featureFlagsLimitExceeded: {},
featureFlagsLimit: {},
},
data() {
const scope = getParameterByName('scope') || SCOPES.FEATURE_FLAG_SCOPE;
return {
scope,
page: getParameterByName('page') || '1',
isUserListAlertDismissed: false,
shouldShowFeatureFlagsLimitWarning: this.featureFlagsLimitExceeded,
selectedTab: Object.values(SCOPES).indexOf(scope),
};
},
computed: {
...mapState([
FEATURE_FLAG_SCOPE,
USER_LIST_SCOPE,
'featureFlags',
'alerts',
'count',
'pageInfo',
......@@ -69,64 +59,41 @@ export default {
canUserRotateToken() {
return this.rotateInstanceIdPath !== '';
},
currentlyDisplayedData() {
return this.dataForScope(this.scope);
},
shouldRenderPagination() {
return (
!this.isLoading &&
!this.hasError &&
this.currentlyDisplayedData.length > 0 &&
this.pageInfo[this.scope].total > this.pageInfo[this.scope].perPage
this.featureFlags.length > 0 &&
this.pageInfo.total > this.pageInfo.perPage
);
},
shouldShowEmptyState() {
return !this.isLoading && !this.hasError && this.currentlyDisplayedData.length === 0;
return !this.isLoading && !this.hasError && this.featureFlags.length === 0;
},
shouldRenderErrorState() {
return this.hasError && !this.isLoading;
},
shouldRenderFeatureFlags() {
return this.shouldRenderTable(SCOPES.FEATURE_FLAG_SCOPE);
},
shouldRenderUserLists() {
return this.shouldRenderTable(SCOPES.USER_LIST_SCOPE);
return !this.isLoading && this.featureFlags.length > 0 && !this.hasError;
},
hasNewPath() {
return !isEmpty(this.newFeatureFlagPath);
},
},
created() {
this.setFeatureFlagsOptions({ scope: this.scope, page: this.page });
this.setFeatureFlagsOptions({ page: this.page });
this.fetchFeatureFlags();
this.fetchUserLists();
},
methods: {
...mapActions([
'setFeatureFlagsOptions',
'fetchFeatureFlags',
'fetchUserLists',
'rotateInstanceId',
'toggleFeatureFlag',
'deleteUserList',
'clearAlert',
]),
onChangeTab(scope) {
this.scope = scope;
this.updateFeatureFlagOptions({
scope,
page: '1',
});
},
onFeatureFlagsTab() {
this.onChangeTab(SCOPES.FEATURE_FLAG_SCOPE);
},
onUserListsTab() {
this.onChangeTab(SCOPES.USER_LIST_SCOPE);
},
onChangePage(page) {
this.updateFeatureFlagOptions({
scope: this.scope,
/* URLS parameters are strings, we need to parse to match types */
page: Number(page).toString(),
});
......@@ -141,22 +108,7 @@ export default {
historyPushState(buildUrlWithCurrentLocation(`?${queryString}`));
this.setFeatureFlagsOptions(parameters);
if (this.scope === SCOPES.FEATURE_FLAG_SCOPE) {
this.fetchFeatureFlags();
} else {
this.fetchUserLists();
}
},
shouldRenderTable(scope) {
return (
!this.isLoading &&
this.dataForScope(scope).length > 0 &&
!this.hasError &&
this.scope === scope
);
},
dataForScope(scope) {
return this[scope];
},
onDismissFeatureFlagsLimitWarning() {
this.shouldShowFeatureFlagsLimitWarning = false;
......@@ -199,6 +151,16 @@ export default {
/>
<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'"
......@@ -211,17 +173,6 @@ export default {
{{ s__('FeatureFlags|Configure') }}
</gl-button>
<gl-button
v-if="newUserListPath"
:href="newUserListPath"
variant="confirm"
category="secondary"
class="gl-mb-3"
data-testid="ff-new-list-button"
>
{{ s__('FeatureFlags|New user list') }}
</gl-button>
<gl-button
v-if="hasNewPath"
:href="featureFlagsLimitExceeded ? '' : newFeatureFlagPath"
......@@ -232,61 +183,28 @@ export default {
{{ s__('FeatureFlags|New feature flag') }}
</gl-button>
</div>
<gl-tabs v-model="selectedTab" class="gl-align-items-center gl-w-full">
<feature-flags-tab
:title="s__('FeatureFlags|Feature Flags')"
:count="count.featureFlags"
: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"
@changeTab="onFeatureFlagsTab"
<div
class="gl-display-flex gl-align-items-baseline gl-flex-direction-row gl-justify-content-space-between gl-mt-6"
>
<feature-flags-table
v-if="shouldRenderFeatureFlags"
:feature-flags="featureFlags"
@toggle-flag="toggleFeatureFlag"
/>
</feature-flags-tab>
<feature-flags-tab
:title="s__('FeatureFlags|User Lists')"
:count="count.userLists"
:alerts="alerts"
:is-loading="isLoading"
:loading-label="s__('FeatureFlags|Loading user lists')"
:error-state="shouldRenderErrorState"
:error-title="s__(`FeatureFlags|There was an error fetching the user lists.`)"
:empty-state="shouldShowEmptyState"
: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"
<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"
>
<user-lists-table
v-if="shouldRenderUserLists"
:user-lists="userLists"
@delete="deleteUserList"
/>
</feature-flags-tab>
<template #tabs-end>
<li
class="gl-display-none gl-md-display-flex gl-align-items-center gl-flex-fill-1 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'"
......@@ -299,17 +217,6 @@ export default {
{{ s__('FeatureFlags|Configure') }}
</gl-button>
<gl-button
v-if="newUserListPath"
:href="newUserListPath"
variant="confirm"
category="secondary"
class="gl-mb-0 gl-mr-4"
data-testid="ff-new-list-button"
>
{{ s__('FeatureFlags|New user list') }}
</gl-button>
<gl-button
v-if="hasNewPath"
:href="featureFlagsLimitExceeded ? '' : newFeatureFlagPath"
......@@ -319,14 +226,27 @@ export default {
>
{{ s__('FeatureFlags|New feature flag') }}
</gl-button>
</li>
</template>
</gl-tabs>
</div>
<table-pagination
v-if="shouldRenderPagination"
:change="onChangePage"
:page-info="pageInfo[scope]"
/>
</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>
app/assets/javascripts/feature_flags/constants.js
View file @ 3bffcebf
......@@ -21,9 +21,6 @@ export const fetchUserIdParams = property(['parameters', 'userIds']);
export const NEW_VERSION_FLAG = 'new_version_flag';
export const LEGACY_FLAG = 'legacy_flag';
export const FEATURE_FLAG_SCOPE = 'featureFlags';
export const USER_LIST_SCOPE = 'userLists';
export const EMPTY_PARAMETERS = { parameters: {}, userListId: undefined };
export const STRATEGY_SELECTIONS = [
......
app/assets/javascripts/feature_flags/index.js
View file @ 3bffcebf
......@@ -22,7 +22,7 @@ export default () => {
unleashApiUrl,
canUserAdminFeatureFlag,
newFeatureFlagPath,
newUserListPath,
userListPath,
featureFlagsLimitExceeded,
featureFlagsLimit,
} = el.dataset;
......@@ -40,9 +40,9 @@ export default () => {
csrfToken: csrf.token,
canUserConfigure: canUserAdminFeatureFlag !== undefined,
newFeatureFlagPath,
newUserListPath,
featureFlagsLimitExceeded: featureFlagsLimitExceeded !== undefined,
featureFlagsLimit,
userListPath,
},
render(createElement) {
return createElement(FeatureFlagsComponent);
......
app/assets/javascripts/feature_flags/store/index/actions.js
View file @ 3bffcebf
import Api from '~/api';
import axios from '~/lib/utils/axios_utils';
import * as types from './mutation_types';
......@@ -26,19 +25,6 @@ export const receiveFeatureFlagsSuccess = ({ commit }, response) =>
commit(types.RECEIVE_FEATURE_FLAGS_SUCCESS, response);
export const receiveFeatureFlagsError = ({ commit }) => commit(types.RECEIVE_FEATURE_FLAGS_ERROR);
export const fetchUserLists = ({ state, dispatch }) => {
dispatch('requestUserLists');
return Api.fetchFeatureFlagUserLists(state.projectId, state.options.page)
.then(({ data, headers }) => dispatch('receiveUserListsSuccess', { data, headers }))
.catch(() => dispatch('receiveUserListsError'));
};
export const requestUserLists = ({ commit }) => commit(types.REQUEST_USER_LISTS);
export const receiveUserListsSuccess = ({ commit }, response) =>
commit(types.RECEIVE_USER_LISTS_SUCCESS, response);
export const receiveUserListsError = ({ commit }) => commit(types.RECEIVE_USER_LISTS_ERROR);
export const toggleFeatureFlag = ({ dispatch }, flag) => {
dispatch('updateFeatureFlag', flag);
......@@ -57,26 +43,6 @@ export const receiveUpdateFeatureFlagSuccess = ({ commit }, data) =>
export const receiveUpdateFeatureFlagError = ({ commit }, id) =>
commit(types.RECEIVE_UPDATE_FEATURE_FLAG_ERROR, id);
export const deleteUserList = ({ state, dispatch }, list) => {
dispatch('requestDeleteUserList', list);
return Api.deleteFeatureFlagUserList(state.projectId, list.iid)
.then(() => dispatch('fetchUserLists'))
.catch((error) =>
dispatch('receiveDeleteUserListError', {
list,
error: error?.response?.data ?? error,
}),
);
};
export const requestDeleteUserList = ({ commit }, list) =>
commit(types.REQUEST_DELETE_USER_LIST, list);
export const receiveDeleteUserListError = ({ commit }, { error, list }) => {
commit(types.RECEIVE_DELETE_USER_LIST_ERROR, { error, list });
};
export const rotateInstanceId = ({ state, dispatch }) => {
dispatch('requestRotateInstanceId');
......
app/assets/javascripts/feature_flags/store/index/mutation_types.js
View file @ 3bffcebf
......@@ -4,13 +4,6 @@ export const REQUEST_FEATURE_FLAGS = 'REQUEST_FEATURE_FLAGS';
export const RECEIVE_FEATURE_FLAGS_SUCCESS = 'RECEIVE_FEATURE_FLAGS_SUCCESS';
export const RECEIVE_FEATURE_FLAGS_ERROR = 'RECEIVE_FEATURE_FLAGS_ERROR';
export const REQUEST_USER_LISTS = 'REQUEST_USER_LISTS';
export const RECEIVE_USER_LISTS_SUCCESS = 'RECEIVE_USER_LISTS_SUCCESS';
export const RECEIVE_USER_LISTS_ERROR = 'RECEIVE_USER_LISTS_ERROR';
export const REQUEST_DELETE_USER_LIST = 'REQUEST_DELETE_USER_LIST';
export const RECEIVE_DELETE_USER_LIST_ERROR = 'RECEIVE_DELETE_USER_LIST_ERROR';
export const UPDATE_FEATURE_FLAG = 'UPDATE_FEATURE_FLAG';
export const RECEIVE_UPDATE_FEATURE_FLAG_SUCCESS = 'RECEIVE_UPDATE_FEATURE_FLAG_SUCCESS';
export const RECEIVE_UPDATE_FEATURE_FLAG_ERROR = 'RECEIVE_UPDATE_FEATURE_FLAG_ERROR';
......
app/assets/javascripts/feature_flags/store/index/mutations.js
View file @ 3bffcebf
import Vue from 'vue';
import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
import { FEATURE_FLAG_SCOPE, USER_LIST_SCOPE } from '../../constants';
import { mapToScopesViewModel } from '../helpers';
import * as types from './mutation_types';
const mapFlag = (flag) => ({ ...flag, scopes: mapToScopesViewModel(flag.scopes || []) });
const updateFlag = (state, flag) => {
const index = state[FEATURE_FLAG_SCOPE].findIndex(({ id }) => id === flag.id);
Vue.set(state[FEATURE_FLAG_SCOPE], index, flag);
const index = state.featureFlags.findIndex(({ id }) => id === flag.id);
Vue.set(state.featureFlags, index, flag);
};
const createPaginationInfo = (state, headers) => {
const createPaginationInfo = (headers) => {
let paginationInfo;
if (Object.keys(headers).length) {
const normalizedHeaders = normalizeHeaders(headers);
......@@ -32,44 +31,16 @@ export default {
[types.RECEIVE_FEATURE_FLAGS_SUCCESS](state, response) {
state.isLoading = false;
state.hasError = false;
state[FEATURE_FLAG_SCOPE] = (response.data.feature_flags || []).map(mapFlag);
state.featureFlags = (response.data.feature_flags || []).map(mapFlag);
const paginationInfo = createPaginationInfo(state, response.headers);
state.count = {
...state.count,
[FEATURE_FLAG_SCOPE]: paginationInfo?.total ?? state[FEATURE_FLAG_SCOPE].length,
};
state.pageInfo = {
...state.pageInfo,
[FEATURE_FLAG_SCOPE]: paginationInfo,
};
const paginationInfo = createPaginationInfo(response.headers);
state.count = paginationInfo?.total ?? state.featureFlags.length;
state.pageInfo = paginationInfo;
},
[types.RECEIVE_FEATURE_FLAGS_ERROR](state) {
state.isLoading = false;
state.hasError = true;
},
[types.REQUEST_USER_LISTS](state) {
state.isLoading = true;
},
[types.RECEIVE_USER_LISTS_SUCCESS](state, response) {
state.isLoading = false;
state.hasError = false;
state[USER_LIST_SCOPE] = response.data || [];
const paginationInfo = createPaginationInfo(state, response.headers);
state.count = {
...state.count,
[USER_LIST_SCOPE]: paginationInfo?.total ?? state[USER_LIST_SCOPE].length,
};
state.pageInfo = {
...state.pageInfo,
[USER_LIST_SCOPE]: paginationInfo,
};
},
[types.RECEIVE_USER_LISTS_ERROR](state) {
state.isLoading = false;
state.hasError = true;
},
[types.REQUEST_ROTATE_INSTANCE_ID](state) {
state.isRotating = true;
state.hasRotateError = false;
......@@ -90,18 +61,9 @@ export default {
updateFlag(state, mapFlag(data));
},
[types.RECEIVE_UPDATE_FEATURE_FLAG_ERROR](state, i) {
const flag = state[FEATURE_FLAG_SCOPE].find(({ id }) => i === id);
const flag = state.featureFlags.find(({ id }) => i === id);
updateFlag(state, { ...flag, active: !flag.active });
},
[types.REQUEST_DELETE_USER_LIST](state, list) {
state.userLists = state.userLists.filter((l) => l !== list);
},
[types.RECEIVE_DELETE_USER_LIST_ERROR](state, { error, list }) {
state.isLoading = false;
state.hasError = false;
state.alerts = [].concat(error.message);
state.userLists = state.userLists.concat(list).sort((l1, l2) => l1.iid - l2.iid);
},
[types.RECEIVE_CLEAR_ALERT](state, index) {
state.alerts.splice(index, 1);
},
......
app/assets/javascripts/feature_flags/store/index/state.js
View file @ 3bffcebf
import { FEATURE_FLAG_SCOPE, USER_LIST_SCOPE } from '../../constants';
export default ({ endpoint, projectId, unleashApiInstanceId, rotateInstanceIdPath }) => ({
[FEATURE_FLAG_SCOPE]: [],
[USER_LIST_SCOPE]: [],
featureFlags: [],
alerts: [],
count: {},
pageInfo: { [FEATURE_FLAG_SCOPE]: {}, [USER_LIST_SCOPE]: {} },
count: 0,
pageInfo: {},
isLoading: true,
hasError: false,
endpoint,
......
app/assets/javascripts/pages/projects/feature_flags_user_lists/index/index.js 0 → 100644
View file @ 3bffcebf
/* eslint-disable no-new */
import Vue from 'vue';
import Vuex from 'vuex';
import UserLists from '~/user_lists/components/user_lists.vue';
import createStore from '~/user_lists/store/index';
Vue.use(Vuex);
const el = document.querySelector('#js-user-lists');
const { featureFlagsHelpPagePath, errorStateSvgPath, projectId, newUserListPath } = el.dataset;
new Vue({
el,
store: createStore({ projectId }),
provide: {
featureFlagsHelpPagePath,
errorStateSvgPath,
newUserListPath,
},
render(createElement) {
return createElement(UserLists);
},
});
app/assets/javascripts/user_lists/components/user_lists.vue 0 → 100644
View file @ 3bffcebf
<script>
import { GlBadge, GlButton } from '@gitlab/ui';
import { isEmpty } from 'lodash';
import { mapState, mapActions } from 'vuex';
import EmptyState from '~/feature_flags/components/empty_state.vue';
import {
buildUrlWithCurrentLocation,
getParameterByName,
historyPushState,
} from '~/lib/utils/common_utils';
import { objectToQuery } from '~/lib/utils/url_utility';
import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
import UserListsTable from './user_lists_table.vue';
export default {
components: {
EmptyState,
UserListsTable,
GlBadge,
GlButton,
TablePagination,
},
inject: {
newUserListPath: { default: '' },
},
data() {
return {
page: getParameterByName('page') || '1',
};
},
computed: {
...mapState(['userLists', 'alerts', 'count', 'pageInfo', 'isLoading', 'hasError', 'options']),
canUserRotateToken() {
return this.rotateInstanceIdPath !== '';
},
shouldRenderPagination() {
return (
!this.isLoading &&
!this.hasError &&
this.userLists.length > 0 &&
this.pageInfo.total > this.pageInfo.perPage
);
},
shouldShowEmptyState() {
return !this.isLoading && !this.hasError && this.userLists.length === 0;
},
shouldRenderErrorState() {
return this.hasError && !this.isLoading;
},
shouldRenderUserLists() {
return !this.isLoading && this.userLists.length > 0 && !this.hasError;
},
hasNewPath() {
return !isEmpty(this.newUserListPath);
},
},
created() {
this.setUserListsOptions({ page: this.page });
this.fetchUserLists();
},
methods: {
...mapActions(['setUserListsOptions', 'fetchUserLists', 'clearAlert', 'deleteUserList']),
onChangePage(page) {
this.updateUserListsOptions({
/* URLS parameters are strings, we need to parse to match types */
page: Number(page).toString(),
});
},
updateUserListsOptions(parameters) {
const queryString = objectToQuery(parameters);
historyPushState(buildUrlWithCurrentLocation(`?${queryString}`));
this.setUserListsOptions(parameters);
this.fetchUserLists();
},
},
};
</script>
<template>
<div>
<div class="gl-display-flex gl-flex-direction-column">
<div class="gl-display-flex gl-flex-direction-column gl-md-display-none!">
<gl-button v-if="hasNewPath" :href="newUserListPath" variant="confirm">
{{ s__('UserLists|New user list') }}
</gl-button>
</div>
<div
class="gl-display-flex gl-align-items-baseline gl-flex-direction-column gl-md-flex-direction-row gl-justify-content-space-between gl-mt-6"
>
<div class="gl-display-flex gl-align-items-center">
<h2 class="gl-font-size-h2 gl-my-0">
{{ s__('UserLists|User Lists') }}
</h2>
<gl-badge v-if="count" class="gl-ml-4">{{ count }}</gl-badge>
</div>
<div class="gl-display-flex gl-align-items-center gl-justify-content-end">
<gl-button v-if="hasNewPath" :href="newUserListPath" variant="confirm">
{{ s__('UserLists|New user list') }}
</gl-button>
</div>
</div>
<empty-state
:alerts="alerts"
:is-loading="isLoading"
:loading-label="s__('UserLists|Loading user lists')"
:error-state="shouldRenderErrorState"
:error-title="s__('UserLists|There was an error fetching the user lists.')"
:empty-state="shouldShowEmptyState"
:empty-title="s__('UserLists|Get started with user lists')"
:empty-description="
s__('UserLists|User lists allow you to define a set of users to use with Feature Flags.')
"
@dismissAlert="clearAlert"
>
<user-lists-table :user-lists="userLists" @delete="deleteUserList" />
</empty-state>
</div>
<table-pagination v-if="shouldRenderPagination" :change="onChangePage" :page-info="pageInfo" />
</div>
</template>
app/assets/javascripts/user_lists/store/index/actions.js 0 → 100644
View file @ 3bffcebf
import Api from '~/api';
import * as types from './mutation_types';
export const setUserListsOptions = ({ commit }, options) =>
commit(types.SET_USER_LISTS_OPTIONS, options);
export const fetchUserLists = ({ state, dispatch }) => {
dispatch('requestUserLists');
return Api.fetchFeatureFlagUserLists(state.projectId, state.options.page)
.then(({ data, headers }) => dispatch('receiveUserListsSuccess', { data, headers }))
.catch(() => dispatch('receiveUserListsError'));
};
export const requestUserLists = ({ commit }) => commit(types.REQUEST_USER_LISTS);
export const receiveUserListsSuccess = ({ commit }, response) =>
commit(types.RECEIVE_USER_LISTS_SUCCESS, response);
export const receiveUserListsError = ({ commit }) => commit(types.RECEIVE_USER_LISTS_ERROR);
export const deleteUserList = ({ state, dispatch }, list) => {
dispatch('requestDeleteUserList', list);
return Api.deleteFeatureFlagUserList(state.projectId, list.iid)
.then(() => dispatch('fetchUserLists'))
.catch((error) =>
dispatch('receiveDeleteUserListError', {
list,
error: error?.response?.data ?? error,
}),
);
};
export const requestDeleteUserList = ({ commit }, list) =>
commit(types.REQUEST_DELETE_USER_LIST, list);
export const receiveDeleteUserListError = ({ commit }, { error, list }) =>
commit(types.RECEIVE_DELETE_USER_LIST_ERROR, { error, list });
export const clearAlert = ({ commit }, index) => commit(types.RECEIVE_CLEAR_ALERT, index);
app/assets/javascripts/user_lists/store/index/index.js 0 → 100644
View file @ 3bffcebf
import Vuex from 'vuex';
import * as actions from './actions';
import mutations from './mutations';
import createState from './state';
export default (initialState) =>
new Vuex.Store({
actions,
mutations,
state: createState(initialState),
});
app/assets/javascripts/user_lists/store/index/mutation_types.js 0 → 100644
View file @ 3bffcebf
export const SET_USER_LISTS_OPTIONS = 'SET_FEATURE_FLAGS_OPTIONS';
export const REQUEST_USER_LISTS = 'REQUEST_USER_LISTS';
export const RECEIVE_USER_LISTS_SUCCESS = 'RECEIVE_USER_LISTS_SUCCESS';
export const RECEIVE_USER_LISTS_ERROR = 'RECEIVE_USER_LISTS_ERROR';
export const REQUEST_DELETE_USER_LIST = 'REQUEST_DELETE_USER_LIST';
export const RECEIVE_DELETE_USER_LIST_ERROR = 'RECEIVE_DELETE_USER_LIST_ERROR';
export const RECEIVE_CLEAR_ALERT = 'RECEIVE_CLEAR_ALERT';
app/assets/javascripts/user_lists/store/index/mutations.js 0 → 100644
View file @ 3bffcebf
import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
import * as types from './mutation_types';
export default {
[types.SET_USER_LISTS_OPTIONS](state, options = {}) {
state.options = options;
},
[types.REQUEST_USER_LISTS](state) {
state.isLoading = true;
},
[types.RECEIVE_USER_LISTS_SUCCESS](state, { data, headers }) {
state.isLoading = false;
state.hasError = false;
state.userLists = data || [];
const normalizedHeaders = normalizeHeaders(headers);
const paginationInfo = parseIntPagination(normalizedHeaders);
state.count = paginationInfo?.total ?? state.userLists.length;
state.pageInfo = paginationInfo;
},
[types.RECEIVE_USER_LISTS_ERROR](state) {
state.isLoading = false;
state.hasError = true;
},
[types.REQUEST_DELETE_USER_LIST](state, list) {
state.userLists = state.userLists.filter((l) => l !== list);
},
[types.RECEIVE_DELETE_USER_LIST_ERROR](state, { error, list }) {
state.isLoading = false;
state.hasError = false;
state.alerts = [].concat(error.message);
state.userLists = state.userLists.concat(list).sort((l1, l2) => l1.iid - l2.iid);
},
[types.RECEIVE_CLEAR_ALERT](state, index) {
state.alerts.splice(index, 1);
},
};
app/assets/javascripts/user_lists/store/index/state.js 0 → 100644
View file @ 3bffcebf
export default ({ projectId }) => ({
userLists: [],
alerts: [],
count: 0,
pageInfo: {},
isLoading: true,
hasError: false,
options: {},
projectId,
});
app/controllers/projects/feature_flags_user_lists_controller.rb
View file @ 3bffcebf
......@@ -6,6 +6,9 @@ class Projects::FeatureFlagsUserListsController < Projects::ApplicationControlle
feature_category :feature_flags
def index
end
def new
end
......
app/views/projects/feature_flags/index.html.haml
View file @ 3bffcebf
......@@ -14,4 +14,4 @@
"can-user-admin-feature-flag" => can?(current_user, :admin_feature_flag, @project),
"new-feature-flag-path" => can?(current_user, :create_feature_flag, @project) ? new_project_feature_flag_path(@project): nil,
"rotate-instance-id-path" => can?(current_user, :admin_feature_flags_client, @project) ? reset_token_project_feature_flags_client_path(@project, format: :json) : nil,
"new-user-list-path" => can?(current_user, :admin_feature_flags_user_lists, @project) ? new_project_feature_flags_user_list_path(@project) : nil } }
"user-list-path" => can?(current_user, :admin_feature_flags_user_lists, @project) ? project_feature_flags_user_lists_path(@project) : nil } }
app/views/projects/feature_flags_user_lists/edit.html.haml
View file @ 3bffcebf
- add_to_breadcrumbs s_('FeatureFlags|Feature Flags'), project_feature_flags_path(@project)
- add_to_breadcrumbs s_('FeatureFlags|User Lists'), project_feature_flags_user_lists_path(@project)
- breadcrumb_title s_('FeatureFlags|Edit User List')
- page_title s_('FeatureFlags|Edit User List')
......
app/views/projects/feature_flags_user_lists/index.html.haml 0 → 100644
View file @ 3bffcebf
- add_to_breadcrumbs s_('FeatureFlags|Feature Flags'), project_feature_flags_path(@project)
- breadcrumb_title s_('FeatureFlags|User Lists')
- page_title s_('FeatureFlags|Feature Flag User Lists')
#js-user-lists{ data: { project_id: @project.id,
feature_flags_help_page_path: help_page_path("operations/feature_flags"),
new_user_list_path: can?(current_user, :create_feature_flag, @project) ? new_project_feature_flags_user_list_path(@project): nil,
error_state_svg_path: image_path('illustrations/feature_flag.svg') } }
app/views/projects/feature_flags_user_lists/new.html.haml
View file @ 3bffcebf
- @breadcrumb_link = new_project_feature_flags_user_list_path(@project)
- add_to_breadcrumbs s_('FeatureFlags|Feature Flags'), project_feature_flags_path(@project)
- add_to_breadcrumbs s_('FeatureFlags|User Lists'), project_feature_flags_user_lists_path(@project)
- breadcrumb_title s_('FeatureFlags|New User List')
- page_title s_('FeatureFlags|New User List')
......
app/views/projects/feature_flags_user_lists/show.html.haml
View file @ 3bffcebf
- add_to_breadcrumbs s_('FeatureFlags|Feature Flags'), project_feature_flags_path(@project)
- add_to_breadcrumbs s_('FeatureFlags|User Lists'), project_feature_flags_user_lists_path(@project)
- breadcrumb_title s_('FeatureFlags|List details')
- page_title s_('FeatureFlags|Feature Flag User List Details')
......
config/routes/project.rb
View file @ 3bffcebf
......@@ -403,7 +403,7 @@ constraints(::Constraints::ProjectUrlConstrainer.new) do
resource :feature_flags_client, only: [] do
post :reset_token
end
resources :feature_flags_user_lists, param: :iid, only: [:new, :edit, :show]
resources :feature_flags_user_lists, param: :iid, only: [:index, :new, :edit, :show]
get '/schema/:branch/*filename',
to: 'web_ide_schemas#show',
......
doc/operations/feature_flags.md
View file @ 3bffcebf
......@@ -184,14 +184,16 @@ For example:
#### Create a user list
> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/13308) in GitLab 13.3.
> - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/13308) in GitLab 13.3.
> - [Updated](https://gitlab.com/gitlab-org/gitlab/-/issues/322425) in GitLab 14.0.
To create a user list:
1. In your project, navigate to **Operations > Feature Flags**.
1. Click on **New list**.
1. Select **View user lists**
1. Select **New user list**.
1. Enter a name for the list.
1. Click **Create**.
1. Select **Create**.
You can view a list's User IDs by clicking the **{pencil}** (edit) button next to it.
When viewing a list, you can rename it by clicking the **Edit** button.
......
locale/gitlab.pot
View file @ 3bffcebf
......@@ -13782,6 +13782,9 @@ msgstr ""
msgid "FeatureFlags|Feature Flag User List Details"
msgstr ""
msgid "FeatureFlags|Feature Flag User Lists"
msgstr ""
msgid "FeatureFlags|Feature Flag behavior is built up by creating a set of rules to define the status of target environments. A default wildcard rule %{codeStart}*%{codeEnd} for %{boldStart}All Environments%{boldEnd} is set, and you are able to add as many rules as you need by choosing environment specs below. You can toggle the behavior for each of your rules to set them %{boldStart}Active%{boldEnd} or %{boldStart}Inactive%{boldEnd}."
msgstr ""
......@@ -13806,9 +13809,6 @@ msgstr ""
msgid "FeatureFlags|Get started with feature flags"
msgstr ""
msgid "FeatureFlags|Get started with user lists"
msgstr ""
msgid "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."
msgstr ""
......@@ -13836,9 +13836,6 @@ msgstr ""
msgid "FeatureFlags|Loading feature flags"
msgstr ""
msgid "FeatureFlags|Loading user lists"
msgstr ""
msgid "FeatureFlags|More information"
msgstr ""
......@@ -13857,9 +13854,6 @@ msgstr ""
msgid "FeatureFlags|New feature flag"
msgstr ""
msgid "FeatureFlags|New user list"
msgstr ""
msgid "FeatureFlags|No user list selected"
msgstr ""
......@@ -13902,9 +13896,6 @@ msgstr ""
msgid "FeatureFlags|There was an error fetching the feature flags."
msgstr ""
msgid "FeatureFlags|There was an error fetching the user lists."
msgstr ""
msgid "FeatureFlags|To prevent accidental actions we ask you to confirm your intention. Please type %{projectName} to proceed or close this modal to cancel."
msgstr ""
......@@ -13920,7 +13911,7 @@ msgstr ""
msgid "FeatureFlags|User Lists"
msgstr ""
msgid "FeatureFlags|User lists allow you to define a set of users to use with Feature Flags."
msgid "FeatureFlags|View user lists"
msgstr ""
msgid "FeatureFlag|Percentage"
......@@ -35554,27 +35545,45 @@ msgstr ""
msgid "UserLists|Feature flag user list"
msgstr ""
msgid "UserLists|Get started with user lists"
msgstr ""
msgid "UserLists|Lists allow you to define a set of users to be used with feature flags. %{linkStart}Read more about feature flag lists.%{linkEnd}"
msgstr ""
msgid "UserLists|Loading user lists"
msgstr ""
msgid "UserLists|Name"
msgstr ""
msgid "UserLists|New list"
msgstr ""
msgid "UserLists|New user list"
msgstr ""
msgid "UserLists|Save"
msgstr ""
msgid "UserLists|There are no users"
msgstr ""
msgid "UserLists|There was an error fetching the user lists."
msgstr ""
msgid "UserLists|User ID"
msgstr ""
msgid "UserLists|User IDs"
msgstr ""
msgid "UserLists|User Lists"
msgstr ""
msgid "UserLists|User lists allow you to define a set of users to use with Feature Flags."
msgstr ""
msgid "UserList|Delete %{name}?"
msgstr ""
......
spec/controllers/projects/feature_flags_user_lists_controller_spec.rb
View file @ 3bffcebf
......@@ -16,6 +16,39 @@ RSpec.describe Projects::FeatureFlagsUserListsController do
{ namespace_id: project.namespace, project_id: project }.merge(extra_params)
end
describe 'GET #index' do
it 'redirects when the user is unauthenticated' do
get(:index, params: request_params)
expect(response).to redirect_to(new_user_session_path)
end
it 'returns not found if the user does not belong to the project' do
user = create(:user)
sign_in(user)
get(:index, params: request_params)
expect(response).to have_gitlab_http_status(:not_found)
end
it 'returns not found for a reporter' do
sign_in(reporter)
get(:index, params: request_params)
expect(response).to have_gitlab_http_status(:not_found)
end
it 'renders the new page for a developer' do
sign_in(developer)
get(:index, params: request_params)
expect(response).to have_gitlab_http_status(:ok)
end
end
describe 'GET #new' do
it 'redirects when the user is unauthenticated' do
get(:new, params: request_params)
......
spec/features/projects/feature_flag_user_lists/user_deletes_feature_flag_user_list_spec.rb
View file @ 3bffcebf
......@@ -17,12 +17,13 @@ RSpec.describe 'User deletes feature flag user list', :js do
end
it 'deletes the list' do
visit(project_feature_flags_path(project, scope: 'userLists'))
visit(project_feature_flags_user_lists_path(project, scope: 'userLists'))
delete_user_list_button.click
delete_user_list_modal_confirmation_button.click
expect(page).to have_text('Lists 0')
expect(page).to have_text('Lists')
expect(page).not_to have_selector('[data-testid="ffUserListName"]')
end
end
......@@ -34,7 +35,7 @@ RSpec.describe 'User deletes feature flag user list', :js do
end
it 'does not delete the list' do
visit(project_feature_flags_path(project, scope: 'userLists'))
visit(project_feature_flags_user_lists_path(project, scope: 'userLists'))
delete_user_list_button.click
delete_user_list_modal_confirmation_button.click
......
spec/frontend/feature_flags/components/feature_flags_tab_spec.js → spec/frontend/feature_flags/components/empty_state_spec.js
View file @ 3bffcebf
import { GlAlert, GlBadge, GlEmptyState, GlLink, GlLoadingIcon, GlTabs } from '@gitlab/ui';
import { GlAlert, GlEmptyState, GlLink, GlLoadingIcon } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import FeatureFlagsTab from '~/feature_flags/components/feature_flags_tab.vue';
import EmptyState from '~/feature_flags/components/empty_state.vue';
const DEFAULT_PROPS = {
title: 'test',
count: 5,
alerts: ['an alert', 'another alert'],
isLoading: false,
loadingLabel: 'test loading',
errorState: false,
errorTitle: 'test title',
emptyState: true,
emptyState: false,
emptyTitle: 'test empty',
emptyDescription: 'empty description',
};
......@@ -27,13 +25,10 @@ describe('feature_flags/components/feature_flags_tab.vue', () => {
mount(
{
components: {
GlTabs,
FeatureFlagsTab,
EmptyState,
},
render(h) {
return h(GlTabs, [
h(FeatureFlagsTab, { props: this.$attrs, on: this.$listeners }, this.$slots.default),
]);
return h(EmptyState, { props: this.$attrs, on: this.$listeners }, this.$slots.default);
},
},
{
......@@ -72,7 +67,7 @@ describe('feature_flags/components/feature_flags_tab.vue', () => {
it('should emit a dismiss event for a dismissed alert', () => {
alerts.at(0).vm.$emit('dismiss');
expect(wrapper.find(FeatureFlagsTab).emitted('dismissAlert')).toEqual([[0]]);
expect(wrapper.find(EmptyState).emitted('dismissAlert')).toEqual([[0]]);
});
});
......@@ -138,30 +133,4 @@ describe('feature_flags/components/feature_flags_tab.vue', () => {
expect(slot.text()).toBe('testing');
});
});
describe('count', () => {
it('should display a count if there is one', async () => {
wrapper = factory();
await wrapper.vm.$nextTick();
expect(wrapper.find(GlBadge).text()).toBe(DEFAULT_PROPS.count.toString());
});
it('should display 0 if there is no count', async () => {
wrapper = factory({ count: undefined });
await wrapper.vm.$nextTick();
expect(wrapper.find(GlBadge).text()).toBe('0');
});
});
describe('title', () => {
it('should show the title', async () => {
wrapper = factory();
await wrapper.vm.$nextTick();
expect(wrapper.find('[data-testid="feature-flags-tab-title"]').text()).toBe(
DEFAULT_PROPS.title,
);
});
});
});
spec/frontend/feature_flags/components/feature_flags_spec.js
View file @ 3bffcebf
import { GlAlert, GlEmptyState, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import { GlAlert, GlEmptyState, GlLoadingIcon } from '@gitlab/ui';
import { mount, createLocalVue } from '@vue/test-utils';
import MockAdapter from 'axios-mock-adapter';
import Vuex from 'vuex';
import waitForPromises from 'helpers/wait_for_promises';
import { TEST_HOST } from 'spec/test_constants';
import Api from '~/api';
import ConfigureFeatureFlagsModal from '~/feature_flags/components/configure_feature_flags_modal.vue';
import EmptyState from '~/feature_flags/components/empty_state.vue';
import FeatureFlagsComponent from '~/feature_flags/components/feature_flags.vue';
import FeatureFlagsTab from '~/feature_flags/components/feature_flags_tab.vue';
import FeatureFlagsTable from '~/feature_flags/components/feature_flags_table.vue';
import UserListsTable from '~/feature_flags/components/user_lists_table.vue';
import { FEATURE_FLAG_SCOPE, USER_LIST_SCOPE } from '~/feature_flags/constants';
import createStore from '~/feature_flags/store/index';
import axios from '~/lib/utils/axios_utils';
import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
import { getRequestData, userList } from '../mock_data';
import { getRequestData } from '../mock_data';
const localVue = createLocalVue();
localVue.use(Vuex);
......@@ -28,7 +26,7 @@ describe('Feature flags', () => {
featureFlagsLimit: '200',
featureFlagsLimitExceeded: false,
newFeatureFlagPath: 'feature-flags/new',
newUserListPath: '/user-list/new',
userListPath: '/user-list',
unleashApiUrl: `${TEST_HOST}/api/unleash`,
projectName: 'fakeProjectName',
errorStateSvgPath: '/assets/illustrations/feature_flag.svg',
......@@ -44,36 +42,25 @@ describe('Feature flags', () => {
let mock;
let store;
const factory = (provide = mockData, fn = shallowMount) => {
const factory = (provide = mockData, fn = mount) => {
store = createStore(mockState);
wrapper = fn(FeatureFlagsComponent, {
localVue,
store,
provide,
stubs: {
FeatureFlagsTab,
EmptyState,
},
});
};
const configureButton = () => wrapper.find('[data-testid="ff-configure-button"]');
const newButton = () => wrapper.find('[data-testid="ff-new-button"]');
const newUserListButton = () => wrapper.find('[data-testid="ff-new-list-button"]');
const limitAlert = () => wrapper.find(GlAlert);
const userListButton = () => wrapper.find('[data-testid="ff-user-list-button"]');
const limitAlert = () => wrapper.findComponent(GlAlert);
beforeEach(() => {
mock = new MockAdapter(axios);
jest.spyOn(Api, 'fetchFeatureFlagUserLists').mockResolvedValue({
data: [userList],
headers: {
'x-next-page': '2',
'x-page': '1',
'X-Per-Page': '8',
'X-Prev-Page': '',
'X-TOTAL': '40',
'X-Total-Pages': '5',
},
});
});
afterEach(() => {
......@@ -87,7 +74,7 @@ describe('Feature flags', () => {
beforeEach((done) => {
mock
.onGet(`${TEST_HOST}/endpoint.json`, { params: { scope: FEATURE_FLAG_SCOPE, page: '1' } })
.onGet(`${TEST_HOST}/endpoint.json`, { params: { page: '1' } })
.reply(200, getRequestData, {});
factory(provideData);
setImmediate(done);
......@@ -101,9 +88,7 @@ describe('Feature flags', () => {
it('shows a feature flags limit reached alert', () => {
expect(limitAlert().exists()).toBe(true);
expect(limitAlert().find(GlSprintf).attributes('message')).toContain(
'Feature flags limit reached',
);
expect(limitAlert().text()).toContain('Feature flags limit reached');
});
describe('when the alert is dismissed', () => {
......@@ -129,12 +114,12 @@ describe('Feature flags', () => {
canUserConfigure: false,
canUserRotateToken: false,
newFeatureFlagPath: null,
newUserListPath: null,
userListPath: null,
};
beforeEach((done) => {
mock
.onGet(`${TEST_HOST}/endpoint.json`, { params: { scope: FEATURE_FLAG_SCOPE, page: '1' } })
.onGet(`${TEST_HOST}/endpoint.json`, { params: { page: '1' } })
.reply(200, getRequestData, {});
factory(provideData);
setImmediate(done);
......@@ -148,20 +133,20 @@ describe('Feature flags', () => {
expect(newButton().exists()).toBe(false);
});
it('does not render new user list button', () => {
expect(newUserListButton().exists()).toBe(false);
it('does not render view user list button', () => {
expect(userListButton().exists()).toBe(false);
});
});
describe('loading state', () => {
it('renders a loading icon', () => {
mock
.onGet(`${TEST_HOST}/endpoint.json`, { params: { scope: FEATURE_FLAG_SCOPE, page: '1' } })
.onGet(`${TEST_HOST}/endpoint.json`, { params: { page: '1' } })
.replyOnce(200, getRequestData, {});
factory();
const loadingElement = wrapper.find(GlLoadingIcon);
const loadingElement = wrapper.findComponent(GlLoadingIcon);
expect(loadingElement.exists()).toBe(true);
expect(loadingElement.props('label')).toEqual('Loading feature flags');
......@@ -173,7 +158,7 @@ describe('Feature flags', () => {
let emptyState;
beforeEach(async () => {
mock.onGet(mockState.endpoint, { params: { scope: FEATURE_FLAG_SCOPE, page: '1' } }).reply(
mock.onGet(mockState.endpoint, { params: { page: '1' } }).reply(
200,
{
feature_flags: [],
......@@ -187,9 +172,10 @@ describe('Feature flags', () => {
);
factory();
await waitForPromises();
await wrapper.vm.$nextTick();
emptyState = wrapper.find(GlEmptyState);
emptyState = wrapper.findComponent(GlEmptyState);
});
it('should render the empty state', async () => {
......@@ -204,9 +190,9 @@ describe('Feature flags', () => {
expect(newButton().exists()).toBe(true);
});
it('renders new user list button', () => {
expect(newUserListButton().exists()).toBe(true);
expect(newUserListButton().attributes('href')).toBe('/user-list/new');
it('renders view user list button', () => {
expect(userListButton().exists()).toBe(true);
expect(userListButton().attributes('href')).toBe(mockData.userListPath);
});
describe('in feature flags tab', () => {
......@@ -218,9 +204,7 @@ describe('Feature flags', () => {
describe('with paginated feature flags', () => {
beforeEach((done) => {
mock
.onGet(mockState.endpoint, { params: { scope: FEATURE_FLAG_SCOPE, page: '1' } })
.replyOnce(200, getRequestData, {
mock.onGet(mockState.endpoint, { params: { page: '1' } }).replyOnce(200, getRequestData, {
'x-next-page': '2',
'x-page': '1',
'X-Per-Page': '2',
......@@ -235,9 +219,9 @@ describe('Feature flags', () => {
});
it('should render a table with feature flags', () => {
const table = wrapper.find(FeatureFlagsTable);
const table = wrapper.findComponent(FeatureFlagsTable);
expect(table.exists()).toBe(true);
expect(table.props(FEATURE_FLAG_SCOPE)).toEqual(
expect(table.props('featureFlags')).toEqual(
expect.arrayContaining([
expect.objectContaining({
name: getRequestData.feature_flags[0].name,
......@@ -248,9 +232,9 @@ describe('Feature flags', () => {
});
it('should toggle a flag when receiving the toggle-flag event', () => {
const table = wrapper.find(FeatureFlagsTable);
const table = wrapper.findComponent(FeatureFlagsTable);
const [flag] = table.props(FEATURE_FLAG_SCOPE);
const [flag] = table.props('featureFlags');
table.vm.$emit('toggle-flag', flag);
expect(store.dispatch).toHaveBeenCalledWith('toggleFeatureFlag', flag);
......@@ -264,71 +248,38 @@ describe('Feature flags', () => {
expect(newButton().exists()).toBe(true);
});
it('renders new user list button', () => {
expect(newUserListButton().exists()).toBe(true);
expect(newUserListButton().attributes('href')).toBe('/user-list/new');
it('renders view user list button', () => {
expect(userListButton().exists()).toBe(true);
expect(userListButton().attributes('href')).toBe(mockData.userListPath);
});
describe('pagination', () => {
it('should render pagination', () => {
expect(wrapper.find(TablePagination).exists()).toBe(true);
expect(wrapper.findComponent(TablePagination).exists()).toBe(true);
});
it('should make an API request when page is clicked', () => {
jest.spyOn(wrapper.vm, 'updateFeatureFlagOptions');
wrapper.find(TablePagination).vm.change(4);
wrapper.findComponent(TablePagination).vm.change(4);
expect(wrapper.vm.updateFeatureFlagOptions).toHaveBeenCalledWith({
scope: FEATURE_FLAG_SCOPE,
page: '4',
});
});
it('should make an API request when using tabs', () => {
jest.spyOn(wrapper.vm, 'updateFeatureFlagOptions');
wrapper.find('[data-testid="user-lists-tab"]').vm.$emit('changeTab');
expect(wrapper.vm.updateFeatureFlagOptions).toHaveBeenCalledWith({
scope: USER_LIST_SCOPE,
page: '1',
});
});
});
});
describe('in user lists tab', () => {
beforeEach((done) => {
factory();
setImmediate(done);
});
beforeEach(() => {
wrapper.find('[data-testid="user-lists-tab"]').vm.$emit('changeTab');
return wrapper.vm.$nextTick();
});
it('should display the user list table', () => {
expect(wrapper.find(UserListsTable).exists()).toBe(true);
});
it('should set the user lists to display', () => {
expect(wrapper.find(UserListsTable).props('userLists')).toEqual([userList]);
});
});
});
describe('unsuccessful request', () => {
beforeEach((done) => {
mock
.onGet(mockState.endpoint, { params: { scope: FEATURE_FLAG_SCOPE, page: '1' } })
.replyOnce(500, {});
Api.fetchFeatureFlagUserLists.mockRejectedValueOnce();
mock.onGet(mockState.endpoint, { params: { page: '1' } }).replyOnce(500, {});
factory();
setImmediate(done);
});
it('should render error state', () => {
const emptyState = wrapper.find(GlEmptyState);
const emptyState = wrapper.findComponent(GlEmptyState);
expect(emptyState.props('title')).toEqual('There was an error fetching the feature flags.');
expect(emptyState.props('description')).toEqual(
'Try again in a few moments or contact your support team.',
......@@ -343,16 +294,16 @@ describe('Feature flags', () => {
expect(newButton().exists()).toBe(true);
});
it('renders new user list button', () => {
expect(newUserListButton().exists()).toBe(true);
expect(newUserListButton().attributes('href')).toBe('/user-list/new');
it('renders view user list button', () => {
expect(userListButton().exists()).toBe(true);
expect(userListButton().attributes('href')).toBe(mockData.userListPath);
});
});
describe('rotate instance id', () => {
beforeEach((done) => {
mock
.onGet(`${TEST_HOST}/endpoint.json`, { params: { scope: FEATURE_FLAG_SCOPE, page: '1' } })
.onGet(`${TEST_HOST}/endpoint.json`, { params: { page: '1' } })
.reply(200, getRequestData, {});
factory();
setImmediate(done);
......@@ -360,7 +311,7 @@ describe('Feature flags', () => {
it('should fire the rotate action when a `token` event is received', () => {
const actionSpy = jest.spyOn(wrapper.vm, 'rotateInstanceId');
const modal = wrapper.find(ConfigureFeatureFlagsModal);
const modal = wrapper.findComponent(ConfigureFeatureFlagsModal);
modal.vm.$emit('token');
expect(actionSpy).toHaveBeenCalled();
......
spec/frontend/feature_flags/store/index/actions_spec.js
View file @ 3bffcebf
import MockAdapter from 'axios-mock-adapter';
import testAction from 'helpers/vuex_action_helper';
import { TEST_HOST } from 'spec/test_constants';
import Api from '~/api';
import { mapToScopesViewModel } from '~/feature_flags/store/helpers';
import {
requestFeatureFlags,
......@@ -17,18 +16,12 @@ import {
updateFeatureFlag,
receiveUpdateFeatureFlagSuccess,
receiveUpdateFeatureFlagError,
requestUserLists,
receiveUserListsSuccess,
receiveUserListsError,
fetchUserLists,
deleteUserList,
receiveDeleteUserListError,
clearAlert,
} from '~/feature_flags/store/index/actions';
import * as types from '~/feature_flags/store/index/mutation_types';
import state from '~/feature_flags/store/index/state';
import axios from '~/lib/utils/axios_utils';
import { getRequestData, rotateData, featureFlag, userList } from '../../mock_data';
import { getRequestData, rotateData, featureFlag } from '../../mock_data';
jest.mock('~/api.js');
......@@ -154,99 +147,6 @@ describe('Feature flags actions', () => {
});
});
describe('fetchUserLists', () => {
beforeEach(() => {
Api.fetchFeatureFlagUserLists.mockResolvedValue({ data: [userList], headers: {} });
});
describe('success', () => {
it('dispatches requestUserLists and receiveUserListsSuccess ', (done) => {
testAction(
fetchUserLists,
null,
mockedState,
[],
[
{
type: 'requestUserLists',
},
{
payload: { data: [userList], headers: {} },
type: 'receiveUserListsSuccess',
},
],
done,
);
});
});
describe('error', () => {
it('dispatches requestUserLists and receiveUserListsError ', (done) => {
Api.fetchFeatureFlagUserLists.mockRejectedValue();
testAction(
fetchUserLists,
null,
mockedState,
[],
[
{
type: 'requestUserLists',
},
{
type: 'receiveUserListsError',
},
],
done,
);
});
});
});
describe('requestUserLists', () => {
it('should commit RECEIVE_USER_LISTS_SUCCESS mutation', (done) => {
testAction(
requestUserLists,
null,
mockedState,
[{ type: types.REQUEST_USER_LISTS }],
[],
done,
);
});
});
describe('receiveUserListsSuccess', () => {
it('should commit RECEIVE_USER_LISTS_SUCCESS mutation', (done) => {
testAction(
receiveUserListsSuccess,
{ data: [userList], headers: {} },
mockedState,
[
{
type: types.RECEIVE_USER_LISTS_SUCCESS,
payload: { data: [userList], headers: {} },
},
],
[],
done,
);
});
});
describe('receiveUserListsError', () => {
it('should commit RECEIVE_USER_LISTS_ERROR mutation', (done) => {
testAction(
receiveUserListsError,
null,
mockedState,
[{ type: types.RECEIVE_USER_LISTS_ERROR }],
[],
done,
);
});
});
describe('rotateInstanceId', () => {
let mock;
......@@ -482,69 +382,6 @@ describe('Feature flags actions', () => {
);
});
});
describe('deleteUserList', () => {
beforeEach(() => {
mockedState.userLists = [userList];
});
describe('success', () => {
beforeEach(() => {
Api.deleteFeatureFlagUserList.mockResolvedValue();
});
it('should refresh the user lists', (done) => {
testAction(
deleteUserList,
userList,
mockedState,
[],
[{ type: 'requestDeleteUserList', payload: userList }, { type: 'fetchUserLists' }],
done,
);
});
});
describe('error', () => {
beforeEach(() => {
Api.deleteFeatureFlagUserList.mockRejectedValue({ response: { data: 'some error' } });
});
it('should dispatch receiveDeleteUserListError', (done) => {
testAction(
deleteUserList,
userList,
mockedState,
[],
[
{ type: 'requestDeleteUserList', payload: userList },
{
type: 'receiveDeleteUserListError',
payload: { list: userList, error: 'some error' },
},
],
done,
);
});
});
});
describe('receiveDeleteUserListError', () => {
it('should commit RECEIVE_DELETE_USER_LIST_ERROR with the given list', (done) => {
testAction(
receiveDeleteUserListError,
{ list: userList, error: 'mock error' },
mockedState,
[
{
type: 'RECEIVE_DELETE_USER_LIST_ERROR',
payload: { list: userList, error: 'mock error' },
},
],
[],
done,
);
});
});
describe('clearAlert', () => {
it('should commit RECEIVE_CLEAR_ALERT', (done) => {
......
spec/frontend/feature_flags/store/index/mutations_spec.js
View file @ 3bffcebf
......@@ -3,7 +3,7 @@ import * as types from '~/feature_flags/store/index/mutation_types';
import mutations from '~/feature_flags/store/index/mutations';
import state from '~/feature_flags/store/index/state';
import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
import { getRequestData, rotateData, featureFlag, userList } from '../../mock_data';
import { getRequestData, rotateData, featureFlag } from '../../mock_data';
describe('Feature flags store Mutations', () => {
let stateCopy;
......@@ -59,13 +59,11 @@ describe('Feature flags store Mutations', () => {
});
it('should set count with the given data', () => {
expect(stateCopy.count.featureFlags).toEqual(37);
expect(stateCopy.count).toEqual(37);
});
it('should set pagination', () => {
expect(stateCopy.pageInfo.featureFlags).toEqual(
parseIntPagination(normalizeHeaders(headers)),
);
expect(stateCopy.pageInfo).toEqual(parseIntPagination(normalizeHeaders(headers)));
});
});
......@@ -83,58 +81,6 @@ describe('Feature flags store Mutations', () => {
});
});
describe('REQUEST_USER_LISTS', () => {
it('sets isLoading to true', () => {
mutations[types.REQUEST_USER_LISTS](stateCopy);
expect(stateCopy.isLoading).toBe(true);
});
});
describe('RECEIVE_USER_LISTS_SUCCESS', () => {
const headers = {
'x-next-page': '2',
'x-page': '1',
'X-Per-Page': '2',
'X-Prev-Page': '',
'X-TOTAL': '37',
'X-Total-Pages': '5',
};
beforeEach(() => {
mutations[types.RECEIVE_USER_LISTS_SUCCESS](stateCopy, { data: [userList], headers });
});
it('sets isLoading to false', () => {
expect(stateCopy.isLoading).toBe(false);
});
it('sets userLists to the received userLists', () => {
expect(stateCopy.userLists).toEqual([userList]);
});
it('sets pagination info for user lits', () => {
expect(stateCopy.pageInfo.userLists).toEqual(parseIntPagination(normalizeHeaders(headers)));
});
it('sets the count for user lists', () => {
expect(stateCopy.count.userLists).toBe(parseInt(headers['X-TOTAL'], 10));
});
});
describe('RECEIVE_USER_LISTS_ERROR', () => {
beforeEach(() => {
mutations[types.RECEIVE_USER_LISTS_ERROR](stateCopy);
});
it('should set isLoading to false', () => {
expect(stateCopy.isLoading).toEqual(false);
});
it('should set hasError to true', () => {
expect(stateCopy.hasError).toEqual(true);
});
});
describe('REQUEST_ROTATE_INSTANCE_ID', () => {
beforeEach(() => {
mutations[types.REQUEST_ROTATE_INSTANCE_ID](stateCopy);
......@@ -214,7 +160,7 @@ describe('Feature flags store Mutations', () => {
...flagState,
scopes: mapToScopesViewModel(flag.scopes || []),
}));
stateCopy.count.featureFlags = stateCount;
stateCopy.count = stateCount;
mutations[types.RECEIVE_UPDATE_FEATURE_FLAG_SUCCESS](stateCopy, {
...featureFlag,
......@@ -241,8 +187,6 @@ describe('Feature flags store Mutations', () => {
...flag,
scopes: mapToScopesViewModel(flag.scopes || []),
}));
stateCopy.count = { enabled: 1, disabled: 0 };
mutations[types.RECEIVE_UPDATE_FEATURE_FLAG_ERROR](stateCopy, featureFlag.id);
});
......@@ -257,36 +201,6 @@ describe('Feature flags store Mutations', () => {
});
});
describe('REQUEST_DELETE_USER_LIST', () => {
beforeEach(() => {
stateCopy.userLists = [userList];
mutations[types.REQUEST_DELETE_USER_LIST](stateCopy, userList);
});
it('should remove the deleted list', () => {
expect(stateCopy.userLists).not.toContain(userList);
});
});
describe('RECEIVE_DELETE_USER_LIST_ERROR', () => {
beforeEach(() => {
stateCopy.userLists = [];
mutations[types.RECEIVE_DELETE_USER_LIST_ERROR](stateCopy, {
list: userList,
error: 'some error',
});
});
it('should set isLoading to false and hasError to false', () => {
expect(stateCopy.isLoading).toBe(false);
expect(stateCopy.hasError).toBe(false);
});
it('should add the user list back to the list of user lists', () => {
expect(stateCopy.userLists).toContain(userList);
});
});
describe('RECEIVE_CLEAR_ALERT', () => {
it('clears the alert', () => {
stateCopy.alerts = ['a server error'];
......
spec/frontend/user_lists/components/user_lists_spec.js 0 → 100644
View file @ 3bffcebf
import { GlEmptyState, GlLoadingIcon } from '@gitlab/ui';
import { within } from '@testing-library/dom';
import { mount, createWrapper } from '@vue/test-utils';
import Vue from 'vue';
import Vuex from 'vuex';
import waitForPromises from 'helpers/wait_for_promises';
import Api from '~/api';
import UserListsComponent from '~/user_lists/components/user_lists.vue';
import UserListsTable from '~/user_lists/components/user_lists_table.vue';
import createStore from '~/user_lists/store/index';
import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
import { userList } from '../../feature_flags/mock_data';
jest.mock('~/api');
Vue.use(Vuex);
describe('~/user_lists/components/user_lists.vue', () => {
const mockProvide = {
newUserListPath: '/user-lists/new',
featureFlagsHelpPagePath: '/help/feature-flags',
errorStateSvgPath: '/assets/illustrations/feature_flag.svg',
};
const mockState = {
projectId: '1',
};
let wrapper;
let store;
const factory = (provide = mockProvide, fn = mount) => {
store = createStore(mockState);
wrapper = fn(UserListsComponent, {
store,
provide,
});
};
const newButton = () => within(wrapper.element).queryAllByText('New user list');
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
describe('without permissions', () => {
const provideData = {
...mockProvide,
newUserListPath: null,
};
beforeEach(() => {
Api.fetchFeatureFlagUserLists.mockResolvedValue({ data: [], headers: {} });
factory(provideData);
});
it('does not render new user list button', () => {
expect(newButton()).toHaveLength(0);
});
});
describe('loading state', () => {
it('renders a loading icon', () => {
Api.fetchFeatureFlagUserLists.mockReturnValue(new Promise(() => {}));
factory();
const loadingElement = wrapper.findComponent(GlLoadingIcon);
expect(loadingElement.exists()).toBe(true);
expect(loadingElement.props('label')).toEqual('Loading user lists');
});
});
describe('successful request', () => {
describe('without user lists', () => {
let emptyState;
beforeEach(async () => {
Api.fetchFeatureFlagUserLists.mockResolvedValue({ data: [], headers: {} });
factory();
await waitForPromises();
await Vue.nextTick();
emptyState = wrapper.findComponent(GlEmptyState);
});
it('should render the empty state', async () => {
expect(emptyState.exists()).toBe(true);
});
it('renders new feature flag button', () => {
expect(newButton()).not.toHaveLength(0);
});
it('renders generic title', () => {
const title = createWrapper(
within(emptyState.element).getByText('Get started with user lists'),
);
expect(title.exists()).toBe(true);
});
it('renders generic description', () => {
const description = createWrapper(
within(emptyState.element).getByText(
'User lists allow you to define a set of users to use with Feature Flags.',
),
);
expect(description.exists()).toBe(true);
});
});
describe('with paginated user lists', () => {
let table;
beforeEach(async () => {
Api.fetchFeatureFlagUserLists.mockResolvedValue({
data: [userList],
headers: {
'x-next-page': '2',
'x-page': '1',
'X-Per-Page': '2',
'X-Prev-Page': '',
'X-TOTAL': '37',
'X-Total-Pages': '5',
},
});
factory();
jest.spyOn(store, 'dispatch');
await Vue.nextTick();
table = wrapper.findComponent(UserListsTable);
});
it('should render a table with feature flags', () => {
expect(table.exists()).toBe(true);
expect(table.props('userLists')).toEqual([userList]);
});
it('renders new feature flag button', () => {
expect(newButton()).not.toHaveLength(0);
});
describe('pagination', () => {
let pagination;
beforeEach(() => {
pagination = wrapper.findComponent(TablePagination);
});
it('should render pagination', () => {
expect(pagination.exists()).toBe(true);
});
it('should make an API request when page is clicked', () => {
jest.spyOn(store, 'dispatch');
pagination.vm.change('4');
expect(store.dispatch).toHaveBeenCalledWith('setUserListsOptions', {
page: '4',
});
});
});
});
});
describe('unsuccessful request', () => {
beforeEach(async () => {
Api.fetchFeatureFlagUserLists.mockRejectedValue();
factory();
await Vue.nextTick();
});
it('should render error state', () => {
const emptyState = wrapper.findComponent(GlEmptyState);
const title = createWrapper(
within(emptyState.element).getByText('There was an error fetching the user lists.'),
);
expect(title.exists()).toBe(true);
const description = createWrapper(
within(emptyState.element).getByText(
'Try again in a few moments or contact your support team.',
),
);
expect(description.exists()).toBe(true);
});
it('renders new feature flag button', () => {
expect(newButton()).not.toHaveLength(0);
});
});
});
spec/frontend/feature_flags/components/user_lists_table_spec.js → spec/frontend/user_lists/components/user_lists_table_spec.js
View file @ 3bffcebf
import { GlModal } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import * as timeago from 'timeago.js';
import UserListsTable from '~/feature_flags/components/user_lists_table.vue';
import { userList } from '../mock_data';
import UserListsTable from '~/user_lists/components/user_lists_table.vue';
import { userList } from '../../feature_flags/mock_data';
jest.mock('timeago.js', () => ({
format: jest.fn().mockReturnValue('2 weeks ago'),
......
spec/frontend/user_lists/store/index/actions_spec.js 0 → 100644
View file @ 3bffcebf
import testAction from 'helpers/vuex_action_helper';
import Api from '~/api';
import {
setUserListsOptions,
requestUserLists,
receiveUserListsSuccess,
receiveUserListsError,
fetchUserLists,
deleteUserList,
receiveDeleteUserListError,
clearAlert,
} from '~/user_lists/store/index/actions';
import * as types from '~/user_lists/store/index/mutation_types';
import createState from '~/user_lists/store/index/state';
import { userList } from '../../../feature_flags/mock_data';
jest.mock('~/api.js');
describe('~/user_lists/store/index/actions', () => {
let state;
beforeEach(() => {
state = createState({ projectId: '1' });
});
describe('setUserListsOptions', () => {
it('should commit SET_USER_LISTS_OPTIONS mutation', (done) => {
testAction(
setUserListsOptions,
{ page: '1', scope: 'all' },
state,
[{ type: types.SET_USER_LISTS_OPTIONS, payload: { page: '1', scope: 'all' } }],
[],
done,
);
});
});
describe('fetchUserLists', () => {
beforeEach(() => {
Api.fetchFeatureFlagUserLists.mockResolvedValue({ data: [userList], headers: {} });
});
describe('success', () => {
it('dispatches requestUserLists and receiveUserListsSuccess ', (done) => {
testAction(
fetchUserLists,
null,
state,
[],
[
{
type: 'requestUserLists',
},
{
payload: { data: [userList], headers: {} },
type: 'receiveUserListsSuccess',
},
],
done,
);
});
});
describe('error', () => {
it('dispatches requestUserLists and receiveUserListsError ', (done) => {
Api.fetchFeatureFlagUserLists.mockRejectedValue();
testAction(
fetchUserLists,
null,
state,
[],
[
{
type: 'requestUserLists',
},
{
type: 'receiveUserListsError',
},
],
done,
);
});
});
});
describe('requestUserLists', () => {
it('should commit RECEIVE_USER_LISTS_SUCCESS mutation', (done) => {
testAction(requestUserLists, null, state, [{ type: types.REQUEST_USER_LISTS }], [], done);
});
});
describe('receiveUserListsSuccess', () => {
it('should commit RECEIVE_USER_LISTS_SUCCESS mutation', (done) => {
testAction(
receiveUserListsSuccess,
{ data: [userList], headers: {} },
state,
[
{
type: types.RECEIVE_USER_LISTS_SUCCESS,
payload: { data: [userList], headers: {} },
},
],
[],
done,
);
});
});
describe('receiveUserListsError', () => {
it('should commit RECEIVE_USER_LISTS_ERROR mutation', (done) => {
testAction(
receiveUserListsError,
null,
state,
[{ type: types.RECEIVE_USER_LISTS_ERROR }],
[],
done,
);
});
});
describe('deleteUserList', () => {
beforeEach(() => {
state.userLists = [userList];
});
describe('success', () => {
beforeEach(() => {
Api.deleteFeatureFlagUserList.mockResolvedValue();
});
it('should refresh the user lists', (done) => {
testAction(
deleteUserList,
userList,
state,
[],
[{ type: 'requestDeleteUserList', payload: userList }, { type: 'fetchUserLists' }],
done,
);
});
});
describe('error', () => {
beforeEach(() => {
Api.deleteFeatureFlagUserList.mockRejectedValue({ response: { data: 'some error' } });
});
it('should dispatch receiveDeleteUserListError', (done) => {
testAction(
deleteUserList,
userList,
state,
[],
[
{ type: 'requestDeleteUserList', payload: userList },
{
type: 'receiveDeleteUserListError',
payload: { list: userList, error: 'some error' },
},
],
done,
);
});
});
});
describe('receiveDeleteUserListError', () => {
it('should commit RECEIVE_DELETE_USER_LIST_ERROR with the given list', (done) => {
testAction(
receiveDeleteUserListError,
{ list: userList, error: 'mock error' },
state,
[
{
type: 'RECEIVE_DELETE_USER_LIST_ERROR',
payload: { list: userList, error: 'mock error' },
},
],
[],
done,
);
});
});
describe('clearAlert', () => {
it('should commit RECEIVE_CLEAR_ALERT', (done) => {
const alertIndex = 3;
testAction(
clearAlert,
alertIndex,
state,
[{ type: 'RECEIVE_CLEAR_ALERT', payload: alertIndex }],
[],
done,
);
});
});
});
spec/frontend/user_lists/store/index/mutations_spec.js 0 → 100644
View file @ 3bffcebf
import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
import * as types from '~/user_lists/store/index/mutation_types';
import mutations from '~/user_lists/store/index/mutations';
import createState from '~/user_lists/store/index/state';
import { userList } from '../../../feature_flags/mock_data';
describe('~/user_lists/store/index/mutations', () => {
let state;
beforeEach(() => {
state = createState({ projectId: '1' });
});
describe('SET_USER_LISTS_OPTIONS', () => {
it('should set provided options', () => {
mutations[types.SET_USER_LISTS_OPTIONS](state, { page: '1', scope: 'all' });
expect(state.options).toEqual({ page: '1', scope: 'all' });
});
});
describe('REQUEST_USER_LISTS', () => {
it('sets isLoading to true', () => {
mutations[types.REQUEST_USER_LISTS](state);
expect(state.isLoading).toBe(true);
});
});
describe('RECEIVE_USER_LISTS_SUCCESS', () => {
const headers = {
'x-next-page': '2',
'x-page': '1',
'X-Per-Page': '2',
'X-Prev-Page': '',
'X-TOTAL': '37',
'X-Total-Pages': '5',
};
beforeEach(() => {
mutations[types.RECEIVE_USER_LISTS_SUCCESS](state, { data: [userList], headers });
});
it('sets isLoading to false', () => {
expect(state.isLoading).toBe(false);
});
it('sets userLists to the received userLists', () => {
expect(state.userLists).toEqual([userList]);
});
it('sets pagination info for user lits', () => {
expect(state.pageInfo).toEqual(parseIntPagination(normalizeHeaders(headers)));
});
it('sets the count for user lists', () => {
expect(state.count).toBe(parseInt(headers['X-TOTAL'], 10));
});
});
describe('RECEIVE_USER_LISTS_ERROR', () => {
beforeEach(() => {
mutations[types.RECEIVE_USER_LISTS_ERROR](state);
});
it('should set isLoading to false', () => {
expect(state.isLoading).toEqual(false);
});
it('should set hasError to true', () => {
expect(state.hasError).toEqual(true);
});
});
describe('REQUEST_DELETE_USER_LIST', () => {
beforeEach(() => {
state.userLists = [userList];
mutations[types.REQUEST_DELETE_USER_LIST](state, userList);
});
it('should remove the deleted list', () => {
expect(state.userLists).not.toContain(userList);
});
});
describe('RECEIVE_DELETE_USER_LIST_ERROR', () => {
beforeEach(() => {
state.userLists = [];
mutations[types.RECEIVE_DELETE_USER_LIST_ERROR](state, {
list: userList,
error: 'some error',
});
});
it('should set isLoading to false and hasError to false', () => {
expect(state.isLoading).toBe(false);
expect(state.hasError).toBe(false);
});
it('should add the user list back to the list of user lists', () => {
expect(state.userLists).toContain(userList);
});
});
describe('RECEIVE_CLEAR_ALERT', () => {
it('clears the alert', () => {
state.alerts = ['a server error'];
mutations[types.RECEIVE_CLEAR_ALERT](state, 0);
expect(state.alerts).toEqual([]);
});
it('clears the alert at the specified index', () => {
state.alerts = ['a server error', 'another error', 'final error'];
mutations[types.RECEIVE_CLEAR_ALERT](state, 1);
expect(state.alerts).toEqual(['a server error', 'final error']);
});
});
});
spec/support/helpers/feature_flag_helpers.rb
View file @ 3bffcebf
......@@ -90,6 +90,5 @@ module FeatureFlagHelpers
def expect_user_to_see_feature_flags_index_page
expect(page).to have_text('Feature Flags')
expect(page).to have_text('Lists')
end
end
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7