Fix: prevent queryDisplyText in QueryRowHeader from overflowing (#40094)

* Revert "Fix Query Editor Row horizontal overflow (#39419)"

This reverts commit 42b1fa0f62.

* fix: prevent queryDisplyText in QueryRowHeader from overflowing

public/app/core/components/QueryOperationRow/QueryOperationRow.tsx

@@ -75,21 +75,26 @@ export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({
 
   const rowHeader = (
     <div className={styles.header}>
-      <Icon
+      <div className={styles.column}>
-        name={isContentVisible ? 'angle-down' : 'angle-right'}
+        <Icon
-        className={styles.collapseIcon}
+          name={isContentVisible ? 'angle-down' : 'angle-right'}
-        onClick={onRowToggle}
+          className={styles.collapseIcon}
-      />
+          onClick={onRowToggle}
-      {title && (
+        />
-        <div className={styles.titleWrapper} onClick={onRowToggle} aria-label="Query operation row title">
+        {title && (
-          <div className={cx(styles.title, disabled && styles.disabled)}>{titleElement}</div>
+          <div className={styles.titleWrapper} onClick={onRowToggle} aria-label="Query operation row title">
-        </div>
+            <div className={cx(styles.title, disabled && styles.disabled)}>{titleElement}</div>
-      )}
+          </div>
-      {headerElementRendered}
+        )}
-      {actions && <div>{actionsElement}</div>}
+        {headerElementRendered}
-      {draggable && (
+      </div>
-        <Icon title="Drag and drop to reorder" name="draggabledots" size="lg" className={styles.dragIcon} />
+
-      )}
+      <div className={styles.column}>
+        {actionsElement}
+        {draggable && (
+          <Icon title="Drag and drop to reorder" name="draggabledots" size="lg" className={styles.dragIcon} />
+        )}
+      </div>
     </div>
   );
 
@@ -124,11 +129,13 @@ const getQueryOperationRowStyles = stylesFactory((theme: GrafanaTheme) => {
       margin-bottom: ${theme.spacing.md};
     `,
     header: css`
+      label: Header;
       padding: ${theme.spacing.xs} ${theme.spacing.sm};
       border-radius: ${theme.border.radius.sm};
       background: ${theme.colors.bg2};
       min-height: ${theme.spacing.formInputHeight}px;
-      display: flex;
+      display: grid;
+      grid-template-columns: minmax(100px, max-content) min-content;
       align-items: center;
       justify-content: space-between;
       white-space: nowrap;
@@ -137,6 +144,11 @@ const getQueryOperationRowStyles = stylesFactory((theme: GrafanaTheme) => {
         outline: none;
       }
     `,
+    column: css`
+      label: Column;
+      display: flex;
+      align-items: center;
+    `,
     dragIcon: css`
       cursor: grab;
       color: ${theme.colors.textWeak};
@@ -164,6 +176,7 @@ const getQueryOperationRowStyles = stylesFactory((theme: GrafanaTheme) => {
       color: ${theme.colors.textBlue};
       margin-left: ${theme.spacing.sm};
       overflow: hidden;
+      text-overflow: ellipsis;
     `,
     content: css`
       margin-top: ${theme.spacing.inlineFormMargin};

public/app/features/query/components/QueryEditorRowHeader.tsx

@@ -80,46 +80,49 @@ export const QueryEditorRowHeader = <TQuery extends DataQuery>(props: Props<TQue
   };
 
   return (
-    <div className={styles.wrapper}>
+    <>
-      {!isEditing && (
+      <div className={styles.wrapper}>
-        <button
+        {!isEditing && (
-          className={styles.queryNameWrapper}
+          <button
-          aria-label={selectors.components.QueryEditorRow.title(query.refId)}
+            className={styles.queryNameWrapper}
-          title="Edit query name"
+            aria-label={selectors.components.QueryEditorRow.title(query.refId)}
-          onClick={onEditQuery}
+            title="Edit query name"
-          data-testid="query-name-div"
+            onClick={onEditQuery}
-        >
+            data-testid="query-name-div"
-          <span className={styles.queryName}>{query.refId}</span>
+          >
-          <Icon name="pen" className={styles.queryEditIcon} size="sm" />
+            <span className={styles.queryName}>{query.refId}</span>
-        </button>
+            <Icon name="pen" className={styles.queryEditIcon} size="sm" />
-      )}
+          </button>
-      {isEditing && (
+        )}
-        <>
+
-          <Input
+        {isEditing && (
-            type="text"
+          <>
-            defaultValue={query.refId}
+            <Input
-            onBlur={onEditQueryBlur}
+              type="text"
-            autoFocus
+              defaultValue={query.refId}
-            onKeyDown={onKeyDown}
+              onBlur={onEditQueryBlur}
-            onFocus={onFocus}
+              autoFocus
-            invalid={validationError !== null}
+              onKeyDown={onKeyDown}
-            onChange={onInputChange}
+              onFocus={onFocus}
-            className={styles.queryNameInput}
+              invalid={validationError !== null}
-            data-testid="query-name-input"
+              onChange={onInputChange}
-          />
+              className={styles.queryNameInput}
-          {validationError && <FieldValidationMessage horizontal>{validationError}</FieldValidationMessage>}
+              data-testid="query-name-input"
-        </>
+            />
-      )}
+            {validationError && <FieldValidationMessage horizontal>{validationError}</FieldValidationMessage>}
-      {renderDataSource(props, styles)}
+          </>
-      {renderExtras && <div className={styles.itemWrapper}>{renderExtras()}</div>}
+        )}
-      {disabled && <em className={styles.contextInfo}>Disabled</em>}
+        {renderDataSource(props, styles)}
+        {renderExtras && <div className={styles.itemWrapper}>{renderExtras()}</div>}
+        {disabled && <em className={styles.contextInfo}>Disabled</em>}
+      </div>
 
       {collapsedText && (
         <div className={styles.collapsedText} onClick={onClick}>
           {collapsedText}
         </div>
       )}
-    </div>
+    </>
   );
 };
 
@@ -143,44 +146,37 @@ const renderDataSource = <TQuery extends DataQuery>(
 const getStyles = (theme: GrafanaTheme) => {
   return {
     wrapper: css`
+      label: Wrapper;
       display: flex;
       align-items: center;
-      flex-grow: 1;
       margin-left: ${theme.spacing.xs};
-      overflow: hidden;
+    `,
+    queryNameWrapper: css`
+      display: flex;
+      cursor: pointer;
+      border: 1px solid transparent;
+      border-radius: ${theme.border.radius.md};
+      align-items: center;
+      padding: 0 0 0 ${theme.spacing.xs};
+      margin: 0;
+      background: transparent;
 
       &:hover {
-        .query-name-wrapper {
+        background: ${theme.colors.bg3};
-          background: ${theme.colors.bg3};
+        border: 1px dashed ${theme.colors.border3};
-          border: 1px dashed ${theme.colors.border3};
+      }
-        }
 
+      &:focus {
+        border: 2px solid ${theme.colors.formInputBorderActive};
+      }
+
+      &:hover,
+      &:focus {
         .query-name-edit-icon {
           visibility: visible;
         }
       }
     `,
-    queryNameWrapper: cx(
-      css`
-        display: flex;
-        cursor: pointer;
-        border: 1px solid transparent;
-        border-radius: ${theme.border.radius.md};
-        align-items: center;
-        padding: 0 0 0 ${theme.spacing.xs};
-        margin: 0;
-        background: transparent;
-
-        &:focus {
-          border: 2px solid ${theme.colors.formInputBorderActive};
-
-          .query-name-edit-icon {
-            visibility: visible;
-          }
-        }
-      `,
-      'query-name-wrapper'
-    ),
     queryName: css`
       font-weight: ${theme.typography.weight.semibold};
       color: ${theme.colors.textBlue};
@@ -207,10 +203,8 @@ const getStyles = (theme: GrafanaTheme) => {
       align-items: center;
       overflow: hidden;
       font-style: italic;
-      overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      min-width: 0;
     `,
     contextInfo: css`
       font-size: ${theme.typography.size.sm};

public/sass/pages/_explore.scss

@@ -141,7 +141,6 @@
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
-  width: 100%;
 }
 
 .explore.explore-live {