Commit 166e1eba authored by Savas Vedova's avatar Savas Vedova

Copy the project manager to the settings page

- Enable link on the left nav bar
- Write tests
parent 2f94aec4
import initSecurityDashboardSettings from 'ee/security_dashboard/instance_dashboard_settings_init';
import initInstanceSecurityDashboardSettings from 'ee/security_dashboard/instance_dashboard_settings_init';
document.addEventListener('DOMContentLoaded', () => {
initSecurityDashboardSettings(document.getElementById('js-security'));
initInstanceSecurityDashboardSettings(document.getElementById('js-security'));
});
<script>
import { GlAlert } from '@gitlab/ui';
import SecurityDashboardLayout from 'ee/security_dashboard/components/security_dashboard_layout.vue';
import projectsQuery from 'ee/security_dashboard/graphql/get_instance_security_dashboard_projects.query.graphql';
import ProjectManager from './first_class_project_manager/project_manager.vue';
export default {
components: {
ProjectManager,
SecurityDashboardLayout,
GlAlert,
},
apollo: {
projects: {
query: projectsQuery,
update(data) {
return data.instanceSecurityDashboard.projects.nodes;
},
error() {
this.hasError = true;
},
},
},
data() {
return {
projects: [],
hasError: false,
};
},
};
</script>
<template>
<security-dashboard-layout>
<gl-alert v-if="hasError" variant="danger">
{{ __('Something went wrong, unable to get projects') }}
</gl-alert>
<div v-else class="gl-display-flex gl-justify-content-center">
<project-manager :projects="projects" />
</div>
</security-dashboard-layout>
</template>
......@@ -21,7 +21,8 @@ export default {
props: {
isManipulatingProjects: {
type: Boolean,
required: true,
required: false,
default: false,
},
projects: {
type: Array,
......
import Vue from 'vue';
import UnavailableState from './components/unavailable_state.vue';
import apolloProvider from './graphql/provider';
import InstanceSecurityDashboardSettings from './components/first_class_instance_security_dashboard_settings.vue';
export default el => {
if (!el) {
return null;
}
return new Vue({
el,
apolloProvider,
render(createElement) {
return createElement(UnavailableState, {
props: {
link: el.dataset.dashboardDocumentation,
svgPath: el.dataset.emptyStateSvgPath,
},
});
return createElement(InstanceSecurityDashboardSettings);
},
});
};
......@@ -13,15 +13,11 @@
= sprite_icon('dashboard')
%span.nav-item-name
= _('Security Dashboard')
-# This part will be enabled in a follow up MR. The follow up MR will be submitted
-# right after this MR is merged. The reason to split the MR into two pieces is
-# to reduce the size of the MR and speed up the review process.
-#
-# = nav_link(path: %w[dashboard#settings]) do
-# = link_to security_settings_dashboard_path, class: 'shortcuts-project rspec-project-link' do
-# .nav-icon-container
-# = sprite_icon('settings')
-# %span.nav-item-name
-# = _('Settings')
= nav_link(path: %w[dashboard#settings]) do
= link_to security_settings_dashboard_path, class: 'shortcuts-project rspec-project-link' do
.nav-icon-container
= sprite_icon('settings')
%span.nav-item-name
= _('Settings')
= render 'shared/sidebar_toggle_button'
- page_title _('Security Dashboard - Settings')
- @hide_breadcrumbs = true
#js-security{ data: instance_security_dashboard_data }
#js-security
---
title: Create a standalone settings page for the instance security dashboard
merge_request: 38965
author:
type: changed
import { shallowMount } from '@vue/test-utils';
import { GlAlert } from '@gitlab/ui';
import FirstClassInstanceDashboardSettings from 'ee/security_dashboard/components/first_class_instance_security_dashboard_settings.vue';
import ProjectManager from 'ee/security_dashboard/components/first_class_project_manager/project_manager.vue';
describe('First Class Instance Dashboard Component', () => {
let wrapper;
const defaultMocks = ({ loading = false } = {}) => ({
$apollo: { queries: { projects: { loading } } },
});
const findProjectManager = () => wrapper.find(ProjectManager);
const findAlert = () => wrapper.find(GlAlert);
const createWrapper = ({ mocks = defaultMocks(), data = {} }) => {
return shallowMount(FirstClassInstanceDashboardSettings, {
mocks,
data() {
return data;
},
});
};
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
describe('when there is no error', () => {
beforeEach(() => {
wrapper = createWrapper({});
});
it('displays the project manager', () => {
expect(findProjectManager().exists()).toBe(true);
});
it('does not render the alert component', () => {
expect(findAlert().exists()).toBe(false);
});
});
describe('when there is a loading error', () => {
beforeEach(() => {
wrapper = createWrapper({ data: { hasError: true } });
});
it('does not display the project manager', () => {
expect(findProjectManager().exists()).toBe(false);
});
it('renders the alert component', () => {
expect(findAlert().text()).toBe('Something went wrong, unable to get projects');
});
});
});
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