Fix direction radio button losing visual state during DnD reorder (7.0) (#25192) (#25228)

* Fix direction radio button losing visual state during DnD reorder (#25169)

* Rendering grouping configuration in portal while dragging.

* Adding changelog snippet.

(cherry picked from commit f91cb82471)

* Assigning stable ids to direction radio inputs.

---------

(cherry picked from commit ab9c77b63b)

Co-authored-by: Dennis Oelkers <dennis@graylog.com>

changelog/unreleased/issue-20261.toml

@@ -0,0 +1,5 @@
+type = "f"
+message = "Fix grouping direction radio button losing visual state during reorder."
+
+pulls = ["25169"]
+issues = ["20261"]

graylog2-web-interface/src/views/components/aggregationwizard/ElementConfigurationContainer.tsx

@@ -31,6 +31,16 @@ const Container = styled.div(
     background-color: ${theme.colors.variant.lightest.default};
     flex-direction: column;
     position: relative;
+
+    input {
+      font-size: ${theme.fonts.size.body};
+    }
+
+    .control-label {
+      padding-left: 0;
+      padding-right: 5px;
+      font-weight: normal;
+    }
   `,
 );
 

graylog2-web-interface/src/views/components/aggregationwizard/ElementConfigurationSection.tsx

@@ -19,47 +19,38 @@ import styled, { css } from 'styled-components';
 
 import IconButton from 'components/common/IconButton';
 
-const Wrapper = styled.div(
-  ({ theme }) => css`
-    border-radius: 6px;
-    margin-bottom: 6px;
+const Wrapper = styled.div`
+  border-radius: 6px;
+  margin-bottom: 6px;
 
-    &:last-child {
-      margin-bottom: 0;
-    }
+  &:last-child {
+    margin-bottom: 0;
+  }
 
-    div[class^='col-'] {
-      padding-right: 0;
-      padding-left: 0;
-    }
+  div[class^='col-'] {
+    padding-right: 0;
+    padding-left: 0;
+  }
 
-    input {
-      font-size: ${theme.fonts.size.body};
-    }
+  .form-group {
+    margin: 0 0 3px;
+  }
 
-    .form-group {
-      margin: 0 0 3px;
-    }
+  .control-label {
+    padding-top: 5px;
+    text-align: left;
+    hyphens: auto;
+  }
 
-    .control-label {
-      padding-left: 0;
-      padding-right: 5px;
-      padding-top: 5px;
-      font-weight: normal;
-      text-align: left;
-      hyphens: auto;
-    }
+  .help-block {
+    margin: 0;
+    hyphens: auto;
+  }
 
-    .help-block {
-      margin: 0;
-      hyphens: auto;
-    }
-
-    .checkbox {
-      min-height: auto;
-    }
-  `,
-);
+  .checkbox {
+    min-height: auto;
+  }
+`;
 
 const Header = styled.div<{ $isEmpty: boolean }>(
   ({ theme, $isEmpty }) => css`

graylog2-web-interface/src/views/components/aggregationwizard/grouping/GroupingConfiguration.tsx

@@ -80,7 +80,7 @@ const GroupingConfiguration = React.memo(({ index }: Props) => {
 
   return (
     <Wrapper data-testid={`grouping-${index}`}>
-      <Direction groupingIndex={index} />
+      <Direction groupingIndex={index} groupingId={groupBy.groupings[index].id} />
       <FieldComponent groupingIndex={index} />
       {fieldType === DateType && <Time index={index} />}
       {fieldType === ValuesType && (

graylog2-web-interface/src/views/components/aggregationwizard/grouping/configuration/Direction.tsx

@@ -30,9 +30,10 @@ const DirectionOptions = styled.div`
 
 type Props = {
   groupingIndex: number;
+  groupingId: string;
 };
 
-const Direction = ({ groupingIndex }: Props) => (
+const Direction = ({ groupingIndex, groupingId }: Props) => (
   <Field name={`groupBy.groupings.${groupingIndex}.direction`}>
     {({ field: { name, value, onChange, onBlur }, meta: { error } }) => (
       <Input
@@ -45,20 +46,22 @@ const Direction = ({ groupingIndex }: Props) => (
           <Input
             checked={value === 'row'}
             formGroupClassName=""
-            id={name}
+            id={`${name}-row`}
+            name={`direction-${groupingId}`}
             label="Row"
             onBlur={onBlur}
-            onChange={onChange}
+            onChange={() => onChange({ target: { name, value: 'row' } })}
             type="radio"
             value="row"
           />
           <Input
             checked={value === 'column'}
             formGroupClassName=""
-            id={name}
+            id={`${name}-column`}
+            name={`direction-${groupingId}`}
             label="Column"
             onBlur={onBlur}
-            onChange={onChange}
+            onChange={() => onChange({ target: { name, value: 'column' } })}
             type="radio"
             value="column"
           />