Removing ViewManagementStore, replacing with API funcs. (#23625)

* Removing `ViewManagementStore`, replacing with API funcs.

* Adding license header.

* Fixing linter hints.

Author: dennisoelkers

graylog2-web-interface/src/components/users/UserDetails/SettingsSection.tsx

@@ -24,8 +24,8 @@ import { IfPermitted, ReadOnlyFormGroup } from 'components/common';
 import type User from 'logic/users/User';
 import SectionComponent from 'components/common/Section/SectionComponent';
 import { StreamsActions } from 'stores/streams/StreamsStore';
-import { ViewManagementActions } from 'views/stores/ViewManagementStore';
 import useIsGlobalTimeoutEnabled from 'hooks/useIsGlobalTimeoutEnabled';
+import { getView } from 'views/api/views';
 
 type Props = {
   user: User;
@@ -60,7 +60,7 @@ const StartpageValue = ({ type, id }: { type: string | null | undefined; id: str
     if (type === 'stream') {
       StreamsActions.get(id).then(({ title: streamTitle }) => setTitle(streamTitle));
     } else {
-      ViewManagementActions.get(id).then(({ title: viewTitle }) => setTitle(viewTitle));
+      getView(id).then(({ title: viewTitle }) => setTitle(viewTitle));
     }
   }, [id, type]);
 

graylog2-web-interface/src/views/api/views.ts

@@ -0,0 +1,45 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import type View from 'views/logic/views/View';
+import type { ViewJson } from 'views/logic/views/View';
+import fetch from 'logic/rest/FetchProvider';
+import { qualifyUrl } from 'util/URLUtils';
+import type { EntitySharePayload } from 'actions/permissions/EntityShareActions';
+import { CurrentUserStore } from 'stores/users/CurrentUserStore';
+import UserNotification from 'util/UserNotification';
+
+const viewsUrl = qualifyUrl('/views');
+const viewsIdUrl = (id) => qualifyUrl(`/views/${id}`);
+
+export const getView = (viewId: string): Promise<ViewJson> => fetch('GET', viewsIdUrl(viewId));
+export const deleteView = (view: View): Promise<void> =>
+  fetch('DELETE', viewsIdUrl(view.id)).catch((error) => {
+    UserNotification.error(`Deleting view ${view.title} failed with status: ${error}`, 'Could not delete view');
+  });
+export const createView = (view: View, entityShare?: EntitySharePayload, clonedFrom?: string): Promise<View> => {
+  const url = clonedFrom ? viewsIdUrl(clonedFrom) : viewsUrl;
+  const promise = fetch('POST', url, JSON.stringify({ entity: view.toJSON(), share_request: entityShare }));
+
+  return promise.then((response) => {
+    CurrentUserStore.reload();
+
+    return response;
+  });
+};
+
+export const updateView = (view: View, entityShare?: EntitySharePayload): Promise<View> =>
+  fetch('PUT', viewsIdUrl(view.id), JSON.stringify({ entity: view.toJSON(), share_request: entityShare }));

graylog2-web-interface/src/views/components/AdaptableQueryTabs.tsx

@@ -31,7 +31,6 @@ import CopyToDashboardForm from 'views/components/widgets/CopyToDashboardForm';
 import View from 'views/logic/views/View';
 import type { SearchJson } from 'views/logic/search/Search';
 import Search from 'views/logic/search/Search';
-import { ViewManagementActions } from 'views/stores/ViewManagementStore';
 import CopyPageToDashboard from 'views/logic/views/CopyPageToDashboard';
 import { loadAsDashboard, loadDashboard } from 'views/logic/views/Actions';
 import createSearch from 'views/logic/slices/createSearch';
@@ -47,6 +46,7 @@ import { TELEMETRY_EVENT_TYPE } from 'logic/telemetry/Constants';
 import useCurrentQueryId from 'views/logic/queries/useCurrentQueryId';
 import useView from 'views/hooks/useView';
 import useIsNew from 'views/hooks/useIsNew';
+import { updateView, getView } from 'views/api/views';
 
 import type { QueryTabsProps } from './QueryTabs';
 
@@ -229,7 +229,7 @@ const adjustTabsVisibility = (
 const _updateDashboardWithNewSearch = (dashboard: View, newSearch: Search) => {
   const newDashboard = dashboard.toBuilder().search(newSearch).build();
 
-  return ViewManagementActions.update(newDashboard);
+  return updateView(newDashboard);
 };
 
 const addPageToDashboard =
@@ -255,7 +255,7 @@ const _onCopyToDashboard =
     const view = selectView(getState());
     const queryId = selectActiveQuery(getState());
 
-    const dashboardJson = await ViewManagementActions.get(selectedDashboardId);
+    const dashboardJson = await getView(selectedDashboardId);
     const targetDashboard = View.fromJSON(dashboardJson);
 
     return fetchSearch(dashboardJson.search_id).then(addPageToDashboard(targetDashboard, view, queryId));

graylog2-web-interface/src/views/components/DashboardActionsMenu.test.tsx

@@ -25,14 +25,14 @@ import type { LayoutState } from 'views/components/contexts/SearchPageLayoutCont
 import Search from 'views/logic/search/Search';
 import View from 'views/logic/views/View';
 import { SAVE_COPY, BLANK } from 'views/components/contexts/SearchPageLayoutContext';
-import { ViewManagementActions } from 'views/stores/ViewManagementStore';
 import useSaveViewFormControls from 'views/hooks/useSaveViewFormControls';
 import useCurrentUser from 'hooks/useCurrentUser';
 import TestStoreProvider from 'views/test/TestStoreProvider';
 import useViewsPlugin from 'views/test/testViewsPlugin';
 import OnSaveViewAction from 'views/logic/views/OnSaveViewAction';
 import HotkeysProvider from 'contexts/HotkeysProvider';
 import SearchPageLayoutProvider from 'views/components/contexts/SearchPageLayoutProvider';
+import { createView } from 'views/api/views';
 
 import DashboardActionsMenu from './DashboardActionsMenu';
 
@@ -41,10 +41,8 @@ jest.mock('views/hooks/useSaveViewFormControls');
 jest.mock('hooks/useCurrentUser');
 jest.mock('logic/generateObjectId', () => jest.fn(() => 'new-dashboard-id'));
 
-jest.mock('views/stores/ViewManagementStore', () => ({
-  ViewManagementActions: {
-    create: jest.fn((v) => Promise.resolve(v)).mockName('create'),
-  },
+jest.mock('views/api/views', () => ({
+  createView: jest.fn((v) => Promise.resolve(v)).mockName('create'),
 }));
 
 jest.mock('stores/permissions/EntityShareStore', () => ({
@@ -122,7 +120,7 @@ describe('DashboardActionsMenu', () => {
 
     const updatedDashboard = mockView.toBuilder().id('new-dashboard-id').build();
 
-    await waitFor(() => expect(ViewManagementActions.create).toHaveBeenCalledWith(updatedDashboard, null, undefined));
+    await waitFor(() => expect(createView).toHaveBeenCalledWith(updatedDashboard, null, undefined));
   });
 
   it('should extend a dashboard with plugin data on duplication', async () => {
@@ -146,7 +144,7 @@ describe('DashboardActionsMenu', () => {
       .summary('This dashboard has been extended by a plugin')
       .build();
 
-    await waitFor(() => expect(ViewManagementActions.create).toHaveBeenCalledWith(updatedDashboard, null, 'view-id'));
+    await waitFor(() => expect(createView).toHaveBeenCalledWith(updatedDashboard, null, 'view-id'));
   });
 
   it('should open edit dashboard meta information modal', async () => {

graylog2-web-interface/src/views/components/dashboard/DashboardsOverview/DashboardActions.test.tsx

@@ -22,7 +22,6 @@ import { PluginStore } from 'graylog-web-plugin/plugin';
 import Immutable from 'immutable';
 
 import { asMock } from 'helpers/mocking';
-import { ViewManagementActions } from 'views/stores/ViewManagementStore';
 import OriginalDashboardActions from 'views/components/dashboard/DashboardsOverview/DashboardActions';
 import { simpleView } from 'views/test/ViewFixtures';
 import useCurrentUser from 'hooks/useCurrentUser';
@@ -31,14 +30,13 @@ import useSelectedEntities from 'components/common/EntityDataTable/hooks/useSele
 import type { ContextValue } from 'components/common/PaginatedEntityTable/TableFetchContext';
 import TableFetchContext from 'components/common/PaginatedEntityTable/TableFetchContext';
 import useWindowConfirmMock from 'helpers/mocking/useWindowConfirmMock';
+import { deleteView } from 'views/api/views';
 
 jest.mock('hooks/useCurrentUser');
 jest.mock('components/common/EntityDataTable/hooks/useSelectedEntities');
 
-jest.mock('views/stores/ViewManagementStore', () => ({
-  ViewManagementActions: {
-    delete: jest.fn(() => Promise.resolve()),
-  },
+jest.mock('views/api/views', () => ({
+  deleteView: jest.fn(() => Promise.resolve()),
 }));
 
 const mockSearchParams = {
@@ -100,7 +98,7 @@ describe('DashboardActions', () => {
 
     await waitFor(() => expect(window.confirm).toHaveBeenCalledWith('Are you sure you want to delete "Foo"?'));
 
-    expect(ViewManagementActions.delete).not.toHaveBeenCalledWith(expect.objectContaining({ id: 'foo' }));
+    expect(deleteView).not.toHaveBeenCalledWith(expect.objectContaining({ id: 'foo' }));
   });
 
   it('deletes dashboard when user confirms deletion', async () => {
@@ -112,7 +110,7 @@ describe('DashboardActions', () => {
 
     await waitFor(() => expect(window.confirm).toHaveBeenCalledWith('Are you sure you want to delete "Foo"?'));
 
-    expect(ViewManagementActions.delete).toHaveBeenCalledWith(expect.objectContaining({ id: 'foo' }));
+    expect(deleteView).toHaveBeenCalledWith(expect.objectContaining({ id: 'foo' }));
   });
 
   it('does not display more actions dropdown when user has no permissions for deletion and there are no pluggable actions', async () => {
@@ -140,8 +138,8 @@ describe('DashboardActions', () => {
 
     beforeEach(() => {
       PluginStore.register(plugin);
-      asMock(ViewManagementActions.delete).mockClear();
-      asMock(ViewManagementActions.delete).mockImplementation((view) => Promise.resolve(view));
+      asMock(deleteView).mockClear();
+      asMock(deleteView).mockImplementation(() => Promise.resolve());
     });
 
     afterEach(() => {
@@ -153,9 +151,7 @@ describe('DashboardActions', () => {
 
       await clickDashboardAction('Delete');
 
-      await waitFor(() =>
-        expect(ViewManagementActions.delete).toHaveBeenCalledWith(expect.objectContaining({ id: 'foo' })),
-      );
+      await waitFor(() => expect(deleteView).toHaveBeenCalledWith(expect.objectContaining({ id: 'foo' })));
 
       expect(deletingDashboard).toHaveBeenCalledWith(simpleDashboard);
     });
@@ -169,9 +165,7 @@ describe('DashboardActions', () => {
 
       await clickDashboardAction('Delete');
 
-      await waitFor(() =>
-        expect(ViewManagementActions.delete).toHaveBeenCalledWith(expect.objectContaining({ id: 'foo' })),
-      );
+      await waitFor(() => expect(deleteView).toHaveBeenCalledWith(expect.objectContaining({ id: 'foo' })));
 
       expect(contextValue.refetch).toHaveBeenCalled();
     });
@@ -185,7 +179,7 @@ describe('DashboardActions', () => {
 
       await waitFor(() => expect(deletingDashboard).toHaveBeenCalledWith(simpleDashboard));
 
-      expect(ViewManagementActions.delete).not.toHaveBeenCalledWith(expect.objectContaining({ id: 'foo' }));
+      expect(deleteView).not.toHaveBeenCalledWith(expect.objectContaining({ id: 'foo' }));
     });
 
     it('resorts to default behavior when hook returns `null`', async () => {
@@ -200,7 +194,7 @@ describe('DashboardActions', () => {
 
       expect(window.confirm).toHaveBeenCalledWith('Are you sure you want to delete "Foo"?');
 
-      expect(ViewManagementActions.delete).toHaveBeenCalledWith(expect.objectContaining({ id: 'foo' }));
+      expect(deleteView).toHaveBeenCalledWith(expect.objectContaining({ id: 'foo' }));
     });
 
     it('resorts to default behavior when hook throws error', async () => {
@@ -228,7 +222,7 @@ describe('DashboardActions', () => {
 
       expect(window.confirm).toHaveBeenCalledWith('Are you sure you want to delete "Foo"?');
 
-      expect(ViewManagementActions.delete).toHaveBeenCalledWith(expect.objectContaining({ id: 'foo' }));
+      expect(deleteView).toHaveBeenCalledWith(expect.objectContaining({ id: 'foo' }));
     });
   });
 });

graylog2-web-interface/src/views/components/dashboard/DashboardsOverview/DashboardActions.tsx

@@ -24,7 +24,6 @@ import type View from 'views/logic/views/View';
 import EntityShareModal from 'components/permissions/EntityShareModal';
 import ViewTypeLabel from 'views/components/ViewTypeLabel';
 import iterateConfirmationHooks from 'views/hooks/IterateConfirmationHooks';
-import { ViewManagementActions } from 'views/stores/ViewManagementStore';
 import usePaginationQueryParameter from 'hooks/usePaginationQueryParameter';
 import usePluginEntities from 'hooks/usePluginEntities';
 import useSelectedEntities from 'components/common/EntityDataTable/hooks/useSelectedEntities';
@@ -33,6 +32,7 @@ import { isAnyPermitted } from 'util/PermissionsMixin';
 import useCurrentUser from 'hooks/useCurrentUser';
 import { MoreActions } from 'components/common/EntityDataTable';
 import { useTableFetchContext } from 'components/common/PaginatedEntityTable';
+import { deleteView } from 'views/api/views';
 
 const defaultDashboardDeletionHook = async (view: View) =>
   // eslint-disable-next-line no-alert
@@ -100,7 +100,7 @@ const DashboardDeleteAction = ({
     );
 
     if (result) {
-      ViewManagementActions.delete(dashboard)
+      deleteView(dashboard)
         .then(() => {
           UserNotification.success(`Deleting dashboard "${dashboard.title}" was successful!`, 'Success!');
           deselectEntity(dashboard.id);

graylog2-web-interface/src/views/components/dashboard/DashboardsOverview/DashboardsOverview.test.tsx

@@ -30,15 +30,8 @@ jest.mock('routing/Routes', () => ({ pluginRoute: () => () => '/route' }));
 jest.mock('components/common/PaginatedEntityTable/useFetchEntities');
 jest.mock('components/common/EntityDataTable/hooks/useUserLayoutPreferences');
 
-jest.mock('views/stores/ViewManagementStore', () => ({
-  ViewManagementActions: {
-    delete: jest.fn(),
-    update: {
-      completed: {
-        listen: () => jest.fn(),
-      },
-    },
-  },
+jest.mock('views/api/views', () => ({
+  deleteView: jest.fn(),
 }));
 
 jest.mock('routing/QueryParams', () => ({

graylog2-web-interface/src/views/components/searchbar/saved-search/SearchActionsMenu.test.tsx

@@ -26,7 +26,6 @@ import View from 'views/logic/views/View';
 import Search from 'views/logic/search/Search';
 import type { ViewLoaderContextType } from 'views/logic/ViewLoaderContext';
 import ViewLoaderContext from 'views/logic/ViewLoaderContext';
-import { ViewManagementActions } from 'views/stores/ViewManagementStore';
 import type { NewViewLoaderContextType } from 'views/logic/NewViewLoaderContext';
 import NewViewLoaderContext from 'views/logic/NewViewLoaderContext';
 import * as ViewsPermissions from 'views/Permissions';
@@ -44,6 +43,7 @@ import HotkeysProvider from 'contexts/HotkeysProvider';
 import TestFieldTypesContextProvider from 'views/components/contexts/TestFieldTypesContextProvider';
 import { createEntityShareState } from 'fixtures/entityShareState';
 import { EntityShareStore } from 'stores/permissions/EntityShareStore';
+import { createView } from 'views/api/views';
 
 import SearchActionsMenu from './SearchActionsMenu';
 
@@ -64,10 +64,8 @@ jest.mock('stores/permissions/EntityShareStore', () => ({
   },
 }));
 
-jest.mock('views/stores/ViewManagementStore', () => ({
-  ViewManagementActions: {
-    create: jest.fn((v) => Promise.resolve(v)).mockName('create'),
-  },
+jest.mock('views/api/views', () => ({
+  createView: jest.fn((v) => Promise.resolve(v)).mockName('create'),
 }));
 
 jest.mock('views/hooks/useView');
@@ -84,7 +82,7 @@ jest.mock('views/logic/slices/viewSlice', () => {
 });
 
 describe('SearchActionsMenu', () => {
-  const createView = (id: string = undefined) =>
+  const _createView = (id: string = undefined) =>
     View.builder()
       .id(id)
       .title('title')
@@ -94,7 +92,7 @@ describe('SearchActionsMenu', () => {
       .owner('owningUser')
       .build();
 
-  const defaultView = createView();
+  const defaultView = _createView();
 
   type SimpleSearchActionsMenuProps = {
     loadNewView?: NewViewLoaderContextType;
@@ -190,7 +188,7 @@ describe('SearchActionsMenu', () => {
           .build(),
       );
 
-      asMock(useView).mockReturnValue(createView('some-id'));
+      asMock(useView).mockReturnValue(_createView('some-id'));
       render(<SimpleSearchActionsMenu />);
       userEvent.click(await screen.findByRole('button', { name: /open search actions/i }));
       const exportMenuItem = await screen.findByText('Edit metadata');
@@ -241,7 +239,7 @@ describe('SearchActionsMenu', () => {
 
       const updatedView = defaultView.toBuilder().title('title and further title').id('new-search-id').build();
 
-      await waitFor(() => expect(ViewManagementActions.create).toHaveBeenCalledWith(updatedView, null, 'some-id-1'));
+      await waitFor(() => expect(createView).toHaveBeenCalledWith(updatedView, null, 'some-id-1'));
     });
 
     it('should extend a saved search with plugin data on duplication', async () => {
@@ -271,13 +269,13 @@ describe('SearchActionsMenu', () => {
         .id('new-search-id')
         .build();
 
-      await waitFor(() => expect(ViewManagementActions.create).toHaveBeenCalledWith(updatedView, null, 'some-id-1'));
+      await waitFor(() => expect(createView).toHaveBeenCalledWith(updatedView, null, 'some-id-1'));
 
       expect(screen.queryByText('Pluggable component!')).not.toBeInTheDocument();
     });
 
     it('should save search when pressing related keyboard shortcut', async () => {
-      asMock(useView).mockReturnValue(createView('some-id'));
+      asMock(useView).mockReturnValue(_createView('some-id'));
       render(<SimpleSearchActionsMenu />);
       userEvent.keyboard('{Meta>}s{/Meta}');