Security Dashboard as default view for groups

Add a supporting code to separate groups#show
and groups#details which is required for the
proper implementation of the Group Overview
content and Security Dashboard option for it

2 files changed, 2 insertions, 161 deletions

diff --git a/app/assets/javascripts/pages/groups/show/group_tabs.js b/app/assets/javascripts/pages/groups/show/group_tabs.js
deleted file mode 100644
index c6fe61d2bd9..00000000000
--- a/app/assets/javascripts/pages/groups/show/group_tabs.js
+++ /dev/null
@@ -1,136 +0,0 @@
-import $ from 'jquery';
-import { removeParams } from '~/lib/utils/url_utility';
-import createGroupTree from '~/groups';
-import {
-  ACTIVE_TAB_SUBGROUPS_AND_PROJECTS,
-  ACTIVE_TAB_SHARED,
-  ACTIVE_TAB_ARCHIVED,
-  CONTENT_LIST_CLASS,
-  GROUPS_LIST_HOLDER_CLASS,
-  GROUPS_FILTER_FORM_CLASS,
-} from '~/groups/constants';
-import UserTabs from '~/pages/users/user_tabs';
-import GroupFilterableList from '~/groups/groups_filterable_list';
-
-export default class GroupTabs extends UserTabs {
-  constructor({ defaultAction = 'subgroups_and_projects', action, parentEl }) {
-    super({ defaultAction, action, parentEl });
-  }
-
-  bindEvents() {
-    this.$parentEl
-      .off('shown.bs.tab', '.nav-links a[data-toggle="tab"]')
-      .on('shown.bs.tab', '.nav-links a[data-toggle="tab"]', event => this.tabShown(event));
-  }
-
-  tabShown(event) {
-    const $target = $(event.target);
-    const action = $target.data('action') || $target.data('targetSection');
-    const source = $target.attr('href') || $target.data('targetPath');
-
-    document.querySelector(GROUPS_FILTER_FORM_CLASS).action = source;
-
-    this.setTab(action);
-    return this.setCurrentAction(source);
-  }
-
-  setTab(action) {
-    const loadableActions = [
-      ACTIVE_TAB_SUBGROUPS_AND_PROJECTS,
-      ACTIVE_TAB_SHARED,
-      ACTIVE_TAB_ARCHIVED,
-    ];
-    this.enableSearchBar(action);
-    this.action = action;
-
-    if (this.loaded[action]) {
-      return;
-    }
-
-    if (loadableActions.includes(action)) {
-      this.cleanFilterState();
-      this.loadTab(action);
-    }
-  }
-
-  loadTab(action) {
-    const elId = `js-groups-${action}-tree`;
-    const endpoint = this.getEndpoint(action);
-
-    this.toggleLoading(true);
-
-    createGroupTree(elId, endpoint, action);
-    this.loaded[action] = true;
-
-    this.toggleLoading(false);
-  }
-
-  getEndpoint(action) {
-    const { endpointsDefault, endpointsShared } = this.$parentEl.data();
-    let endpoint;
-
-    switch (action) {
-      case ACTIVE_TAB_ARCHIVED:
-        endpoint = `${endpointsDefault}?archived=only`;
-        break;
-      case ACTIVE_TAB_SHARED:
-        endpoint = endpointsShared;
-        break;
-      default:
-        // ACTIVE_TAB_SUBGROUPS_AND_PROJECTS
-        endpoint = endpointsDefault;
-        break;
-    }
-
-    return endpoint;
-  }
-
-  enableSearchBar(action) {
-    const containerEl = document.getElementById(action);
-    const form = document.querySelector(GROUPS_FILTER_FORM_CLASS);
-    const filter = form.querySelector('.js-groups-list-filter');
-    const holder = containerEl.querySelector(GROUPS_LIST_HOLDER_CLASS);
-    const dataEl = containerEl.querySelector(CONTENT_LIST_CLASS);
-    const endpoint = this.getEndpoint(action);
-
-    if (!dataEl) {
-      return;
-    }
-
-    const { dataset } = dataEl;
-    const opts = {
-      form,
-      filter,
-      holder,
-      filterEndpoint: endpoint || dataset.endpoint,
-      pagePath: null,
-      dropdownSel: '.js-group-filter-dropdown-wrap',
-      filterInputField: 'filter',
-      action,
-    };
-
-    if (!this.loaded[action]) {
-      const filterableList = new GroupFilterableList(opts);
-      filterableList.initSearch();
-    }
-  }
-
-  cleanFilterState() {
-    const values = Object.values(this.loaded);
-    const loadedTabs = values.filter(e => e === true);
-
-    if (!loadedTabs.length) {
-      return;
-    }
-
-    const newState = removeParams(['page'], window.location.search);
-
-    window.history.replaceState(
-      {
-        url: newState,
-      },
-      document.title,
-      newState,
-    );
-  }
-}
diff --git a/app/assets/javascripts/pages/groups/show/index.js b/app/assets/javascripts/pages/groups/show/index.js
index 3a45fd70d02..af924e74f1f 100644
--- a/app/assets/javascripts/pages/groups/show/index.js
+++ b/app/assets/javascripts/pages/groups/show/index.js
@@ -1,28 +1,5 @@
-/* eslint-disable no-new */
-
-import { getPagePath } from '~/lib/utils/common_utils';
-import { ACTIVE_TAB_SHARED, ACTIVE_TAB_ARCHIVED } from '~/groups/constants';
-import NewGroupChild from '~/groups/new_group_child';
-import notificationsDropdown from '~/notifications_dropdown';
-import NotificationsForm from '~/notifications_form';
-import ProjectsList from '~/projects_list';
-import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
-import GroupTabs from './group_tabs';
+import initGroupDetails from '../shared/group_details';
 
 document.addEventListener('DOMContentLoaded', () => {
-  const newGroupChildWrapper = document.querySelector('.js-new-project-subgroup');
-  const loadableActions = [ACTIVE_TAB_SHARED, ACTIVE_TAB_ARCHIVED];
-  const paths = window.location.pathname.split('/');
-  const subpath = paths[paths.length - 1];
-  const action = loadableActions.includes(subpath) ? subpath : getPagePath(1);
-
-  new GroupTabs({ parentEl: '.groups-listing', action });
-  new ShortcutsNavigation();
-  new NotificationsForm();
-  notificationsDropdown();
-  new ProjectsList();
-
-  if (newGroupChildWrapper) {
-    new NewGroupChild(newGroupChildWrapper);
-  }
+  initGroupDetails();
 });