Unify styling of delete menu items further.

graylog2-web-interface/src/components/bootstrap/DropdownButton.test.tsx

@@ -18,7 +18,7 @@ import * as React from 'react';
 import { render, screen, waitFor } from 'wrappedTestingLibrary';
 import userEvent from '@testing-library/user-event';
 
-import MenuItem from 'components/bootstrap/MenuItem';
+import { MenuItem } from 'components/bootstrap';
 
 import DropdownButton from './DropdownButton';
 

graylog2-web-interface/src/components/bootstrap/Menu.md

@@ -0,0 +1,15 @@
+#### Simple implementation
+```tsx
+import { Menu, MenuItem, DeleteMenuItem, Button } from 'components/bootstrap';
+
+<Menu>
+  <Menu.Target>
+    <Button>Open menu</Button>
+  </Menu.Target>
+  <Menu.Dropdown>
+    <MenuItem onClick={() => console.log('on click menu item')}>Edit</MenuItem>
+    <Menu.Divider />
+    <DeleteMenuItem onClick={() => console.log('on click menu item')}>Delete</DeleteMenuItem>
+  </Menu.Dropdown>
+</Menu>
+```

graylog2-web-interface/src/components/bootstrap/index.ts

@@ -24,6 +24,7 @@ export { default as ButtonGroup } from './ButtonGroup';
 export { default as ButtonToolbar } from './ButtonToolbar';
 export { default as Checkbox } from './Checkbox';
 export { default as ControlLabel } from './ControlLabel';
+export { default as DeleteMenuItem } from './menuitem/DeleteMenuItem';
 export { default as DropdownButton } from './DropdownButton';
 export { default as FormControl } from './FormControl';
 export { default as FormGroup } from './FormGroup';
@@ -37,7 +38,7 @@ export { default as Label } from './Label';
 export { default as ListGroup } from './ListGroup';
 export { default as ListGroupItem } from './ListGroupItem';
 export { default as Menu } from './Menu';
-export { default as MenuItem } from './MenuItem';
+export { default as MenuItem } from './menuitem/MenuItem';
 export { default as Modal } from './Modal';
 export { default as Nav } from './Nav';
 export { default as NavDropdown } from './NavDropdown';

graylog2-web-interface/src/components/bootstrap/menuitem/DeleteMenuItem.tsx

@@ -0,0 +1,31 @@
+/*
+ * 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 styled, { css } from 'styled-components';
+
+import MenuItem from './MenuItem';
+
+const StyledMenuItem = styled(MenuItem)(({ theme }) => css`
+  color: ${theme.colors.variant.danger};
+`);
+
+type Props = React.ComponentProps<typeof MenuItem>
+
+const DeleteMenuItem = (props: Props) => <StyledMenuItem {...props} />;
+
+export default DeleteMenuItem;

graylog2-web-interface/src/components/bootstrap/MenuItem.tsx → graylog2-web-interface/src/components/bootstrap/menuitem/MenuItem.tsx

@@ -16,16 +16,12 @@
  */
 import * as React from 'react';
 import { useCallback } from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import { Link } from 'react-router-dom';
 
 import Icon from 'components/common/Icon';
 
