Bug/cldn 2053

cccs-build/superset/Dockerfile

@@ -1,7 +1,7 @@
 # Vault CA container import
 ARG VAULT_CA_CONTAINER=uchimera.azurecr.io/cccs/hogwarts/vault-ca:master_11376_a25c34e1
 FROM $VAULT_CA_CONTAINER AS vault_ca
-FROM uchimera.azurecr.io/cccs/superset-base:bug_CLDN-2445_20240521191045_b10149
+FROM uchimera.azurecr.io/cccs/superset-base:bug_cldn-2053_20240708212153_b10442
 
 USER root
 

superset-frontend/src/cccs-viz/plugins/plugin-chart-ag-grid/src/ag-grid/AGGridViz.tsx

@@ -2,6 +2,7 @@ import React, {
   ChangeEvent,
   useCallback,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -35,6 +36,8 @@ import { addWarningToast } from 'src/components/MessageToasts/actions';
 import ChartContextMenu, {
   Ref as ContextRef,
 } from './ContextMenu/AGGridContextMenu';
+import CustomHeader from './CustomHeader/customHeader';
+import './CustomHeader/customHeaderStyles.css';
 
 import CopyMenuItem from './ContextMenu/MenuItems/CopyMenuItem';
 import CopyWithHeaderMenuItem from './ContextMenu/MenuItems/CopyWithHeaderMenuItem';
@@ -69,11 +72,6 @@ const RETENTION_LIMIT = 100;
 const SUBMISSION_LIMIT = 10;
 const DOWNLOAD_LIMIT = 10;
 
-const headerStyles = css`
-  display: flex;
-  flex-direction: row;
-`;
-
 const paginationStyles = css`
   margin-right: 0.5rem;
 `;
@@ -614,6 +612,13 @@ export default function AGGridViz({
     return menuItems;
   };
 
+  const components = useMemo(
+    () => ({
+      agColumnHeader: CustomHeader,
+    }),
+    [],
+  );
+
   return !isDestroyed ? (
     <>
       <ChartContextMenu
@@ -637,7 +642,7 @@ export default function AGGridViz({
           className="form-inline"
           style={{ flex: '0 1 auto', paddingBottom: '0.5em' }}
         >
-          <div css={headerStyles}>
+          <div className="headerStyles">
             {pageLength > 0 && (
               <span
                 className="dt-select-page-size form-inline"
@@ -690,6 +695,7 @@ export default function AGGridViz({
           enableRangeSelection
           rowData={rowData}
           enableBrowserTooltips
+          components={components}
           onRangeSelectionChanged={onRangeSelectionChanged}
           cacheQuickFilter
           suppressRowClickSelection

superset-frontend/src/cccs-viz/plugins/plugin-chart-ag-grid/src/ag-grid/CustomHeader/customHeader.jsx

@@ -0,0 +1,27 @@
+import React, { useRef } from 'react';
+
+export default props => {
+  const refButton = useRef(null);
+  const refLabel = useRef(null);
+
+  const onMenuClicked = () => {
+    props.showColumnMenu(refButton.current);
+  };
+
+  return (
+    <div className="headerWrapper">
+      <div
+        ref={refButton}
+        className="customHeaderMenuButton"
+        onClick={() => onMenuClicked()}
+        role="button"
+        tabIndex="0"
+      >
+        <i className="fa fa-bars" />
+      </div>
+      <div ref={refLabel} className="customHeaderLabel">
+        {props.displayName}
+      </div>
+    </div>
+  );
+};

superset-frontend/src/cccs-viz/plugins/plugin-chart-ag-grid/src/ag-grid/CustomHeader/customHeaderStyles.css

@@ -0,0 +1,23 @@
+.headerWrapper {
+  display: flex;
+  overflow: hidden;
+  gap: 0.7rem;
+}
+
+.customHeaderLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.customSortRemoveLabel {
+  font-size: 11px;
+}
+
+.active {
+  color: cornflowerblue;
+}
+
+.headerStyles {
+  display: flex;
+  flex-direction: row;
+}