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,6 +75,7 @@ export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({
 
   const rowHeader = (
     <div className={styles.header}>
+      <div className={styles.column}>
         <Icon
           name={isContentVisible ? 'angle-down' : 'angle-right'}
           className={styles.collapseIcon}
@@ -86,11 +87,15 @@ export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({
           </div>
         )}
         {headerElementRendered}
-      {actions && <div>{actionsElement}</div>}
+      </div>
+
+      <div className={styles.column}>
+        {actionsElement}
         {draggable && (
           <Icon title="Drag and drop to reorder" name="draggabledots" size="lg" className={styles.dragIcon} />
         )}
       </div>
+    </div>
   );
 
   if (draggable) {
@@ -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,6 +80,7 @@ export const QueryEditorRowHeader = <TQuery extends DataQuery>(props: Props<TQue
   };
 
   return (
+    <>
       <div className={styles.wrapper}>
         {!isEditing && (
           <button
@@ -93,6 +94,7 @@ export const QueryEditorRowHeader = <TQuery extends DataQuery>(props: Props<TQue
             <Icon name="pen" className={styles.queryEditIcon} size="sm" />
           </button>
         )}
+
         {isEditing && (
           <>
             <Input
@@ -113,13 +115,14 @@ export const QueryEditorRowHeader = <TQuery extends DataQuery>(props: Props<TQue
         {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,25 +146,12 @@ 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;
-
-      &:hover {
-        .query-name-wrapper {
-          background: ${theme.colors.bg3};
-          border: 1px dashed ${theme.colors.border3};
-        }
-
-        .query-name-edit-icon {
-          visibility: visible;
-        }
-      }
     `,
-    queryNameWrapper: cx(
+    queryNameWrapper: css`
-      css`
       display: flex;
       cursor: pointer;
       border: 1px solid transparent;
@@ -171,16 +161,22 @@ const getStyles = (theme: GrafanaTheme) => {
       margin: 0;
       background: transparent;
 
+      &:hover {
+        background: ${theme.colors.bg3};
+        border: 1px dashed ${theme.colors.border3};
+      }
+
       &:focus {
         border: 2px solid ${theme.colors.formInputBorderActive};
+      }
 
+      &:hover,
+      &:focus {
         .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 {