Replace font awesome with material symbol icons. (#18208)

* Replace font awesome with material symbol icons. * Remove custom implementations of font awesome icons. * Fix icon sizes * Fix pagination icons. * Remove no longer needed font awesome related code. * Unify drag handle icon * Use icon name type from material symbols library * Implement brand icon. * Fix sort icons. * Change icon size to match previous icon size. * Fic navigation height. * Fixin icon spin. * Fix icon fill. * Cleanup icons. * Fix brand icon color problem. * Remove no longer needed icon props. * Fixing thermometer icon. * Remove no longer needed support link component. * Replace icon stack with identical icon. * Update icon names * Use rounded instead of outlined icons. * Improve widget icons. * Fix `ExpandableList` test. * Fix further tests * Fix list field test. * Adding examples. * Update props. * Adding title for buttons in search action menu. * Update icon names. * Add custom helper function for `selectEvent` clearAll. * Fixing test
Graylog2 · Feb 23, 2024 · 27262a9 · 27262a9
1 parent ff6479c
commit 27262a9
Show file tree

Hide file tree

Showing 239 changed files with 941 additions and 1,086 deletions.
diff --git a/graylog2-web-interface/package.json b/graylog2-web-interface/package.json
@@ -77,6 +77,7 @@
     "leaflet": "^1.5.1",
     "lodash": "^4.17.4",
     "marked": "^12.0.0",
+    "material-symbols": "^0.14.7",
     "md5": "^2.2.1",
     "moment-duration-format": "2.3.2",
     "moment-precise-range-plugin": "^1.3.0",

diff --git a/...erface/src/components/authentication/directoryServices/BackendWizard/StepTitleWarning.tsx b/...erface/src/components/authentication/directoryServices/BackendWizard/StepTitleWarning.tsx
@@ -26,7 +26,7 @@ type Props = {
 
 const StepTitleWarning = ({ invalidStepKeys = [], stepKey }: Props) => {
   if (invalidStepKeys.includes(stepKey)) {
-    return <><Icon name="exclamation-triangle" />{' '}</>;
+    return <><Icon name="warning" />{' '}</>;
   }
 
   return null;

diff --git a/graylog2-web-interface/src/components/bootstrap/Alert.tsx b/graylog2-web-interface/src/components/bootstrap/Alert.tsx
@@ -54,11 +54,11 @@ const iconNameForType = (bsStyle: ColorVariant) => {
   switch (bsStyle) {
     case 'warning':
     case 'danger':
-      return 'exclamation-triangle';
+      return 'error';
     case 'success':
-      return 'circle-check';
+      return 'check_circle';
     default:
-      return 'info-circle';
+      return 'info';
   }
 };
 

diff --git a/graylog2-web-interface/src/components/bootstrap/DropdownButton.test.tsx b/graylog2-web-interface/src/components/bootstrap/DropdownButton.test.tsx
@@ -30,10 +30,10 @@ describe('DropdownButton', () => {
       </DropdownButton>
     ));
 
-    const button = await screen.findByRole('button', { name: 'Click me!' });
+    const button = await screen.findByRole('button', { name: /click me!/i });
     await userEvent.click(button);
 
-    await screen.findByRole('menuitem', { name: 'Hey there!' });
+    await screen.findByRole('menuitem', { name: /hey there!/i });
   });
 
   it('click on menu item triggers onClick and closes menu', async () => {
@@ -45,10 +45,10 @@ describe('DropdownButton', () => {
       </DropdownButton>
     ));
 
-    const button = await screen.findByRole('button', { name: 'Click me!' });
+    const button = await screen.findByRole('button', { name: /click me!/i });
     await userEvent.click(button);
 
-    const menuitem = await screen.findByRole('menuitem', { name: 'Hey there!' });
+    const menuitem = await screen.findByRole('menuitem', { name: /hey there!/i });
     await userEvent.click(menuitem);
 
     await waitFor(() => {

diff --git a/graylog2-web-interface/src/components/bootstrap/DropdownButton.tsx b/graylog2-web-interface/src/components/bootstrap/DropdownButton.tsx
@@ -48,7 +48,7 @@ const DropdownButton = ({ buttonTitle, children, closeOnItemClick, dropup, title
   <Menu position={position(pullRight, dropup)} onChange={onToggle} keepMounted={keepMounted} closeOnItemClick={closeOnItemClick}>
     <Menu.Target>
       <Button onClick={onMouseDown} aria-label={buttonTitle} {...rest} title={buttonTitle}>
-        {title}{noCaret ? null : <>{' '}<Icon name="caret-down" /></>}
+        {title}{noCaret ? null : <>{' '}<Icon name="arrow_drop_down" /></>}
       </Button>
     </Menu.Target>
     <Menu.Dropdown>{children}</Menu.Dropdown>

diff --git a/graylog2-web-interface/src/components/bootstrap/NavDropdown.tsx b/graylog2-web-interface/src/components/bootstrap/NavDropdown.tsx
@@ -56,7 +56,8 @@ const StyledMenuDropdown = styled(Menu.Dropdown)`
 const DropdownTrigger = styled.button<{ $active: boolean }>(({ theme, $active }) => css`
   background: transparent;
   border: 0;
-  padding: 15px;
+  padding: 0 15px;
+  min-height: ${NAV_ITEM_HEIGHT};
 
   &:hover {
     ${hoverIndicatorStyles(theme)}

diff --git a/graylog2-web-interface/src/components/bootstrap/SplitButton.tsx b/graylog2-web-interface/src/components/bootstrap/SplitButton.tsx
@@ -37,7 +37,7 @@ const SplitButton = React.forwardRef<HTMLButtonElement, Props>(
           {title}
         </Button>
         <Menu.Target>
-          <Button ref={ref} aria-label="More Actions" {...props}><Icon name="caret-down" /></Button>
+          <Button ref={ref} aria-label="More Actions" {...props}><Icon name="arrow_drop_down" /></Button>
         </Menu.Target>
         <Menu.Dropdown>
           {children}

diff --git a/graylog2-web-interface/src/components/common/BrandIcon.md b/graylog2-web-interface/src/components/common/BrandIcon.md
@@ -0,0 +1,11 @@
+Examples:
+```js
+<p>
+  <strong>Brand icons:</strong>{' '}
+  <BrandIcon name="apple" />{' '}
+  <BrandIcon name="freebsd" />{' '}
+  <BrandIcon name="github" />{' '}
+  <BrandIcon name="linux" />{' '}
+  <BrandIcon name="windows" />
+</p>
+```
diff --git a/graylog2-web-interface/src/components/common/BrandIcon.tsx b/graylog2-web-interface/src/components/common/BrandIcon.tsx
@@ -0,0 +1,91 @@
+/*
+ * 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 from 'styled-components';
+
+type IconName = 'apple' | 'freebsd' | 'github' | 'linux' | 'windows';
+
+const Container = styled.div`
+  padding: 3px;
+  height: 20px;
+  width: 20px;
+  vertical-align: sub;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  
+  svg {
+    width: 100%;
+  }
+`;
+
+const _imageSrc = (name: string) => {
+  switch (name) {
+    case 'apple':
+      return (
+        <svg xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" width="24" height="24" viewBox="0 0 814 1000">
+          <path fill="currentColor" d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z" />
+        </svg>
+      );
+    case 'freebsd':
+      return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 64 64">
+          <path fill="currentColor" d="M63.27 1.608c3.4 3.4-6.03 18.295-7.62 19.886s-5.6.126-9-3.266-4.856-7.4-3.266-9c1.6-1.633 16.495-11 19.886-7.62zM15.7 5.2C10.518 2.278 3.15-.987.806 1.357-1.58 3.743 1.8 11.28 4.783 16.47 7.42 11.823 11.188 7.972 15.7 5.2zm42.378 15.122c.46 1.633.377 2.972-.377 3.726-1.8 1.8-6.698-.126-11.094-4.312-.293-.293-.628-.544-.92-.88-1.6-1.6-2.847-3.266-3.6-4.856-1.55-2.763-1.926-5.2-.754-6.364.628-.628 1.633-.795 2.9-.586.795-.502 1.758-1.1 2.805-1.675C42.755 3.157 37.94 1.9 32.833 1.9c-16.997 0-30.77 13.774-30.77 30.77s13.774 30.77 30.77 30.77 30.77-13.774 30.77-30.77c0-5.484-1.423-10.634-3.977-15.113a27.18 27.18 0 0 1-1.549 2.763z" />
+        </svg>
+      );
+    case 'github':
+      return (
+        <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98 96">
+          <path fillRule="evenodd" clipRule="evenodd" fill="currentColor" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" />
+        </svg>
+      );
+    case 'linux':
+      return (
+        <svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="24" height="24" viewBox="0 0 266 312">
+          <path fill="currentColor" d="M128.6640625 79.2793c0 1-1 1-1 1h-1c-1 0-1-1-2-2 0 0-1-1-1-2s0-1 1-1l2 1c1 1 2 2 2 3m-18-10c0-5-2-8-5-8 0 0 0 1-1 1v2h3c0 2 1 3 1 5h2m35-5c2 0 3 2 4 5h2c-1-1-1-2-1-3s0-2-1-3-2-2-3-2c0 0-1 1-2 1 0 1 1 1 1 2m-30 16c-1 0-1 0-1-1s0-2 1-3c2 0 3-1 3-1 1 0 1 1 1 1 0 1-1 2-3 4h-1m-11-1c-4-2-5-5-5-10 0-3 0-5 2-7 1-2 3-3 5-3s3 1 5 3c1 3 2 6 2 9v2h1v-1c1 0 1-2 1-6 0-3 0-6-2-9s-4-5-8-5c-3 0-6 2-7 5-2 4-2.4 7-2.4 12 0 4 1.4 8 5.4 12 1-1 2-1 3-2m125 141c1 0 1-.4 1-1.3 0-2.2-1-4.8-4-7.7-3-3-8-4.9-14-5.7-1-.1-2-.1-2-.1-1-.2-1-.2-2-.2-1-.1-3-.3-4-.5 3-9.3 4-17.5 4-24.7 0-10-2-17-6-23s-8-9-13-10c-1 1-1 1-1 2 5 2 10 6 13 12 3 7 4 13 4 20 0 5.6-1 13.9-5 24.5-4 1.6-8 5.3-11 11.1 0 .9 0 1.4 1 1.4 0 0 1-.9 2-2.6 2-1.7 3-3.4 5-5.1 3-1.7 5-2.6 8-2.6 5 0 10 .7 13 2.1 4 1.3 6 2.7 7 4.3 1 1.5 2 2.9 3 4.2 0 1.3 1 1.9 1 1.9m-92-145c-1-1-1-3-1-5 0-4 0-6 2-9 2-2 4-3 6-3 3 0 5 2 7 4 1 3 2 5 2 8 0 5-2 8-6 9 0 0 1 1 2 1 2 0 3 1 5 2 1-6 2-10 2-15 0-6-1-10-3-13-3-3-6-4-10-4-3 0-6 1-9 3-2 3-3 5-3 8 0 5 1 9 3 13 1 0 2 1 3 1m12 16c-13 9-23 13-31 13-7 0-14-3-20-8 1 2 2 4 3 5l6 6c4 4 9 6 14 6 7 0 15-4 25-11l9-6c2-2 4-4 4-7 0-1 0-2-1-2-1-2-6-5-16-8-9-4-16-6-20-6-3 0-8 2-15 6-6 4-10 8-10 12 0 0 1 1 2 3 6 5 12 8 18 8 8 0 18-4 31-14v2c1 0 1 1 1 1m23 202c4 7.52 11 11.3 19 11.3 2 0 4-.3 6-.9 2-.4 4-1.1 5-1.9 1-.7 2-1.4 3-2.2 2-.7 2-1.2 3-1.7l17-14.7c4-3.19 8-5.98 13-8.4 4-2.4 8-4 10-4.9 3-.8 5-2 7-3.6 1-1.5 2-3.4 2-5.8 0-2.9-2-5.1-4-6.7s-4-2.7-6-3.4-4-2.3-7-5c-2-2.6-4-6.2-5-10.9l-1-5.8c-1-2.7-1-4.7-2-5.8 0-.3 0-.4-1-.4s-3 .9-4 2.6c-2 1.7-4 3.6-6 5.6-1 2-4 3.8-6 5.5-3 1.7-6 2.6-8 2.6-8 0-12-2.2-15-6.5-2-3.2-3-6.9-4-11.1-2-1.7-3-2.6-5-2.6-5 0-7 5.2-7 15.7v31.1c0 .9-1 2.9-1 6-1 3.1-1 6.62-1 10.6l-2 11.1v.17m-145-5.29c9.3 1.36 20 4.27 32.1 8.71 12.1 4.4 19.5 6.7 22.2 6.7 7 0 12.8-3.1 17.6-9.09 1-1.94 1-4.22 1-6.84 0-9.45-5.7-21.4-17.1-35.9l-6.8-9.1c-1.4-1.9-3.1-4.8-5.3-8.7-2.1-3.9-4-6.9-5.5-9-1.3-2.3-3.4-4.6-6.1-6.9-2.6-2.3-5.6-3.8-8.9-4.6-4.2.8-7.1 2.2-8.5 4.1s-2.2 4-2.4 6.2c-.3 2.1-.9 3.5-1.9 4.2-1 .6-2.7 1.1-5 1.6-.5 0-1.4 0-2.7.1h-2.7c-5.3 0-8.9.6-10.8 1.6-2.5 2.9-3.8 6.2-3.8 9.7 0 1.6.4 4.3 1.2 8.1.8 3.7 1.2 6.7 1.2 8.8 0 4.1-1.2 8.2-3.7 12.3-2.5 4.3-3.8 7.5-3.8 9.78 1 3.88 7.6 6.61 19.7 8.21m33.3-90.9c0-6.9 1.8-14.5 5.5-23.5 3.6-9 7.2-15 10.7-19-.2-1-.7-1-1.5-1l-1-1c-2.9 3-6.4 10-10.6 20-4.2 9-6.4 17.3-6.4 23.4 0 4.5 1.1 8.4 3.1 11.8 2.2 3.3 7.5 8.1 15.9 14.2l10.6 6.9c11.3 9.8 17.3 16.6 17.3 20.6 0 2.1-1 4.2-4 6.5-2 2.4-4.7 3.6-7 3.6-.2 0-.3.2-.3.7 0 .1 1 2.1 3.1 6 4.2 5.7 13.2 8.5 25.2 8.5 22 0 39-9 52-27 0-5 0-8.1-1-9.4v-3.7c0-6.5 1-11.4 3-14.6s4-4.7 7-4.7c2 0 4 .7 6 2.2 1-7.7 1-14.4 1-20.4 0-9.1 0-16.6-2-23.6-1-6-3-11-5-15l-6-9c-2-3-3-6-5-9-1-4-2-7-2-12-3-5-5-10-8-15-2-5-4-10-6-14l-9 7c-10 7-18 10-25 10-6 0-11-1-14-5l-6-5c0 3-1 7-3 11l-6.3 12c-2.8 7-4.3 11-4.6 14-.4 2-.7 4-.9 4l-7.5 15c-8.1 15-12.2 28.9-12.2 40.4 0 2.3.2 4.7.6 7.1-4.5-3.1-6.7-7.4-6.7-13m71.6 94.6c-13 0-23 1.76-30 5.25v-.3c-5 6-10.6 9.1-18.4 9.1-4.9 0-12.6-1.9-23-5.7-10.5-3.6-19.8-6.36-27.9-8.18-.8-.23-2.6-.57-5.5-1.03-2.8-.45-5.4-.91-7.7-1.37-2.1-.45-4.5-1.13-7.1-2.05-2.5-.79-4.5-1.82-6-3.07-1.38-1.26-2.06-2.68-2.06-4.27 0-1.6.34-3.31 1.02-5.13.64-1.1 1.34-2.2 2.04-3.2.7-1.1 1.3-2.1 1.7-3.1.6-.9 1-1.8 1.4-2.8.4-.9.8-1.8 1-2.9.2-1 .4-2 .4-3s-.4-4-1.2-9.3c-.8-5.2-1.2-8.5-1.2-9.9 0-4.4 1-7.9 3.2-10.4s4.3-3.8 6.5-3.8h11.5c.9 0 2.3-.5 4.4-1.7.7-1.6 1.3-2.9 1.7-4.1.5-1.2.7-2.1.9-2.5.2-.6.4-1.2.6-1.7.4-.7.9-1.5 1.6-2.3-.8-1-1.2-2.3-1.2-3.9 0-1.1 0-2.1.2-2.7 0-3.6 1.7-8.7 5.3-15.4l3.5-6.3c2.9-5.4 5.1-9.4 6.7-13.4 1.7-4 3.5-10 5.5-18 1.6-7 5.4-14 11.4-21l7.5-9c5.2-6 8.6-11 10.5-15s2.9-9 2.9-13c0-2-.5-8-1.6-18-1-10-1.5-20-1.5-29 0-7 .6-12 1.9-17s3.6-10 7-14c3-4 7-8 13-10s13-3 21-3c3 0 6 0 9 1 3 0 7 1 12 3 4 2 8 4 11 7 4 3 7 8 10 13 2 6 4 12 5 20 1 5 1 10 2 17 0 6 1 10 1 13 1 3 1 7 2 12 1 4 2 8 4 11 2 4 4 8 7 12 3 5 7 10 11 16 9 10 16 21 20 32 5 10 8 23 8 36.9 0 6.9-1 13.6-3 20.1 2 0 3 .8 4 2.2s2 4.4 3 9.1l1 7.4c1 2.2 2 4.3 5 6.1 2 1.8 4 3.3 7 4.5 2 1 5 2.4 7 4.2 2 2 3 4.1 3 6.3 0 3.4-1 5.9-3 7.7-2 2-4 3.4-7 4.3-2 1-6 3-12 5.82-5 2.96-10 6.55-15 10.8l-10 8.51c-4 3.9-8 6.7-11 8.4-3 1.8-7 2.7-11 2.7l-7-.8c-8-2.1-13-6.1-16-12.2-16-1.94-29-2.9-37-2.9" />
+        </svg>
+      );
+    case 'windows':
+      return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" shapeRendering="geometricPrecision" textRendering="geometricPrecision" imageRendering="optimizeQuality" fillRule="evenodd" clipRule="evenodd" viewBox="0 0 640 640">
+          <path fill="currentColor" d="M.2 298.669L0 90.615l256.007-34.76v242.814H.201zM298.658 49.654L639.905-.012v298.681H298.657V49.654zM640 341.331l-.071 298.681L298.669 592V341.332h341.33zM255.983 586.543L.189 551.463v-210.18h255.794v245.26z" />
+        </svg>
+      );
+    default:
+      return null;
+  }
+};
+
+type Props = {
+  name: IconName;
+}
+
+const BrandIcon = ({ name }: Props) => {
+  const IconSvg = _imageSrc(name);
+
+  if (!IconSvg) {
+    return null;
+  }
+
+  return (
+    <Container>
+      {IconSvg}
+    </Container>
+  );
+};
+
+export default BrandIcon;
diff --git a/graylog2-web-interface/src/components/common/DataTable/DataTable.test.tsx b/graylog2-web-interface/src/components/common/DataTable/DataTable.test.tsx
@@ -49,7 +49,7 @@ describe('<DataTable />', () => {
     const wrapper = mount(<DataTable id="myDataTable" headers={['One']} rows={[]} dataRowFormatter={rowFormatter} />);
 
     expect(wrapper.find('table')).toHaveLength(0);
-    expect(wrapper.text()).toBe('No data available.');
+    expect(wrapper.text()).toContain('No data available.');
   });
 
   it('should render with rows', () => {

diff --git a/graylog2-web-interface/src/components/common/EnterprisePluginNotFound.tsx b/graylog2-web-interface/src/components/common/EnterprisePluginNotFound.tsx
@@ -43,7 +43,7 @@ const EnterprisePluginNotFound = ({ featureName, wrapperClassName }: Props) => (
   <Panel bsStyle="info" className={wrapperClassName}>
     <Panel.Heading>
       <Header>
-        <HeaderIcon name="crown" />Enterprise Feature
+        <HeaderIcon name="enterprise" />Enterprise Feature
       </Header>
     </Panel.Heading>
     <Panel.Body>

diff --git a/graylog2-web-interface/src/components/common/EntityDataTable/ExpandedSections.tsx b/graylog2-web-interface/src/components/common/EntityDataTable/ExpandedSections.tsx
@@ -78,7 +78,7 @@ const ExpandedSections = <Entity extends EntityBase>({
                 <h3>{section.title}</h3>
                 <Actions>
                   {actions}
-                  <HideSectionButton name="times" onClick={hideSection} title="Hide section" />
+                  <HideSectionButton name="close" onClick={hideSection} title="Hide section" />
                 </Actions>
               </Header>
               {section.content(entity)}

diff --git a/graylog2-web-interface/src/components/common/EntityFilters/ActiveFilter.tsx b/graylog2-web-interface/src/components/common/EntityFilters/ActiveFilter.tsx
@@ -114,7 +114,7 @@ const ActiveFilter = ({
                              filterValueRenderer={filterValueRenderer} />
       )}
       <CenteredButton bsSize="xsmall" onClick={() => onDeleteFilter(attribute.id, value)} title="Delete filter">
-        <Icon name="times" />
+        <Icon name="close" />
       </CenteredButton>
     </Container>
   );

diff --git a/graylog2-web-interface/src/components/common/EntityFilters/CreateFilterDropdown.tsx b/graylog2-web-interface/src/components/common/EntityFilters/CreateFilterDropdown.tsx
@@ -74,7 +74,7 @@ const CreateFilterDropdown = ({ filterableAttributes, filterValueRenderers, onCr
 
   return (
     <Container>
-      <OverlayDropdownButton title={<Icon name="plus" />}
+      <OverlayDropdownButton title={<Icon name="add" />}
                              bsSize="small"
                              buttonTitle="Create Filter"
                              onToggle={onToggleDropdown}

diff --git a/graylog2-web-interface/src/components/common/Error.tsx b/graylog2-web-interface/src/components/common/Error.tsx
@@ -36,7 +36,7 @@ type Props = {
 }
 const Error = ({ error, title }: Props) => (
   <Center>
-    <ErrorIcon name="exclamation-triangle" size="3x" />
+    <ErrorIcon name="warning" size="3x" />
     <Description>
       <strong>{title}</strong>
       <span>{error}</span>

diff --git a/graylog2-web-interface/src/components/common/ErrorAlert.tsx b/graylog2-web-interface/src/components/common/ErrorAlert.tsx
@@ -56,7 +56,7 @@ const ErrorAlert = ({ children, onClose, bsStyle = 'warning', marginTopBottom =
           </Col>
           <Col md={1}>
             <Button bsSize="xsmall" bsStyle={finalBsStyle} className="pull-right" onClick={() => onClose(undefined)}>
-              <Icon name="times" />
+              <Icon name="close" />
             </Button>
           </Col>
         </StyledRow>

diff --git a/graylog2-web-interface/src/components/common/ExpandableList.test.tsx b/graylog2-web-interface/src/components/common/ExpandableList.test.tsx
@@ -15,51 +15,55 @@
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
 import React from 'react';
-import { mount } from 'wrappedEnzyme';
+import { render, screen } from 'wrappedTestingLibrary';
 import 'helpers/mocking/react-dom_mock';
+import userEvent from '@testing-library/user-event';
 
 import ExpandableList from 'components/common/ExpandableList';
 import ExpandableListItem from 'components/common/ExpandableListItem';
 
 describe('<ExpandableList />', () => {
-  it('should render with no children', () => {
-    const wrapper = mount(<ExpandableList />);
+  it('should render with no children', async () => {
+    render(<ExpandableList />);
 
-    expect(wrapper).toExist();
+    await screen.findByRole('list');
   });
 
-  it('should render with a Item', () => {
-    const checkFn = jest.fn();
-
-    const wrapper = mount(
+  it('should render with a Item', async () => {
+    render(
       <ExpandableList>
-        <ExpandableListItem header="Wheel of time" onChange={checkFn}>
+        <ExpandableListItem header="Wheel of time" onChange={() => {}}>
           <span>Edmonds Field</span>
         </ExpandableListItem>
       </ExpandableList>,
     );
 
-    expect(wrapper).toExist();
-  });
+    await screen.findByRole('list');
+    await screen.findByRole('button', { name: /wheel of time/i });
 
-  it('should render with a nested ExpandableList', () => {
-    const checkFn = jest.fn();
+    expect(screen.queryByText('Edmonds Field')).not.toBeInTheDocument();
+  });
 
-    const wrapper = mount(
+  it('should render with a nested ExpandableList', async () => {
+    render(
       <ExpandableList>
-        <ExpandableListItem expandable expanded header="Wheel of time" onChange={checkFn}>
+        <ExpandableListItem expandable expanded header="Wheel of time" onChange={() => {}}>
           <ExpandableList>
-            <ExpandableListItem expandable expanded={false} header="Edmonds Field" onChange={checkFn} />
+            <ExpandableListItem expandable expanded={false} header="Edmonds Field" onChange={() => {}} />
           </ExpandableList>
         </ExpandableListItem>
       </ExpandableList>,
     );
 
-    expect(wrapper).toExist();
+    await screen.findByRole('button', { name: /wheel of time/i });
+
+    expect(await screen.findAllByRole('list')).toHaveLength(2);
+
+    await screen.findByRole('button', { name: /edmonds field/i });
   });
 
-  it('should expand a expandable list item', () => {
-    const wrapper = mount(
+  it('should expand a expandable list item', async () => {
+    render(
       <ExpandableList>
         <ExpandableListItem expandable header="Wheel of time" readOnly>
           <ExpandableList>
@@ -69,16 +73,15 @@ describe('<ExpandableList />', () => {
       </ExpandableList>,
     );
 
-    expect(wrapper.find('span.header').length).toBe(1);
+    await userEvent.click(await screen.findByRole('button', { name: /expand list item/i }));
 
-    wrapper.find('div.fa-stack').simulate('click');
-
-    expect(wrapper.find('span.header').length).toBe(2);
+    await screen.findByRole('button', { name: /edmonds field/i });
   });
 
-  it('should select a selectable list item', () => {
+  it('should select a selectable list item', async () => {
     const checkFn = jest.fn();
-    const wrapper = mount(
+
+    render(
       <ExpandableList>
         <ExpandableListItem expanded header="Wheel of time" readOnly>
           <ExpandableList>
@@ -88,8 +91,8 @@ describe('<ExpandableList />', () => {
       </ExpandableList>,
     );
 
-    wrapper.find('input[type="checkbox"]').at(1).simulate('change', { target: { checked: true } });
+    await userEvent.click((await screen.findAllByRole('checkbox', { name: /select item/i }))[1]);
 
-    expect(checkFn.mock.calls.length).toBe(1);
+    expect(checkFn).toHaveBeenCalledTimes(1);
   });
 });