Merge branch 'master' into refactor/graylog-ca-cluster-config-service

Graylog2 · Jul 2, 2024 · cac4bf7 · cac4bf7
2 parents b9e947c + 3f4f6a4
commit cac4bf7
Show file tree

Hide file tree

Showing 21 changed files with 110 additions and 53 deletions.
diff --git a/changelog/unreleased/issue-7396.toml b/changelog/unreleased/issue-7396.toml
@@ -0,0 +1,5 @@
+type="c"
+message="Always display input for widget title in widget edit mode."
+
+issues=["7396"]
+pulls=["19737"]
diff --git a/graylog2-web-interface/package.json b/graylog2-web-interface/package.json
@@ -43,7 +43,7 @@
     ]
   },
   "dependencies": {
-    "@graylog/sawmill": "^2.0.19",
+    "@graylog/sawmill": "^2.0.21",
     "@mantine/core": "^7.5.2",
     "@mantine/dropzone": "^7.5.2",
     "@mantine/hooks": "^7.5.2",

diff --git a/...2-web-interface/src/components/authentication/directoryServices/BackendWizard/Sidebar.tsx b/...2-web-interface/src/components/authentication/directoryServices/BackendWizard/Sidebar.tsx
@@ -38,7 +38,7 @@ const StyledPanelGroup = styled(PanelGroup)`
     background-color: ${(props) => props.theme.colors.global.contentBackground};
 
     .panel-heading {
-      background-color: ${(props) => props.theme.colors.table.row.backgroundAlt};
+      background-color: ${(props) => props.theme.colors.table.row.backgroundStriped};
     }
 
     &:not(:first-child) {

diff --git a/...src/components/bootstrap/ListGroupItem.md → ...ace/src/components/bootstrap/ListGroup.md b/...src/components/bootstrap/ListGroupItem.md → ...ace/src/components/bootstrap/ListGroup.md
@@ -1,6 +1,6 @@
 ### Normal List
 ```js
-import { ListGroup } from 'components/bootstrap';
+import { ListGroup, ListGroupItem } from 'components/bootstrap';
 
 <ListGroup>
   <ListGroupItem>Item 1</ListGroupItem>
@@ -11,7 +11,7 @@ import { ListGroup } from 'components/bootstrap';
 
 ### Linked Items
 ```js
-import { ListGroup } from 'components/bootstrap';
+import { ListGroup, ListGroupItem } from 'components/bootstrap';
 
 <ListGroup>
   <ListGroupItem href="#">Link 1</ListGroupItem>
@@ -22,7 +22,7 @@ import { ListGroup } from 'components/bootstrap';
 
 ### Stateful Items
 ```js
-import { ListGroup } from 'components/bootstrap';
+import { ListGroup, ListGroupItem } from 'components/bootstrap';
 
 <ListGroup>
   <ListGroupItem href="#" active>Link 1</ListGroupItem>
@@ -33,7 +33,7 @@ import { ListGroup } from 'components/bootstrap';
 
 ### Variant Items
 ```js
-import { ListGroup } from 'components/bootstrap';
+import { ListGroup, ListGroupItem } from 'components/bootstrap';
 const styles = ['Danger', 'Warning', 'Success', 'Info'];
 
 <ListGroup componentClass="ol">
@@ -45,7 +45,7 @@ const styles = ['Danger', 'Warning', 'Success', 'Info'];
 
 ### w/ Headers
 ```js
-import { ListGroup } from 'components/bootstrap';
+import { ListGroup, ListGroupItem } from 'components/bootstrap';
 
 <ListGroup>
   <ListGroupItem header="Heading 1">Some body text</ListGroupItem>

diff --git a/...ce/src/components/bootstrap/ListGroup.jsx → ...ce/src/components/bootstrap/ListGroup.tsx b/...ce/src/components/bootstrap/ListGroup.jsx → ...ce/src/components/bootstrap/ListGroup.tsx
@@ -15,18 +15,19 @@
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
 import React from 'react';
-import PropTypes from 'prop-types';
 // eslint-disable-next-line no-restricted-imports
 import { ListGroup as BootstrapListGroup } from 'react-bootstrap';
 
-const ListGroup = ({ className, ...props }) => <BootstrapListGroup bsClass={className} {...props} />;
+type Props = React.PropsWithChildren<{
+  className?: string,
+  componentClass?: React.ElementType | undefined
+}>
 
-ListGroup.propTypes = {
-  className: PropTypes.string,
-};
+const ListGroup = ({ className, children, ...props }: Props) => <BootstrapListGroup bsClass={className} {...props}>{children}</BootstrapListGroup>;
 
 ListGroup.defaultProps = {
   className: undefined,
+  componentClass: undefined,
 };
 
 /** @component */

diff --git a/...rc/components/bootstrap/ListGroupItem.jsx → ...rc/components/bootstrap/ListGroupItem.tsx b/...rc/components/bootstrap/ListGroupItem.jsx → ...rc/components/bootstrap/ListGroupItem.tsx
@@ -14,30 +14,20 @@
  * along with this program. If not, see
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
-import React, { forwardRef } from 'react';
+import * as React from 'react';
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import PropTypes from 'prop-types';
 // eslint-disable-next-line no-restricted-imports
 import { ListGroupItem as BootstrapListGroupItem } from 'react-bootstrap';
 
-const RefContainer = styled.span(({ theme }) => `
+const RefContainer = styled.span(({ theme }) => css`
   display: block;
-  border: 1px solid ${theme.colors.variant.lighter.default};
-  margin-bottom: -1px;
-
-  &:first-child {
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-  }
-
-  &:last-child {
-    margin-bottom: 0;
-    border-bottom-right-radius: 4px;
-    border-bottom-left-radius: 4px;
+  &:not(:last-child) {
+    border-bottom: 1px solid ${theme.colors.table.row.divider};
   }
 `);
 
-const variantStyles = css(({ bsStyle, theme }) => {
+const variantStyles = css<{ bsStyle: string }>(({ bsStyle, theme }) => {
   if (!bsStyle) {
     return undefined;
   }
@@ -151,18 +141,32 @@ const StyledListGroupItem = styled(BootstrapListGroupItem)(({ theme }) => css`
   ${variantStyles}
 `);
 
-const ListGroupItem = forwardRef(({ containerProps, ...rest }, ref) => (
+type Props = React.PropsWithChildren<{
+  active?: boolean
+  bsStyle?: string,
+  className?: string,
+  containerProps?: object,
+  disabled?: boolean,
+  header?: React.ReactNode,
+  href?: string,
+  onClick?:() => void
+}>
+
+const ListGroupItem = forwardRef<HTMLElement, Props>(({ containerProps, ...rest }, ref) => (
   <RefContainer ref={ref} {...containerProps}>
     <StyledListGroupItem {...rest} />
   </RefContainer>
 ));
 
-ListGroupItem.propTypes = {
-  containerProps: PropTypes.object,
-};
-
 ListGroupItem.defaultProps = {
+  active: undefined,
+  bsStyle: undefined,
+  className: undefined,
   containerProps: {},
+  disabled: undefined,
+  header: undefined,
+  href: undefined,
+  onClick: undefined,
 };
 
 export default ListGroupItem;
diff --git a/graylog2-web-interface/src/components/bootstrap/Table.jsx b/graylog2-web-interface/src/components/bootstrap/Table.jsx
@@ -84,14 +84,14 @@ const tableCss = css(({ theme }) => css`
     > tfoot > tr {
       > th,
       > td {
-        border-top-color: ${theme.colors.table.row.backgroundAlt};
+        border-top-color: ${theme.colors.table.row.backgroundStriped};
       }
     }
 
     > thead > tr > th {
       background: ${theme.colors.table.head.background};
       white-space: nowrap;
-      border-bottom-color: ${theme.colors.table.row.border};
+      border-bottom-color: ${theme.colors.table.row.divider};
     }
 
     > tbody > tr {
@@ -100,7 +100,7 @@ const tableCss = css(({ theme }) => css`
     }
 
     > tbody + tbody {
-      border-top-color: ${theme.colors.table.row.backgroundAlt};
+      border-top-color: ${theme.colors.table.row.backgroundStriped};
     }
 
     .table {
@@ -109,20 +109,20 @@ const tableCss = css(({ theme }) => css`
   }
 
   &.table-bordered {
-    border-color: ${theme.colors.table.row.backgroundAlt};
+    border-color: ${theme.colors.table.row.backgroundStriped};
 
     > thead > tr,
     > tfoot > tr,
     > tbody > tr {
       > td,
       > th {
-        border-color: ${theme.colors.table.row.backgroundAlt};
+        border-color: ${theme.colors.table.row.backgroundStriped};
       }
     }
   }
 
   &.table-striped > tbody > tr:nth-of-type(odd) {
-    background-color: ${theme.colors.table.row.backgroundAlt};
+    background-color: ${theme.colors.table.row.backgroundStriped};
   }
 
   &.table-hover > tbody > tr:hover {

diff --git a/graylog2-web-interface/src/components/common/EntityDataTable/EntityDataTable.tsx b/graylog2-web-interface/src/components/common/EntityDataTable/EntityDataTable.tsx
@@ -54,7 +54,7 @@ const StyledTable = styled(Table)(({ theme }) => css`
 
   && {
     > tbody:nth-of-type(even) > tr {
-      background-color: ${theme.colors.table.row.backgroundAlt};
+      background-color: ${theme.colors.table.row.backgroundStriped};
     }
 
     > tbody:nth-of-type(odd) > tr {

diff --git a/graylog2-web-interface/src/components/common/PaginatedItemOverview/PaginatedItem.tsx b/graylog2-web-interface/src/components/common/PaginatedItemOverview/PaginatedItem.tsx
@@ -33,7 +33,7 @@ const Container = styled.span(({ theme }) => css`
   background-color: ${theme.colors.table.row.background};
 
   &:nth-of-type(even) {
-    background-color: ${theme.colors.table.row.backgroundAlt};
+    background-color: ${theme.colors.table.row.backgroundStriped};
   }
 `);
 

diff --git a/graylog2-web-interface/src/components/common/SortableList/ListItem.tsx b/graylog2-web-interface/src/components/common/SortableList/ListItem.tsx
@@ -36,7 +36,7 @@ type Props<ItemType extends ListItemType> = {
   item: ItemType,
 };
 
-const StyledListGroupItem = styled(ListGroupItem)(({ $alignItemContent }: { $alignItemContent: 'flex-start' | 'center' }) => css`
+const StyledListGroupItem = styled(ListGroupItem)<{ $alignItemContent: 'flex-start' | 'center' }>(({ $alignItemContent }) => css`
   display: flex;
   align-items: ${$alignItemContent};
 `);

diff --git a/graylog2-web-interface/src/components/datanode/migrations/InPlaceMigration.tsx b/graylog2-web-interface/src/components/datanode/migrations/InPlaceMigration.tsx
@@ -48,7 +48,7 @@ const StyledPanelGroup = styled(PanelGroup)`
     background-color: ${(props) => props.theme.colors.global.contentBackground};
 
     .panel-heading {
-      background-color: ${(props) => props.theme.colors.table.row.backgroundAlt};
+      background-color: ${(props) => props.theme.colors.table.row.backgroundStriped};
     }
 
     &:not(:first-child) {

diff --git a/graylog2-web-interface/src/components/datanode/migrations/RemoteReindexingMigration.tsx b/graylog2-web-interface/src/components/datanode/migrations/RemoteReindexingMigration.tsx
@@ -47,7 +47,7 @@ const StyledPanelGroup = styled(PanelGroup)`
     background-color: ${(props) => props.theme.colors.global.contentBackground};
 
     .panel-heading {
-      background-color: ${(props) => props.theme.colors.table.row.backgroundAlt};
+      background-color: ${(props) => props.theme.colors.table.row.backgroundStriped};
     }
 
     &:not(:first-child) {

diff --git a/graylog2-web-interface/src/components/permissions/GranteesList.tsx b/graylog2-web-interface/src/components/permissions/GranteesList.tsx
@@ -39,7 +39,7 @@ const Header = styled.div`
 
 const List = styled.div(({ theme }) => `
   >:nth-child(even) {
-    background: ${theme.colors.table.row.backgroundAlt};
+    background: ${theme.colors.table.row.backgroundStriped};
   };
 
   >:nth-child(odd) {

diff --git a/graylog2-web-interface/src/components/rules/rule-builder/RuleBuilder.tsx b/graylog2-web-interface/src/components/rules/rule-builder/RuleBuilder.tsx
@@ -53,7 +53,7 @@ const StyledPanel = styled(Panel)(({ theme }) => css`
 const StyledPanelHeading = styled(Panel.Heading)(({ theme }) => css`
   display: flex;
   justify-content: space-between;
-  background-color: ${theme.colors.table.row.backgroundAlt} !important;
+  background-color: ${theme.colors.table.row.backgroundStriped} !important;
   border: 0;
 `);
 

diff --git a/graylog2-web-interface/src/views/components/datatable/TableHeaderCell.tsx b/graylog2-web-interface/src/views/components/datatable/TableHeaderCell.tsx
@@ -20,7 +20,7 @@ const TableHeaderCell = styled.th<{ $isNumeric?: boolean, $borderedHeader?: bool
   && {
     background-color: ${theme.colors.table.head.background};
     min-width: 50px;
-    border: ${$borderedHeader ? `1px solid ${theme.colors.table.row.backgroundAlt}` : '0'};
+    border: ${$borderedHeader ? `1px solid ${theme.colors.table.row.backgroundStriped}` : '0'};
     padding: 0 5px;
     vertical-align: middle;
     white-space: nowrap;

diff --git a/graylog2-web-interface/src/views/components/searchbar/time-range-filter/TimeRangeDisplay.tsx b/graylog2-web-interface/src/views/components/searchbar/time-range-filter/TimeRangeDisplay.tsx
@@ -38,7 +38,7 @@ const TimeRangeWrapper = styled.div(({ theme }) => css`
   padding: 3px 13px;
   display: flex;
   justify-content: space-around;
-  background-color: ${theme.colors.table.row.backgroundAlt};
+  background-color: ${theme.colors.table.row.backgroundStriped};
   align-items: center;
 
   > span {

diff --git a/graylog2-web-interface/src/views/components/widgets/MessageTable.tsx b/graylog2-web-interface/src/views/components/widgets/MessageTable.tsx
@@ -45,7 +45,7 @@ const Table = styled.table(({ theme }) => css`
   word-break: break-all;
 
   > tbody > tr > td {
-    border-color: ${theme.colors.table.row.border};
+    border-color: ${theme.colors.table.row.divider};
   }
 
   @media print {

diff --git a/graylog2-web-interface/src/views/components/widgets/Widget.tsx b/graylog2-web-interface/src/views/components/widgets/Widget.tsx
@@ -259,6 +259,7 @@ const Widget = ({ id, editing, widget, title, position, onPositionsChange }: Pro
             <WidgetHeader title={title}
                           hideDragHandle={!interactive || isFocused}
                           loading={loading}
+                          editing={editing}
                           onRename={onRenameWidget}>
               {!editing ? (
                 <WidgetActionsMenu isFocused={isFocused}

diff --git a/graylog2-web-interface/src/views/components/widgets/WidgetHeader.tsx b/graylog2-web-interface/src/views/components/widgets/WidgetHeader.tsx
@@ -20,6 +20,7 @@ import styled, { css } from 'styled-components';
 
 import { Spinner, Icon } from 'components/common';
 import EditableTitle from 'views/components/common/EditableTitle';
+import { Input } from 'components/bootstrap';
 
 import CustomPropTypes from '../CustomPropTypes';
 
@@ -34,6 +35,11 @@ const Container = styled.div(({ theme }) => css`
   display: grid;
   grid-template-columns: minmax(35px, 1fr) max-content;
   align-items: center;
+
+  .widget-title {
+    width: 100%;
+    max-width: 400px;
+  }
 `);
 
 const Col = styled.div`
@@ -57,19 +63,48 @@ const WidgetActionDropdown = styled.span`
   position: relative;
 `;
 
+const TitleInputWrapper = styled.div`
+  max-width: 400px;
+  width: 100%;
+
+  .form-group {
+    margin-bottom: 5px;
+    width: 100%;
+  }
+`;
+
+const TitleInput = styled(Input)(({ theme }) => css`
+  font-size: ${theme.fonts.size.large};
+  width: 100%;
+`);
+
 type Props = {
   children: React.ReactNode,
   onRename: (newTitle: string) => unknown,
   hideDragHandle: boolean,
   title: string,
   loading: boolean,
+  editing: boolean,
 };
 
-const WidgetHeader = ({ children, onRename, hideDragHandle, title, loading }: Props) => (
+const WidgetHeader = ({ children, onRename, hideDragHandle, title, loading, editing }: Props) => (
   <Container>
     <Col>
       {hideDragHandle || <DragHandleContainer className="widget-drag-handle" title={`Drag handle for ${title}`}><WidgetDragHandle name="drag_indicator" /></DragHandleContainer>}
-      <EditableTitle key={title} disabled={!onRename} value={title} onChange={onRename} />
+      {editing ? (
+        <TitleInputWrapper>
+          <TitleInput type="text"
+                      id="widget-title"
+                      onChange={(e) => onRename(e.target.value)}
+                      value={title}
+                      required />
+        </TitleInputWrapper>
+      ) : (
+        <EditableTitle key={title}
+                       disabled={!onRename}
+                       value={title}
+                       onChange={onRename} />
+      )}
       {loading && <LoadingSpinner text="" delay={0} />}
     </Col>
     <WidgetActionDropdown>

diff --git a/graylog2-web-interface/src/views/components/widgets/events/EventsList/EventsTableRow.tsx b/graylog2-web-interface/src/views/components/widgets/events/EventsList/EventsTableRow.tsx
@@ -25,7 +25,7 @@ import useEventAttributes from 'views/components/widgets/events/hooks/useEventAt
 
 const Td = styled.td(({ theme }) => css`
   && {
-    border-color: ${theme.colors.table.row.border};
+    border-color: ${theme.colors.table.row.divider};
   }
 `);