-import Menu from './Menu';
-
-const StyledMenuItem = styled(Menu.Item)<{ $variant: 'danger' | undefined }>(({ $variant, theme }) => css`
-  ${$variant ? `color: ${theme.colors.variant.danger};` : ''}
-`);
+import Menu from '../Menu';
 
 const IconWrapper = styled.div`
   display: inline-flex;
@@ -54,11 +50,10 @@
   rel?: 'noopener noreferrer',
   target?: '_blank',
   title?: string,
-  variant?: 'danger'
   closeMenuOnClick?: boolean,
 }>;
 
-const CustomMenuItem = <T, >({ children, className, disabled = false, divider = false, eventKey, header = false, href, icon, id, onClick, onSelect, rel, target, title, 'data-tab-id': dataTabId, component, variant, closeMenuOnClick }: Props<T>) => {
+const CustomMenuItem = <T, >({ children, className, disabled = false, divider = false, eventKey, header = false, href, icon, id, onClick, onSelect, rel, target, title, 'data-tab-id': dataTabId, component, closeMenuOnClick }: Props<T>) => {
   const callback = onClick ?? onSelect;
   const _onClick = useCallback(() => callback?.(eventKey), [callback, eventKey]);
 
@@ -71,7 +66,6 @@
   }
 
   const sharedProps = {
-    $variant: variant,
     className,
     'data-tab-id': dataTabId,
     disabled,
@@ -84,16 +78,16 @@
 
   if (href) {
     return (
-      <StyledMenuItem component={Link} to={href} rel={rel} target={target} {...sharedProps}>
+      <Menu.Item component={Link} to={href} rel={rel} target={target} {...sharedProps}>
         {children}
-      </StyledMenuItem>
+      </Menu.Item>
     );
   }
 
   return (
-    <StyledMenuItem component={component} {...sharedProps}>
+    <Menu.Item component={component} {...sharedProps}>
       {children}
-    </StyledMenuItem>
+    </Menu.Item>
   );
 };
 

graylog2-web-interface/src/components/common/EntityDataTable/BulkActionsDropdown.tsx

@@ -18,8 +18,7 @@ import * as React from 'react';
 import { useCallback } from 'react';
 import type { PropsWithChildren } from 'react';
 
-import MenuItem from 'components/bootstrap/MenuItem';
-import { DropdownButton } from 'components/bootstrap';
+import { MenuItem, DropdownButton } from 'components/bootstrap';
 
 import useSelectedEntities from './hooks/useSelectedEntities';
 

graylog2-web-interface/src/components/common/EntityDataTable/ColumnsVisibilitySelect.tsx

@@ -18,11 +18,10 @@ import styled from 'styled-components';
 import * as React from 'react';
 import { useMemo } from 'react';
 
-import { Checkbox, DropdownButton } from 'components/bootstrap';
+import { Checkbox, DropdownButton, MenuItem } from 'components/bootstrap';
 import type { Column } from 'components/common/EntityDataTable/types';
 import TextOverflowEllipsis from 'components/common/TextOverflowEllipsis';
 import { defaultCompare as naturalSort } from 'logic/DefaultCompare';
-import MenuItem from 'components/bootstrap/MenuItem';
 
 const StyledDropdownButton = styled(DropdownButton)`
   ~ .dropdown-menu {

graylog2-web-interface/src/components/common/EntityFilters/CreateFilterDropdown.tsx

@@ -18,7 +18,7 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 
 import OverlayDropdownButton from 'components/common/OverlayDropdownButton';
-import MenuItem from 'components/bootstrap/MenuItem';
+import { MenuItem } from 'components/bootstrap';
 import { HoverForHelp, Icon } from 'components/common';
 import type { Attributes } from 'stores/PaginationTypes';
 import type { Filters, Filter } from 'components/common/EntityFilters/types';

graylog2-web-interface/src/components/common/EntityFilters/FilterConfiguration/FilterConfiguration.tsx

@@ -18,7 +18,7 @@ import * as React from 'react';
 
 import type { Attribute } from 'stores/PaginationTypes';
 import type { Filters, Filter } from 'components/common/EntityFilters/types';
-import MenuItem from 'components/bootstrap/MenuItem';
+import { MenuItem } from 'components/bootstrap';
 import {
   isAttributeWithFilterOptions,
   isAttributeWithRelatedCollection, isDateAttribute,

graylog2-web-interface/src/components/common/EntityFilters/FilterConfiguration/StaticOptionsList.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 
 import type { Attribute } from 'stores/PaginationTypes';
-import MenuItem from 'components/bootstrap/MenuItem';
+import { MenuItem } from 'components/bootstrap';
 import { defaultCompare } from 'logic/DefaultCompare';
 import type { Filters } from 'components/common/EntityFilters/types';
 

graylog2-web-interface/src/components/common/EntityList.md

@@ -37,7 +37,7 @@ const items = entities.map(entity => {
                     actions={[
                       <Button key={1} bsStyle="info">Edit</Button>,
                       <DropdownButton key={2} id="more-dropdown" title="More" pullRight>
-                        <MenuItem variant="danger">Delete</MenuItem>
+                        <MenuItem>Edit</MenuItem>
                       </DropdownButton>,
                     ]}
                     contentRow={

graylog2-web-interface/src/components/content-packs/ContentPackParameterList.tsx

@@ -98,7 +98,7 @@ class ContentPackParameterList extends React.Component<ContentPackParameterListP
           && (
             <td>
               <ButtonToolbar>
-                <Button bsStyle="primary"
+                <Button bsStyle="danger"
                         bsSize="xs"
                         title={buttonTitle}
                         disabled={parameterApplied}

graylog2-web-interface/src/components/content-packs/components/ContentPackListItem.tsx

@@ -25,7 +25,7 @@ import {
   MenuItem,
   Modal,
   Row,
-  ButtonToolbar,
+  ButtonToolbar, DeleteMenuItem,
 } from 'components/bootstrap';
 import { ModalSubmit } from 'components/common';
 import ControlledTableListItem from 'components/common/ControlledTableListItem';
@@ -96,9 +96,9 @@ const ContentPackListItem = ({ pack, contentPackMetadata, onDeletePack, onInstal
                 Download
               </MenuItem>
               <MenuItem divider />
-              <MenuItem onSelect={handleDeleteAllVersions}>
+              <DeleteMenuItem onSelect={handleDeleteAllVersions}>
                 Delete All Versions
-              </MenuItem>
+              </DeleteMenuItem>
             </DropdownButton>
           </ButtonToolbar>
         </Col>

graylog2-web-interface/src/components/content-packs/components/ContentPackVersionItem.tsx

@@ -30,6 +30,7 @@ import {
   ButtonToolbar,
   MenuItem,
   Modal,
+  DeleteMenuItem,
 } from 'components/bootstrap';
 import type { ContentPackInstallation } from 'components/content-packs/Types';
 import type ContentPackRevisions from 'logic/content-packs/ContentPackRevisions';
@@ -97,10 +98,9 @@ const ContentPackVersionItem = ({
               <MenuItem>Create New From Revision</MenuItem>
             </LinkContainer>
             <MenuItem divider />
-            <MenuItem onClick={() => {
-              onDeletePack(pack.id, pack.rev);
-            }}>Delete
-            </MenuItem>
+            <DeleteMenuItem onClick={() => { onDeletePack(pack.id, pack.rev); }}>
+              Delete
+            </DeleteMenuItem>
           </DropdownButton>
         </ButtonToolbar>
       </td>

graylog2-web-interface/src/components/datanode/DataNodeList/DataNodeBulkActions.tsx

@@ -17,7 +17,7 @@
 import * as React from 'react';
 import { useState, useRef } from 'react';
 
-import MenuItem from 'components/bootstrap/MenuItem';
+import { MenuItem } from 'components/bootstrap';
 import BulkActionsDropdown from 'components/common/EntityDataTable/BulkActionsDropdown';
 import useSelectedEntities from 'components/common/EntityDataTable/hooks/useSelectedEntities';
 import ConfirmDialog from 'components/common/ConfirmDialog';

graylog2-web-interface/src/components/event-definitions/event-definitions/BulkActions.tsx

@@ -23,7 +23,7 @@ import ApiRoutes from 'routing/ApiRoutes';
 import fetch from 'logic/rest/FetchProvider';
 import { qualifyUrl, getPathnameWithoutId } from 'util/URLUtils';
 import UserNotification from 'util/UserNotification';
-import { MenuItem } from 'components/bootstrap';
+import { MenuItem, DeleteMenuItem } from 'components/bootstrap';
 import StringUtils from 'util/StringUtils';
 import BulkActionsDropdown from 'components/common/EntityDataTable/BulkActionsDropdown';
 import useSendTelemetry from 'logic/telemetry/useSendTelemetry';
@@ -144,7 +144,7 @@ const BulkActions = () => {
       <BulkActionsDropdown>
         <MenuItem onSelect={() => handleAction(ACTION_TYPES.ENABLE)}>Enable</MenuItem>
         <MenuItem onSelect={() => handleAction(ACTION_TYPES.DISABLE)}>Disable</MenuItem>
-        <MenuItem onSelect={() => handleAction(ACTION_TYPES.DELETE)} variant="danger">Delete</MenuItem>
+        <DeleteMenuItem onSelect={() => handleAction(ACTION_TYPES.DELETE)}>Delete</DeleteMenuItem>
       </BulkActionsDropdown>
       {showDialog && (
         <ConfirmDialog title={ACTION_TEXT[actionType]?.dialogTitle}

graylog2-web-interface/src/components/event-definitions/event-definitions/EventDefinitionActions.tsx

@@ -27,7 +27,7 @@ import {
 } from 'components/common';
 import {
   ButtonToolbar,
-  MenuItem,
+  MenuItem, DeleteMenuItem,
 } from 'components/bootstrap';
 import useGetPermissionsByScope from 'hooks/useScopePermissions';
 import { EventDefinitionsActions } from 'stores/event-definitions/EventDefinitionsStore';
@@ -272,11 +272,12 @@ const EventDefinitionActions = ({ eventDefinition }: Props) => {
           {showActions() && (
             <IfPermitted permissions={`eventdefinitions:delete:${eventDefinition.id}`}>
               <MenuItem divider />
-              <MenuItem disabled={isSystemEventDefinition() || isSigmaEventDefinition()}
-                        title={getDeleteActionTitle()}
-                        onClick={isSystemEventDefinition() || isSigmaEventDefinition() ? undefined : () => handleAction(DIALOG_TYPES.DELETE, eventDefinition)}
-                        data-testid="delete-button">Delete
-              </MenuItem>
+              <DeleteMenuItem disabled={isSystemEventDefinition() || isSigmaEventDefinition()}
+                              title={getDeleteActionTitle()}
+                              onClick={isSystemEventDefinition() || isSigmaEventDefinition() ? undefined : () => handleAction(DIALOG_TYPES.DELETE, eventDefinition)}
+                              data-testid="delete-button">
+                Delete
+              </DeleteMenuItem>
             </IfPermitted>
           )}
           {

graylog2-web-interface/src/components/event-definitions/event-definitions/EventDefinitionEntry.tsx

@@ -33,7 +33,7 @@ import {
   Button,
   DropdownButton,
   Label,
-  MenuItem,
+  MenuItem, DeleteMenuItem,
 } from 'components/bootstrap';
 import ButtonToolbar from 'components/bootstrap/ButtonToolbar';
 
@@ -139,7 +139,7 @@ const EventDefinitionEntry = ({
           {showActions() && (
             <IfPermitted permissions={`eventdefinitions:delete:${eventDefinition.id}`}>
               <MenuItem divider />
-              <MenuItem onClick={handleDelete} variant="danger">Delete</MenuItem>
+              <DeleteMenuItem onClick={handleDelete}>Delete</DeleteMenuItem>
             </IfPermitted>
           )}
         </DropdownButton>

graylog2-web-interface/src/components/event-notifications/event-notifications/BulkActions.tsx

@@ -24,7 +24,7 @@ import type FetchError from 'logic/errors/FetchError';
 import fetch from 'logic/rest/FetchProvider';
 import { getPathnameWithoutId, qualifyUrl } from 'util/URLUtils';
 import UserNotification from 'util/UserNotification';
-import { MenuItem } from 'components/bootstrap';
+import { DeleteMenuItem } from 'components/bootstrap';
 import StringUtils from 'util/StringUtils';
 import BulkActionsDropdown from 'components/common/EntityDataTable/BulkActionsDropdown';
 import useSendTelemetry from 'logic/telemetry/useSendTelemetry';
@@ -87,7 +87,7 @@ const BulkActions = () => {
 
   return (
     <BulkActionsDropdown>
-      <MenuItem onSelect={() => onDelete()} variant="danger">Delete</MenuItem>
+      <DeleteMenuItem onSelect={() => onDelete()}>Delete</DeleteMenuItem>
     </BulkActionsDropdown>
   );
 };

graylog2-web-interface/src/components/event-notifications/event-notifications/EventNotificationActions.tsx

@@ -21,7 +21,7 @@ import UserNotification from 'util/UserNotification';
 import { ConfirmDialog, IfPermitted, ShareButton } from 'components/common';
 import { LinkContainer } from 'components/common/router';
 import Routes from 'routing/Routes';
-import { MenuItem, ButtonToolbar } from 'components/bootstrap';
+import { MenuItem, ButtonToolbar, DeleteMenuItem } from 'components/bootstrap';
 import type { EventNotification } from 'stores/event-notifications/EventNotificationsStore';
 import { EventNotificationsActions } from 'stores/event-notifications/EventNotificationsStore';
 import EntityShareModal from 'components/permissions/EntityShareModal';
@@ -105,7 +105,7 @@ const EventNotificationActions = ({ isTestLoading, notification, onTest }: Props
             </IfPermitted>
             <MenuItem divider />
             <IfPermitted permissions={`eventnotifications:delete:${notification.id}`}>
-              <MenuItem onClick={onDelete} variant="danger">Delete</MenuItem>
+              <DeleteMenuItem onClick={onDelete}>Delete</DeleteMenuItem>
             </IfPermitted>
           </IfPermitted>
         </MoreActions>

graylog2-web-interface/src/components/event-notifications/event-notifications/EventNotifications.tsx

@@ -32,7 +32,7 @@ import {
   Icon,
   QueryHelper,
 } from 'components/common';
-import { Col, DropdownButton, MenuItem, Row, Button } from 'components/bootstrap';
+import { Col, DropdownButton, MenuItem, Row, Button, DeleteMenuItem } from 'components/bootstrap';
 import Routes from 'routing/Routes';
 
 import styles from './EventNotifications.css';
@@ -147,7 +147,7 @@ class EventNotifications extends React.Component<EventNotificationsProps, {
             </IfPermitted>
             <MenuItem divider />
             <IfPermitted permissions={`eventnotifications:delete:${notification.id}`}>
-              <MenuItem onClick={onDelete(notification)} variant="danger">Delete</MenuItem>
+              <DeleteMenuItem onClick={onDelete(notification)}>Delete</DeleteMenuItem>
             </IfPermitted>
           </DropdownButton>
         </IfPermitted>

graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/ProfileActions.tsx

@@ -16,7 +16,7 @@
  */
 import React from 'react';
 
-import { Button, ButtonToolbar, MenuItem } from 'components/bootstrap';
+import { Button, ButtonToolbar, DeleteMenuItem } from 'components/bootstrap';
 import Routes from 'routing/Routes';
 import { LinkContainer } from 'components/common/router';
 import { MoreActions } from 'components/common/EntityDataTable';
@@ -44,9 +44,9 @@ const ProfileActions = ({ profileId, profileName }: { profileId: string, profile
         </Button>
       </LinkContainer>
       <MoreActions>
-        <MenuItem onSelect={onDelete}>
+        <DeleteMenuItem onSelect={onDelete}>
           Delete
-        </MenuItem>
+        </DeleteMenuItem>
       </MoreActions>
     </ButtonToolbar>
   );