From 6fc35510d3cbd85eae85df2bed5d77065462094e Mon Sep 17 00:00:00 2001 From: Levko Kravets Date: Thu, 25 Jun 2020 12:54:46 +0300 Subject: [PATCH] Allow unregistering settings tabs (#5000) --- client/app/components/SettingsWrapper.jsx | 6 ++--- .../pages/data-sources/DataSourcesList.jsx | 1 + .../app/pages/data-sources/EditDataSource.jsx | 2 +- .../pages/destinations/DestinationsList.jsx | 1 + .../pages/destinations/EditDestination.jsx | 2 +- client/app/pages/groups/GroupDataSources.jsx | 1 + client/app/pages/groups/GroupMembers.jsx | 1 + client/app/pages/groups/GroupsList.jsx | 1 + .../query-snippets/QuerySnippetsList.jsx | 1 + .../pages/settings/OrganizationSettings.jsx | 1 + client/app/pages/users/UserProfile.jsx | 1 + client/app/pages/users/UsersList.jsx | 1 + client/app/services/settingsMenu.js | 26 ++++++++++++++----- client/app/services/settingsMenu.test.js | 4 +-- 14 files changed, 34 insertions(+), 15 deletions(-) diff --git a/client/app/components/SettingsWrapper.jsx b/client/app/components/SettingsWrapper.jsx index a786bc846..1ad78cc40 100644 --- a/client/app/components/SettingsWrapper.jsx +++ b/client/app/components/SettingsWrapper.jsx @@ -4,10 +4,8 @@ import PageHeader from "@/components/PageHeader"; import location from "@/services/location"; import settingsMenu from "@/services/settingsMenu"; -function wrapSettingsTab(options, WrappedComponent) { - if (options) { - settingsMenu.add(options); - } +function wrapSettingsTab(id, options, WrappedComponent) { + settingsMenu.add(id, options); return function SettingsTab(props) { const activeItem = settingsMenu.getActiveItem(location.path); diff --git a/client/app/pages/data-sources/DataSourcesList.jsx b/client/app/pages/data-sources/DataSourcesList.jsx index 1a8e28520..9976f6722 100644 --- a/client/app/pages/data-sources/DataSourcesList.jsx +++ b/client/app/pages/data-sources/DataSourcesList.jsx @@ -145,6 +145,7 @@ class DataSourcesList extends React.Component { } const DataSourcesListPage = wrapSettingsTab( + "DataSources.List", { permission: "admin", title: "Data Sources", diff --git a/client/app/pages/data-sources/EditDataSource.jsx b/client/app/pages/data-sources/EditDataSource.jsx index f04ea1818..8abf949f9 100644 --- a/client/app/pages/data-sources/EditDataSource.jsx +++ b/client/app/pages/data-sources/EditDataSource.jsx @@ -136,7 +136,7 @@ class EditDataSource extends React.Component { } } -const EditDataSourcePage = wrapSettingsTab(null, EditDataSource); +const EditDataSourcePage = wrapSettingsTab("DataSources.Edit", null, EditDataSource); export default routeWithUserSession({ path: "/data_sources/:dataSourceId([0-9]+)", diff --git a/client/app/pages/destinations/DestinationsList.jsx b/client/app/pages/destinations/DestinationsList.jsx index 5d39cc46e..f012686b8 100644 --- a/client/app/pages/destinations/DestinationsList.jsx +++ b/client/app/pages/destinations/DestinationsList.jsx @@ -128,6 +128,7 @@ class DestinationsList extends React.Component { } const DestinationsListPage = wrapSettingsTab( + "AlertDestinations.List", { permission: "admin", title: "Alert Destinations", diff --git a/client/app/pages/destinations/EditDestination.jsx b/client/app/pages/destinations/EditDestination.jsx index 3d11df6a4..e951cace1 100644 --- a/client/app/pages/destinations/EditDestination.jsx +++ b/client/app/pages/destinations/EditDestination.jsx @@ -103,7 +103,7 @@ class EditDestination extends React.Component { } } -const EditDestinationPage = wrapSettingsTab(null, EditDestination); +const EditDestinationPage = wrapSettingsTab("AlertDestinations.Edit", null, EditDestination); export default routeWithUserSession({ path: "/destinations/:destinationId([0-9]+)", diff --git a/client/app/pages/groups/GroupDataSources.jsx b/client/app/pages/groups/GroupDataSources.jsx index 292c72773..1123a307d 100644 --- a/client/app/pages/groups/GroupDataSources.jsx +++ b/client/app/pages/groups/GroupDataSources.jsx @@ -224,6 +224,7 @@ class GroupDataSources extends React.Component { } const GroupDataSourcesPage = wrapSettingsTab( + "Groups.DataSources", null, itemsList( GroupDataSources, diff --git a/client/app/pages/groups/GroupMembers.jsx b/client/app/pages/groups/GroupMembers.jsx index 7115ecabc..8b83ce1ad 100644 --- a/client/app/pages/groups/GroupMembers.jsx +++ b/client/app/pages/groups/GroupMembers.jsx @@ -187,6 +187,7 @@ class GroupMembers extends React.Component { } const GroupMembersPage = wrapSettingsTab( + "Groups.Members", null, itemsList( GroupMembers, diff --git a/client/app/pages/groups/GroupsList.jsx b/client/app/pages/groups/GroupsList.jsx index f85432f38..581c45115 100644 --- a/client/app/pages/groups/GroupsList.jsx +++ b/client/app/pages/groups/GroupsList.jsx @@ -124,6 +124,7 @@ class GroupsList extends React.Component { } const GroupsListPage = wrapSettingsTab( + "Groups.List", { permission: "list_users", title: "Groups", diff --git a/client/app/pages/query-snippets/QuerySnippetsList.jsx b/client/app/pages/query-snippets/QuerySnippetsList.jsx index 40ac722df..14751ff94 100644 --- a/client/app/pages/query-snippets/QuerySnippetsList.jsx +++ b/client/app/pages/query-snippets/QuerySnippetsList.jsx @@ -188,6 +188,7 @@ class QuerySnippetsList extends React.Component { } const QuerySnippetsListPage = wrapSettingsTab( + "QuerySnippets.List", { permission: "create_query", title: "Query Snippets", diff --git a/client/app/pages/settings/OrganizationSettings.jsx b/client/app/pages/settings/OrganizationSettings.jsx index f85059d68..3854ba467 100644 --- a/client/app/pages/settings/OrganizationSettings.jsx +++ b/client/app/pages/settings/OrganizationSettings.jsx @@ -98,6 +98,7 @@ OrganizationSettings.defaultProps = { }; const OrganizationSettingsPage = wrapSettingsTab( + "Settings.Organization", { permission: "admin", title: "Settings", diff --git a/client/app/pages/users/UserProfile.jsx b/client/app/pages/users/UserProfile.jsx index 641091416..bb1cb7f15 100644 --- a/client/app/pages/users/UserProfile.jsx +++ b/client/app/pages/users/UserProfile.jsx @@ -68,6 +68,7 @@ UserProfile.defaultProps = { }; const UserProfilePage = wrapSettingsTab( + "Users.Account", { title: "Account", path: "users/me", diff --git a/client/app/pages/users/UsersList.jsx b/client/app/pages/users/UsersList.jsx index a58f1877f..659a04143 100644 --- a/client/app/pages/users/UsersList.jsx +++ b/client/app/pages/users/UsersList.jsx @@ -248,6 +248,7 @@ class UsersList extends React.Component { } const UsersListPage = wrapSettingsTab( + "Users.List", { permission: "list_users", title: "Users", diff --git a/client/app/services/settingsMenu.js b/client/app/services/settingsMenu.js index a422fdbf6..c1d12dd77 100644 --- a/client/app/services/settingsMenu.js +++ b/client/app/services/settingsMenu.js @@ -1,13 +1,16 @@ -import { isFunction, extend, omit, sortBy, find, filter } from "lodash"; +import { isString, isObject, isFunction, extend, omit, sortBy, find, filter } from "lodash"; import { stripBase } from "@/components/ApplicationArea/Router"; import { currentUser } from "@/services/auth"; class SettingsMenuItem { constructor(menuItem) { - extend(this, { pathPrefix: `/${menuItem.path}` }, omit(menuItem, ["isActive"])); + extend(this, { pathPrefix: `/${menuItem.path}` }, omit(menuItem, ["isActive", "isAvailable"])); if (isFunction(menuItem.isActive)) { this.isActive = menuItem.isActive; } + if (isFunction(menuItem.isAvailable)) { + this.isAvailable = menuItem.isAvailable; + } } isActive(path) { @@ -20,13 +23,22 @@ class SettingsMenuItem { } class SettingsMenu { - constructor() { - this.items = []; + items = []; + + add(id, item) { + id = isString(id) ? id : null; + this.remove(id); + if (isObject(item)) { + this.items.push(new SettingsMenuItem({ ...item, id })); + this.items = sortBy(this.items, "order"); + } } - add(item) { - this.items.push(new SettingsMenuItem(item)); - this.items = sortBy(this.items, "order"); + remove(id) { + if (isString(id)) { + this.items = filter(this.items, item => item.id !== id); + // removing item does not change order of other items, so no need to sort + } } getAvailableItems() { diff --git a/client/app/services/settingsMenu.test.js b/client/app/services/settingsMenu.test.js index 5f19f5553..8a51b0beb 100644 --- a/client/app/services/settingsMenu.test.js +++ b/client/app/services/settingsMenu.test.js @@ -11,8 +11,8 @@ const usersItem = { path: "users", }; -settingsMenu.add(dataSourcesItem); -settingsMenu.add(usersItem); +settingsMenu.add(null, dataSourcesItem); +settingsMenu.add(null, usersItem); describe("SettingsMenu", () => { describe("isActive", () => {