WidgetActionsMenu.tsx

/*
 * 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 * as React from 'react';
import { useState, useContext, useCallback } from 'react';
import styled from 'styled-components';
import { PluginStore } from 'graylog-web-plugin/plugin';

import type { BackendWidgetPosition } from 'views/types';
import ExportModal from 'views/components/export/ExportModal';
import MoveWidgetToTab from 'views/logic/views/MoveWidgetToTab';
import { loadAsDashboard, loadDashboard } from 'views/logic/views/Actions';
import { IconButton } from 'components/common';
import type WidgetPosition from 'views/logic/widgets/WidgetPosition';
import View from 'views/logic/views/View';
import Search from 'views/logic/search/Search';
import CopyWidgetToDashboard from 'views/logic/views/CopyWidgetToDashboard';
import IfSearch from 'views/components/search/IfSearch';
import { MenuItem, DeleteMenuItem } from 'components/bootstrap';
import type Widget from 'views/logic/widgets/Widget';
import iterateConfirmationHooks from 'views/hooks/IterateConfirmationHooks';
import DrilldownContext from 'views/components/contexts/DrilldownContext';
import useView from 'views/hooks/useView';
import createSearch from 'views/logic/slices/createSearch';
import type { ViewsDispatch } from 'views/stores/useViewsDispatch';
import useViewsDispatch from 'views/stores/useViewsDispatch';
import { selectQuery, updateView } from 'views/logic/slices/viewSlice';
import { duplicateWidget, removeWidget } from 'views/logic/slices/widgetActions';
import fetchSearch from 'views/logic/views/fetchSearch';
import type { HistoryFunction } from 'routing/useHistory';
import useHistory from 'routing/useHistory';
import useSendTelemetry from 'logic/telemetry/useSendTelemetry';
import useParameters from 'views/hooks/useParameters';
import { TELEMETRY_EVENT_TYPE } from 'logic/telemetry/Constants';
import ExtractWidgetIntoNewView from 'views/logic/views/ExtractWidgetIntoNewView';
import ExtraMenuWidgetActions from 'views/components/widgets/ExtraMenuWidgetActions';
import { widgetActionsMenuClass } from 'views/components/widgets/Constants';
import type { ActionComponents } from 'views/components/actions/ActionHandler';
import { getView, updateView as _updateView } from 'views/api/views';

import ReplaySearchButton from './ReplaySearchButton';
import ExtraDropdownWidgetActions from './ExtraDropdownWidgetActions';
import CopyToDashboard from './CopyToDashboardForm';
import MoveWidgetToTabModal from './MoveWidgetToTabModal';
import WidgetActionDropdown from './WidgetActionDropdown';
import WidgetHorizontalStretch from './WidgetHorizontalStretch';

import IfInteractive from '../dashboard/IfInteractive';
import IfDashboard from '../dashboard/IfDashboard';
import WidgetFocusContext from '../contexts/WidgetFocusContext';
import WidgetContext from '../contexts/WidgetContext';

const Container = styled.div`
  line-height: 0;

  > *:not(:last-child) {
    margin-right: 2px;
  }
`;

const _onCopyToDashboard = async (
  view: View,
  setShowCopyToDashboard: (show: boolean) => void,
  widgetId: string,
  dashboardId: string | undefined | null,
  history: HistoryFunction,
) => {
  if (!dashboardId) {
    return;
  }

  const dashboardJson = await getView(dashboardId);
  const dashboard = View.fromJSON(dashboardJson);
  const search = await fetchSearch(dashboardJson.search_id).then((searchJson) => Search.fromJSON(searchJson));
  const newDashboard = CopyWidgetToDashboard(widgetId, view, dashboard.toBuilder().search(search).build());

  if (newDashboard?.search) {
    const newSearch = await createSearch(newDashboard.search);
    const newDashboardWithSearch = newDashboard.toBuilder().search(newSearch).build();
    await _updateView(newDashboardWithSearch);

    loadDashboard(history, newDashboardWithSearch.id);
  }

  setShowCopyToDashboard(false);
};

const _onCreateNewDashboard = async (view: View, widgetId: string, history: HistoryFunction) => {
  const newView = ExtractWidgetIntoNewView(view, widgetId);

  loadAsDashboard(history, newView);
};

const _onMoveWidgetToPage = async (
  dispatch: ViewsDispatch,
  view: View,
  setShowMoveWidgetToTab: (show: boolean) => void,
  widgetId: string,
  queryId: string,
  keepCopy: boolean,
) => {
  if (!queryId) {
    return;
  }

  const newDashboard = MoveWidgetToTab(widgetId, queryId, view, keepCopy);

  if (newDashboard) {
    const searchResponse = await createSearch(newDashboard.search);
    const updatedDashboard = newDashboard.toBuilder().search(searchResponse).build();
    await dispatch(updateView(updatedDashboard, true));
    setShowMoveWidgetToTab(false);
    await dispatch(selectQuery(queryId));
  }
};

const defaultOnDeleteWidget = async (_widget: Widget, _view: View, title: string) =>
  // eslint-disable-next-line no-alert
  window.confirm(`Are you sure you want to remove the widget "${title}"?`);

const _onDelete = (widget: Widget, view: View, title: string) => async (dispatch: ViewsDispatch) => {
  const pluggableWidgetDeletionHooks = PluginStore.exports('views.hooks.confirmDeletingWidget');

  const result = await iterateConfirmationHooks(
    [...pluggableWidgetDeletionHooks, defaultOnDeleteWidget],
    widget,
    view,
    title,
  );

  return result === true ? dispatch(removeWidget(widget.id)) : Promise.resolve();
};

const _onDuplicate = (widgetId: string, unsetWidgetFocusing: () => void, title: string) => (dispatch: ViewsDispatch) =>
  dispatch(duplicateWidget(widgetId, title)).then(() => unsetWidgetFocusing());

type Props = {
  isFocused: boolean;
  onPositionsChange: (position: BackendWidgetPosition) => void;
  position: WidgetPosition;
  title: string;
  toggleEdit: () => void;
};

const WidgetActionsMenu = ({ isFocused, onPositionsChange, position, title, toggleEdit }: Props) => {
  const widget = useContext(WidgetContext);
  const view = useView();
  const { query, timerange, streams, streamCategories } = useContext(DrilldownContext);
  const { setWidgetFocusing, unsetWidgetFocusing } = useContext(WidgetFocusContext);
  const [showCopyToDashboard, setShowCopyToDashboard] = useState(false);
  const [showExport, setShowExport] = useState(false);
  const [showMoveWidgetToTab, setShowMoveWidgetToTab] = useState(false);
  const dispatch = useViewsDispatch();
  const history = useHistory();
  const sendTelemetry = useSendTelemetry();
  const { parameters, parameterBindings } = useParameters();
  const [overflowingComponents, setOverflowingComponents] = useState<ActionComponents>({});
  const overflowingComponentsValues: Array<React.ReactNode> = Object.values(overflowingComponents);

  const onDuplicate = useCallback(() => {
    sendTelemetry(TELEMETRY_EVENT_TYPE.SEARCH_WIDGET_ACTION.DUPLICATE, {
      app_section: 'search-widget',
      app_action_value: 'widget-duplicate-button',
    });

    return dispatch(_onDuplicate(widget.id, unsetWidgetFocusing, title));
  }, [sendTelemetry, dispatch, widget.id, unsetWidgetFocusing, title]);

  const onCopyToDashboard = useCallback(
    (widgetId: string, dashboardId: string) => {
      sendTelemetry(TELEMETRY_EVENT_TYPE.SEARCH_WIDGET_ACTION.COPY_TO_DASHBOARD, {
        app_section: 'search-widget',
        app_action_value: 'widget-copy-to-dashboard-button',
      });

      return _onCopyToDashboard(view, setShowCopyToDashboard, widgetId, dashboardId, history);
    },
    [history, sendTelemetry, view],
  );

  const onCreateNewDashboard = useCallback(() => {
    sendTelemetry(TELEMETRY_EVENT_TYPE.SEARCH_WIDGET_ACTION.CREATE_NEW_DASHBOARD, {
      app_section: 'search-widget',
      app_action_value: 'widget-create-new-dashboard-button',
    });

    return _onCreateNewDashboard(view, widget.id, history);
  }, [sendTelemetry, view, widget.id, history]);

  const onMoveWidgetToTab = useCallback(
    (widgetId: string, queryId: string, keepCopy: boolean) => {
      sendTelemetry(TELEMETRY_EVENT_TYPE.SEARCH_WIDGET_ACTION.MOVE, {
        app_section: 'search-widget',
        app_action_value: 'widget-move-button',
      });

      return _onMoveWidgetToPage(dispatch, view, setShowMoveWidgetToTab, widgetId, queryId, keepCopy);
    },
    [dispatch, sendTelemetry, view],
  );
  const onDelete = useCallback(() => {
    sendTelemetry(TELEMETRY_EVENT_TYPE.SEARCH_WIDGET_ACTION.DELETED, {
      app_section: 'search-widget',
      app_action_value: 'widget-delete-button',
    });

    return dispatch(_onDelete(widget, view, title));
  }, [dispatch, sendTelemetry, title, view, widget]);
  const focusWidget = useCallback(() => {
    sendTelemetry(TELEMETRY_EVENT_TYPE.SEARCH_WIDGET_ACTION.FOCUSED, {
      app_section: 'search-widget',
      app_action_value: 'widget-focus-button',
    });

    return setWidgetFocusing(widget.id);
  }, [sendTelemetry, setWidgetFocusing, widget.id]);

  return (
    <Container className={widgetActionsMenuClass}>
      <IfInteractive>
        <IfDashboard>
          <ReplaySearchButton
            queryString={query.query_string}
            timerange={timerange}
            streams={streams}
            streamCategories={streamCategories}
            parameterBindings={parameterBindings}
            parameters={parameters}
            filters={widget.filters}
          />
        </IfDashboard>
        <ExtraMenuWidgetActions widget={widget} />
        {isFocused && <IconButton name="fullscreen_exit" title="Un-focus widget" onClick={unsetWidgetFocusing} />}
        {!isFocused && (
          <>
            <WidgetHorizontalStretch
              widgetId={widget.id}
              widgetType={widget.type}
              onStretch={onPositionsChange}
              position={position}
            />
            <IconButton name="fullscreen" title="Focus this widget" onClick={focusWidget} />
          </>
        )}

        <IconButton name="edit_square" title="Edit" iconType="regular" onClick={toggleEdit} />

        <WidgetActionDropdown>
          <MenuItem onSelect={onDuplicate}>Duplicate</MenuItem>
          <IfSearch>
            <MenuItem onSelect={() => setShowCopyToDashboard(true)}>Copy to Dashboard</MenuItem>
          </IfSearch>
          <IfDashboard>
            <MenuItem onSelect={() => setShowMoveWidgetToTab(true)}>Move to Page</MenuItem>
          </IfDashboard>
          <ExtraDropdownWidgetActions widget={widget} setComponents={setOverflowingComponents} />
          <MenuItem divider />
          <DeleteMenuItem onSelect={onDelete} />
        </WidgetActionDropdown>

        {showCopyToDashboard && (
          <CopyToDashboard
            onCopyToDashboard={(dashboardId) => onCopyToDashboard(widget.id, dashboardId)}
            onCancel={() => setShowCopyToDashboard(false)}
            submitLoadingText="Copying widget..."
            submitButtonText="Copy widget"
            onCreateNewDashboard={onCreateNewDashboard}
          />
        )}

        {showExport && (
          <ExportModal view={view} directExportWidgetId={widget.id} closeModal={() => setShowExport(false)} />
        )}

        {showMoveWidgetToTab && (
          <MoveWidgetToTabModal
            view={view}
            widgetId={widget.id}
            onCancel={() => setShowMoveWidgetToTab(false)}
            onSubmit={onMoveWidgetToTab}
          />
        )}
      </IfInteractive>
      {overflowingComponentsValues}
    </Container>
  );
};

export default WidgetActionsMenu;