Transformations: Organise fields transformer fixes & detailing (#23812)

* Transformers: Organise fields transformer detailing

* Table header cell - fix text overflowing columns

packages/grafana-ui/src/components/Table/Table.tsx

@@ -181,7 +181,7 @@ function renderHeaderCell(column: any, tableStyles: TableStyles, field?: Field)
   return (
     <div className={tableStyles.headerCell} {...headerProps}>
       {column.canSort && (
-        <div {...column.getSortByToggleProps()}>
+        <div {...column.getSortByToggleProps()} className={tableStyles.headerCellLabel} title={column.render('Header')}>
           {column.render('Header')}
           {column.isSorted && (column.isSortedDesc ? <Icon name="angle-down" /> : <Icon name="angle-up" />)}
         </div>

packages/grafana-ui/src/components/Table/styles.ts

@@ -10,6 +10,7 @@ export interface TableStyles {
   table: string;
   thead: string;
   headerCell: string;
+  headerCellLabel: string;
   tableCell: string;
   tableCellWrapper: string;
   tableCellLink: string;
@@ -53,7 +54,6 @@ export const getTableStyles = stylesFactory(
       headerCell: css`
         padding: ${padding}px 10px;
         cursor: pointer;
-        white-space: nowrap;
         color: ${colors.textBlue};
         border-right: 1px solid ${theme.colors.panelBg};
 
@@ -61,6 +61,11 @@ export const getTableStyles = stylesFactory(
           border-right: none;
         }
       `,
+      headerCellLabel: css`
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      `,
       row: css`
         label: row;
         border-bottom: 1px solid ${borderColor};

packages/grafana-ui/src/components/TransformersUI/OrganizeFieldsTransformerEditor.tsx

@@ -80,6 +80,7 @@ const OrganizeFieldsTransformerEditor: React.FC<OrganizeFieldsTransformerEditorP
               return (
                 <DraggableFieldName
                   fieldName={fieldName}
+                  renamedFieldName={renameByName[fieldName]}
                   index={index}
                   onToggleVisibility={onToggleVisibility}
                   onRenameField={onRenameField}
@@ -96,8 +97,11 @@ const OrganizeFieldsTransformerEditor: React.FC<OrganizeFieldsTransformerEditorP
   );
 };
 
+OrganizeFieldsTransformerEditor.displayName = 'OrganizeFieldsTransformerEditor';
+
 interface DraggableFieldProps {
   fieldName: string;
+  renamedFieldName?: string;
   index: number;
   visible: boolean;
   onToggleVisibility: (fieldName: string, isVisible: boolean) => void;
@@ -106,6 +110,7 @@ interface DraggableFieldProps {
 
 const DraggableFieldName: React.FC<DraggableFieldProps> = ({
   fieldName,
+  renamedFieldName,
   index,
   visible,
   onToggleVisibility,
@@ -133,12 +138,15 @@ const DraggableFieldName: React.FC<DraggableFieldProps> = ({
                 surface="header"
                 onClick={() => onToggleVisibility(fieldName, visible)}
               />
-              <span className={styles.name}>{fieldName}</span>
+              <span className={styles.name} title={fieldName}>
+                {fieldName}
+              </span>
             </div>
             <Input
               className="flex-grow-1"
+              defaultValue={renamedFieldName || ''}
               placeholder={`Rename ${fieldName}`}
-              onChange={event => onRenameField(fieldName, event.currentTarget.value)}
+              onBlur={event => onRenameField(fieldName, event.currentTarget.value)}
             />
           </div>
         </div>
@@ -147,6 +155,8 @@ const DraggableFieldName: React.FC<DraggableFieldProps> = ({
   );
 };
 
+DraggableFieldName.displayName = 'DraggableFieldName';
+
 const getFieldNameStyles = stylesFactory((theme: GrafanaTheme) => ({
   toggle: css`
     margin: 0 8px;
@@ -161,6 +171,9 @@ const getFieldNameStyles = stylesFactory((theme: GrafanaTheme) => ({
     }
   `,
   name: css`
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     font-size: ${theme.typography.size.sm};
     font-weight: ${theme.typography.weight.semibold};
   `,